Skip to content

Commit 715877a

Browse files
mmalerbammalerba
authored
fix(material-experimental/theming): Add support for color variants in progress-spiner, progress-bar, list, form-field, and datepicker (#28451)
1 parent 47819c4 commit 715877a

File tree

7 files changed

+324
-113
lines changed

7 files changed

+324
-113
lines changed

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
@mixin color-variant-styles($theme, $color-variant) {
66
@include mat.option-color($theme, $color-variant: $color-variant);
7+
@include mat.progress-spinner-color($theme, $color-variant: $color-variant);
78

89
&.mat-icon {
910
@include mat.icon-color($theme, $color-variant: $color-variant);
@@ -34,6 +35,24 @@
3435
@include mat.radio-color($theme, $color-variant: $color-variant);
3536
}
3637

38+
&.mat-mdc-progress-bar {
39+
@include mat.progress-bar-color($theme, $color-variant: $color-variant);
40+
}
41+
42+
&.mat-mdc-form-field {
43+
@include mat.form-field-color($theme, $color-variant: $color-variant);
44+
}
45+
46+
&.mat-datepicker-content {
47+
@include mat.datepicker-color($theme, $color-variant: $color-variant);
48+
}
49+
50+
.mdc-list-item__start,
51+
.mdc-list-item__end {
52+
@include mat.checkbox-color($theme, $color-variant: $color-variant);
53+
@include mat.radio-color($theme, $color-variant: $color-variant);
54+
}
55+
3756
// M3 dropped support for warn/error color FABs.
3857
@if $color-variant != error {
3958
&.mat-mdc-fab,

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

Lines changed: 147 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -172,15 +172,15 @@
172172
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
173173
/// @return {Map} A set of custom tokens for the mat-datepicker
174174
@function datepicker($systems, $exclude-hardcoded) {
175-
@return (
175+
@return ((
176176
calendar-date-in-range-state-background-color:
177177
map.get($systems, md-sys-color, primary-container),
178178
calendar-date-in-comparison-range-state-background-color:
179-
map.get($systems, md-sys-color, secondary-container),
180-
calendar-date-in-overlap-range-state-background-color:
181179
map.get($systems, md-sys-color, tertiary-container),
180+
calendar-date-in-overlap-range-state-background-color:
181+
map.get($systems, md-sys-color, secondary-container),
182182
calendar-date-in-overlap-range-selected-state-background-color:
183-
map.get($systems, md-sys-color, tertiary),
183+
map.get($systems, md-sys-color, secondary),
184184
calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-primary),
185185
calendar-date-selected-state-background-color: map.get($systems, md-sys-color, primary),
186186
calendar-date-selected-disabled-state-background-color: mat.private-safe-color-change(
@@ -234,7 +234,43 @@
234234
calendar-period-button-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
235235
calendar-header-text-size: map.get($systems, md-sys-typescale, title-small-size),
236236
calendar-header-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
237-
);
237+
), (
238+
// Color variants:
239+
primary: (), // Default, no overrides needed.
240+
secondary: (
241+
calendar-date-in-range-state-background-color:
242+
map.get($systems, md-sys-color, secondary-container),
243+
calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-secondary),
244+
calendar-date-selected-state-background-color: map.get($systems, md-sys-color, secondary),
245+
calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, secondary),
246+
calendar-date-today-outline-color: map.get($systems, md-sys-color, secondary),
247+
calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, secondary),
248+
calendar-date-in-overlap-range-state-background-color:
249+
map.get($systems, md-sys-color, primary-container),
250+
calendar-date-in-overlap-range-selected-state-background-color:
251+
map.get($systems, md-sys-color, primary),
252+
),
253+
tertiary: (
254+
calendar-date-in-range-state-background-color:
255+
map.get($systems, md-sys-color, tertiary-container),
256+
calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-tertiary),
257+
calendar-date-selected-state-background-color: map.get($systems, md-sys-color, tertiary),
258+
calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, tertiary),
259+
calendar-date-today-outline-color: map.get($systems, md-sys-color, tertiary),
260+
calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, tertiary),
261+
calendar-date-in-comparison-range-state-background-color:
262+
map.get($systems, md-sys-color, primary-container),
263+
),
264+
error: (
265+
calendar-date-in-range-state-background-color:
266+
map.get($systems, md-sys-color, error-container),
267+
calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-error),
268+
calendar-date-selected-state-background-color: map.get($systems, md-sys-color, error),
269+
calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, error),
270+
calendar-date-today-outline-color: map.get($systems, md-sys-color, error),
271+
calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, error),
272+
)
273+
));
238274
}
239275

