Skip to content

Commit bc410e0

Browse files
andrewseguinandrewseguin
committed
refactor: merge button toggle tokens
1 parent b35c66a commit bc410e0

File tree

8 files changed

+243
-349
lines changed

8 files changed

+243
-349
lines changed

‎src/material/button-toggle/BUILD.bazel

Lines changed: 2 additions & 3 deletions
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",

‎src/material/button-toggle/_button-toggle-theme.scss

Lines changed: 13 additions & 36 deletions
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
}

‎src/material/button-toggle/_m2-standard-button-toggle.scss renamed to ‎src/material/button-toggle/_m2-button-toggle.scss

Lines changed: 24 additions & 12 deletions
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,23 @@ $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),
40+
disabled-selected-state-background-color:inspection.get-theme-color($theme, background, selected-disabled-button),
4541
disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
46-
disabled-selected-state-background-color:
47-
inspection.get-theme-color($theme, background, selected-disabled-button),
42+
disabled-state-background-color: inspection.get-theme-color($theme, background, card),
43+
disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
4844
divider-color: $divider-color,
45+
legacy-disabled-selected-state-background-color: inspection.get-theme-color($theme, background, selected-disabled-button),
46+
legacy-disabled-state-background-color: inspection.get-theme-color($theme, background, disabled-button-toggle),
47+
legacy-disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
48+
legacy-selected-state-background-color: inspection.get-theme-color($theme, background, selected-button),
49+
legacy-selected-state-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
50+
legacy-state-layer-color: inspection.get-theme-color($theme, background, focused-button),
51+
legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
52+
selected-state-background-color: inspection.get-theme-color($theme, background, selected-button),
53+
selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
54+
state-layer-color: sass-utils.safe-color-change(inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
55+
text-color: inspection.get-theme-color($theme, foreground, text),
4956
);
5057
}
5158

@@ -57,6 +64,11 @@ $prefix: (mat, button-toggle);
5764
label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
5865
label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
5966
label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
67+
legacy-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
68+
legacy-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
69+
legacy-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
70+
legacy-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
71+
legacy-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
6072
);
6173
}
6274

‎src/material/button-toggle/_m2-legacy-button-toggle.scss

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎src/material/button-toggle/_m3-standard-button-toggle.scss renamed to ‎src/material/button-toggle/_m3-button-toggle.scss

File renamed without changes.

0 commit comments

Comments
 (0)