From aeef79bac5d24df2192cbe51464430f11071e24b Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Thu, 20 Mar 2025 16:43:27 -0600
Subject: [PATCH 1/3] refactor: rename mdc- prefixed tokens to mat-
---
.../app/scenes/snack-bar/snack-bar-scene.scss | 2 +-
src/material/button/_icon-button-theme.scss | 10 +-
src/material/chips/chip.scss | 2 +-
src/material/core/theming/_definition.scss | 4 +-
src/material/core/theming/_inspection.scss | 4 +-
.../core/theming/tests/m3-theme.spec.ts | 10 +-
.../tests/theming-definition-api.spec.ts | 18 +-
src/material/core/tokens/_density.scss | 270 ++++++++----------
src/material/core/tokens/_m3-system.scss | 2 +-
src/material/core/tokens/_m3-tokens.scss | 4 +-
.../core/tokens/_token-definition.scss | 1 +
.../core/tokens/m2/mdc/_checkbox.scss | 2 +-
src/material/core/tokens/m2/mdc/_chip.scss | 2 +-
.../tokens/m2/mdc/_circular-progress.scss | 2 +-
src/material/core/tokens/m2/mdc/_dialog.scss | 2 +-
.../core/tokens/m2/mdc/_elevated-card.scss | 2 +-
.../core/tokens/m2/mdc/_extended-fab.scss | 2 +-
.../core/tokens/m2/mdc/_fab-small.scss | 5 +-
src/material/core/tokens/m2/mdc/_fab.scss | 5 +-
.../core/tokens/m2/mdc/_filled-button.scss | 8 +-
.../tokens/m2/mdc/_filled-text-field.scss | 2 +-
.../core/tokens/m2/mdc/_icon-button.scss | 5 +-
.../core/tokens/m2/mdc/_linear-progress.scss | 2 +-
src/material/core/tokens/m2/mdc/_list.scss | 2 +-
.../core/tokens/m2/mdc/_outlined-button.scss | 6 +-
.../core/tokens/m2/mdc/_outlined-card.scss | 2 +-
.../tokens/m2/mdc/_outlined-text-field.scss | 2 +-
.../core/tokens/m2/mdc/_plain-tooltip.scss | 2 +-
.../core/tokens/m2/mdc/_protected-button.scss | 5 +-
src/material/core/tokens/m2/mdc/_radio.scss | 2 +-
.../m2/mdc/_secondary-navigation-tab.scss | 2 +-
src/material/core/tokens/m2/mdc/_slider.scss | 2 +-
.../core/tokens/m2/mdc/_snack-bar.scss | 2 +-
src/material/core/tokens/m2/mdc/_switch.scss | 4 +-
.../core/tokens/m2/mdc/_tab-indicator.scss | 2 +-
.../core/tokens/m2/mdc/_text-button.scss | 5 +-
src/material/core/tokens/m3/_index.scss | 2 +-
.../core/tokens/m3/mdc/_checkbox.scss | 2 +-
src/material/core/tokens/m3/mdc/_chip.scss | 2 +-
.../tokens/m3/mdc/_circular-progress.scss | 2 +-
src/material/core/tokens/m3/mdc/_dialog.scss | 2 +-
.../core/tokens/m3/mdc/_elevated-card.scss | 2 +-
.../core/tokens/m3/mdc/_extended-fab.scss | 2 +-
.../core/tokens/m3/mdc/_fab-small.scss | 2 +-
src/material/core/tokens/m3/mdc/_fab.scss | 2 +-
.../core/tokens/m3/mdc/_filled-button.scss | 2 +-
.../tokens/m3/mdc/_filled-text-field.scss | 2 +-
.../core/tokens/m3/mdc/_icon-button.scss | 2 +-
.../core/tokens/m3/mdc/_linear-progress.scss | 2 +-
src/material/core/tokens/m3/mdc/_list.scss | 2 +-
.../core/tokens/m3/mdc/_outlined-button.scss | 2 +-
.../core/tokens/m3/mdc/_outlined-card.scss | 2 +-
.../tokens/m3/mdc/_outlined-text-field.scss | 2 +-
.../core/tokens/m3/mdc/_plain-tooltip.scss | 2 +-
.../core/tokens/m3/mdc/_protected-button.scss | 2 +-
src/material/core/tokens/m3/mdc/_radio.scss | 2 +-
.../m3/mdc/_secondary-navigation-tab.scss | 2 +-
src/material/core/tokens/m3/mdc/_slider.scss | 2 +-
.../core/tokens/m3/mdc/_snack-bar.scss | 2 +-
src/material/core/tokens/m3/mdc/_switch.scss | 2 +-
.../core/tokens/m3/mdc/_tab-indicator.scss | 2 +-
.../core/tokens/m3/mdc/_text-button.scss | 2 +-
src/material/datepicker/calendar.scss | 2 +-
.../progress-spinner/progress-spinner.ts | 4 +-
src/material/select/select.scss | 2 +-
.../slide-toggle/_slide-toggle-theme.scss | 2 +-
src/material/slide-toggle/slide-toggle.scss | 2 +-
67 files changed, 209 insertions(+), 259 deletions(-)
diff --git a/material.angular.io/scenes/src/app/scenes/snack-bar/snack-bar-scene.scss b/material.angular.io/scenes/src/app/scenes/snack-bar/snack-bar-scene.scss
index be8cf2218ddc..f8d4e3a3b4e6 100644
--- a/material.angular.io/scenes/src/app/scenes/snack-bar/snack-bar-scene.scss
+++ b/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 {
diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss
index 8e2bae6f9375..030587b538bb 100644
--- a/src/material/button/_icon-button-theme.scss
+++ b/src/material/button/_icon-button-theme.scss
@@ -107,15 +107,15 @@
.mat-mdc-icon-button.mat-mdc-button-base {
// 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);
}
}
diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
index ffbd69cda821..da5b851c1380 100644
--- a/src/material/chips/chip.scss
+++ b/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.
diff --git a/src/material/core/theming/_definition.scss b/src/material/core/theming/_definition.scss
index 701bc4b8de12..511786869338 100644
--- a/src/material/core/theming/_definition.scss
+++ b/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;
diff --git a/src/material/core/theming/_inspection.scss b/src/material/core/theming/_inspection.scss
index 0f0e11fcb4b4..e0d5f57639e5 100644
--- a/src/material/core/theming/_inspection.scss
+++ b/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;
diff --git a/src/material/core/theming/tests/m3-theme.spec.ts b/src/material/core/theming/tests/m3-theme.spec.ts
index 9729ac11daab..d791ddcbfd06 100644
--- a/src/material/core/theming/tests/m3-theme.spec.ts
+++ b/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/,
);
diff --git a/src/material/core/theming/tests/theming-definition-api.spec.ts b/src/material/core/theming/tests/theming-definition-api.spec.ts
index 29c3a71b197b..12d95f842ddd 100644
--- a/src/material/core/theming/tests/theming-definition-api.spec.ts
+++ b/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);
diff --git a/src/material/core/tokens/_density.scss b/src/material/core/tokens/_density.scss
index c7c998664328..2506b4e5c1f5 100644
--- a/src/material/core/tokens/_density.scss
+++ b/src/material/core/tokens/_density.scss
@@ -7,7 +7,7 @@
/// systemized density.
/// Format:
/// (
-/// (mdc, comp): (
+/// (mat, comp): (
/// token: (<scale 0 value>, <scale -1 value>, <scale -2 value>, ...),
/// ...
/// ),
@@ -15,153 +15,127 @@
/// )
// TODO(mmalerba): Add density tokens for remaining components.
$_density-tokens: (
- // MDC tokens
- (mdc, checkbox): (
- state-layer-size: (40px, 36px, 32px, 28px),
- ),
- (mdc, chip): (
- container-height: (32px, 28px, 24px),
- ),
- (mdc, circular-progress): (),
- (mdc, dialog): (),
- (mdc, elevated-card): (),
- (mdc, extended-fab): (),
- (mdc, fab): (),
- (mdc, fab-small): (),
- (mdc, filled-text-field): (),
- (mdc, text-button): (
- container-height: (40px, 36px, 32px, 28px),
- ),
- (mdc, protected-button): (
- container-height: (40px, 36px, 32px, 28px),
- ),
- (mdc, filled-button): (
- container-height: (40px, 36px, 32px, 28px),
- ),
- (mat, tonal-button): (
- container-height: (40px, 36px, 32px, 28px),
- touch-target-display: (block, block, none, none),
- ),
- (mdc, outlined-button): (
- container-height: (40px, 36px, 32px, 28px),
- ),
- (mdc, icon-button): (
- // The size caps out at 24px, because anything lower will be smaller than the icon.
- state-layer-size: (40px, 36px, 32px, 28px, 24px, 24px),
- ),
- (mdc, linear-progress): (),
- (mdc, list): (
- list-item-one-line-container-height: (48px, 44px, 40px, 36px, 32px, 24px),
- list-item-two-line-container-height: (64px, 60px, 56px, 52px, 48px, 48px),
- list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
- ),
- (mdc, outlined-card): (),
- (mdc, outlined-text-field): (),
- (mdc, plain-tooltip): (),
- (mdc, radio): (
- state-layer-size: (40px, 36px, 32px, 28px),
- ),
- (mdc, slider): (),
- (mdc, snackbar): (),
- (mdc, switch): (),
- (mdc, secondary-navigation-tab): (
- container-height: (48px, 44px, 40px, 36px, 32px)
- ),
- (mdc, tab-indicator): (),
-
- // Custom Angular Material tokens
- (mat, autocomplete): (),
- (mat, badge): (),
- (mat, bottom-sheet): (),
- (mat, card): (),
- (mat, checkbox): (
- touch-target-display: (block, block, none, none),
- ),
- (mat, dialog): (),
- (mat, datepicker): (),
- (mat, divider): (),
- (mat, expansion): (
- header-collapsed-state-height: (48px, 44px, 40px, 36px),
- header-expanded-state-height: (64px, 60px, 56px, 48px),
- ),
- (mat, fab): (
- touch-target-display: (block, block, none, none),
- ),
- (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, grid-list): (),
- (mat, icon): (),
- (mat, icon-button): (
- touch-target-display: (block, block, none, none),
- ),
- (mat, list): (
- list-item-leading-icon-start-space: (16px, 12px, 8px, 4px),
- list-item-leading-icon-end-space: (16px, 12px, 8px, 4px),
- ),
- (mat, text-button): (
- touch-target-display: (block, block, none, none),
- ),
- (mat, protected-button): (
- touch-target-display: (block, block, none, none),
- ),
- (mat, filled-button): (
- touch-target-display: (block, block, none, none),
- ),
- (mat, outlined-button): (
- touch-target-display: (block, block, none, none),
- ),
- (mat, menu): (),
- (mat, optgroup): (),
- (mat, option): (),
- (mat, full-pseudo-checkbox): (),
- (mat, minimal-pseudo-checkbox): (),
- (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, radio): (
- touch-target-display: (block, block, none, none),
- ),
- (mat, ripple): (),
- (mat, select): (
- arrow-transform: (
- translateY(-8px),
- translateY(-8px),
- none,
- ),
- ),
- (mat, sidenav): (),
- (mat, slide-toggle): (),
- (mat, slider): (),
- (mat, snack-bar): (),
- (mat, sort): (),
- (mat, timepicker): (),
- (mat, standard-button-toggle): (
- height: (40px, 40px, 40px, 36px, 24px),
- ),
- (mat, stepper): (
- header-height: (72px, 68px, 64px, 60px, 42px),
- ),
- (mat, tab-header): (),
- (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, toolbar): (
- standard-height: (64px, 60px, 56px, 52px),
- mobile-height: (56px, 52px, 48px, 44px),
- ),
- (mat, tree): (
- node-min-height: (48px, 44px, 40px, 36px, 28px),
- ),
+ (mat, autocomplete): (),
+ (mat, badge): (),
+ (mat, bottom-sheet): (),
+ (mat, card): (),
+ (mat, checkbox): (
+ state-layer-size: (40px, 36px, 32px, 28px),
+ touch-target-display: (block, block, none, none),
+ ),
+ (mat, chip): (
+ container-height: (32px, 28px, 24px),
+ ),
+ (mat, circular-progress): (),
+ (mat, datepicker): (),
+ (mat, dialog): (),
+ (mat, divider): (),
+ (mat, elevated-card): (),
+ (mat, expansion): (
+ header-collapsed-state-height: (48px, 44px, 40px, 36px),
+ header-expanded-state-height: (64px, 60px, 56px, 48px),
+ ),
+ (mat, extended-fab): (),
+ (mat, fab): (
+ touch-target-display: (block, block, none, none),
+ ),
+ (mat, fab-small): (),
+ (mat, filled-button): (
+ touch-target-display: (block, block, none, none),
+ container-height: (40px, 36px, 32px, 28px),
+ ),
+ (mat, filled-text-field): (),
+ (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, 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, list): (
+ list-item-leading-icon-start-space: (16px, 12px, 8px, 4px),
+ list-item-leading-icon-end-space: (16px, 12px, 8px, 4px),
+ list-item-one-line-container-height: (48px, 44px, 40px, 36px, 32px, 24px),
+ list-item-two-line-container-height: (64px, 60px, 56px, 52px, 48px, 48px),
+ list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
+ ),
+ (mat, menu): (),
+ (mat, minimal-pseudo-checkbox): (),
+ (mat, optgroup): (),
+ (mat, option): (),
+ (mat, outlined-button): (
+ container-height: (40px, 36px, 32px, 28px),
+ touch-target-display: (block, block, none, none),
+ ),
+ (mat, outlined-card): (),
+ (mat, outlined-text-field): (),
+ (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): (
+ touch-target-display: (block, block, none, none),
+ container-height: (40px, 36px, 32px, 28px),
+ ),
+ (mat, radio): (
+ touch-target-display: (block, block, none, none),
+ state-layer-size: (40px, 36px, 32px, 28px),
+ ),
+ (mat, ripple): (),
+ (mat, secondary-navigation-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, snackbar): (),
+ (mat, sort): (),
+ (mat, standard-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, 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): (
+ touch-target-display: (block, block, none, none),
+ container-height: (40px, 36px, 32px, 28px),
+ ),
+ (mat, timepicker): (),
+ (mat, tonal-button): (
+ container-height: (40px, 36px, 32px, 28px),
+ touch-target-display: (block, block, none, none),
+ ),
+ (mat, toolbar): (
+ standard-height: (64px, 60px, 56px, 52px),
+ mobile-height: (56px, 52px, 48px, 44px),
+ ),
+ (mat, tree): (
+ node-min-height: (48px, 44px, 40px, 36px, 28px),
+ ),
);
/// Gets the value for the given density scale from the given set of density values.
diff --git a/src/material/core/tokens/_m3-system.scss b/src/material/core/tokens/_m3-system.scss
index 2a836cf8e531..606bb5d70fbf 100644
--- a/src/material/core/tokens/_m3-system.scss
+++ b/src/material/core/tokens/_m3-system.scss
@@ -193,7 +193,7 @@
@mixin system-level-elevation($theme, $overrides: (), $prefix: definition.$system-level-prefix) {
$shadow-color: map.get(
- $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
+ $theme, _mat-theming-internals-do-not-access, color-tokens, (mat, theme), shadow);
@each $name, $value in definitions.md-sys-elevation-values() {
$level: map.get($overrides, $name) or $value;
diff --git a/src/material/core/tokens/_m3-tokens.scss b/src/material/core/tokens/_m3-tokens.scss
index 0cde0b8f5763..7dcae56356fb 100644
--- a/src/material/core/tokens/_m3-tokens.scss
+++ b/src/material/core/tokens/_m3-tokens.scss
@@ -108,8 +108,8 @@ $_cached-token-slots: null;
$result: sass-utils.deep-merge-all(
// Add the system color & typography tokens (so we can give users access via an API).
(
- (mdc, theme): map.get($systems, md-sys-color),
- (mdc, typography): map.get($systems, md-sys-typescale),
+ (mat, theme): map.get($systems, md-sys-color),
+ (mat, typography): map.get($systems, md-sys-typescale),
),
m3.get-m3-tokens($systems, $exclude-hardcoded, $token-slots),
);
diff --git a/src/material/core/tokens/_token-definition.scss b/src/material/core/tokens/_token-definition.scss
index 102d7aba5684..5e4d4e66335a 100644
--- a/src/material/core/tokens/_token-definition.scss
+++ b/src/material/core/tokens/_token-definition.scss
@@ -92,6 +92,7 @@ $_system-fallbacks: null;
$variants: list.nth($values, 2);
$values: list.nth($values, 1);
@each $variant, $overrides in $variants {
+
$result: map.merge($result, namespace-tokens($prefix, $overrides, $slots, $variant));
}
}
diff --git a/src/material/core/tokens/m2/mdc/_checkbox.scss b/src/material/core/tokens/m2/mdc/_checkbox.scss
index 96e6a83b9a49..44a3a7f65348 100644
--- a/src/material/core/tokens/m2/mdc/_checkbox.scss
+++ b/src/material/core/tokens/m2/mdc/_checkbox.scss
@@ -7,7 +7,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, checkbox);
+$prefix: (mat, checkbox);
// 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/tokens/m2/mdc/_chip.scss b/src/material/core/tokens/m2/mdc/_chip.scss
index 104350200b8d..3a40bab82eff 100644
--- a/src/material/core/tokens/m2/mdc/_chip.scss
+++ b/src/material/core/tokens/m2/mdc/_chip.scss
@@ -8,7 +8,7 @@
@use '../../../m2/palette' as m2-palette;
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, chip);
+$prefix: (mat, chip);
// 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/tokens/m2/mdc/_circular-progress.scss b/src/material/core/tokens/m2/mdc/_circular-progress.scss
index 0201a8f41f3c..52308865d651 100644
--- a/src/material/core/tokens/m2/mdc/_circular-progress.scss
+++ b/src/material/core/tokens/m2/mdc/_circular-progress.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, circular-progress);
+$prefix: (mat, circular-progress);
// 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/tokens/m2/mdc/_dialog.scss b/src/material/core/tokens/m2/mdc/_dialog.scss
index 087327384f72..ba24ed8d343c 100644
--- a/src/material/core/tokens/m2/mdc/_dialog.scss
+++ b/src/material/core/tokens/m2/mdc/_dialog.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, dialog);
+$prefix: (mat, dialog);
// 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/tokens/m2/mdc/_elevated-card.scss b/src/material/core/tokens/m2/mdc/_elevated-card.scss
index 1147bf8d9e3d..b0e56a52ac5c 100644
--- a/src/material/core/tokens/m2/mdc/_elevated-card.scss
+++ b/src/material/core/tokens/m2/mdc/_elevated-card.scss
@@ -4,7 +4,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, elevated-card);
+$prefix: (mat, elevated-card);
// 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/tokens/m2/mdc/_extended-fab.scss b/src/material/core/tokens/m2/mdc/_extended-fab.scss
index 7fc8bda07248..a7ca09d758df 100644
--- a/src/material/core/tokens/m2/mdc/_extended-fab.scss
+++ b/src/material/core/tokens/m2/mdc/_extended-fab.scss
@@ -4,7 +4,7 @@
@use '../../../theming/inspection';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, extended-fab);
+$prefix: (mat, extended-fab);
@function get-unthemable-tokens() {
@return (
diff --git a/src/material/core/tokens/m2/mdc/_fab-small.scss b/src/material/core/tokens/m2/mdc/_fab-small.scss
index 74c79640d827..8e97e7c7b8c4 100644
--- a/src/material/core/tokens/m2/mdc/_fab-small.scss
+++ b/src/material/core/tokens/m2/mdc/_fab-small.scss
@@ -4,7 +4,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, fab-small);
+$prefix: (mat, fab-small);
@function get-unthemable-tokens() {
@return (
@@ -26,11 +26,9 @@ $prefix: (mdc, fab-small);
focus-outline-color: null,
focus-outline-width: null,
focus-state-layer-color: null,
- focus-state-layer-opacity: null,
hover-icon-color: null,
hover-state-layer-color: null,
- hover-state-layer-opacity: null,
lowered-container-elevation: null,
lowered-focus-container-elevation: null,
@@ -41,7 +39,6 @@ $prefix: (mdc, fab-small);
pressed-ripple-color: null,
pressed-ripple-opacity: null,
pressed-state-layer-color: null,
- pressed-state-layer-opacity: null,
container-elevation: null,
focus-container-elevation: null,
diff --git a/src/material/core/tokens/m2/mdc/_fab.scss b/src/material/core/tokens/m2/mdc/_fab.scss
index c01ff7fbed50..2fd39d645f9f 100644
--- a/src/material/core/tokens/m2/mdc/_fab.scss
+++ b/src/material/core/tokens/m2/mdc/_fab.scss
@@ -4,7 +4,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, fab);
+$prefix: (mat, fab);
@function get-unthemable-tokens() {
@return (
@@ -27,11 +27,9 @@ $prefix: (mdc, fab);
focus-outline-color: null,
focus-outline-width: null,
focus-state-layer-color: null,
- focus-state-layer-opacity: null,
hover-icon-color: null,
hover-state-layer-color: null,
- hover-state-layer-opacity: null,
lowered-container-elevation: null,
lowered-focus-container-elevation: null,
@@ -42,7 +40,6 @@ $prefix: (mdc, fab);
pressed-ripple-color: null,
pressed-ripple-opacity: null,
pressed-state-layer-color: null,
- pressed-state-layer-opacity: null,
container-elevation: null,
focus-container-elevation: null,
diff --git a/src/material/core/tokens/m2/mdc/_filled-button.scss b/src/material/core/tokens/m2/mdc/_filled-button.scss
index 561bcd5ce9a9..715efbc8eaf6 100644
--- a/src/material/core/tokens/m2/mdc/_filled-button.scss
+++ b/src/material/core/tokens/m2/mdc/_filled-button.scss
@@ -5,7 +5,7 @@
@use '../../../theming/theming';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, filled-button);
+$prefix: (mat, 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.
@@ -22,9 +22,6 @@ $prefix: (mdc, filled-button);
// =============================================================================================
focus-ring-color: null,
focus-ring-offset: null,
- focus-state-layer-opacity: null,
- hover-state-layer-opacity: null,
- pressed-state-layer-opacity: null,
container-shadow-color: null,
container-elevation: null,
disabled-container-elevation: null,
@@ -41,9 +38,6 @@ $prefix: (mdc, filled-button);
with-icon-icon-color: null,
with-icon-icon-size: null,
with-icon-pressed-icon-color: null,
- focus-state-layer-color: null,
- hover-state-layer-color: null,
- pressed-state-layer-color: null,
);
}
diff --git a/src/material/core/tokens/m2/mdc/_filled-text-field.scss b/src/material/core/tokens/m2/mdc/_filled-text-field.scss
index b79701a67d05..5b2f28534bce 100644
--- a/src/material/core/tokens/m2/mdc/_filled-text-field.scss
+++ b/src/material/core/tokens/m2/mdc/_filled-text-field.scss
@@ -6,7 +6,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, filled-text-field);
+$prefix: (mat, filled-text-field);
// 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/tokens/m2/mdc/_icon-button.scss b/src/material/core/tokens/m2/mdc/_icon-button.scss
index 4c26783ed04c..a334ba0a61ed 100644
--- a/src/material/core/tokens/m2/mdc/_icon-button.scss
+++ b/src/material/core/tokens/m2/mdc/_icon-button.scss
@@ -5,7 +5,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, icon-button);
+$prefix: (mat, icon-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.
@@ -24,13 +24,10 @@ $prefix: (mdc, icon-button);
// State layer is unused
focus-icon-color: null,
focus-state-layer-color: null,
- focus-state-layer-opacity: null,
hover-icon-color: null,
hover-state-layer-color: null,
- hover-state-layer-opacity: null,
pressed-icon-color: null,
pressed-state-layer-color: null,
- pressed-state-layer-opacity: null,
focus-ring-color: null,
focus-ring-offset: null,
diff --git a/src/material/core/tokens/m2/mdc/_linear-progress.scss b/src/material/core/tokens/m2/mdc/_linear-progress.scss
index 2d76ac02b5cb..8927b0f2f2d7 100644
--- a/src/material/core/tokens/m2/mdc/_linear-progress.scss
+++ b/src/material/core/tokens/m2/mdc/_linear-progress.scss
@@ -5,7 +5,7 @@
@use 'sass:meta';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, linear-progress);
+$prefix: (mat, linear-progress);
// 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/tokens/m2/mdc/_list.scss b/src/material/core/tokens/m2/mdc/_list.scss
index 1a6916ae428a..45dd61cfd7c3 100644
--- a/src/material/core/tokens/m2/mdc/_list.scss
+++ b/src/material/core/tokens/m2/mdc/_list.scss
@@ -4,7 +4,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, list);
+$prefix: (mat, list);
// 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/tokens/m2/mdc/_outlined-button.scss b/src/material/core/tokens/m2/mdc/_outlined-button.scss
index 8240384bf5a8..901303712ac9 100644
--- a/src/material/core/tokens/m2/mdc/_outlined-button.scss
+++ b/src/material/core/tokens/m2/mdc/_outlined-button.scss
@@ -5,7 +5,7 @@
@use '../../../theming/theming';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, outlined-button);
+$prefix: (mat, outlined-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.
@@ -23,10 +23,6 @@ $prefix: (mdc, outlined-button);
// =============================================================================================
// = TOKENS NOT USED IN ANGULAR MATERIAL =
// =============================================================================================
- hover-state-layer-opacity: null,
- focus-state-layer-opacity: null,
- pressed-state-layer-opacity: null,
-
focus-state-layer-color: null,
hover-state-layer-color: null,
pressed-state-layer-color: null,
diff --git a/src/material/core/tokens/m2/mdc/_outlined-card.scss b/src/material/core/tokens/m2/mdc/_outlined-card.scss
index 5e18cf543711..3caa5b5b5b32 100644
--- a/src/material/core/tokens/m2/mdc/_outlined-card.scss
+++ b/src/material/core/tokens/m2/mdc/_outlined-card.scss
@@ -4,7 +4,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, outlined-card);
+$prefix: (mat, outlined-card);
// 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/tokens/m2/mdc/_outlined-text-field.scss b/src/material/core/tokens/m2/mdc/_outlined-text-field.scss
index 1347680109c3..ae0d4f714429 100644
--- a/src/material/core/tokens/m2/mdc/_outlined-text-field.scss
+++ b/src/material/core/tokens/m2/mdc/_outlined-text-field.scss
@@ -4,7 +4,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, outlined-text-field);
+$prefix: (mat, outlined-text-field);
// 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/tokens/m2/mdc/_plain-tooltip.scss b/src/material/core/tokens/m2/mdc/_plain-tooltip.scss
index 81ef32e544d4..07666e84decf 100644
--- a/src/material/core/tokens/m2/mdc/_plain-tooltip.scss
+++ b/src/material/core/tokens/m2/mdc/_plain-tooltip.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, plain-tooltip);
+$prefix: (mat, plain-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/core/tokens/m2/mdc/_protected-button.scss b/src/material/core/tokens/m2/mdc/_protected-button.scss
index d50b6c8823de..01be282dd431 100644
--- a/src/material/core/tokens/m2/mdc/_protected-button.scss
+++ b/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, protected-button);
+$prefix: (mat, 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.
@@ -28,9 +28,6 @@ $prefix: (mdc, protected-button);
// =============================================================================================
focus-ring-color: null,
focus-ring-offset: null,
- focus-state-layer-opacity: null,
- hover-state-layer-opacity: null,
- pressed-state-layer-opacity: null,
with-icon-icon-size: null,
focus-label-text-color: null,
hover-label-text-color: null,
diff --git a/src/material/core/tokens/m2/mdc/_radio.scss b/src/material/core/tokens/m2/mdc/_radio.scss
index b6b99277605c..67e914c73742 100644
--- a/src/material/core/tokens/m2/mdc/_radio.scss
+++ b/src/material/core/tokens/m2/mdc/_radio.scss
@@ -7,7 +7,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, radio);
+$prefix: (mat, radio);
// 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/tokens/m2/mdc/_secondary-navigation-tab.scss b/src/material/core/tokens/m2/mdc/_secondary-navigation-tab.scss
index 8e6b740e8e19..bc50157572ad 100644
--- a/src/material/core/tokens/m2/mdc/_secondary-navigation-tab.scss
+++ b/src/material/core/tokens/m2/mdc/_secondary-navigation-tab.scss
@@ -5,7 +5,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, secondary-navigation-tab);
+$prefix: (mat, secondary-navigation-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/core/tokens/m2/mdc/_slider.scss b/src/material/core/tokens/m2/mdc/_slider.scss
index 4bb875b28ce7..8255733ae05f 100644
--- a/src/material/core/tokens/m2/mdc/_slider.scss
+++ b/src/material/core/tokens/m2/mdc/_slider.scss
@@ -5,7 +5,7 @@
@use '../../../style/sass-utils';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, slider);
+$prefix: (mat, slider);
// 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/tokens/m2/mdc/_snack-bar.scss b/src/material/core/tokens/m2/mdc/_snack-bar.scss
index 3577b96dde30..16ce53724bec 100644
--- a/src/material/core/tokens/m2/mdc/_snack-bar.scss
+++ b/src/material/core/tokens/m2/mdc/_snack-bar.scss
@@ -5,7 +5,7 @@
@use '../../../style/sass-utils';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, snackbar);
+$prefix: (mat, snackbar);
// 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/tokens/m2/mdc/_switch.scss b/src/material/core/tokens/m2/mdc/_switch.scss
index eb14b769c08a..c60d4c722ede 100644
--- a/src/material/core/tokens/m2/mdc/_switch.scss
+++ b/src/material/core/tokens/m2/mdc/_switch.scss
@@ -6,7 +6,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, switch);
+$prefix: (mat, switch);
// Tokens that can't be configured through Angular Material's current theming API,
// but may be in a future version of the theming API.
@@ -89,7 +89,7 @@ $prefix: (mdc, switch);
disabled-unselected-icon-color: $icon-color,
// Color of track when disabled.
disabled-unselected-track-color: $on-surface,
- // TODO(crisbeto): `handle-surface-color` was hardcoded to `var(--mdc-surface-color, #fff)`
+ // TODO(crisbeto): `handle-surface-color` was hardcoded to `var(--mat-surface-color, #fff)`
// which made it basically hardcoded to #fff. Should it be based on the theme?
// Color of slide-toggle handle's surface.
handle-surface-color: #fff,
diff --git a/src/material/core/tokens/m2/mdc/_tab-indicator.scss b/src/material/core/tokens/m2/mdc/_tab-indicator.scss
index 0cf689055285..dd01037cb09d 100644
--- a/src/material/core/tokens/m2/mdc/_tab-indicator.scss
+++ b/src/material/core/tokens/m2/mdc/_tab-indicator.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, tab-indicator);
+$prefix: (mat, tab-indicator);
// 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/tokens/m2/mdc/_text-button.scss b/src/material/core/tokens/m2/mdc/_text-button.scss
index 265ed9d246e3..10ef6438bce2 100644
--- a/src/material/core/tokens/m2/mdc/_text-button.scss
+++ b/src/material/core/tokens/m2/mdc/_text-button.scss
@@ -5,7 +5,7 @@
@use '../../../theming/theming';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, text-button);
+$prefix: (mat, text-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.
@@ -24,11 +24,8 @@ $prefix: (mdc, text-button);
focus-label-text-color: null,
pressed-label-text-color: null,
focus-state-layer-color: null,
- focus-state-layer-opacity: null,
hover-state-layer-color: null,
- hover-state-layer-opacity: null,
pressed-state-layer-color: null,
- pressed-state-layer-opacity: null,
with-icon-disabled-icon-color: null,
with-icon-focus-icon-color: null,
with-icon-hover-icon-color: null,
diff --git a/src/material/core/tokens/m3/_index.scss b/src/material/core/tokens/m3/_index.scss
index d7c8835c1586..b9a7a6f130bc 100644
--- a/src/material/core/tokens/m3/_index.scss
+++ b/src/material/core/tokens/m3/_index.scss
@@ -158,7 +158,7 @@ $_module-names: (
$name: 'get-tokens',
$module: $module-name,
);
- $tokens: map.merge($tokens, meta.call($fn, $systems, $exclude-hardcoded, $token-slots));
+ $tokens: map.deep-merge($tokens, meta.call($fn, $systems, $exclude-hardcoded, $token-slots));
}
@return $tokens;
diff --git a/src/material/core/tokens/m3/mdc/_checkbox.scss b/src/material/core/tokens/m3/mdc/_checkbox.scss
index cecb2e9ec4ed..27464d0c54e7 100644
--- a/src/material/core/tokens/m3/mdc/_checkbox.scss
+++ b/src/material/core/tokens/m3/mdc/_checkbox.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, checkbox);
+$prefix: (mat, checkbox);
/// Generates the tokens for MDC checkbox
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_chip.scss b/src/material/core/tokens/m3/mdc/_chip.scss
index 27de7dcf1090..5942a58bcbd0 100644
--- a/src/material/core/tokens/m3/mdc/_chip.scss
+++ b/src/material/core/tokens/m3/mdc/_chip.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, chip);
+$prefix: (mat, chip);
/// Generates the tokens for MDC chip
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_circular-progress.scss b/src/material/core/tokens/m3/mdc/_circular-progress.scss
index d9e19fb9c185..f994bfabda7a 100644
--- a/src/material/core/tokens/m3/mdc/_circular-progress.scss
+++ b/src/material/core/tokens/m3/mdc/_circular-progress.scss
@@ -2,7 +2,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, circular-progress);
+$prefix: (mat, circular-progress);
/// Generates the tokens for MDC circular-progress
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_dialog.scss b/src/material/core/tokens/m3/mdc/_dialog.scss
index 5f2356026964..fbe123d66b04 100644
--- a/src/material/core/tokens/m3/mdc/_dialog.scss
+++ b/src/material/core/tokens/m3/mdc/_dialog.scss
@@ -1,7 +1,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, dialog);
+$prefix: (mat, dialog);
/// Generates the tokens for MDC dialog
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_elevated-card.scss b/src/material/core/tokens/m3/mdc/_elevated-card.scss
index 703509c3376f..c0e8607ed9d9 100644
--- a/src/material/core/tokens/m3/mdc/_elevated-card.scss
+++ b/src/material/core/tokens/m3/mdc/_elevated-card.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, elevated-card);
+$prefix: (mat, elevated-card);
/// Generates the tokens for MDC elevated-card
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_extended-fab.scss b/src/material/core/tokens/m3/mdc/_extended-fab.scss
index f4469a2776b5..3c667b6f982c 100644
--- a/src/material/core/tokens/m3/mdc/_extended-fab.scss
+++ b/src/material/core/tokens/m3/mdc/_extended-fab.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, extended-fab);
+$prefix: (mat, extended-fab);
/// Generates the tokens for MDC extended-fab
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_fab-small.scss b/src/material/core/tokens/m3/mdc/_fab-small.scss
index 6ac3bef75a4f..865b5e89adda 100644
--- a/src/material/core/tokens/m3/mdc/_fab-small.scss
+++ b/src/material/core/tokens/m3/mdc/_fab-small.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, fab-small);
+$prefix: (mat, fab-small);
/// Generates the tokens for MDC fab-small
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_fab.scss b/src/material/core/tokens/m3/mdc/_fab.scss
index 835e7196a5bc..f686b7c66e47 100644
--- a/src/material/core/tokens/m3/mdc/_fab.scss
+++ b/src/material/core/tokens/m3/mdc/_fab.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, fab);
+$prefix: (mat, fab);
/// Generates the tokens for MDC fab
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_filled-button.scss b/src/material/core/tokens/m3/mdc/_filled-button.scss
index 4d267db82ed1..368d80dd0e97 100644
--- a/src/material/core/tokens/m3/mdc/_filled-button.scss
+++ b/src/material/core/tokens/m3/mdc/_filled-button.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, filled-button);
+$prefix: (mat, filled-button);
/// Generates the tokens for MDC filled-button
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_filled-text-field.scss b/src/material/core/tokens/m3/mdc/_filled-text-field.scss
index 7311e947fddc..fbc7e5a6ea20 100644
--- a/src/material/core/tokens/m3/mdc/_filled-text-field.scss
+++ b/src/material/core/tokens/m3/mdc/_filled-text-field.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, filled-text-field);
+$prefix: (mat, filled-text-field);
/// Generates the tokens for MDC filled-text-field
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_icon-button.scss b/src/material/core/tokens/m3/mdc/_icon-button.scss
index 55279ff6915f..f73f22bb02ce 100644
--- a/src/material/core/tokens/m3/mdc/_icon-button.scss
+++ b/src/material/core/tokens/m3/mdc/_icon-button.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, icon-button);
+$prefix: (mat, icon-button);
/// Generates the tokens for MDC icon-button
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_linear-progress.scss b/src/material/core/tokens/m3/mdc/_linear-progress.scss
index 762e1af0e63b..4dead8032bdc 100644
--- a/src/material/core/tokens/m3/mdc/_linear-progress.scss
+++ b/src/material/core/tokens/m3/mdc/_linear-progress.scss
@@ -2,7 +2,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, linear-progress);
+$prefix: (mat, linear-progress);
/// Generates the tokens for MDC linear-progress
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_list.scss b/src/material/core/tokens/m3/mdc/_list.scss
index 5bd052eed16c..fd36e025b79c 100644
--- a/src/material/core/tokens/m3/mdc/_list.scss
+++ b/src/material/core/tokens/m3/mdc/_list.scss
@@ -2,7 +2,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, list);
+$prefix: (mat, list);
/// Generates the tokens for MDC list
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_outlined-button.scss b/src/material/core/tokens/m3/mdc/_outlined-button.scss
index 25800d740579..dc108c75b6b1 100644
--- a/src/material/core/tokens/m3/mdc/_outlined-button.scss
+++ b/src/material/core/tokens/m3/mdc/_outlined-button.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, outlined-button);
+$prefix: (mat, outlined-button);
/// Generates the tokens for MDC outlined-button
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_outlined-card.scss b/src/material/core/tokens/m3/mdc/_outlined-card.scss
index dfb6e9858ec1..a5e27d7f100a 100644
--- a/src/material/core/tokens/m3/mdc/_outlined-card.scss
+++ b/src/material/core/tokens/m3/mdc/_outlined-card.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, outlined-card);
+$prefix: (mat, outlined-card);
/// Generates the tokens for MDC outlined-card
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_outlined-text-field.scss b/src/material/core/tokens/m3/mdc/_outlined-text-field.scss
index bdf28178edf2..0f25bad5cd1b 100644
--- a/src/material/core/tokens/m3/mdc/_outlined-text-field.scss
+++ b/src/material/core/tokens/m3/mdc/_outlined-text-field.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, outlined-text-field);
+$prefix: (mat, outlined-text-field);
/// Generates the tokens for MDC outlined-text-field
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_plain-tooltip.scss b/src/material/core/tokens/m3/mdc/_plain-tooltip.scss
index 6fd4f1545c0f..34d802ee7430 100644
--- a/src/material/core/tokens/m3/mdc/_plain-tooltip.scss
+++ b/src/material/core/tokens/m3/mdc/_plain-tooltip.scss
@@ -1,7 +1,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, plain-tooltip);
+$prefix: (mat, plain-tooltip);
/// Generates the tokens for MDC plain-tooltip
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_protected-button.scss b/src/material/core/tokens/m3/mdc/_protected-button.scss
index be2f01760a5c..ace83ef1f522 100644
--- a/src/material/core/tokens/m3/mdc/_protected-button.scss
+++ b/src/material/core/tokens/m3/mdc/_protected-button.scss
@@ -4,7 +4,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, protected-button);
+$prefix: (mat, protected-button);
/// Generates the tokens for MDC protected-button
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_radio.scss b/src/material/core/tokens/m3/mdc/_radio.scss
index 24bb30d15128..54dcc66e28e6 100644
--- a/src/material/core/tokens/m3/mdc/_radio.scss
+++ b/src/material/core/tokens/m3/mdc/_radio.scss
@@ -2,7 +2,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, radio);
+$prefix: (mat, radio);
/// Generates the tokens for MDC radio
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_secondary-navigation-tab.scss b/src/material/core/tokens/m3/mdc/_secondary-navigation-tab.scss
index 4ef4f025f90d..be41e0433177 100644
--- a/src/material/core/tokens/m3/mdc/_secondary-navigation-tab.scss
+++ b/src/material/core/tokens/m3/mdc/_secondary-navigation-tab.scss
@@ -1,7 +1,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, secondary-navigation-tab);
+$prefix: (mat, secondary-navigation-tab);
/// Generates the tokens for MDC tab
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_slider.scss b/src/material/core/tokens/m3/mdc/_slider.scss
index eb3c9271b360..16ff5001e983 100644
--- a/src/material/core/tokens/m3/mdc/_slider.scss
+++ b/src/material/core/tokens/m3/mdc/_slider.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, slider);
+$prefix: (mat, slider);
/// Generates the tokens for MDC slider
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_snack-bar.scss b/src/material/core/tokens/m3/mdc/_snack-bar.scss
index ec5ad2d2b67e..719e5e7156ae 100644
--- a/src/material/core/tokens/m3/mdc/_snack-bar.scss
+++ b/src/material/core/tokens/m3/mdc/_snack-bar.scss
@@ -1,7 +1,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, snackbar);
+$prefix: (mat, snackbar);
/// Generates the tokens for MDC snackbar
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_switch.scss b/src/material/core/tokens/m3/mdc/_switch.scss
index e8b5374dc10d..5c57cc2d4ce4 100644
--- a/src/material/core/tokens/m3/mdc/_switch.scss
+++ b/src/material/core/tokens/m3/mdc/_switch.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, switch);
+$prefix: (mat, switch);
/// Generates the tokens for MDC switch
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_tab-indicator.scss b/src/material/core/tokens/m3/mdc/_tab-indicator.scss
index 299472487963..b5249fbd607c 100644
--- a/src/material/core/tokens/m3/mdc/_tab-indicator.scss
+++ b/src/material/core/tokens/m3/mdc/_tab-indicator.scss
@@ -2,7 +2,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, tab-indicator);
+$prefix: (mat, tab-indicator);
/// Generates the tokens for MDC tab-indicator
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/core/tokens/m3/mdc/_text-button.scss b/src/material/core/tokens/m3/mdc/_text-button.scss
index eb5a0340582d..02187e7b971e 100644
--- a/src/material/core/tokens/m3/mdc/_text-button.scss
+++ b/src/material/core/tokens/m3/mdc/_text-button.scss
@@ -3,7 +3,7 @@
@use '../../token-definition';
// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, text-button);
+$prefix: (mat, text-button);
/// Generates the tokens for MDC text-button
/// @param {Map} $systems The MDC system tokens
diff --git a/src/material/datepicker/calendar.scss b/src/material/datepicker/calendar.scss
index 7471adae05ac..bf41b9a2b223 100644
--- a/src/material/datepicker/calendar.scss
+++ b/src/material/datepicker/calendar.scss
@@ -55,7 +55,7 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots()
@include token-utils.use-tokens($_tokens...) {
@include token-utils.create-token-slot(font-size, calendar-period-button-text-size);
@include token-utils.create-token-slot(font-weight, calendar-period-button-text-weight);
- @include token-utils.create-token-slot(--mdc-text-button-label-text-color,
+ @include token-utils.create-token-slot(--mat-text-button-label-text-color,
calendar-period-button-text-color);
}
}
diff --git a/src/material/progress-spinner/progress-spinner.ts b/src/material/progress-spinner/progress-spinner.ts
index c517d3e11c55..e668f633acd2 100644
--- a/src/material/progress-spinner/progress-spinner.ts
+++ b/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.--mdc-circular-progress-size]': 'diameter + "px"',
- '[style.--mdc-circular-progress-active-indicator-width]': 'diameter + "px"',
+ '[style.--mat-circular-progress-size]': 'diameter + "px"',
+ '[style.--mat-circular-progress-active-indicator-width]': 'diameter + "px"',
'[attr.aria-valuemin]': '0',
'[attr.aria-valuemax]': '100',
'[attr.aria-valuenow]': 'mode === "determinate" ? value : null',
diff --git a/src/material/select/select.scss b/src/material/select/select.scss
index 7636c4b2e152..7a1db8747383 100644
--- a/src/material/select/select.scss
+++ b/src/material/select/select.scss
@@ -190,7 +190,7 @@ div.mat-mdc-select-panel {
}
.mat-mdc-option {
- --mdc-list-list-item-container-color: var(--mat-select-panel-background-color);
+ --mat-list-list-item-container-color: var(--mat-select-panel-background-color);
}
}
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
index d2c302bd1c1e..900bd0aa31cb 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -50,7 +50,7 @@
& {
// TODO(wagnermaciel): Use our token system to define this css variable.
- --mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
+ --mat-switch-disabled-label-text-color: #{inspection.get-theme-color(
$theme,
foreground,
disabled-text
diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
index 161a2f7c4d98..631afc3f4c2d 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/src/material/slide-toggle/slide-toggle.scss
@@ -580,6 +580,6 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
// TODO(wagnermaciel): Use our custom token system to emit this css rule.
.mdc-switch--disabled + label {
- color: var(--mdc-switch-disabled-label-text-color);
+ color: var(--mat-switch-disabled-label-text-color);
}
}
From e0ae4da5c280edfc662d463c85abacb13f573a07 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Sat, 22 Mar 2025 19:30:53 -0600
Subject: [PATCH 2/3] refactor: repeat mdc tokens along with mat rename
---
src/material/core/tokens/_mdc-tokens.scss | 378 ++++++++++++++++++
src/material/core/tokens/_token-utils.scss | 20 +-
.../slide-toggle/_slide-toggle-theme.scss | 7 +
3 files changed, 403 insertions(+), 2 deletions(-)
create mode 100644 src/material/core/tokens/_mdc-tokens.scss
diff --git a/src/material/core/tokens/_mdc-tokens.scss b/src/material/core/tokens/_mdc-tokens.scss
new file mode 100644
index 000000000000..78bd6f337c3f
--- /dev/null
+++ b/src/material/core/tokens/_mdc-tokens.scss
@@ -0,0 +1,378 @@
+// List of tokens that were previously prefixed with `mdc-` and should be
+// redefined with the `mdc` prefix while internal clients are migrated.
+$mdc-tokens: (
+ '--mat-checkbox-disabled-selected-checkmark-color',
+ '--mat-checkbox-disabled-selected-icon-color',
+ '--mat-checkbox-disabled-unselected-icon-color',
+ '--mat-checkbox-selected-checkmark-color',
+ '--mat-checkbox-selected-focus-icon-color',
+ '--mat-checkbox-selected-focus-state-layer-color',
+ '--mat-checkbox-selected-focus-state-layer-opacity',
+ '--mat-checkbox-selected-hover-icon-color',
+ '--mat-checkbox-selected-hover-state-layer-color',
+ '--mat-checkbox-selected-hover-state-layer-opacity',
+ '--mat-checkbox-selected-icon-color',
+ '--mat-checkbox-selected-pressed-icon-color',
+ '--mat-checkbox-selected-pressed-state-layer-color',
+ '--mat-checkbox-selected-pressed-state-layer-opacity',
+ '--mat-checkbox-state-layer-size',
+ '--mat-checkbox-unselected-focus-icon-color',
+ '--mat-checkbox-unselected-focus-state-layer-color',
+ '--mat-checkbox-unselected-focus-state-layer-opacity',
+ '--mat-checkbox-unselected-hover-icon-color',
+ '--mat-checkbox-unselected-hover-state-layer-color',
+ '--mat-checkbox-unselected-hover-state-layer-opacity',
+ '--mat-checkbox-unselected-icon-color',
+ '--mat-checkbox-unselected-pressed-state-layer-color',
+ '--mat-checkbox-unselected-pressed-state-layer-opacity',
+ '--mat-chip-container-height',
+ '--mat-chip-container-shape-radius',
+ '--mat-chip-disabled-label-text-color',
+ '--mat-chip-disabled-outline-color',
+ '--mat-chip-elevated-container-color',
+ '--mat-chip-elevated-disabled-container-color',
+ '--mat-chip-elevated-selected-container-color',
+ '--mat-chip-flat-disabled-selected-container-color',
+ '--mat-chip-flat-selected-outline-width',
+ '--mat-chip-focus-outline-color',
+ '--mat-chip-focus-state-layer-color',
+ '--mat-chip-focus-state-layer-opacity',
+ '--mat-chip-hover-state-layer-color',
+ '--mat-chip-hover-state-layer-opacity',
+ '--mat-chip-label-text-color',
+ '--mat-chip-label-text-font',
+ '--mat-chip-label-text-line-height',
+ '--mat-chip-label-text-size',
+ '--mat-chip-label-text-tracking',
+ '--mat-chip-label-text-weight',
+ '--mat-chip-outline-color',
+ '--mat-chip-outline-width',
+ '--mat-chip-selected-focus-state-layer-color',
+ '--mat-chip-selected-focus-state-layer-opacity',
+ '--mat-chip-selected-hover-state-layer-color',
+ '--mat-chip-selected-hover-state-layer-opacity',
+ '--mat-chip-selected-label-text-color',
+ '--mat-chip-with-avatar-avatar-shape-radius',
+ '--mat-chip-with-avatar-avatar-size',
+ '--mat-chip-with-avatar-disabled-avatar-opacity',
+ '--mat-chip-with-icon-disabled-icon-color',
+ '--mat-chip-with-icon-disabled-icon-opacity',
+ '--mat-chip-with-icon-icon-color',
+ '--mat-chip-with-icon-icon-size',
+ '--mat-chip-with-icon-selected-icon-color',
+ '--mat-chip-with-trailing-icon-disabled-trailing-icon-color',
+ '--mat-chip-with-trailing-icon-disabled-trailing-icon-opacity',
+ '--mat-chip-with-trailing-icon-trailing-icon-color',
+ '--mat-circular-progress-active-indicator-color',
+ '--mat-circular-progress-active-indicator-width',
+ '--mat-circular-progress-size',
+ '--mat-dialog-container-color',
+ '--mat-dialog-container-shape',
+ '--mat-dialog-subhead-color',
+ '--mat-dialog-subhead-font',
+ '--mat-dialog-subhead-line-height',
+ '--mat-dialog-subhead-size',
+ '--mat-dialog-subhead-tracking',
+ '--mat-dialog-subhead-weight',
+ '--mat-dialog-supporting-text-color',
+ '--mat-dialog-supporting-text-font',
+ '--mat-dialog-supporting-text-line-height',
+ '--mat-dialog-supporting-text-size',
+ '--mat-dialog-supporting-text-tracking',
+ '--mat-dialog-supporting-text-weight',
+ '--mat-elevated-card-container-color',
+ '--mat-elevated-card-container-elevation',
+ '--mat-elevated-card-container-shape',
+ '--mat-fab-container-color',
+ '--mat-fab-container-elevation-shadow',
+ '--mat-fab-container-shape',
+ '--mat-fab-focus-container-elevation-shadow',
+ '--mat-fab-hover-container-elevation-shadow',
+ '--mat-fab-pressed-container-elevation-shadow',
+ '--mat-fab-small-container-color',
+ '--mat-fab-small-container-elevation-shadow',
+ '--mat-fab-small-container-shape',
+ '--mat-fab-small-focus-container-elevation-shadow',
+ '--mat-fab-small-hover-container-elevation-shadow',
+ '--mat-fab-small-pressed-container-elevation-shadow',
+ '--mat-filled-button-container-color',
+ '--mat-filled-button-container-height',
+ '--mat-filled-button-container-shape',
+ '--mat-filled-button-disabled-container-color',
+ '--mat-filled-button-disabled-label-text-color',
+ '--mat-filled-button-label-text-color',
+ '--mat-filled-button-label-text-font',
+ '--mat-filled-button-label-text-size',
+ '--mat-filled-button-label-text-tracking',
+ '--mat-filled-button-label-text-transform',
+ '--mat-filled-button-label-text-weight',
+ '--mat-filled-text-field-active-indicator-color',
+ '--mat-filled-text-field-active-indicator-height',
+ '--mat-filled-text-field-caret-color',
+ '--mat-filled-text-field-container-color',
+ '--mat-filled-text-field-container-shape',
+ '--mat-filled-text-field-disabled-active-indicator-color',
+ '--mat-filled-text-field-disabled-container-color',
+ '--mat-filled-text-field-disabled-input-text-color',
+ '--mat-filled-text-field-disabled-label-text-color',
+ '--mat-filled-text-field-error-active-indicator-color',
+ '--mat-filled-text-field-error-caret-color',
+ '--mat-filled-text-field-error-focus-active-indicator-color',
+ '--mat-filled-text-field-error-focus-label-text-color',
+ '--mat-filled-text-field-error-hover-active-indicator-color',
+ '--mat-filled-text-field-error-hover-label-text-color',
+ '--mat-filled-text-field-error-label-text-color',
+ '--mat-filled-text-field-focus-active-indicator-color',
+ '--mat-filled-text-field-focus-active-indicator-height',
+ '--mat-filled-text-field-focus-label-text-color',
+ '--mat-filled-text-field-hover-active-indicator-color',
+ '--mat-filled-text-field-hover-label-text-color',
+ '--mat-filled-text-field-input-text-color',
+ '--mat-filled-text-field-input-text-placeholder-color',
+ '--mat-filled-text-field-label-text-color',
+ '--mat-filled-text-field-label-text-font',
+ '--mat-filled-text-field-label-text-size',
+ '--mat-filled-text-field-label-text-tracking',
+ '--mat-filled-text-field-label-text-weight',
+ '--mat-icon-button-disabled-icon-color',
+ '--mat-icon-button-icon-color',
+ '--mat-icon-button-icon-size',
+ '--mat-icon-button-state-layer-size',
+ '--mat-icon-button-state-layer-size',
+ '--mat-linear-progress-active-indicator-color',
+ '--mat-linear-progress-active-indicator-height',
+ '--mat-linear-progress-track-color',
+ '--mat-linear-progress-track-height',
+ '--mat-linear-progress-track-shape',
+ '--mat-list-list-item-container-color',
+ '--mat-list-list-item-container-shape',
+ '--mat-list-list-item-disabled-label-text-color',
+ '--mat-list-list-item-disabled-label-text-opacity',
+ '--mat-list-list-item-disabled-leading-icon-color',
+ '--mat-list-list-item-disabled-leading-icon-opacity',
+ '--mat-list-list-item-disabled-state-layer-color',
+ '--mat-list-list-item-disabled-state-layer-opacity',
+ '--mat-list-list-item-disabled-trailing-icon-color',
+ '--mat-list-list-item-disabled-trailing-icon-opacity',
+ '--mat-list-list-item-focus-label-text-color',
+ '--mat-list-list-item-focus-state-layer-color',
+ '--mat-list-list-item-focus-state-layer-opacity',
+ '--mat-list-list-item-hover-label-text-color',
+ '--mat-list-list-item-hover-leading-icon-color',
+ '--mat-list-list-item-hover-state-layer-color',
+ '--mat-list-list-item-hover-state-layer-opacity',
+ '--mat-list-list-item-hover-trailing-icon-color',
+ '--mat-list-list-item-label-text-color',
+ '--mat-list-list-item-label-text-font',
+ '--mat-list-list-item-label-text-line-height',
+ '--mat-list-list-item-label-text-size',
+ '--mat-list-list-item-label-text-tracking',
+ '--mat-list-list-item-label-text-weight',
+ '--mat-list-list-item-leading-avatar-color',
+ '--mat-list-list-item-leading-avatar-shape',
+ '--mat-list-list-item-leading-avatar-size',
+ '--mat-list-list-item-leading-icon-color',
+ '--mat-list-list-item-leading-icon-size',
+ '--mat-list-list-item-one-line-container-height',
+ '--mat-list-list-item-selected-container-color',
+ '--mat-list-list-item-selected-trailing-icon-color',
+ '--mat-list-list-item-supporting-text-color',
+ '--mat-list-list-item-supporting-text-font',
+ '--mat-list-list-item-supporting-text-line-height',
+ '--mat-list-list-item-supporting-text-size',
+ '--mat-list-list-item-supporting-text-tracking',
+ '--mat-list-list-item-supporting-text-weight',
+ '--mat-list-list-item-three-line-container-height',
+ '--mat-list-list-item-trailing-icon-color',
+ '--mat-list-list-item-trailing-icon-size',
+ '--mat-list-list-item-trailing-supporting-text-color',
+ '--mat-list-list-item-trailing-supporting-text-font',
+ '--mat-list-list-item-trailing-supporting-text-line-height',
+ '--mat-list-list-item-trailing-supporting-text-size',
+ '--mat-list-list-item-trailing-supporting-text-tracking',
+ '--mat-list-list-item-trailing-supporting-text-weight',
+ '--mat-list-list-item-two-line-container-height',
+ '--mat-outlined-button-container-height',
+ '--mat-outlined-button-container-shape',
+ '--mat-outlined-button-disabled-label-text-color',
+ '--mat-outlined-button-disabled-outline-color',
+ '--mat-outlined-button-label-text-color',
+ '--mat-outlined-button-label-text-font',
+ '--mat-outlined-button-label-text-size',
+ '--mat-outlined-button-label-text-tracking',
+ '--mat-outlined-button-label-text-transform',
+ '--mat-outlined-button-label-text-weight',
+ '--mat-outlined-button-outline-color',
+ '--mat-outlined-button-outline-width',
+ '--mat-outlined-card-container-color',
+ '--mat-outlined-card-container-elevation',
+ '--mat-outlined-card-container-shape',
+ '--mat-outlined-card-outline-color',
+ '--mat-outlined-card-outline-width',
+ '--mat-outlined-text-field-caret-color',
+ '--mat-outlined-text-field-container-shape',
+ '--mat-outlined-text-field-disabled-input-text-color',
+ '--mat-outlined-text-field-disabled-label-text-color',
+ '--mat-outlined-text-field-disabled-outline-color',
+ '--mat-outlined-text-field-error-caret-color',
+ '--mat-outlined-text-field-error-focus-label-text-color',
+ '--mat-outlined-text-field-error-focus-outline-color',
+ '--mat-outlined-text-field-error-hover-label-text-color',
+ '--mat-outlined-text-field-error-hover-outline-color',
+ '--mat-outlined-text-field-error-label-text-color',
+ '--mat-outlined-text-field-error-outline-color',
+ '--mat-outlined-text-field-focus-label-text-color',
+ '--mat-outlined-text-field-focus-outline-color',
+ '--mat-outlined-text-field-focus-outline-width',
+ '--mat-outlined-text-field-hover-label-text-color',
+ '--mat-outlined-text-field-hover-outline-color',
+ '--mat-outlined-text-field-input-text-color',
+ '--mat-outlined-text-field-input-text-placeholder-color',
+ '--mat-outlined-text-field-label-text-color',
+ '--mat-outlined-text-field-label-text-font',
+ '--mat-outlined-text-field-label-text-size',
+ '--mat-outlined-text-field-label-text-tracking',
+ '--mat-outlined-text-field-label-text-weight',
+ '--mat-outlined-text-field-outline-color',
+ '--mat-outlined-text-field-outline-width',
+ '--mat-plain-tooltip-container-color',
+ '--mat-plain-tooltip-container-shape',
+ '--mat-plain-tooltip-supporting-text-color',
+ '--mat-plain-tooltip-supporting-text-font',
+ '--mat-plain-tooltip-supporting-text-line-height',
+ '--mat-plain-tooltip-supporting-text-size',
+ '--mat-plain-tooltip-supporting-text-tracking',
+ '--mat-plain-tooltip-supporting-text-weight',
+ '--mat-protected-button-container-color',
+ '--mat-protected-button-container-elevation-shadow',
+ '--mat-protected-button-container-height',
+ '--mat-protected-button-container-shape',
+ '--mat-protected-button-disabled-container-color',
+ '--mat-protected-button-disabled-container-elevation-shadow',
+ '--mat-protected-button-disabled-label-text-color',
+ '--mat-protected-button-focus-container-elevation-shadow',
+ '--mat-protected-button-hover-container-elevation-shadow',
+ '--mat-protected-button-label-text-color',
+ '--mat-protected-button-label-text-font',
+ '--mat-protected-button-label-text-size',
+ '--mat-protected-button-label-text-tracking',
+ '--mat-protected-button-label-text-transform',
+ '--mat-protected-button-label-text-weight',
+ '--mat-protected-button-pressed-container-elevation-shadow',
+ '--mat-radio-disabled-selected-icon-color',
+ '--mat-radio-disabled-selected-icon-opacity',
+ '--mat-radio-disabled-unselected-icon-color',
+ '--mat-radio-disabled-unselected-icon-opacity',
+ '--mat-radio-selected-focus-icon-color',
+ '--mat-radio-selected-hover-icon-color',
+ '--mat-radio-selected-icon-color',
+ '--mat-radio-selected-pressed-icon-color',
+ '--mat-radio-state-layer-size',
+ '--mat-radio-unselected-focus-icon-color',
+ '--mat-radio-unselected-hover-icon-color',
+ '--mat-radio-unselected-icon-color',
+ '--mat-radio-unselected-pressed-icon-color',
+ '--mat-secondary-navigation-tab-container-height',
+ '--mat-slider-active-track-color',
+ '--mat-slider-active-track-height',
+ '--mat-slider-active-track-shape',
+ '--mat-slider-disabled-active-track-color',
+ '--mat-slider-disabled-handle-color',
+ '--mat-slider-disabled-inactive-track-color',
+ '--mat-slider-focus-handle-color',
+ '--mat-slider-handle-color',
+ '--mat-slider-handle-elevation',
+ '--mat-slider-handle-height',
+ '--mat-slider-handle-shape',
+ '--mat-slider-handle-width',
+ '--mat-slider-hover-handle-color',
+ '--mat-slider-inactive-track-color',
+ '--mat-slider-inactive-track-height',
+ '--mat-slider-inactive-track-shape',
+ '--mat-slider-label-container-color',
+ '--mat-slider-label-label-text-color',
+ '--mat-slider-label-label-text-font',
+ '--mat-slider-label-label-text-line-height',
+ '--mat-slider-label-label-text-size',
+ '--mat-slider-label-label-text-tracking',
+ '--mat-slider-label-label-text-weight',
+ '--mat-slider-with-overlap-handle-outline-color',
+ '--mat-slider-with-overlap-handle-outline-width',
+ '--mat-slider-with-tick-marks-active-container-color',
+ '--mat-slider-with-tick-marks-active-container-opacity',
+ '--mat-slider-with-tick-marks-container-shape',
+ '--mat-slider-with-tick-marks-container-size',
+ '--mat-slider-with-tick-marks-disabled-container-color',
+ '--mat-slider-with-tick-marks-inactive-container-color',
+ '--mat-slider-with-tick-marks-inactive-container-opacity',
+ '--mat-snackbar-container-color',
+ '--mat-snackbar-container-shape',
+ '--mat-snackbar-supporting-text-color',
+ '--mat-snackbar-supporting-text-font',
+ '--mat-snackbar-supporting-text-line-height',
+ '--mat-snackbar-supporting-text-size',
+ '--mat-snackbar-supporting-text-weight',
+ '--mat-switch-disabled-handle-elevation-shadow',
+ '--mat-switch-disabled-selected-handle-color',
+ '--mat-switch-disabled-selected-icon-color',
+ '--mat-switch-disabled-selected-icon-opacity',
+ '--mat-switch-disabled-selected-track-color',
+ '--mat-switch-disabled-track-opacity',
+ '--mat-switch-disabled-unselected-handle-color',
+ '--mat-switch-disabled-unselected-icon-color',
+ '--mat-switch-disabled-unselected-icon-opacity',
+ '--mat-switch-disabled-unselected-track-color',
+ '--mat-switch-handle-elevation-shadow',
+ '--mat-switch-handle-height',
+ '--mat-switch-handle-shape',
+ '--mat-switch-handle-surface-color',
+ '--mat-switch-handle-width',
+ '--mat-switch-selected-focus-handle-color',
+ '--mat-switch-selected-focus-state-layer-color',
+ '--mat-switch-selected-focus-state-layer-opacity',
+ '--mat-switch-selected-focus-track-color',
+ '--mat-switch-selected-handle-color',
+ '--mat-switch-selected-hover-handle-color',
+ '--mat-switch-selected-hover-state-layer-color',
+ '--mat-switch-selected-hover-state-layer-opacity',
+ '--mat-switch-selected-hover-track-color',
+ '--mat-switch-selected-icon-color',
+ '--mat-switch-selected-icon-size',
+ '--mat-switch-selected-pressed-handle-color',
+ '--mat-switch-selected-pressed-state-layer-color',
+ '--mat-switch-selected-pressed-state-layer-opacity',
+ '--mat-switch-selected-pressed-track-color',
+ '--mat-switch-selected-track-color',
+ '--mat-switch-state-layer-size',
+ '--mat-switch-track-height',
+ '--mat-switch-track-shape',
+ '--mat-switch-track-width',
+ '--mat-switch-unselected-focus-handle-color',
+ '--mat-switch-unselected-focus-state-layer-color',
+ '--mat-switch-unselected-focus-state-layer-opacity',
+ '--mat-switch-unselected-focus-track-color',
+ '--mat-switch-unselected-handle-color',
+ '--mat-switch-unselected-hover-handle-color',
+ '--mat-switch-unselected-hover-state-layer-color',
+ '--mat-switch-unselected-hover-state-layer-opacity',
+ '--mat-switch-unselected-hover-track-color',
+ '--mat-switch-unselected-icon-color',
+ '--mat-switch-unselected-icon-size',
+ '--mat-switch-unselected-pressed-handle-color',
+ '--mat-switch-unselected-pressed-state-layer-color',
+ '--mat-switch-unselected-pressed-state-layer-opacity',
+ '--mat-switch-unselected-pressed-track-color',
+ '--mat-switch-unselected-track-color',
+ '--mat-tab-indicator-active-indicator-color',
+ '--mat-tab-indicator-active-indicator-height',
+ '--mat-tab-indicator-active-indicator-shape',
+ '--mat-text-button-container-height',
+ '--mat-text-button-container-shape',
+ '--mat-text-button-disabled-label-text-color',
+ '--mat-text-button-label-text-color',
+ '--mat-text-button-label-text-font',
+ '--mat-text-button-label-text-size',
+ '--mat-text-button-label-text-tracking',
+ '--mat-text-button-label-text-transform',
+ '--mat-text-button-label-text-weight'
+);
diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss
index c747c0ea7087..77101931da43 100644
--- a/src/material/core/tokens/_token-utils.scss
+++ b/src/material/core/tokens/_token-utils.scss
@@ -1,6 +1,8 @@
@use '../style/elevation';
@use '../style/sass-utils';
@use './m3-system';
+@use './mdc-tokens';
+@use './token-definition';
@use 'sass:list';
@use 'sass:map';
@use 'sass:string';
@@ -133,20 +135,34 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
& {
@each $key, $value in $tokens {
@if $value != null {
- #{_create-var-name($prefix, $key)}: #{$value};
+ @include define-css_var($prefix, $key, $value);
}
}
}
} @else {
@each $key, $value in $tokens {
@if $value != null {
- #{_create-var-name($prefix, $key)}: #{$value};
+ @include define-css-var($prefix, $key, $value);
}
}
}
}
}
+@mixin define-css-var($prefix, $key, $value) {
+ $name: _create-var-name($prefix, $key);
+ // Define the token with an MDC prefix if it was previously prefixed with it.
+ // This allows for a backwards compatible migration for clients to read
+ // the token with either the mdc- or mat- prefix.
+ @if (token-definition.$private-is-internal-build) {
+ @if (list.index(mdc-tokens.$mdc-tokens, $name)) {
+ #{--mdc-#{string.slice($name, 7)}}: #{$value};
+ }
+ }
+
+ #{$name}: #{$value};
+}
+
// MDC doesn't currently handle elevation tokens properly. As a temporary workaround we can combine
// the elevation and shadow-color tokens into a full box-shadow and use it as the value for the
// elevation token.
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
index 900bd0aa31cb..4da83ef0e1ee 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -49,6 +49,13 @@
);
& {
+ // TODO(andrewjs): Remove this once all tokens are migrated to
+ // mat internally.
+ --mdc-switch-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(
$theme,
From b153a08038f6f792fd57aae90e46d0f509811dae Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewseguin@google.com>
Date: Thu, 27 Mar 2025 10:26:41 -0600
Subject: [PATCH 3/3] refactor: include mdc prefix in icon button
---
src/material/button/_icon-button-theme.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss
index 030587b538bb..60518988f90c 100644
--- a/src/material/button/_icon-button-theme.scss
+++ b/src/material/button/_icon-button-theme.scss
@@ -107,6 +107,7 @@
.mat-mdc-icon-button.mat-mdc-button-base {
// 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(--mat-icon-button-state-layer-size)"