Skip to content

Commit

Permalink
chore: create shape logical tokens in Sass component token files
Browse files Browse the repository at this point in the history 
Adds `@material/web/tokens/internal/shape` to take a shape token and create 4 logical tokens from its value.

All components' logical shape tokens are now generated by the token files themselves, rather than added in each component's styles.

PiperOrigin-RevId: 601783846
  • Loading branch information
@asyncLiz @copybara-github
asyncLiz authored and copybara-github committed Jan 26, 2024
1 parent 84536d7 commit 5e40a1b
Show file tree
Hide file tree
Showing 55 changed files with 753 additions and 936 deletions.
31 changes: 3 additions & 28 deletions button/internal/_elevated-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,7 @@
// go/keep-sorted end

@mixin theme($tokens) {
$supported-tokens: list.join(
tokens.$md-comp-elevated-button-supported-tokens,
(
'container-shape-start-start',
'container-shape-start-end',
'container-shape-end-end',
'container-shape-end-start'
)
);

$supported-tokens: tokens.$md-comp-elevated-button-supported-tokens;
@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
@error 'Token `#{$token}` is not a supported token.';
Expand All @@ -39,26 +30,10 @@
);

:host {
// Only use the logical properties.
$tokens: map.remove($tokens, 'container-shape');
@each $token, $value in $tokens {
--_#{$token}: #{$value};
}

// Support logical shape properties
--_container-shape-start-start: var(
--md-elevated-button-container-shape-start-start,
var(--_container-shape)
);
--_container-shape-start-end: var(
--md-elevated-button-container-shape-start-end,
var(--_container-shape)
);
--_container-shape-end-end: var(
--md-elevated-button-container-shape-end-end,
var(--_container-shape)
);
--_container-shape-end-start: var(
--md-elevated-button-container-shape-end-start,
var(--_container-shape)
);
}
}
31 changes: 3 additions & 28 deletions button/internal/_filled-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,7 @@
// go/keep-sorted end

@mixin theme($tokens) {
$supported-tokens: list.join(
tokens.$md-comp-filled-button-supported-tokens,
(
'container-shape-start-start',
'container-shape-start-end',
'container-shape-end-end',
'container-shape-end-start'
)
);

$supported-tokens: tokens.$md-comp-filled-button-supported-tokens;
@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
@error 'Token `#{$token}` is not a supported token.';
Expand All @@ -39,26 +30,10 @@
);

:host {
// Only use the logical properties.
$tokens: map.remove($tokens, 'container-shape');
@each $token, $value in $tokens {
--_#{$token}: #{$value};
}

// Support logical shape properties
--_container-shape-start-start: var(
--md-filled-button-container-shape-start-start,
var(--_container-shape)
);
--_container-shape-start-end: var(
--md-filled-button-container-shape-start-end,
var(--_container-shape)
);
--_container-shape-end-end: var(
--md-filled-button-container-shape-end-end,
var(--_container-shape)
);
--_container-shape-end-start: var(
--md-filled-button-container-shape-end-start,
var(--_container-shape)
);
}
}
31 changes: 3 additions & 28 deletions button/internal/_filled-tonal-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,7 @@
// go/keep-sorted end

@mixin theme($tokens) {
$supported-tokens: list.join(
tokens.$md-comp-filled-tonal-button-supported-tokens,
(
'container-shape-start-start',
'container-shape-start-end',
'container-shape-end-end',
'container-shape-end-start'
)
);

$supported-tokens: tokens.$md-comp-filled-tonal-button-supported-tokens;
@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
@error 'Token `#{$token}` is not a supported token.';
Expand All @@ -39,26 +30,10 @@
);

:host {
// Only use the logical properties.
$tokens: map.remove($tokens, 'container-shape');
@each $token, $value in $tokens {
--_#{$token}: #{$value};
}

// Support logical shape properties
--_container-shape-start-start: var(
--md-filled-tonal-button-container-shape-start-start,
var(--_container-shape)
);
--_container-shape-start-end: var(
--md-filled-tonal-button-container-shape-start-end,
var(--_container-shape)
);
--_container-shape-end-end: var(
--md-filled-tonal-button-container-shape-end-end,
var(--_container-shape)
);
--_container-shape-end-start: var(
--md-filled-tonal-button-container-shape-end-start,
var(--_container-shape)
);
}
}
31 changes: 3 additions & 28 deletions button/internal/_outlined-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,7 @@
// go/keep-sorted end

@mixin theme($tokens) {
$supported-tokens: list.join(
tokens.$md-comp-outlined-button-supported-tokens,
(
'container-shape-start-start',
'container-shape-start-end',
'container-shape-end-end',
'container-shape-end-start'
)
);

$supported-tokens: tokens.$md-comp-outlined-button-supported-tokens;
@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
@error 'Token `#{$token}` is not a supported token.';
Expand All @@ -39,31 +30,15 @@
);

:host {
// Only use the logical properties.
$tokens: map.remove($tokens, 'container-shape');
@each $token, $value in $tokens {
--_#{$token}: #{$value};
}

--_container-color: none;
--_disabled-container-color: none;
--_disabled-container-opacity: 0;

// Support logical shape properties
--_container-shape-start-start: var(
--md-outlined-button-container-shape-start-start,
var(--_container-shape)
);
--_container-shape-start-end: var(
--md-outlined-button-container-shape-start-end,
var(--_container-shape)
);
--_container-shape-end-end: var(
--md-outlined-button-container-shape-end-end,
var(--_container-shape)
);
--_container-shape-end-start: var(
--md-outlined-button-container-shape-end-start,
var(--_container-shape)
);
}

