Skip to content

Commit 950ca90

Browse files
mmalerbammalerba
committed
feat(material-experimental/theming): add M3 button-toggle support (#28179)
(cherry picked from commit d12bd7f)
1 parent 3d118c6 commit 950ca90

File tree

6 files changed

+111
-32
lines changed

6 files changed

+111
-32
lines changed

‎src/dev-app/theme-m3.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ html {
4141
@include mat.autocomplete-theme($light-theme);
4242
@include mat.badge-theme($light-theme);
4343
@include mat.bottom-sheet-theme($light-theme);
44+
@include mat.button-toggle-theme($light-theme);
4445
@include mat.card-theme($light-theme);
4546
@include mat.checkbox-theme($light-theme);
4647
@include mat.datepicker-theme($light-theme);
@@ -82,6 +83,7 @@ html {
8283
@include mat.autocomplete-color($dark-theme);
8384
@include mat.badge-color($dark-theme);
8485
@include mat.bottom-sheet-color($dark-theme);
86+
@include mat.button-toggle-color($dark-theme);
8587
@include mat.card-color($dark-theme);
8688
@include mat.checkbox-color($dark-theme);
8789
@include mat.datepicker-color($dark-theme);
@@ -122,6 +124,7 @@ html {
122124
@include mat.autocomplete-density($scale-theme);
123125
@include mat.badge-density($scale-theme);
124126
@include mat.bottom-sheet-density($scale-theme);
127+
@include mat.button-toggle-density($scale-theme);
125128
@include mat.card-density($scale-theme);
126129
@include mat.checkbox-density($scale-theme);
127130
@include mat.datepicker-density($scale-theme);

‎src/material-experimental/theming/_custom-tokens.scss

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,38 @@
6767
);
6868
}
6969

70+
/// Generates custom tokens for the mat-button-toggle.
71+
/// @param {Map} $systems The MDC system tokens
72+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
73+
/// @return {Map} A set of custom tokens for the mat-button-toggle
74+
@function button-toggle($systems, $exclude-hardcoded) {
75+
@return (
76+
shape: _hardcode(9999px, $exclude-hardcoded),
77+
hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
78+
focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
79+
text-color: map.get($systems, md-sys-color, on-surface),
80+
background-color: _hardcode(transparent, $exclude-hardcoded),
81+
state-layer-color: map.get($systems, md-sys-color, on-surface),
82+
selected-state-background-color: map.get($systems, md-sys-color, secondary-container),
83+
selected-state-text-color: map.get($systems, md-sys-color, on-secondary-container),
84+
disabled-state-text-color: mat.private-safe-color-change(
85+
map.get($systems, md-sys-color, on-surface),
86+
$alpha: 0.38,
87+
),
88+
disabled-state-background-color: _hardcode(transparent, $exclude-hardcoded),
89+
disabled-selected-state-text-color: mat.private-safe-color-change(
90+
map.get($systems, md-sys-color, on-surface),
91+
$alpha: 0.38,
92+
),
93+
disabled-selected-state-background-color: mat.private-safe-color-change(
94+
map.get($systems, md-sys-color, on-surface),
95+
$alpha: 0.12,
96+
),
97+
divider-color: map.get($systems, md-sys-color, outline),
98+
text-font: map.get($systems, md-sys-typescale, label-large-font),
99+
);
100+
}
101+
70102
/// Generates custom tokens for the mat-card.
71103
/// @param {Map} $systems The MDC system tokens
72104
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

‎src/material-experimental/theming/_m3-density.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ $_density-tokens: (
6767
(mat, slider): (),
6868
(mat, snack-bar): (),
6969
(mat, sort): (),
70+
(mat, standard-button-toggle): (
71+
height: (40px, 40px, 40px, 36px, 24px),
72+
),
7073
(mat, stepper): (
7174
header-height: (72px, 68px, 64px, 60px, 42px),
7275
),

‎src/material-experimental/theming/_m3-tokens.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -360,6 +360,11 @@
360360
custom-tokens.sort($systems, $exclude-hardcoded),
361361
$token-slots
362362
),
363+
_namespace-tokens(
364+
(mat, standard-button-toggle),
365+
custom-tokens.button-toggle($systems, $exclude-hardcoded),
366+
$token-slots
367+
),
363368
_namespace-tokens(
364369
(mat, stepper),
365370
custom-tokens.stepper($systems, $exclude-hardcoded),

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

Lines changed: 66 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:map';
12
@use '../core/theming/theming';
23
@use '../core/theming/inspection';
34
@use '../core/typography/typography';
@@ -7,56 +8,89 @@
78
@use '../core/style/sass-utils';
89

910
@mixin base($theme) {
10-
@include sass-utils.current-selector-or-root() {
11-
@include token-utils.create-token-values(
12-
tokens-mat-legacy-button-toggle.$prefix,
13-
tokens-mat-legacy-button-toggle.get-unthemable-tokens()
14-
);
15-
@include token-utils.create-token-values(
16-
tokens-mat-standard-button-toggle.$prefix,
17-
tokens-mat-standard-button-toggle.get-unthemable-tokens()
18-
);
11+
@if inspection.get-theme-version($theme) == 1 {
12+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
13+
}
14+
@else {
15+
@include sass-utils.current-selector-or-root() {
16+
@include token-utils.create-token-values(
17+
tokens-mat-legacy-button-toggle.$prefix,
18+
tokens-mat-legacy-button-toggle.get-unthemable-tokens()
19+
);
20+
@include token-utils.create-token-values(
21+
tokens-mat-standard-button-toggle.$prefix,
22+
tokens-mat-standard-button-toggle.get-unthemable-tokens()
23+
);
24+
}
1925
}
2026
}
2127

2228
@mixin color($theme) {
23-
@include sass-utils.current-selector-or-root() {
24-
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
25-
tokens-mat-legacy-button-toggle.get-color-tokens($theme));
26-
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
27-
tokens-mat-standard-button-toggle.get-color-tokens($theme));
29+
@if inspection.get-theme-version($theme) == 1 {
30+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
31+
}
32+
@else {
33+
@include sass-utils.current-selector-or-root() {
34+
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
35+
tokens-mat-legacy-button-toggle.get-color-tokens($theme));
36+
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
37+
tokens-mat-standard-button-toggle.get-color-tokens($theme));
38+
}
2839
}
2940
}
3041

3142
@mixin typography($theme) {
32-
@include sass-utils.current-selector-or-root() {
33-
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
34-
tokens-mat-legacy-button-toggle.get-typography-tokens($theme));
35-
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
36-
tokens-mat-standard-button-toggle.get-typography-tokens($theme));
43+
@if inspection.get-theme-version($theme) == 1 {
44+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
45+
}
46+
@else {
47+
@include sass-utils.current-selector-or-root() {
48+
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
49+
tokens-mat-legacy-button-toggle.get-typography-tokens($theme));
50+
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
51+
tokens-mat-standard-button-toggle.get-typography-tokens($theme));
52+
}
3753
}
3854
}
3955