240276
/// Generates custom tokens for the mat-divider.
@@ -324,7 +360,7 @@
324360
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
325361
/// @return {Map} A set of custom tokens for the mat-form-field
326362
@function form-field($systems, $exclude-hardcoded) {
327-
@return mat.private-merge-all(
363+
@return (mat.private-merge-all(
328364
_generate-typography-tokens($systems, container-text, body-large),
329365
_generate-typography-tokens($systems, subscript-text, body-small),
330366
(
@@ -343,7 +379,19 @@
343379
focus-select-arrow-color: map.get($systems, md-sys-color, primary),
344380
outlined-label-text-populated-size: map.get($systems, md-sys-typeface, body-large-size),
345381
)
346-
);
382+
), (
383+
// Color variants:
384+
primary: (), // Default, no overrides needed.
385+
secondary: (
386+
focus-select-arrow-color: map.get($systems, md-sys-color, secondary),
387+
),
388+
tertiary: (
389+
focus-select-arrow-color: map.get($systems, md-sys-color, tertiary),
390+
),
391+
error: (
392+
focus-select-arrow-color: map.get($systems, md-sys-color, error),
393+
)
394+
));
347395
}
348396

349397
/// Generates custom tokens for the mat-grid-list.
@@ -1088,6 +1136,10 @@
10881136
);
10891137
}
10901138

