feat(material/core): add experimental theme demo (#29636)

Author: andrewseguin

.stylelintrc.json

@@ -81,7 +81,7 @@
 
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-allowed-list": ["px", "%", "deg", "s", "ms", "em", "rem", "vh", "vw", "vmin"],
+    "unit-allowed-list": ["px", "%", "deg", "s", "ms", "em", "rem", "vh", "vw", "vmin", "fr"],
 
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",

src/dev-app/BUILD.bazel

@@ -71,6 +71,7 @@ ng_module(
         "//src/dev-app/table",
         "//src/dev-app/table-scroll-container",
         "//src/dev-app/tabs",
+        "//src/dev-app/theme",
         "//src/dev-app/toolbar",
         "//src/dev-app/tooltip",
         "//src/dev-app/tree",

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

@@ -97,6 +97,17 @@ <h1>Angular Material Demos</h1>
               <mat-icon>dark_mode</mat-icon>
             }
           </button>
+          <button
+              mat-icon-button
+              (click)="toggleSystemTheme()"
+              [matTooltip]="state.systemTheme ? 'Switch to standard theme' : 'Switch to system theme'"
+          >
+            @if (state.systemTheme) {
+              <mat-icon>public_off</mat-icon>
+            } @else {
+              <mat-icon>public</mat-icon>
+            }
+          </button>
           <button
             mat-icon-button
             (click)="toggleRippleDisabled()"

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

@@ -110,6 +110,7 @@ export class DevAppLayout {
     {name: 'Table Scroll Container', route: '/table-scroll-container'},
     {name: 'Table', route: '/table'},
     {name: 'Tabs', route: '/tabs'},
+    {name: 'Theme', route: '/theme'},
     {name: 'Toolbar', route: '/toolbar'},
     {name: 'Tooltip', route: '/tooltip'},
     {name: 'Tree', route: '/tree'},
@@ -127,6 +128,7 @@ export class DevAppLayout {
 
   constructor() {
     this.toggleTheme(this.state.darkTheme);
+    this.toggleSystemTheme(this.state.systemTheme);
     this.toggleStrongFocus(this.state.strongFocusEnabled);
     this.toggleDensity(Math.max(this._densityScales.indexOf(this.state.density), 0));
     this.toggleRippleDisabled(this.state.rippleDisabled);
@@ -141,6 +143,12 @@ export class DevAppLayout {
     setAppState(this.state);
   }
 
+  toggleSystemTheme(value = !this.state.systemTheme) {
+    this.state.systemTheme = value;
+    this._document.body.classList.toggle('demo-experimental-theme', value);
+    setAppState(this.state);
+  }
+
   toggleFullscreen() {
     this._element.nativeElement.querySelector('.demo-content')?.requestFullscreen();
   }

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

@@ -16,6 +16,7 @@ export interface DevAppState {
   animations: boolean;
   zoneless: boolean;
   darkTheme: boolean;
+  systemTheme: boolean;
   rippleDisabled: boolean;
   strongFocusEnabled: boolean;
   m3Enabled: boolean;
@@ -42,6 +43,7 @@ export function getAppState(): DevAppState {
       animations: true,
       zoneless: false,
       darkTheme: false,
+      systemTheme: false,
       rippleDisabled: false,
       strongFocusEnabled: false,
       m3Enabled: false,

src/dev-app/routes.ts

@@ -221,6 +221,10 @@ export const DEV_APP_ROUTES: Routes = [
     path: 'tabs',
     loadComponent: () => import('./tabs/tabs-demo').then(m => m.TabsDemo),
   },
+  {
+    path: 'theme',
+    loadComponent: () => import('./theme/theme-demo').then(m => m.ThemeDemo),
+  },
   {
     path: 'toolbar',
     loadComponent: () => import('./toolbar/toolbar-demo').then(m => m.ToolbarDemo),

src/dev-app/theme-m3.scss

@@ -5,13 +5,16 @@
 // Disable legacy API compatibility, since dev-app is fully migrated to theme inspection API.
 mat.$theme-legacy-inspection-api-compatibility: false;
 
+$primary: mat.$azure-palette;
+$tertiary: mat.$blue-palette;
+
 // Create a theme with the specified color type and density.
 @function create-theme($type: light, $density: 0) {
   @return mat.define-theme((
     color: (
       theme-type: $type,
-      primary: mat.$azure-palette,
-      tertiary: mat.$blue-palette,
+      primary: $primary,
+      tertiary: $tertiary,
       use-system-variables: true,
     ),
     typography: (use-system-variables: true),
@@ -34,12 +37,26 @@ $dark-theme: create-theme($type: dark);
 
 // Include the default theme styles.
 html {
-  @include mat.all-component-themes($light-theme);
-  @include mat.system-level-colors($light-theme);
-  @include mat.system-level-typography($light-theme);
-  // TODO(mmalerba): Support M3 for experimental components.
-  // @include matx.column-resize-theme($light-theme);
-  // @include matx.popover-edit-theme($light-theme);
+  body:not(.demo-experimental-theme) {
+    @include mat.all-component-themes($light-theme);
+    @include mat.system-level-colors($light-theme);
+    @include mat.system-level-typography($light-theme);
+    // TODO(mmalerba): Support M3 for experimental components.
+    // @include matx.column-resize-theme($light-theme);
+    // @include matx.popover-edit-theme($light-theme);
+  }
+
+  body.demo-experimental-theme {
+    @include mat.private-experimental-theme((
+      color: (
+        theme-type: light,
+        primary: $primary,
+        tertiary: $tertiary,
+      ),
+      typography: Roboto,
+      density: 0,
+    ));
+  }
 }
 
 @include mat.typography-hierarchy($light-theme);
@@ -55,13 +72,25 @@ html {
 // CSS class whatever you want. In this example, any component inside of an element with
 // `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
 // default theme.
-.demo-unicorn-dark-theme {
-  // Include the dark theme color styles.
-  @include mat.all-component-colors($dark-theme);
-  @include mat.system-level-colors($dark-theme);
-  // TODO(mmalerba): Support M3 for experimental components.
-  // @include matx.column-resize-color($dark-theme);
-  // @include matx.popover-edit-color($dark-theme);
+body.demo-unicorn-dark-theme {
+  &:not(.demo-experimental-theme) {
+    // Include the dark theme color styles.
+    @include mat.all-component-colors($dark-theme);
+    @include mat.system-level-colors($dark-theme);
+    // TODO(mmalerba): Support M3 for experimental components.
+    // @include matx.column-resize-color($dark-theme);
+    // @include matx.popover-edit-color($dark-theme);
+  }
+
+  &.demo-experimental-theme {
+    @include mat.private-experimental-theme((
+      color: (
+        theme-type: dark,
+        primary: $primary,
+        tertiary: $tertiary,
+      ),
+    ));
+  }
 
   // Include the dark theme colors for focus indicators.
   &.demo-strong-focus {
@@ -75,8 +104,14 @@ html {
 $density-scales: (-1, -2, -3, -4, minimum, maximum);
 @each $scale in $density-scales {
   .demo-density-#{$scale} {
-    $density-theme: create-theme($density: $scale);
-    @include mat.all-component-densities($density-theme);
+    body:not(.demo-experimental-theme) & {
+      $density-theme: create-theme($density: $scale);
+      @include mat.all-component-densities($density-theme);
+    }
+
+    body.demo-experimental-theme & {
+      @include mat.private-experimental-theme((density: $scale));
+    }
   }
 }
 

src/dev-app/theme/BUILD.bazel

@@ -0,0 +1,27 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "theme",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "theme-demo.html",
+        ":theme_demo_scss",
+    ],
+    deps = [
+        "//src/dev-app/dev-app",
+        "//src/material/card",
+        "//src/material/expansion",
+        "//src/material/icon",
+        "@npm//@angular/forms",
+    ],
+)
+
+sass_binary(
+    name = "theme_demo_scss",
+    src = "theme-demo.scss",
+    deps = [
+        "//src/material:sass_lib",
+    ],
+)