fix(material/button): align prefixes with MDC (#27936)

We were using the `button-filled` and `button-protected` prefixes for our tokens, likely because that's the naming that MDC is using in their filenames. This was incorrect, because MDC uses the `filled-button` and `protected-button` prefixes for the actual tokens. This will be problematic when start looking up tokens based on their names so this PR updates the prefixes to be in line with MDC.

Author: crisbeto

src/material/button/_button-theme.scss

@@ -12,8 +12,8 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
-@use '../core/tokens/m2/mdc/button-filled' as tokens-mdc-button-filled;
-@use '../core/tokens/m2/mdc/button-protected' as tokens-mdc-button-protected;
+@use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
+@use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button;
 
 @function _on-color($theme, $palette) {
   $is-dark: inspection.get-theme-type($theme) == dark;
@@ -131,10 +131,10 @@
   $on-error: _on-color($theme, $error);
 
   .mat-mdc-unelevated-button {
-    $default-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $surface, $on-surface);
-    $primary-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $primary, $on-primary);
-    $accent-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $accent, $on-accent);
-    $warn-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $error, $on-error);
+    $default-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $surface, $on-surface);
+    $primary-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $primary, $on-primary);
+    $accent-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $accent, $on-accent);
+    $warn-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $error, $on-error);
 
     &.mat-unthemed {
       @include mdc-button-filled-theme.theme($default-color-tokens);
@@ -154,18 +154,18 @@
   }
 
   .mat-mdc-raised-button {
-    $default-color-tokens: tokens-mdc-button-protected.get-color-tokens(
+    $default-color-tokens: tokens-mdc-protected-button.get-color-tokens(
       $theme,
       $surface,
       $on-surface
     );
-    $primary-color-tokens: tokens-mdc-button-protected.get-color-tokens(
+    $primary-color-tokens: tokens-mdc-protected-button.get-color-tokens(
       $theme,
       $primary,
       $on-primary
     );
-    $accent-color-tokens: tokens-mdc-button-protected.get-color-tokens($theme, $accent, $on-accent);
-    $warn-color-tokens: tokens-mdc-button-protected.get-color-tokens($theme, $error, $on-error);
+    $accent-color-tokens: tokens-mdc-protected-button.get-color-tokens($theme, $accent, $on-accent);
+    $warn-color-tokens: tokens-mdc-protected-button.get-color-tokens($theme, $error, $on-error);
 
     &.mat-unthemed {
       @include mdc-button-protected-theme.theme($default-color-tokens);
@@ -235,13 +235,13 @@
   $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
 
   .mat-mdc-raised-button {
-    $density-tokens: tokens-mdc-button-protected.get-density-tokens($theme);
+    $density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
     @include mdc-button-protected-theme.theme($density-tokens);
     @include button-theme-private.touch-target-density($density-scale);
   }
 
   .mat-mdc-unelevated-button {
-    $density-tokens: tokens-mdc-button-filled.get-density-tokens($theme);
+    $density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
     @include mdc-button-filled-theme.theme($density-tokens);
     @include button-theme-private.touch-target-density($density-scale);
   }

src/material/button/button.scss

@@ -12,8 +12,8 @@
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/private' as style-private;
 @use '../core/focus-indicators/private' as focus-indicators-private;
-@use '../core/tokens/m2/mdc/button-filled' as tokens-mdc-button-filled;
-@use '../core/tokens/m2/mdc/button-protected' as tokens-mdc-button-protected;
+@use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
+@use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button;
 
 @include mdc-helpers.disable-mdc-fallback-declarations {
   @include mdc-button.static-styles-without-ripple($query: mdc-helpers.$mdc-base-styles-query);
@@ -46,25 +46,25 @@
   // Note that we don't include a feature query, because this mixins declare
   // all the "slots" for CSS variables that will be defined in the theme.
   .mat-mdc-unelevated-button {
-    $mdc-button-filled-slots: tokens-mdc-button-filled.get-token-slots();
+    $mdc-filled-button-slots: tokens-mdc-filled-button.get-token-slots();
 
     // Add the slots for MDC text button.
-    @include mdc-button-filled-theme.theme-styles($mdc-button-filled-slots);
+    @include mdc-button-filled-theme.theme-styles($mdc-filled-button-slots);
 
     // Add default values for MDC text button tokens that aren't outputted by the theming API.
-    @include mdc-button-filled-theme.theme(tokens-mdc-button-filled.get-unthemable-tokens());
+    @include mdc-button-filled-theme.theme(tokens-mdc-filled-button.get-unthemable-tokens());
   }
 
   // Note that we don't include a feature query, because this mixins declare
   // all the "slots" for CSS variables that will be defined in the theme.
   .mat-mdc-raised-button {
-    $mdc-button-protected-slots: tokens-mdc-button-protected.get-token-slots();
+    $mdc-button-protected-slots: tokens-mdc-protected-button.get-token-slots();
 
     // Add the slots for MDC text button.
     @include mdc-button-protected-theme.theme-styles($mdc-button-protected-slots);
 
     // Add default values for MDC text button tokens that aren't outputted by the theming API.
-    @include mdc-button-protected-theme.theme(tokens-mdc-button-protected.get-unthemable-tokens());
+    @include mdc-button-protected-theme.theme(tokens-mdc-protected-button.get-unthemable-tokens());
   }
 }
 

src/material/core/tokens/m2/mdc/_button-filled.scss renamed to src/material/core/tokens/m2/mdc/_filled-button.scss

@@ -6,7 +6,7 @@
 @use '../../../theming/theming';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, button-filled);
+$prefix: (mdc, filled-button);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.

src/material/core/tokens/m2/mdc/_button-protected.scss renamed to src/material/core/tokens/m2/mdc/_protected-button.scss

@@ -6,7 +6,7 @@
 @use '../../../theming/theming';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, button-protected);
+$prefix: (mdc, protected-button);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.

src/material/core/tokens/tests/test-validate-tokens.scss

@@ -25,8 +25,8 @@
 @use '@material/textfield/outlined-text-field-theme' as mdc-outlined-text-field-theme;
 @use '@material/theme/validate' as mdc-validate;
 
-@use '../m2/mdc/button-protected' as tokens-mdc-button-protected;
-@use '../m2/mdc/button-filled' as tokens-mdc-button-filled;
+@use '../m2/mdc/protected-button' as tokens-mdc-protected-button;
+@use '../m2/mdc/filled-button' as tokens-mdc-filled-button;
 @use '../m2/mdc/circular-progress' as tokens-mdc-circular-progress;
 @use '../m2/mdc/linear-progress' as tokens-mdc-linear-progress;
 @use '../m2/mdc/elevated-card' as tokens-mdc-elevated-card;
@@ -161,12 +161,12 @@
   $reference: mdc-outlined-text-field-theme.$light-theme
 );
 @include validate-slots(
-  $component: 'm2.mdc.button-filled',
-  $slots: tokens-mdc-button-filled.get-token-slots(),
+  $component: 'm2.mdc.filled-button',
+  $slots: tokens-mdc-filled-button.get-token-slots(),
   $reference: mdc-button-filled-theme.$light-theme
 );
 @include validate-slots(
-  $component: 'm2.mdc.button-protected',
-  $slots: tokens-mdc-button-protected.get-token-slots(),
+  $component: 'm2.mdc.protected-button',
+  $slots: tokens-mdc-protected-button.get-token-slots(),
   $reference: mdc-button-protected-theme.$light-theme
 );