Skip to content

Commit e45e210

Browse files
mmalerbammalerba
authored
fix(material-experimental/theming): Add support for color variants in tabs and slider (#28417)
1 parent b8cf130 commit e45e210

File tree

5 files changed

+213
-80
lines changed

5 files changed

+213
-80
lines changed

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

Lines changed: 29 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,48 @@
22
@use '@angular/material' as mat;
33
@use '@angular/material-experimental' as matx;
44

5-
// TODO(mmalerba): Consider adding this as a back-compat API for users who want it, rather than just
6-
// a demo thing.
7-
@mixin color-variants-back-compat($theme) {
8-
.mat-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-
}
5+
@mixin color-variant-styles($theme, $color-variant) {
6+
@include mat.option-color($theme, $color-variant: $color-variant);
187

19-
&.mat-mdc-fab,
20-
&.mat-mdc-mini-fab {
21-
@include mat.fab-color($theme, $color-variant: primary);
22-
}
8+
&.mat-icon {
9+
@include mat.icon-color($theme, $color-variant: $color-variant);
2310
}
2411

25-
.mat-accent {
26-
@include mat.option-color($theme, $color-variant: secondary);
12+
&.mat-mdc-checkbox {
13+
@include mat.checkbox-color($theme, $color-variant: $color-variant);
14+
}
2715

28-
&.mat-icon {
29-
@include mat.icon-color($theme, $color-variant: secondary);
30-
}
16+
&.mat-mdc-slider {
17+
@include mat.slider-color($theme, $color-variant: $color-variant);
18+
}
3119

32-
&.mat-mdc-checkbox {
33-
@include mat.checkbox-color($theme, $color-variant: secondary);
34-
}
20+
&.mat-mdc-tab-group,
21+
&.mat-mdc-tab-nav-bar {
22+
@include mat.tabs-color($theme, $color-variant: $color-variant);
23+
}
3524

25+
// M3 dropped support for warn/error color FABs.
26+
@if $color-variant != error {
3627
&.mat-mdc-fab,
3728
&.mat-mdc-mini-fab {
38-
@include mat.fab-color($theme, $color-variant: secondary);
29+
@include mat.fab-color($theme, $color-variant: $color-variant);
3930
}
4031
}
32+
}
4133

42-
.mat-warn {
43-
@include mat.option-color($theme, $color-variant: error);
34+
// TODO(mmalerba): Consider adding this as a back-compat API for users who want it, rather than just
35+
// a demo thing.
36+
@mixin color-variants-back-compat($theme) {
37+
.mat-primary {
38+
@include color-variant-styles($theme, primary);
39+
}
4440

45-
&.mat-icon {
46-
@include mat.icon-color($theme, $color-variant: error);
47-
}
41+
.mat-accent {
42+
@include color-variant-styles($theme, secondary);
43+
}
4844

49-
&.mat-mdc-checkbox {
50-
@include mat.checkbox-color($theme, $color-variant: error);
51-
}
45+
.mat-warn {
46+
@include color-variant-styles($theme, error);
5247
}
5348
}
5449

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

Lines changed: 119 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -684,14 +684,12 @@
684684
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
685685
/// @return {Map} A set of custom tokens for the mat-slider
686686
@function slider($systems, $exclude-hardcoded) {
687-
$ripple-color: map.get($systems, md-sys-color, primary);
688-
$hover-ripple-color: mat.private-safe-color-change($ripple-color, $alpha: 0.05);
689-
$focus-ripple-color: mat.private-safe-color-change($ripple-color, $alpha: 0.2);
690-
691-
@return (
692-
ripple-color: $ripple-color,
693-
hover-state-layer-color: $hover-ripple-color,
694-
focus-state-layer-color: $focus-ripple-color,
687+
@return ((
688+
ripple-color: map.get($systems, md-sys-color, primary),
689+
hover-state-layer-color: mat.private-safe-color-change(
690+
map.get($systems, md-sys-color, primary), $alpha: 0.05),
691+
focus-state-layer-color: mat.private-safe-color-change(
692+
map.get($systems, md-sys-color, primary), $alpha: 0.2),
695693
value-indicator-opacity: _hardcode(1, $exclude-hardcoded),
696694
value-indicator-padding: _hardcode(0, $exclude-hardcoded),
697695
value-indicator-width: _hardcode(28px, $exclude-hardcoded),
@@ -701,7 +699,31 @@
701699
value-indicator-text-transform: _hardcode(rotate(45deg), $exclude-hardcoded),
702700
value-indicator-container-transform:
703701
_hardcode(translateX(-50%) rotate(-45deg), $exclude-hardcoded)
704-
);
702+
), (
703+
// Color variants
704+
primary: (), // Default, no overrides needed
705+
secondary: (
706+
ripple-color: map.get($systems, md-sys-color, secondary),
707+
hover-state-layer-color: mat.private-safe-color-change(
708+
map.get($systems, md-sys-color, secondary), $alpha: 0.05),
709+
focus-state-layer-color: mat.private-safe-color-change(
710+
map.get($systems, md-sys-color, secondary), $alpha: 0.2),
711+
),
712+
teriatiary: (
713+
ripple-color: map.get($systems, md-sys-color, tertiary),
714+
hover-state-layer-color: mat.private-safe-color-change(
715+
map.get($systems, md-sys-color, tertiary), $alpha: 0.05),
716+
focus-state-layer-color: mat.private-safe-color-change(
717+
map.get($systems, md-sys-color, tertiary), $alpha: 0.2),
718+
),
719+
error: (
720+
ripple-color: map.get($systems, md-sys-color, error),
721+
hover-state-layer-color: mat.private-safe-color-change(
722+
map.get($systems, md-sys-color, error), $alpha: 0.05),
723+
focus-state-layer-color: mat.private-safe-color-change(
724+
map.get($systems, md-sys-color, error), $alpha: 0.2),
725+
),
726+
));
705727
}
706728

707729
/// Generates custom tokens for the mat-snack-bar.
@@ -766,7 +788,7 @@
766788
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
767789
/// @return {Map} A set of custom tokens for the mat-tab-header
768790
@function tab-header($systems, $exclude-hardcoded) {
769-
@return mat.private-merge-all(
791+
@return (mat.private-merge-all(
770792
_generate-typography-tokens($systems, label-text, title-small),
771793
(
772794
divider-color: map.get($systems, md-sys-color, surface-variant),
@@ -784,7 +806,22 @@
784806
active-focus-indicator-color: map.get($systems, md-sys-color, primary),
785807
active-hover-indicator-color: map.get($systems, md-sys-color, primary),
786808
),
787-
);
809+
), (
810+
// Color variants
811+
primary: (), // Default, no overrides needed
812+
secondary: (
813+
active-focus-indicator-color: map.get($systems, md-sys-color, secondary),
814+
active-hover-indicator-color: map.get($systems, md-sys-color, secondary),
815+
),
816+
tertiary: (
817+
active-focus-indicator-color: map.get($systems, md-sys-color, tertiary),
818+
active-hover-indicator-color: map.get($systems, md-sys-color, tertiary),
819+
),
820+
error: (
821+
active-focus-indicator-color: map.get($systems, md-sys-color, error),
822+
active-hover-indicator-color: map.get($systems, md-sys-color, error),
823+
)
824+
));
788825
}
789826

790827
/// Generates custom tokens for the mdc-tab-indicator. (MDC has a tab-indicator component, but they
@@ -794,11 +831,23 @@
794831
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
795832
/// @return {Map} A set of custom tokens for the mdc-tab-indicator
796833
@function tab-indicator($systems, $exclude-hardcoded) {
797-
@return (
834+
@return ((
798835
active-indicator-height: _hardcode(2px, $exclude-hardcoded),
799836
active-indicator-shape: _hardcode(0, $exclude-hardcoded),
800837
active-indicator-color: map.get($systems, md-sys-color, primary),
801-
);
838+
), (
839+
// Color variants
840+
primary: (), // Default, no overrides needed
841+
secondary: (
842+
active-indicator-color: map.get($systems, md-sys-color, secondary),
843+
),
844+
tertiary: (
845+
active-indicator-color: map.get($systems, md-sys-color, tertiary),
846+
),
847+
error: (
848+
active-indicator-color: map.get($systems, md-sys-color, error),
849+
)
850+
));
802851
}
803852

804853
/// Generates custom tokens for the mat-table.
@@ -826,11 +875,11 @@
826875
/// @return {Map} A set of custom tokens for the mat-toolbar
827876
@function toolbar($systems, $exclude-hardcoded) {
828877
@return mat.private-merge-all(
829-
_generate-typography-tokens($systems, title-text, title-large),
830-
(
831-
container-background-color: map.get($systems, md-sys-color, surface),
832-
container-text-color: map.get($systems, md-sys-color, on-surface),
833-
)
878+
_generate-typography-tokens($systems, title-text, title-large),
879+
(
880+
container-background-color: map.get($systems, md-sys-color, surface),
881+
container-text-color: map.get($systems, md-sys-color, on-surface),
882+
)
834883
);
835884
}
836885

@@ -896,3 +945,55 @@
896945
)
897946
);
898947
}
948+
949+
/// Generates custom token overrides for the mdc-slider color variants.
950+
/// @param {Map} $systems The MDC system tokens
951+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
952+
/// @return {Map} A set of color variant token overrides for the mdc-slider
953+
@function mdc-slider-color-variants($systems, $exclude-hardcoded) {
954+
@return (
955+
primary: (), // Default, no overrides needed
956+
secondary: (
957+
active-track-color: map.get($systems, md-sys-color, secondary),
958+
focus-handle-color: map.get($systems, md-sys-color, secondary),
959+
focus-state-layer-color: map.get($systems, md-sys-color, secondary),
960+
handle-color: map.get($systems, md-sys-color, secondary),
961+
hover-handle-color: map.get($systems, md-sys-color, secondary),
962+
hover-state-layer-color: map.get($systems, md-sys-color, secondary),
963+
label-container-color: map.get($systems, md-sys-color, secondary),
964+
label-label-text-color: map.get($systems, md-sys-color, on-secondary),
965+
pressed-handle-color: map.get($systems, md-sys-color, secondary),
966+
pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
967+
with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-secondary),
968+
with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-secondary),
969+
),
970+
tertiary: (
971+
active-track-color: map.get($systems, md-sys-color, tertiary),
972+
focus-handle-color: map.get($systems, md-sys-color, tertiary),
973+
focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
974+
handle-color: map.get($systems, md-sys-color, tertiary),
975+
hover-handle-color: map.get($systems, md-sys-color, tertiary),
976+
hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
977+
label-container-color: map.get($systems, md-sys-color, tertiary),
978+
label-label-text-color: map.get($systems, md-sys-color, on-tertiary),
979+
pressed-handle-color: map.get($systems, md-sys-color, tertiary),
980+
pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
981+
with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-tertiary),
982+
with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-tertiary),
983+
),
984+
error: (
985+
active-track-color: map.get($systems, md-sys-color, error),
986+
focus-handle-color: map.get($systems, md-sys-color, error),
987+
focus-state-layer-color: map.get($systems, md-sys-color, error),
988+
handle-color: map.get($systems, md-sys-color, error),
989+
hover-handle-color: map.get($systems, md-sys-color, error),
990+
hover-state-layer-color: map.get($systems, md-sys-color, error),
991+
label-container-color: map.get($systems, md-sys-color, error),
992+
label-label-text-color: map.get($systems, md-sys-color, on-error),
993+
pressed-handle-color: map.get($systems, md-sys-color, error),
994+
pressed-state-layer-color: map.get($systems, md-sys-color, error),
995+
with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-error),
996+
with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-error),
997+
),
998+
);
999+
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -540,8 +540,7 @@
540540
// Color variants
541541
primary: (), // Default, no overrides needed.
542542
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?
543+
tertiary: mdc-tokens.md-comp-extended-fab-tertiary-values($systems, $exclude-hardcoded)
545544
),
546545
),
547546
$token-slots
@@ -649,7 +648,10 @@
649648
),
650649
_namespace-tokens(
651650
(mdc, slider),
652-
mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded),
651+
(
652+
mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded),
653+
custom-tokens.mdc-slider-color-variants($systems, $exclude-hardcoded)
654+
),
653655
$token-slots
654656
),
655657
_namespace-tokens(

‎src/material/slider/_slider-theme.scss

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use 'sass:map';
21
@use '@material/slider/slider-theme' as mdc-slider-theme;
32
@use '../core/theming/theming';
43
@use '../core/theming/inspection';
@@ -8,6 +7,9 @@
87
@use '../core/tokens/m2/mat/slider' as tokens-mat-slider;
98
@use '../core/tokens/m2/mdc/slider' as tokens-mdc-slider;
109

10+
/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
11+
/// for the mat-slider.
12+
/// @param {Map} $theme The theme to generate base styles for.
1113
@mixin base($theme) {
1214
@if inspection.get-theme-version($theme) == 1 {
1315
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
@@ -22,9 +24,14 @@
2224
}
2325
}
2426

25-
@mixin color($theme) {
27+
/// Outputs color theme styles for the mat-slider.
28+
/// @param {Map} $theme The theme to generate color styles for.
29+
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
30+
/// $color-variant: The color variant to use for the slider: primary, secondary, tertiary,
31+
/// or error (If not specified, default primary color will be used).
32+
@mixin color($theme, $options...) {
2633
@if inspection.get-theme-version($theme) == 1 {
27-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
34+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
2835
}
2936
@else {
3037
$is-dark: inspection.get-theme-type($theme) == dark;
@@ -66,6 +73,9 @@
6673
}
6774
}
6875

76+
77+
/// Outputs typography theme styles for the mat-slider.
78+
/// @param {Map} $theme The theme to generate typography styles for.
6979
@mixin typography($theme) {
7080
@if inspection.get-theme-version($theme) == 1 {
7181
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
@@ -78,6 +88,9 @@
7888
}
7989
}
8090

91+
92+
/// Outputs density theme styles for the mat-slider.
93+
/// @param {Map} $theme The theme to generate density styles for.
8194
@mixin density($theme) {
8295
@if inspection.get-theme-version($theme) == 1 {
8396
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -90,10 +103,15 @@
90103
}
91104
}
92105

93-
@mixin theme($theme) {
106+
/// Outputs all (base, color, typography, and density) theme styles for the mat-option.
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 slider: primary, secondary, tertiary,
110+
/// or error (If not specified, default primary color will be used).
111+
@mixin theme($theme, $options...) {
94112
@include theming.private-check-duplicate-theme-styles($theme, 'mat-slider') {
95113
@if inspection.get-theme-version($theme) == 1 {
96-
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
114+
@include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
97115
}
98116
@else {
99117
@include base($theme);
@@ -110,10 +128,9 @@
110128
}
111129
}
112130

113-
@mixin _theme-from-tokens($tokens) {
114-
@if ($tokens != ()) {
115-
@include mdc-slider-theme.theme(map.get($tokens, tokens-mdc-slider.$prefix));
116-
@include token-utils.create-token-values(
117-
tokens-mat-slider.$prefix, map.get($tokens, tokens-mat-slider.$prefix));
118-
}
131+
@mixin _theme-from-tokens($tokens, $options...) {
132+
$mdc-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-slider.$prefix, $options...);
133+
$mat-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mat-slider.$prefix, $options...);
134+
@include mdc-slider-theme.theme($mdc-slider-tokens);
135+
@include token-utils.create-token-values(tokens-mat-slider.$prefix, $mat-slider-tokens);
119136
}

0 commit comments

Comments
 (0)