Skip to content

Commit 29a1e5d

Browse files
mmalerbammalerba
authored
fix(material-experimental/theming): Add support for color variants in slide-toggle, select, and radio (#28445)
1 parent a3b9fd9 commit 29a1e5d

File tree

7 files changed

+228
-54
lines changed

7 files changed

+228
-54
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,18 @@
2222
@include mat.tabs-color($theme, $color-variant: $color-variant);
2323
}
2424

25+
&.mat-mdc-slide-toggle {
26+
@include mat.slide-toggle-color($theme, $color-variant: $color-variant);
27+
}
28+
29+
&.mat-mdc-form-field {
30+
@include mat.select-color($theme, $color-variant: $color-variant);
31+
}
32+
33+
&.mat-mdc-radio-button {
34+
@include mat.radio-color($theme, $color-variant: $color-variant);
35+
}
36+
2537
// M3 dropped support for warn/error color FABs.
2638
@if $color-variant != error {
2739
&.mat-mdc-fab,

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

Lines changed: 123 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@
368368
color: _hardcode(inherit, $exclude-hardcoded),
369369
), (
370370
// Color variants:
371-
neutral: (), // Default, no overrides needed.
371+
surface: (), // Default, no overrides needed.
372372
primary: (
373373
color: map.get($systems, md-sys-color, primary),
374374
),
@@ -627,12 +627,24 @@
627627
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
628628
/// @return {Map} A set of custom tokens for the mat-radio
629629
@function radio($systems, $exclude-hardcoded) {
630-
@return (
630+
@return ((
631631
ripple-color: map.get($systems, md-sys-color, on-surface),
632632
checked-ripple-color: map.get($systems, md-sys-color, primary),
633633
disabled-label-color: mat.private-safe-color-change(
634634
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
635-
);
635+
), (
636+
// Color variants:
637+
primary: (), // Default, no overrides needed
638+
secondary: (
639+
checked-ripple-color: map.get($systems, md-sys-color, secondary),
640+
),
641+
tertiary: (
642+
checked-ripple-color: map.get($systems, md-sys-color, tertiary),
643+
),
644+
error: (
645+
checked-ripple-color: map.get($systems, md-sys-color, error),
646+
),
647+
));
636648
}
637649

638650
/// Generates custom tokens for the mat-ripple.
@@ -650,7 +662,7 @@
650662
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
651663
/// @return {Map} A set of custom tokens for the mat-select
652664
@function select($systems, $exclude-hardcoded) {
653-
@return mat.private-merge-all(
665+
@return (mat.private-merge-all(
654666
_generate-typography-tokens($systems, trigger-text, body-large),
655667
(
656668
panel-background-color: map.get($systems, md-sys-color, surface-container),
@@ -664,7 +676,19 @@
664676
focused-arrow-color: map.get($systems, md-sys-color, primary),
665677
invalid-arrow-color: map.get($systems, md-sys-color, error),
666678
)
667-
);
679+
), (
680+
// Color variants:
681+
primary: (), // Default, no overrides needed
682+
secondary: (
683+
focused-arrow-color: map.get($systems, md-sys-color, secondary),
684+
),
685+
tertiary: (
686+
focused-arrow-color: map.get($systems, md-sys-color, tertiary),
687+
),
688+
error: (
689+
focused-arrow-color: map.get($systems, md-sys-color, error),
690+
)
691+
));
668692
}
669693

670694
/// Generates custom tokens for the mat-sidenav.
@@ -684,14 +708,6 @@
684708
);
685709
}
686710

