From 8fa372bc5dd61f31a9d38d2be21bc68e843dd5f6 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Mon, 19 May 2025 13:43:15 -0600 Subject: [PATCH 1/5] refactor: simplify component styles by removing use-tokens --- src/dev-app/theme/theme-demo.scss | 10 +- .../autocomplete/_autocomplete-theme.scss | 39 +- .../autocomplete/_m2-autocomplete.scss | 9 +- .../autocomplete/_m3-autocomplete.scss | 12 +- src/material/autocomplete/autocomplete.scss | 14 +- src/material/badge/_badge-theme.scss | 31 +- src/material/badge/_m2-badge.scss | 67 +- src/material/badge/_m3-badge.scss | 63 +- src/material/badge/badge.scss | 126 ++- .../bottom-sheet/_bottom-sheet-theme.scss | 20 +- .../bottom-sheet/_m2-bottom-sheet.scss | 22 +- .../bottom-sheet/_m3-bottom-sheet.scss | 22 +- .../bottom-sheet/bottom-sheet-container.scss | 28 +- .../button-toggle/_button-toggle-theme.scss | 30 +- .../button-toggle/_m2-button-toggle.scss | 82 +- .../button-toggle/_m3-button-toggle.scss | 61 +- src/material/button-toggle/button-toggle.scss | 572 ++++++------ src/material/button/_button-base.scss | 26 +- src/material/button/_button-theme.scss | 34 +- src/material/button/_fab-theme.scss | 36 +- src/material/button/_icon-button-theme.scss | 32 +- src/material/button/_m2-button.scss | 268 +++--- src/material/button/_m2-fab.scss | 104 ++- src/material/button/_m2-icon-button.scss | 31 +- src/material/button/_m3-button.scss | 221 ++--- src/material/button/_m3-fab.scss | 95 +- src/material/button/_m3-icon-button.scss | 29 +- src/material/button/button.scss | 346 +++---- src/material/button/fab.scss | 217 +++-- src/material/button/icon-button.scss | 146 ++- src/material/card/_card-theme.scss | 42 +- src/material/card/_m2-card.scss | 49 +- src/material/card/_m3-card.scss | 47 +- src/material/card/card.scss | 118 ++- src/material/checkbox/_checkbox-common.scss | 227 +++-- src/material/checkbox/_checkbox-theme.scss | 38 +- src/material/checkbox/_m2-checkbox.scss | 67 +- src/material/checkbox/_m3-checkbox.scss | 72 +- src/material/checkbox/checkbox.scss | 30 +- src/material/chips/_chips-theme.scss | 42 +- src/material/chips/_m2-chip.scss | 98 +- src/material/chips/_m3-chip.scss | 100 +- src/material/chips/chip.scss | 375 ++++---- src/material/core/_core-theme.scss | 120 +-- src/material/core/_core.scss | 35 +- src/material/core/_m2-app.scss | 10 +- src/material/core/_m3-app.scss | 60 +- src/material/core/option/_m2-optgroup.scss | 15 +- src/material/core/option/_m2-option.scss | 23 +- src/material/core/option/_m3-optgroup.scss | 15 +- src/material/core/option/_m3-option.scss | 26 +- src/material/core/option/_optgroup-theme.scss | 28 +- src/material/core/option/_option-theme.scss | 31 +- src/material/core/option/optgroup.scss | 20 +- src/material/core/option/option.scss | 75 +- src/material/core/ripple/_m2-ripple.scss | 5 +- src/material/core/ripple/_m3-ripple.scss | 8 +- src/material/core/ripple/_ripple-theme.scss | 37 +- src/material/core/ripple/_ripple.scss | 12 +- .../pseudo-checkbox/_m2-pseudo-checkbox.scss | 21 +- .../pseudo-checkbox/_m3-pseudo-checkbox.scss | 22 +- .../_pseudo-checkbox-theme.scss | 11 +- .../pseudo-checkbox/pseudo-checkbox.scss | 62 +- src/material/core/tokens/_m3-system.scss | 85 +- src/material/core/tokens/_token-utils.scss | 168 ++-- src/material/core/tokens/m3/BUILD.bazel | 1 + src/material/core/tokens/m3/_index.scss | 1 + src/material/core/tokens/m3/_theme.scss | 47 + .../datepicker/_datepicker-theme.scss | 39 +- src/material/datepicker/_m2-datepicker.scss | 105 ++- src/material/datepicker/_m3-datepicker.scss | 91 +- src/material/datepicker/calendar-body.scss | 152 ++-- src/material/datepicker/calendar.scss | 47 +- src/material/datepicker/date-range-input.scss | 21 +- .../datepicker/datepicker-content.scss | 25 +- .../datepicker/datepicker-toggle.scss | 15 +- src/material/dialog/_dialog-theme.scss | 31 +- src/material/dialog/_m2-dialog.scss | 51 +- src/material/dialog/_m3-dialog.scss | 52 +- src/material/dialog/dialog.scss | 88 +- src/material/divider/_divider-theme.scss | 28 +- src/material/divider/_m2-divider.scss | 7 +- src/material/divider/_m3-divider.scss | 10 +- src/material/divider/divider.scss | 22 +- src/material/expansion/_expansion-theme.scss | 34 +- src/material/expansion/_m2-expansion.scss | 55 +- src/material/expansion/_m3-expansion.scss | 51 +- .../expansion/expansion-panel-header.scss | 80 +- src/material/expansion/expansion-panel.scss | 46 +- .../form-field/_form-field-focus-overlay.scss | 20 +- .../form-field/_form-field-native-select.scss | 34 +- .../form-field/_form-field-subscript.scss | 25 +- .../form-field/_form-field-theme.scss | 47 +- src/material/form-field/_m2-form-field.scss | 203 +++-- src/material/form-field/_m3-form-field.scss | 179 ++-- .../_mdc-text-field-density-overrides.scss | 85 +- .../_mdc-text-field-structure-overrides.scss | 10 +- .../form-field/_mdc-text-field-structure.scss | 858 +++++++++--------- src/material/form-field/form-field.scss | 80 +- src/material/grid-list/_grid-list-theme.scss | 25 +- src/material/grid-list/_m2-grid-list.scss | 15 +- src/material/grid-list/_m3-grid-list.scss | 14 +- src/material/grid-list/grid-list.scss | 22 +- src/material/icon/_icon-theme.scss | 26 +- src/material/icon/_m2-icon.scss | 5 +- src/material/icon/_m3-icon.scss | 8 +- src/material/icon/icon.scss | 10 +- src/material/input/_input-theme.scss | 4 +- .../list/_list-inherited-structure.scss | 187 ++-- src/material/list/_list-theme.scss | 65 +- src/material/list/_m2-list.scss | 111 +-- src/material/list/_m3-list.scss | 111 +-- src/material/list/list.scss | 112 ++- src/material/menu/_m2-menu.scss | 47 +- src/material/menu/_m3-menu.scss | 48 +- src/material/menu/_menu-theme.scss | 31 +- src/material/menu/menu.scss | 127 ++- src/material/paginator/_m2-paginator.scss | 33 +- src/material/paginator/_m3-paginator.scss | 35 +- src/material/paginator/_paginator-theme.scss | 31 +- src/material/paginator/paginator.scss | 60 +- .../progress-bar/_m2-progress-bar.scss | 13 +- .../progress-bar/_m3-progress-bar.scss | 13 +- .../progress-bar/_progress-bar-theme.scss | 20 +- src/material/progress-bar/progress-bar.scss | 49 +- .../_m2-progress-spinner.scss | 9 +- .../_m3-progress-spinner.scss | 9 +- .../_progress-spinner-theme.scss | 28 +- .../progress-spinner/progress-spinner.scss | 18 +- src/material/radio/_m2-radio.scss | 51 +- src/material/radio/_m3-radio.scss | 54 +- src/material/radio/_radio-common.scss | 129 ++- src/material/radio/_radio-theme.scss | 47 +- src/material/radio/radio.scss | 67 +- src/material/select/_m2-select.scss | 33 +- src/material/select/_m3-select.scss | 35 +- src/material/select/_select-theme.scss | 46 +- src/material/select/select.scss | 68 +- src/material/sidenav/_m2-sidenav.scss | 21 +- src/material/sidenav/_m3-sidenav.scss | 24 +- src/material/sidenav/_sidenav-theme.scss | 28 +- src/material/sidenav/drawer.scss | 118 +-- .../slide-toggle/_m2-slide-toggle.scss | 165 ++-- .../slide-toggle/_m3-slide-toggle.scss | 163 ++-- .../slide-toggle/_slide-toggle-theme.scss | 54 +- src/material/slide-toggle/slide-toggle.scss | 439 ++++----- src/material/slider/_m2-slider.scss | 92 +- src/material/slider/_m3-slider.scss | 92 +- src/material/slider/_slider-theme.scss | 31 +- src/material/slider/slider.scss | 215 ++--- src/material/snack-bar/_m2-snack-bar.scss | 21 +- src/material/snack-bar/_m3-snack-bar.scss | 22 +- src/material/snack-bar/_snack-bar-theme.scss | 27 +- .../snack-bar/snack-bar-container.scss | 42 +- src/material/sort/_m2-sort.scss | 5 +- src/material/sort/_m3-sort.scss | 5 +- src/material/sort/_sort-theme.scss | 31 +- src/material/sort/sort-header.scss | 11 +- src/material/stepper/_m2-stepper.scss | 63 +- src/material/stepper/_m3-stepper.scss | 59 +- src/material/stepper/_stepper-theme.scss | 42 +- src/material/stepper/step-header.scss | 93 +- src/material/stepper/stepper.scss | 84 +- src/material/table/_m2-table.scss | 51 +- src/material/table/_m3-table.scss | 52 +- src/material/table/_table-flex-styles.scss | 24 +- src/material/table/_table-theme.scss | 34 +- src/material/table/table.scss | 146 ++- src/material/tabs/_m2-tabs.scss | 55 +- src/material/tabs/_m3-tabs.scss | 54 +- src/material/tabs/_tabs-common.scss | 210 ++--- src/material/tabs/_tabs-theme.scss | 61 +- src/material/timepicker/_m2-timepicker.scss | 9 +- src/material/timepicker/_m3-timepicker.scss | 12 +- .../timepicker/_timepicker-theme.scss | 39 +- src/material/timepicker/timepicker.scss | 23 +- src/material/toolbar/_m2-toolbar.scss | 23 +- src/material/toolbar/_m3-toolbar.scss | 24 +- src/material/toolbar/_toolbar-theme.scss | 34 +- src/material/toolbar/toolbar.scss | 69 +- src/material/tooltip/_m2-tooltip.scss | 20 +- src/material/tooltip/_m3-tooltip.scss | 22 +- src/material/tooltip/_tooltip-theme.scss | 42 +- src/material/tooltip/tooltip.scss | 24 +- src/material/tree/_m2-tree.scss | 15 +- src/material/tree/_m3-tree.scss | 15 +- src/material/tree/_tree-theme.scss | 37 +- src/material/tree/tree.scss | 29 +- tools/extract-tokens/extract-tokens.ts | 115 +-- 189 files changed, 5567 insertions(+), 7062 deletions(-) create mode 100644 src/material/core/tokens/m3/_theme.scss diff --git a/src/dev-app/theme/theme-demo.scss b/src/dev-app/theme/theme-demo.scss index c28fafaf3317..e01e12f73000 100644 --- a/src/dev-app/theme/theme-demo.scss +++ b/src/dev-app/theme/theme-demo.scss @@ -93,11 +93,11 @@ mat-expansion-panel { margin-top: 24px; overflow: visible; @include mat.expansion-overrides(( - 'container-text-font': var(--mat-sys-body-medium-font), - 'container-text-size': var(--mat-sys-body-medium-size), - 'container-text-weight': var(--mat-sys-body-medium-weight), - 'container-text-line-height': var(--mat-sys-body-medium-line-height), - 'container-text-tracking': var(--mat-sys-body-medium-tracking), + container-text-font: var(--mat-sys-body-medium-font), + container-text-size: var(--mat-sys-body-medium-size), + container-text-weight: var(--mat-sys-body-medium-weight), + container-text-line-height: var(--mat-sys-body-medium-line-height), + container-text-tracking: var(--mat-sys-body-medium-tracking), )); } diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss index b240471548ac..389b71352a8e 100644 --- a/src/material/autocomplete/_autocomplete-theme.scss +++ b/src/material/autocomplete/_autocomplete-theme.scss @@ -9,30 +9,20 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { - @include token-utils.create-token-values( - m3-autocomplete.$prefix, - map.get(m3-autocomplete.get-tokens($theme), base)); + @include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - m2-autocomplete.$prefix, - m2-autocomplete.get-unthemable-tokens() - ); + @include token-utils.create-token-values-mixed(m2-autocomplete.get-unthemable-tokens()); } } } @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { - @include token-utils.create-token-values( - m3-autocomplete.$prefix, - map.get(m3-autocomplete.get-tokens($theme), color)); + @include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - m2-autocomplete.$prefix, - m2-autocomplete.get-color-tokens($theme) - ); + @include token-utils.create-token-values-mixed(m2-autocomplete.get-color-tokens($theme)); } } } @@ -40,29 +30,20 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include token-utils.create-token-values( - m3-autocomplete.$prefix, map.get(m3-autocomplete.get-tokens($theme), typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - m2-autocomplete.$prefix, - m2-autocomplete.get-typography-tokens($theme) - ); + @include token-utils.create-token-values-mixed(m2-autocomplete.get-typography-tokens($theme)); } } } @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { - @include token-utils.create-token-values( - m3-autocomplete.$prefix, - map.get(m3-autocomplete.get-tokens($theme), density)); + @include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - m2-autocomplete.$prefix, - m2-autocomplete.get-density-tokens($theme) - ); + @include token-utils.create-token-values-mixed(m2-autocomplete.get-density-tokens($theme)); } } } @@ -71,14 +52,14 @@ @function _define-overrides() { @return ( ( - namespace: m2-autocomplete.$prefix, - tokens: m2-autocomplete.get-token-slots(), + namespace: autocomplete, + tokens: token-utils.get-overrides(m3-autocomplete.get-tokens(), autocomplete), ), ); } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values($tokens, _define-overrides()...); + @include token-utils.batch-create-token-values($tokens, _define-overrides()); } @mixin theme($theme) { diff --git a/src/material/autocomplete/_m2-autocomplete.scss b/src/material/autocomplete/_m2-autocomplete.scss index 6936ef19371b..95a74fc5a7e7 100644 --- a/src/material/autocomplete/_m2-autocomplete.scss +++ b/src/material/autocomplete/_m2-autocomplete.scss @@ -3,22 +3,19 @@ @use '../core/style/elevation'; @use '../core/style/sass-utils'; -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, autocomplete); - // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( - container-shape: 4px, - container-elevation-shadow: elevation.get-box-shadow(8), + autocomplete-container-shape: 4px, + autocomplete-container-elevation-shadow: elevation.get-box-shadow(8), ); } // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { @return ( - background-color: inspection.get-theme-color($theme, background, card) + autocomplete-background-color: inspection.get-theme-color($theme, background, card) ); } diff --git a/src/material/autocomplete/_m3-autocomplete.scss b/src/material/autocomplete/_m3-autocomplete.scss index 4f148eadb41c..4a5272bbf3f8 100644 --- a/src/material/autocomplete/_m3-autocomplete.scss +++ b/src/material/autocomplete/_m3-autocomplete.scss @@ -1,24 +1,22 @@ @use 'sass:map'; @use '../core/style/elevation'; @use '../core/tokens/m3-utils'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, autocomplete); +@use '../core/tokens/m3'; /// Generates custom tokens for the mat-autocomplete. /// @param {Map} $systems The MDC system tokens /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-autocomplete -@function get-tokens($theme) { +@function get-tokens($theme: m3.$sys-theme) { $system: m3-utils.get-system($theme); $tokens: ( base: ( - container-shape: map.get($system, corner-extra-small), - container-elevation-shadow: elevation.get-box-shadow(2), + autocomplete-container-shape: map.get($system, corner-extra-small), + autocomplete-container-elevation-shadow: elevation.get-box-shadow(2), ), color: ( - background-color: map.get($system, surface-container), + autocomplete-background-color: map.get($system, surface-container), ), typography: (), density: (), diff --git a/src/material/autocomplete/autocomplete.scss b/src/material/autocomplete/autocomplete.scss index 1f014e9632b2..b3d3be79f849 100644 --- a/src/material/autocomplete/autocomplete.scss +++ b/src/material/autocomplete/autocomplete.scss @@ -1,12 +1,8 @@ @use '@angular/cdk'; -@use './m2-autocomplete'; @use './m3-autocomplete'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m3-system'; -$token-prefix: m2-autocomplete.$prefix; -$token-slots: m2-autocomplete.get-token-slots(); -$fallbacks: m3-autocomplete.get-tokens(m3-system.$theme-with-system-vars); +$fallbacks: m3-autocomplete.get-tokens(); // Even though we don't use the MDC styles, we need to keep the classes in the // DOM for the Gmat versions to work. We need to bump up the specificity here @@ -24,11 +20,9 @@ div.mat-mdc-autocomplete-panel { // panel which is required for scroll calculations (see #30974). position: relative; - @include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) { - border-radius: token-utils.slot(container-shape); - box-shadow: token-utils.slot(container-elevation-shadow); - background-color: token-utils.slot(background-color); - } + border-radius: token-utils.slot(autocomplete-container-shape, $fallbacks); + box-shadow: token-utils.slot(autocomplete-container-elevation-shadow, $fallbacks); + background-color: token-utils.slot(autocomplete-background-color, $fallbacks); @include cdk.high-contrast { outline: solid 1px; diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss index 34ba2cd6c362..eac410573b8a 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -13,14 +13,10 @@ /// @param {Map} $theme The theme to generate base styles for. @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { - @include token-utils.create-token-values( - m3-badge.$prefix, - map.get(m3-badge.get-tokens($theme), base)); + @include token-utils.create-token-values(map.get(m3-badge.get-tokens($theme), base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - m2-badge.$prefix, - m2-badge.get-unthemable-tokens() + @include token-utils.create-token-values-mixed(m2-badge.get-unthemable-tokens() ); } } @@ -34,26 +30,20 @@ @mixin color($theme, $color-variant: null) { @if inspection.get-theme-version($theme) == 1 { @include token-utils.create-token-values( - m3-badge.$prefix, map.get(m3-badge.get-tokens($theme, $color-variant), color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - m2-badge.$prefix, - m2-badge.get-color-tokens($theme) - ); + @include token-utils.create-token-values-mixed(m2-badge.get-color-tokens($theme)); } .mat-badge-accent { @include token-utils.create-token-values-mixed( - m2-badge.$prefix, m2-badge.private-get-color-palette-color-tokens($theme, accent) ); } .mat-badge-warn { @include token-utils.create-token-values-mixed( - m2-badge.$prefix, m2-badge.private-get-color-palette-color-tokens($theme, warn) ); } @@ -64,13 +54,10 @@ /// @param {Map} $theme The theme to generate typography styles for. @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { - @include token-utils.create-token-values( - m3-badge.$prefix, - map.get(m3-badge.get-tokens($theme), typography)); + @include token-utils.create-token-values(map.get(m3-badge.get-tokens($theme), typography)); } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - m2-badge.$prefix, m2-badge.get-typography-tokens($theme) ); } @@ -81,9 +68,7 @@ /// @param {Map} $theme The theme to generate density styles for. @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { - @include token-utils.create-token-values( - m3-badge.$prefix, - map.get(m3-badge.get-tokens($theme), density)); + @include token-utils.create-token-values(map.get(m3-badge.get-tokens($theme), density)); } @else { } } @@ -92,8 +77,8 @@ @function _define-overrides() { @return ( ( - namespace: m2-badge.$prefix, - tokens: m2-badge.get-token-slots(), + namespace: badge, + tokens: token-utils.get-overrides(m3-badge.get-tokens(), badge), ), ); } @@ -101,7 +86,7 @@ /// Outputs the CSS variable values for the given tokens. /// @param {Map} $tokens The token values to emit. @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values($tokens, _define-overrides()...); + @include token-utils.batch-create-token-values($tokens, _define-overrides()); } /// Outputs all (base, color, typography, and density) theme styles for the mat-badge. diff --git a/src/material/badge/_m2-badge.scss b/src/material/badge/_m2-badge.scss index cdb2ee5e6344..1d6d8d2a1069 100644 --- a/src/material/badge/_m2-badge.scss +++ b/src/material/badge/_m2-badge.scss @@ -10,9 +10,6 @@ $_default-size: 22px; $_small-size: $_default-size - 6px; $_large-size: $_default-size + 6px; -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, badge); - // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @function get-unthemable-tokens() { @@ -21,26 +18,26 @@ $prefix: (mat, badge); $large-size: $_large-size; @return ( - container-shape: 50%, - container-size: unset, - small-size-container-size: unset, - large-size-container-size: unset, - - legacy-container-size: $default-size, - legacy-small-size-container-size: $small-size, - legacy-large-size-container-size: $large-size, - - container-offset: math.div($default-size, -2) 0, - small-size-container-offset: math.div($small-size, -2) 0, - large-size-container-offset: math.div($large-size, -2) 0, - - container-overlap-offset: math.div($default-size, -2), - small-size-container-overlap-offset: math.div($small-size, -2), - large-size-container-overlap-offset: math.div($large-size, -2), - - container-padding: 0, - small-size-container-padding: 0, - large-size-container-padding: 0, + badge-container-shape: 50%, + badge-container-size: unset, + badge-small-size-container-size: unset, + badge-large-size-container-size: unset, + + badge-legacy-container-size: $default-size, + badge-legacy-small-size-container-size: $small-size, + badge-legacy-large-size-container-size: $large-size, + + badge-container-offset: math.div($default-size, -2) 0, + badge-small-size-container-offset: math.div($small-size, -2) 0, + badge-large-size-container-offset: math.div($large-size, -2) 0, + + badge-container-overlap-offset: math.div($default-size, -2), + badge-small-size-container-overlap-offset: math.div($small-size, -2), + badge-large-size-container-overlap-offset: math.div($large-size, -2), + + badge-container-padding: 0, + badge-small-size-container-padding: 0, + badge-large-size-container-padding: 0, ); } @@ -62,16 +59,16 @@ $prefix: (mat, badge); } @return map.merge($primary-color-tokens, ( - disabled-state-background-color: $disabled-background, - disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text), + badge-disabled-state-background-color: $disabled-background, + badge-disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text), )); } // Generates the tokens used to theme the badge based on a palette. @function private-get-color-palette-color-tokens($theme, $palette-name: primary) { @return ( - background-color: inspection.get-theme-color($theme, $palette-name), - text-color: inspection.get-theme-color($theme, $palette-name, default-contrast), + badge-background-color: inspection.get-theme-color($theme, $palette-name), + badge-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast), ); } @@ -80,16 +77,16 @@ $prefix: (mat, badge); $base-size: 12px; @return ( - text-font: inspection.get-theme-typography($theme, body-2, font-family), - line-height: $_default-size, - text-size: $base-size, - text-weight: 600, + badge-text-font: inspection.get-theme-typography($theme, body-2, font-family), + badge-line-height: $_default-size, + badge-text-size: $base-size, + badge-text-weight: 600, - small-size-text-size: $base-size * 0.75, - small-size-line-height: $_small-size, + badge-small-size-text-size: $base-size * 0.75, + badge-small-size-line-height: $_small-size, - large-size-text-size: $base-size * 2, - large-size-line-height: $_large-size, + badge-large-size-text-size: $base-size * 2, + badge-large-size-line-height: $_large-size, ); } diff --git a/src/material/badge/_m3-badge.scss b/src/material/badge/_m3-badge.scss index f56de6cac480..1ef9287cecf4 100644 --- a/src/material/badge/_m3-badge.scss +++ b/src/material/badge/_m3-badge.scss @@ -1,11 +1,9 @@ @use 'sass:map'; @use '../core/tokens/m3-utils'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, badge); +@use '../core/tokens/m3'; /// Generates custom tokens for the mat-badge. -@function get-tokens($theme, $color-variant: null) { +@function get-tokens($theme: m3.$sys-theme, $color-variant: null) { $system: m3-utils.get-system($theme); @if $color-variant { $system: m3-utils.replace-colors-with-variant($system, error, $color-variant); @@ -13,38 +11,39 @@ $prefix: (mat, badge); $tokens: ( base: ( - container-offset: -12px 0, - container-overlap-offset: -12px, - container-padding: 0 4px, - container-shape: map.get($system, corner-full), - container-size: 16px, - large-size-container-offset: -12px 0, - large-size-container-overlap-offset: -12px, - large-size-container-padding: 0 4px, - large-size-container-size: 16px, - legacy-container-size: unset, - legacy-large-size-container-size: unset, - legacy-small-size-container-size: unset, - small-size-container-offset: -6px 0, - small-size-container-overlap-offset: -6px, - small-size-container-padding: 0, - small-size-container-size: 6px, + badge-container-offset: -12px 0, + badge-container-overlap-offset: -12px, + badge-container-padding: 0 4px, + badge-container-shape: map.get($system, corner-full), + badge-container-size: 16px, + badge-large-size-container-offset: -12px 0, + badge-large-size-container-overlap-offset: -12px, + badge-large-size-container-padding: 0 4px, + badge-large-size-container-size: 16px, + badge-legacy-container-size: unset, + badge-legacy-large-size-container-size: unset, + badge-legacy-small-size-container-size: unset, + badge-small-size-container-offset: -6px 0, + badge-small-size-container-overlap-offset: -6px, + badge-small-size-container-padding: 0, + badge-small-size-container-size: 6px, ), color: ( - background-color: map.get($system, error), - disabled-state-background-color: m3-utils.color-with-opacity(map.get($system, error), 38%), - disabled-state-text-color: map.get($system, on-error), - text-color: map.get($system, on-error), + badge-background-color: map.get($system, error), + badge-disabled-state-background-color: + m3-utils.color-with-opacity(map.get($system, error), 38%), + badge-disabled-state-text-color: map.get($system, on-error), + badge-text-color: map.get($system, on-error), ), typography: ( - large-size-line-height: 16px, - large-size-text-size: map.get($system, label-small-size), - line-height: 16px, - small-size-line-height: 6px, - small-size-text-size: 0, - text-font: map.get($system, label-small-font), - text-size: map.get($system, label-small-size), - text-weight: map.get($system, label-small-weight), + badge-large-size-line-height: 16px, + badge-large-size-text-size: map.get($system, label-small-size), + badge-line-height: 16px, + badge-small-size-line-height: 6px, + badge-small-size-text-size: 0, + badge-text-font: map.get($system, label-small-font), + badge-text-size: map.get($system, label-small-size), + badge-text-weight: map.get($system, label-small-weight), ), density: (), ); diff --git a/src/material/badge/badge.scss b/src/material/badge/badge.scss index 2dd684f6fd79..ee771a08aa7f 100644 --- a/src/material/badge/badge.scss +++ b/src/material/badge/badge.scss @@ -1,46 +1,40 @@ @use 'sass:color'; @use '@angular/cdk'; -@use './m2-badge'; @use './m3-badge'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m3-system'; $default-size: 22px !default; $small-size: $default-size - 6; $large-size: $default-size + 6; -$token-prefix: m2-badge.$prefix; -$token-slots: m2-badge.get-token-slots(); -$fallbacks: m3-badge.get-tokens(m3-system.$theme-with-system-vars); +$fallbacks: m3-badge.get-tokens(); @mixin _badge-size($size) { - @include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) { - $prefix: if($size == 'medium', '', $size + '-size-'); - $legacy-size-var-name: 'legacy-#{$prefix}container-size'; - $size-var-name: '#{$prefix}container-size'; - - .mat-badge-content { - // The M2 badge is implemented incorrectly because it uses `width` and `height` for its - // size which causes the text to be truncated. For M3 we want to fix this by emitting - // two declarations: - // * `legacy-container-size` token - targets width/height as in M2. In M3 the token is - // emitted as `unset`. - // * `container-size` token - In M2 the token is emitted as `unset` to preserve the legacy - // behavior while in M3 it targets `min-width` and `min-height` which allows the badge to - // grow with the content. - width: token-utils.slot($legacy-size-var-name); - height: token-utils.slot($legacy-size-var-name); - min-width: token-utils.slot($size-var-name); - min-height: token-utils.slot($size-var-name); - line-height: token-utils.slot('#{$prefix}line-height'); - padding: token-utils.slot('#{$prefix}container-padding'); - font-size: token-utils.slot('#{$prefix}text-size'); - margin: token-utils.slot('#{$prefix}container-offset'); - } - - &.mat-badge-overlap .mat-badge-content { - margin: token-utils.slot('#{$prefix}container-overlap-offset'); - } + $prefix: if($size == 'medium', '', $size + '-size-'); + $legacy-size-var-name: 'badge-legacy-#{$prefix}container-size'; + $size-var-name: 'badge-#{$prefix}container-size'; + + .mat-badge-content { + // The M2 badge is implemented incorrectly because it uses `width` and `height` for its + // size which causes the text to be truncated. For M3 we want to fix this by emitting + // two declarations: + // * `legacy-container-size` token - targets width/height as in M2. In M3 the token is + // emitted as `unset`. + // * `container-size` token - In M2 the token is emitted as `unset` to preserve the legacy + // behavior while in M3 it targets `min-width` and `min-height` which allows the badge to + // grow with the content. + width: token-utils.slot($legacy-size-var-name, $fallbacks); + height: token-utils.slot($legacy-size-var-name, $fallbacks); + min-width: token-utils.slot($size-var-name, $fallbacks); + min-height: token-utils.slot($size-var-name, $fallbacks); + line-height: token-utils.slot('badge-#{$prefix}line-height', $fallbacks); + padding: token-utils.slot('badge-#{$prefix}container-padding', $fallbacks); + font-size: token-utils.slot('badge-#{$prefix}text-size', $fallbacks); + margin: token-utils.slot('badge-#{$prefix}container-offset', $fallbacks); + } + + &.mat-badge-overlap .mat-badge-content { + margin: token-utils.slot('badge-#{$prefix}container-overlap-offset', $fallbacks); } } @@ -68,38 +62,36 @@ $fallbacks: m3-badge.get-tokens(m3-system.$theme-with-system-vars); box-sizing: border-box; pointer-events: none; - @include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) { - background-color: token-utils.slot(background-color); - color: token-utils.slot(text-color); - font-family: token-utils.slot(text-font); - font-weight: token-utils.slot(text-weight); - border-radius: token-utils.slot(container-shape); - - .mat-badge-above & { - bottom: 100%; - } - - .mat-badge-below & { - top: 100%; - } - - .mat-badge-before & { - right: 100%; - } - - [dir='rtl'] .mat-badge-before & { - right: auto; - left: 100%; - } - - .mat-badge-after & { - left: 100%; - } - - [dir='rtl'] .mat-badge-after & { - left: auto; - right: 100%; - } + background-color: token-utils.slot(badge-background-color, $fallbacks); + color: token-utils.slot(badge-text-color, $fallbacks); + font-family: token-utils.slot(badge-text-font, $fallbacks); + font-weight: token-utils.slot(badge-text-weight, $fallbacks); + border-radius: token-utils.slot(badge-container-shape, $fallbacks); + + .mat-badge-above & { + bottom: 100%; + } + + .mat-badge-below & { + top: 100%; + } + + .mat-badge-before & { + right: 100%; + } + + [dir='rtl'] .mat-badge-before & { + right: auto; + left: 100%; + } + + .mat-badge-after & { + left: 100%; + } + + [dir='rtl'] .mat-badge-after & { + left: auto; + right: 100%; } @include cdk.high-contrast { @@ -109,10 +101,8 @@ $fallbacks: m3-badge.get-tokens(m3-system.$theme-with-system-vars); } .mat-badge-disabled .mat-badge-content { - @include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) { - background-color: token-utils.slot(disabled-state-background-color); - color: token-utils.slot(disabled-state-text-color); - } + background-color: token-utils.slot(badge-disabled-state-background-color, $fallbacks); + color: token-utils.slot(badge-disabled-state-text-color, $fallbacks); } .mat-badge-hidden .mat-badge-content { diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss index 01ea3e477a21..b68a7ee6d8ce 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -9,15 +9,10 @@ @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { - @include token-utils.create-token-values( - m3-bottom-sheet.$prefix, - map.get(m3-bottom-sheet.get-tokens($theme), base)); + @include token-utils.create-token-values(map.get(m3-bottom-sheet.get-tokens($theme), base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - m2-bottom-sheet.$prefix, - m2-bottom-sheet.get-unthemable-tokens() - ); + @include token-utils.create-token-values-mixed(m2-bottom-sheet.get-unthemable-tokens()); } } } @@ -25,12 +20,10 @@ @mixin color($theme) { @if inspection.get-theme-version($theme) == 1 { @include token-utils.create-token-values( - m3-bottom-sheet.$prefix, map.get(m3-bottom-sheet.get-tokens($theme), color)); } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - m2-bottom-sheet.$prefix, m2-bottom-sheet.get-color-tokens($theme) ); } @@ -40,12 +33,10 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include token-utils.create-token-values( - m3-bottom-sheet.$prefix, map.get(m3-bottom-sheet.get-tokens($theme), typography)); } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - m2-bottom-sheet.$prefix, m2-bottom-sheet.get-typography-tokens($theme) ); } @@ -55,7 +46,6 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include token-utils.create-token-values( - m3-bottom-sheet.$prefix, map.get(m3-bottom-sheet.get-tokens($theme), density)); } @else { } @@ -65,14 +55,14 @@ @function _define-overrides() { @return ( ( - namespace: m2-bottom-sheet.$prefix, - tokens: m2-bottom-sheet.get-token-slots(), + namespace: bottom-sheet, + tokens: token-utils.get-overrides(m3-bottom-sheet.get-tokens(), bottom-sheet) ), ); } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values($tokens, _define-overrides()...); + @include token-utils.batch-create-token-values($tokens, _define-overrides()); } @mixin theme($theme) { diff --git a/src/material/bottom-sheet/_m2-bottom-sheet.scss b/src/material/bottom-sheet/_m2-bottom-sheet.scss index 292b1e773aa8..b16feb1e3d25 100644 --- a/src/material/bottom-sheet/_m2-bottom-sheet.scss +++ b/src/material/bottom-sheet/_m2-bottom-sheet.scss @@ -2,34 +2,34 @@ @use '../core/theming/inspection'; @use '../core/style/sass-utils'; -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, bottom-sheet); - // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( // TODO: will be necessary for M3. - container-shape: 4px, + bottom-sheet-container-shape: 4px, ); } // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { @return ( - container-text-color: inspection.get-theme-color($theme, foreground, text), - container-background-color: inspection.get-theme-color($theme, background, dialog), + bottom-sheet-container-text-color: inspection.get-theme-color($theme, foreground, text), + bottom-sheet-container-background-color: inspection.get-theme-color($theme, background, dialog), ); } // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { @return ( - container-text-font: inspection.get-theme-typography($theme, body-2, font-family), - container-text-line-height: inspection.get-theme-typography($theme, body-2, line-height), - container-text-size: inspection.get-theme-typography($theme, body-2, font-size), - container-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing), - container-text-weight: inspection.get-theme-typography($theme, body-2, font-weight), + bottom-sheet-container-text-font: inspection.get-theme-typography($theme, body-2, font-family), + bottom-sheet-container-text-line-height: + inspection.get-theme-typography($theme, body-2, line-height), + bottom-sheet-container-text-size: inspection.get-theme-typography($theme, body-2, font-size), + bottom-sheet-container-text-tracking: + inspection.get-theme-typography($theme, body-2, letter-spacing), + bottom-sheet-container-text-weight: + inspection.get-theme-typography($theme, body-2, font-weight), ); } diff --git a/src/material/bottom-sheet/_m3-bottom-sheet.scss b/src/material/bottom-sheet/_m3-bottom-sheet.scss index f4a3b104bba7..87420eb865bd 100644 --- a/src/material/bottom-sheet/_m3-bottom-sheet.scss +++ b/src/material/bottom-sheet/_m3-bottom-sheet.scss @@ -1,26 +1,24 @@ @use 'sass:map'; @use '../core/tokens/m3-utils'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, bottom-sheet); +@use '../core/tokens/m3'; /// Generates custom tokens for the mat-bottom-sheet. -@function get-tokens($theme) { +@function get-tokens($theme: m3.$sys-theme) { $system: m3-utils.get-system($theme); @return ( base: ( - container-shape: 28px, + bottom-sheet-container-shape: 28px, ), color: ( - container-text-color: map.get($system, on-surface), - container-background-color: map.get($system, surface-container-low), + bottom-sheet-container-text-color: map.get($system, on-surface), + bottom-sheet-container-background-color: map.get($system, surface-container-low), ), typography: ( - container-text-font: map.get($system, body-large-font), - container-text-line-height: map.get($system, body-large-line-height), - container-text-size: map.get($system, body-large-size), - container-text-tracking: map.get($system, body-large-tracking), - container-text-weight: map.get($system, body-large-weight), + bottom-sheet-container-text-font: map.get($system, body-large-font), + bottom-sheet-container-text-line-height: map.get($system, body-large-line-height), + bottom-sheet-container-text-size: map.get($system, body-large-size), + bottom-sheet-container-text-tracking: map.get($system, body-large-tracking), + bottom-sheet-container-text-weight: map.get($system, body-large-weight), ), density: (), ); diff --git a/src/material/bottom-sheet/bottom-sheet-container.scss b/src/material/bottom-sheet/bottom-sheet-container.scss index 02914cc02a7c..8fd8c681664c 100644 --- a/src/material/bottom-sheet/bottom-sheet-container.scss +++ b/src/material/bottom-sheet/bottom-sheet-container.scss @@ -1,9 +1,7 @@ @use '@angular/cdk'; @use '../core/style/elevation'; -@use './m2-bottom-sheet'; @use './m3-bottom-sheet'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m3-system'; // The bottom sheet minimum width on larger screen sizes is based // on increments of the toolbar, according to the spec. See: @@ -12,9 +10,7 @@ $_width-increment: 64px; $container-vertical-padding: 8px !default; $container-horizontal-padding: 16px !default; -$token-prefix: m2-bottom-sheet.$prefix; -$token-slots: m2-bottom-sheet.get-token-slots(); -$fallbacks: m3-bottom-sheet.get-tokens(m3-system.$theme-with-system-vars); +$fallbacks: m3-bottom-sheet.get-tokens(); @keyframes _mat-bottom-sheet-enter { from { @@ -51,15 +47,13 @@ $fallbacks: m3-bottom-sheet.get-tokens(m3-system.$theme-with-system-vars); // elements (e.g. close buttons) inside the bottom sheet. position: relative; - @include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) { - background: token-utils.slot(container-background-color); - color: token-utils.slot(container-text-color); - font-family: token-utils.slot(container-text-font); - font-size: token-utils.slot(container-text-size); - line-height: token-utils.slot(container-text-line-height); - font-weight: token-utils.slot(container-text-weight); - letter-spacing: token-utils.slot(container-text-tracking); - } + background: token-utils.slot(bottom-sheet-container-background-color, $fallbacks); + color: token-utils.slot(bottom-sheet-container-text-color, $fallbacks); + font-family: token-utils.slot(bottom-sheet-container-text-font, $fallbacks); + font-size: token-utils.slot(bottom-sheet-container-text-size, $fallbacks); + line-height: token-utils.slot(bottom-sheet-container-text-line-height, $fallbacks); + font-weight: token-utils.slot(bottom-sheet-container-text-weight, $fallbacks); + letter-spacing: token-utils.slot(bottom-sheet-container-text-tracking, $fallbacks); @include cdk.high-contrast { outline: 1px solid; @@ -80,10 +74,8 @@ $fallbacks: m3-bottom-sheet.get-tokens(m3-system.$theme-with-system-vars); // Applies a border radius to the bottom sheet. Should only be applied when it's not full-screen. %_mat-bottom-sheet-container-border-radius { - @include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) { - border-top-left-radius: token-utils.slot(container-shape); - border-top-right-radius: token-utils.slot(container-shape); - } + border-top-left-radius: token-utils.slot(bottom-sheet-container-shape, $fallbacks); + border-top-right-radius: token-utils.slot(bottom-sheet-container-shape, $fallbacks); } .mat-bottom-sheet-container-medium { diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss index f6f07a2de20b..c5ef7186270f 100644 --- a/src/material/button-toggle/_button-toggle-theme.scss +++ b/src/material/button-toggle/_button-toggle-theme.scss @@ -12,15 +12,10 @@ /// @param {Map} $theme The theme to generate base styles for. @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { - @include token-utils.create-token-values( - m3-button-toggle.$prefix, - map.get(m3-button-toggle.get-tokens($theme), base)); + @include token-utils.create-token-values(map.get(m3-button-toggle.get-tokens($theme), base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - m2-button-toggle.$prefix, - m2-button-toggle.get-unthemable-tokens() - ); + @include token-utils.create-token-values-mixed(m2-button-toggle.get-unthemable-tokens()); } } } @@ -32,12 +27,10 @@ @mixin color($theme, $color-variant: null) { @if inspection.get-theme-version($theme) == 1 { @include token-utils.create-token-values( - m3-button-toggle.$prefix, map.get(m3-button-toggle.get-tokens($theme, $color-variant), color)); } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - m2-button-toggle.$prefix, m2-button-toggle.get-color-tokens($theme) ); } @@ -49,14 +42,11 @@ @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include token-utils.create-token-values( - m3-button-toggle.$prefix, map.get(m3-button-toggle.get-tokens($theme), typography)); } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - m2-button-toggle.$prefix, - m2-button-toggle.get-typography-tokens($theme) - ); + m2-button-toggle.get-typography-tokens($theme)); } } } @@ -66,26 +56,20 @@ @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include token-utils.create-token-values( - m3-button-toggle.$prefix, map.get(m3-button-toggle.get-tokens($theme), density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - m2-button-toggle.$prefix, - m2-button-toggle.get-density-tokens($theme) - ); + @include token-utils.create-token-values-mixed(m2-button-toggle.get-density-tokens($theme)); } } } /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { - $standard-tokens: m2-button-toggle.get-token-slots(); - @return ( ( - namespace: m2-button-toggle.$prefix, - tokens: $standard-tokens, + namespace: button-toggle, + tokens: token-utils.get-overrides(m3-button-toggle.get-tokens(), button-toggle) ), ); } @@ -93,7 +77,7 @@ /// Outputs the CSS variable values for the given tokens. /// @param {Map} $tokens The token values to emit. @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values($tokens, _define-overrides()...); + @include token-utils.batch-create-token-values($tokens, _define-overrides()); } /// Outputs all (base, color, typography, and density) theme styles for the mat-button-toggle. diff --git a/src/material/button-toggle/_m2-button-toggle.scss b/src/material/button-toggle/_m2-button-toggle.scss index 77ab67956945..6235ade542d5 100644 --- a/src/material/button-toggle/_m2-button-toggle.scss +++ b/src/material/button-toggle/_m2-button-toggle.scss @@ -5,19 +5,16 @@ @use '../core/theming/inspection'; @use '../core/style/sass-utils'; -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, button-toggle); - // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( - focus-state-layer-opacity: 0.12, - hover-state-layer-opacity: 0.04, - legacy-focus-state-layer-opacity: 1, - legacy-height: 36px, - legacy-shape: 2px, - shape: 4px, + button-toggle-focus-state-layer-opacity: 0.12, + button-toggle-hover-state-layer-opacity: 0.04, + button-toggle-legacy-focus-state-layer-opacity: 1, + button-toggle-legacy-height: 36px, + button-toggle-legacy-shape: 2px, + button-toggle-shape: 4px, ); } @@ -36,47 +33,58 @@ $prefix: (mat, button-toggle); $theme-divider-color); @return ( - background-color: inspection.get-theme-color($theme, background, card), - disabled-selected-state-background-color: + button-toggle-background-color: inspection.get-theme-color($theme, background, card), + button-toggle-disabled-selected-state-background-color: inspection.get-theme-color($theme, background, selected-disabled-button), - disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text), - disabled-state-background-color: inspection.get-theme-color($theme, background, card), - disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button), - divider-color: $divider-color, - legacy-disabled-selected-state-background-color: + button-toggle-disabled-selected-state-text-color: + inspection.get-theme-color($theme, foreground, text), + button-toggle-disabled-state-background-color: + inspection.get-theme-color($theme, background, card), + button-toggle-disabled-state-text-color: + inspection.get-theme-color($theme, foreground, disabled-button), + button-toggle-divider-color: $divider-color, + button-toggle-legacy-disabled-selected-state-background-color: inspection.get-theme-color($theme, background, selected-disabled-button), - legacy-disabled-state-background-color: + button-toggle-legacy-disabled-state-background-color: inspection.get-theme-color($theme, background, disabled-button-toggle), - legacy-disabled-state-text-color: + button-toggle-legacy-disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button), - legacy-selected-state-background-color: + button-toggle-legacy-selected-state-background-color: inspection.get-theme-color($theme, background, selected-button), - legacy-selected-state-text-color: + button-toggle-legacy-selected-state-text-color: inspection.get-theme-color($theme, foreground, secondary-text), - legacy-state-layer-color: inspection.get-theme-color($theme, background, focused-button), - legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text), - selected-state-background-color: + button-toggle-legacy-state-layer-color: + inspection.get-theme-color($theme, background, focused-button), + button-toggle-legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text), + button-toggle-selected-state-background-color: inspection.get-theme-color($theme, background, selected-button), - selected-state-text-color: inspection.get-theme-color($theme, foreground, text), - state-layer-color: sass-utils.safe-color-change( + button-toggle-selected-state-text-color: inspection.get-theme-color($theme, foreground, text), + button-toggle-state-layer-color: sass-utils.safe-color-change( inspection.get-theme-color($theme, background, focused-button), $alpha: 1), - text-color: inspection.get-theme-color($theme, foreground, text), + button-toggle-text-color: inspection.get-theme-color($theme, foreground, text), ); } // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { @return ( - label-text-font: inspection.get-theme-typography($theme, body-1, font-family), - label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height), - label-text-size: inspection.get-theme-typography($theme, body-1, font-size), - label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing), - label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight), - legacy-label-text-font: inspection.get-theme-typography($theme, body-1, font-family), - legacy-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height), - legacy-label-text-size: inspection.get-theme-typography($theme, body-1, font-size), - legacy-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing), - legacy-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight), + button-toggle-label-text-font: inspection.get-theme-typography($theme, body-1, font-family), + button-toggle-label-text-line-height: + inspection.get-theme-typography($theme, body-1, line-height), + button-toggle-label-text-size: inspection.get-theme-typography($theme, body-1, font-size), + button-toggle-label-text-tracking: + inspection.get-theme-typography($theme, body-1, letter-spacing), + button-toggle-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight), + button-toggle-legacy-label-text-font: + inspection.get-theme-typography($theme, body-1, font-family), + button-toggle-legacy-label-text-line-height: + inspection.get-theme-typography($theme, body-1, line-height), + button-toggle-legacy-label-text-size: + inspection.get-theme-typography($theme, body-1, font-size), + button-toggle-legacy-label-text-tracking: + inspection.get-theme-typography($theme, body-1, letter-spacing), + button-toggle-legacy-label-text-weight: + inspection.get-theme-typography($theme, body-1, font-weight), ); } @@ -92,7 +100,7 @@ $prefix: (mat, button-toggle); ); @return ( - height: map.get($size-scale, $density-scale) + button-toggle-height: map.get($size-scale, $density-scale) ); } diff --git a/src/material/button-toggle/_m3-button-toggle.scss b/src/material/button-toggle/_m3-button-toggle.scss index d02fc08bc61b..75aa278f885f 100644 --- a/src/material/button-toggle/_m3-button-toggle.scss +++ b/src/material/button-toggle/_m3-button-toggle.scss @@ -3,12 +3,10 @@ @use '../core/tokens/m3-utils'; @use '../core/theming/theming'; @use '../core/theming/inspection'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, button-toggle); +@use '../core/tokens/m3'; /// Generates custom tokens for the mat-button-toggle. -@function get-tokens($theme, $color-variant: null) { +@function get-tokens($theme: m3.$sys-theme, $color-variant: null) { $system: m3-utils.get-system($theme); @if $color-variant { $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant); @@ -16,30 +14,47 @@ $prefix: (mat, button-toggle); $tokens: ( base: ( - focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), - hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), - shape: map.get($system, corner-extra-large), + button-toggle-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), + button-toggle-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), + button-toggle-shape: map.get($system, corner-extra-large), + button-toggle-legacy-shape: null, + button-toggle-legacy-selected-state-text-color: null, + button-toggle-legacy-focus-state-layer-opacity: null, + button-toggle-legacy-height: null, ), typography: ( - label-text-font: map.get($system, label-large-font), - label-text-line-height: map.get($system, label-large-line-height), - label-text-size: map.get($system, label-large-size), - label-text-tracking: map.get($system, label-large-tracking), - label-text-weight: map.get($system, label-large-weight), + button-toggle-label-text-font: map.get($system, label-large-font), + button-toggle-label-text-line-height: map.get($system, label-large-line-height), + button-toggle-label-text-size: map.get($system, label-large-size), + button-toggle-label-text-tracking: map.get($system, label-large-tracking), + button-toggle-label-text-weight: map.get($system, label-large-weight), + button-toggle-legacy-label-text-font: null, + button-toggle-legacy-label-text-line-height: null, + button-toggle-legacy-label-text-size: null, + button-toggle-legacy-label-text-tracking: null, + button-toggle-legacy-label-text-weight: null, ), color: ( - background-color: transparent, - disabled-selected-state-background-color: + button-toggle-background-color: transparent, + button-toggle-disabled-selected-state-background-color: m3-utils.color-with-opacity(map.get($system, on-surface), 12%), - disabled-selected-state-text-color: + button-toggle-disabled-selected-state-text-color: + m3-utils.color-with-opacity(map.get($system, on-surface), 38%), + button-toggle-disabled-state-background-color: transparent, + button-toggle-disabled-state-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%), - disabled-state-background-color: transparent, - disabled-state-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%), - divider-color: map.get($system, outline), - selected-state-background-color: map.get($system, secondary-container), - selected-state-text-color: map.get($system, on-secondary-container), - state-layer-color: map.get($system, on-surface), - text-color: map.get($system, on-surface), + button-toggle-divider-color: map.get($system, outline), + button-toggle-selected-state-background-color: map.get($system, secondary-container), + button-toggle-selected-state-text-color: map.get($system, on-secondary-container), + button-toggle-state-layer-color: map.get($system, on-surface), + button-toggle-text-color: map.get($system, on-surface), + button-toggle-legacy-disabled-selected-state-background-color: null, + button-toggle-legacy-disabled-state-background-color: null, + button-toggle-legacy-disabled-state-text-color: null, + button-toggle-legacy-selected-state-background-color: null, + button-toggle-legacy-selected-state-text-color: null, + button-toggle-legacy-state-layer-color: null, + button-toggle-legacy-text-color: null, ), density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)), ); @@ -53,6 +68,6 @@ $prefix: (mat, button-toggle); $index: ($scale * -1) + 1; @return ( - height: list.nth((40px, 40px, 40px, 36px, 24px), $index), + button-toggle-height: list.nth((40px, 40px, 40px, 36px, 24px), $index), ); } diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss index cce337b1077b..9245d028ca53 100644 --- a/src/material/button-toggle/button-toggle.scss +++ b/src/material/button-toggle/button-toggle.scss @@ -4,9 +4,7 @@ @use '../core/style/layout-common'; @use '../core/style/elevation'; @use '../core/tokens/token-utils'; -@use './m2-button-toggle'; @use './m3-button-toggle'; -@use '../core/tokens/m3-system'; $standard-padding: 12px !default; $legacy-padding: 16px !default; @@ -19,365 +17,365 @@ $legacy-height: 36px !default; $standard-border-radius: 4px !default; $legacy-border-radius: 2px !default; -$token-prefix: m2-button-toggle.$prefix; -$token-slots: m2-button-toggle.get-token-slots(); -$fallbacks: m3-button-toggle.get-tokens(m3-system.$theme-with-system-vars); +$fallbacks: m3-button-toggle.get-tokens(); -@include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) { - .mat-button-toggle-standalone, - .mat-button-toggle-group { - position: relative; - display: inline-flex; - flex-direction: row; - white-space: nowrap; - overflow: hidden; - -webkit-tap-highlight-color: transparent; - border-radius: token-utils.slot(legacy-shape); +.mat-button-toggle-standalone, +.mat-button-toggle-group { + position: relative; + display: inline-flex; + flex-direction: row; + white-space: nowrap; + overflow: hidden; + -webkit-tap-highlight-color: transparent; + border-radius: token-utils.slot(button-toggle-legacy-shape, $fallbacks); - // Fixes the ripples not being clipped to the border radius on Safari. - transform: translateZ(0); + // Fixes the ripples not being clipped to the border radius on Safari. + transform: translateZ(0); - @include elevation.overridable-elevation(2); + @include elevation.overridable-elevation(2); - @include cdk.high-contrast { - outline: solid 1px; - } + @include cdk.high-contrast { + outline: solid 1px; } +} - .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, - .mat-button-toggle-group-appearance-standard { - border-radius: token-utils.slot(shape); - border: solid 1px token-utils.slot(divider-color); - - .mat-pseudo-checkbox { - --mat-pseudo-checkbox-minimal-selected-checkmark-color: #{ - token-utils.slot(selected-state-text-color)}; - } - - &:not([class*='mat-elevation-z']) { - box-shadow: none; - } +.mat-button-toggle-standalone.mat-button-toggle-appearance-standard, +.mat-button-toggle-group-appearance-standard { + border-radius: token-utils.slot(button-toggle-shape, $fallbacks); + border: solid 1px token-utils.slot(button-toggle-divider-color, $fallbacks); - @include cdk.high-contrast { - outline: 0; - } + .mat-pseudo-checkbox { + --mat-pseudo-checkbox-minimal-selected-checkmark-color: #{ + token-utils.slot(button-toggle-selected-state-text-color, $fallbacks)}; } - .mat-button-toggle-vertical { - flex-direction: column; + &:not([class*='mat-elevation-z']) { + box-shadow: none; + } - .mat-button-toggle-label-content { - // Vertical button toggles shouldn't be an inline-block, because the toggles should - // fill the available width in the group. - display: block; - } + @include cdk.high-contrast { + outline: 0; } +} - .mat-button-toggle { - white-space: nowrap; - position: relative; - color: token-utils.slot(legacy-text-color); - font-family: token-utils.slot(legacy-label-text-font); - font-size: token-utils.slot(legacy-label-text-size); - line-height: token-utils.slot(legacy-label-text-line-height); - font-weight: token-utils.slot(legacy-label-text-weight); - letter-spacing: token-utils.slot(legacy-label-text-tracking); +.mat-button-toggle-vertical { + flex-direction: column; - --mat-pseudo-checkbox-minimal-selected-checkmark-color: #{ - token-utils.slot(legacy-selected-state-text-color)}; + .mat-button-toggle-label-content { + // Vertical button toggles shouldn't be an inline-block, because the toggles should + // fill the available width in the group. + display: block; + } +} - &.cdk-keyboard-focused .mat-button-toggle-focus-overlay { - opacity: token-utils.slot(legacy-focus-state-layer-opacity); - } +.mat-button-toggle { + white-space: nowrap; + position: relative; + color: token-utils.slot(button-toggle-legacy-text-color, $fallbacks); + font-family: token-utils.slot(button-toggle-legacy-label-text-font, $fallbacks); + font-size: token-utils.slot(button-toggle-legacy-label-text-size, $fallbacks); + line-height: token-utils.slot(button-toggle-legacy-label-text-line-height, $fallbacks); + font-weight: token-utils.slot(button-toggle-legacy-label-text-weight, $fallbacks); + letter-spacing: token-utils.slot(button-toggle-legacy-label-text-tracking, $fallbacks); + + --mat-pseudo-checkbox-minimal-selected-checkmark-color: #{ + token-utils.slot(button-toggle-legacy-selected-state-text-color, $fallbacks)}; + + &.cdk-keyboard-focused .mat-button-toggle-focus-overlay { + opacity: token-utils.slot(button-toggle-legacy-focus-state-layer-opacity, $fallbacks); + } - // Fixes SVG icons that get thrown off because of the `vertical-align` on the parent. - .mat-icon svg { - vertical-align: top; - } + // Fixes SVG icons that get thrown off because of the `vertical-align` on the parent. + .mat-icon svg { + vertical-align: top; } +} - .mat-button-toggle-checkbox-wrapper { - display: inline-block; - justify-content: flex-start; - align-items: center; - width: 0; - height: $_checkmark-size; - line-height: $_checkmark-size; - overflow: hidden; - box-sizing: border-box; - position: absolute; - top: 50%; - left: $legacy-padding; - - // Uses a 3d transform, because otherwise Safari has some some of rendering - // artifact that adds a small gap between the two parts of the checkmark. - transform: translate3d(0, -50%, 0); - - [dir='rtl'] & { - left: auto; - right: $legacy-padding; - } +.mat-button-toggle-checkbox-wrapper { + display: inline-block; + justify-content: flex-start; + align-items: center; + width: 0; + height: $_checkmark-size; + line-height: $_checkmark-size; + overflow: hidden; + box-sizing: border-box; + position: absolute; + top: 50%; + left: $legacy-padding; + + // Uses a 3d transform, because otherwise Safari has some some of rendering + // artifact that adds a small gap between the two parts of the checkmark. + transform: translate3d(0, -50%, 0); + + [dir='rtl'] & { + left: auto; + right: $legacy-padding; + } - .mat-button-toggle-appearance-standard & { - left: $standard-padding; - } + .mat-button-toggle-appearance-standard & { + left: $standard-padding; + } - [dir='rtl'] .mat-button-toggle-appearance-standard & { - left: auto; - right: $standard-padding; - } + [dir='rtl'] .mat-button-toggle-appearance-standard & { + left: auto; + right: $standard-padding; + } - .mat-button-toggle-checked & { - width: $_checkmark-size; - } + .mat-button-toggle-checked & { + width: $_checkmark-size; + } - .mat-button-toggle-animations-enabled & { - transition: width $_checkmark-transition; - } + .mat-button-toggle-animations-enabled & { + transition: width $_checkmark-transition; + } - // Disable the transition in vertical mode since it looks weird. - // There should be a limited amount of usages anyway. - .mat-button-toggle-vertical & { - transition: none; - } + // Disable the transition in vertical mode since it looks weird. + // There should be a limited amount of usages anyway. + .mat-button-toggle-vertical & { + transition: none; } +} - .mat-button-toggle-checked { - color: token-utils.slot(legacy-selected-state-text-color); - background-color: token-utils.slot(legacy-selected-state-background-color); +.mat-button-toggle-checked { + color: token-utils.slot(button-toggle-legacy-selected-state-text-color, $fallbacks); + background-color: token-utils.slot( + button-toggle-legacy-selected-state-background-color, $fallbacks); +} + +.mat-button-toggle-disabled { + pointer-events: none; + color: token-utils.slot(button-toggle-legacy-disabled-state-text-color, $fallbacks); + background-color: token-utils.slot( + button-toggle-legacy-disabled-state-background-color, $fallbacks); + --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: #{ + token-utils.slot(button-toggle-legacy-disabled-state-text-color, $fallbacks)}; + + &.mat-button-toggle-checked { + background-color: token-utils.slot( + button-toggle-legacy-disabled-selected-state-background-color, $fallbacks); } +} - .mat-button-toggle-disabled { - pointer-events: none; - color: token-utils.slot(legacy-disabled-state-text-color); - background-color: token-utils.slot(legacy-disabled-state-background-color); - --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: #{ - token-utils.slot(legacy-disabled-state-text-color)}; +.mat-button-toggle-disabled-interactive { + pointer-events: auto; +} - &.mat-button-toggle-checked { - background-color: token-utils.slot(legacy-disabled-selected-state-background-color); - } +.mat-button-toggle-appearance-standard { + $divider-color: token-utils.slot(button-toggle-divider-color, $fallbacks); + color: token-utils.slot(button-toggle-text-color, $fallbacks); + background-color: token-utils.slot(button-toggle-background-color, $fallbacks); + font-family: token-utils.slot(button-toggle-label-text-font, $fallbacks); + font-size: token-utils.slot(button-toggle-label-text-size, $fallbacks); + line-height: token-utils.slot(button-toggle-label-text-line-height, $fallbacks); + font-weight: token-utils.slot(button-toggle-label-text-weight, $fallbacks); + letter-spacing: token-utils.slot(button-toggle-label-text-tracking, $fallbacks); + + .mat-button-toggle-group-appearance-standard & + & { + border-left: solid 1px $divider-color; } - .mat-button-toggle-disabled-interactive { - pointer-events: auto; + [dir='rtl'] .mat-button-toggle-group-appearance-standard & + & { + border-left: none; + border-right: solid 1px $divider-color; } - .mat-button-toggle-appearance-standard { - $divider-color: token-utils.slot(divider-color); - color: token-utils.slot(text-color); - background-color: token-utils.slot(background-color); - font-family: token-utils.slot(label-text-font); - font-size: token-utils.slot(label-text-size); - line-height: token-utils.slot(label-text-line-height); - font-weight: token-utils.slot(label-text-weight); - letter-spacing: token-utils.slot(label-text-tracking); + .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical & + & { + border-left: none; + border-right: none; + border-top: solid 1px $divider-color; + } - .mat-button-toggle-group-appearance-standard & + & { - border-left: solid 1px $divider-color; - } + &.mat-button-toggle-checked { + color: token-utils.slot(button-toggle-selected-state-text-color, $fallbacks); + background-color: token-utils.slot(button-toggle-selected-state-background-color, $fallbacks); + } - [dir='rtl'] .mat-button-toggle-group-appearance-standard & + & { - border-left: none; - border-right: solid 1px $divider-color; - } + &.mat-button-toggle-disabled { + color: token-utils.slot(button-toggle-disabled-state-text-color, $fallbacks); + background-color: token-utils.slot(button-toggle-disabled-state-background-color, $fallbacks); - .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical & + & { - border-left: none; - border-right: none; - border-top: solid 1px $divider-color; + .mat-pseudo-checkbox { + --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: #{ + token-utils.slot(button-toggle-disabled-selected-state-text-color, $fallbacks)}; } &.mat-button-toggle-checked { - color: token-utils.slot(selected-state-text-color); - background-color: token-utils.slot(selected-state-background-color); + color: token-utils.slot(button-toggle-disabled-selected-state-text-color, $fallbacks); + background-color: token-utils.slot( + button-toggle-disabled-selected-state-background-color, $fallbacks); } + } - &.mat-button-toggle-disabled { - color: token-utils.slot(disabled-state-text-color); - background-color: token-utils.slot(disabled-state-background-color); - - .mat-pseudo-checkbox { - --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: #{ - token-utils.slot(disabled-selected-state-text-color)}; - } + .mat-button-toggle-focus-overlay { + background-color: token-utils.slot(button-toggle-state-layer-color, $fallbacks); + } - &.mat-button-toggle-checked { - color: token-utils.slot(disabled-selected-state-text-color); - background-color: token-utils.slot(disabled-selected-state-background-color); - } - } + &:hover .mat-button-toggle-focus-overlay { + opacity: token-utils.slot(button-toggle-hover-state-layer-opacity, $fallbacks); + } - .mat-button-toggle-focus-overlay { - background-color: token-utils.slot(state-layer-color); - } + // Similar to components like the checkbox, slide-toggle and radio, we cannot show the focus + // overlay for `.cdk-program-focused` because mouse clicks on the