fix(multiple): rename token prefixes to match components (#30802)

andrewseguin · web-flow · commit 9bf4be9e231a · 2025-04-04T11:58:51.000-06:00
* fix(multiple): rename token prefixes to match components

* fix(material/core): theming tests
diff --git a/src/material/button-toggle/_m2-legacy-button-toggle.scss b/src/material/button-toggle/_m2-legacy-button-toggle.scss
@@ -3,7 +3,7 @@
 @use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, legacy-button-toggle);
+$prefix: (mat, button-toggle-legacy);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/button-toggle/_m2-standard-button-toggle.scss b/src/material/button-toggle/_m2-standard-button-toggle.scss
@@ -6,7 +6,7 @@
 @use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, standard-button-toggle);
+$prefix: (mat, button-toggle);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/button-toggle/_m3-standard-button-toggle.scss b/src/material/button-toggle/_m3-standard-button-toggle.scss
@@ -3,7 +3,7 @@
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, standard-button-toggle);
+$prefix: (mat, button-toggle);
 
 /// Generates custom tokens for the mat-button-toggle.
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/button/_m2-extended-fab.scss b/src/material/button/_m2-extended-fab.scss
@@ -4,7 +4,7 @@
 @use '../core/theming/inspection';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, extended-fab);
+$prefix: (mat, fab-extended);
 
 @function get-unthemable-tokens() {
   @return (
diff --git a/src/material/button/_m2-filled-button.scss b/src/material/button/_m2-filled-button.scss
@@ -6,7 +6,7 @@
 @use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, filled-button);
+$prefix: (mat, button-filled);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/button/_m2-outlined-button.scss b/src/material/button/_m2-outlined-button.scss
@@ -6,7 +6,7 @@
 @use 'sass:map';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, outlined-button);
+$prefix: (mat, button-outlined);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/button/_m2-protected-button.scss b/src/material/button/_m2-protected-button.scss
@@ -7,7 +7,7 @@
 @use '../core/style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, protected-button);
+$prefix: (mat, button-protected);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/button/_m2-text-button.scss b/src/material/button/_m2-text-button.scss
@@ -6,7 +6,7 @@
 @use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, text-button);
+$prefix: (mat, button-text);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/button/_m2-tonal-button.scss b/src/material/button/_m2-tonal-button.scss
@@ -5,7 +5,7 @@
 @use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tonal-button);
+$prefix: (mat, button-tonal);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/button/_m3-extended-fab.scss b/src/material/button/_m3-extended-fab.scss
@@ -3,7 +3,7 @@
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, extended-fab);
+$prefix: (mat, fab-extended);
 
 /// Generates the tokens for MDC extended-fab
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/button/_m3-filled-button.scss b/src/material/button/_m3-filled-button.scss
@@ -3,7 +3,7 @@
 @use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, filled-button);
+$prefix: (mat, button-filled);
 
 /// Generates custom tokens for the mat-flat-button.
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/button/_m3-outlined-button.scss b/src/material/button/_m3-outlined-button.scss
@@ -3,7 +3,7 @@
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, outlined-button);
+$prefix: (mat, button-outlined);
 
 /// Generates custom tokens for the mat-outlined-button.
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/button/_m3-protected-button.scss b/src/material/button/_m3-protected-button.scss
@@ -5,7 +5,7 @@
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 // Note: in M3 the "protected" button is called "elevated".
-$prefix: (mat, protected-button);
+$prefix: (mat, button-protected);
 
 /// Generates custom tokens for the mat-raised-button.
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/button/_m3-text-button.scss b/src/material/button/_m3-text-button.scss
@@ -3,7 +3,7 @@
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, text-button);
+$prefix: (mat, button-text);
 
 /// Generates custom tokens for the mat-button.
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/button/_m3-tonal-button.scss b/src/material/button/_m3-tonal-button.scss
@@ -3,7 +3,7 @@
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tonal-button);
+$prefix: (mat, button-tonal);
 
 /// Generates custom tokens for the mat-flat-button.
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/card/_m2-elevated-card.scss b/src/material/card/_m2-elevated-card.scss
@@ -4,7 +4,7 @@
 @use '../core/tokens/m2-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, elevated-card);
