Skip to content

Commit a7ff33c

Browse files
authored
refactor: merge component token files (#30822)
* refactor: merge button tokens * refactor: merge button toggle tokens # Conflicts: # src/material/button-toggle/button-toggle.scss * refactor: merge card tokens * refactor: combine pseudocheckbox tokens * refactor: merge form field tokens * refactor: merge tabs tokens * refactor: rename shadow tokens and delete button token file * refactor: fix lint * refactor: make form field overrides a list * refactor: remove ambiguous tokens test * refactor: remove unused warning test function * refactor: fix form field selectors * refactor: update density * refactor: fix tabs tokens
1 parent b1cc050 commit a7ff33c

File tree

81 files changed

+2159
-4203
lines changed

Some content is hidden

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

81 files changed

+2159
-4203
lines changed

Diff for: src/material/button-toggle/BUILD.bazel

+2-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ package(default_visibility = ["//visibility:public"])
1313
sass_library(
1414
name = "m3",
1515
srcs = [
16-
"_m3-standard-button-toggle.scss",
16+
"_m3-button-toggle.scss",
1717
],
1818
deps = [
1919
"//src/material/core/style:sass_utils",
@@ -24,8 +24,7 @@ sass_library(
2424
sass_library(
2525
name = "m2",
2626
srcs = [
27-
"_m2-legacy-button-toggle.scss",
28-
"_m2-standard-button-toggle.scss",
27+
"_m2-button-toggle.scss",
2928
],
3029
deps = [
3130
"//src/material/core/style:elevation",

Diff for: src/material/button-toggle/_button-toggle-theme.scss

+13-36
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
@use '../core/theming/validation';
55
@use '../core/tokens/token-utils';
66
@use '../core/typography/typography';
7-
@use './m2-legacy-button-toggle';
8-
@use './m2-standard-button-toggle';
7+
@use './m2-button-toggle';
98

109
/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
1110
/// for the mat-button-toggle.
@@ -16,12 +15,8 @@
1615
} @else {
1716
@include sass-utils.current-selector-or-root() {
1817
@include token-utils.create-token-values-mixed(
19-
m2-legacy-button-toggle.$prefix,
20-
m2-legacy-button-toggle.get-unthemable-tokens()
21-
);
22-
@include token-utils.create-token-values-mixed(
23-
m2-standard-button-toggle.$prefix,
24-
m2-standard-button-toggle.get-unthemable-tokens()
18+
m2-button-toggle.$prefix,
19+
m2-button-toggle.get-unthemable-tokens()
2520
);
2621
}
2722
}
@@ -38,12 +33,8 @@
3833
} @else {
3934
@include sass-utils.current-selector-or-root() {
4035
@include token-utils.create-token-values-mixed(
41-
m2-legacy-button-toggle.$prefix,
42-
m2-legacy-button-toggle.get-color-tokens($theme)
43-
);
44-
@include token-utils.create-token-values-mixed(
45-
m2-standard-button-toggle.$prefix,
46-
m2-standard-button-toggle.get-color-tokens($theme)
36+
m2-button-toggle.$prefix,
37+
m2-button-toggle.get-color-tokens($theme)
4738
);
4839
}
4940
}
@@ -57,12 +48,8 @@
5748
} @else {
5849
@include sass-utils.current-selector-or-root() {
5950
@include token-utils.create-token-values-mixed(
60-
m2-legacy-button-toggle.$prefix,
61-
m2-legacy-button-toggle.get-typography-tokens($theme)
62-
);
63-
@include token-utils.create-token-values-mixed(
64-
m2-standard-button-toggle.$prefix,
65-
m2-standard-button-toggle.get-typography-tokens($theme)
51+
m2-button-toggle.$prefix,
52+
m2-button-toggle.get-typography-tokens($theme)
6653
);
6754
}
6855
}
@@ -76,30 +63,20 @@
7663
} @else {
7764
@include sass-utils.current-selector-or-root() {
7865
@include token-utils.create-token-values-mixed(
79-
m2-legacy-button-toggle.$prefix,
80-
m2-legacy-button-toggle.get-density-tokens($theme)
81-
);
82-
@include token-utils.create-token-values-mixed(
83-
m2-standard-button-toggle.$prefix,
84-
m2-standard-button-toggle.get-density-tokens($theme)
66+
m2-button-toggle.$prefix,
67+
m2-button-toggle.get-density-tokens($theme)
8568
);
8669
}
8770
}
8871
}
8972

9073
/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
9174
@function _define-overrides() {
92-
$legacy-tokens: m2-legacy-button-toggle.get-token-slots();
93-
$standard-tokens: m2-standard-button-toggle.get-token-slots();
75+
$standard-tokens: m2-button-toggle.get-token-slots();
9476

9577
@return (
9678
(
97-
namespace: m2-legacy-button-toggle.$prefix,
98-
tokens: $legacy-tokens,
99-
prefix: 'legacy-',
100-
),
101-
(
102-
namespace: m2-standard-button-toggle.$prefix,
79+
namespace: m2-button-toggle.$prefix,
10380
tokens: $standard-tokens,
10481
),
10582
);
@@ -141,11 +118,11 @@
141118
);
142119
$mat-standard-button-toggle-tokens: token-utils.get-tokens-for(
143120
$tokens,
144-
m2-standard-button-toggle.$prefix,
121+
m2-button-toggle.$prefix,
145122
$options...
146123
);
147124
@include token-utils.create-token-values(
148-
m2-standard-button-toggle.$prefix,
125+
m2-button-toggle.$prefix,
149126
$mat-standard-button-toggle-tokens
150127
);
151128
}

