fix(multiple): rename hardcoded tokens that were renamed (#30807)

* fix(multiple): rename hardcoded tokens that were renamed

* fix(multiple): fix density prefixes

* fix(multiple): fix density prefixes

---------

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

Author: andrewseguin

src/material/button-toggle/button-toggle.scss

@@ -58,7 +58,7 @@ $_standard-tokens: (
     border: solid 1px token-utils.slot(divider-color);
 
     .mat-pseudo-checkbox {
-      --mat-minimal-pseudo-checkbox-selected-checkmark-color: #{
+      --mat-pseudo-checkbox-minimal-selected-checkmark-color: #{
           token-utils.slot(selected-state-text-color)};
     }
   }
@@ -94,7 +94,7 @@ $_standard-tokens: (
     font-weight: token-utils.slot(label-text-weight);
     letter-spacing: token-utils.slot(label-text-tracking);
 
-    --mat-minimal-pseudo-checkbox-selected-checkmark-color: #{
+    --mat-pseudo-checkbox-minimal-selected-checkmark-color: #{
         token-utils.slot(selected-state-text-color)};
 
     &.cdk-keyboard-focused .mat-button-toggle-focus-overlay {
@@ -167,7 +167,7 @@ $_standard-tokens: (
   @include token-utils.use-tokens($_legacy-tokens...) {
     color: token-utils.slot(disabled-state-text-color);
     background-color: token-utils.slot(disabled-state-background-color);
-    --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #{
+    --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: #{
         token-utils.slot(disabled-state-text-color)};
 
     &.mat-button-toggle-checked {
@@ -216,7 +216,7 @@ $_standard-tokens: (
       background-color: token-utils.slot(disabled-state-background-color);
 
       .mat-pseudo-checkbox {
-        --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #{
+        --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: #{
             token-utils.slot(disabled-selected-state-text-color)};
       }
 

src/material/core/option/option.scss

@@ -52,7 +52,7 @@ $_side-padding: 16px;
     }
 
     .mat-pseudo-checkbox {
-      --mat-minimal-pseudo-checkbox-selected-checkmark-color: #{
+      --mat-pseudo-checkbox-minimal-selected-checkmark-color: #{
           token-utils.slot(selected-state-label-text-color)};
     }
   }

src/material/core/tokens/_density.scss