+$prefix: (mat, card-elevated);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/card/_m2-outlined-card.scss b/src/material/card/_m2-outlined-card.scss
@@ -4,7 +4,7 @@
 @use '../core/tokens/m2-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, outlined-card);
+$prefix: (mat, card-outlined);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/card/_m3-elevated-card.scss b/src/material/card/_m3-elevated-card.scss
@@ -3,7 +3,7 @@
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, elevated-card);
+$prefix: (mat, card-elevated);
 
 /// Generates the tokens for MDC elevated-card
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/card/_m3-outlined-card.scss b/src/material/card/_m3-outlined-card.scss
@@ -3,7 +3,7 @@
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, outlined-card);
+$prefix: (mat, card-outlined);
 
 /// Generates the tokens for MDC outlined-card
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/selection/pseudo-checkbox/_m2-full-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m2-full-pseudo-checkbox.scss
@@ -3,7 +3,7 @@
 @use '../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, full-pseudo-checkbox);
+$prefix: (mat, pseudo-checkbox-full);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/core/selection/pseudo-checkbox/_m2-minimal-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m2-minimal-pseudo-checkbox.scss
@@ -3,7 +3,7 @@
 @use '../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, minimal-pseudo-checkbox);
+$prefix: (mat, pseudo-checkbox-minimal);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/core/selection/pseudo-checkbox/_m3-full-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m3-full-pseudo-checkbox.scss
@@ -3,7 +3,7 @@
 @use '../../tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, full-pseudo-checkbox);
+$prefix: (mat, pseudo-checkbox-full);
 
 /// Generates custom tokens for the full variant of mat-pseudo-checkbox.
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/selection/pseudo-checkbox/_m3-minimal-pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/_m3-minimal-pseudo-checkbox.scss
@@ -3,7 +3,7 @@
 @use '../../tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, minimal-pseudo-checkbox);
+$prefix: (mat, pseudo-checkbox-minimal);
 
 /// Generates custom tokens for the minimal variant of mat-pseudo-checkbox.
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/theming/tests/m3-theme.spec.ts b/src/material/core/theming/tests/m3-theme.spec.ts
@@ -162,8 +162,8 @@ describe('M3 theme', () => {
         }
       `);
 
-      expect(css).toContain('--mat-filled-text-field-caret-color: magenta');
-      expect(css).not.toContain('--mat-outline-text-field-caret-color: magenta');
+      expect(css).toContain('--mat-form-field-filled-caret-color: magenta');
+      expect(css).not.toContain('--mat-form-field-outlined-caret-color: magenta');
       expectNoWarning(/`filled-caret-color` is deprecated/);
     });
 
@@ -174,8 +174,8 @@ describe('M3 theme', () => {
         }
       `);
 
-      expect(css).toContain('--mat-filled-text-field-caret-color: magenta');
-      expect(css).toContain('--mat-outlined-text-field-caret-color: magenta');
+      expect(css).toContain('--mat-form-field-filled-caret-color: magenta');
+      expect(css).toContain('--mat-form-field-outlined-caret-color: magenta');
       expectWarning(
         /Token `caret-color` is deprecated. Please use one of the following alternatives: filled-caret-color, outlined-caret-color/,
       );
diff --git a/src/material/form-field/_m2-filled-text-field.scss b/src/material/form-field/_m2-filled-text-field.scss
@@ -6,7 +6,7 @@
 @use '../core/tokens/m2-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, filled-text-field);
+$prefix: (mat, form-field-filled);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/form-field/_m2-outlined-text-field.scss b/src/material/form-field/_m2-outlined-text-field.scss
@@ -4,7 +4,7 @@
 @use '../core/tokens/m2-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, outlined-text-field);
+$prefix: (mat, form-field-outlined);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/form-field/_m3-filled-text-field.scss b/src/material/form-field/_m3-filled-text-field.scss
@@ -3,7 +3,7 @@
 @use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, filled-text-field);
+$prefix: (mat, form-field-filled);
 
 /// Generates the tokens for MDC filled-text-field
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/form-field/_m3-outlined-text-field.scss b/src/material/form-field/_m3-outlined-text-field.scss
@@ -3,7 +3,7 @@
 @use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, outlined-text-field);
