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

Author: wagnermaciel

…ore/tokens/m2/mdc/_progress-spinner.scss …re/tokens/m2/mdc/_circular-progress.scsssrc/material/core/tokens/m2/mdc/_progress-spinner.scss renamed to src/material/core/tokens/m2/mdc/_circular-progress.scss src/material/core/tokens/m2/mdc/_progress-spinner.scss renamed to src/material/core/tokens/m2/mdc/_circular-progress.scss

@@ -3,7 +3,7 @@
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, progress-spinner);
+$prefix: (mdc, circular-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.
@@ -13,21 +13,30 @@ $prefix: (mdc, progress-spinner);
 // our CSS.
 @function get-unthemable-tokens() {
   @return (
+    // The thickness of the progress spinner's active indicator.
     active-indicator-width: 4px,
+    // The the diameter of the spinner
     size: 48px,
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
+    // Angular Material does not support four color spinners
     four-color-active-indicator-one-color: null,
+    // Angular Material does not support four color spinners
     four-color-active-indicator-two-color: null,
+    // Angular Material does not support four color spinners
     four-color-active-indicator-three-color: null,
+    // Angular Material does not support four color spinners
     four-color-active-indicator-four-color: null
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($config) {
-  @return (active-indicator-color: theming.get-color-from-palette(map.get($config, primary)));
+  @return (
+    // The color of the progress spinner's active indicator.
+    active-indicator-color: theming.get-color-from-palette(map.get($config, primary))
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

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

@@ -6,7 +6,7 @@
 @use '@material/list/list-theme' as mdc-list-theme;
 
 @use '../m2/mdc/list' as tokens-mdc-list;
-@use '../m2/mdc/progress-spinner' as tokens-mdc-progress-spinner;
+@use '../m2/mdc/circular-progress' as tokens-mdc-circular-progress;
 
 @mixin validate-slots($component, $slots, $reference) {
   @debug 'Validating #{$component}...';
@@ -27,7 +27,7 @@
 );
 
 @include validate-slots(
-  $component: 'm2.mdc.progress-spinner',
-  $slots: tokens-mdc-progress-spinner.get-token-slots(),
+  $component: 'm2.mdc.circular-progress',
+  $slots: tokens-mdc-circular-progress.get-token-slots(),
   $reference: mdc-circular-progress-theme.$light-theme
 );

src/material/progress-spinner/progress-spinner.scss

@@ -2,11 +2,11 @@
 @use '@material/circular-progress/circular-progress' as mdc-circular-progress;
 @use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
-@use '../core/tokens/m2/mdc/progress-spinner' as m2-mdc-progress-spinner;
+@use '../core/tokens/m2/mdc/circular-progress' as m2-mdc-circular-progress;
 
 // The slots for tokens that will be configured in the theme can be emitted with no fallback.
 @include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
-  $mdc-circular-progress-token-slots: m2-mdc-progress-spinner.get-token-slots();
+  $mdc-circular-progress-token-slots: m2-mdc-circular-progress.get-token-slots();
 
   // Add the MDC progress spinner static styles.
   @include mdc-circular-progress.static-styles();
@@ -16,7 +16,7 @@
 
   // Add default values for tokens that aren't outputted by the theming API.
   .mat-mdc-progress-spinner {
-    @include mdc-circular-progress-theme.theme(m2-mdc-progress-spinner.get-unthemable-tokens());
+    @include mdc-circular-progress-theme.theme(m2-mdc-circular-progress.get-unthemable-tokens());
   }
 }