feat(material/core): add experimental utility classes

src/dev-app/BUILD.bazel

@@ -94,6 +94,7 @@ ng_project(
         "//src/dev-app/tooltip",
         "//src/dev-app/tree",
         "//src/dev-app/typography",
+        "//src/dev-app/utility-classes-demo",
         "//src/dev-app/virtual-scroll",
         "//src/dev-app/youtube-player",
         "//src/material/core",

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

@@ -122,6 +122,7 @@ export class DevAppLayout {
     {name: 'Tooltip', route: '/tooltip'},
     {name: 'Tree', route: '/tree'},
     {name: 'Typography', route: '/typography'},
+    {name: 'Utility', route: '/utility'},
     {name: 'Virtual Scrolling', route: '/virtual-scroll'},
     {name: 'YouTube Player', route: '/youtube-player'},
   ];

src/dev-app/routes.ts

@@ -302,6 +302,11 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () =>
       import('./youtube-player/youtube-player-demo').then(m => m.YouTubePlayerDemo),
   },
+  {
+    path: 'utility',
+    loadComponent: () =>
+      import('./utility-classes-demo/utility-classes-demo').then(m => m.UtilityClassesDemo),
+  },
   {
     path: 'selection',
     loadComponent: () => import('./selection/selection-demo').then(m => m.SelectionDemo),

src/dev-app/theme-m3.scss

@@ -52,6 +52,8 @@ html {
       density: 0,
     ));
   }
+
+  @include mat.utility-classes();
 }
 
 @include mat.typography-hierarchy($light-theme);

src/dev-app/theme.scss

