fix(material-experimental/theming): Add support for color variants in…

… progress-spiner, progress-bar, list, form-field, and datepicker
angular · Jan 19, 2024 · 4a78545 · 4a78545
1 parent 29a1e5d
commit 4a78545
Show file tree

Hide file tree

Showing 7 changed files with 324 additions and 113 deletions.
diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss
@@ -4,6 +4,7 @@
 
 @mixin color-variant-styles($theme, $color-variant) {
   @include mat.option-color($theme, $color-variant: $color-variant);
+  @include mat.progress-spinner-color($theme, $color-variant: $color-variant);
 
   &.mat-icon {
     @include mat.icon-color($theme, $color-variant: $color-variant);
@@ -34,6 +35,24 @@
     @include mat.radio-color($theme, $color-variant: $color-variant);
   }
 
+  &.mat-mdc-progress-bar {
+    @include mat.progress-bar-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-form-field {
+    @include mat.form-field-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-datepicker-content {
+    @include mat.datepicker-color($theme, $color-variant: $color-variant);
+  }
+
+  .mdc-list-item__start,
+  .mdc-list-item__end {
+    @include mat.checkbox-color($theme, $color-variant: $color-variant);
+    @include mat.radio-color($theme, $color-variant: $color-variant);
+  }
+
   // M3 dropped support for warn/error color FABs.
   @if $color-variant != error {
     &.mat-mdc-fab,

diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -172,15 +172,15 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-datepicker
 @function datepicker($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
     calendar-date-in-range-state-background-color:
       map.get($systems, md-sys-color, primary-container),
     calendar-date-in-comparison-range-state-background-color:
-      map.get($systems, md-sys-color, secondary-container),
-    calendar-date-in-overlap-range-state-background-color:
       map.get($systems, md-sys-color, tertiary-container),
+    calendar-date-in-overlap-range-state-background-color:
+      map.get($systems, md-sys-color, secondary-container),
     calendar-date-in-overlap-range-selected-state-background-color:
-      map.get($systems, md-sys-color, tertiary),
+      map.get($systems, md-sys-color, secondary),
     calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-primary),
     calendar-date-selected-state-background-color: map.get($systems, md-sys-color, primary),
     calendar-date-selected-disabled-state-background-color: mat.private-safe-color-change(
@@ -234,7 +234,43 @@
     calendar-period-button-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
     calendar-header-text-size: map.get($systems, md-sys-typescale, title-small-size),
     calendar-header-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
-  );
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      calendar-date-in-range-state-background-color:
+          map.get($systems, md-sys-color, secondary-container),
+      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-secondary),
+      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-today-outline-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-in-overlap-range-state-background-color:
+          map.get($systems, md-sys-color, primary-container),
+      calendar-date-in-overlap-range-selected-state-background-color:
+          map.get($systems, md-sys-color, primary),
+    ),
+    tertiary: (
+      calendar-date-in-range-state-background-color:
+          map.get($systems, md-sys-color, tertiary-container),
+      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-tertiary),
+      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-today-outline-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-in-comparison-range-state-background-color:
+          map.get($systems, md-sys-color, primary-container),
+    ),
+    error: (
+      calendar-date-in-range-state-background-color:
+          map.get($systems, md-sys-color, error-container),
+      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-error),
+      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, error),
+      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, error),
+      calendar-date-today-outline-color: map.get($systems, md-sys-color, error),
+      calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, error),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-divider.
@@ -324,7 +360,7 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-form-field
 @function form-field($systems, $exclude-hardcoded) {
-  @return mat.private-merge-all(
+  @return (mat.private-merge-all(
     _generate-typography-tokens($systems, container-text, body-large),
     _generate-typography-tokens($systems, subscript-text, body-small),
     (
@@ -343,7 +379,19 @@
       focus-select-arrow-color: map.get($systems, md-sys-color, primary),
       outlined-label-text-populated-size: map.get($systems, md-sys-typeface, body-large-size),
     )
-  );
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      focus-select-arrow-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      focus-select-arrow-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      focus-select-arrow-color: map.get($systems, md-sys-color, error),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-grid-list.
@@ -1088,6 +1136,10 @@
   );
 }
 
+/// Generates custom token overrides for the mdc-radio color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-radio
 @function mdc-radio-color-variants($systems, $exclude-hardcoded) {
   @return (
     primary: (), // Default, no overrides needed
@@ -1120,3 +1172,91 @@
     ),
   );
 }
+
+/// Generates custom token overrides for the mdc-circular-progress color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-circular-progress
+@function mdc-circular-progress-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-indicator-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      active-indicator-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      active-indicator-color: map.get($systems, md-sys-color, error),
+    )
+  );
+}
+
+/// Generates custom token overrides for the mdc-linear-progress color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-linear-progress
+@function mdc-linear-progress-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-indicator-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      active-indicator-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      active-indicator-color: map.get($systems, md-sys-color, error),
+    ),
+  );
+}
+
+/// Generates custom token overrides for the mdc-filled-form-field color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-filled-form-field
+@function mdc-filled-text-field-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      caret-color: map.get($systems, md-sys-color, secondary),
+      focus-active-indicator-color: map.get($systems, md-sys-color, secondary),
+      focus-label-text-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      caret-color: map.get($systems, md-sys-color, tertiary),
+      focus-active-indicator-color: map.get($systems, md-sys-color, tertiary),
+      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      caret-color: map.get($systems, md-sys-color, error),
+      focus-active-indicator-color: map.get($systems, md-sys-color, error),
+      focus-label-text-color: map.get($systems, md-sys-color, error),
+    ),
+  );
+}
+
+/// Generates custom token overrides for the mdc-outlined-form-field color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-outlined-form-field
+@function mdc-outlined-text-field-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      caret-color: map.get($systems, md-sys-color, secondary),
+      focus-label-text-color: map.get($systems, md-sys-color, secondary),
+      focus-outline-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      caret-color: map.get($systems, md-sys-color, tertiary),
+      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+      focus-outline-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      caret-color: map.get($systems, md-sys-color, error),
+      focus-label-text-color: map.get($systems, md-sys-color, error),
+      focus-outline-color: map.get($systems, md-sys-color, error),
+    ),
+  );
+}
diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss
@@ -218,53 +218,17 @@
   ));
 }
 