4056
@mixin density($theme) {
41-
@include sass-utils.current-selector-or-root() {
42-
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
43-
tokens-mat-legacy-button-toggle.get-density-tokens($theme));
44-
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
45-
tokens-mat-standard-button-toggle.get-density-tokens($theme));
57+
@if inspection.get-theme-version($theme) == 1 {
58+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
59+
}
60+
@else {
61+
@include sass-utils.current-selector-or-root() {
62+
@include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
63+
tokens-mat-legacy-button-toggle.get-density-tokens($theme));
64+
@include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
65+
tokens-mat-standard-button-toggle.get-density-tokens($theme));
66+
}
4667
}
4768
}
4869

4970
@mixin theme($theme) {
5071
@include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
51-
@include base($theme);
52-
@if inspection.theme-has($theme, color) {
53-
@include color($theme);
72+
@if inspection.get-theme-version($theme) == 1 {
73+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
5474
}
55-
@if inspection.theme-has($theme, density) {
56-
@include density($theme);
57-
}
58-
@if inspection.theme-has($theme, typography) {
59-
@include typography($theme);
75+
@else {
76+
@include base($theme);
77+
@if inspection.theme-has($theme, color) {
78+
@include color($theme);
79+
}
80+
@if inspection.theme-has($theme, density) {
81+
@include density($theme);
82+
}
83+
@if inspection.theme-has($theme, typography) {
84+
@include typography($theme);
85+
}
6086
}
6187
}
6288
}
89+
90+
@mixin _theme-from-tokens($tokens) {
91+
@if ($tokens != ()) {
92+
@include token-utils.create-token-values(
93+
tokens-mat-standard-button-toggle.$prefix,
94+
map.get($tokens, tokens-mat-standard-button-toggle.$prefix));
95+
}
96+
}

‎src/material/core/tokens/m2/_index.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
@use './mat/slider' as tokens-mat-slider;
2323
@use './mat/snack-bar' as tokens-mat-snack-bar;
2424
@use './mat/sort' as tokens-mat-sort;
25+
@use './mat/standard-button-toggle' as tokens-mat-button-toggle;
2526
@use './mat/stepper' as tokens-mat-stepper;
2627
@use './mat/tab-header' as tokens-mat-tab-header;
2728
@use './mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
@@ -92,6 +93,7 @@
9293
_get-tokens-for-module($theme, tokens-mat-autocomplete),
9394
_get-tokens-for-module($theme, tokens-mat-badge),
9495
_get-tokens-for-module($theme, tokens-mat-bottom-sheet),
96+
_get-tokens-for-module($theme, tokens-mat-button-toggle),
9597
_get-tokens-for-module($theme, tokens-mat-card),
9698
_get-tokens-for-module($theme, tokens-mat-datepicker),
9799
_get-tokens-for-module($theme, tokens-mat-divider),

0 commit comments

Comments
 (0)