refactor: rename mdc- prefixed tokens/variables to mat- (#30677)

* refactor: rename mdc- prefixed tokens to mat-

* refactor: repeat mdc tokens along with mat rename

* refactor: include mdc prefix in icon button

---------

Co-authored-by: Andrew Seguin <[email protected]>

Author: andrewseguin

material.angular.io/scenes/src/app/scenes/snack-bar/snack-bar-scene.scss

@@ -2,7 +2,7 @@
 // within the scene bounds.
 .mat-mdc-snack-bar-container {
   margin: 8px !important;
-  --mdc-snackbar-container-color: red;
+  --mat-snackbar-container-color: red;
   color: rgba(white, 0.87) !important;
 
   button {

src/material/button/_icon-button-theme.scss

@@ -108,14 +108,15 @@
       // Match the styles that used to be present. This is necessary for backwards
       // compat to match the previous implementations selector count (two classes).
       --mdc-icon-button-state-layer-size: #{$calculated-size};
+      --mat-icon-button-state-layer-size: #{$calculated-size};
 
-      // TODO: Switch calculated-size to "var(--mdc-icon-button-state-layer-size)"
+      // TODO: Switch calculated-size to "var(--mat-icon-button-state-layer-size)"
       // Currently fails validation because the variable is "undefined"
       // in the sass stack.
-      // TODO: Switch icon-size to "var(--mdc-icon-button-icon-size)". Currently
+      // TODO: Switch icon-size to "var(--mat-icon-button-icon-size)". Currently
       // fails validation because the variable is "undefined" in the sass stack.
-      width: var(--mdc-icon-button-state-layer-size);
-      height: var(--mdc-icon-button-state-layer-size);
+      width: var(--mat-icon-button-state-layer-size);
+      height: var(--mat-icon-button-state-layer-size);
       padding: math.div($calculated-size - $icon-size, 2);
     }
   }

src/material/chips/chip.scss

@@ -629,7 +629,7 @@ $_avatar-trailing-padding: 8px;
 
   // Technically the avatar is only supposed to have an image, but we also allow for icons.
   // Set the color so the icons inherit the correct color.
-  color: var(--mdc-chip-with-icon-icon-color, currentColor);
+  color: var(--mat-chip-with-icon-icon-color, currentColor);
 }
 
 // Required for the strong focus indicator to fill the chip.

src/material/core/theming/_definition.scss

@@ -7,12 +7,12 @@
 @use './config-validation';
 
 // Prefix used for component token fallback variables, e.g.
-// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+// `color: var(--mat-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.
 // Prefix used for component token fallback variables, e.g.
-// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+// `color: var(--mat-text-button-label-text-color, var(--mat-sys-primary));`
 // TODO: Remove this variable after internal clients are migrated from "sys"
 $system-level-prefix: mat-sys;
 

src/material/core/theming/_inspection.scss

@@ -119,7 +119,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @if not theme-has($theme, color) {
     @error 'Color information is not available on this theme.';
   }
-  $color-roles: map.get($theme, $_internals, color-tokens, (mdc, theme));
+  $color-roles: map.get($theme, $_internals, color-tokens, (mat, theme));
   $result: map.get($color-roles, $color-role-name);
   @if not $result {
     @error #{'Valid color roles are: #{map.keys($color-roles)}. Got:'} $color-role-name;
@@ -185,7 +185,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
       font-weight: '-weight'
     ), $property);
     $token-name: '#{$typescale}#{$property-key}';
-    @return map.get($theme, $_internals, typography-tokens, (mdc, typography), $token-name);
+    @return map.get($theme, $_internals, typography-tokens, (mat, typography), $token-name);
   }
   @else {
     @error #{'Unrecognized theme version:'} $version;

src/material/core/theming/tests/m3-theme.spec.ts

@@ -151,7 +151,7 @@ describe('M3 theme', () => {
         }
       `);
 
-      expect(css).toContain('--mdc-checkbox-selected-checkmark-color: magenta');
+      expect(css).toContain('--mat-checkbox-selected-checkmark-color: magenta');
       expectNoWarning(/`selected-checkmark-color` is deprecated/);
     });
 
@@ -162,8 +162,8 @@ describe('M3 theme', () => {
         }
       `);
 
-      expect(css).toContain('--mdc-filled-text-field-caret-color: magenta');
-      expect(css).not.toContain('--mdc-outline-text-field-caret-color: magenta');
+      expect(css).toContain('--mat-filled-text-field-caret-color: magenta');
+      expect(css).not.toContain('--mat-outline-text-field-caret-color: magenta');
       expectNoWarning(/`filled-caret-color` is deprecated/);
     });
 
@@ -174,8 +174,8 @@ describe('M3 theme', () => {
         }
       `);
 
-      expect(css).toContain('--mdc-filled-text-field-caret-color: magenta');
-      expect(css).toContain('--mdc-outlined-text-field-caret-color: magenta');
+      expect(css).toContain('--mat-filled-text-field-caret-color: magenta');
+      expect(css).toContain('--mat-outlined-text-field-caret-color: magenta');
       expectWarning(
         /Token `caret-color` is deprecated. Please use one of the following alternatives: filled-caret-color, outlined-caret-color/,
       );

src/material/core/theming/tests/theming-definition-api.spec.ts

@@ -111,10 +111,10 @@ describe('theming definition api', () => {
         ));
         $data: map.get($theme, $internals);
         :root {
-          --token-surface: #{map.get($data, color-tokens, (mdc, theme), surface)};
-          --token-primary: #{map.get($data, color-tokens, (mdc, theme), primary)};
-          --token-secondary: #{map.get($data, color-tokens, (mdc, theme), secondary)};
-          --token-tertiary: #{map.get($data, color-tokens, (mdc, theme), tertiary)};
+          --token-surface: #{map.get($data, color-tokens, (mat, theme), surface)};
+          --token-primary: #{map.get($data, color-tokens, (mat, theme), primary)};
+          --token-secondary: #{map.get($data, color-tokens, (mat, theme), secondary)};
+          --token-tertiary: #{map.get($data, color-tokens, (mat, theme), tertiary)};
           --palette-primary: #{map.get($data, palettes, primary, 50)};
           --palette-secondary: #{map.get($data, palettes, secondary, 50)};
           --palette-tertiary: #{map.get($data, palettes, tertiary, 50)};
@@ -146,13 +146,13 @@ describe('theming definition api', () => {
         $data: map.get($theme, $internals);
         :root {
           --display-font:
-            #{map.get($data, typography-tokens, (mdc, typography), display-large-font)};
+            #{map.get($data, typography-tokens, (mat, typography), display-large-font)};
           --display-weight:
-            #{map.get($data, typography-tokens, (mdc, typography), display-large-weight)};
+            #{map.get($data, typography-tokens, (mat, typography), display-large-weight)};
           --title-font:
-            #{map.get($data, typography-tokens, (mdc, typography), title-small-font)};
+            #{map.get($data, typography-tokens, (mat, typography), title-small-font)};
           --title-weight:
-            #{map.get($data, typography-tokens, (mdc, typography), title-small-weight)};
+            #{map.get($data, typography-tokens, (mat, typography), title-small-weight)};
         }
       `);
       const vars = getRootVars(css);
@@ -171,7 +171,7 @@ describe('theming definition api', () => {
         ));
         $data: map.get($theme, $internals);
         :root {
-          --size: #{map.get($data, density-tokens, (mdc, checkbox), state-layer-size)};
+          --size: #{map.get($data, density-tokens, (mat, checkbox), state-layer-size)};
         }
       `);
       const vars = getRootVars(css);