fix(material/core): fix m2 system color values

src/dev-app/BUILD.bazel

@@ -83,6 +83,7 @@ ng_project(
         "//src/dev-app/slider",
         "//src/dev-app/snack-bar",
         "//src/dev-app/stepper",
+        "//src/dev-app/system",
         "//src/dev-app/table",
         "//src/dev-app/table-scroll-container",
         "//src/dev-app/tabs",

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

@@ -111,6 +111,7 @@ export class DevAppLayout {
     {name: 'Slider', route: '/slider'},
     {name: 'Snack Bar', route: '/snack-bar'},
     {name: 'Stepper', route: '/stepper'},
+    {name: 'System', route: '/system'},
     {name: 'Table Scroll Container', route: '/table-scroll-container'},
     {name: 'Table', route: '/table'},
     {name: 'Tabs', route: '/tabs'},

src/dev-app/routes.ts

@@ -235,6 +235,10 @@ export const DEV_APP_ROUTES: Routes = [
     path: 'stepper',
     loadComponent: () => import('./stepper/stepper-demo').then(m => m.StepperDemo),
   },
+  {
+    path: 'system',
+    loadComponent: () => import('./system/system-demo').then(m => m.SystemDemo),
+  },
   {
     path: 'table',
     loadComponent: () => import('./table/table-demo').then(m => m.TableDemo),

src/dev-app/system/BUILD.bazel

@@ -0,0 +1,22 @@
+load("//tools:defaults.bzl", "ng_project", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_project(
+    name = "system",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "system-demo.html",
+        "system_demo_scss",
+    ],
+    deps = [
+        "//:node_modules/@angular/common",
+        "//:node_modules/@angular/core",
+        "//src/material/card",
+    ],
+)
+
+sass_binary(
+    name = "system_demo_scss",
+    src = "system-demo.scss",
+)

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

@@ -0,0 +1,21 @@
+@for (group of colorGroups; track $index) {
+  <h2>{{group.name}}</h2>
+
+  @for (role of group.roles; track $index) {
+    @let titleColorRole = role.titleColorRole || role.foregroundColors[0];
+    <mat-card>
+      @for (backgroundColor of role.backgroundColors; track $index) {
+        <div class="example-background" style.backgroundColor="var(--mat-sys-{{backgroundColor}})">
+          <div class="example-foreground example-role-title" style.color="var(--mat-sys-{{titleColorRole}})">
+            {{backgroundColor}}
+          </div>
+          @for (foregroundColor of role.foregroundColors; track $index) {
+            <div class="example-foreground" style.color="var(--mat-sys-{{foregroundColor}})">
+              {{foregroundColor}}
+            </div>
+          }
+        </div>
+      }
+    </mat-card>
+  }
+}

src/dev-app/system/system-demo.scss

@@ -0,0 +1,29 @@
+mat-card {
+  font: var(--mat-sys-body-medium);
+  display: inline-flex;
+  flex-direction: column;
+  margin: 1rem;
+  overflow: hidden;
+  min-height: 16rem;
+}
+
+.example-background {
+  width: 16rem;
+  flex-grow: 1;
+  padding: 1rem 0.5rem 1rem 0;
+}
+
+.example-foreground {
+  padding-inline-start: 2rem;
+}
+
+.example-role-title {
+  font: var(--mat-sys-title-small);
+  padding-inline-start: 1rem;
+  margin-bottom: 1rem;
+}
+
+section {
+  margin-inline: 3rem;
+  max-width: 75px;
+}

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

@@ -0,0 +1,119 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatCardModule} from '@angular/material/card';
+
+interface RoleCategory {
+  /** Display name of a category for grouping related roles. */
+  name: string;
+  roles: ColorGroup[];
+}
+
+interface ColorGroup {
+  /** List of role names used for background colors in this group. */
+  backgroundColors: string[];
+
+  /** List of role names used for foreground colors in this group. */
+  foregroundColors: string[];
+
+  /**
+   * Optional color role name to use for displaying titles. If not specified,
+   * the first foreground color is used.
+   */
+  titleColorRole?: string;
+}
+
+/**
+ * Demo showing color swatches for Material Color Roles in the default GM3 and
+ * Angular Material color palettes.
+ */
+@Component({
+  selector: 'system-demo',
+  templateUrl: 'system-demo.html',
+  styleUrls: ['system-demo.css'],
+  imports: [CommonModule, MatCardModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SystemDemo {
+  /**
+   * Color roles grouped into categories for display. Each role group is
+   * rendered into a card showing the background colors for that role, with text
+   * labels written in the foreground colors for that role.
+   */
+  protected readonly colorGroups: RoleCategory[] = [
+    {
+      name: 'Primary',
+      roles: [
+        {
+          backgroundColors: ['primary'],
+          foregroundColors: ['on-primary'],
+        },
+        {
+          backgroundColors: ['primary-container'],
+          foregroundColors: ['on-primary-container'],
+        },
+        {
+          backgroundColors: ['primary-fixed', 'primary-fixed-dim'],
+          foregroundColors: ['on-primary-fixed', 'on-primary-fixed-variant'],
+        },
+      ],
+    },
+    {
+      name: 'Secondary',
+      roles: [
+        {
+          backgroundColors: ['secondary'],
+          foregroundColors: ['on-secondary'],
+        },
+        {
+          backgroundColors: ['secondary-container'],
+          foregroundColors: ['on-secondary-container'],
+        },
+        {
+          backgroundColors: ['secondary-fixed', 'secondary-fixed-dim'],
+          foregroundColors: ['on-secondary-fixed', 'on-secondary-fixed-variant'],
+        },
+      ],
+    },
+    {
+      name: 'Surface',
+      roles: [
+        {
+          backgroundColors: ['surface-bright', 'surface', 'surface-dim'],
+          foregroundColors: ['on-surface', 'on-surface-variant'],
+        },
+        {
+          backgroundColors: [
+            'surface-container-lowest',
+            'surface-container-low',
+            'surface-container',
+            'surface-container-high',
+            'surface-container-highest',
+          ],
+          foregroundColors: ['on-surface', 'on-surface-variant'],
+        },
+        {
+          backgroundColors: ['inverse-surface'],
+          foregroundColors: ['inverse-on-surface', 'inverse-primary'],
+        },
+      ],
+    },
+    {
+      name: 'Utility',
+      roles: [
+        {
+          backgroundColors: ['error'],
+          foregroundColors: ['on-error'],
+        },
+        {
+          backgroundColors: ['error-container'],
+          foregroundColors: ['on-error-container'],
+        },
+        {
+          backgroundColors: ['outline', 'outline-variant', 'scrim', 'shadow'],
+          foregroundColors: [],
+          titleColorRole: 'on-primary',
+        },
+      ],
+    },
+  ];
+}

src/material/core/tokens/m2/_md-sys-color.scss

@@ -28,9 +28,9 @@
     on-primary-container: map.get($palettes, primary, default-contrast),
     on-primary-fixed: map.get($palettes, primary, default-contrast),
     on-primary-fixed-variant: map.get($palettes, primary, default-contrast),
-    on-secondary-container: map.get($palettes, accent, default),
-    on-secondary-fixed: map.get($palettes, accent, default),
-    on-secondary-fixed-variant: map.get($palettes, accent, default),
+    on-secondary-container: map.get($palettes, accent, default-contrast),
+    on-secondary-fixed: map.get($palettes, accent, default-contrast),
+    on-secondary-fixed-variant: map.get($palettes, accent, default-contrast),
     on-tertiary: map.get($palettes, accent, default-contrast),
     on-tertiary-container: map.get($palettes, accent, default-contrast),
     on-tertiary-fixed: map.get($palettes, accent, default-contrast),
@@ -39,9 +39,9 @@
     primary-fixed: map.get($palettes, primary, default),
     primary-fixed-dim: map.get($palettes, primary, default),
     scrim: black,
-    secondary-container: map.get($palettes, accent, default-contrast),
-    secondary-fixed: map.get($palettes, accent, default-contrast),
-    secondary-fixed-dim: map.get($palettes, accent, default-contrast),
+    secondary-container: map.get($palettes, accent, default),
+    secondary-fixed: map.get($palettes, accent, default),
+    secondary-fixed-dim: map.get($palettes, accent, default),
     surface-bright: map.get(palette.$grey-palette, 800),
     surface-container: map.get(palette.$grey-palette, 800),
     surface-container-high: map.get(palette.$grey-palette, 800),
@@ -84,9 +84,9 @@
     on-primary-container: map.get($palettes, primary, default-contrast),
     on-primary-fixed: map.get($palettes, primary, default-contrast),
     on-primary-fixed-variant: map.get($palettes, primary, default-contrast),
-    on-secondary-container: map.get($palettes, accent, default),
-    on-secondary-fixed: map.get($palettes, accent, default),
-    on-secondary-fixed-variant: map.get($palettes, accent, default),
+    on-secondary-container: map.get($palettes, accent, default-contrast),
+    on-secondary-fixed: map.get($palettes, accent, default-contrast),
+    on-secondary-fixed-variant: map.get($palettes, accent, default-contrast),
     on-tertiary: map.get($palettes, accent, default-contrast),
     on-tertiary-container: map.get($palettes, accent, default-contrast),
     on-tertiary-fixed: map.get($palettes, accent, default-contrast),
@@ -95,17 +95,17 @@
     primary-fixed: map.get($palettes, primary, default),
     primary-fixed-dim: map.get($palettes, primary, default),
     scrim: black,
-    secondary-container: map.get($palettes, accent, default-contrast),
-    secondary-fixed: map.get($palettes, accent, default-contrast),
-    secondary-fixed-dim: map.get($palettes, accent, default-contrast),
-    surface-bright: map.get(palette.$grey-palette, 800),
-    surface-container: map.get(palette.$grey-palette, 800),
-    surface-container-high: map.get(palette.$grey-palette, 800),
-    surface-container-highest: map.get(palette.$grey-palette, 800),
-    surface-container-low: map.get(palette.$grey-palette, 800),
-    surface-container-lowest: map.get(palette.$grey-palette, 800),
-    surface-dim: map.get(palette.$grey-palette, 800),
-    surface-tint: map.get(palette.$grey-palette, 800),
+    secondary-container: map.get($palettes, accent, default),
+    secondary-fixed: map.get($palettes, accent, default),
+    secondary-fixed-dim: map.get($palettes, accent, default),
+    surface-bright: white,
+    surface-container: white,
+    surface-container-high: white,
+    surface-container-highest: white,
+    surface-container-low: white,
+    surface-container-lowest: white,
+    surface-dim: white,
+    surface-tint: white,
     tertiary: map.get($palettes, accent, default),
     tertiary-container: map.get($palettes, accent, default),
     tertiary-fixed: map.get($palettes, accent, default),