feat(material-experimental/theming): add M3 progress-spinner support (#27868)

* build: rename the m3 theme file

Rename the m3 theme file to make its purpose more clear. Also change
some related text in the dev-app.

* feat(material-experimental/theming): add M3 progress-spinner support

Author: mmalerba

src/dev-app/BUILD.bazel

@@ -116,8 +116,8 @@ sass_binary(
 )
 
 sass_binary(
-    name = "theme_token_api",
-    src = "theme-token-api.scss",
+    name = "theme_m3",
+    src = "theme-m3.scss",
     deps = [
         "//src/material:sass_lib",
         "//src/material-experimental:sass_lib",
@@ -142,7 +142,7 @@ filegroup(
         "favicon.ico",
         "index.html",
         ":theme",
-        ":theme_token_api",
+        ":theme_m3",
         ":variables",
         "//src/dev-app/icon:icon_demo_assets",
         "@npm//:node_modules/moment/min/moment-with-locales.min.js",

src/dev-app/dev-app/dev-app-layout.html

@@ -53,8 +53,8 @@ <h1>Angular Material Demos</h1>
           </button>
           <button
             mat-icon-button
-            (click)="toggleTokens()"
-            [matTooltip]="state.tokensEnabled ? 'Disable tokens' : 'Enable tokens'">
+            (click)="toggleM3()"
+            [matTooltip]="state.m3Enabled ? 'Use M2 theme' : 'Use M3 theme'">
             <mat-icon>brush</mat-icon>
           </button>
           <button

src/dev-app/dev-app/dev-app-layout.ts

@@ -162,13 +162,13 @@ export class DevAppLayout {
     }
   }
 
-  toggleTokens(value = !this.state.tokensEnabled) {
+  toggleM3(value = !this.state.m3Enabled) {
     // We need to diff this one since it's a bit more expensive to toggle.
-    if (value !== this.state.tokensEnabled) {
+    if (value !== this.state.m3Enabled) {
       (document.getElementById('theme-styles') as HTMLLinkElement).href = value
-        ? 'theme-token-api.css'
+        ? 'theme-m3.css'
         : 'theme.css';
-      this.state.tokensEnabled = value;
+      this.state.m3Enabled = value;
       setAppState(this.state);
     }
   }

src/dev-app/dev-app/dev-app-state.ts

@@ -17,7 +17,7 @@ export interface DevAppState {
   darkTheme: boolean;
   rippleDisabled: boolean;
   strongFocusEnabled: boolean;
-  tokensEnabled: boolean;
+  m3Enabled: boolean;
   direction: Direction;
 }
 
@@ -41,7 +41,7 @@ export function getAppState(): DevAppState {
       darkTheme: false,
       rippleDisabled: false,
       strongFocusEnabled: false,
-      tokensEnabled: false,
+      m3Enabled: false,
       direction: 'ltr',
     };
 

src/dev-app/main.ts

@@ -29,7 +29,7 @@ import {getAppState} from './dev-app/dev-app-state';
 // It uses a different file, instead of toggling a class, to avoid other styles from bleeding in.
 const cachedAppState = getAppState();
 const theme = document.createElement('link');
-theme.href = cachedAppState.tokensEnabled ? 'theme-token-api.css' : 'theme.css';
+theme.href = cachedAppState.m3Enabled ? 'theme-m3.css' : 'theme.css';
 theme.id = 'theme-styles';
 theme.rel = 'stylesheet';
 document.head.appendChild(theme);

src/dev-app/theme-token-api.scss renamed to src/dev-app/theme-m3.scss

@@ -2,10 +2,10 @@
 @use '@angular/material' as mat;
 @use '@angular/material-experimental' as matx;
 
-// Add an indicator to make it clear that the app is styled with the experimental theming API.
+// Add an indicator to make it clear that the app is styled with the experimental M3 theme.
 dev-app {
   &::before {
-    content: 'Using experimental theming API';
+    content: 'Using experimental M3 theme, only components that support M3 will work';
     display: inline-block;
     position: fixed;
     z-index: 100;
@@ -42,6 +42,7 @@ html {
   @include mat.toolbar-theme($light-theme);
   @include mat.slider-theme($light-theme);
   @include mat.snack-bar-theme($light-theme);
+  @include mat.progress-spinner-theme($light-theme);
 }
 
 // Emit dark theme styles.
@@ -56,6 +57,7 @@ html {
   @include mat.toolbar-color($dark-theme);
   @include mat.slider-color($dark-theme);
   @include mat.snack-bar-color($dark-theme);
+  @include mat.progress-spinner-color($dark-theme);
 }
 
 // Emit density styles for each scale.
@@ -69,5 +71,6 @@ html {
     @include mat.toolbar-density($scale-theme);
     @include mat.slider-density($scale-theme);
     @include mat.snack-bar-density($scale-theme);
+    @include mat.progress-spinner-density($scale-theme);
   }
 }

src/material-experimental/theming-next/README.md

@@ -55,4 +55,3 @@ $m2-tokens: mat.m2-tokens-from-theme($my-theme);
   need to appear differently, say within `.dark-sidebar`, set the token overrides on the
   `.dark-sidebar` element and they will be inherited down to the checkboxes within, instead of the
   values from the root element.
-- For a small example, see this [alternate partial theme](https://github.com/angular/components/blob/main/src/dev-app/theme-token-api.scss) for the dev-app

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

@@ -203,6 +203,11 @@
           mdc-tokens.md-comp-plain-tooltip-values($systems, $exclude-hardcoded),
           $token-slots
       ),
+      _namespace-tokens(
+            (mdc, circular-progress),
+          mdc-tokens.md-comp-circular-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-spinner/_progress-spinner-theme.scss

@@ -1,39 +1,52 @@
+@use 'sass:map';
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/m2/mdc/circular-progress' as tokens-mdc-circular-progress;
 @use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;
 
 @mixin base($theme) {
-  // Add default values for tokens not related to color, typography, or density.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-circular-progress-theme.theme(
-      tokens-mdc-circular-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-circular-progress-theme.theme(
+          tokens-mdc-circular-progress.get-unthemable-tokens()
+      );
+    }
   }
 }
 
 @mixin color($theme) {
-  $mdc-circular-progress-color-tokens: tokens-mdc-circular-progress.get-color-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    $mdc-circular-progress-color-tokens: tokens-mdc-circular-progress.get-color-tokens($theme);
 
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-circular-progress-theme.theme($mdc-circular-progress-color-tokens);
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-circular-progress-theme.theme($mdc-circular-progress-color-tokens);
 
-    .mat-accent {
-      $color: inspection.get-theme-color($theme, accent);
-      @include mdc-circular-progress-theme.theme((active-indicator-color: $color));
-    }
+      .mat-accent {
+        $color: inspection.get-theme-color($theme, accent);
+        @include mdc-circular-progress-theme.theme((active-indicator-color: $color));
+      }
 
-    .mat-warn {
-      $color: inspection.get-theme-color($theme, warn);
-      @include mdc-circular-progress-theme.theme((active-indicator-color: $color));
+      .mat-warn {
+        $color: inspection.get-theme-color($theme, warn);
+        @include mdc-circular-progress-theme.theme((active-indicator-color: $color));
+      }
     }
   }
 }
 
-@mixin typography($theme) {}
+@mixin typography($theme) {
+}
 
-@mixin density($theme) {}
+@mixin density($theme) {
+}
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-progress-spinner') {
@@ -49,3 +62,10 @@
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include mdc-circular-progress-theme.theme(
+        map.get($tokens, tokens-mdc-circular-progress.$prefix));
+  }
+}