Skip to content

Commit 08c97ab

Browse files
mmalerbammalerba
authored
fix(material-experimental/theming): Add support for color variants in option, checkbox, and fab (#28412)
1 parent ba3680e commit 08c97ab

File tree

7 files changed

+256
-56
lines changed

7 files changed

+256
-56
lines changed

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

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,49 @@
66
// a demo thing.
77
@mixin color-variants-back-compat($theme) {
88
.mat-primary {
9-
&.mat-icon { @include mat.icon-color($theme, $color-variant: primary); }
9+
@include mat.option-color($theme, $color-variant: primary);
10+
11+
&.mat-icon {
12+
@include mat.icon-color($theme, $color-variant: primary);
13+
}
14+
15+
&.mat-mdc-checkbox {
16+
@include mat.checkbox-color($theme, $color-variant: primary);
17+
}
18+
19+
&.mat-mdc-fab,
20+
&.mat-mdc-mini-fab {
21+
@include mat.fab-color($theme, $color-variant: primary);
22+
}
1023
}
1124

1225
.mat-accent {
13-
&.mat-icon { @include mat.icon-color($theme, $color-variant: secondary); }
26+
@include mat.option-color($theme, $color-variant: secondary);
27+
28+
&.mat-icon {
29+
@include mat.icon-color($theme, $color-variant: secondary);
30+
}
31+
32+
&.mat-mdc-checkbox {
33+
@include mat.checkbox-color($theme, $color-variant: secondary);
34+
}
35+
36+
&.mat-mdc-fab,
37+
&.mat-mdc-mini-fab {
38+
@include mat.fab-color($theme, $color-variant: secondary);
39+
}
1440
}
1541

1642
.mat-warn {
17-
&.mat-icon { @include mat.icon-color($theme, $color-variant: error); }
43+
@include mat.option-color($theme, $color-variant: error);
44+
45+
&.mat-icon {
46+
@include mat.icon-color($theme, $color-variant: error);
47+
}
48+
49+
&.mat-mdc-checkbox {
50+
@include mat.checkbox-color($theme, $color-variant: error);
51+
}
1852
}
1953
}
2054

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

Lines changed: 88 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@
272272
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
273273
/// @return {Map} A set of custom tokens for the mat-fab
274274
@function fab($systems, $exclude-hardcoded) {
275-
@return (
275+
@return ((
276276
foreground-color: map.get($systems, md-sys-color, on-primary-container),
277277
state-layer-color: map.get($systems, md-sys-color, primary-container),
278278
ripple-color: mat.private-safe-color-change(
@@ -286,7 +286,26 @@
286286
map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
287287
disabled-state-foreground-color: mat.private-safe-color-change(
288288
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
289-
);
289+
), (
290+
// Color variants
291+
primary: (), // Default, no overrides needed.
292+
secondary: (
293+
foreground-color: map.get($systems, md-sys-color, on-secondary-container),
294+
state-layer-color: map.get($systems, md-sys-color, secondary-container),
295+
ripple-color: mat.private-safe-color-change(
296+
map.get($systems, md-sys-color, on-secondary-container),
297+
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
298+
),
299+
),
300+
tertiary: (
301+
foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
302+
state-layer-color: map.get($systems, md-sys-color, tertiary-container),
303+
ripple-color: mat.private-safe-color-change(
304+
map.get($systems, md-sys-color, on-tertiary-container),
305+
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
306+
),
307+
)
308+
));
290309
}
291310

292311
/// Generates custom tokens for the mat-form-field.
@@ -338,6 +357,7 @@
338357
color: _hardcode(inherit, $exclude-hardcoded),
339358
), (
340359
// Color variants:
360+
neutral: (), // Default, no overrides needed.
341361
primary: (
342362
color: map.get($systems, md-sys-color, primary),
343363
),
@@ -485,7 +505,7 @@
485505
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
486506
/// @return {Map} A set of custom tokens for the mat-option
487507
@function option($systems, $exclude-hardcoded) {
488-
@return mat.private-merge-all(
508+
@return (mat.private-merge-all(
489509
_generate-typography-tokens($systems, label-text, label-large),
490510
(
491511
selected-state-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
@@ -500,7 +520,22 @@
500520
),
501521
selected-state-layer-color: map.get($systems, md-sys-color, secondary-container),
502522
),
503-
);
523+
), (
524+
// Color variants:
525+
primary: (
526+
selected-state-label-text-color: map.get($systems, md-sys-color, on-primary-container),
527+
selected-state-layer-color: map.get($systems, md-sys-color, primary-container),
528+
),
529+
secondary: (), // Default, no overrides needed
530+
tertiary: (
531+
selected-state-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
532+
selected-state-layer-color: map.get($systems, md-sys-color, tertiary-container),
533+
),
534+
error: (
535+
selected-state-label-text-color: map.get($systems, md-sys-color, on-error-container),
536+
selected-state-layer-color: map.get($systems, md-sys-color, error-container),
537+
)
538+
));
504539
}
505540

506541
/// Generates custom tokens for the mat-paginator.
@@ -801,3 +836,52 @@
801836
node-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
802837
);
803838
}
839+
840+
/// Generates custom token overrides for the mdc-checkbox color variants.
841+
/// @param {Map} $systems The MDC system tokens
842+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
843+
/// @return {Map} A set of color variant token overrides for the mdc-checkbox
844+
@function mdc-checkbox-color-variants($systems, $exclude-hardcoded) {
845+
@return (
846+
primary: (), // Default, no overrides needed
847+
secondary: (
848+
selected-container-color: map.get($systems, md-sys-color, secondary),
849+
selected-focus-container-color: map.get($systems, md-sys-color, secondary),
850+
selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary),
851+
selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
852+
selected-hover-container-color: map.get($systems, md-sys-color, secondary),
853+
selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary),
854+
selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
855+
selected-icon-color: map.get($systems, md-sys-color, on-secondary),
856+
selected-pressed-container-color: map.get($systems, md-sys-color, secondary),
857+
selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary),
858+
unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
859+
),
860+
tertiary: (
861+
selected-container-color: map.get($systems, md-sys-color, tertiary),
862+
selected-focus-container-color: map.get($systems, md-sys-color, tertiary),
863+
selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary),
864+
selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
865+
selected-hover-container-color: map.get($systems, md-sys-color, tertiary),
866+
selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary),
867+
selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
868+
selected-icon-color: map.get($systems, md-sys-color, on-tertiary),
869+
selected-pressed-container-color: map.get($systems, md-sys-color, tertiary),
870+
selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary),
871+
unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
872+
),
873+
error: (
874+
selected-container-color: map.get($systems, md-sys-color, error),
875+
selected-focus-container-color: map.get($systems, md-sys-color, error),
876+
selected-focus-icon-color: map.get($systems, md-sys-color, on-error),
877+
selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
878+
selected-hover-container-color: map.get($systems, md-sys-color, error),
879+
selected-hover-icon-color: map.get($systems, md-sys-color, on-error),
880+
selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
881+
selected-icon-color: map.get($systems, md-sys-color, on-error),
882+
selected-pressed-container-color: map.get($systems, md-sys-color, error),
883+
selected-pressed-icon-color: map.get($systems, md-sys-color, on-error),
884+
unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
885+
)
886+
);
887+
}

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

