From 64b2ba8eb0f60a9c9baa1c994a4e4a823080b787 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 12 Oct 2023 12:06:44 +0200 Subject: [PATCH] fix(material/button): align prefixes with MDC 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. --- 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 );