.outline {
Expand Down
31 changes: 3 additions & 28 deletions button/internal/_text-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,7 @@
// go/keep-sorted end

@mixin theme($tokens) {
$supported-tokens: list.join(
tokens.$md-comp-text-button-supported-tokens,
(
'container-shape-start-start',
'container-shape-start-end',
'container-shape-end-end',
'container-shape-end-start'
)
);

$supported-tokens: tokens.$md-comp-text-button-supported-tokens;
@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
@error 'Token `#{$token}` is not a supported token.';
Expand All @@ -39,30 +30,14 @@
);

:host {
// Only use the logical properties.
$tokens: map.remove($tokens, 'container-shape');
@each $token, $value in $tokens {
--_#{$token}: #{$value};
}

--_container-color: none;
--_disabled-container-color: none;
--_disabled-container-opacity: 0;

// Support logical shape properties
--_container-shape-start-start: var(
--md-text-button-container-shape-start-start,
var(--_container-shape)
);
--_container-shape-start-end: var(
--md-text-button-container-shape-start-end,
var(--_container-shape)
);
--_container-shape-end-end: var(
--md-text-button-container-shape-end-end,
var(--_container-shape)
);
--_container-shape-end-start: var(
--md-text-button-container-shape-end-start,
var(--_container-shape)
);
}
}
27 changes: 1 addition & 26 deletions checkbox/internal/_checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,7 @@ $_indeterminate-bottom-left: 4px, -10px;
$_checkmark-bottom-left: 7px, -14px;

@mixin theme($tokens) {
$supported-tokens: list.join(
tokens.$md-comp-checkbox-supported-tokens,
(
'container-shape-start-start',
'container-shape-start-end',
'container-shape-end-end',
'container-shape-end-start'
)
);

$supported-tokens: $md-comp-checkbox-supported-tokens;
@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
@error 'Token `#{$token}` is not a supported token.';
Expand All @@ -51,22 +42,6 @@ $_checkmark-bottom-left: 7px, -14px;
$exclude-custom-properties: false,
);

// Support logical shape properties
$container-shape: map.get($tokens, 'container-shape');
$tokens: map.merge(
$tokens,
(
'container-shape-start-start':
var(--md-checkbox-container-shape-start-start, #{$container-shape}),
'container-shape-start-end':
var(--md-checkbox-container-shape-start-end, #{$container-shape}),
'container-shape-end-end':
var(--md-checkbox-container-shape-end-end, #{$container-shape}),
'container-shape-end-start':
var(--md-checkbox-container-shape-end-start, #{$container-shape}),
)
);

:host {
border-start-start-radius: map.get($tokens, 'container-shape-start-start');
border-start-end-radius: map.get($tokens, 'container-shape-start-end');
Expand Down
32 changes: 4 additions & 28 deletions chips/internal/_assist-chip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,14 @@

// go/keep-sorted start
@use 'sass:list';
@use 'sass:map';
// go/keep-sorted end
// go/keep-sorted start
@use '../../tokens';
// go/keep-sorted end

@mixin theme($tokens) {
$supported-tokens: list.join(
tokens.$md-comp-assist-chip-supported-tokens,
(
'container-shape-start-start',
'container-shape-start-end',
'container-shape-end-end',
'container-shape-end-start'
)
);

$supported-tokens: tokens.$md-comp-assist-chip-supported-tokens;
@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
@error 'Token `#{$token}` is not a supported token.';
Expand All @@ -38,27 +30,11 @@
);

:host {
// Only use the logical properties.
$tokens: map.remove($tokens, 'container-shape');
@each $token, $value in $tokens {
--_#{$token}: #{$value};
}

// Support logical shape properties
--_container-shape-start-start: var(
--md-assist-chip-container-shape-start-start,
var(--_container-shape)
);
--_container-shape-start-end: var(
--md-assist-chip-container-shape-start-end,
var(--_container-shape)
);
--_container-shape-end-end: var(
--md-assist-chip-container-shape-end-end,
var(--_container-shape)
);
--_container-shape-end-start: var(
--md-assist-chip-container-shape-end-start,
var(--_container-shape)
);
}

@media (forced-colors: active) {
Expand Down
32 changes: 4 additions & 28 deletions chips/internal/_filter-chip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,14 @@

// go/keep-sorted start
@use 'sass:list';
@use 'sass:map';
// go/keep-sorted end
// go/keep-sorted start
@use '../../tokens';
// go/keep-sorted end

@mixin theme($tokens) {
$supported-tokens: list.join(
tokens.$md-comp-filter-chip-supported-tokens,
(
'container-shape-start-start',
'container-shape-start-end',
'container-shape-end-end',
'container-shape-end-start'
)
);

$supported-tokens: tokens.$md-comp-filter-chip-supported-tokens;
@each $token, $value in $tokens {
@if list.index($supported-tokens, $token) == null {
@error 'Token `#{$token}` is not a supported token.';
Expand All @@ -38,27 +30,11 @@
);

:host {
// Only use the logical properties.
$tokens: map.remove($tokens, 'container-shape');
@each $token, $value in $tokens {
--_#{$token}: #{$value};
}

// Support logical shape properties
--_container-shape-start-start: var(
--md-filter-chip-container-shape-start-start,
var(--_container-shape)
);
--_container-shape-start-end: var(
--md-filter-chip-container-shape-start-end,
var(--_container-shape)
);
--_container-shape-end-end: var(
--md-filter-chip-container-shape-end-end,
var(--_container-shape)
);
--_container-shape-end-start: var(
--md-filter-chip-container-shape-end-start,
var(--_container-shape)
);
}

.selected.elevated::before {
Expand Down
Loading

0 comments on commit 5e40a1b

Please sign in to comment.