@@ -26,41 +26,41 @@ $_density-tokens: (
     (mat, chip): (
       container-height: (32px, 28px, 24px),
     ),
-    (mat, circular-progress): (),
+    (mat, progress-spinner): (),
     (mat, datepicker): (),
     (mat, dialog): (),
     (mat, divider): (),
-    (mat, elevated-card): (),
+    (mat, card-elevated): (),
     (mat, expansion): (
       header-collapsed-state-height: (48px, 44px, 40px, 36px),
       header-expanded-state-height: (64px, 60px, 56px, 48px),
     ),
-    (mat, extended-fab): (),
+    (mat, fab-extended): (),
     (mat, fab): (
       touch-target-display: (block, block, none, none),
     ),
     (mat, fab-small): (),
-    (mat, filled-button): (
+    (mat, button-filled): (
       touch-target-display: (block, block, none, none),
       container-height: (40px, 36px, 32px, 28px),
     ),
-    (mat, filled-text-field): (),
+    (mat, form-field-filled): (),
     (mat, form-field): (
       container-height: (56px, 52px, 48px, 44px, 40px, 36px),
       filled-label-display: (block, block, none, none, none, none),
       container-vertical-padding: (16px, 14px, 12px, 10px, 8px, 6px),
       filled-with-label-container-padding-top: (24px, 22px, 12px, 10px, 8px, 6px),
       filled-with-label-container-padding-bottom: (8px, 6px, 12px, 10px, 8px, 6px),
     ),
-    (mat, full-pseudo-checkbox): (),
+    (mat, pseudo-checkbox-full): (),
     (mat, grid-list): (),
     (mat, icon): (),
     (mat, icon-button): (
       touch-target-display: (block, block, none, none),
       // The size caps out at 24px, because anything lower will be smaller than the icon.
       state-layer-size: (40px, 36px, 32px, 28px, 24px, 24px),
     ),
-    (mat, linear-progress): (),
+    (mat, progress-bar): (),
     (mat, list): (
       list-item-leading-icon-start-space: (16px, 12px, 8px, 4px),
       list-item-leading-icon-end-space: (16px, 12px, 8px, 4px),
@@ -69,23 +69,23 @@ $_density-tokens: (
       list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
     ),
     (mat, menu): (),
-    (mat, minimal-pseudo-checkbox): (),
+    (mat, pseudo-checkbox-minimal): (),
     (mat, optgroup): (),
     (mat, option): (),
-    (mat, outlined-button): (
+    (mat, button-outlined): (
       container-height: (40px, 36px, 32px, 28px),
       touch-target-display: (block, block, none, none),
     ),
-    (mat, outlined-card): (),
-    (mat, outlined-text-field): (),
+    (mat, card-outlined): (),
+    (mat, form-field-outlined): (),
     (mat, paginator): (
       container-size: (56px, 52px, 48px, 40px),
       form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
       form-field-container-vertical-padding: (8px, 8px, 8px, 8px, 8px, 6px),
       touch-target-display: (block, block, none, none),
     ),
-    (mat, plain-tooltip): (),
-    (mat, protected-button): (
+    (mat, tooltip): (),
+    (mat, button-protected): (
       touch-target-display: (block, block, none, none),
       container-height: (40px, 36px, 32px, 28px),
     ),
@@ -94,37 +94,34 @@ $_density-tokens: (
       state-layer-size: (40px, 36px, 32px, 28px),
     ),
     (mat, ripple): (),
-    (mat, secondary-navigation-tab): (
+    (mat, tab): (
       container-height: (48px, 44px, 40px, 36px, 32px),
     ),
     (mat, select): (
       arrow-transform: (translateY(-8px), translateY(-8px), none),
     ),
     (mat, sidenav): (),
-    (mat, slide-toggle): (),
     (mat, slider): (),
     (mat, snack-bar): (),
     (mat, sort): (),
-    (mat, standard-button-toggle): (
+    (mat, button-toggle): (
       height: (40px, 40px, 40px, 36px, 24px),
     ),
     (mat, stepper): (
       header-height: (72px, 68px, 64px, 60px, 42px),
     ),
-    (mat, switch): (),
-    (mat, tab-header): (),
-    (mat, tab-indicator): (),
+    (mat, slide-toggle): (),
     (mat, table): (
       header-container-height: (56px, 52px, 48px, 44px, 40px),
       footer-container-height: (52px, 48px, 44px, 40px, 36px),
       row-item-container-height: (52px, 48px, 44px, 40px, 36px),
     ),
-    (mat, text-button): (
+    (mat, button-text): (
       touch-target-display: (block, block, none, none),
       container-height: (40px, 36px, 32px, 28px),
     ),
     (mat, timepicker): (),
-    (mat, tonal-button): (
+    (mat, button-tonal): (
       container-height: (40px, 36px, 32px, 28px),
       touch-target-display: (block, block, none, none),
     ),

src/material/datepicker/calendar.scss

@@ -56,7 +56,7 @@ $token-slots: m2-datepicker.get-token-slots();
   @include token-utils.use-tokens($token-prefix, $token-slots) {
     font-size: token-utils.slot(calendar-period-button-text-size);
     font-weight: token-utils.slot(calendar-period-button-text-weight);
-    --mat-text-button-label-text-color: #{token-utils.slot(calendar-period-button-text-color)};
+    --mat-button-text-label-text-color: #{token-utils.slot(calendar-period-button-text-color)};
   }
 }
 

src/material/progress-spinner/progress-spinner.ts

@@ -84,8 +84,8 @@ const BASE_STROKE_WIDTH = 10;
     '[class.mdc-circular-progress--indeterminate]': 'mode === "indeterminate"',
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',
-    '[style.--mat-circular-progress-size]': 'diameter + "px"',
-    '[style.--mat-circular-progress-active-indicator-width]': 'diameter + "px"',
+    '[style.--mat-progress-spinner-size]': 'diameter + "px"',
+    '[style.--mat-progress-spinner-active-indicator-width]': 'diameter + "px"',
     '[attr.aria-valuemin]': '0',
     '[attr.aria-valuemax]': '100',
     '[attr.aria-valuenow]': 'mode === "determinate" ? value : null',

src/material/slide-toggle/_slide-toggle-theme.scss

@@ -52,13 +52,13 @@
       & {
         // TODO(andrewjs): Remove this once all tokens are migrated to
         // mat internally.
-        --mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
+        --mdc-slide-toggle-disabled-label-text-color: #{inspection.get-theme-color(
             $theme,
             foreground,
             disabled-text
           )};
         // TODO(wagnermaciel): Use our token system to define this css variable.
-        --mat-switch-disabled-label-text-color: #{inspection.get-theme-color(
+        --mat-slide-toggle-disabled-label-text-color: #{inspection.get-theme-color(
             $theme,
             foreground,
             disabled-text
@@ -67,7 +67,7 @@
 
       .mat-mdc-slide-toggle {
         // TODO(wagnermaciel): Use our token system to define this css variable.
-        --mat-switch-label-text-color: #{inspection.get-theme-color(
+        --mat-slide-toggle-label-text-color: #{inspection.get-theme-color(
           $theme,
           foreground,
           text

src/material/slide-toggle/slide-toggle.scss

@@ -578,6 +578,6 @@ $token-slots: m2-slide-toggle.get-token-slots();
 
   // TODO(wagnermaciel): Use our custom token system to emit this css rule.
   .mdc-switch--disabled + label {
-    color: var(--mat-switch-disabled-label-text-color);
+    color: var(--mat-slide-toggle-disabled-label-text-color);
   }
 }