From 613cf54063138201a9398979cd363ee1ace7ea66 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Thu, 17 Oct 2024 09:51:52 -0600 Subject: [PATCH] fix(material/core): rename sys vars from mat-app to mat-sys (#29879) --- src/dev-app/theme/theme-demo.html | 62 ++++++------ src/dev-app/theme/theme-demo.scss | 96 +++++++++---------- src/dev-app/theme/theme-demo.ts | 76 +++++++-------- src/material/core/_core.scss | 2 +- src/material/core/tokens/_m3-system.scss | 12 +-- .../ng-generate/theme-color/index.spec.ts | 60 ++++++------ .../ng-generate/theme-color/index.ts | 2 +- 7 files changed, 155 insertions(+), 155 deletions(-) diff --git a/src/dev-app/theme/theme-demo.html b/src/dev-app/theme/theme-demo.html index 2ea1c66c3b4c..9c487df0ed87 100644 --- a/src/dev-app/theme/theme-demo.html +++ b/src/dev-app/theme/theme-demo.html @@ -24,18 +24,18 @@

Colors

colors and follow their uses to add theme colors to your application's custom components.

- Note that variables starting with "mat-app-on-*" are designed to be used for text or icons - placed on top of its paired parent color. For example, --mat-app-on-primary - is used for text and icons in elements filled with the --mat-app-primary color. + Note that variables starting with "--mat-sys-on-*" are designed to be used for text or icons + placed on top of its paired parent color. For example, --mat-sys-on-primary + is used for text and icons in elements filled with the --mat-sys-primary color.

+ [style.background-color]="'var(--mat-sys-primary)'" + [style.color]="'var(--mat-sys-on-primary)'">
Primary
-
--mat-app-primary
+
--mat-sys-primary

@@ -48,7 +48,7 @@

Colors

outline color of form fields.

- Use the color --mat-app-on-primary for + Use the color --mat-sys-on-primary for icons, text, and other visual elements placed on a primary background. This color is calculated to be optimal for accessibility and legibility.

@@ -57,10 +57,10 @@

Colors

+ [style.background-color]="'var(--mat-sys-surface)'" + [style.color]="'var(--mat-sys-on-surface)'">
Surface
-
--mat-app-surface
+
--mat-sys-surface

@@ -72,7 +72,7 @@

Colors

components such as the dialog, card, table, and more.

- Use the color --mat-app-on-surface for + Use the color --mat-sys-on-surface for icons, text, and other visual elements placed on a surface background. This color is calculated to be optimal for accessibility and legibility.

@@ -81,10 +81,10 @@

Colors

+ [style.background-color]="'var(--mat-sys-error)'" + [style.color]="'var(--mat-sys-on-error)'">
Error
-
--mat-app-error
+
--mat-sys-error

@@ -95,7 +95,7 @@

Colors

form fields inputs.

- Use the color --mat-app-on-error for + Use the color --mat-sys-on-error for icons, text, and other visual elements placed on an error background. This color is calculated to be optimal for accessibility and legibility.

@@ -104,10 +104,10 @@

Colors

+ [style.background-color]="'var(--mat-sys-outline)'" + [style.color]="'var(--mat-sys-surface)'">
Outline
-
--mat-app-outline
+
--mat-sys-outline

@@ -119,7 +119,7 @@

Colors

form field.

- Use the color --mat-app-outline-variant for a less + Use the color --mat-sys-outline-variant for a less prominent outline.

@@ -135,7 +135,7 @@

Colors

to components.

- Colors may be paired with a --mat-app-on- variable + Colors may be paired with a --mat-sys-on- variable that should be used for text and icons placed within a filled container.

@@ -152,7 +152,7 @@

Surface Colors

Containers filled with a surface color should apply the - --mat-app-on-surface color to text + --mat-sys-on-surface color to text and icons placed within.

@@ -188,9 +188,9 @@

Typography

@for (size of ['small', 'medium', 'large']; track $index) {
-
--mat-app-{{category}}-{{size}}
+
--mat-sys-{{category}}-{{size}}
-
Lorem ipsum dolor
+
Lorem ipsum dolor
}
@@ -204,12 +204,12 @@

Typography

For example, the values for medium body text may be defined as follows: 

---mat-app-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
---mat-app-body-medium-font: Roboto, sans-serif;
---mat-app-body-medium-line-height: 1.25rem;
---mat-app-body-medium-size: 0.875rem;
---mat-app-body-medium-tracking: 0.016rem;
---mat-app-body-medium-weight: 400;
+--mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
+--mat-sys-body-medium-font: Roboto, sans-serif;
+--mat-sys-body-medium-line-height: 1.25rem;
+--mat-sys-body-medium-size: 0.875rem;
+--mat-sys-body-medium-tracking: 0.016rem;
+--mat-sys-body-medium-weight: 400;

Elevation

@@ -225,8 +225,8 @@

Elevation

@for (level of [0, 1, 2, 3, 4, 5]; track $index) { -
-box-shadow: var(--mat-app-level{{level}}) +
+box-shadow: var(--mat-sys-level{{level}})
} diff --git a/src/dev-app/theme/theme-demo.scss b/src/dev-app/theme/theme-demo.scss index cb3a320dc129..c28fafaf3317 100644 --- a/src/dev-app/theme/theme-demo.scss +++ b/src/dev-app/theme/theme-demo.scss @@ -6,24 +6,24 @@ } h1 { - font: var(--mat-app-title-large); + font: var(--mat-sys-title-large); font-size: 28px; padding-top: 32px; } h2 { - font: var(--mat-app-title-large); + font: var(--mat-sys-title-large); } a { - color: var(--mat-app-primary); + color: var(--mat-sys-primary); } .demo-warn { - background: var(--mat-app-error-container); - color: var(--mat-app-on-error-container); - border: 1px solid var(--mat-app-outline-variant); - border-radius: var(--mat-app-corner-extra-small); + background: var(--mat-sys-error-container); + color: var(--mat-sys-on-error-container); + border: 1px solid var(--mat-sys-outline-variant); + border-radius: var(--mat-sys-corner-extra-small); padding: 8px; } @@ -39,18 +39,18 @@ a { } .demo-color-container { - border-radius: var(--mat-app-corner-small); + border-radius: var(--mat-sys-corner-small); display: inline-block; - font: var(--mat-app-body-medium); + font: var(--mat-sys-body-medium); vertical-align: top; } .demo-heading { - color: var(--mat-app-on-primary); - background: var(--mat-app-primary); - border: 1px solid var(--mat-app-outline); - border-top-right-radius: var(--mat-app-corner-small); - border-top-left-radius: var(--mat-app-corner-small); + color: var(--mat-sys-on-primary); + background: var(--mat-sys-primary); + border: 1px solid var(--mat-sys-outline); + border-top-right-radius: var(--mat-sys-corner-small); + border-top-left-radius: var(--mat-sys-corner-small); border-bottom: none; padding: 16px; display: flex; @@ -59,19 +59,19 @@ a { } .demo-name { - font: var(--mat-app-title-medium); + font: var(--mat-sys-title-medium); } .demo-variable { - font: var(--mat-app-title-small); + font: var(--mat-sys-title-small); font-family: monospace; text-align: right; } .demo-description { - border: 1px solid var(--mat-app-outline); - border-bottom-right-radius: var(--mat-app-corner-small); - border-bottom-left-radius: var(--mat-app-corner-small); + border: 1px solid var(--mat-sys-outline); + border-bottom-right-radius: var(--mat-sys-corner-small); + border-bottom-left-radius: var(--mat-sys-corner-small); padding: 0 16px; } @@ -82,8 +82,8 @@ a { .demo-surface-variable { display: inline-block; font-family: monospace; - background: var(--mat-app-primary-container); - color: var(--mat-app-on-primary-container); + background: var(--mat-sys-primary-container); + color: var(--mat-sys-on-primary-container); padding: 2px 6px; margin: 0 2px; border-radius: 4px; @@ -93,17 +93,17 @@ mat-expansion-panel { margin-top: 24px; overflow: visible; @include mat.expansion-overrides(( - 'container-text-font': var(--mat-app-body-medium-font), - 'container-text-size': var(--mat-app-body-medium-size), - 'container-text-weight': var(--mat-app-body-medium-weight), - 'container-text-line-height': var(--mat-app-body-medium-line-height), - 'container-text-tracking': var(--mat-app-body-medium-tracking), + 'container-text-font': var(--mat-sys-body-medium-font), + 'container-text-size': var(--mat-sys-body-medium-size), + 'container-text-weight': var(--mat-sys-body-medium-weight), + 'container-text-line-height': var(--mat-sys-body-medium-line-height), + 'container-text-tracking': var(--mat-sys-body-medium-tracking), )); } .demo-compact-color-container { - border-radius: var(--mat-app-corner-small); - border: 1px solid var(--mat-app-outline); + border-radius: var(--mat-sys-corner-small); + border: 1px solid var(--mat-sys-outline); overflow: hidden; // Hide child heading background color margin-top: 24px; @@ -112,7 +112,7 @@ mat-expansion-panel { border-radius: 0; &:not(:nth-child(1)) { - border-top: 1px solid var(--mat-app-outline); + border-top: 1px solid var(--mat-sys-outline); } } @@ -122,19 +122,19 @@ mat-expansion-panel { } .demo-typography-group { - border: 1px solid var(--mat-app-outline); - border-radius: var(--mat-app-corner-small); + border: 1px solid var(--mat-sys-outline); + border-radius: var(--mat-sys-corner-small); margin-top: 40px; overflow: hidden; } .demo-typography-title { text-transform: capitalize; - font: var(--mat-app-title-medium); + font: var(--mat-sys-title-medium); padding: 16px; - border-bottom: 1px solid var(--mat-app-outline); - background: var(--mat-app-primary-container); - color: var(--mat-app-on-primary-container); + border-bottom: 1px solid var(--mat-sys-outline); + background: var(--mat-sys-primary-container); + color: var(--mat-sys-on-primary-container); } .demo-typography-variable { @@ -145,7 +145,7 @@ mat-expansion-panel { padding: 16px; display: flex; align-items: baseline; - border-top: 1px solid var(--mat-app-outline-variant); + border-top: 1px solid var(--mat-sys-outline-variant); &:nth-child(1) { border: none; @@ -166,24 +166,24 @@ mat-expansion-panel { display: flex; align-items: center; justify-content: center; - background: var(--mat-app-surface-container); - color: var(--mat-app-on-surface); - border-radius: var(--mat-app-corner-extra-small); + background: var(--mat-sys-surface-container); + color: var(--mat-sys-on-surface); + border-radius: var(--mat-sys-corner-extra-small); } .demo-code-block { - background: var(--mat-app-surface-container-low); + background: var(--mat-sys-surface-container-low); padding: 16px; - border-radius: var(--mat-app-corner-small); - border: 1px solid var(--mat-app-outline); + border-radius: var(--mat-sys-corner-small); + border: 1px solid var(--mat-sys-outline); } .demo-overrides { - background-color: var(--mat-app-primary); - color: var(--mat-app-on-primary); - font: var(--mat-app-body-medium); - border-radius: var(--mat-app-corner-large); - box-shadow: var(--mat-app-level3); + background-color: var(--mat-sys-primary); + color: var(--mat-sys-on-primary); + font: var(--mat-sys-body-medium); + border-radius: var(--mat-sys-corner-large); + box-shadow: var(--mat-sys-level3); padding: 16px; @include mat.theme-overrides(( @@ -191,6 +191,6 @@ mat-expansion-panel { on-primary: #230f46, body-medium: 600 1.5rem / 2.25rem Arial, corner-large: 32px, - level3: 0 4px 6px 1px var(--mat-app-surface-dim), + level3: 0 4px 6px 1px var(--mat-sys-surface-dim), )); } diff --git a/src/dev-app/theme/theme-demo.ts b/src/dev-app/theme/theme-demo.ts index f172c5332929..2bd1df53479b 100644 --- a/src/dev-app/theme/theme-demo.ts +++ b/src/dev-app/theme/theme-demo.ts @@ -58,77 +58,77 @@ export class ThemeDemo { alternativeThemeColors: Color[] = [ { name: 'Primary Container', - background: '--mat-app-primary-container', - text: '--mat-app-on-primary-container', + background: '--mat-sys-primary-container', + text: '--mat-sys-on-primary-container', }, { name: 'Secondary', - background: '--mat-app-secondary', - text: '--mat-app-on-secondary', + background: '--mat-sys-secondary', + text: '--mat-sys-on-secondary', }, { name: 'Secondary Container', - background: '--mat-app-secondary-container', - text: '--mat-app-on-secondary-container', + background: '--mat-sys-secondary-container', + text: '--mat-sys-on-secondary-container', }, { name: 'Tertiary', - background: '--mat-app-tertiary', - text: '--mat-app-on-tertiary', + background: '--mat-sys-tertiary', + text: '--mat-sys-on-tertiary', }, { name: 'Tertiary Container', - background: '--mat-app-tertiary-container', - text: '--mat-app-on-tertiary-container', + background: '--mat-sys-tertiary-container', + text: '--mat-sys-on-tertiary-container', }, { name: 'Error Container', - background: '--mat-app-error-container', - text: '--mat-app-on-error-container', + background: '--mat-sys-error-container', + text: '--mat-sys-on-error-container', }, ]; surfaceColors: Color[] = [ { name: 'Surface Dim', - background: '--mat-app-surface-dim', - text: '--mat-app-on-surface', + background: '--mat-sys-surface-dim', + text: '--mat-sys-on-surface', hideText: true, }, { name: 'Surface Bright', - background: '--mat-app-surface-bright', - text: '--mat-app-on-surface', + background: '--mat-sys-surface-bright', + text: '--mat-sys-on-surface', hideText: true, }, { name: 'Surface Container Lowest', - background: '--mat-app-surface-container-lowest', - text: '--mat-app-on-surface', + background: '--mat-sys-surface-container-lowest', + text: '--mat-sys-on-surface', hideText: true, }, { name: 'Surface Container Low', - background: '--mat-app-surface-container-low', - text: '--mat-app-on-surface', + background: '--mat-sys-surface-container-low', + text: '--mat-sys-on-surface', hideText: true, }, { name: 'Surface Container', - background: '--mat-app-surface-container', - text: '--mat-app-on-surface', + background: '--mat-sys-surface-container', + text: '--mat-sys-on-surface', hideText: true, }, { name: 'Surface Container High', - background: '--mat-app-surface-container-high', - text: '--mat-app-on-surface', + background: '--mat-sys-surface-container-high', + text: '--mat-sys-on-surface', hideText: true, }, { name: 'Surface Container Highest', - background: '--mat-app-surface-container-highest', - text: '--mat-app-on-surface', + background: '--mat-sys-surface-container-highest', + text: '--mat-sys-on-surface', hideText: true, }, ]; @@ -136,33 +136,33 @@ export class ThemeDemo { fixedColors: Color[] = [ { name: 'Primary Fixed', - background: '--mat-app-primary-fixed', - text: '--mat-app-on-primary-fixed', + background: '--mat-sys-primary-fixed', + text: '--mat-sys-on-primary-fixed', }, { name: 'Primary Fixed Dim', - background: '--mat-app-primary-fixed-dim', - text: '--mat-app-on-primary-fixed', + background: '--mat-sys-primary-fixed-dim', + text: '--mat-sys-on-primary-fixed', }, { name: 'Secondary Fixed', - background: '--mat-app-secondary-fixed', - text: '--mat-app-on-secondary-fixed', + background: '--mat-sys-secondary-fixed', + text: '--mat-sys-on-secondary-fixed', }, { name: 'Secondary Fixed Dim', - background: '--mat-app-secondary-fixed-dim', - text: '--mat-app-on-secondary-fixed', + background: '--mat-sys-secondary-fixed-dim', + text: '--mat-sys-on-secondary-fixed', }, { name: 'Tertiary Fixed', - background: '--mat-app-tertiary-fixed', - text: '--mat-app-on-tertiary-fixed', + background: '--mat-sys-tertiary-fixed', + text: '--mat-sys-on-tertiary-fixed', }, { name: 'Tertiary Fixed Dim', - background: '--mat-app-tertiary-fixed-dim', - text: '--mat-app-on-tertiary-fixed', + background: '--mat-sys-tertiary-fixed-dim', + text: '--mat-sys-on-tertiary-fixed', }, ]; } diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss index b524126d808e..b2207ae93492 100644 --- a/src/material/core/_core.scss +++ b/src/material/core/_core.scss @@ -16,7 +16,7 @@ // background color. However, if it isn't defined anywhere, then MSS // complains in its verification stage. html { - --mat-app-on-surface: initial; + --mat-sys-on-surface: initial; } // Wrapper element that provides the theme background when the diff --git a/src/material/core/tokens/_m3-system.scss b/src/material/core/tokens/_m3-system.scss index 70d874aaa94f..205ae6eb0d74 100644 --- a/src/material/core/tokens/_m3-system.scss +++ b/src/material/core/tokens/_m3-system.scss @@ -8,8 +8,8 @@ @use './m3-tokens'; // Prefix used for component token fallback variables, e.g. -// `color: var(--mdc-text-button-label-text-color, var(--mat-app-primary));` -$_system-fallback-prefix: mat-app; +// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));` +$_system-fallback-prefix: mat-sys; // Default system level prefix to use when directly calling the `system-level-*` mixins $_system-level-prefix: sys; @@ -36,8 +36,8 @@ $_system-level-prefix: sys; /// if the density value is a map, it must have a `scale` value. Density variable definitions will /// not be emitted if there are no density values in the config. /// -/// The application variables emitted use the namespace prefix "--mat-app". -/// e.g. --mat-app-surface: #E5E5E5 +/// The application variables emitted use the namespace prefix "--mat-sys". +/// e.g. --mat-sys-surface: #E5E5E5 /// /// @param {Map} $config The color configuration with optional keys color, typography, or density. @mixin theme($config, $overrides: ()) { @@ -205,8 +205,8 @@ $_system-level-prefix: sys; } // Return a new map where the values are the same as the provided map's -// keys, prefixed with "--mat-app-". For example: -// (key1: '', key2: '') --> (key1: --mat-app-key1, key2: --mat-app-key2) +// keys, prefixed with "--mat-sys-". For example: +// (key1: '', key2: '') --> (key1: --mat-sys-key1, key2: --mat-sys-key2) @function _create-system-app-vars-map($map) { $new-map: (); @each $key, $value in $map { diff --git a/src/material/schematics/ng-generate/theme-color/index.spec.ts b/src/material/schematics/ng-generate/theme-color/index.spec.ts index 498b387968f8..767f2b3d1abe 100644 --- a/src/material/schematics/ng-generate/theme-color/index.spec.ts +++ b/src/material/schematics/ng-generate/theme-color/index.spec.ts @@ -234,20 +234,20 @@ describe('material-theme-color-schematic', () => { const generatedCSS = transpileTheme(tree.readText('_theme-colors.scss')); // Check a system variable from each color palette for their high contrast light theme value - expect(generatedCSS).toContain(`--mat-app-primary: #580b2f`); - expect(generatedCSS).toContain(`--mat-app-secondary: #45212d`); - expect(generatedCSS).toContain(`--mat-app-tertiary: #4d1f00`); - expect(generatedCSS).toContain(`--mat-app-error: #600004`); - expect(generatedCSS).toContain(`--mat-app-surface: #fff8f8`); - expect(generatedCSS).toContain(`--mat-app-outline: #37282c`); + expect(generatedCSS).toContain(`--mat-sys-primary: #580b2f`); + expect(generatedCSS).toContain(`--mat-sys-secondary: #45212d`); + expect(generatedCSS).toContain(`--mat-sys-tertiary: #4d1f00`); + expect(generatedCSS).toContain(`--mat-sys-error: #600004`); + expect(generatedCSS).toContain(`--mat-sys-surface: #fff8f8`); + expect(generatedCSS).toContain(`--mat-sys-outline: #37282c`); // Check a system variable from each color palette for their high contrast dark theme value - expect(generatedCSS).toContain(`--mat-app-primary: #ffebef`); - expect(generatedCSS).toContain(`--mat-app-secondary: #ffebef`); - expect(generatedCSS).toContain(`--mat-app-tertiary: #ffece4`); - expect(generatedCSS).toContain(`--mat-app-error: #ffece9`); - expect(generatedCSS).toContain(`--mat-app-surface: #191113`); - expect(generatedCSS).toContain(`--mat-app-outline: #ffebef`); + expect(generatedCSS).toContain(`--mat-sys-primary: #ffebef`); + expect(generatedCSS).toContain(`--mat-sys-secondary: #ffebef`); + expect(generatedCSS).toContain(`--mat-sys-tertiary: #ffece4`); + expect(generatedCSS).toContain(`--mat-sys-error: #ffece9`); + expect(generatedCSS).toContain(`--mat-sys-surface: #191113`); + expect(generatedCSS).toContain(`--mat-sys-outline: #ffebef`); }); it('should be able to generate high contrast themes overrides when provided a primary and secondary color', async () => { @@ -260,12 +260,12 @@ describe('material-theme-color-schematic', () => { const generatedCSS = transpileTheme(tree.readText('_theme-colors.scss')); // Check a system variable from each color palette for their high contrast light theme value - expect(generatedCSS).toContain(`--mat-app-primary: #580b2f`); - expect(generatedCSS).toContain(`--mat-app-secondary: #580b2f`); + expect(generatedCSS).toContain(`--mat-sys-primary: #580b2f`); + expect(generatedCSS).toContain(`--mat-sys-secondary: #580b2f`); // Check a system variable from each color palette for their high contrast dark theme value - expect(generatedCSS).toContain(`--mat-app-primary: #ffebef`); - expect(generatedCSS).toContain(`--mat-app-secondary: #ffebef`); + expect(generatedCSS).toContain(`--mat-sys-primary: #ffebef`); + expect(generatedCSS).toContain(`--mat-sys-secondary: #ffebef`); }); it('should be able to generate high contrast themes overrides when provided primary, secondary, and tertiary color', async () => { @@ -279,14 +279,14 @@ describe('material-theme-color-schematic', () => { const generatedCSS = transpileTheme(tree.readText('_theme-colors.scss')); // Check a system variable from each color palette for their high contrast light theme value - expect(generatedCSS).toContain(`--mat-app-primary: #580b2f`); - expect(generatedCSS).toContain(`--mat-app-secondary: #580b2f`); - expect(generatedCSS).toContain(`--mat-app-tertiary: #580b2f`); + expect(generatedCSS).toContain(`--mat-sys-primary: #580b2f`); + expect(generatedCSS).toContain(`--mat-sys-secondary: #580b2f`); + expect(generatedCSS).toContain(`--mat-sys-tertiary: #580b2f`); // Check a system variable from each color palette for their high contrast dark theme value - expect(generatedCSS).toContain(`--mat-app-primary: #ffebef`); - expect(generatedCSS).toContain(`--mat-app-secondary: #ffebef`); - expect(generatedCSS).toContain(`--mat-app-tertiary: #ffebef`); + expect(generatedCSS).toContain(`--mat-sys-primary: #ffebef`); + expect(generatedCSS).toContain(`--mat-sys-secondary: #ffebef`); + expect(generatedCSS).toContain(`--mat-sys-tertiary: #ffebef`); }); it('should be able to generate high contrast themes overrides when provided primary, secondary, tertiary, and neutral color', async () => { @@ -301,16 +301,16 @@ describe('material-theme-color-schematic', () => { const generatedCSS = transpileTheme(tree.readText('_theme-colors.scss')); // Check a system variable from each color palette for their high contrast light theme value - expect(generatedCSS).toContain(`--mat-app-primary: #580b2f`); - expect(generatedCSS).toContain(`--mat-app-secondary: #580b2f`); - expect(generatedCSS).toContain(`--mat-app-tertiary: #580b2f`); - expect(generatedCSS).toContain(`--mat-app-surface-bright: #f9f9f9`); + expect(generatedCSS).toContain(`--mat-sys-primary: #580b2f`); + expect(generatedCSS).toContain(`--mat-sys-secondary: #580b2f`); + expect(generatedCSS).toContain(`--mat-sys-tertiary: #580b2f`); + expect(generatedCSS).toContain(`--mat-sys-surface-bright: #f9f9f9`); // Check a system variable from each color palette for their high contrast dark theme value - expect(generatedCSS).toContain(`--mat-app-primary: #ffebef`); - expect(generatedCSS).toContain(`--mat-app-secondary: #ffebef`); - expect(generatedCSS).toContain(`--mat-app-tertiary: #ffebef`); - expect(generatedCSS).toContain(`--mat-app-surface-bright: #4f5051`); + expect(generatedCSS).toContain(`--mat-sys-primary: #ffebef`); + expect(generatedCSS).toContain(`--mat-sys-secondary: #ffebef`); + expect(generatedCSS).toContain(`--mat-sys-tertiary: #ffebef`); + expect(generatedCSS).toContain(`--mat-sys-surface-bright: #4f5051`); }); }); diff --git a/src/material/schematics/ng-generate/theme-color/index.ts b/src/material/schematics/ng-generate/theme-color/index.ts index 97fbbde79235..1f84f20a44f1 100644 --- a/src/material/schematics/ng-generate/theme-color/index.ts +++ b/src/material/schematics/ng-generate/theme-color/index.ts @@ -290,7 +290,7 @@ function generateHighContrastOverrideMixinsSCSS( ); scss += '\n@mixin high-contrast-' + themeType + '-theme-overrides {\n'; for (const [key, value] of overrides!.entries()) { - scss += ' --mat-app-' + key + ': ' + value + ';\n'; + scss += ' --mat-sys-' + key + ': ' + value + ';\n'; } scss += '};\n'; }