Skip to content

Commit 5e40a1b

Browse files
asynclizcopybara-github
asyncliz
authored and
copybara-github
committed
chore: create shape logical tokens in Sass component token files
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
1 parent 84536d7 commit 5e40a1b

File tree

55 files changed

+753
-936
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+753
-936
lines changed

‎button/internal/_elevated-button.scss‎

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,7 @@
1212
// go/keep-sorted end
1313

1414
@mixin theme($tokens) {
15-
$supported-tokens: list.join(
16-
tokens.$md-comp-elevated-button-supported-tokens,
17-
(
18-
'container-shape-start-start',
19-
'container-shape-start-end',
20-
'container-shape-end-end',
21-
'container-shape-end-start'
22-
)
23-
);
24-
15+
$supported-tokens: tokens.$md-comp-elevated-button-supported-tokens;
2516
@each $token, $value in $tokens {
2617
@if list.index($supported-tokens, $token) == null {
2718
@error 'Token `#{$token}` is not a supported token.';
@@ -39,26 +30,10 @@
3930
);
4031

4132
:host {
33+
// Only use the logical properties.
34+
$tokens: map.remove($tokens, 'container-shape');
4235
@each $token, $value in $tokens {
4336
--_#{$token}: #{$value};
4437
}
45-
46-
// Support logical shape properties
47-
--_container-shape-start-start: var(
48-
--md-elevated-button-container-shape-start-start,
49-
var(--_container-shape)
50-
);
51-
--_container-shape-start-end: var(
52-
--md-elevated-button-container-shape-start-end,
53-
var(--_container-shape)
54-
);
55-
--_container-shape-end-end: var(
56-
--md-elevated-button-container-shape-end-end,
57-
var(--_container-shape)
58-
);
59-
--_container-shape-end-start: var(
60-
--md-elevated-button-container-shape-end-start,
61-
var(--_container-shape)
62-
);
6338
}
6439
}

‎button/internal/_filled-button.scss‎

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,7 @@
1212
// go/keep-sorted end
1313

1414
@mixin theme($tokens) {
15-
$supported-tokens: list.join(
16-
tokens.$md-comp-filled-button-supported-tokens,
17-
(
18-
'container-shape-start-start',
19-
'container-shape-start-end',
20-
'container-shape-end-end',
21-
'container-shape-end-start'
22-
)
23-
);
24-
15+
$supported-tokens: tokens.$md-comp-filled-button-supported-tokens;
2516
@each $token, $value in $tokens {
2617
@if list.index($supported-tokens, $token) == null {
2718
@error 'Token `#{$token}` is not a supported token.';
@@ -39,26 +30,10 @@
3930
);
4031

4132
:host {
33+
// Only use the logical properties.
34+
$tokens: map.remove($tokens, 'container-shape');
4235
@each $token, $value in $tokens {
4336
--_#{$token}: #{$value};
4437
}
45-
46-
// Support logical shape properties
47-
--_container-shape-start-start: var(
48-
--md-filled-button-container-shape-start-start,
49-
var(--_container-shape)
50-
);
51-
--_container-shape-start-end: var(
52-
--md-filled-button-container-shape-start-end,
53-
var(--_container-shape)
54-
);
55-
--_container-shape-end-end: var(
56-
--md-filled-button-container-shape-end-end,
57-
var(--_container-shape)
58-
);
59-
--_container-shape-end-start: var(
60-
--md-filled-button-container-shape-end-start,
61-
var(--_container-shape)
62-
);
6338
}
6439
}

‎button/internal/_filled-tonal-button.scss‎

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,7 @@
1212
// go/keep-sorted end
1313

1414
@mixin theme($tokens) {
15-
$supported-tokens: list.join(
16-
tokens.$md-comp-filled-tonal-button-supported-tokens,
17-
(
18-
'container-shape-start-start',
19-
'container-shape-start-end',
20-
'container-shape-end-end',
21-
'container-shape-end-start'
22-
)
23-
);
24-
15+
$supported-tokens: tokens.$md-comp-filled-tonal-button-supported-tokens;
2516
@each $token, $value in $tokens {
2617
@if list.index($supported-tokens, $token) == null {
2718
@error 'Token `#{$token}` is not a supported token.';
@@ -39,26 +30,10 @@
3930
);
4031

4132
:host {
33+
// Only use the logical properties.
34+
$tokens: map.remove($tokens, 'container-shape');
4235
@each $token, $value in $tokens {
4336
--_#{$token}: #{$value};
4437
}
45-
46-
// Support logical shape properties
47-
--_container-shape-start-start: var(
48-
--md-filled-tonal-button-container-shape-start-start,
49-
var(--_container-shape)
50-
);
51-
--_container-shape-start-end: var(
52-
--md-filled-tonal-button-container-shape-start-end,
53-
var(--_container-shape)
54-
);
55-
--_container-shape-end-end: var(
56-
--md-filled-tonal-button-container-shape-end-end,
57-
var(--_container-shape)
58-
);
59-
--_container-shape-end-start: var(
60-
--md-filled-tonal-button-container-shape-end-start,
61-
var(--_container-shape)
62-
);
6338
}
6439
}

‎button/internal/_outlined-button.scss‎

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,7 @@
1212
// go/keep-sorted end
1313

1414
@mixin theme($tokens) {
15-
$supported-tokens: list.join(
16-
tokens.$md-comp-outlined-button-supported-tokens,
17-
(
18-
'container-shape-start-start',
19-
'container-shape-start-end',
20-
'container-shape-end-end',
21-
'container-shape-end-start'
22-
)
23-
);
24-
15+
$supported-tokens: tokens.$md-comp-outlined-button-supported-tokens;
2516
@each $token, $value in $tokens {
2617
@if list.index($supported-tokens, $token) == null {
2718
@error 'Token `#{$token}` is not a supported token.';
@@ -39,31 +30,15 @@
3930
);
4031

4132
:host {
33+
// Only use the logical properties.
34+
$tokens: map.remove($tokens, 'container-shape');
4235
@each $token, $value in $tokens {
4336
--_#{$token}: #{$value};
4437
}
4538

4639
--_container-color: none;
4740
--_disabled-container-color: none;
4841
--_disabled-container-opacity: 0;
49-
50-
// Support logical shape properties
51-
--_container-shape-start-start: var(
52-
--md-outlined-button-container-shape-start-start,
53-
var(--_container-shape)
54-
);
55-
--_container-shape-start-end: var(
56-
--md-outlined-button-container-shape-start-end,
57-
var(--_container-shape)
58-
);
59-
--_container-shape-end-end: var(
60-
--md-outlined-button-container-shape-end-end,
61-
var(--_container-shape)
62-
);
63-
--_container-shape-end-start: var(
64-
--md-outlined-button-container-shape-end-start,
65-
var(--_container-shape)
66-
);
6742
}
6843

6944
.outline {

‎button/internal/_text-button.scss‎

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,7 @@
1212
// go/keep-sorted end
1313

1414
@mixin theme($tokens) {
15-
$supported-tokens: list.join(
16-
tokens.$md-comp-text-button-supported-tokens,
17-
(
18-
'container-shape-start-start',
19-
'container-shape-start-end',
20-
'container-shape-end-end',
21-
'container-shape-end-start'
22-
)
23-
);
24-
15+
$supported-tokens: tokens.$md-comp-text-button-supported-tokens;
2516
@each $token, $value in $tokens {
2617
@if list.index($supported-tokens, $token) == null {
2718
@error 'Token `#{$token}` is not a supported token.';
@@ -39,30 +30,14 @@
3930
);
4031

4132
:host {
33+
// Only use the logical properties.
34+
$tokens: map.remove($tokens, 'container-shape');
4235
@each $token, $value in $tokens {
4336
--_#{$token}: #{$value};
4437
}
4538

4639
--_container-color: none;
4740
--_disabled-container-color: none;
4841
--_disabled-container-opacity: 0;
49-
50-
// Support logical shape properties
51-
--_container-shape-start-start: var(
52-
--md-text-button-container-shape-start-start,
53-
var(--_container-shape)
54-
);
55-
--_container-shape-start-end: var(
56-
--md-text-button-container-shape-start-end,
57-
var(--_container-shape)
58-
);
59-
--_container-shape-end-end: var(
60-
--md-text-button-container-shape-end-end,
61-
var(--_container-shape)
62-
);
63-
--_container-shape-end-start: var(
64-
--md-text-button-container-shape-end-start,
65-
var(--_container-shape)
66-
);
6742
}
6843
}

‎checkbox/internal/_checkbox.scss‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,7 @@ $_indeterminate-bottom-left: 4px, -10px;
2525
$_checkmark-bottom-left: 7px, -14px;
2626

2727
@mixin theme($tokens) {
28-
$supported-tokens: list.join(
29-
tokens.$md-comp-checkbox-supported-tokens,
30-
(
31-
'container-shape-start-start',
32-
'container-shape-start-end',
33-
'container-shape-end-end',
34-
'container-shape-end-start'
35-
)
36-
);
37-
28+
$supported-tokens: $md-comp-checkbox-supported-tokens;
3829
@each $token, $value in $tokens {
3930
@if list.index($supported-tokens, $token) == null {
4031
@error 'Token `#{$token}` is not a supported token.';
@@ -51,22 +42,6 @@ $_checkmark-bottom-left: 7px, -14px;
5142
$exclude-custom-properties: false,
5243
);
5344

54-
// Support logical shape properties
55-
$container-shape: map.get($tokens, 'container-shape');
56-
$tokens: map.merge(
57-
$tokens,
58-
(
59-
'container-shape-start-start':
60-
var(--md-checkbox-container-shape-start-start, #{$container-shape}),
61-
'container-shape-start-end':
62-
var(--md-checkbox-container-shape-start-end, #{$container-shape}),
63-
'container-shape-end-end':
64-
var(--md-checkbox-container-shape-end-end, #{$container-shape}),
65-
'container-shape-end-start':
66-
var(--md-checkbox-container-shape-end-start, #{$container-shape}),
67-
)
68-
);
69-
7045
:host {
7146
border-start-start-radius: map.get($tokens, 'container-shape-start-start');
7247
border-start-end-radius: map.get($tokens, 'container-shape-start-end');

‎chips/internal/_assist-chip.scss‎

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,14 @@
55

66
// go/keep-sorted start
77
@use 'sass:list';
8+
@use 'sass:map';
89
// go/keep-sorted end
910
// go/keep-sorted start
1011
@use '../../tokens';
1112
// go/keep-sorted end
1213

1314
@mixin theme($tokens) {
14-
$supported-tokens: list.join(
15-
tokens.$md-comp-assist-chip-supported-tokens,
16-
(
17-
'container-shape-start-start',
18-
'container-shape-start-end',
19-
'container-shape-end-end',
20-
'container-shape-end-start'
21-
)
22-
);
23-
15+
$supported-tokens: tokens.$md-comp-assist-chip-supported-tokens;
2416
@each $token, $value in $tokens {
2517
@if list.index($supported-tokens, $token) == null {
2618
@error 'Token `#{$token}` is not a supported token.';
@@ -38,27 +30,11 @@
3830
);
3931

4032
:host {
33+
// Only use the logical properties.
34+
$tokens: map.remove($tokens, 'container-shape');
4135
@each $token, $value in $tokens {
4236
--_#{$token}: #{$value};
4337
}
44-
45-
// Support logical shape properties
46-
--_container-shape-start-start: var(
47-
--md-assist-chip-container-shape-start-start,
48-
var(--_container-shape)
49-
);
50-
--_container-shape-start-end: var(
51-
--md-assist-chip-container-shape-start-end,
52-
var(--_container-shape)
53-
);
54-
--_container-shape-end-end: var(
55-
--md-assist-chip-container-shape-end-end,
56-
var(--_container-shape)
57-
);
58-
--_container-shape-end-start: var(
59-
--md-assist-chip-container-shape-end-start,
60-
var(--_container-shape)
61-
);
6238
}
6339

6440
@media (forced-colors: active) {

‎chips/internal/_filter-chip.scss‎

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,14 @@
55

66
// go/keep-sorted start
77
@use 'sass:list';
8+
@use 'sass:map';
89
// go/keep-sorted end
910
// go/keep-sorted start
1011
@use '../../tokens';
1112
// go/keep-sorted end
1213

1314
@mixin theme($tokens) {
14-
$supported-tokens: list.join(
15-
tokens.$md-comp-filter-chip-supported-tokens,
16-
(
17-
'container-shape-start-start',
18-
'container-shape-start-end',
19-
'container-shape-end-end',
20-
'container-shape-end-start'
21-
)
22-
);
23-
15+
$supported-tokens: tokens.$md-comp-filter-chip-supported-tokens;
2416
@each $token, $value in $tokens {
2517
@if list.index($supported-tokens, $token) == null {
2618
@error 'Token `#{$token}` is not a supported token.';
@@ -38,27 +30,11 @@
3830
);
3931

4032
:host {
33+
// Only use the logical properties.
34+
$tokens: map.remove($tokens, 'container-shape');
4135
@each $token, $value in $tokens {
4236
--_#{$token}: #{$value};
4337
}
44-
45-
// Support logical shape properties
46-
--_container-shape-start-start: var(
47-
--md-filter-chip-container-shape-start-start,
48-
var(--_container-shape)
49-
);
50-
--_container-shape-start-end: var(
51-
--md-filter-chip-container-shape-start-end,
52-
var(--_container-shape)
53-
);
54-
--_container-shape-end-end: var(
55-
--md-filter-chip-container-shape-end-end,
56-
var(--_container-shape)
57-
);
58-
--_container-shape-end-start: var(
59-
--md-filter-chip-container-shape-end-start,
60-
var(--_container-shape)
61-
);
6238
}
6339

6440
.selected.elevated::before {

0 commit comments

Comments
 (0)