From 74d1be62e2940e123aa38e1b645815fbd3eca8a9 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 12 Oct 2023 14:37:04 +0200 Subject: [PATCH] fix(material/button): align prefixes with MDC (#27936) We were using the `button-filled` and `button-protected` prefixes for our tokens, likely because that's the naming that MDC is using in their filenames. This was incorrect, because MDC uses the `filled-button` and `protected-button` prefixes for the actual tokens. This will be problematic when start looking up tokens based on their names so this PR updates the prefixes to be in line with MDC. (cherry picked from commit 702ccbe01446502f43e6e7cb365a587ee7558504) --- src/material/button/_button-theme.scss | 24 +++++++++---------- src/material/button/button.scss | 14 +++++------ ...button-filled.scss => _filled-button.scss} | 2 +- ...-protected.scss => _protected-button.scss} | 2 +- .../tokens/tests/test-validate-tokens.scss | 12 +++++----- 5 files changed, 27 insertions(+), 27 deletions(-) rename src/material/core/tokens/m2/mdc/{_button-filled.scss => _filled-button.scss} (99%) rename src/material/core/tokens/m2/mdc/{_button-protected.scss => _protected-button.scss} (99%) diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index d4d248161890..f9a5cb7bc7ae 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -12,8 +12,8 @@ @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/typography/typography'; -@use '../core/tokens/m2/mdc/button-filled' as tokens-mdc-button-filled; -@use '../core/tokens/m2/mdc/button-protected' as tokens-mdc-button-protected; +@use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button; +@use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button; @function _on-color($theme, $palette) { $is-dark: inspection.get-theme-type($theme) == dark; @@ -131,10 +131,10 @@ $on-error: _on-color($theme, $error); .mat-mdc-unelevated-button { - $default-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $surface, $on-surface); - $primary-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $primary, $on-primary); - $accent-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $accent, $on-accent); - $warn-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $error, $on-error); + $default-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $surface, $on-surface); + $primary-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $primary, $on-primary); + $accent-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $accent, $on-accent); + $warn-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $error, $on-error); &.mat-unthemed { @include mdc-button-filled-theme.theme($default-color-tokens); @@ -154,18 +154,18 @@ } .mat-mdc-raised-button { - $default-color-tokens: tokens-mdc-button-protected.get-color-tokens( + $default-color-tokens: tokens-mdc-protected-button.get-color-tokens( $theme, $surface, $on-surface ); - $primary-color-tokens: tokens-mdc-button-protected.get-color-tokens( + $primary-color-tokens: tokens-mdc-protected-button.get-color-tokens( $theme, $primary, $on-primary ); - $accent-color-tokens: tokens-mdc-button-protected.get-color-tokens($theme, $accent, $on-accent); - $warn-color-tokens: tokens-mdc-button-protected.get-color-tokens($theme, $error, $on-error); + $accent-color-tokens: tokens-mdc-protected-button.get-color-tokens($theme, $accent, $on-accent); + $warn-color-tokens: tokens-mdc-protected-button.get-color-tokens($theme, $error, $on-error); &.mat-unthemed { @include mdc-button-protected-theme.theme($default-color-tokens); @@ -235,13 +235,13 @@ $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3); .mat-mdc-raised-button { - $density-tokens: tokens-mdc-button-protected.get-density-tokens($theme); + $density-tokens: tokens-mdc-protected-button.get-density-tokens($theme); @include mdc-button-protected-theme.theme($density-tokens); @include button-theme-private.touch-target-density($density-scale); } .mat-mdc-unelevated-button { - $density-tokens: tokens-mdc-button-filled.get-density-tokens($theme); + $density-tokens: tokens-mdc-filled-button.get-density-tokens($theme); @include mdc-button-filled-theme.theme($density-tokens); @include button-theme-private.touch-target-density($density-scale); } diff --git a/src/material/button/button.scss b/src/material/button/button.scss index f86050e9d34d..12ce5664f813 100644 --- a/src/material/button/button.scss +++ b/src/material/button/button.scss @@ -12,8 +12,8 @@ @use '../core/mdc-helpers/mdc-helpers'; @use '../core/style/private' as style-private; @use '../core/focus-indicators/private' as focus-indicators-private; -@use '../core/tokens/m2/mdc/button-filled' as tokens-mdc-button-filled; -@use '../core/tokens/m2/mdc/button-protected' as tokens-mdc-button-protected; +@use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button; +@use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button; @include mdc-helpers.disable-mdc-fallback-declarations { @include mdc-button.static-styles-without-ripple($query: mdc-helpers.$mdc-base-styles-query); @@ -46,25 +46,25 @@ // Note that we don't include a feature query, because this mixins declare // all the "slots" for CSS variables that will be defined in the theme. .mat-mdc-unelevated-button { - $mdc-button-filled-slots: tokens-mdc-button-filled.get-token-slots(); + $mdc-filled-button-slots: tokens-mdc-filled-button.get-token-slots(); // Add the slots for MDC text button. - @include mdc-button-filled-theme.theme-styles($mdc-button-filled-slots); + @include mdc-button-filled-theme.theme-styles($mdc-filled-button-slots); // Add default values for MDC text button tokens that aren't outputted by the theming API. - @include mdc-button-filled-theme.theme(tokens-mdc-button-filled.get-unthemable-tokens()); + @include mdc-button-filled-theme.theme(tokens-mdc-filled-button.get-unthemable-tokens()); } // Note that we don't include a feature query, because this mixins declare // all the "slots" for CSS variables that will be defined in the theme. .mat-mdc-raised-button { - $mdc-button-protected-slots: tokens-mdc-button-protected.get-token-slots(); + $mdc-button-protected-slots: tokens-mdc-protected-button.get-token-slots(); // Add the slots for MDC text button. @include mdc-button-protected-theme.theme-styles($mdc-button-protected-slots); // Add default values for MDC text button tokens that aren't outputted by the theming API. - @include mdc-button-protected-theme.theme(tokens-mdc-button-protected.get-unthemable-tokens()); + @include mdc-button-protected-theme.theme(tokens-mdc-protected-button.get-unthemable-tokens()); } } diff --git a/src/material/core/tokens/m2/mdc/_button-filled.scss b/src/material/core/tokens/m2/mdc/_filled-button.scss similarity index 99% rename from src/material/core/tokens/m2/mdc/_button-filled.scss rename to src/material/core/tokens/m2/mdc/_filled-button.scss index b9d7780c1fa3..548f95b0ef4b 100644 --- a/src/material/core/tokens/m2/mdc/_button-filled.scss +++ b/src/material/core/tokens/m2/mdc/_filled-button.scss @@ -6,7 +6,7 @@ @use '../../../theming/theming'; // The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mdc, button-filled); +$prefix: (mdc, filled-button); // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. diff --git a/src/material/core/tokens/m2/mdc/_button-protected.scss b/src/material/core/tokens/m2/mdc/_protected-button.scss similarity index 99% rename from src/material/core/tokens/m2/mdc/_button-protected.scss rename to src/material/core/tokens/m2/mdc/_protected-button.scss index 46363de7c124..9e456b0e5b03 100644 --- a/src/material/core/tokens/m2/mdc/_button-protected.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, button-protected); +$prefix: (mdc, protected-button); // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. diff --git a/src/material/core/tokens/tests/test-validate-tokens.scss b/src/material/core/tokens/tests/test-validate-tokens.scss index 9e630d2ad40e..cb9db8937092 100644 --- a/src/material/core/tokens/tests/test-validate-tokens.scss +++ b/src/material/core/tokens/tests/test-validate-tokens.scss @@ -25,8 +25,8 @@ @use '@material/textfield/outlined-text-field-theme' as mdc-outlined-text-field-theme; @use '@material/theme/validate' as mdc-validate; -@use '../m2/mdc/button-protected' as tokens-mdc-button-protected; -@use '../m2/mdc/button-filled' as tokens-mdc-button-filled; +@use '../m2/mdc/protected-button' as tokens-mdc-protected-button; +@use '../m2/mdc/filled-button' as tokens-mdc-filled-button; @use '../m2/mdc/circular-progress' as tokens-mdc-circular-progress; @use '../m2/mdc/linear-progress' as tokens-mdc-linear-progress; @use '../m2/mdc/elevated-card' as tokens-mdc-elevated-card; @@ -161,12 +161,12 @@ $reference: mdc-outlined-text-field-theme.$light-theme ); @include validate-slots( - $component: 'm2.mdc.button-filled', - $slots: tokens-mdc-button-filled.get-token-slots(), + $component: 'm2.mdc.filled-button', + $slots: tokens-mdc-filled-button.get-token-slots(), $reference: mdc-button-filled-theme.$light-theme ); @include validate-slots( - $component: 'm2.mdc.button-protected', - $slots: tokens-mdc-button-protected.get-token-slots(), + $component: 'm2.mdc.protected-button', + $slots: tokens-mdc-protected-button.get-token-slots(), $reference: mdc-button-protected-theme.$light-theme );