1139+
/// Generates custom token overrides for the mdc-radio color variants.
1140+
/// @param {Map} $systems The MDC system tokens
1141+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
1142+
/// @return {Map} A set of color variant token overrides for the mdc-radio
10911143
@function mdc-radio-color-variants($systems, $exclude-hardcoded) {
10921144
@return (
10931145
primary: (), // Default, no overrides needed
@@ -1120,3 +1172,91 @@
11201172
),
11211173
);
11221174
}
1175+
1176+
/// Generates custom token overrides for the mdc-circular-progress color variants.
1177+
/// @param {Map} $systems The MDC system tokens
1178+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
1179+
/// @return {Map} A set of color variant token overrides for the mdc-circular-progress
1180+
@function mdc-circular-progress-color-variants($systems, $exclude-hardcoded) {
1181+
@return (
1182+
primary: (), // Default, no overrides needed
1183+
secondary: (
1184+
active-indicator-color: map.get($systems, md-sys-color, secondary),
1185+
),
1186+
tertiary: (
1187+
active-indicator-color: map.get($systems, md-sys-color, tertiary),
1188+
),
1189+
error: (
1190+
active-indicator-color: map.get($systems, md-sys-color, error),
1191+
)
1192+
);
1193+
}
1194+
1195+
/// Generates custom token overrides for the mdc-linear-progress color variants.
1196+
/// @param {Map} $systems The MDC system tokens
1197+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
1198+
/// @return {Map} A set of color variant token overrides for the mdc-linear-progress
1199+
@function mdc-linear-progress-color-variants($systems, $exclude-hardcoded) {
1200+
@return (
1201+
primary: (), // Default, no overrides needed
1202+
secondary: (
1203+
active-indicator-color: map.get($systems, md-sys-color, secondary),
1204+
),
1205+
tertiary: (
1206+
active-indicator-color: map.get($systems, md-sys-color, tertiary),
1207+
),
1208+
error: (
1209+
active-indicator-color: map.get($systems, md-sys-color, error),
1210+
),
1211+
);
1212+
}
1213+
1214+
/// Generates custom token overrides for the mdc-filled-form-field color variants.
1215+
/// @param {Map} $systems The MDC system tokens
1216+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
1217+
/// @return {Map} A set of color variant token overrides for the mdc-filled-form-field
1218+
@function mdc-filled-text-field-color-variants($systems, $exclude-hardcoded) {
1219+
@return (
1220+
primary: (), // Default, no overrides needed
1221+
secondary: (
1222+
caret-color: map.get($systems, md-sys-color, secondary),
1223+
focus-active-indicator-color: map.get($systems, md-sys-color, secondary),
1224+
focus-label-text-color: map.get($systems, md-sys-color, secondary),
1225+
),
1226+
tertiary: (
1227+
caret-color: map.get($systems, md-sys-color, tertiary),
1228+
focus-active-indicator-color: map.get($systems, md-sys-color, tertiary),
1229+
focus-label-text-color: map.get($systems, md-sys-color, tertiary),
1230+
),
1231+
error: (
1232+
caret-color: map.get($systems, md-sys-color, error),
1233+
focus-active-indicator-color: map.get($systems, md-sys-color, error),
1234+
focus-label-text-color: map.get($systems, md-sys-color, error),
1235+
),
1236+
);
1237+
}
1238+
1239+
/// Generates custom token overrides for the mdc-outlined-form-field color variants.
1240+
/// @param {Map} $systems The MDC system tokens
1241+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
1242+
/// @return {Map} A set of color variant token overrides for the mdc-outlined-form-field
1243+
@function mdc-outlined-text-field-color-variants($systems, $exclude-hardcoded) {
1244+
@return (
1245+
primary: (), // Default, no overrides needed
1246+
secondary: (
1247+
caret-color: map.get($systems, md-sys-color, secondary),
1248+
focus-label-text-color: map.get($systems, md-sys-color, secondary),
1249+
focus-outline-color: map.get($systems, md-sys-color, secondary),
1250+
),
1251+
tertiary: (
1252+
caret-color: map.get($systems, md-sys-color, tertiary),
1253+
focus-label-text-color: map.get($systems, md-sys-color, tertiary),
1254+
focus-outline-color: map.get($systems, md-sys-color, tertiary),
1255+
),
1256+
error: (
1257+
caret-color: map.get($systems, md-sys-color, error),
1258+
focus-label-text-color: map.get($systems, md-sys-color, error),
1259+
focus-outline-color: map.get($systems, md-sys-color, error),
1260+
),
1261+
);
1262+
}

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

Lines changed: 37 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -218,53 +218,17 @@
218218
));
219219
}
220220

