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

Author: wagnermaciel

src/material/core/tokens/m2/mdc/_progress-bar.scss

@@ -0,0 +1,56 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../token-utils';
+@use 'sass:color';
+@use 'sass:meta';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, progress-bar);
+
+// 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 (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));
+  @debug ($primary);
+  @warn (hello);
+  @return (
+    active-indicator-color: $primary,
+    track-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,14 @@
 @use 'sass:list';
 @use 'sass:map';
 @use '@material/theme/validate' as mdc-validate;
+
 @use '@material/list/list-theme' as mdc-list-theme;
 @use '../m2/mdc/list' as tokens-mdc-list;
 
-@mixin validate-slots(
-  $component,
-  $slots,
-  $reference
-) {
+@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
+@use '../m2/mdc/progress-bar' as tokens-mdc-progress-bar;
+
+@mixin validate-slots($component, $slots, $reference) {
   @debug 'Validating #{$component}...';
   // We don't care what the values are, just that every valid token is present in the slots map.
   // Specifically its ok if the token is explicitly mapped to `null`. We therefore replace all the
@@ -21,7 +21,13 @@
 }
 
 @include validate-slots(
-    $component: 'm2.mdc.list',
-    $slots: tokens-mdc-list.get-token-slots(),
-    $reference: mdc-list-theme.$light-theme
+  $component: 'm2.mdc.list',
+  $slots: tokens-mdc-list.get-token-slots(),
+  $reference: mdc-list-theme.$light-theme
+);
+
+@include validate-slots(
+  $component: 'm2.mdc.progress-bar',
+  $slots: tokens-mdc-progress-bar.get-token-slots(),
+  $reference: mdc-linear-progress-theme.$light-theme
 );

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

@@ -1,13 +1,21 @@
 @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/progress-bar' as m2-mdc-progress-bar;
 
 @include mdc-helpers.disable-mdc-fallback-declarations {
-  @include mdc-linear-progress.static-styles($query: mdc-helpers.$mdc-base-styles-query);
+  $mdc-progress-bar-token-slots: m2-mdc-progress-bar.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($mdc-progress-bar-token-slots);
+
+  // Add default values for tokens that aren't outputted by the theming API.
+  .mat-mdc-progress-bar {
+    @include mdc-linear-progress-theme.theme(m2-mdc-progress-bar.get-unthemable-tokens());
+  }
 }
 
 .mat-mdc-progress-bar {