Lines changed: 44 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,18 @@
88

99
// TODO(mmalerba): Split up this file into smaller pieces.
1010

11+
/// Maps the values in a map to new values using the given mapping function
12+
/// @param {Map} $map The maps whose values will be mapped to new values.
13+
/// @param {Function} $fn The value mapping function.
14+
/// @param {Map} A new map with its values updated using the mapping function.
15+
@function _map-values($map, $fn) {
16+
$result: ();
17+
@each $key, $value in $map {
18+
$result: map.set($result, $key, meta.call($fn, $value));
19+
}
20+
@return $result;
21+
}
22+
1123
/// Picks a submap containing only the given keys out the given map.
1224
/// @param {Map} $map The map to pick from.
1325
/// @param {List} $keys The map keys to pick.
@@ -169,7 +181,11 @@
169181
/// @param {Map} $all-tokens Map of all checkbox tokens, including hardcoded values.
170182
/// This is necessary in order to do opacity lookups.
171183
/// @return {Map} The given tokens, renamed to be compatible with MDC's token implementation.
172-
@function _fix-checkbox-tokens($tokens, $all-tokens) {
184+
@function _fix-checkbox-tokens($tokens) {
185+
// Need to get the hardcoded values, because they include opacities that are used for the disabled
186+
// state.
187+
$hardcoded-tokens: mdc-tokens.md-comp-checkbox-values((), false);
188+
173189
$rename-keys: (
174190
selected-icon-color: selected-checkmark-color,
175191
selected-disabled-icon-color: disabled-selected-checkmark-color,
@@ -188,9 +204,9 @@
188204
);
189205

190206
$remapped-tokens: _rename-map-keys($tokens, $rename-keys);
191-
$remapped-all-tokens: _rename-map-keys($all-tokens, $rename-keys);
207+
$remapped-hardcoded-tokens: _rename-map-keys($hardcoded-tokens, $rename-keys);
192208

193-
@return _combine-color-tokens($remapped-tokens, $remapped-all-tokens, (
209+
@return _combine-color-tokens($remapped-tokens, $remapped-hardcoded-tokens, (
194210
(
195211
color: disabled-selected-icon-color,
196212
opacity: disabled-selected-icon-opacity,
@@ -474,11 +490,12 @@
474490
// Get the official MDC component tokens
475491
_namespace-tokens(
476492
(mdc, checkbox),
477-
_fix-checkbox-tokens(
478-
mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded),
479-
// Need to pass in the hardcoded values, because they
480-
// include opacities that are used for the disabled state.
481-
mdc-tokens.md-comp-checkbox-values($systems, false)
493+
(
494+
_fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
495+
_map_values(
496+
custom-tokens.mdc-checkbox-color-variants($systems, $exclude-hardcoded),
497+
meta.get-function(_fix-checkbox-tokens)
498+
)
482499
),
483500
$token-slots
484501
),
@@ -504,12 +521,29 @@
504521
),
505522
_namespace-tokens(
506523
(mdc, fab),
507-
mdc-tokens.md-comp-fab-primary-values($systems, $exclude-hardcoded),
524+
(
525+
mdc-tokens.md-comp-fab-primary-values($systems, $exclude-hardcoded),
526+
(
527+
// Color variants
528+
primary: (), // Default, no overrides needed.
529+
secondary: mdc-tokens.md-comp-fab-secondary-values($systems, $exclude-hardcoded),
530+
tertiary: mdc-tokens.md-comp-fab-tertiary-values($systems, $exclude-hardcoded)
531+
)
532+
),
508533
$token-slots
509534
),
510535
_namespace-tokens(
511536
(mdc, extended-fab),
512-
mdc-tokens.md-comp-extended-fab-primary-values($systems, $exclude-hardcoded),
537+
(
538+
mdc-tokens.md-comp-extended-fab-primary-values($systems, $exclude-hardcoded),
539+
(
540+
// Color variants
541+
primary: (), // Default, no overrides needed.
542+
secondary: mdc-tokens.md-comp-extended-fab-secondary-values($systems, $exclude-hardcoded),
543+
tertiary: mdc-tokens.md-comp-extended-fab-tertiary-values($systems, $exclude-hardcoded),
544+
error: () // TODO(mmalerba): Should we add our own error variant?
545+
),
546+
),
513547
$token-slots
514548
),
515549
_namespace-tokens(

‎src/material/button/_fab-theme.scss

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use 'sass:map';
21
@use '@material/fab/fab-theme' as mdc-fab-theme;
32
@use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
43
@use '../core/style/sass-utils';
@@ -10,6 +9,9 @@
109
@use '../core/tokens/token-utils';
1110
@use '../core/typography/typography';
1211

12+
/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
13+
/// for the mat-fab.
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));
@@ -40,9 +42,14 @@
4042
@include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-tokens);
4143
}
4244

43-
@mixin color($theme) {
45+
/// Outputs color theme styles for the mat-fab.
46+
/// @param {Map} $theme The theme to generate color styles for.
47+
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
48+
/// $color-variant: The color variant to use for the fab: primary, secondary, or tertiary
49+
/// (If not specified, default primary color will be used).
50+
@mixin color($theme, $options...) {
4451
@if inspection.get-theme-version($theme) == 1 {
45-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
52+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
4653
}
4754
@else {
4855
@include sass-utils.current-selector-or-root() {
@@ -67,6 +74,8 @@
6774
}
6875
}
6976

77+
/// Outputs typography theme styles for the mat-fab.
78+
/// @param {Map} $theme The theme to generate typography styles for.
7079
@mixin typography($theme) {
7180
@if inspection.get-theme-version($theme) == 1 {
7281
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
@@ -80,6 +89,8 @@
8089
}
8190
}
8291

92+
/// Outputs density theme styles for the mat-fab.
93+
/// @param {Map} $theme The theme to generate density styles for.
8394
@mixin density($theme) {
8495
@if inspection.get-theme-version($theme) == 1 {
8596
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -92,10 +103,15 @@
92103
}
93104
}
94105

95-
@mixin theme($theme) {
106+
/// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
107+
/// @param {Map} $theme The theme to generate styles for.
108+
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
109+
/// $color-variant: The color variant to use for the fab: primary, secondary, or tertiary
110+
/// (If not specified, default primary color will be used).
111+
@mixin theme($theme, $options...) {
96112
@include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
97113
@if inspection.get-theme-version($theme) == 1 {
98-
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
114+
@include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
99115
}
100116
@else {
101117
@include base($theme);
@@ -112,11 +128,12 @@
112128
}
113129
}
114130

115-
@mixin _theme-from-tokens($tokens) {
116-
@if ($tokens != ()) {
117-
@include mdc-extended-fab-theme.theme(map.get($tokens, tokens-mdc-extended-fab.$prefix));
118-
@include mdc-fab-theme.theme(map.get($tokens, tokens-mdc-fab.$prefix));
119-
@include token-utils.create-token-values(
120-
tokens-mat-fab.$prefix, map.get($tokens, tokens-mat-fab.$prefix));
121-
}
131+
@mixin _theme-from-tokens($tokens, $options...) {
132+
$mdc-extended-fab-tokens: token-utils.get-tokens-for(
133+
$tokens, tokens-mdc-extended-fab.$prefix, $options...);
134+
$mdc-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab.$prefix, $options...);
135+
$mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...);
136+
@include mdc-extended-fab-theme.theme($mdc-extended-fab-tokens);
137+
@include mdc-fab-theme.theme($mdc-fab-tokens);
138+
@include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens);
122139
}

0 commit comments

Comments
 (0)