From a823ced1473f94ec4c9fb6c425a7982dcce47ad5 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Fri, 4 Apr 2025 13:19:17 -0600 Subject: [PATCH 1/3] fix(multiple): rename hardcoded tokens that were renamed --- src/material/button-toggle/button-toggle.scss | 8 ++++---- src/material/core/option/option.scss | 2 +- src/material/datepicker/calendar.scss | 2 +- src/material/progress-spinner/progress-spinner.ts | 4 ++-- src/material/slide-toggle/_slide-toggle-theme.scss | 6 +++--- src/material/slide-toggle/slide-toggle.scss | 2 +- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss index 1e6eb965b74b..a402c6d9a9f2 100644 --- a/src/material/button-toggle/button-toggle.scss +++ b/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)}; } diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss index 0e18484b9886..67a39fa6be8d 100644 --- a/src/material/core/option/option.scss +++ b/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)}; } } diff --git a/src/material/datepicker/calendar.scss b/src/material/datepicker/calendar.scss index 04b8fa33374f..c64748efebbc 100644 --- a/src/material/datepicker/calendar.scss +++ b/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)}; } } diff --git a/src/material/progress-spinner/progress-spinner.ts b/src/material/progress-spinner/progress-spinner.ts index e668f633acd2..ccd9bf730880 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.--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', diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index e96917aae945..a01513c3ea57 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/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 diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index 5f34892ce07b..de1bc096a6d4 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/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); } } From 837aed7590650375946a1d59e6afb80d0c26a99a Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Sat, 5 Apr 2025 10:46:31 -0600 Subject: [PATCH 2/3] fix(multiple): fix density prefixes --- src/material/core/tokens/_density.scss | 38 ++++++++++++-------------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/src/material/core/tokens/_density.scss b/src/material/core/tokens/_density.scss index 9aaecf113759..5fe52eb77d22 100644 --- a/src/material/core/tokens/_density.scss +++ b/src/material/core/tokens/_density.scss @@ -26,25 +26,25 @@ $_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), @@ -52,7 +52,7 @@ $_density-tokens: ( 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): ( @@ -60,7 +60,7 @@ $_density-tokens: ( // 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,7 +94,7 @@ $_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): ( @@ -105,26 +105,24 @@ $_density-tokens: ( (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), ), From c27d41d0f44ef89d02a2b73af5eee210f3b098ad Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Sat, 5 Apr 2025 11:04:22 -0600 Subject: [PATCH 3/3] fix(multiple): fix density prefixes --- src/material/core/tokens/_density.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/material/core/tokens/_density.scss b/src/material/core/tokens/_density.scss index 5fe52eb77d22..70852784b724 100644 --- a/src/material/core/tokens/_density.scss +++ b/src/material/core/tokens/_density.scss @@ -101,7 +101,6 @@ $_density-tokens: ( arrow-transform: (translateY(-8px), translateY(-8px), none), ), (mat, sidenav): (), - (mat, slide-toggle): (), (mat, slider): (), (mat, snack-bar): (), (mat, sort): (),