Fix a few gaps in our support for M3 configs and more closely align our M3 dev-app styles with our M2 dev-app styles (#28516)

* fix(material/theming): Fix M3 theme reliance on legacy theme inspection API

* test: Align M3 demo styles more closely with M2 demo styles

In particular, call the `all-component` mixins rather than individual
mixins.

* test: Allow toggling color API back compat CSS in the demo app

Author: mmalerba

src/dev-app/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
-load("//tools:defaults.bzl", "devmode_esbuild", "esbuild_config", "http_server", "ng_module", "sass_binary")
+load("//tools:defaults.bzl", "devmode_esbuild", "esbuild_config", "http_server", "ng_module", "sass_binary", "sass_library")
 load("//src/components-examples:config.bzl", "ALL_EXAMPLES")
 load("//tools/angular:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 
@@ -105,6 +105,14 @@ devmode_esbuild(
     ],
 )
 
+sass_library(
+    name = "color-api-back-compat",
+    srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material:sass_lib",
+    ],
+)
+
 sass_binary(
     name = "theme",
     src = "theme.scss",
@@ -119,6 +127,7 @@ sass_binary(
     name = "theme_m3",
     src = "theme-m3.scss",
     deps = [
+        ":color-api-back-compat",
         "//src/material:sass_lib",
         "//src/material-experimental:sass_lib",
         "//src/material/core:theming_scss_lib",

src/dev-app/_color-api-back-compat.scss

@@ -0,0 +1,96 @@
+@use '@angular/material' as mat;
+
+@mixin color-variant-styles($theme, $color-variant) {
+  @include mat.option-color($theme, $color-variant: $color-variant);
+  @include mat.progress-spinner-color($theme, $color-variant: $color-variant);
+  @include mat.pseudo-checkbox-color($theme, $color-variant: $color-variant);
+  @include mat.stepper-color($theme, $color-variant: $color-variant);
+
+  &.mat-icon {
+    @include mat.icon-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-checkbox {
+    @include mat.checkbox-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-slider {
+    @include mat.slider-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-tab-group,
+  &.mat-mdc-tab-nav-bar {
+    @include mat.tabs-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-slide-toggle {
+    @include mat.slide-toggle-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-form-field {
+    @include mat.select-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-radio-button {
+    @include mat.radio-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-progress-bar {
+    @include mat.progress-bar-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-form-field {
+    @include mat.form-field-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-datepicker-content {
+    @include mat.datepicker-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-button-base {
+    @include mat.button-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-standard-chip {
+    @include mat.chips-color($theme, $color-variant: $color-variant);
+  }
+
+  .mdc-list-item__start,
+  .mdc-list-item__end {
+    @include mat.checkbox-color($theme, $color-variant: $color-variant);
+    @include mat.radio-color($theme, $color-variant: $color-variant);
+  }
+
+  // M3 dropped support for warn/error color FABs.
+  @if $color-variant != error {
+    &.mat-mdc-fab,
+    &.mat-mdc-mini-fab {
+      @include mat.fab-color($theme, $color-variant: $color-variant);
+    }
+  }
+}
+
+// TODO(mmalerba): Consider adding this as a back-compat API for users who want it, rather than just
+//  a demo thing.
+@mixin color-variants-back-compat($theme) {
+  .mat-primary {
+    @include color-variant-styles($theme, primary);
+  }
+  .mat-badge {
+    @include mat.badge-color($theme, $color-variant: primary);
+  }
+
+  .mat-accent {
+    @include color-variant-styles($theme, tertiary);
+  }
+  .mat-badge-accent {
+    @include mat.badge-color($theme, $color-variant: tertiary);
+  }
+
+  .mat-warn {
+    @include color-variant-styles($theme, error);
+  }
+  .mat-badge-warn {
+    @include mat.badge-color($theme, $color-variant: error);
+  }
+}

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

@@ -45,6 +45,14 @@
       <div class="demo-toolbar">
         <h1>Angular Material Demos</h1>
         <div class="demo-config-buttons">
+          @if (state.m3Enabled) {
+            <button
+                mat-icon-button
+                (click)="toggleColorApiBackCompat()"
+                matTooltip="{{state.colorApiBackCompat ? 'Disable' : 'Enable'}} color API back-compat">
+              <mat-icon>colorize</mat-icon>
+            </button>
+          }
           <button
             mat-icon-button
             (click)="toggleFullscreen()"

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

@@ -118,6 +118,7 @@ export class DevAppLayout {
     this.toggleRippleDisabled(this.state.rippleDisabled);
     this.toggleDirection(this.state.direction);
     this.toggleM3(this.state.m3Enabled);
+    this.toggleColorApiBackCompat(this.state.colorApiBackCompat);
   }
 
   toggleTheme(value = !this.state.darkTheme) {
@@ -179,6 +180,12 @@ export class DevAppLayout {
     setAppState(this.state);
   }
 
+  toggleColorApiBackCompat(value = !this.state.colorApiBackCompat) {
+    this.state.colorApiBackCompat = value;
+    this._document.body.classList.toggle('demo-color-api-back-compat', value);
+    setAppState(this.state);
+  }
+
   getDensityClass() {
     return `demo-density-${this.state.density}`;
   }

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

@@ -19,6 +19,7 @@ export interface DevAppState {
   strongFocusEnabled: boolean;
   m3Enabled: boolean;
   direction: Direction;
+  colorApiBackCompat: boolean;
 }
 
 /** Gets the current appearance state of the dev app. */
@@ -43,6 +44,7 @@ export function getAppState(): DevAppState {
       strongFocusEnabled: false,
       m3Enabled: false,
       direction: 'ltr',
+      colorApiBackCompat: true,
     };
 
     saveToStorage(value);

src/dev-app/select/select-demo.html

@@ -11,7 +11,7 @@
                       [class.demo-drinks-width-large]="drinksWidth === '400px'">
         <mat-label>Drink</mat-label>
         <mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
-          [disabled]="drinksDisabled" #drinkControl="ngModel" [panelClass]="m3ForceSecondary ? 'demo-force-secondary' : ''">
+          [disabled]="drinksDisabled" #drinkControl="ngModel">
           <mat-option [disabled]="drinksOptionsDisabled === 'all'">None</mat-option>
           @for (drink of drinks; track drink; let index = $index) {
             <mat-option [value]="drink.value"
@@ -59,9 +59,6 @@
           <option value="all">Disable All Options</option>
         </select>
       </p>
-      <p>
-        <mat-checkbox [(ngModel)]="m3ForceSecondary">Force secondary color for options in M3</mat-checkbox>
-      </p>
 
       <button mat-button (click)="currentDrink='water-2'">SET VALUE</button>
       <button mat-button (click)="drinksRequired=!drinksRequired">TOGGLE REQUIRED</button>

src/dev-app/select/select-demo.ts

@@ -71,7 +71,6 @@ export class SelectDemo {
   pokemonTheme: ThemePalette = 'primary';
   compareByValue = true;
   selectFormControl = new FormControl('', Validators.required);
-  m3ForceSecondary = true;
 
   sandwichBread = '';
   sandwichMeat = '';