Diff for: src/material/button-toggle/_m2-standard-button-toggle.scss renamed to src/material/button-toggle/_m2-button-toggle.scss

+32-12
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,12 @@ $prefix: (mat, button-toggle);
1212
// but may be in a future version of the theming API.
1313
@function get-unthemable-tokens() {
1414
@return (
15-
shape: 4px,
16-
hover-state-layer-opacity: 0.04,
1715
focus-state-layer-opacity: 0.12,
16+
hover-state-layer-opacity: 0.04,
17+
legacy-focus-state-layer-opacity: 1,
18+
legacy-height: 36px,
19+
legacy-shape: 2px,
20+
shape: 4px,
1821
);
1922
}
2023

@@ -33,19 +36,31 @@ $prefix: (mat, button-toggle);
3336
$theme-divider-color);
3437

3538
@return (
36-
text-color: inspection.get-theme-color($theme, foreground, text),
3739
background-color: inspection.get-theme-color($theme, background, card),
38-
state-layer-color: sass-utils.safe-color-change(
39-
inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
40-
selected-state-background-color: inspection.get-theme-color(
41-
$theme, background, selected-button),
42-
selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
43-
disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
44-
disabled-state-background-color: inspection.get-theme-color($theme, background, card),
45-
disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
4640
disabled-selected-state-background-color:
47-
inspection.get-theme-color($theme, background, selected-disabled-button),
41+
inspection.get-theme-color($theme, background, selected-disabled-button),
42+
disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
43+
disabled-state-background-color: inspection.get-theme-color($theme, background, card),
44+
disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
4845
divider-color: $divider-color,
46+
legacy-disabled-selected-state-background-color:
47+
inspection.get-theme-color($theme, background, selected-disabled-button),
48+
legacy-disabled-state-background-color:
49+
inspection.get-theme-color($theme, background, disabled-button-toggle),
50+
legacy-disabled-state-text-color:
51+
inspection.get-theme-color($theme, foreground, disabled-button),
52+
legacy-selected-state-background-color:
53+
inspection.get-theme-color($theme, background, selected-button),
54+
legacy-selected-state-text-color:
55+
inspection.get-theme-color($theme, foreground, secondary-text),
56+
legacy-state-layer-color: inspection.get-theme-color($theme, background, focused-button),
57+
legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
58+
selected-state-background-color:
59+
inspection.get-theme-color($theme, background, selected-button),
60+
selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
61+
state-layer-color: sass-utils.safe-color-change(
62+
inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
63+
text-color: inspection.get-theme-color($theme, foreground, text),
4964
);
5065
}
5166

@@ -57,6 +72,11 @@ $prefix: (mat, button-toggle);
5772
label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
5873
label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
5974
label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
75+
legacy-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
76+
legacy-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
77+
legacy-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
78+
legacy-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
79+
legacy-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
6080
);
6181
}
6282

Diff for: src/material/button-toggle/_m2-legacy-button-toggle.scss

-59
This file was deleted.

0 commit comments

Comments
 (0)