-/// Fixes inconsistent values in the text field color tokens. Applies to both filled and outlined
-/// variants.
-/// @param {Map} $initial-tokens Map of text field tokens currently being generated.
-/// @param {Map} $all-tokens Map of all text field tokens, including hardcoded values.
-/// This is necessary in order to do opacity lookups.
-/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
-@function _fix-text-field-color-tokens($initial-tokens, $all-tokens) {
-  @return _combine-color-tokens($initial-tokens, $all-tokens, (
-    (
-      color: disabled-active-indicator-color,
-      opacity: disabled-active-indicator-opacity
-    ),
-    (
-      color: disabled-container-color,
-      opacity: disabled-container-opacity
-    ),
-    (
-      color: disabled-input-text-color,
-      opacity: disabled-input-text-opacity
-    ),
-    (
-      color: disabled-label-text-color,
-      opacity: disabled-label-text-opacity
-    ),
-    (
-      color: disabled-leading-icon-color,
-      opacity: disabled-leading-icon-opacity
-    ),
-    (
-      color: disabled-supporting-text-color,
-      opacity: disabled-supporting-text-opacity
-    ),
-    (
-      color: disabled-trailing-icon-color,
-      opacity: disabled-trailing-icon-opacity
-    )
-  ));
-}
-
-
 /// Fixes inconsistent values in the filled text field tokens so that they can produce valid
 /// styles.
 /// @param {Map} $initial-tokens Map of filled text field tokens currently being generated.
 /// @param {Map} $all-tokens Map of all filled text field tokens, including hardcoded values.
 /// @return {Map} The given tokens, with the invalid values replaced with valid ones.
-@function _fix-filled-text-field-tokens($initial-tokens, $all-tokens) {
-  $tokens: _combine-color-tokens($initial-tokens, $all-tokens, (
+@function _fix-filled-text-field-tokens($initial-tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: mdc-tokens.md-comp-filled-text-field-values((), false);
+
+  $tokens: _combine-color-tokens($initial-tokens, $hardcoded-tokens, (
     (
       color: disabled-active-indicator-color,
       opacity: disabled-active-indicator-opacity
@@ -378,8 +342,12 @@
 /// @param {Map} $all-tokens Map of all outlined text field tokens, including hardcoded values.
 /// This is necessary in order to do opacity lookups.
 /// @return {Map} The given tokens, with the invalid values replaced with valid ones.
-@function _fix-outlined-text-field-tokens($initial-tokens, $all-tokens) {
-  @return _combine-color-tokens($initial-tokens, $all-tokens, (
+@function _fix-outlined-text-field-tokens($initial-tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: mdc-tokens.md-comp-outlined-text-field-values((), false);
+
+  @return _combine-color-tokens($initial-tokens, $hardcoded-tokens, (
     (
       color: disabled-outline-color,
       opacity: disabled-outline-opacity
@@ -492,7 +460,7 @@
       (mdc, checkbox),
       (
         _fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
-        _map_values(
+        _map-values(
             custom-tokens.mdc-checkbox-color-variants($systems, $exclude-hardcoded),
             meta.get-function(_fix-checkbox-tokens)
         )
@@ -506,7 +474,10 @@
     ),
     _namespace-tokens(
       (mdc, circular-progress),
-      mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),
+      (
+        mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),
+        custom-tokens.mdc-circular-progress-color-variants($systems, $exclude-hardcoded),
+      ),
       $token-slots
     ),
     _namespace-tokens(
@@ -547,11 +518,14 @@
     ),
     _namespace-tokens(
       (mdc, filled-text-field),
-      _fix-filled-text-field-tokens(
-        mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded),
-        // Need to pass in the hardcoded values, because they
-        // include opacities that are used for the disabled state.
-        mdc-tokens.md-comp-filled-text-field-values($systems, false)
+      (
+        _fix-filled-text-field-tokens(
+          mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded)
+        ),
+        _map-values(
+          custom-tokens.mdc-filled-text-field-color-variants($systems, $exclude-hardcoded),
+          meta.get-function(_fix-filled-text-field-tokens)
+        )
       ),
       $token-slots
     ),
@@ -613,7 +587,10 @@
     ),
     _namespace-tokens(
       (mdc, linear-progress),
-      mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
+      (
+        mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
+        custom-tokens.mdc-linear-progress-color-variants($systems, $exclude-hardcoded),
+      ),
       $token-slots
     ),
     _namespace-tokens(
@@ -628,11 +605,14 @@
     ),
     _namespace-tokens(
       (mdc, outlined-text-field),
-      _fix-outlined-text-field-tokens(
-        mdc-tokens.md-comp-outlined-text-field-values($systems, $exclude-hardcoded),
-        // Need to pass in the hardcoded values, because they
-        // include opacities that are used for the disabled state.
-        mdc-tokens.md-comp-outlined-text-field-values($systems, false),
+      (
+        _fix-outlined-text-field-tokens(
+          mdc-tokens.md-comp-outlined-text-field-values($systems, $exclude-hardcoded)
+        ),
+        _map-values(
+          custom-tokens.mdc-outlined-text-field-color-variants($systems, $exclude-hardcoded),
+          meta.get-function(_fix-outlined-text-field-tokens)
+        )
       ),
       $token-slots
     ),