refactor(material/progress-bar): change mat-progress-bar to use MDC's… (

angular#26850)

* refactor(material/progress-bar): change mat-progress-bar to use MDC's token API (angular#26643)

* fixup! refactor(material/progress-bar): change mat-progress-bar to use MDC's token API (angular#26643)

src/material/core/tokens/m2/mdc/_linear-progress.scss

@@ -0,0 +1,60 @@
+@use '../../../theming/theming';
+@use '../../token-utils';
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, linear-progress);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    // The height of the progress bar track.
+    track-height: 4px
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $primary: theming.get-color-from-palette(map.get($config, primary));
+  @return (
+    // The color of the progress bar's active section.
+    active-indicator-color: $primary,
+    track-color: if(
+      meta.type-of($primary) == color,
+      color.adjust($primary, $alpha: -0.75),
+      $primary
+    )
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return map.merge(
+    get-unthemable-tokens(),
+    map.merge(
+      get-color-tokens(token-utils.$placeholder-color-config),
+      map.merge(
+        get-typography-tokens(token-utils.$placeholder-typography-config),
+        get-density-tokens(token-utils.$placeholder-density-config)
+      )
+    )
+  );
+}

src/material/core/tokens/tests/test-validate-tokens.scss

@@ -1,14 +1,18 @@
 @use 'sass:list';
 @use 'sass:map';
+
 @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
 @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;
+@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
 @use '@material/list/list-theme' as mdc-list-theme;
 @use '@material/theme/validate' as mdc-validate;
+
 @use '../m2/mdc/circular-progress' as tokens-mdc-circular-progress;
 @use '../m2/mdc/elevated-card' as tokens-mdc-elevated-card;
 @use '../m2/mdc/checkbox' as tokens-mdc-checkbox;
+@use '../m2/mdc/linear-progress' as tokens-mdc-linear-progress;
 @use '../m2/mdc/list' as tokens-mdc-list;
 @use '../m2/mdc/outlined-card' as tokens-mdc-outlined-card;
 
@@ -29,7 +33,6 @@
   $slots: tokens-mdc-list.get-token-slots(),
   $reference: mdc-list-theme.$light-theme
 );
-
 @include validate-slots(
   $component: 'm2.mdc.circular-progress',
   $slots: tokens-mdc-circular-progress.get-token-slots(),
@@ -50,3 +53,8 @@
   $slots: tokens-mdc-checkbox.get-token-slots(),
   $reference: mdc-checkbox-theme.$light-theme
 );
+@include validate-slots(
+  $component: 'm2.mdc.linear-progress',
+  $slots: tokens-mdc-linear-progress.get-token-slots(),
+  $reference: mdc-linear-progress-theme.$light-theme
+);

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

@@ -1,46 +1,39 @@
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
-@use '@material/theme/theme-color' as mdc-theme-color;
+@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:color';
-@use 'sass:meta';
+@use 'sass:map';
 
-
-@mixin _palette-styles($color) {
-  $color-value: mdc-theme-color.prop-value($color);
+@mixin _palette-styles($config, $palette-name) {
+  $palette-config: map.merge($config, (primary: map.get($config, $palette-name)));
+  $color-tokens: tokens-mdc-linear-progress.get-color-tokens($palette-config);
 
   // We can't set the `track-color` using `theme`, because it isn't possible for it to use a CSS
   // variable since MDC's buffer animation works by constructing an SVG string from this color.
+  // We also can't set the `track-color` by creating our own token slot because the track-color
+  // is set in the SVG string in `theme-styles`.
   @include mdc-linear-progress-theme.theme-styles((
     // TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
     // writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
     // and doesn't match the Material design spec. For now we approximate the buffer background by
     // applying an opacity to the color of the bar.
-    track-color: if(
-      meta.type-of($color-value) == color,
-      color.adjust($color-value, $alpha: -0.75),
-      $color-value
-    ),
+    track-color: map.get($color-tokens, track-color),
   ));
 
-  @include mdc-linear-progress-theme.theme((
-    active-indicator-color: $color-value,
-  ));
+  @include mdc-linear-progress-theme.theme($color-tokens);
 }
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  @include mdc-helpers.using-mdc-theme($config) {
-    .mat-mdc-progress-bar {
-      @include _palette-styles(primary);
 
-      &.mat-accent {
-        @include _palette-styles(secondary);
-      }
+  .mat-mdc-progress-bar {
+    @include _palette-styles($config, primary);
+
+    &.mat-accent {
+      @include _palette-styles($config, accent);
+    }
 
-      &.mat-warn {
-        @include _palette-styles(error);
-      }
+    &.mat-warn {
+      @include _palette-styles($config, warn);
     }
   }
 }

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

@@ -1,13 +1,28 @@
-@use '../core/mdc-helpers/mdc-helpers';
+@use 'sass:map';
+@use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/linear-progress/linear-progress' as mdc-linear-progress;
 @use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
+@use '../core/tokens/m2/mdc/linear-progress' as m2-mdc-linear-progress;
 
-@include mdc-helpers.disable-mdc-fallback-declarations {
-  @include mdc-linear-progress.static-styles($query: mdc-helpers.$mdc-base-styles-query);
+@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
+  $mdc-progress-bar-token-slots: m2-mdc-linear-progress.get-token-slots();
 
-  // TODO(crisbeto): we should be able to save some bytes here by setting the `track-color`
-  // to null, but MDC's styles assume that a string is always going to be passed in.
-  @include mdc-linear-progress-theme.theme-styles($theme: mdc-linear-progress-theme.$light-theme);
+  // Add the MDC progress-bar static styles.
+  @include mdc-linear-progress.static-styles();
+
+  // Add the official slots for the MDC progress-bar.
+  @include mdc-linear-progress-theme.theme-styles(
+      map.merge($mdc-progress-bar-token-slots, (
+      // Excluded because it is meant to be set by theme (b/273562256).
+      track-color: null,
+    ))
+  );
+
+  // Add default values for tokens that aren't outputted by the theming API.
+  .mat-mdc-progress-bar {
+    // Add default values for tokens that aren't outputted by the theming API.
+    @include mdc-linear-progress-theme.theme(m2-mdc-linear-progress.get-unthemable-tokens());
+  }
 }
 
 .mat-mdc-progress-bar {
@@ -35,4 +50,17 @@
       transition: transform 1ms;
     }
   }
+
+  // TODO(wagnermaciel): Switch to using CSS tokens once MDC provides them - b/275625642.
+  // These values were derived from the default values of MDC's linear-progress.
+  --mdc-linear-progress-primary-half: 83.67142%;
+  --mdc-linear-progress-primary-full: 200.611057%;
+  --mdc-linear-progress-secondary-quarter: 37.651913%;
+  --mdc-linear-progress-secondary-half: 84.386165%;
+  --mdc-linear-progress-secondary-full: 160.277782%;
+  --mdc-linear-progress-primary-half-neg: -83.67142%;
+  --mdc-linear-progress-primary-full-neg: -200.611057%;
+  --mdc-linear-progress-secondary-quarter-neg: -37.651913%;
+  --mdc-linear-progress-secondary-half-neg: -84.386165%;
+  --mdc-linear-progress-secondary-full-neg: -160.277782%;
 }