+$prefix: (mat, form-field-outlined);
 
 /// Generates the tokens for MDC outlined-text-field
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/progress-bar/_m2-progress-bar.scss b/src/material/progress-bar/_m2-progress-bar.scss
@@ -5,7 +5,7 @@
 @use 'sass:meta';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, linear-progress);
+$prefix: (mat, progress-bar);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/progress-bar/_m3-progress-bar.scss b/src/material/progress-bar/_m3-progress-bar.scss
@@ -2,7 +2,7 @@
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, linear-progress);
+$prefix: (mat, progress-bar);
 
 /// Generates the tokens for MDC linear-progress
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/progress-spinner/_m2-progress-spinner.scss b/src/material/progress-spinner/_m2-progress-spinner.scss
@@ -3,7 +3,7 @@
 @use '../core/tokens/m2-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, circular-progress);
+$prefix: (mat, progress-spinner);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/progress-spinner/_m3-progress-spinner.scss b/src/material/progress-spinner/_m3-progress-spinner.scss
@@ -2,7 +2,7 @@
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, circular-progress);
+$prefix: (mat, progress-spinner);
 
 /// Generates the tokens for MDC circular-progress
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/slide-toggle/_m2-slide-toggle.scss b/src/material/slide-toggle/_m2-slide-toggle.scss
@@ -6,7 +6,7 @@
 @use 'sass:map';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, switch);
+$prefix: (mat, slide-toggle);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/slide-toggle/_m3-slide-toggle.scss b/src/material/slide-toggle/_m3-slide-toggle.scss
@@ -3,7 +3,7 @@
 @use '../core/style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, switch);
+$prefix: (mat, slide-toggle);
 
 /// Generates custom tokens for the mat-slide-toggle.
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/tabs/_m2-secondary-navigation-tab.scss b/src/material/tabs/_m2-secondary-navigation-tab.scss
@@ -5,7 +5,7 @@
 @use '../core/tokens/m2-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, secondary-navigation-tab);
+$prefix: (mat, tab);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/tabs/_m2-tab-header-with-background.scss b/src/material/tabs/_m2-tab-header-with-background.scss
@@ -3,7 +3,7 @@
 @use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab-header-with-background);
+$prefix: (mat, tab);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/tabs/_m2-tab-header.scss b/src/material/tabs/_m2-tab-header.scss
@@ -3,7 +3,7 @@
 @use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab-header);
+$prefix: (mat, tab);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/tabs/_m2-tab-indicator.scss b/src/material/tabs/_m2-tab-indicator.scss
@@ -3,7 +3,7 @@
 @use '../core/tokens/m2-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab-indicator);
+$prefix: (mat, tab);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/tabs/_m3-secondary-navigation-tab.scss b/src/material/tabs/_m3-secondary-navigation-tab.scss
@@ -1,7 +1,7 @@
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, secondary-navigation-tab);
+$prefix: (mat, tab);
 
 /// Generates the tokens for MDC tab
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/tabs/_m3-tab-header.scss b/src/material/tabs/_m3-tab-header.scss
@@ -3,7 +3,7 @@
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab-header);
+$prefix: (mat, tab);
 
 /// Generates custom tokens for the mat-tab-header.
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/tabs/_m3-tab-indicator.scss b/src/material/tabs/_m3-tab-indicator.scss
@@ -2,7 +2,7 @@
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab-indicator);
+$prefix: (mat, tab);
 
 /// Generates the tokens for MDC tab-indicator
 /// @param {Map} $systems The MDC system tokens
diff --git a/src/material/tooltip/_m2-tooltip.scss b/src/material/tooltip/_m2-tooltip.scss
@@ -3,7 +3,7 @@
 @use '../core/tokens/m2-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, plain-tooltip);
+$prefix: (mat, tooltip);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
diff --git a/src/material/tooltip/_m3-tooltip.scss b/src/material/tooltip/_m3-tooltip.scss
@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, plain-tooltip);
+$prefix: (mat, tooltip);
 
 /// Generates the tokens for MDC plain-tooltip
 /// @param {Map} $systems The MDC system tokens
