feat(material-experimental/theming): add M3 progress bar support (#27880)

Author: mmalerba

src/dev-app/theme-m3.scss

@@ -44,6 +44,7 @@ html {
   @include mat.snack-bar-theme($light-theme);
   @include mat.progress-spinner-theme($light-theme);
   @include mat.radio-theme($light-theme);
+  @include mat.progress-bar-theme($light-theme);
 }
 
 // Emit dark theme styles.
@@ -60,6 +61,8 @@ html {
   @include mat.snack-bar-color($dark-theme);
   @include mat.progress-spinner-color($dark-theme);
   @include mat.radio-color($dark-theme);
+  @include mat.progress-bar-color($dark-theme);
+
 }
 
 // Emit density styles for each scale.
@@ -75,5 +78,6 @@ html {
     @include mat.snack-bar-density($scale-theme);
     @include mat.progress-spinner-density($scale-theme);
     @include mat.radio-density($scale-theme);
+    @include mat.progress-bar-density($scale-theme);
   }
 }

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

@@ -64,6 +64,10 @@
   );
 }
 
+/// Generates custom tokens for the mat-radio.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-radio
 @function radio($systems, $exclude-hardcoded) {
   @return (
     ripple-color: map.get($systems, md-sys-color, on-surface),

src/material-experimental/theming/_m3-density.scss

@@ -22,17 +22,21 @@ $_density-tokens: (
     (mdc, elevated-card): (),
     (mdc, outlined-card): (),
     (mdc, slider): (),
+    (mdc, snackbar): (),
     (mdc, plain-tooltip): (),
+    (mdc, circular-progress): (),
     (mdc, radio): (
     state-layer-size: (40px, 36px, 32px, 28px),
   ),
+    (mdc, linear-progress): (),
   // Custom Angular Material tokens
     (mat, card): (),
     (mat, toolbar): (
     standard-height: (64px, 60px, 56px, 52px),
     mobile-height: (56px, 52px, 48px, 44px),
   ),
     (mat, slider): (),
+    (mat, snack-bar): (),
     (mat, radio): (),
 );
 

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

@@ -213,6 +213,10 @@
           mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
           $token-slots
       ),
+      _namespace-tokens(
+            (mdc, linear-progress),
+          mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
+          $token-slots),
       // Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
       // values.
       _namespace-tokens(

src/material/progress-bar/_progress-bar-theme.scss

@@ -1,14 +1,19 @@
+@use 'sass:map';
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/m2/mdc/linear-progress' as tokens-mdc-linear-progress;
 @use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
-@use 'sass:map';
 
 @mixin base($theme) {
-  // Add default values for tokens not related to color, typography, or density.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-linear-progress-theme.theme(tokens-mdc-linear-progress.get-unthemable-tokens());
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    // Add default values for tokens not related to color, typography, or density.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-linear-progress-theme.theme(tokens-mdc-linear-progress.get-unthemable-tokens());
+    }
   }
 }
 
@@ -31,15 +36,20 @@
 }
 
 @mixin color($theme) {
-  .mat-mdc-progress-bar {
-    @include _palette-styles($theme, primary);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    .mat-mdc-progress-bar {
+      @include _palette-styles($theme, primary);
 
-    &.mat-accent {
-      @include _palette-styles($theme, accent);
-    }
+      &.mat-accent {
+        @include _palette-styles($theme, accent);
+      }
 
-    &.mat-warn {
-      @include _palette-styles($theme, warn);
+      &.mat-warn {
+        @include _palette-styles($theme, warn);
+      }
     }
   }
 }
@@ -50,15 +60,26 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-progress-bar') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include mdc-linear-progress-theme.theme(map.get($tokens, tokens-mdc-linear-progress.$prefix));
+  }
+}