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.

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;

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