@@ -24,6 +24,7 @@ $candy-app-theme: mat.m2-define-light-theme((
 @include mat.app-background();
 @include mat.elevation-classes();
 @include mat.m2-theme($candy-app-theme);
+@include mat.utility-classes();
 
 // Include the default theme styles.
 @include mat.all-component-themes($candy-app-theme);

src/dev-app/utility-classes-demo/BUILD.bazel

@@ -0,0 +1,20 @@
+load("//tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_project(
+    name = "utility-classes-demo",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "utility-classes-demo.html",
+        ":utility_classes_demo_scss",
+    ],
+    deps = [
+        "//:node_modules/@angular/core",
+    ],
+)
+
+sass_binary(
+    name = "utility_classes_demo_scss",
+    src = "utility-classes-demo.scss",
+)

src/dev-app/utility-classes-demo/utility-classes-demo.html

@@ -0,0 +1,93 @@
+<h1>Utility Classes</h1>
+
+<section>
+  <h2>Color</h2>
+  <div class="demo-grid">
+    <div class="mat-bg-primary demo-box">mat-bg-primary</div>
+    <div class="mat-bg-primary-container demo-box">mat-bg-primary-container</div>
+    <div class="mat-bg-secondary demo-box">mat-bg-secondary</div>
+    <div class="mat-bg-secondary-container demo-box">mat-bg-secondary-container</div>
+    <div class="mat-bg-error demo-box">mat-bg-error</div>
+    <div class="mat-bg-error-container demo-box">mat-bg-error-container</div>
+    <div class="mat-bg-surface demo-box">mat-bg-surface</div>
+    <div class="mat-bg-surface-variant demo-box">mat-bg-surface-variant</div>
+    <div class="mat-bg-surface-container-highest demo-box">mat-bg-surface-container-highest</div>
+    <div class="mat-bg-surface-container-high demo-box">mat-bg-surface-container-high</div>
+    <div class="mat-bg-surface-container demo-box">mat-bg-surface-container</div>
+    <div class="mat-bg-surface-container-low demo-box">mat-bg-surface-container-low</div>
+    <div class="mat-bg-surface-container-lowest demo-box">mat-bg-surface-container-lowest</div>
+    <div class="mat-bg-inverse-surface demo-box">mat-bg-inverse-surface</div>
+    <div class="mat-bg-disabled demo-box">mat-bg-disabled</div>
+  </div>
+</section>
+
+<section>
+  <h2>Text Color</h2>
+  <div class="demo-grid">
+    <div class="mat-text-primary">mat-text-primary</div>
+    <div class="mat-text-secondary">mat-text-secondary</div>
+    <div class="mat-text-error">mat-text-error</div>
+    <div class="mat-text-disabled">mat-text-disabled</div>
+  </div>
+</section>
+
+<section>
+  <h2>Typography</h2>
+  <div class="demo-typography">
+    <div class="mat-font-display-large">Display Large</div>
+    <div class="mat-font-display-medium">Display Medium</div>
+    <div class="mat-font-display-small">Display Small</div>
+    <div class="mat-font-headline-large">Headline Large</div>
+    <div class="mat-font-headline-medium">Headline Medium</div>
+    <div class="mat-font-headline-small">Headline Small</div>
+    <div class="mat-font-title-large">Title Large</div>
+    <div class="mat-font-title-medium">Title Medium</div>
+    <div class="mat-font-title-small">Title Small</div>
+    <div class="mat-font-body-large">Body Large</div>
+    <div class="mat-font-body-medium">Body Medium</div>
+    <div class="mat-font-body-small">Body Small</div>
+  </div>
+</section>
+
+<section>
+  <h2>Shape</h2>
+  <div class="demo-grid">
+    <div class="mat-corner-extra-small demo-box mat-bg-primary-container">
+      mat-corner-extra-small
+    </div>
+    <div class="mat-corner-small demo-box mat-bg-primary-container">mat-corner-small</div>
+    <div class="mat-corner-medium demo-box mat-bg-primary-container">mat-corner-medium</div>
+    <div class="mat-corner-large demo-box mat-bg-primary-container">mat-corner-large</div>
+    <div class="mat-corner-extra-large demo-box mat-bg-primary-container">
+      mat-corner-extra-large
+    </div>
+    <div class="mat-corner-full demo-box mat-bg-primary-container">mat-corner-full</div>
+  </div>
+</section>
+
+<section>
+  <h2>Elevation</h2>
+  <div class="demo-grid">
+    <div class="mat-shadow-level-1 demo-box mat-bg-surface">mat-shadow-level-1</div>
+    <div class="mat-shadow-level-2 demo-box mat-bg-surface">mat-shadow-level-2</div>
+    <div class="mat-shadow-level-3 demo-box mat-bg-surface">mat-shadow-level-3</div>
+    <div class="mat-shadow-level-4 demo-box mat-bg-surface">mat-shadow-level-4</div>
+    <div class="mat-shadow-level-5 demo-box mat-bg-surface">mat-shadow-level-5</div>
+  </div>
+</section>
+
+<section>
+  <h2>Outline</h2>
+  <div class="demo-grid">
+    <div class="mat-outline demo-box">mat-outline</div>
+    <div class="mat-outline-variant demo-box">mat-outline-variant</div>
+  </div>
+</section>
+
+<section>
+  <h2>Stateful</h2>
+  <div class="demo-grid">
+    <div class="mat-stateful demo-box">mat-stateful</div>
+    <div class="mat-stateful-primary demo-box">mat-stateful-primary</div>
+  </div>
+</section>

src/dev-app/utility-classes-demo/utility-classes-demo.scss

@@ -0,0 +1,18 @@
+.demo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.demo-box {
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+  text-align: center;
+}
+
+.demo-typography > div {
+  margin-bottom: 16px;
+}

src/dev-app/utility-classes-demo/utility-classes-demo.ts

@@ -0,0 +1,9 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'app-utility-classes-demo',
+  templateUrl: './utility-classes-demo.html',
+  styleUrls: ['./utility-classes-demo.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UtilityClassesDemo {}

src/material/BUILD.bazel

@@ -65,6 +65,7 @@ sass_library(
         "//src/material/core/theming:_inspection",
         "//src/material/core/theming:_palettes",
         "//src/material/core/theming:core_all_theme",
+        "//src/material/core/tokens:classes",
         "//src/material/core/tokens:system",
         "//src/material/core/typography",
         "//src/material/core/typography:all_typography",

src/material/_index.scss

@@ -20,6 +20,7 @@
 @forward 'core/tokens/system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
     system-level-motion, system-level-state, theme, theme-overrides, m2-theme;
+@forward 'core/tokens/classes' show utility-classes;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;

src/material/core/tokens/BUILD.bazel

@@ -86,3 +86,8 @@ sass_library(
         "//src/material/tree:m3",
     ],
 )
+
+sass_library(
+    name = "classes",
+    srcs = ["_classes.scss"],
+)