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

This reverts commit 04deba8.

Author: wagnermaciel

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

@@ -1,18 +1,14 @@
 @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;
 
@@ -33,6 +29,7 @@
   $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(),
@@ -53,8 +50,3 @@
   $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/core/tokens/tests/test-validate-tokens.scss

@@ -1,39 +1,46 @@
+@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
-@use '../core/tokens/m2/mdc/linear-progress' as tokens-mdc-linear-progress;
+@use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
-@use 'sass:map';
+@use 'sass:color';
+@use 'sass:meta';
 
-@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);
+
+@mixin _palette-styles($color) {
+  $color-value: mdc-theme-color.prop-value($color);
 
   // 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: map.get($color-tokens, track-color),
+    track-color: if(
+      meta.type-of($color-value) == color,
+      color.adjust($color-value, $alpha: -0.75),
+      $color-value
+    ),
   ));
 
-  @include mdc-linear-progress-theme.theme($color-tokens);
+  @include mdc-linear-progress-theme.theme((
+    active-indicator-color: $color-value,
+  ));
 }
 
 @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-mdc-progress-bar {
-    @include _palette-styles($config, primary);
-
-    &.mat-accent {
-      @include _palette-styles($config, accent);
-    }
+      &.mat-accent {
+        @include _palette-styles(secondary);
+      }
 
-    &.mat-warn {
-      @include _palette-styles($config, warn);
+      &.mat-warn {
+        @include _palette-styles(error);
+      }
     }
   }
 }

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

@@ -1,28 +1,13 @@
-@use 'sass:map';
-@use '@material/theme/custom-properties' as mdc-custom-properties;
+@use '../core/mdc-helpers/mdc-helpers';
 @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-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
-  $mdc-progress-bar-token-slots: m2-mdc-linear-progress.get-token-slots();
+@include mdc-helpers.disable-mdc-fallback-declarations {
+  @include mdc-linear-progress.static-styles($query: mdc-helpers.$mdc-base-styles-query);
 
-  // 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());
-  }
+  // 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);
 }
 
 .mat-mdc-progress-bar {