221-
/// Fixes inconsistent values in the text field color tokens. Applies to both filled and outlined
222-
/// variants.
223-
/// @param {Map} $initial-tokens Map of text field tokens currently being generated.
224-
/// @param {Map} $all-tokens Map of all text field tokens, including hardcoded values.
225-
/// This is necessary in order to do opacity lookups.
226-
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
227-
@function _fix-text-field-color-tokens($initial-tokens, $all-tokens) {
228-
@return _combine-color-tokens($initial-tokens, $all-tokens, (
229-
(
230-
color: disabled-active-indicator-color,
231-
opacity: disabled-active-indicator-opacity
232-
),
233-
(
234-
color: disabled-container-color,
235-
opacity: disabled-container-opacity
236-
),
237-
(
238-
color: disabled-input-text-color,
239-
opacity: disabled-input-text-opacity
240-
),
241-
(
242-
color: disabled-label-text-color,
243-
opacity: disabled-label-text-opacity
244-
),
245-
(
246-
color: disabled-leading-icon-color,
247-
opacity: disabled-leading-icon-opacity
248-
),
249-
(
250-
color: disabled-supporting-text-color,
251-
opacity: disabled-supporting-text-opacity
252-
),
253-
(
254-
color: disabled-trailing-icon-color,
255-
opacity: disabled-trailing-icon-opacity
256-
)
257-
));
258-
}
259-
260-
261221
/// Fixes inconsistent values in the filled text field tokens so that they can produce valid
262222
/// styles.
263223
/// @param {Map} $initial-tokens Map of filled text field tokens currently being generated.
264224
/// @param {Map} $all-tokens Map of all filled text field tokens, including hardcoded values.
265225
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
266-
@function _fix-filled-text-field-tokens($initial-tokens, $all-tokens) {
267-
$tokens: _combine-color-tokens($initial-tokens, $all-tokens, (
226+
@function _fix-filled-text-field-tokens($initial-tokens) {
227+
// Need to get the hardcoded values, because they include opacities that are used for the disabled
228+
// state.
229+
$hardcoded-tokens: mdc-tokens.md-comp-filled-text-field-values((), false);
230+
231+
$tokens: _combine-color-tokens($initial-tokens, $hardcoded-tokens, (
268232
(
269233
color: disabled-active-indicator-color,
270234
opacity: disabled-active-indicator-opacity
@@ -378,8 +342,12 @@
378342
/// @param {Map} $all-tokens Map of all outlined text field tokens, including hardcoded values.
379343
/// This is necessary in order to do opacity lookups.
380344
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
381-
@function _fix-outlined-text-field-tokens($initial-tokens, $all-tokens) {
382-
@return _combine-color-tokens($initial-tokens, $all-tokens, (
345+
@function _fix-outlined-text-field-tokens($initial-tokens) {
346+
// Need to get the hardcoded values, because they include opacities that are used for the disabled
347+
// state.
348+
$hardcoded-tokens: mdc-tokens.md-comp-outlined-text-field-values((), false);
349+
350+
@return _combine-color-tokens($initial-tokens, $hardcoded-tokens, (
383351
(
384352
color: disabled-outline-color,
385353
opacity: disabled-outline-opacity
@@ -492,7 +460,7 @@
492460
(mdc, checkbox),
493461
(
494462
_fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
495-
_map_values(
463+
_map-values(
496464
custom-tokens.mdc-checkbox-color-variants($systems, $exclude-hardcoded),
497465
meta.get-function(_fix-checkbox-tokens)
498466
)
@@ -506,7 +474,10 @@
506474
),
507475
_namespace-tokens(
508476
(mdc, circular-progress),
509-
mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),
477+
(
478+
mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),
479+
custom-tokens.mdc-circular-progress-color-variants($systems, $exclude-hardcoded),
480+
),
510481
$token-slots
511482
),
512483
_namespace-tokens(
@@ -547,11 +518,14 @@
547518
),
548519
_namespace-tokens(
549520
(mdc, filled-text-field),
550-
_fix-filled-text-field-tokens(
551-
mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded),
552-
// Need to pass in the hardcoded values, because they
553-
// include opacities that are used for the disabled state.
554-
mdc-tokens.md-comp-filled-text-field-values($systems, false)
521+
(
522+
_fix-filled-text-field-tokens(
523+
mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded)
524+
),
525+
_map-values(
526+
custom-tokens.mdc-filled-text-field-color-variants($systems, $exclude-hardcoded),
527+
meta.get-function(_fix-filled-text-field-tokens)
528+
)
555529
),
556530
$token-slots
557531
),
@@ -613,7 +587,10 @@
613587
),
614588
_namespace-tokens(
615589
(mdc, linear-progress),
616-
mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
590+
(
591+
mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
592+
custom-tokens.mdc-linear-progress-color-variants($systems, $exclude-hardcoded),
593+
),
617594
$token-slots
618595
),
619596
_namespace-tokens(
@@ -628,11 +605,14 @@
628605
),
629606
_namespace-tokens(
630607
(mdc, outlined-text-field),
631-
_fix-outlined-text-field-tokens(
632-
mdc-tokens.md-comp-outlined-text-field-values($systems, $exclude-hardcoded),
633-
// Need to pass in the hardcoded values, because they
634-
// include opacities that are used for the disabled state.
635-
mdc-tokens.md-comp-outlined-text-field-values($systems, false),
608+
(
609+
_fix-outlined-text-field-tokens(
610+
mdc-tokens.md-comp-outlined-text-field-values($systems, $exclude-hardcoded)
611+
),
612+
_map-values(
613+
custom-tokens.mdc-outlined-text-field-color-variants($systems, $exclude-hardcoded),
614+
meta.get-function(_fix-outlined-text-field-tokens)
615+
)
636616
),
637617
$token-slots
638618
),

0 commit comments

Comments
 (0)