687-
/// Generates custom tokens for the mat-slide-toggle.
688-
/// @param {Map} $systems The MDC system tokens
689-
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
690-
/// @return {Map} A set of custom tokens for the mat-slide-toggle
691-
@function slide-toggle($systems, $exclude-hardcoded) {
692-
@return _generate-typography-tokens($systems, label-text, label-large);
693-
}
694-
695711
/// Generates custom tokens for the mat-slider.
696712
/// @param {Map} $systems The MDC system tokens
697713
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
@@ -1010,3 +1026,97 @@
10101026
),
10111027
);
10121028
}
1029+
1030+
/// Generates custom token overrides for the mdc-switch color variants.
1031+
/// @param {Map} $systems The MDC system tokens
1032+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
1033+
/// @return {Map} A set of color variant token overrides for the mdc-switch
1034+
@function mdc-switch-color-variants($systems, $exclude-hardcoded) {
1035+
@return (
1036+
primary: (), // Default, no overrides needed
1037+
secondary: (
1038+
selected-focus-handle-color: map.get($systems, md-sys-color, secondary-container),
1039+
selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary-container),
1040+
selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
1041+
selected-focus-track-color: map.get($systems, md-sys-color, secondary),
1042+
selected-handle-color: map.get($systems, md-sys-color, on-secondary),
1043+
selected-hover-handle-color: map.get($systems, md-sys-color, secondary-container),
1044+
selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary-container),
1045+
selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
1046+
selected-hover-track-color: map.get($systems, md-sys-color, secondary),
1047+
selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
1048+
selected-pressed-handle-color: map.get($systems, md-sys-color, secondary-container),
1049+
selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary-container),
1050+
selected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
1051+
selected-pressed-track-color: map.get($systems, md-sys-color, secondary),
1052+
selected-track-color: map.get($systems, md-sys-color, secondary),
1053+
),
1054+
tertiary: (
1055+
selected-focus-handle-color: map.get($systems, md-sys-color, tertiary-container),
1056+
selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
1057+
selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
1058+
selected-focus-track-color: map.get($systems, md-sys-color, tertiary),
1059+
selected-handle-color: map.get($systems, md-sys-color, on-tertiary),
1060+
selected-hover-handle-color: map.get($systems, md-sys-color, tertiary-container),
1061+
selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
1062+
selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
1063+
selected-hover-track-color: map.get($systems, md-sys-color, tertiary),
1064+
selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
1065+
selected-pressed-handle-color: map.get($systems, md-sys-color, tertiary-container),
1066+
selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
1067+
selected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
1068+
selected-pressed-track-color: map.get($systems, md-sys-color, tertiary),
1069+
selected-track-color: map.get($systems, md-sys-color, tertiary),
1070+
),
1071+
error: (
1072+
selected-focus-handle-color: map.get($systems, md-sys-color, error-container),
1073+
selected-focus-icon-color: map.get($systems, md-sys-color, on-error-container),
1074+
selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
1075+
selected-focus-track-color: map.get($systems, md-sys-color, error),
1076+
selected-handle-color: map.get($systems, md-sys-color, on-error),
1077+
selected-hover-handle-color: map.get($systems, md-sys-color, error-container),
1078+
selected-hover-icon-color: map.get($systems, md-sys-color, on-error-container),
1079+
selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
1080+
selected-hover-track-color: map.get($systems, md-sys-color, error),
1081+
selected-icon-color: map.get($systems, md-sys-color, on-error-container),
1082+
selected-pressed-handle-color: map.get($systems, md-sys-color, error-container),
1083+
selected-pressed-icon-color: map.get($systems, md-sys-color, on-error-container),
1084+
selected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
1085+
selected-pressed-track-color: map.get($systems, md-sys-color, error),
1086+
selected-track-color: map.get($systems, md-sys-color, error),
1087+
),
1088+
);
1089+
}
1090+
1091+
@function mdc-radio-color-variants($systems, $exclude-hardcoded) {
1092+
@return (
1093+
primary: (), // Default, no overrides needed
1094+
secondary: (
1095+
selected-focus-icon-color: map.get($systems, md-sys-color, secondary),
1096+
selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
1097+
selected-hover-icon-color: map.get($systems, md-sys-color, secondary),
1098+
selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
1099+
selected-icon-color: map.get($systems, md-sys-color, secondary),
1100+
selected-pressed-icon-color: map.get($systems, md-sys-color, secondary),
1101+
unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
1102+
),
1103+
tertiary: (
1104+
selected-focus-icon-color: map.get($systems, md-sys-color, tertiary),
1105+
selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
1106+
selected-hover-icon-color: map.get($systems, md-sys-color, tertiary),
1107+
selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
1108+
selected-icon-color: map.get($systems, md-sys-color, tertiary),
1109+
selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary),
1110+
unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
1111+
),
1112+
error: (
1113+
selected-focus-icon-color: map.get($systems, md-sys-color, error),
1114+
selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
1115+
selected-hover-icon-color: map.get($systems, md-sys-color, error),
1116+
selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
1117+
selected-icon-color: map.get($systems, md-sys-color, error),
1118+
selected-pressed-icon-color: map.get($systems, md-sys-color, error),
1119+
unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
1120+
),
1121+
);
1122+
}

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -643,7 +643,10 @@
643643
),
644644
_namespace-tokens(
645645
(mdc, radio),
646-
mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
646+
(
647+
mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
648+
custom-tokens.mdc-radio-color-variants($systems, $exclude-hardcoded)
649+
),
647650
$token-slots
648651
),
649652
_namespace-tokens(
@@ -661,7 +664,10 @@
661664
),
662665
_namespace-tokens(
663666
(mdc, switch),
664-
mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded),
667+
(
668+
mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded),
669+
custom-tokens.mdc-switch-color-variants($systems, $exclude-hardcoded)
670+
),
665671
$token-slots
666672
),
667673
_namespace-tokens(
@@ -818,11 +824,6 @@
818824
custom-tokens.sidenav($systems, $exclude-hardcoded),
819825
$token-slots
820826
),
821-
_namespace-tokens(
822-
(mat, slide-toggle),
823-
custom-tokens.slide-toggle($systems, $exclude-hardcoded),
824-
$token-slots
825-
),
826827
_namespace-tokens(
827828
(mat, slider),
828829
custom-tokens.slider($systems, $exclude-hardcoded),

‎src/material/icon/_icon-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@
7272
/// Outputs all (base, color, typography, and density) theme styles for the mat-icon.
7373
/// @param {Map} $theme The theme to generate styles for.
7474
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
75-
/// $color-variant: The color variant to use for the icon: neutral, primary, secondary, tertiary,
76-
/// or error (If not specified, default neutral color will be used).
75+
/// $color-variant: The color variant to use for the icon: surface, primary, secondary, tertiary,
76+
/// or error (If not specified, default surface color will be used).
7777
@mixin theme($theme, $options...) {
7878
@include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') {
7979
@if inspection.get-theme-version($theme) == 1 {

‎src/material/radio/_radio-theme.scss

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use 'sass:map';
21
@use '@material/radio/radio-theme' as mdc-radio-theme;
32
@use '@material/form-field/form-field-theme' as mdc-form-field-theme;
43
@use '../core/style/sass-utils';
@@ -10,6 +9,9 @@
109
@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
1110
@use '../core/tokens/m2/mat/radio' as tokens-mat-radio;
1211

12+
/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
13+
/// for the mat-radio.
14+
/// @param {Map} $theme The theme to generate base styles for.
1315
@mixin base($theme) {
1416
@if inspection.get-theme-version($theme) == 1 {
1517
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
@@ -23,9 +25,14 @@
2325
}
2426
}
2527

26-
@mixin color($theme) {
28+
/// Outputs color theme styles for the mat-radio.
29+
/// @param {Map} $theme The theme to generate color styles for.
30+
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
31+
/// $color-variant: The color variant to use for the radio button: primary, secondary, tertiary,
32+
/// or error (If not specified, default primary color will be used).
33+
@mixin color($theme, $options...) {
2734
@if inspection.get-theme-version($theme) == 1 {
28-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
35+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
2936
}
3037
@else {
3138
.mat-mdc-radio-button {
@@ -52,6 +59,8 @@
5259
}
5360
}
5461

62+
/// Outputs typography theme styles for the mat-radio.
63+
/// @param {Map} $theme The theme to generate typography styles for.
5564
@mixin typography($theme) {
5665
@if inspection.get-theme-version($theme) == 1 {
5766
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
@@ -69,6 +78,8 @@
6978
}
7079
}
7180

81+
/// Outputs typography theme styles for the mat-radio.
82+
/// @param {Map} $theme The theme to generate density styles for.
7283
@mixin density($theme) {
7384
@if inspection.get-theme-version($theme) == 1 {
7485
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -84,10 +95,15 @@
8495
}
8596
}
8697

87-
@mixin theme($theme) {
98+
/// Outputs all (base, color, typography, and density) theme styles for the mat-radio.
99+
/// @param {Map} $theme The theme to generate styles for.
100+
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
101+
/// $color-variant: The color variant to use for the radio button: primary, secondary, tertiary,
102+
/// or error (If not specified, default primary color will be used).
103+
@mixin theme($theme, $options...) {
88104
@include theming.private-check-duplicate-theme-styles($theme, 'mat-radio') {
89105
@if inspection.get-theme-version($theme) == 1 {
90-
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
106+
@include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
91107
}
92108
@else {
93109
@include base($theme);
@@ -104,11 +120,13 @@
104120
}
105121
}
106122

107-
@mixin _theme-from-tokens($tokens) {
108-
@if ($tokens != ()) {
109-
@include mdc-radio-theme.theme(map.get($tokens, tokens-mdc-radio.$prefix));
110-
@include mdc-form-field-theme.theme(map.get($tokens, tokens-mdc-form-field.$prefix));
111-
@include token-utils.create-token-values(
112-
tokens-mat-radio.$prefix, map.get($tokens, tokens-mat-radio.$prefix));
113-
}
123+
@mixin _theme-from-tokens($tokens, $options...) {
124+
$mdc-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-radio.$prefix, $options...);
125+
$mat-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mat-radio.$prefix, $options...);
126+
// Don't pass $options here, since the mdc-form-field doesn't support color options,
127+
// only the mdc-radio and mat-radio do.
128+
$mdc-form-field-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-form-field.$prefix);
129+
@include mdc-radio-theme.theme($mdc-radio-tokens);
130+
@include mdc-form-field-theme.theme($mdc-form-field-tokens);
131+
@include token-utils.create-token-values(tokens-mat-radio.$prefix, $mat-radio-tokens);
114132
}

0 commit comments

Comments
 (0)