From 7463dd9d718c2faafe5480714243c85b93aaebf1 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Sun, 30 Mar 2025 11:01:58 -0600 Subject: [PATCH 1/2] refactor: merge m2 mdc and mat tokens --- src/material/button/_button-theme.scss | 140 -------- src/material/button/_fab-theme.scss | 63 +--- src/material/button/_icon-button-theme.scss | 21 +- src/material/button/button.scss | 32 +- src/material/button/fab.scss | 22 +- src/material/button/icon-button.scss | 5 +- src/material/card/_card-theme.scss | 52 +-- src/material/card/card.scss | 16 +- src/material/checkbox/_checkbox-common.scss | 6 +- src/material/checkbox/_checkbox-theme.scss | 39 +-- src/material/chips/_chips-theme.scss | 35 -- src/material/chips/chip.scss | 21 +- src/material/core/option/option.scss | 4 +- src/material/core/tokens/m2/_index.scss | 70 ++-- src/material/core/tokens/m2/mat/_card.scss | 11 - .../core/tokens/m2/mat/_checkbox.scss | 76 ++++- src/material/core/tokens/m2/mat/_chip.scss | 82 ++++- .../m2/{mdc => mat}/_circular-progress.scss | 14 - src/material/core/tokens/m2/mat/_dialog.scss | 30 +- .../m2/{mdc => mat}/_elevated-card.scss | 26 -- .../tokens/m2/{mdc => mat}/_extended-fab.scss | 34 -- .../core/tokens/m2/mat/_fab-small.scss | 45 +-- src/material/core/tokens/m2/mat/_fab.scss | 45 +-- .../core/tokens/m2/mat/_filled-button.scss | 56 ++-- .../m2/{mdc => mat}/_filled-text-field.scss | 67 ---- .../core/tokens/m2/mat/_icon-button.scss | 47 +-- .../m2/{mdc => mat}/_linear-progress.scss | 1 - src/material/core/tokens/m2/mat/_list.scss | 95 +++++- .../core/tokens/m2/mat/_outlined-button.scss | 66 ++-- .../m2/{mdc => mat}/_outlined-card.scss | 33 -- .../m2/{mdc => mat}/_outlined-text-field.scss | 63 ---- .../m2/{mdc => mat}/_plain-tooltip.scss | 10 - .../core/tokens/m2/mat/_protected-button.scss | 66 ++-- src/material/core/tokens/m2/mat/_radio.scss | 43 ++- .../_secondary-navigation-tab.scss | 29 -- src/material/core/tokens/m2/mat/_slider.scss | 60 +++- .../core/tokens/m2/mat/_snack-bar.scss | 19 +- src/material/core/tokens/m2/mat/_stepper.scss | 27 -- src/material/core/tokens/m2/mat/_switch.scss | 139 ++++++-- .../m2/{mdc => mat}/_tab-indicator.scss | 0 .../core/tokens/m2/mat/_text-button.scss | 53 ++- .../core/tokens/m2/mat/_tonal-button.scss | 20 -- .../core/tokens/m2/mdc/_checkbox.scss | 136 -------- src/material/core/tokens/m2/mdc/_chip.scss | 313 ------------------ src/material/core/tokens/m2/mdc/_dialog.scss | 106 ------ .../core/tokens/m2/mdc/_fab-small.scss | 89 ----- src/material/core/tokens/m2/mdc/_fab.scss | 90 ----- .../core/tokens/m2/mdc/_filled-button.scss | 118 ------- .../core/tokens/m2/mdc/_icon-button.scss | 88 ----- src/material/core/tokens/m2/mdc/_list.scss | 219 ------------ .../core/tokens/m2/mdc/_outlined-button.scss | 120 ------- .../core/tokens/m2/mdc/_protected-button.scss | 126 ------- src/material/core/tokens/m2/mdc/_radio.scss | 93 ------ src/material/core/tokens/m2/mdc/_slider.scss | 144 -------- .../core/tokens/m2/mdc/_snack-bar.scss | 93 ------ src/material/core/tokens/m2/mdc/_switch.scss | 192 ----------- .../core/tokens/m2/mdc/_text-button.scss | 95 ------ src/material/dialog/_dialog-theme.scss | 21 -- src/material/dialog/dialog.scss | 13 +- .../form-field/_form-field-theme.scss | 60 ++-- .../form-field/_mdc-text-field-structure.scss | 12 +- .../list/_list-inherited-structure.scss | 4 +- src/material/list/_list-theme.scss | 56 +--- src/material/list/list.scss | 3 +- .../progress-bar/_progress-bar-theme.scss | 18 +- src/material/progress-bar/progress-bar.scss | 30 +- .../_progress-spinner-theme.scss | 26 +- .../progress-spinner/progress-spinner.scss | 10 +- src/material/radio/_radio-common.scss | 4 +- src/material/radio/_radio-theme.scss | 31 -- src/material/radio/radio.scss | 3 +- .../slide-toggle/_slide-toggle-theme.scss | 53 ++- src/material/slide-toggle/slide-toggle.scss | 30 +- src/material/slider/_slider-theme.scss | 31 +- src/material/slider/slider.scss | 26 +- src/material/snack-bar/_snack-bar-theme.scss | 21 +- .../snack-bar/snack-bar-container.scss | 9 +- src/material/tabs/_tabs-common.scss | 16 +- src/material/tabs/_tabs-theme.scss | 52 +-- src/material/toolbar/toolbar.scss | 8 +- src/material/tooltip/_tooltip-theme.scss | 26 +- src/material/tooltip/tooltip.scss | 6 +- 82 files changed, 1033 insertions(+), 3341 deletions(-) rename src/material/core/tokens/m2/{mdc => mat}/_circular-progress.scss (64%) rename src/material/core/tokens/m2/{mdc => mat}/_elevated-card.scss (59%) rename src/material/core/tokens/m2/{mdc => mat}/_extended-fab.scss (58%) rename src/material/core/tokens/m2/{mdc => mat}/_filled-text-field.scss (65%) rename src/material/core/tokens/m2/{mdc => mat}/_linear-progress.scss (97%) rename src/material/core/tokens/m2/{mdc => mat}/_outlined-card.scss (55%) rename src/material/core/tokens/m2/{mdc => mat}/_outlined-text-field.scss (63%) rename src/material/core/tokens/m2/{mdc => mat}/_plain-tooltip.scss (83%) rename src/material/core/tokens/m2/{mdc => mat}/_secondary-navigation-tab.scss (62%) rename src/material/core/tokens/m2/{mdc => mat}/_tab-indicator.scss (100%) delete mode 100644 src/material/core/tokens/m2/mdc/_checkbox.scss delete mode 100644 src/material/core/tokens/m2/mdc/_chip.scss delete mode 100644 src/material/core/tokens/m2/mdc/_dialog.scss delete mode 100644 src/material/core/tokens/m2/mdc/_fab-small.scss delete mode 100644 src/material/core/tokens/m2/mdc/_fab.scss delete mode 100644 src/material/core/tokens/m2/mdc/_filled-button.scss delete mode 100644 src/material/core/tokens/m2/mdc/_icon-button.scss delete mode 100644 src/material/core/tokens/m2/mdc/_list.scss delete mode 100644 src/material/core/tokens/m2/mdc/_outlined-button.scss delete mode 100644 src/material/core/tokens/m2/mdc/_protected-button.scss delete mode 100644 src/material/core/tokens/m2/mdc/_radio.scss delete mode 100644 src/material/core/tokens/m2/mdc/_slider.scss delete mode 100644 src/material/core/tokens/m2/mdc/_snack-bar.scss delete mode 100644 src/material/core/tokens/m2/mdc/_switch.scss delete mode 100644 src/material/core/tokens/m2/mdc/_text-button.scss diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index 4f17bb5583ed..0b5fb1447079 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -3,82 +3,50 @@ @use '../core/theming/validation'; @use '../core/tokens/token-utils'; @use '../core/typography/typography'; -@use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button; @use '../core/tokens/m2/mat/filled-button' as tokens-mat-filled-button; -@use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button; @use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button; -@use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button; @use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button; -@use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button; @use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button; @use '../core/tokens/m2/mat/tonal-button' as tokens-mat-tonal-button; @use '../core/style/sass-utils'; @mixin _text-button-variant($theme, $palette) { - $mdc-tokens: if( - $palette, - tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, $palette), - tokens-mdc-text-button.get-color-tokens($theme) - ); - $mat-tokens: if( $palette, tokens-mat-text-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-text-button.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mdc-text-button.$prefix, $mdc-tokens); @include token-utils.create-token-values-mixed(tokens-mat-text-button.$prefix, $mat-tokens); } @mixin _filled-button-variant($theme, $palette) { - $mdc-tokens: if( - $palette, - tokens-mdc-filled-button.private-get-color-palette-color-tokens($theme, $palette), - tokens-mdc-filled-button.get-color-tokens($theme) - ); - $mat-tokens: if( $palette, tokens-mat-filled-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-filled-button.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mdc-filled-button.$prefix, $mdc-tokens); @include token-utils.create-token-values-mixed(tokens-mat-filled-button.$prefix, $mat-tokens); } @mixin _protected-button-variant($theme, $palette) { - $mdc-tokens: if( - $palette, - tokens-mdc-protected-button.private-get-color-palette-color-tokens($theme, $palette), - tokens-mdc-protected-button.get-color-tokens($theme) - ); - $mat-tokens: if( $palette, tokens-mat-protected-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-protected-button.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mdc-protected-button.$prefix, $mdc-tokens); @include token-utils.create-token-values-mixed(tokens-mat-protected-button.$prefix, $mat-tokens); } @mixin _outlined-button-variant($theme, $palette) { - $mdc-tokens: if( - $palette, - tokens-mdc-outlined-button.private-get-color-palette-color-tokens($theme, $palette), - tokens-mdc-outlined-button.get-color-tokens($theme) - ); - $mat-tokens: if( $palette, tokens-mat-outlined-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-outlined-button.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mdc-outlined-button.$prefix, $mdc-tokens); @include token-utils.create-token-values-mixed(tokens-mat-outlined-button.$prefix, $mat-tokens); } @@ -95,26 +63,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mdc-text-button-tokens: token-utils.get-tokens-for( - $tokens, - tokens-mdc-text-button.$prefix, - $options... - ); - $mdc-protected-button-tokens: token-utils.get-tokens-for( - $tokens, - tokens-mdc-protected-button.$prefix, - $options... - ); - $mdc-filled-button-tokens: token-utils.get-tokens-for( - $tokens, - tokens-mdc-filled-button.$prefix, - $options... - ); - $mdc-outlined-button-tokens: token-utils.get-tokens-for( - $tokens, - tokens-mdc-outlined-button.$prefix, - $options... - ); $mat-text-button-tokens: token-utils.get-tokens-for( $tokens, tokens-mat-text-button.$prefix, @@ -141,19 +89,6 @@ $options... ); - @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-text-button-tokens); - @include token-utils.create-token-values( - tokens-mdc-protected-button.$prefix, - $mdc-protected-button-tokens - ); - @include token-utils.create-token-values( - tokens-mdc-filled-button.$prefix, - $mdc-filled-button-tokens - ); - @include token-utils.create-token-values( - tokens-mdc-outlined-button.$prefix, - $mdc-outlined-button-tokens - ); @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens); @include token-utils.create-token-values( tokens-mat-protected-button.$prefix, @@ -181,23 +116,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-text-button.$prefix, - tokens-mdc-text-button.get-unthemable-tokens() - ); - @include token-utils.create-token-values-mixed( - tokens-mdc-filled-button.$prefix, - tokens-mdc-filled-button.get-unthemable-tokens() - ); - @include token-utils.create-token-values-mixed( - tokens-mdc-protected-button.$prefix, - tokens-mdc-protected-button.get-unthemable-tokens() - ); - @include token-utils.create-token-values-mixed( - tokens-mdc-outlined-button.$prefix, - tokens-mdc-outlined-button.get-unthemable-tokens() - ); - @include token-utils.create-token-values-mixed( tokens-mat-text-button.$prefix, tokens-mat-text-button.get-unthemable-tokens() @@ -318,23 +236,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-text-button.$prefix, - tokens-mdc-text-button.get-typography-tokens($theme) - ); - @include token-utils.create-token-values-mixed( - tokens-mdc-filled-button.$prefix, - tokens-mdc-filled-button.get-typography-tokens($theme) - ); - @include token-utils.create-token-values-mixed( - tokens-mdc-protected-button.$prefix, - tokens-mdc-protected-button.get-typography-tokens($theme) - ); - @include token-utils.create-token-values-mixed( - tokens-mdc-outlined-button.$prefix, - tokens-mdc-outlined-button.get-typography-tokens($theme) - ); - @include token-utils.create-token-values-mixed( tokens-mat-text-button.$prefix, tokens-mat-text-button.get-typography-tokens($theme) @@ -366,23 +267,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-text-button.$prefix, - tokens-mdc-text-button.get-density-tokens($theme) - ); - @include token-utils.create-token-values-mixed( - tokens-mdc-filled-button.$prefix, - tokens-mdc-filled-button.get-density-tokens($theme) - ); - @include token-utils.create-token-values-mixed( - tokens-mdc-protected-button.$prefix, - tokens-mdc-protected-button.get-density-tokens($theme) - ); - @include token-utils.create-token-values-mixed( - tokens-mdc-outlined-button.$prefix, - tokens-mdc-outlined-button.get-density-tokens($theme) - ); - @include token-utils.create-token-values-mixed( tokens-mat-text-button.$prefix, tokens-mat-text-button.get-density-tokens($theme) @@ -409,52 +293,28 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { - $mdc-filled-button-tokens: tokens-mdc-filled-button.get-token-slots(); $mat-filled-button-tokens: tokens-mat-filled-button.get-token-slots(); - $mdc-outlined-button-tokens: tokens-mdc-outlined-button.get-token-slots(); $mat-outlined-button-tokens: tokens-mat-outlined-button.get-token-slots(); - $mdc-protected-button-tokens: tokens-mdc-protected-button.get-token-slots(); $mat-protected-button-tokens: tokens-mat-protected-button.get-token-slots(); - $mdc-text-button-tokens: tokens-mdc-text-button.get-token-slots(); $mat-text-button-tokens: tokens-mat-text-button.get-token-slots(); $mat-tonal-button-tokens: tokens-mat-tonal-button.get-token-slots(); @return ( - ( - namespace: tokens-mdc-filled-button.$prefix, - tokens: $mdc-filled-button-tokens, - prefix: 'filled-', - ), ( namespace: tokens-mat-filled-button.$prefix, tokens: $mat-filled-button-tokens, prefix: 'filled-', ), - ( - namespace: tokens-mdc-outlined-button.$prefix, - tokens: $mdc-outlined-button-tokens, - prefix: 'outlined-', - ), ( namespace: tokens-mat-outlined-button.$prefix, tokens: $mat-outlined-button-tokens, prefix: 'outlined-', ), - ( - namespace: tokens-mdc-protected-button.$prefix, - tokens: $mdc-protected-button-tokens, - prefix: 'protected-', - ), ( namespace: tokens-mat-protected-button.$prefix, tokens: $mat-protected-button-tokens, prefix: 'protected-', ), - ( - namespace: tokens-mdc-text-button.$prefix, - tokens: $mdc-text-button-tokens, - prefix: 'text-', - ), ( namespace: tokens-mat-text-button.$prefix, tokens: $mat-text-button-tokens, diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss index 6794595502cf..7330794bb607 100644 --- a/src/material/button/_fab-theme.scss +++ b/src/material/button/_fab-theme.scss @@ -2,9 +2,7 @@ @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/theming/validation'; -@use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab; -@use '../core/tokens/m2/mdc/fab-small' as tokens-mdc-fab-small; -@use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab; +@use '../core/tokens/m2/mat/extended-fab' as tokens-mat-extended-fab; @use '../core/tokens/m2/mat/fab' as tokens-mat-fab; @use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small; @use '../core/tokens/token-utils'; @@ -19,52 +17,38 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-fab.$prefix, - tokens-mdc-fab.get-unthemable-tokens() + tokens-mat-fab.$prefix, + tokens-mat-fab.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mdc-fab-small.$prefix, - tokens-mdc-fab-small.get-unthemable-tokens() + tokens-mat-fab-small.$prefix, + tokens-mat-fab-small.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mdc-extended-fab.$prefix, - tokens-mdc-extended-fab.get-unthemable-tokens() + tokens-mat-extended-fab.$prefix, + tokens-mat-extended-fab.get-unthemable-tokens() ); } } } @mixin _fab-variant($theme, $palette) { - $mdc-tokens: if( - $palette, - tokens-mdc-fab.private-get-color-palette-color-tokens($theme, $palette), - tokens-mdc-fab.get-color-tokens($theme) - ); - $mat-tokens: if( $palette, tokens-mat-fab.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-fab.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mdc-fab.$prefix, $mdc-tokens); @include token-utils.create-token-values-mixed(tokens-mat-fab.$prefix, $mat-tokens); } @mixin _fab-small-variant($theme, $palette) { - $mdc-tokens: if( - $palette, - tokens-mdc-fab-small.private-get-color-palette-color-tokens($theme, $palette), - tokens-mdc-fab-small.get-color-tokens($theme) - ); - $mat-tokens: if( $palette, tokens-mat-fab-small.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-fab-small.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mdc-fab-small.$prefix, $mdc-tokens); @include token-utils.create-token-values-mixed(tokens-mat-fab-small.$prefix, $mat-tokens); } @@ -81,8 +65,8 @@ @include _fab-variant($theme, null); @include _fab-small-variant($theme, null); @include token-utils.create-token-values-mixed( - tokens-mdc-extended-fab.$prefix, - tokens-mdc-extended-fab.get-color-tokens($theme) + tokens-mat-extended-fab.$prefix, + tokens-mat-extended-fab.get-color-tokens($theme) ); .mat-mdc-fab { @@ -124,8 +108,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-extended-fab.$prefix, - tokens-mdc-extended-fab.get-typography-tokens($theme) + tokens-mat-extended-fab.$prefix, + tokens-mat-extended-fab.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( tokens-mat-fab.$prefix, @@ -162,17 +146,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mdc-fab.$prefix, - tokens: tokens-mdc-fab.get-token-slots(), - ), - ( - namespace: tokens-mdc-fab-small.$prefix, - tokens: tokens-mdc-fab-small.get-token-slots(), - prefix: 'small-', - ), - ( - namespace: tokens-mdc-extended-fab.$prefix, - tokens: tokens-mdc-extended-fab.get-token-slots(), + namespace: tokens-mat-extended-fab.$prefix, + tokens: tokens-mat-extended-fab.get-token-slots(), prefix: 'extended-', ), ( @@ -223,13 +198,7 @@ ); $mdc-extended-fab-tokens: token-utils.get-tokens-for( $tokens, - tokens-mdc-extended-fab.$prefix, - $options... - ); - $mdc-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab.$prefix, $options...); - $mdc-fab-small-tokens: token-utils.get-tokens-for( - $tokens, - tokens-mdc-fab-small.$prefix, + tokens-mat-extended-fab.$prefix, $options... ); $mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...); @@ -239,11 +208,9 @@ $options... ); @include token-utils.create-token-values( - tokens-mdc-extended-fab.$prefix, + tokens-mat-extended-fab.$prefix, $mdc-extended-fab-tokens ); - @include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-fab-tokens); - @include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-fab-small-tokens); @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens); @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-fab-small-tokens); } diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index 60518988f90c..030bcdb53070 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -1,6 +1,5 @@ @use 'sass:map'; @use 'sass:math'; -@use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button; @use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; @@ -15,27 +14,20 @@ // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-icon-button.$prefix, - tokens-mdc-icon-button.get-unthemable-tokens() + tokens-mat-icon-button.$prefix, + tokens-mat-icon-button.get-unthemable-tokens() ); } } } @mixin _icon-button-variant($theme, $palette) { - $mdc-tokens: if( - $palette, - tokens-mdc-icon-button.private-get-color-palette-color-tokens($theme, $palette), - tokens-mdc-icon-button.get-color-tokens($theme) - ); - $mat-tokens: if( $palette, tokens-mat-icon-button.private-get-color-palette-color-tokens($theme, $palette), tokens-mat-icon-button.get-color-tokens($theme) ); - @include token-utils.create-token-values-mixed(tokens-mdc-icon-button.$prefix, $mdc-tokens); @include token-utils.create-token-values-mixed(tokens-mat-icon-button.$prefix, $mat-tokens); } @@ -99,7 +91,8 @@ @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( tokens-mat-icon-button.$prefix, - tokens-mat-icon-button.get-density-tokens($theme) + tokens-mat-icon-button.get-density-tokens( + $theme, $exclude: (state-layer-size)) ); } @@ -125,10 +118,6 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { @return ( - ( - namespace: tokens-mdc-icon-button.$prefix, - tokens: tokens-mdc-icon-button.get-token-slots(), - ), ( namespace: tokens-mat-icon-button.$prefix, tokens: tokens-mat-icon-button.get-token-slots(), @@ -168,10 +157,8 @@ 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); @if ($tokens != ()) { - $mdc-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-icon-button.$prefix, $options...); $mat-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon-button.$prefix, $options...); - @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, $mdc-tokens); @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens); } } diff --git a/src/material/button/button.scss b/src/material/button/button.scss index c52a44a78d09..fb886fea157e 100644 --- a/src/material/button/button.scss +++ b/src/material/button/button.scss @@ -3,13 +3,9 @@ @use '../core/style/vendor-prefixes'; @use '../core/tokens/token-utils'; @use '../core/focus-indicators/private' as focus-indicators-private; -@use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button; @use '../core/tokens/m2/mat/filled-button' as tokens-mat-filled-button; -@use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button; @use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button; -@use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button; @use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button; -@use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button; @use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button; @use '../core/tokens/m2/mat/tonal-button' as tokens-mat-tonal-button; @@ -69,8 +65,8 @@ } @include token-utils.use-tokens( - tokens-mdc-text-button.$prefix, - tokens-mdc-text-button.get-token-slots() + tokens-mat-text-button.$prefix, + tokens-mat-text-button.get-token-slots() ) { @include token-utils.create-token-slot(height, container-height); @include token-utils.create-token-slot(font-family, label-text-font); @@ -107,8 +103,8 @@ transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); @include token-utils.use-tokens( - tokens-mdc-filled-button.$prefix, - tokens-mdc-filled-button.get-token-slots() + tokens-mat-filled-button.$prefix, + tokens-mat-filled-button.get-token-slots() ) { @include token-utils.create-token-slot(height, container-height); @include token-utils.create-token-slot(font-family, label-text-font); @@ -130,8 +126,8 @@ $mat-filled-button-slots); @include token-utils.use-tokens( - tokens-mdc-filled-button.$prefix, - tokens-mdc-filled-button.get-token-slots() + tokens-mat-filled-button.$prefix, + tokens-mat-filled-button.get-token-slots() ) { &:not(:disabled) { @include token-utils.create-token-slot(color, label-text-color); @@ -156,8 +152,8 @@ transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); @include token-utils.use-tokens( - tokens-mdc-protected-button.$prefix, - tokens-mdc-protected-button.get-token-slots() + tokens-mat-protected-button.$prefix, + tokens-mat-protected-button.get-token-slots() ) { @include button-base.mat-private-button-elevation(container-elevation); @include token-utils.create-token-slot(height, container-height); @@ -183,8 +179,8 @@ $mat-protected-button-slots); @include token-utils.use-tokens( - tokens-mdc-protected-button.$prefix, - tokens-mdc-protected-button.get-token-slots() + tokens-mat-protected-button.$prefix, + tokens-mat-protected-button.get-token-slots() ) { &:not(:disabled) { @include token-utils.create-token-slot(color, label-text-color); @@ -226,8 +222,8 @@ transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1); @include token-utils.use-tokens( - tokens-mdc-outlined-button.$prefix, - tokens-mdc-outlined-button.get-token-slots() + tokens-mat-outlined-button.$prefix, + tokens-mat-outlined-button.get-token-slots() ) { @include token-utils.create-token-slot(height, container-height); @include token-utils.create-token-slot(font-family, label-text-font); @@ -251,8 +247,8 @@ $mat-outlined-button-slots); @include token-utils.use-tokens( - tokens-mdc-outlined-button.$prefix, - tokens-mdc-outlined-button.get-token-slots() + tokens-mat-outlined-button.$prefix, + tokens-mat-outlined-button.get-token-slots() ) { &:not(:disabled) { @include token-utils.create-token-slot(color, label-text-color); diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss index 44efdd4e5c9a..013e60d4a945 100644 --- a/src/material/button/fab.scss +++ b/src/material/button/fab.scss @@ -3,10 +3,8 @@ @use '../core/style/private' as style-private; @use '../core/style/vendor-prefixes'; @use '../core/focus-indicators/private' as focus-indicators-private; -@use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab; -@use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab; +@use '../core/tokens/m2/mat/extended-fab' as tokens-mat-extended-fab; @use '../core/tokens/m2/mat/fab' as tokens-mat-fab; -@use '../core/tokens/m2/mdc/fab-small' as tokens-mdc-fab-small; @use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small; .mat-mdc-fab-base { @@ -96,8 +94,8 @@ } } -@mixin _fab-elevation($mdc-tokens) { - @include token-utils.use-tokens($mdc-tokens...) { +@mixin _fab-elevation($mat-tokens) { + @include token-utils.use-tokens($mat-tokens...) { @include token-utils.create-token-slot(box-shadow, container-elevation-shadow); &:hover { @@ -114,8 +112,8 @@ } } -@mixin _fab-structure($mdc-tokens, $mat-tokens) { - @include token-utils.use-tokens($mdc-tokens...) { +@mixin _fab-structure($mat-tokens) { + @include token-utils.use-tokens($mat-tokens...) { @include token-utils.create-token-slot(background-color, container-color); @include token-utils.create-token-slot(border-radius, container-shape); } @@ -124,7 +122,7 @@ @include token-utils.create-token-slot(color, foreground-color, inherit); } - @include _fab-elevation($mdc-tokens); + @include _fab-elevation($mat-tokens); @include button-base.mat-private-button-disabled { @include token-utils.use-tokens($mat-tokens...) { @@ -139,7 +137,6 @@ .mat-mdc-fab { @include _fab-structure( - (tokens-mdc-fab.$prefix, tokens-mdc-fab.get-token-slots()), (tokens-mat-fab.$prefix, tokens-mat-fab.get-token-slots()), ); } @@ -149,13 +146,12 @@ height: 40px; @include _fab-structure( - (tokens-mdc-fab-small.$prefix, tokens-mdc-fab-small.get-token-slots()), (tokens-mat-fab-small.$prefix, tokens-mat-fab-small.get-token-slots()), ); } .mat-mdc-extended-fab { - $mdc-tokens: (tokens-mdc-extended-fab.$prefix, tokens-mdc-extended-fab.get-token-slots()); + $mat-tokens: (tokens-mat-extended-fab.$prefix, tokens-mat-extended-fab.get-token-slots()); // Before tokens MDC included the font smoothing automatically, but with // tokens it doesn't. We add it since it can cause tiny differences in @@ -168,7 +164,7 @@ max-width: 100%; line-height: normal; - @include token-utils.use-tokens($mdc-tokens...) { + @include token-utils.use-tokens($mat-tokens...) { @include token-utils.create-token-slot(height, container-height); @include token-utils.create-token-slot(border-radius, container-shape); @include token-utils.create-token-slot(font-family, label-text-font); @@ -177,7 +173,7 @@ @include token-utils.create-token-slot(letter-spacing, label-text-tracking); } - @include _fab-elevation($mdc-tokens); + @include _fab-elevation($mat-tokens); @include button-base.mat-private-button-disabled { // Necessary for interactive disabled buttons. diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss index 03f56e21520e..5f847146ee5b 100644 --- a/src/material/button/icon-button.scss +++ b/src/material/button/icon-button.scss @@ -1,4 +1,3 @@ -@use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button; @use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button; @use './button-base'; @@ -32,7 +31,7 @@ text-align: center; @include token-utils.use-tokens( - tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) { + tokens-mat-icon-button.$prefix, tokens-mat-icon-button.get-token-slots()) { $button-size: token-utils.get-token-variable(state-layer-size, $fallback: 48px); $icon-size: token-utils.get-token-variable(icon-size, $fallback: 24px); @@ -59,7 +58,7 @@ @include private.private-animation-noop(); @include token-utils.use-tokens( - tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) { + tokens-mat-icon-button.$prefix, tokens-mat-icon-button.get-token-slots()) { @include button-base.mat-private-button-disabled { @include token-utils.create-token-slot(color, disabled-icon-color); }; diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss index 012f2c9185e5..41a8338648a1 100644 --- a/src/material/card/_card-theme.scss +++ b/src/material/card/_card-theme.scss @@ -6,8 +6,8 @@ @use '../core/typography/typography'; @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/card' as tokens-mat-card; -@use '../core/tokens/m2/mdc/elevated-card' as tokens-mdc-elevated-card; -@use '../core/tokens/m2/mdc/outlined-card' as tokens-mdc-outlined-card; +@use '../core/tokens/m2/mat/elevated-card' as tokens-mat-elevated-card; +@use '../core/tokens/m2/mat/outlined-card' as tokens-mat-outlined-card; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -15,12 +15,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-elevated-card.$prefix, - tokens-mdc-elevated-card.get-unthemable-tokens() + tokens-mat-elevated-card.$prefix, + tokens-mat-elevated-card.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mdc-outlined-card.$prefix, - tokens-mdc-outlined-card.get-unthemable-tokens() + tokens-mat-outlined-card.$prefix, + tokens-mat-outlined-card.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( tokens-mat-card.$prefix, @@ -36,12 +36,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-elevated-card.$prefix, - tokens-mdc-elevated-card.get-color-tokens($theme) + tokens-mat-elevated-card.$prefix, + tokens-mat-elevated-card.get-color-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mdc-outlined-card.$prefix, - tokens-mdc-outlined-card.get-color-tokens($theme) + tokens-mat-outlined-card.$prefix, + tokens-mat-outlined-card.get-color-tokens($theme) ); @include token-utils.create-token-values-mixed( tokens-mat-card.$prefix, @@ -57,12 +57,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-elevated-card.$prefix, - tokens-mdc-elevated-card.get-typography-tokens($theme) + tokens-mat-elevated-card.$prefix, + tokens-mat-elevated-card.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mdc-outlined-card.$prefix, - tokens-mdc-outlined-card.get-typography-tokens($theme) + tokens-mat-outlined-card.$prefix, + tokens-mat-outlined-card.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( tokens-mat-card.$prefix, @@ -78,12 +78,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-elevated-card.$prefix, - tokens-mdc-elevated-card.get-density-tokens($theme) + tokens-mat-elevated-card.$prefix, + tokens-mat-elevated-card.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mdc-outlined-card.$prefix, - tokens-mdc-outlined-card.get-density-tokens($theme) + tokens-mat-outlined-card.$prefix, + tokens-mat-outlined-card.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( tokens-mat-card.$prefix, @@ -101,13 +101,13 @@ tokens: tokens-mat-card.get-token-slots(), ), ( - namespace: tokens-mdc-elevated-card.$prefix, - tokens: tokens-mdc-elevated-card.get-token-slots(), + namespace: tokens-mat-elevated-card.$prefix, + tokens: tokens-mat-elevated-card.get-token-slots(), prefix: 'elevated-', ), ( - namespace: tokens-mdc-outlined-card.$prefix, - tokens: tokens-mdc-outlined-card.get-token-slots(), + namespace: tokens-mat-outlined-card.$prefix, + tokens: tokens-mat-outlined-card.get-token-slots(), prefix: 'outlined-', ), ); @@ -142,12 +142,12 @@ ); @if ($tokens != ()) { @include token-utils.create-token-values( - tokens-mdc-elevated-card.$prefix, - map.get($tokens, tokens-mdc-elevated-card.$prefix) + tokens-mat-elevated-card.$prefix, + map.get($tokens, tokens-mat-elevated-card.$prefix) ); @include token-utils.create-token-values( - tokens-mdc-outlined-card.$prefix, - map.get($tokens, tokens-mdc-outlined-card.$prefix) + tokens-mat-outlined-card.$prefix, + map.get($tokens, tokens-mat-outlined-card.$prefix) ); @include token-utils.create-token-values( tokens-mat-card.$prefix, diff --git a/src/material/card/card.scss b/src/material/card/card.scss index 21ae1ee38b42..e392ffc162cc 100644 --- a/src/material/card/card.scss +++ b/src/material/card/card.scss @@ -1,7 +1,7 @@ @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/card' as tokens-mat-card; -@use '../core/tokens/m2/mdc/elevated-card' as tokens-mdc-elevated-card; -@use '../core/tokens/m2/mdc/outlined-card' as tokens-mdc-outlined-card; +@use '../core/tokens/m2/mat/elevated-card' as tokens-mat-elevated-card; +@use '../core/tokens/m2/mat/outlined-card' as tokens-mat-outlined-card; // Size of the `mat-card-header` region custom to Angular Material. $mat-card-header-size: 40px !default; @@ -18,8 +18,8 @@ $mat-card-default-padding: 16px !default; border-width: 0; @include token-utils.use-tokens( - tokens-mdc-elevated-card.$prefix, - tokens-mdc-elevated-card.get-token-slots() + tokens-mat-elevated-card.$prefix, + tokens-mat-elevated-card.get-token-slots() ) { @include token-utils.create-token-slot(background-color, container-color); @include token-utils.create-token-slot(border-color, container-color); @@ -41,8 +41,8 @@ $mat-card-default-padding: 16px !default; box-sizing: border-box; @include token-utils.use-tokens( - tokens-mdc-elevated-card.$prefix, - tokens-mdc-elevated-card.get-token-slots() + tokens-mat-elevated-card.$prefix, + tokens-mat-elevated-card.get-token-slots() ) { @include token-utils.create-token-slot(border-radius, container-shape); } @@ -51,8 +51,8 @@ $mat-card-default-padding: 16px !default; .mat-mdc-card-outlined { @include token-utils.use-tokens( - tokens-mdc-outlined-card.$prefix, - tokens-mdc-outlined-card.get-token-slots() + tokens-mat-outlined-card.$prefix, + tokens-mat-outlined-card.get-token-slots() ) { @include token-utils.create-token-slot(background-color, container-color); @include token-utils.create-token-slot(border-radius, container-shape); diff --git a/src/material/checkbox/_checkbox-common.scss b/src/material/checkbox/_checkbox-common.scss index bf97e1c6fa09..db576bdac9e6 100644 --- a/src/material/checkbox/_checkbox-common.scss +++ b/src/material/checkbox/_checkbox-common.scss @@ -1,6 +1,6 @@ @use 'sass:math'; @use '@angular/cdk'; -@use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox; +@use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox; @use '../core/tokens/token-utils'; @use '../core/style/vendor-prefixes'; @@ -16,8 +16,8 @@ $_fallback-size: 40px; // Structural styles for a checkbox. Shared with the selection list. @mixin checkbox-structure($include-state-layer-styles) { - $prefix: tokens-mdc-checkbox.$prefix; - $slots: tokens-mdc-checkbox.get-token-slots(); + $prefix: tokens-mat-checkbox.$prefix; + $slots: tokens-mat-checkbox.get-token-slots(); .mdc-checkbox { display: inline-block; diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss index da1b555ae4df..05120ca0155d 100644 --- a/src/material/checkbox/_checkbox-theme.scss +++ b/src/material/checkbox/_checkbox-theme.scss @@ -4,7 +4,6 @@ @use '../core/theming/validation'; @use '../core/tokens/token-utils'; @use '../core/typography/typography'; -@use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox; @use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) @@ -15,10 +14,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-checkbox.$prefix, - tokens-mdc-checkbox.get-unthemable-tokens() - ); @include token-utils.create-token-values-mixed( tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-unthemable-tokens() @@ -37,10 +32,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-checkbox.$prefix, - tokens-mdc-checkbox.get-color-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-color-tokens($theme) @@ -50,15 +41,17 @@ .mat-mdc-checkbox { &.mat-primary { @include token-utils.create-token-values-mixed( - tokens-mdc-checkbox.$prefix, - tokens-mdc-checkbox.get-color-tokens($theme, primary) + tokens-mat-checkbox.$prefix, + tokens-mat-checkbox.get-color-tokens($theme, primary, + $exclude: (disabled-label-color, label-text-color)) ); } &.mat-warn { @include token-utils.create-token-values-mixed( - tokens-mdc-checkbox.$prefix, - tokens-mdc-checkbox.get-color-tokens($theme, warn) + tokens-mat-checkbox.$prefix, + tokens-mat-checkbox.get-color-tokens($theme, warn, + $exclude: (disabled-label-color, label-text-color)) ); } } @@ -72,10 +65,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-checkbox.$prefix, - tokens-mdc-checkbox.get-typography-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-typography-tokens($theme) @@ -93,10 +82,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-checkbox.$prefix, - tokens-mdc-checkbox.get-density-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-density-tokens($theme) @@ -112,10 +97,6 @@ namespace: tokens-mat-checkbox.$prefix, tokens: tokens-mat-checkbox.get-token-slots(), ), - ( - namespace: tokens-mdc-checkbox.$prefix, - tokens: tokens-mdc-checkbox.get-token-slots(), - ), ); } @@ -153,14 +134,10 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mdc-checkbox-tokens: token-utils.get-tokens-for( + $mat-checkbox-tokens: token-utils.get-tokens-for( $tokens, - tokens-mdc-checkbox.$prefix, + tokens-mat-checkbox.$prefix, $options... ); - // Don't pass $options here, since the mdc-checkbox doesn't support color options, - // only the mdc-checkbox does. - $mat-checkbox-tokens: token-utils.get-tokens-for($tokens, tokens-mat-checkbox.$prefix); - @include token-utils.create-token-values(tokens-mdc-checkbox.$prefix, $mdc-checkbox-tokens); @include token-utils.create-token-values(tokens-mat-checkbox.$prefix, $mat-checkbox-tokens); } diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss index 2ba7e4e15750..8bde60a55d36 100644 --- a/src/material/chips/_chips-theme.scss +++ b/src/material/chips/_chips-theme.scss @@ -1,5 +1,4 @@ @use 'sass:color'; -@use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip; @use '../core/tokens/m2/mat/chip' as tokens-mat-chip; @use '../core/tokens/token-utils'; @use '../core/theming/theming'; @@ -15,10 +14,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { .mat-mdc-standard-chip { - @include token-utils.create-token-values-mixed( - tokens-mdc-chip.$prefix, - tokens-mdc-chip.get-unthemable-tokens() - ); @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-unthemable-tokens() @@ -37,10 +32,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { .mat-mdc-standard-chip { - @include token-utils.create-token-values-mixed( - tokens-mdc-chip.$prefix, - tokens-mdc-chip.get-color-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme) @@ -49,10 +40,6 @@ &.mat-mdc-chip-selected, &.mat-mdc-chip-highlighted { &.mat-primary { - @include token-utils.create-token-values-mixed( - tokens-mdc-chip.$prefix, - tokens-mdc-chip.get-color-tokens($theme, primary) - ); @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, primary) @@ -60,10 +47,6 @@ } &.mat-accent { - @include token-utils.create-token-values-mixed( - tokens-mdc-chip.$prefix, - tokens-mdc-chip.get-color-tokens($theme, accent) - ); @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, accent) @@ -71,10 +54,6 @@ } &.mat-warn { - @include token-utils.create-token-values-mixed( - tokens-mdc-chip.$prefix, - tokens-mdc-chip.get-color-tokens($theme, warn) - ); @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, warn) @@ -92,10 +71,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { .mat-mdc-standard-chip { - @include token-utils.create-token-values-mixed( - tokens-mdc-chip.$prefix, - tokens-mdc-chip.get-typography-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-typography-tokens($theme) @@ -111,10 +86,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { .mat-mdc-chip.mat-mdc-standard-chip { - @include token-utils.create-token-values-mixed( - tokens-mdc-chip.$prefix, - tokens-mdc-chip.get-density-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-density-tokens($theme) @@ -126,10 +97,6 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { @return ( - ( - namespace: tokens-mdc-chip.$prefix, - tokens: tokens-mdc-chip.get-token-slots(), - ), ( namespace: tokens-mat-chip.$prefix, tokens: tokens-mat-chip.get-token-slots(), @@ -171,8 +138,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mdc-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-chip.$prefix, $options...); $mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix, $options...); - @include token-utils.create-token-values(tokens-mdc-chip.$prefix, $mdc-chip-tokens); @include token-utils.create-token-values(tokens-mat-chip.$prefix, $mat-chip-tokens); } diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index da5b851c1380..4f9c553653e8 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -1,7 +1,6 @@ @use '@angular/cdk'; @use '../core/style/layout-common'; @use '../core/focus-indicators/private' as focus-indicators-private; -@use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip; @use '../core/tokens/m2/mat/chip' as tokens-mat-chip; @use '../core/style/vendor-prefixes'; @use '../core/tokens/token-utils'; @@ -75,7 +74,7 @@ $_avatar-trailing-padding: 8px; white-space: inherit; overflow-x: hidden; - @include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) { + @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { .mat-mdc-standard-chip &::before { @include token-utils.create-token-slot(border-width, outline-width); @include token-utils.create-token-slot(border-radius, container-shape-radius); @@ -178,7 +177,7 @@ $_avatar-trailing-padding: 8px; position: relative; overflow: visible; - @include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) { + @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & { @include token-utils.create-token-slot(color, with-trailing-icon-trailing-icon-color); } @@ -222,7 +221,7 @@ $_avatar-trailing-padding: 8px; text-overflow: ellipsis; overflow: hidden; - @include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) { + @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { .mat-mdc-standard-chip & { @include token-utils.create-token-slot(font-family, label-text-font); @include token-utils.create-token-slot(line-height, label-text-line-height); @@ -255,7 +254,7 @@ $_avatar-trailing-padding: 8px; position: relative; flex: 1 0 auto; - @include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) { + @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { .mat-mdc-standard-chip & { @include token-utils.create-token-slot(width, with-avatar-avatar-size); @include token-utils.create-token-slot(height, with-avatar-avatar-size); @@ -315,7 +314,7 @@ $_avatar-trailing-padding: 8px; height: $_checkmark-size; width: $_checkmark-size; - @include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) { + @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) & { @include token-utils.create-token-slot(color, with-icon-selected-icon-color); } @@ -371,7 +370,7 @@ $_avatar-trailing-padding: 8px; } $disabled-icon-opacity: null; - @include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) { + @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { $disabled-icon-opacity: token-utils.get-token-variable(with-trailing-icon-disabled-trailing-icon-opacity); } @@ -392,7 +391,7 @@ $_avatar-trailing-padding: 8px; } .mat-mdc-standard-chip { - @include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) { + @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { @include token-utils.create-token-slot(border-radius, container-shape-radius); @include token-utils.create-token-slot(height, container-height); @@ -420,7 +419,7 @@ $_avatar-trailing-padding: 8px; } .mdc-evolution-chip__icon--primary { - @include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) { + @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { .mat-mdc-standard-chip & { @include token-utils.create-token-slot(border-radius, with-avatar-avatar-shape-radius); @include token-utils.create-token-slot(width, with-icon-icon-size); @@ -448,7 +447,7 @@ $_avatar-trailing-padding: 8px; // that we don't re-implement ourselves below. // TODO(crisbeto): with some future refactors we may be able to clean this up. .mat-mdc-chip-highlighted { - @include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) { + @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { $highlighted-remapped-tokens: ( with-icon-icon-color: with-icon-selected-icon-color, elevated-container-color: elevated-selected-container-color, @@ -463,7 +462,7 @@ $_avatar-trailing-padding: 8px; } // Add additional slots for the MDC chip tokens, needed in Angular Material. -@include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) { +@include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) { .mat-mdc-chip-focus-overlay { @include token-utils.create-token-slot(background, focus-state-layer-color); diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss index 18ef14e69fe6..facc73777180 100644 --- a/src/material/core/option/option.scss +++ b/src/material/core/option/option.scss @@ -1,7 +1,7 @@ @use '@angular/cdk'; @use '../tokens/m2/mat/option' as tokens-mat-option; -@use '../tokens/m2/mdc/list' as tokens-mdc-list; +@use '../tokens/m2/mat/list' as tokens-mat-list; @use '../tokens/token-utils'; @use '../style/vendor-prefixes'; @use '../style/layout-common'; @@ -186,7 +186,7 @@ $_side-padding: 16px; // because the checkbox already indicates that they're selected. This happened to work in M2, // due to `list-item-selected-container-color` being the same as `list-item-container-color`, // but that's no longer the case in M3. This overrides ensures that the appearance is consistent. - @include token-utils.use-tokens(tokens-mdc-list.$prefix, tokens-mdc-list.get-token-slots()) { + @include token-utils.use-tokens(tokens-mat-list.$prefix, tokens-mat-list.get-token-slots()) { $selected-token: token-utils.get-token-variable-name(list-item-selected-container-color); $base-token: token-utils.get-token-variable(list-item-container-color, $fallback: transparent); #{$selected-token}: $base-token; diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss index ada2482ff850..b44a30b53f0c 100644 --- a/src/material/core/tokens/m2/_index.scss +++ b/src/material/core/tokens/m2/_index.scss @@ -46,31 +46,16 @@ @use './mat/tree' as tokens-mat-tree; @use './mat/timepicker' as tokens-mat-timepicker; @use './mat/tonal-button' as tokens-mat-tonal-button; -@use './mdc/checkbox' as tokens-mdc-checkbox; -@use './mdc/text-button' as tokens-mdc-text-button; -@use './mdc/protected-button' as tokens-mdc-protected-button; -@use './mdc/filled-button' as tokens-mdc-filled-button; -@use './mdc/outlined-button' as tokens-mdc-outlined-button; -@use './mdc/chip' as tokens-mdc-chip; -@use './mdc/circular-progress' as tokens-mdc-circular-progress; -@use './mdc/dialog' as tokens-mdc-dialog; -@use './mdc/elevated-card' as tokens-mdc-elevated-card; -@use './mdc/extended-fab' as tokens-mdc-extended-fab; -@use './mdc/fab' as tokens-mdc-fab; -@use './mdc/fab-small' as tokens-mdc-fab-small; -@use './mdc/filled-text-field' as tokens-mdc-filled-text-field; -@use './mdc/icon-button' as tokens-mdc-icon-button; -@use './mdc/linear-progress' as tokens-mdc-linear-progress; -@use './mdc/list' as tokens-mdc-list; -@use './mdc/outlined-card' as tokens-mdc-outlined-card; -@use './mdc/outlined-text-field' as tokens-mdc-outlined-text-field; -@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip; -@use './mdc/radio' as tokens-mdc-radio; -@use './mdc/slider' as tokens-mdc-slider; -@use './mdc/snack-bar' as tokens-mdc-snack-bar; -@use './mdc/switch' as tokens-mdc-switch; -@use './mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab; -@use './mdc/tab-indicator' as tokens-mdc-tab-indicator; +@use './mat/circular-progress' as tokens-mat-circular-progress; +@use './mat/elevated-card' as tokens-mat-elevated-card; +@use './mat/extended-fab' as tokens-mat-extended-fab; +@use './mat/filled-text-field' as tokens-mat-filled-text-field; +@use './mat/linear-progress' as tokens-mat-linear-progress; +@use './mat/outlined-card' as tokens-mat-outlined-card; +@use './mat/outlined-text-field' as tokens-mat-outlined-text-field; +@use './mat/plain-tooltip' as tokens-mat-plain-tooltip; +@use './mat/secondary-navigation-tab' as tokens-mat-secondary-navigation-tab; +@use './mat/tab-indicator' as tokens-mat-tab-indicator; @use '../../theming/inspection'; /// Gets the tokens for the given theme, m2 tokens module, and theming system. @@ -160,30 +145,15 @@ _get-tokens-for-module($theme, tokens-mat-tree), _get-tokens-for-module($theme, tokens-mat-timepicker), _get-tokens-for-module($theme, tokens-mat-tonal-button), - _get-tokens-for-module($theme, tokens-mdc-checkbox), - _get-tokens-for-module($theme, tokens-mdc-chip), - _get-tokens-for-module($theme, tokens-mdc-circular-progress), - _get-tokens-for-module($theme, tokens-mdc-dialog), - _get-tokens-for-module($theme, tokens-mdc-elevated-card), - _get-tokens-for-module($theme, tokens-mdc-extended-fab), - _get-tokens-for-module($theme, tokens-mdc-fab), - _get-tokens-for-module($theme, tokens-mdc-fab-small), - _get-tokens-for-module($theme, tokens-mdc-filled-button), - _get-tokens-for-module($theme, tokens-mdc-filled-text-field), - _get-tokens-for-module($theme, tokens-mdc-icon-button), - _get-tokens-for-module($theme, tokens-mdc-linear-progress), - _get-tokens-for-module($theme, tokens-mdc-list), - _get-tokens-for-module($theme, tokens-mdc-outlined-button), - _get-tokens-for-module($theme, tokens-mdc-outlined-card), - _get-tokens-for-module($theme, tokens-mdc-outlined-text-field), - _get-tokens-for-module($theme, tokens-mdc-plain-tooltip), - _get-tokens-for-module($theme, tokens-mdc-protected-button), - _get-tokens-for-module($theme, tokens-mdc-radio), - _get-tokens-for-module($theme, tokens-mdc-slider), - _get-tokens-for-module($theme, tokens-mdc-snack-bar), - _get-tokens-for-module($theme, tokens-mdc-switch), - _get-tokens-for-module($theme, tokens-mdc-tab-indicator), - _get-tokens-for-module($theme, tokens-mdc-secondary-navigation-tab), - _get-tokens-for-module($theme, tokens-mdc-text-button) + _get-tokens-for-module($theme, tokens-mat-circular-progress), + _get-tokens-for-module($theme, tokens-mat-elevated-card), + _get-tokens-for-module($theme, tokens-mat-extended-fab), + _get-tokens-for-module($theme, tokens-mat-filled-text-field), + _get-tokens-for-module($theme, tokens-mat-linear-progress), + _get-tokens-for-module($theme, tokens-mat-outlined-card), + _get-tokens-for-module($theme, tokens-mat-outlined-text-field), + _get-tokens-for-module($theme, tokens-mat-plain-tooltip), + _get-tokens-for-module($theme, tokens-mat-tab-indicator), + _get-tokens-for-module($theme, tokens-mat-secondary-navigation-tab), ); } diff --git a/src/material/core/tokens/m2/mat/_card.scss b/src/material/core/tokens/m2/mat/_card.scss index 20ea73bdc779..dad56f120481 100644 --- a/src/material/core/tokens/m2/mat/_card.scss +++ b/src/material/core/tokens/m2/mat/_card.scss @@ -14,7 +14,6 @@ $prefix: (mat, card); // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { @return ( - // Text color of the card's subtitle. subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text), ); } @@ -22,25 +21,15 @@ $prefix: (mat, card); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { @return ( - // Font family of the card's title. title-text-font: inspection.get-theme-typography($theme, headline-6, font-family), - // Line height of the card's title. title-text-line-height: inspection.get-theme-typography($theme, headline-6, line-height), - // Font size of the card's title. title-text-size: inspection.get-theme-typography($theme, headline-6, font-size), - // Letter spacing of the card's title. title-text-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing), - // Font weight of the card's title. title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight), - // Font family of the card's subtitle. subtitle-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family), - // Line height of the card's subtitle. subtitle-text-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height), - // Font size of the card's subtitle. subtitle-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size), - // Letter spacing of the card's subtitle. subtitle-text-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing), - // Font weight of the card's subtitle. subtitle-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight), ); } diff --git a/src/material/core/tokens/m2/mat/_checkbox.scss b/src/material/core/tokens/m2/mat/_checkbox.scss index 2b345d559dae..47a57bcf3f91 100644 --- a/src/material/core/tokens/m2/mat/_checkbox.scss +++ b/src/material/core/tokens/m2/mat/_checkbox.scss @@ -1,7 +1,10 @@ +@use 'sass:map'; @use '../../token-definition'; @use '../../../theming/theming'; @use '../../../theming/inspection'; @use '../../../style/sass-utils'; +@use '../../../m2/theming' as m2-theming; +@use '../../../m2/palette' as m2-palette; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, checkbox); @@ -9,15 +12,68 @@ $prefix: (mat, checkbox); // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @function get-unthemable-tokens() { - @return (); + @return ( + disabled-selected-checkmark-color: #fff, + selected-focus-state-layer-opacity: 0.16, + selected-hover-state-layer-opacity: 0.04, + selected-pressed-state-layer-opacity: 0.16, + unselected-focus-state-layer-opacity: 0.16, + unselected-hover-state-layer-opacity: 0.04, + unselected-pressed-state-layer-opacity: 0.16, + ); } // Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - @return ( +@function get-color-tokens($theme, $palette-name: accent, $exclude: ()) { + $is-dark: inspection.get-theme-type($theme) == dark; + $foreground-base: inspection.get-theme-color($theme, foreground, base); + $palette-default: inspection.get-theme-color($theme, $palette-name, default); + $disabled-color: sass-utils.safe-color-change( + inspection.get-theme-color($theme, foreground, base), $alpha: 0.38); + $palette-selected: inspection.get-theme-color($theme, $palette-name); + $border-color: sass-utils.safe-color-change( + inspection.get-theme-color($theme, foreground, base), $alpha: 0.54); + $active-border-color: + m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900)); + $selected-checkmark-color: null; + + // Ideally we would derive all values directly from the theme, but it causes a lot of regressions + // internally. For now we fall back to the old hardcoded behavior only for internal apps. + @if (token-definition.$private-is-internal-build) { + $contrast-tone: token-definition.contrast-tone($palette-selected, $is-dark); + $selected-checkmark-color: if($contrast-tone == 'dark', #000, #fff); + } + @else { + $selected-checkmark-color: + inspection.get-theme-color($theme, $palette-name, default-contrast, 1); + } + + $tokens: ( disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text), - label-text-color: inspection.get-theme-color($theme, foreground, text) + label-text-color: inspection.get-theme-color($theme, foreground, text), + disabled-selected-icon-color: $disabled-color, + disabled-unselected-icon-color: $disabled-color, + selected-checkmark-color: $selected-checkmark-color, + selected-focus-icon-color: $palette-selected, + selected-hover-icon-color: $palette-selected, + selected-icon-color: $palette-selected, + selected-pressed-icon-color: $palette-selected, + unselected-focus-icon-color: $active-border-color, + unselected-hover-icon-color: $active-border-color, + unselected-icon-color: $border-color, + selected-focus-state-layer-color: $palette-default, + selected-hover-state-layer-color: $palette-default, + selected-pressed-state-layer-color: $palette-default, + unselected-focus-state-layer-color: $foreground-base, + unselected-hover-state-layer-color: $foreground-base, + unselected-pressed-state-layer-color: $foreground-base, ); + + @each $token in $exclude { + $tokens: map.remove($tokens, $token); + } + + @return $tokens; } // Tokens that can be configured through Angular Material's typography theming API. @@ -33,9 +89,17 @@ $prefix: (mat, checkbox); // Tokens that can be configured through Angular Material's density theming API. @function get-density-tokens($theme) { - $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3); + $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); - @return (touch-target-display: if($density-scale < -1, none, block)); + @return ( + touch-target-display: if($scale < -1, none, block), + state-layer-size: map.get(( + 0: 40px, + -1: 36px, + -2: 32px, + -3: 28px, + ), $scale) + ); } // Combines the tokens generated by the above functions into a single map with placeholder values. diff --git a/src/material/core/tokens/m2/mat/_chip.scss b/src/material/core/tokens/m2/mat/_chip.scss index 2cf95dfa2cbe..ee048f4895ef 100644 --- a/src/material/core/tokens/m2/mat/_chip.scss +++ b/src/material/core/tokens/m2/mat/_chip.scss @@ -1,8 +1,11 @@ @use 'sass:map'; +@use 'sass:meta'; +@use 'sass:color'; @use '../../token-definition'; @use '../../../theming/inspection'; @use '../../../style/sass-utils'; @use '../../../m2/palette' as m2-palette; +@use '../../../theming/theming'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, chip); @@ -11,44 +14,105 @@ $prefix: (mat, chip); // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( + container-shape-radius: 16px, disabled-container-opacity: 0.4, - trailing-action-opacity: 0.54, - trailing-action-focus-opacity: 1, - trailing-action-state-layer-color: transparent, + disabled-outline-color: transparent, + flat-selected-outline-width: 0, + focus-outline-color: transparent, + hover-state-layer-opacity: 0.04, + outline-color: transparent, + outline-width: 0, + selected-hover-state-layer-opacity: 0.04, selected-trailing-action-state-layer-color: transparent, - trailing-action-hover-state-layer-opacity: 0, + trailing-action-focus-opacity: 1, trailing-action-focus-state-layer-opacity: 0, + trailing-action-hover-state-layer-opacity: 0, + trailing-action-opacity: 0.54, + trailing-action-state-layer-color: transparent, + with-avatar-avatar-shape-radius: 14px, + with-avatar-avatar-size: 28px, + with-avatar-disabled-avatar-opacity: 1, + with-icon-disabled-icon-opacity: 1, + with-icon-icon-size: 18px, + with-trailing-icon-disabled-trailing-icon-opacity: 1, ); } // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme, $palette-name: null) { $foreground: null; + $background: null; + $state-layer-color: inspection.get-theme-color($theme, foreground, base); + $state-layer-opacity: 0.12; // 0.12 is a common value in Material Design for opacity. + $surface: inspection.get-theme-color($theme, background, card); + @if $palette-name == null { $is-dark: inspection.get-theme-type($theme) == dark; $grey-50: map.get(m2-palette.$grey-palette, 50); $grey-900: map.get(m2-palette.$grey-palette, 900); $foreground: if($is-dark, $grey-50, $grey-900); + + $surface: inspection.get-theme-color($theme, background, card); + $background: if( + meta.type-of($state-layer-color) == color and meta.type-of($surface) == color, + color.mix($state-layer-color, $surface, 12%), + $state-layer-color + ); } @else { + $background: inspection.get-theme-color($theme, $palette-name); $foreground: inspection.get-theme-color($theme, $palette-name, default-contrast); } @return ( - // The color of the icon at the end of a disabled chip. + disabled-label-text-color: $foreground, + elevated-container-color: $background, + elevated-disabled-container-color: $background, + elevated-selected-container-color: $background, + flat-disabled-selected-container-color: $background, + focus-state-layer-color: $state-layer-color, + focus-state-layer-opacity: $state-layer-opacity, + hover-state-layer-color: $state-layer-color, + label-text-color: $foreground, selected-disabled-trailing-icon-color: $foreground, - // The color of the icon at the end of the chip. - selected-trailing-icon-color: $foreground + selected-focus-state-layer-color: $state-layer-color, + selected-focus-state-layer-opacity: $state-layer-opacity, + selected-hover-state-layer-color: $state-layer-color, + selected-label-text-color: $foreground, + selected-trailing-icon-color: $foreground, + with-icon-disabled-icon-color: $foreground, + with-icon-icon-color: $foreground, + with-icon-selected-icon-color: $foreground, + with-trailing-icon-disabled-trailing-icon-color: $foreground, + with-trailing-icon-trailing-icon-color: $foreground, ); } // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, body-2, font-family), + label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height), + label-text-size: inspection.get-theme-typography($theme, body-2, font-size), + label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight) + ); } // Tokens that can be configured through Angular Material's density theming API. @function get-density-tokens($theme) { - @return (); + $scale: theming.clamp-density(inspection.get-theme-density($theme), -2); + @return ( + // The height of the chip. + container-height: + map.get( + ( + 0: 32px, + -1: 28px, + -2: 24px, + ), + $scale + ) + ); } // Combines the tokens generated by the above functions into a single map with placeholder values. diff --git a/src/material/core/tokens/m2/mdc/_circular-progress.scss b/src/material/core/tokens/m2/mat/_circular-progress.scss similarity index 64% rename from src/material/core/tokens/m2/mdc/_circular-progress.scss rename to src/material/core/tokens/m2/mat/_circular-progress.scss index 52308865d651..79831ca361ae 100644 --- a/src/material/core/tokens/m2/mdc/_circular-progress.scss +++ b/src/material/core/tokens/m2/mat/_circular-progress.scss @@ -13,28 +13,14 @@ $prefix: (mat, circular-progress); // our CSS. @function get-unthemable-tokens() { @return ( - // The thickness of the progress spinner's active indicator. active-indicator-width: 4px, - // The diameter of the spinner size: 48px, - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - // Angular Material does not support four color spinners - four-color-active-indicator-one-color: null, - // Angular Material does not support four color spinners - four-color-active-indicator-two-color: null, - // Angular Material does not support four color spinners - four-color-active-indicator-three-color: null, - // Angular Material does not support four color spinners - four-color-active-indicator-four-color: null ); } // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme, $palette-name: primary) { @return ( - // The color of the progress spinner's active indicator. active-indicator-color: inspection.get-theme-color($theme, $palette-name) ); } diff --git a/src/material/core/tokens/m2/mat/_dialog.scss b/src/material/core/tokens/m2/mat/_dialog.scss index fdf289876d7c..22252424e3f8 100644 --- a/src/material/core/tokens/m2/mat/_dialog.scss +++ b/src/material/core/tokens/m2/mat/_dialog.scss @@ -1,6 +1,7 @@ @use '../../token-definition'; @use '../../../style/elevation'; @use '../../../style/sass-utils'; +@use '../../../theming/inspection'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, dialog); @@ -9,6 +10,7 @@ $prefix: (mat, dialog); // 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(24), container-max-width: 80vw, container-small-max-width: 80vw, @@ -26,12 +28,36 @@ $prefix: (mat, dialog); // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { - @return (); + $is-dark: inspection.get-theme-type($theme) == dark; + + // Ideally we would derive all values directly from the theme, but it causes a lot of regressions + // internally. For now we fall back to the old hardcoded behavior only for internal apps. + $text-base: if(token-definition.$private-is-internal-build, + if($is-dark, #fff, #000), + inspection.get-theme-color($theme, foreground, text, 1) + ); + + @return ( + container-color: inspection.get-theme-color($theme, background, dialog), + subhead-color: sass-utils.safe-color-change($text-base, $alpha: 0.87), + supporting-text-color: sass-utils.safe-color-change($text-base, $alpha: 0.6), + ); } // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + subhead-font: inspection.get-theme-typography($theme, headline-6, font-family), + subhead-line-height: inspection.get-theme-typography($theme, headline-6, line-height), + subhead-size: inspection.get-theme-typography($theme, headline-6, font-size), + subhead-weight: inspection.get-theme-typography($theme, headline-6, font-weight), + subhead-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing), + supporting-text-font: inspection.get-theme-typography($theme, body-1, font-family), + supporting-text-line-height: inspection.get-theme-typography($theme, body-1, line-height), + supporting-text-size: inspection.get-theme-typography($theme, body-1, font-size), + supporting-text-weight: inspection.get-theme-typography($theme, body-1, font-weight), + supporting-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing), + ); } // Tokens that can be configured through Angular Material's density theming API. diff --git a/src/material/core/tokens/m2/mdc/_elevated-card.scss b/src/material/core/tokens/m2/mat/_elevated-card.scss similarity index 59% rename from src/material/core/tokens/m2/mdc/_elevated-card.scss rename to src/material/core/tokens/m2/mat/_elevated-card.scss index b0e56a52ac5c..b2d5d9a3da4c 100644 --- a/src/material/core/tokens/m2/mdc/_elevated-card.scss +++ b/src/material/core/tokens/m2/mat/_elevated-card.scss @@ -14,33 +14,7 @@ $prefix: (mat, elevated-card); // our CSS. @function get-unthemable-tokens() { @return ( - // The border-radius of the card. container-shape: 4px, - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - // Angular Material's card is not an interactive element, and therefore does not support states. - disabled-container-color: null, - disabled-container-elevation: null, - disabled-container-opacity: null, - dragged-container-elevation: null, - dragged-state-layer-color: null, - dragged-state-layer-opacity: null, - focus-container-elevation: null, - focus-state-layer-color:null, - focus-state-layer-opacity: null, - hover-container-elevation: null, - hover-state-layer-color: null, - hover-state-layer-opacity: null, - pressed-container-elevation: null, - pressed-state-layer-color: null, - pressed-state-layer-opacity: null, - container-shadow-color: null, - // Angular Material does not currently support surface tint. - container-surface-tint-layer-color: null, - // MDC does not seem to use these tokens. - icon-color: null, - icon-size: null, ); } diff --git a/src/material/core/tokens/m2/mdc/_extended-fab.scss b/src/material/core/tokens/m2/mat/_extended-fab.scss similarity index 58% rename from src/material/core/tokens/m2/mdc/_extended-fab.scss rename to src/material/core/tokens/m2/mat/_extended-fab.scss index a7ca09d758df..50d6a3e02b6f 100644 --- a/src/material/core/tokens/m2/mdc/_extended-fab.scss +++ b/src/material/core/tokens/m2/mat/_extended-fab.scss @@ -14,40 +14,6 @@ $prefix: (mat, extended-fab); focus-container-elevation-shadow: elevation.get-box-shadow(8), hover-container-elevation-shadow: elevation.get-box-shadow(8), pressed-container-elevation-shadow: elevation.get-box-shadow(12), - - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - container-color: null, - container-surface-tint-layer-color: null, - focus-icon-color: null, - focus-label-text-color: null, - focus-outline-color: null, - focus-outline-width: null, - focus-state-layer-color: null, - focus-state-layer-opacity: null, - hover-icon-color: null, - hover-label-text-color: null, - hover-state-layer-color: null, - hover-state-layer-opacity: null, - icon-color: null, - icon-size: null, - label-text-color: null, - lowered-container-elevation: null, - lowered-focus-container-elevation: null, - lowered-hover-container-elevation: null, - lowered-pressed-container-elevation: null, - pressed-icon-color: null, - pressed-label-text-color: null, - pressed-ripple-color: null, - pressed-ripple-opacity: null, - pressed-state-layer-color: null, - pressed-state-layer-opacity: null, - container-elevation: null, - focus-container-elevation: null, - hover-container-elevation: null, - pressed-container-elevation: null, - container-shadow-color: null, ); } diff --git a/src/material/core/tokens/m2/mat/_fab-small.scss b/src/material/core/tokens/m2/mat/_fab-small.scss index 35afb399d459..6b9198a352de 100644 --- a/src/material/core/tokens/m2/mat/_fab-small.scss +++ b/src/material/core/tokens/m2/mat/_fab-small.scss @@ -3,6 +3,7 @@ @use '../../../theming/theming'; @use '../../../theming/inspection'; @use '../../../style/sass-utils'; +@use '../../../style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, fab-small); @@ -10,7 +11,13 @@ $prefix: (mat, fab-small); // 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 (); + @return ( + container-shape: 50%, + container-elevation-shadow: elevation.get-box-shadow(6), + focus-container-elevation-shadow: elevation.get-box-shadow(8), + hover-container-elevation-shadow: elevation.get-box-shadow(8), + pressed-container-elevation-shadow: elevation.get-box-shadow(12), + ); } // Tokens that can be configured through Angular Material's color theming API. @@ -18,35 +25,18 @@ $prefix: (mat, fab-small); $is-dark: inspection.get-theme-type($theme) == dark; @return ( - // Color of icons and text projected into a FAB. - foreground-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the element that shows the hover, focus and pressed states. - state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the element that shows the hover, focus and pressed states while disabled. + container-color: inspection.get-theme-color($theme, background, card), + disabled-state-container-color: + inspection.get-theme-color($theme, background, disabled-button, 0.12), + disabled-state-foreground-color: + inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)), disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the ripple element. - ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - - // Opacity of the ripple when the button is hovered. - hover-state-layer-opacity: if($is-dark, 0.08, 0.04), - - // Opacity of the ripple when the button is focused. focus-state-layer-opacity: if($is-dark, 0.24, 0.12), - - // Opacity of the ripple when the button is pressed. + foreground-color: inspection.get-theme-color($theme, foreground, base), + hover-state-layer-opacity: if($is-dark, 0.08, 0.04), pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), - - // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves. - // Background color of the container when the FAB is disabled. - disabled-state-container-color: inspection.get-theme-color($theme, background, disabled-button, - 0.12), - - // Color of the icons and projected text when the FAB is disabled. - disabled-state-foreground-color: inspection.get-theme-color($theme, foreground, disabled-button, - if($is-dark, 0.5, 0.38)), + ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), + state-layer-color: inspection.get-theme-color($theme, foreground, base), ); } @@ -76,6 +66,7 @@ $prefix: (mat, fab-small); } @return ( + container-color: inspection.get-theme-color($theme, $palette-name, default), foreground-color: $foreground-color, state-layer-color: $state-layer-color, ripple-color: $ripple-color, diff --git a/src/material/core/tokens/m2/mat/_fab.scss b/src/material/core/tokens/m2/mat/_fab.scss index b0e561a80293..73fa9d0e978c 100644 --- a/src/material/core/tokens/m2/mat/_fab.scss +++ b/src/material/core/tokens/m2/mat/_fab.scss @@ -3,6 +3,7 @@ @use '../../../theming/theming'; @use '../../../theming/inspection'; @use '../../../style/sass-utils'; +@use '../../../style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, fab); @@ -10,7 +11,13 @@ $prefix: (mat, fab); // 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 (); + @return ( + container-shape: 50%, + container-elevation-shadow: elevation.get-box-shadow(6), + focus-container-elevation-shadow: elevation.get-box-shadow(8), + hover-container-elevation-shadow: elevation.get-box-shadow(8), + pressed-container-elevation-shadow: elevation.get-box-shadow(12), + ); } // Tokens that can be configured through Angular Material's color theming API. @@ -18,35 +25,18 @@ $prefix: (mat, fab); $is-dark: inspection.get-theme-type($theme) == dark; @return ( - // Color of icons and text projected into a FAB. - foreground-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the element that shows the hover, focus and pressed states. - state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the element that shows the hover, focus and pressed states while disabled. + container-color: inspection.get-theme-color($theme, background, card), + disabled-state-container-color: + inspection.get-theme-color($theme, background, disabled-button, 0.12), + disabled-state-foreground-color: + inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)), disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the ripple element. - ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - - // Opacity of the ripple when the button is hovered. - hover-state-layer-opacity: if($is-dark, 0.08, 0.04), - - // Opacity of the ripple when the button is focused. focus-state-layer-opacity: if($is-dark, 0.24, 0.12), - - // Opacity of the ripple when the button is pressed. + foreground-color: inspection.get-theme-color($theme, foreground, base), + hover-state-layer-opacity: if($is-dark, 0.08, 0.04), pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), - - // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves. - // Background color of the container when the FAB is disabled. - disabled-state-container-color: inspection.get-theme-color($theme, background, disabled-button, - 0.12), - - // Color of the icons and projected text when the FAB is disabled. - disabled-state-foreground-color: inspection.get-theme-color($theme, foreground, disabled-button, - if($is-dark, 0.5, 0.38)), + ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), + state-layer-color: inspection.get-theme-color($theme, foreground, base), ); } @@ -76,6 +66,7 @@ $prefix: (mat, fab); } @return ( + container-color: inspection.get-theme-color($theme, $palette-name, default), foreground-color: $foreground-color, state-layer-color: $state-layer-color, ripple-color: $ripple-color, diff --git a/src/material/core/tokens/m2/mat/_filled-button.scss b/src/material/core/tokens/m2/mat/_filled-button.scss index 77a2571d604b..0d3fc22a421e 100644 --- a/src/material/core/tokens/m2/mat/_filled-button.scss +++ b/src/material/core/tokens/m2/mat/_filled-button.scss @@ -1,4 +1,5 @@ @use 'sass:meta'; +@use 'sass:map'; @use '../../token-definition'; @use '../../../theming/theming'; @use '../../../theming/inspection'; @@ -11,14 +12,9 @@ $prefix: (mat, filled-button); // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( - // Start/end padding of the button. + container-shape: 4px, horizontal-padding: 16px, - - // Space between the icon and the button's main content. icon-spacing: 8px, - - // Amount by which to offset the icon so that its presence - // doesn't increase throw off the horizontal padding. icon-offset: -4px, ); } @@ -28,23 +24,17 @@ $prefix: (mat, filled-button); $is-dark: inspection.get-theme-type($theme) == dark; @return ( - // Color of the element that shows the hover, focus and pressed states. - state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the element that shows the hover, focus and pressed states while disabled. + container-color: inspection.get-theme-color($theme, background, card), + disabled-container-color: inspection.get-theme-color($theme, foreground, disabled-button, 0.12), + disabled-label-text-color: + inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)), disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the ripple element. - ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - - // Opacity of the ripple when the button is hovered. - hover-state-layer-opacity: if($is-dark, 0.08, 0.04), - - // Opacity of the ripple when the button is focused. focus-state-layer-opacity: if($is-dark, 0.24, 0.12), - - // Opacity of the ripple when the button is pressed. + hover-state-layer-opacity: if($is-dark, 0.08, 0.04), + label-text-color: inspection.get-theme-color($theme, foreground, text, 1), pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), + ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), + state-layer-color: inspection.get-theme-color($theme, foreground, base), ); } @@ -53,6 +43,8 @@ $prefix: (mat, filled-button); $state-layer-color: null; $ripple-color: null; $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast); + $container-color: inspection.get-theme-color($theme, $palette-name, default); + $label-text-color: null; // Ideally we would derive all values directly from the theme, but it causes a lot of regressions // internally. For now we fall back to the old hardcoded behavior only for internal apps. @@ -64,21 +56,31 @@ $prefix: (mat, filled-button); $color: if($contrast-tone == 'dark', #000, #fff); $state-layer-color: $color; $ripple-color: rgba($color, 0.1); + $label-text-color: if($contrast-tone == 'dark', #000, #fff); } @else { + $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1); $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1); $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1); } @return ( - state-layer-color: $state-layer-color, + container-color: $container-color, + label-text-color: $label-text-color, ripple-color: $ripple-color, + state-layer-color: $state-layer-color, ); } // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), + label-text-transform: none, + ); } // Tokens that can be configured through Angular Material's density theming API. @@ -87,6 +89,16 @@ $prefix: (mat, filled-button); @return ( touch-target-display: if($density-scale < -1, none, block), + container-height: + map.get( + ( + 0: 36px, + -1: 32px, + -2: 28px, + -3: 24px, + ), + $density-scale + ) ); } diff --git a/src/material/core/tokens/m2/mdc/_filled-text-field.scss b/src/material/core/tokens/m2/mat/_filled-text-field.scss similarity index 65% rename from src/material/core/tokens/m2/mdc/_filled-text-field.scss rename to src/material/core/tokens/m2/mat/_filled-text-field.scss index 5b2f28534bce..855356464235 100644 --- a/src/material/core/tokens/m2/mdc/_filled-text-field.scss +++ b/src/material/core/tokens/m2/mat/_filled-text-field.scss @@ -19,73 +19,6 @@ $prefix: (mat, filled-text-field); active-indicator-height: 1px, focus-active-indicator-height: 2px, container-shape: 4px, - - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - disabled-active-indicator-height: null, - hover-active-indicator-height: null, - disabled-active-indicator-opacity: null, - error-focus-caret-color: null, - error-hover-caret-color: null, - focus-caret-color: null, - hover-caret-color: null, - label-text-populated-line-height: null, - label-text-populated-size: null, - label-text-type: null, - disabled-label-text-opacity: null, - supporting-text-color: null, - supporting-text-font: null, - supporting-text-line-height: null, - supporting-text-size: null, - supporting-text-tracking: null, - supporting-text-weight: null, - disabled-supporting-text-color: null, - disabled-supporting-text-opacity: null, - error-focus-supporting-text-color: null, - error-hover-supporting-text-color: null, - error-supporting-text-color: null, - focus-supporting-text-color: null, - hover-supporting-text-color: null, - input-text-prefix-color: null, - input-text-suffix-color: null, - container-height: null, - trailing-icon-size: null, - leading-icon-size: null, - trailing-icon-color: null, - disabled-trailing-icon-color: null, - disabled-trailing-icon-opacity: null, - error-focus-trailing-icon-color: null, - error-hover-trailing-icon-color: null, - error-trailing-icon-color: null, - focus-trailing-icon-color: null, - hover-trailing-icon-color: null, - leading-icon-color: null, - disabled-leading-icon-opacity: null, - disabled-leading-icon-color: null, - error-focus-leading-icon-color: null, - error-hover-leading-icon-color: null, - error-leading-icon-color: null, - focus-leading-icon-color: null, - hover-leading-icon-color: null, - input-text-type: null, - input-text-font: null, - input-text-line-height: null, - input-text-size: null, - input-text-tracking: null, - input-text-weight: null, - error-input-text-color: null, - focus-input-text-color: null, - hover-input-text-color: null, - disabled-input-text-opacity: null, - error-focus-input-text-color: null, - error-hover-input-text-color: null, - disabled-container-opacity: null, - error-hover-state-layer-color: null, - error-hover-state-layer-opacity: null, - hover-state-layer-color: null, - hover-state-layer-opacity: null, - label-text-line-height: null, // We override the line height to `normal` so don't emit a slot. ); } diff --git a/src/material/core/tokens/m2/mat/_icon-button.scss b/src/material/core/tokens/m2/mat/_icon-button.scss index f955e48a5439..982d8e750f36 100644 --- a/src/material/core/tokens/m2/mat/_icon-button.scss +++ b/src/material/core/tokens/m2/mat/_icon-button.scss @@ -1,4 +1,5 @@ @use 'sass:meta'; +@use 'sass:map'; @use '../../token-definition'; @use '../../../theming/theming'; @use '../../../theming/inspection'; @@ -10,7 +11,9 @@ $prefix: (mat, icon-button); // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @function get-unthemable-tokens() { - @return (); + @return ( + icon-size: 24px, + ); } // Tokens that can be configured through Angular Material's color theming API. @@ -18,23 +21,14 @@ $prefix: (mat, icon-button); $is-dark: inspection.get-theme-type($theme) == dark; @return ( - // Color of the element that shows the hover, focus and pressed states. - state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the element that shows the hover, focus and pressed states while disabled. + disabled-icon-color: if($is-dark, rgba(#fff, 0.5), rgba(#000, 0.38)), disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the ripple element. - ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - - // Opacity of the ripple when the button is hovered. - hover-state-layer-opacity: if($is-dark, 0.08, 0.04), - - // Opacity of the ripple when the button is focused. focus-state-layer-opacity: if($is-dark, 0.24, 0.12), - - // Opacity of the ripple when the button is pressed. + hover-state-layer-opacity: if($is-dark, 0.08, 0.04), + icon-color: inherit, pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), + ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), + state-layer-color: inspection.get-theme-color($theme, foreground, base), ); } @@ -44,6 +38,7 @@ $prefix: (mat, icon-button); $ripple-opacity: 0.1; @return ( + icon-color: inspection.get-theme-color($theme, $palette-name), state-layer-color: $color, ripple-color: if( meta.type-of($color) == color, @@ -58,12 +53,26 @@ $prefix: (mat, icon-button); } // Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3); +@function get-density-tokens($theme, $exclude: ()) { + $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); - @return ( - touch-target-display: if($density-scale < -1, none, block), + $tokens: ( + touch-target-display: if($scale < -1, none, block), + state-layer-size: map.get(( + 0: 48px, + -1: 44px, + -2: 40px, + -3: 36px, + -4: 32px, + -5: 28px, + ), $scale) ); + + @each $token in $exclude { + $tokens: map.remove($tokens, $token); + } + + @return $tokens; } // Combines the tokens generated by the above functions into a single map with placeholder values. diff --git a/src/material/core/tokens/m2/mdc/_linear-progress.scss b/src/material/core/tokens/m2/mat/_linear-progress.scss similarity index 97% rename from src/material/core/tokens/m2/mdc/_linear-progress.scss rename to src/material/core/tokens/m2/mat/_linear-progress.scss index 8927b0f2f2d7..35a77a14a3c7 100644 --- a/src/material/core/tokens/m2/mdc/_linear-progress.scss +++ b/src/material/core/tokens/m2/mat/_linear-progress.scss @@ -29,7 +29,6 @@ $prefix: (mat, linear-progress); @function get-color-tokens($theme, $palette-name: primary) { $palette-color: inspection.get-theme-color($theme, $palette-name); @return ( - // The color of the progress bar's active section. active-indicator-color: $palette-color, track-color: if( meta.type-of($palette-color) == color, diff --git a/src/material/core/tokens/m2/mat/_list.scss b/src/material/core/tokens/m2/mat/_list.scss index 2218d801ac1f..721eaf636153 100644 --- a/src/material/core/tokens/m2/mat/_list.scss +++ b/src/material/core/tokens/m2/mat/_list.scss @@ -1,5 +1,7 @@ @use '../../token-definition'; @use '../../../style/sass-utils'; +@use '../../../theming/inspection'; +@use 'sass:map'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, list); @@ -8,27 +10,114 @@ $prefix: (mat, list); // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( - // active indicator themable with M3 active-indicator-color: transparent, active-indicator-shape: 4px, + list-item-container-shape: 0, + list-item-leading-avatar-shape: 50%, + list-item-container-color: transparent, + list-item-selected-container-color: transparent, + list-item-leading-avatar-color: transparent, + list-item-leading-icon-size: 24px, + list-item-leading-avatar-size: 40px, + list-item-trailing-icon-size: 24px, + list-item-disabled-state-layer-color: transparent, + list-item-disabled-state-layer-opacity: 0, + list-item-disabled-label-text-opacity: 0.38, + list-item-disabled-leading-icon-opacity: 0.38, + list-item-disabled-trailing-icon-opacity: 0.38, ); } // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { - @return (); + $is-dark: inspection.get-theme-type($theme) == dark; + $foreground-base: inspection.get-theme-color($theme, foreground, base); + $foreground-text: inspection.get-theme-color($theme, foreground, text); + $foreground-secondary-text: inspection.get-theme-color($theme, foreground, secondary-text); + $foreground-hint-text: inspection.get-theme-color($theme, foreground, hint-text); + $text-icon-on-background: sass-utils.safe-color-change( + $foreground-base, $alpha: if($is-dark, 0.5, 0.38)); + + @return ( + list-item-label-text-color: $foreground-text, + list-item-supporting-text-color: $foreground-secondary-text, + list-item-leading-icon-color: $text-icon-on-background, + list-item-trailing-supporting-text-color: $foreground-hint-text, + list-item-trailing-icon-color: $text-icon-on-background, + list-item-selected-trailing-icon-color: $text-icon-on-background, + list-item-disabled-label-text-color: $foreground-base, + list-item-disabled-leading-icon-color: $foreground-base, + list-item-disabled-trailing-icon-color: $foreground-base, + list-item-hover-label-text-color: $foreground-text, + list-item-hover-leading-icon-color: $text-icon-on-background, + list-item-hover-state-layer-color: $foreground-base, + list-item-hover-state-layer-opacity: if($is-dark, 0.08, 0.04), + list-item-hover-trailing-icon-color: $text-icon-on-background, + list-item-focus-label-text-color: $foreground-text, + list-item-focus-state-layer-color: $foreground-base, + list-item-focus-state-layer-opacity: if($is-dark, 0.24, 0.12), + ); } // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + list-item-label-text-font: inspection.get-theme-typography($theme, body-1, font-family), + list-item-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height), + list-item-label-text-size: inspection.get-theme-typography($theme, body-1, font-size), + list-item-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing), + list-item-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight), + list-item-supporting-text-font: inspection.get-theme-typography($theme, body-2, font-family), + list-item-supporting-text-line-height:inspection.get-theme-typography( + $theme, body-2, line-height), + list-item-supporting-text-size: inspection.get-theme-typography($theme, body-2, font-size), + list-item-supporting-text-tracking: inspection.get-theme-typography( + $theme, body-2, letter-spacing), + list-item-supporting-text-weight: inspection.get-theme-typography($theme, body-2, font-weight), + list-item-trailing-supporting-text-font: inspection.get-theme-typography( + $theme, caption, font-family), + list-item-trailing-supporting-text-line-height: inspection.get-theme-typography( + $theme, caption, line-height), + list-item-trailing-supporting-text-size: inspection.get-theme-typography( + $theme, caption, font-size), + list-item-trailing-supporting-text-tracking: inspection.get-theme-typography( + $theme, caption, letter-spacing), + list-item-trailing-supporting-text-weight: inspection.get-theme-typography( + $theme, caption, font-weight), + ); } // Tokens that can be configured through Angular Material's density theming API. @function get-density-tokens($theme) { + $scale: inspection.get-theme-density($theme); + @return ( list-item-leading-icon-start-space: 16px, list-item-leading-icon-end-space: 32px, + list-item-one-line-container-height: map.get(( + 0: 48px, + -1: 44px, + -2: 40px, + -3: 36px, + -4: 32px, + -5: 24px, + ), $scale), + list-item-two-line-container-height: map.get(( + 0: 64px, + -1: 60px, + -2: 56px, + -3: 52px, + -4: 48px, + -5: 48px, + ), $scale), + list-item-three-line-container-height: map.get(( + 0: 88px, + -1: 84px, + -2: 80px, + -3: 76px, + -4: 72px, + -5: 56px, + ), $scale), ); } diff --git a/src/material/core/tokens/m2/mat/_outlined-button.scss b/src/material/core/tokens/m2/mat/_outlined-button.scss index 6928e0ef65f7..7dd045303c46 100644 --- a/src/material/core/tokens/m2/mat/_outlined-button.scss +++ b/src/material/core/tokens/m2/mat/_outlined-button.scss @@ -3,6 +3,7 @@ @use '../../../theming/theming'; @use '../../../theming/inspection'; @use '../../../style/sass-utils'; +@use 'sass:map'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, outlined-button); @@ -11,14 +12,11 @@ $prefix: (mat, outlined-button); // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( - // Start/end padding of the button. + keep-touch-target: false, + outline-width: 1px, + container-shape: 4px, horizontal-padding: 15px, // Normally it's 16px, but -1px for the outline. - - // Space between the icon and the button's main content. icon-spacing: 8px, - - // Amount by which to offset the icon so that its presence - // doesn't increase throw off the horizontal padding. icon-offset: -4px, ); } @@ -27,24 +25,25 @@ $prefix: (mat, outlined-button); @function get-color-tokens($theme) { $is-dark: inspection.get-theme-type($theme) == dark; - @return ( - // Color of the element that shows the hover, focus and pressed states. - state-layer-color: inspection.get-theme-color($theme, foreground, base), + // Ideally we would derive all values directly from the theme, but it causes a lot of regressions + // internally. For now we fall back to the old hardcoded behavior only for internal apps. + $outline: if(token-definition.$private-is-internal-build, + rgba(if($is-dark, #fff, #000), 0.12), + inspection.get-theme-color($theme, foreground, divider) + ); - // Color of the element that shows the hover, focus and pressed states while disabled. + @return ( + disabled-label-text-color: + inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)), + disabled-outline-color: $outline, disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the ripple element. - ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - - // Opacity of the ripple when the button is hovered. - hover-state-layer-opacity: if($is-dark, 0.08, 0.04), - - // Opacity of the ripple when the button is focused. focus-state-layer-opacity: if($is-dark, 0.24, 0.12), - - // Opacity of the ripple when the button is pressed. + hover-state-layer-opacity: if($is-dark, 0.08, 0.04), + label-text-color: inspection.get-theme-color($theme, foreground, text, 1), + outline-color: $outline, pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), + ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), + state-layer-color: inspection.get-theme-color($theme, foreground, base), ); } @@ -54,6 +53,11 @@ $prefix: (mat, outlined-button); $ripple-opacity: 0.1; @return ( + label-text-color: inspection.get-theme-color($theme, $palette-name, default), + // TODO: we shouldn't have to set this since it's the same as the non-palette version, however + // there are a bunch of tests internally that depend on it. We should remove this and clean + // up the screenshots separately. + outline-color: map.get(get-color-tokens($theme), outline-color), state-layer-color: $color, ripple-color: if( meta.type-of($color) == color, @@ -64,15 +68,31 @@ $prefix: (mat, outlined-button); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), + label-text-transform: none, + ); } // Tokens that can be configured through Angular Material's density theming API. @function get-density-tokens($theme) { - $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3); + $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); @return ( - touch-target-display: if($density-scale < -1, none, block), + container-height: + map.get( + ( + 0: 36px, + -1: 32px, + -2: 28px, + -3: 24px, + ), + $scale + ), + touch-target-display: if($scale < -1, none, block), ); } diff --git a/src/material/core/tokens/m2/mdc/_outlined-card.scss b/src/material/core/tokens/m2/mat/_outlined-card.scss similarity index 55% rename from src/material/core/tokens/m2/mdc/_outlined-card.scss rename to src/material/core/tokens/m2/mat/_outlined-card.scss index 3caa5b5b5b32..27bec16506a1 100644 --- a/src/material/core/tokens/m2/mdc/_outlined-card.scss +++ b/src/material/core/tokens/m2/mat/_outlined-card.scss @@ -14,39 +14,8 @@ $prefix: (mat, outlined-card); // our CSS. @function get-unthemable-tokens() { @return ( - // The border-radius of the card. container-shape: 4px, - // The thickness of the card's border. outline-width: 1px, - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - // Angular Material's card is not an interactive element, and therefore does not support states. - disabled-container-elevation: null, - disabled-outline-color: null, - disabled-outline-opacity: null, - dragged-container-elevation: null, - dragged-outline-color: null, - dragged-state-layer-color: null, - dragged-state-layer-opacity: null, - focus-container-elevation: null, - focus-outline-color: null, - focus-state-layer-color: null, - focus-state-layer-opacity: null, - hover-container-elevation: null, - hover-outline-color: null, - hover-state-layer-color: null, - hover-state-layer-opacity: null, - pressed-container-elevation: null, - pressed-outline-color: null, - pressed-state-layer-color: null, - pressed-state-layer-opacity: null, - container-shadow-color: null, - // Angular Material does not currently support surface tint. - container-surface-tint-layer-color: null, - // MDC does not seem to use these tokens. - icon-color: null, - icon-size: null, ); } @@ -55,9 +24,7 @@ $prefix: (mat, outlined-card); $elevation: inspection.get-theme-color($theme, foreground, elevation); @return ( - // The background color of the card. container-color: inspection.get-theme-color($theme, background, card), - // The border color of the card. outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12), container-elevation: elevation.get-box-shadow(0), ); diff --git a/src/material/core/tokens/m2/mdc/_outlined-text-field.scss b/src/material/core/tokens/m2/mat/_outlined-text-field.scss similarity index 63% rename from src/material/core/tokens/m2/mdc/_outlined-text-field.scss rename to src/material/core/tokens/m2/mat/_outlined-text-field.scss index ae0d4f714429..9a6ba64788ae 100644 --- a/src/material/core/tokens/m2/mdc/_outlined-text-field.scss +++ b/src/material/core/tokens/m2/mat/_outlined-text-field.scss @@ -17,69 +17,6 @@ $prefix: (mat, outlined-text-field); outline-width: 1px, focus-outline-width: 2px, container-shape: 4px, - - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - error-focus-caret-color: null, - error-hover-caret-color: null, - focus-caret-color: null, - hover-caret-color: null, - disabled-outline-opacity: null, - hover-outline-width: null, - disabled-outline-width: null, - label-text-type: null, - label-text-populated-line-height: null, - label-text-populated-size: null, - disabled-label-text-opacity: null, - disabled-supporting-text-color: null, - disabled-supporting-text-opacity: null, - error-focus-supporting-text-color: null, - error-hover-supporting-text-color: null, - error-supporting-text-color: null, - focus-supporting-text-color: null, - hover-supporting-text-color: null, - supporting-text-color: null, - supporting-text-font: null, - supporting-text-line-height: null, - supporting-text-size: null, - supporting-text-tracking: null, - supporting-text-type: null, - supporting-text-weight: null, - leading-icon-size: null, - trailing-icon-size: null, - leading-icon-color: null, - disabled-leading-icon-color: null, - disabled-leading-icon-opacity: null, - error-focus-leading-icon-color: null, - error-hover-leading-icon-color: null, - error-leading-icon-color: null, - focus-leading-icon-color: null, - hover-leading-icon-color: null, - trailing-icon-color: null, - disabled-trailing-icon-color: null, - disabled-trailing-icon-opacity: null, - error-focus-trailing-icon-color: null, - error-hover-trailing-icon-color: null, - error-trailing-icon-color: null, - focus-trailing-icon-color: null, - hover-trailing-icon-color: null, - input-text-prefix-color: null, - input-text-type: null, - container-height: null, - input-text-suffix-color: null, - input-text-font: null, - input-text-line-height: null, - input-text-size: null, - input-text-tracking: null, - input-text-weight: null, - disabled-input-text-opacity: null, - error-focus-input-text-color: null, - error-hover-input-text-color: null, - error-input-text-color: null, - focus-input-text-color: null, - hover-input-text-color: null, - label-text-line-height: null, // We override the line height to `normal` so don't emit a slot. ); } diff --git a/src/material/core/tokens/m2/mdc/_plain-tooltip.scss b/src/material/core/tokens/m2/mat/_plain-tooltip.scss similarity index 83% rename from src/material/core/tokens/m2/mdc/_plain-tooltip.scss rename to src/material/core/tokens/m2/mat/_plain-tooltip.scss index 07666e84decf..458a084411c0 100644 --- a/src/material/core/tokens/m2/mdc/_plain-tooltip.scss +++ b/src/material/core/tokens/m2/mat/_plain-tooltip.scss @@ -13,12 +13,8 @@ $prefix: (mat, plain-tooltip); // our CSS. @function get-unthemable-tokens() { @return ( - // Border radius for the tooltip container. container-shape: 4px, - // Line height of the tooltip text. supporting-text-line-height: 16px, - // MDC does not seem to use these token. - supporting-text-type: null, ); } @@ -26,9 +22,7 @@ $prefix: (mat, plain-tooltip); @function get-color-tokens($theme) { @return ( - // Color of the tooltip container. container-color: inspection.get-theme-color($theme, background, tooltip), - // Color of the tooltip text. supporting-text-color: #fff, ); } @@ -36,13 +30,9 @@ $prefix: (mat, plain-tooltip); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { @return ( - // Font for the tooltip text. supporting-text-font: inspection.get-theme-typography($theme, caption, font-family), - // Font size for the tooltip text. supporting-text-size: inspection.get-theme-typography($theme, caption, font-size), - // Font weight of the tooltip text. supporting-text-weight: inspection.get-theme-typography($theme, caption, font-weight), - // Tracking (space between letters) of the tooltip text. supporting-text-tracking: inspection.get-theme-typography($theme, caption, letter-spacing), ); } diff --git a/src/material/core/tokens/m2/mat/_protected-button.scss b/src/material/core/tokens/m2/mat/_protected-button.scss index a67a91754672..ed9a38848148 100644 --- a/src/material/core/tokens/m2/mat/_protected-button.scss +++ b/src/material/core/tokens/m2/mat/_protected-button.scss @@ -1,8 +1,10 @@ @use 'sass:meta'; +@use 'sass:map'; @use '../../token-definition'; @use '../../../theming/theming'; @use '../../../theming/inspection'; @use '../../../style/sass-utils'; +@use '../../../style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, protected-button); @@ -11,14 +13,14 @@ $prefix: (mat, protected-button); // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( - // Start/end padding of the button. + container-shape: 4px, + container-elevation-shadow: elevation.get-box-shadow(2), + disabled-container-elevation-shadow: elevation.get-box-shadow(0), + focus-container-elevation-shadow: elevation.get-box-shadow(4), + hover-container-elevation-shadow: elevation.get-box-shadow(4), + pressed-container-elevation-shadow: elevation.get-box-shadow(8), horizontal-padding: 16px, - - // Space between the icon and the button's main content. icon-spacing: 8px, - - // Amount by which to offset the icon so that its presence - // doesn't increase throw off the horizontal padding. icon-offset: -4px, ); } @@ -28,23 +30,17 @@ $prefix: (mat, protected-button); $is-dark: inspection.get-theme-type($theme) == dark; @return ( - // Color of the element that shows the hover, focus and pressed states. - state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the element that shows the hover, focus and pressed states while disabled. + container-color: inspection.get-theme-color($theme, background, card), + disabled-container-color: inspection.get-theme-color($theme, foreground, disabled-button, 0.12), + disabled-label-text-color: + inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)), disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the ripple element. - ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - - // Opacity of the ripple when the button is hovered. - hover-state-layer-opacity: if($is-dark, 0.08, 0.04), - - // Opacity of the ripple when the button is focused. focus-state-layer-opacity: if($is-dark, 0.24, 0.12), - - // Opacity of the ripple when the button is pressed. + hover-state-layer-opacity: if($is-dark, 0.08, 0.04), + label-text-color: inspection.get-theme-color($theme, foreground, text, 1), pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), + ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), + state-layer-color: inspection.get-theme-color($theme, foreground, base), ); } @@ -53,6 +49,8 @@ $prefix: (mat, protected-button); $state-layer-color: null; $ripple-color: null; $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast); + $container-color: inspection.get-theme-color($theme, $palette-name, default); + $label-text-color: null; // Ideally we would derive all values directly from the theme, but it causes a lot of regressions // internally. For now we fall back to the old hardcoded behavior only for internal apps. @@ -64,29 +62,49 @@ $prefix: (mat, protected-button); $color: if($contrast-tone == 'dark', #000, #fff); $state-layer-color: $color; $ripple-color: rgba($color, 0.1); + $label-text-color: if($contrast-tone == 'dark', #000, #fff); } @else { + $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1); $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1); $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1); } @return ( - state-layer-color: $state-layer-color, + container-color: $container-color, + label-text-color: $label-text-color, ripple-color: $ripple-color, + state-layer-color: $state-layer-color, ); } // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), + label-text-transform: none, + ); } // Tokens that can be configured through Angular Material's density theming API. @function get-density-tokens($theme) { - $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3); + $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); @return ( - touch-target-display: if($density-scale < -1, none, block), + container-height: + map.get( + ( + 0: 36px, + -1: 32px, + -2: 28px, + -3: 24px, + ), + $scale + ), + touch-target-display: if($scale < -1, none, block), ); } diff --git a/src/material/core/tokens/m2/mat/_radio.scss b/src/material/core/tokens/m2/mat/_radio.scss index 67d12d63f134..2deb727fcdbb 100644 --- a/src/material/core/tokens/m2/mat/_radio.scss +++ b/src/material/core/tokens/m2/mat/_radio.scss @@ -1,7 +1,10 @@ +@use 'sass:map'; @use '../../token-definition'; @use '../../../theming/theming'; @use '../../../theming/inspection'; @use '../../../style/sass-utils'; +@use '../../../m2/palette' as m2-palette; +@use '../../../m2/theming' as m2-theming; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, radio); @@ -9,16 +12,37 @@ $prefix: (mat, radio); // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @function get-unthemable-tokens() { - @return (); + @return ( + disabled-selected-icon-opacity: 0.38, + disabled-unselected-icon-opacity: 0.38, + // This is specified both here and in the density tokens, because it + // determines the size of the radio button itself and there are internal + // tests who don't configure the theme correctly. + state-layer-size: 40px, + ); } // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme, $palette-name: accent) { + $is-dark: inspection.get-theme-type($theme) == dark; + $palette-color: inspection.get-theme-color($theme, $palette-name, default); + $icon-color: m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900)); + @return ( - ripple-color: inspection.get-theme-color($theme, foreground, base), checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default), disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text), - label-text-color: inspection.get-theme-color($theme, foreground, text) + disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1), + disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1), + label-text-color: inspection.get-theme-color($theme, foreground, text), + ripple-color: inspection.get-theme-color($theme, foreground, base), + selected-focus-icon-color: $palette-color, + selected-hover-icon-color: $palette-color, + selected-icon-color: $palette-color, + selected-pressed-icon-color: $palette-color, + unselected-focus-icon-color: $icon-color, + unselected-hover-icon-color: $icon-color, + unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54), + unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54), ); } @@ -35,9 +59,18 @@ $prefix: (mat, radio); // Tokens that can be configured through Angular Material's density theming API. @function get-density-tokens($theme) { - $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3); + $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); - @return (touch-target-display: if($density-scale < -1, none, block)); + @return ( + // The diameter of the radio's ripple. + state-layer-size: map.get(( + 0: 40px, + -1: 36px, + -2: 32px, + -3: 28px, + ), $scale), + touch-target-display: if($scale < -1, none, block) + ); } // Combines the tokens generated by the above functions into a single map with placeholder values. diff --git a/src/material/core/tokens/m2/mdc/_secondary-navigation-tab.scss b/src/material/core/tokens/m2/mat/_secondary-navigation-tab.scss similarity index 62% rename from src/material/core/tokens/m2/mdc/_secondary-navigation-tab.scss rename to src/material/core/tokens/m2/mat/_secondary-navigation-tab.scss index bc50157572ad..ade7e88c755a 100644 --- a/src/material/core/tokens/m2/mdc/_secondary-navigation-tab.scss +++ b/src/material/core/tokens/m2/mat/_secondary-navigation-tab.scss @@ -18,35 +18,6 @@ $prefix: (mat, secondary-navigation-tab); // This is specified both here and in the density tokens, because it determines the size of the // tab itself and there are internal tests who don't configure the theme correctly. container-height: 48px, - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - inactive-label-text-color: null, - active-label-text-color: null, - container-color: null, - container-elevation: null, - container-shadow-color: null, - container-shape: null, - focus-label-text-color: null, - focus-state-layer-color: null, - focus-state-layer-opacity: null, - hover-label-text-color: null, - hover-state-layer-color: null, - hover-state-layer-opacity: null, - pressed-label-text-color: null, - pressed-state-layer-color: null, - pressed-state-layer-opacity: null, - with-icon-active-icon-color: null, - with-icon-focus-icon-color: null, - with-icon-hover-icon-color: null, - with-icon-inactive-icon-color: null, - with-icon-pressed-icon-color: null, - with-icon-icon-size: null, - label-text-font: null, - label-text-size: null, - label-text-letter-spacing: null, - label-text-line-height: null, - label-text-weight: null, ); } diff --git a/src/material/core/tokens/m2/mat/_slider.scss b/src/material/core/tokens/m2/mat/_slider.scss index 9f22a90c3c22..267169f34d2d 100644 --- a/src/material/core/tokens/m2/mat/_slider.scss +++ b/src/material/core/tokens/m2/mat/_slider.scss @@ -2,6 +2,7 @@ @use '../../token-definition'; @use '../../../style/sass-utils'; @use '../../../theming/inspection'; +@use '../../../style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, slider); @@ -10,13 +11,26 @@ $prefix: (mat, slider); // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( - value-indicator-width: auto, - value-indicator-height: 32px, - value-indicator-caret-display: block, + active-track-height: 6px, + active-track-shape: 9999px, + handle-elevation: elevation.get-box-shadow(1), + handle-height: 20px, + handle-shape: 50%, + handle-width: 20px, + inactive-track-height: 4px, + inactive-track-shape: 9999px, value-indicator-border-radius: 4px, + value-indicator-caret-display: block, + value-indicator-container-transform: translateX(-50%), + value-indicator-height: 32px, value-indicator-padding: 0 12px, value-indicator-text-transform: none, - value-indicator-container-transform: translateX(-50%) + value-indicator-width: auto, + with-overlap-handle-outline-width: 1px, + with-tick-marks-active-container-opacity: 0.6, + with-tick-marks-container-shape: 50%, + with-tick-marks-container-size: 2px, + with-tick-marks-inactive-container-opacity: 0.6, ); } @@ -24,32 +38,54 @@ $prefix: (mat, slider); @function get-color-tokens($theme) { $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary); $is-dark: inspection.get-theme-type($theme) == dark; + $elevation: inspection.get-theme-color($theme, foreground, elevation); + $on-surface: if($is-dark, #fff, #000); @return map.merge( $theme-color-tokens, ( - // Opacity of value indicator text container - value-indicator-opacity: if($is-dark, 0.9, 0.6) + disabled-active-track-color: $on-surface, + disabled-handle-color: $on-surface, + disabled-inactive-track-color: $on-surface, + label-container-color: $on-surface, + label-label-text-color: if($is-dark, #000, #fff), + value-indicator-opacity: if($is-dark, 0.9, 0.6), + with-overlap-handle-outline-color: #fff, + with-tick-marks-disabled-container-color: $on-surface, ), ); } // Generates tokens for the slider properties that change based on the theme. @function private-get-color-palette-color-tokens($theme, $palette-name) { - $ripple-color: inspection.get-theme-color($theme, $palette-name); - $hover-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.05)}); - $focus-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.2)}); + $color: inspection.get-theme-color($theme, $palette-name); + $hover-ripple-color: if($color == null, null, #{rgba($color, 0.05)}); + $focus-ripple-color: if($color == null, null, #{rgba($color, 0.2)}); + $on-color: inspection.get-theme-color($theme, $palette-name, default-contrast); @return ( - ripple-color: $ripple-color, + active-track-color: $color, + focus-handle-color: $color, + focus-state-layer-color: $focus-ripple-color, + handle-color: $color, + hover-handle-color: $color, hover-state-layer-color: $hover-ripple-color, - focus-state-layer-color: $focus-ripple-color + inactive-track-color: $color, + ripple-color: $color, + with-tick-marks-active-container-color: $on-color, + with-tick-marks-inactive-container-color: $color, ); } // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-label-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family), + label-label-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size), + label-label-text-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height), + label-label-text-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing), + label-label-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight), + ); } // Tokens that can be configured through Angular Material's density theming API. diff --git a/src/material/core/tokens/m2/mat/_snack-bar.scss b/src/material/core/tokens/m2/mat/_snack-bar.scss index d9f650f73c1b..2fe2494bfda8 100644 --- a/src/material/core/tokens/m2/mat/_snack-bar.scss +++ b/src/material/core/tokens/m2/mat/_snack-bar.scss @@ -1,6 +1,8 @@ @use '../../token-definition'; @use '../../../theming/inspection'; @use '../../../style/sass-utils'; +@use 'sass:meta'; +@use 'sass:color'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, snack-bar); @@ -8,14 +10,22 @@ $prefix: (mat, snack-bar); // 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 (); + @return ( + container-shape: 4px, + ); } // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { $is-dark: inspection.get-theme-type($theme) == dark; + $surface: inspection.get-theme-color($theme, background, card); @return ( + container-color: if( + meta.type-of($surface) == color, + color.mix(if($is-dark, #fff, #000), $surface, 80%), + $surface), + supporting-text-color: if(meta.type-of($surface) == color, rgba($surface, 0.87), $surface), button-color: if( $is-dark, @@ -27,7 +37,12 @@ $prefix: (mat, snack-bar); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + supporting-text-font: inspection.get-theme-typography($theme, body-2, font-family), + supporting-text-line-height: inspection.get-theme-typography($theme, body-2, line-height), + supporting-text-size: inspection.get-theme-typography($theme, body-2, font-size), + supporting-text-weight: inspection.get-theme-typography($theme, body-2, font-weight), + ); } // Tokens that can be configured through Angular Material's density theming API. diff --git a/src/material/core/tokens/m2/mat/_stepper.scss b/src/material/core/tokens/m2/mat/_stepper.scss index eaa01c87e35b..35e4faad806e 100644 --- a/src/material/core/tokens/m2/mat/_stepper.scss +++ b/src/material/core/tokens/m2/mat/_stepper.scss @@ -11,9 +11,7 @@ $prefix: (mat, stepper); // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( - // Border radius for step header on focus header-focus-state-layer-shape: 0, - // Border radius for step header on hover header-hover-state-layer-shape: 0, ); } @@ -21,28 +19,17 @@ $prefix: (mat, stepper); // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { @return map.merge(private-get-color-palette-color-tokens($theme, primary), ( - // Background for stepper container. container-color: inspection.get-theme-color($theme, background, card), - // Color of the line indicator connecting the steps. line-color: inspection.get-theme-color($theme, foreground, divider), - // Background color of the header while hovered. header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover), - // Background color of the header while focused. header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover), - // Color of the text inside the step header. header-label-text-color: inspection.get-theme-color($theme, foreground, secondary-text), - // Color for the "optional" label in the step header. header-optional-label-text-color: inspection.get-theme-color( $theme, foreground, secondary-text), - // Color of the header text when a step is selected. header-selected-state-label-text-color: inspection.get-theme-color($theme, foreground, text), - // Color of the header text when a step is in an error state. header-error-state-label-text-color: inspection.get-theme-color($theme, warn, text), - // Background color of the header icon. header-icon-background-color: inspection.get-theme-color($theme, foreground, secondary-text), - // Foreground color of the header icon in the error state. header-error-state-icon-foreground-color: inspection.get-theme-color($theme, warn, text), - // Background color of the header icon in the error state. header-error-state-icon-background-color: transparent, )); } @@ -50,20 +37,13 @@ $prefix: (mat, stepper); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { @return ( - // Font family of the entire stepper. container-text-font: inspection.get-theme-typography($theme, body-2, font-family), - // Font family of the text inside the step header. header-label-text-font: inspection.get-theme-typography($theme, body-2, font-family), - // Size of the text inside the step header. header-label-text-size: inspection.get-theme-typography($theme, body-2, font-size), - // Weight of the text inside the step header. header-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight), - // Color of the header text when a step is in an error state. header-error-state-label-text-size: inspection.get-theme-typography($theme, body-1, font-size), - // Size of the header text in the selected state. header-selected-state-label-text-size: inspection.get-theme-typography( $theme, body-1, font-size), - // Weight of the header text in the selected state. header-selected-state-label-text-weight: inspection.get-theme-typography( $theme, body-1, font-weight), ); @@ -91,19 +71,12 @@ $prefix: (mat, stepper); $active-state-background: inspection.get-theme-color($theme, $palette-name); @return ( - // Foreground color of the header icon. header-icon-foreground-color: $active-state-foreground, - // Background color of the header icon in the selected state. header-selected-state-icon-background-color: $active-state-background, - // Foreground color of the header icon in the selected state. header-selected-state-icon-foreground-color: $active-state-foreground, - // Background color of the header icon in the selected state. header-done-state-icon-background-color: $active-state-background, - // Foreground color of the header icon in the selected state. header-done-state-icon-foreground-color: $active-state-foreground, - // Background color of the header icon in the editing state. header-edit-state-icon-background-color: $active-state-background, - // Foreground color of the header icon in the editing state. header-edit-state-icon-foreground-color: $active-state-foreground, ); } diff --git a/src/material/core/tokens/m2/mat/_switch.scss b/src/material/core/tokens/m2/mat/_switch.scss index bfbf6bad22a7..1e2b3583a9d7 100644 --- a/src/material/core/tokens/m2/mat/_switch.scss +++ b/src/material/core/tokens/m2/mat/_switch.scss @@ -1,6 +1,9 @@ @use '../../token-definition'; @use '../../../style/sass-utils'; +@use 'sass:map'; @use '../../../theming/inspection'; +@use '../../../theming/theming'; +@use '../../../style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, switch); @@ -8,44 +11,122 @@ $prefix: (mat, switch); // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @function get-unthemable-tokens() { + // visible-track-opacity and hidden-track-opacity: + // The hidden and visible track represent whichever track is visible or + // hidden in the ui. This could be the .mdc-switch__track :before or + // :after depending on whether the switch is selected or unselected. + // + // The m2 slide-toggle uses transforms to hide & show the tracks while + // the m3 slide-toggle uses opacity. @return ( + disabled-handle-opacity: null, disabled-selected-handle-opacity: 0.38, + disabled-selected-icon-opacity: 0.38, + disabled-track-opacity: 0.12, disabled-unselected-handle-opacity: 0.38, - - unselected-handle-size: 20px, - selected-handle-size: 20px, + disabled-unselected-icon-opacity: 0.38, + disabled-unselected-track-outline-color: transparent, + disabled-unselected-track-outline-width: 1px, + handle-height: 20px, + handle-shape: 10px, + handle-width: 20px, + hidden-track-opacity: 1, + hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1), pressed-handle-size: 20px, - with-icon-handle-size: 20px, - + selected-focus-state-layer-opacity: 0.12, selected-handle-horizontal-margin: 0, - selected-with-icon-handle-horizontal-margin: 0, + selected-handle-size: 20px, + selected-hover-state-layer-opacity: 0.04, + selected-icon-size: 18px, selected-pressed-handle-horizontal-margin: 0, + selected-pressed-state-layer-opacity: 0.1, + selected-track-outline-color: transparent, + selected-track-outline-width: 1px, + selected-with-icon-handle-horizontal-margin: 0, + track-height: 14px, + track-outline-color: transparent, + track-outline-width: 1px, + track-shape: 7px, + track-width: 36px, + unselected-focus-state-layer-opacity: 0.12, unselected-handle-horizontal-margin: 0, - unselected-with-icon-handle-horizontal-margin: 0, + unselected-handle-size: 20px, + unselected-hover-state-layer-opacity: 0.04, + unselected-icon-size: 18px, unselected-pressed-handle-horizontal-margin: 0, - - // The hidden and visible track represent whichever track is visible or - // hidden in the ui. This could be the .mdc-switch__track :before or - // :after depending on whether the switch is selected or unselected. - // - // The m2 slide-toggle uses transforms to hide & show the tracks while - // the m3 slide-toggle uses opacity. + unselected-pressed-state-layer-opacity: 0.1, + unselected-with-icon-handle-horizontal-margin: 0, visible-track-opacity: 1, - hidden-track-opacity: 1, visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1), - hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1), - track-outline-width: 1px, - track-outline-color: transparent, - selected-track-outline-width: 1px, - selected-track-outline-color: transparent, - disabled-unselected-track-outline-width: 1px, - disabled-unselected-track-outline-color: transparent + with-icon-handle-size: 20px, ); } // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { - @return (label-text-color: inspection.get-theme-color($theme, foreground, text)); + $is-dark: inspection.get-theme-type($theme) == dark; + $on-surface: if($is-dark, #f5f5f5, #424242); + $hairline: if($is-dark, #616161, #e0e0e0); + $on-surface-variant: if($is-dark, #9e9e9e, #616161); + $on-surface-state-content: if($is-dark, #fafafa, #212121); + $disabled-handle-color: if($is-dark, #000, #424242); + $icon-color: if($is-dark, #212121, #fff); + + // The default for tokens that rely on the theme will use the primary palette + $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary); + + // TODO(crisbeto): `handle-surface-color` was hardcoded to `var(--mat-surface-color, #fff)` + // which made it basically hardcoded to #fff. Should it be based on the theme? + @return map.merge( + $theme-color-tokens, + ( + disabled-handle-elevation-shadow: elevation.get-box-shadow(0), + disabled-selected-handle-color: $disabled-handle-color, + disabled-selected-icon-color: $icon-color, + disabled-selected-track-color: $on-surface, + disabled-unselected-handle-color: $disabled-handle-color, + disabled-unselected-icon-color: $icon-color, + disabled-unselected-track-color: $on-surface, + handle-elevation-shadow: elevation.get-box-shadow(1), + handle-surface-color: #fff, + label-text-color: inspection.get-theme-color($theme, foreground, text), + selected-icon-color: $icon-color, + unselected-hover-handle-color: $on-surface-state-content, + unselected-focus-handle-color: $on-surface-state-content, + unselected-focus-state-layer-color: $on-surface, + unselected-focus-track-color: $hairline, + unselected-icon-color: $icon-color, + unselected-handle-color: $on-surface-variant, + unselected-hover-state-layer-color: $on-surface, + unselected-hover-track-color: $hairline, + unselected-pressed-handle-color: $on-surface-state-content, + unselected-pressed-track-color: $hairline, + unselected-pressed-state-layer-color: $on-surface, + unselected-track-color: $hairline, + ) + ); +} + +// Generates the mapping for the properties that change based on the slide toggle color. +@function private-get-color-palette-color-tokens($theme, $palette-name) { + $is-dark: inspection.get-theme-type($theme) == dark; + $palette-color: inspection.get-theme-color($theme, $palette-name, if($is-dark, 300, 600)); + $state-content: inspection.get-theme-color($theme, $palette-name, if($is-dark, 200, 900)); + $inverse: inspection.get-theme-color($theme, $palette-name, if($is-dark, 600, 300)); + + @return ( + selected-focus-state-layer-color: $palette-color, + selected-handle-color: $palette-color, + selected-hover-state-layer-color: $palette-color, + selected-pressed-state-layer-color: $palette-color, + selected-focus-handle-color: $state-content, + selected-hover-handle-color: $state-content, + selected-pressed-handle-color: $state-content, + selected-focus-track-color: $inverse, + selected-hover-track-color: $inverse, + selected-pressed-track-color: $inverse, + selected-track-color: $inverse, + ); } // Tokens that can be configured through Angular Material's typography theming API. @@ -61,7 +142,17 @@ $prefix: (mat, switch); // Tokens that can be configured through Angular Material's density theming API. @function get-density-tokens($theme) { - @return (); + $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); + + @return ( + // The diameter of the handle ripple. + state-layer-size: map.get(( + 0: 40px, + -1: 36px, + -2: 32px, + -3: 28px, + ), $scale) + ); } // Combines the tokens generated by the above functions into a single map with placeholder values. diff --git a/src/material/core/tokens/m2/mdc/_tab-indicator.scss b/src/material/core/tokens/m2/mat/_tab-indicator.scss similarity index 100% rename from src/material/core/tokens/m2/mdc/_tab-indicator.scss rename to src/material/core/tokens/m2/mat/_tab-indicator.scss diff --git a/src/material/core/tokens/m2/mat/_text-button.scss b/src/material/core/tokens/m2/mat/_text-button.scss index 962e3f335848..1e3c3f2926c9 100644 --- a/src/material/core/tokens/m2/mat/_text-button.scss +++ b/src/material/core/tokens/m2/mat/_text-button.scss @@ -1,4 +1,5 @@ @use 'sass:meta'; +@use 'sass:map'; @use '../../token-definition'; @use '../../../theming/theming'; @use '../../../theming/inspection'; @@ -11,18 +12,11 @@ $prefix: (mat, text-button); // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( - // Start/end padding of the button. + container-shape: 4px, horizontal-padding: 8px, - - // Start/end padding of the button when it has an icon. - with-icon-horizontal-padding: 8px, - - // Space between the icon and the button's main content. - icon-spacing: 8px, - - // Amount by which to offset the icon so that its presence - // doesn't increase throw off the horizontal padding. icon-offset: 0, + icon-spacing: 8px, + with-icon-horizontal-padding: 8px, ); } @@ -31,23 +25,15 @@ $prefix: (mat, text-button); $is-dark: inspection.get-theme-type($theme) == dark; @return ( - // Color of the element that shows the hover, focus and pressed states. - state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the element that shows the hover, focus and pressed states while disabled. + disabled-label-text-color: + inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)), disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the ripple element. - ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - - // Opacity of the ripple when the button is hovered. - hover-state-layer-opacity: if($is-dark, 0.08, 0.04), - - // Opacity of the ripple when the button is focused. focus-state-layer-opacity: if($is-dark, 0.24, 0.12), - - // Opacity of the ripple when the button is pressed. + hover-state-layer-opacity: if($is-dark, 0.08, 0.04), + label-text-color: inspection.get-theme-color($theme, foreground, text, 1), pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), + ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), + state-layer-color: inspection.get-theme-color($theme, foreground, base), ); } @@ -57,6 +43,7 @@ $prefix: (mat, text-button); $ripple-opacity: 0.1; @return ( + label-text-color: inspection.get-theme-color($theme, $palette-name), state-layer-color: $color, ripple-color: if( meta.type-of($color) == color, @@ -67,15 +54,27 @@ $prefix: (mat, text-button); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), + label-text-transform: none, + ); } // Tokens that can be configured through Angular Material's density theming API. @function get-density-tokens($theme) { - $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3); + $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); @return ( - touch-target-display: if($density-scale < -1, none, block), + container-height: map.get(( + 0: 36px, + -1: 32px, + -2: 28px, + -3: 24px, + ), $scale), + touch-target-display: if($scale < -1, none, block), ); } diff --git a/src/material/core/tokens/m2/mat/_tonal-button.scss b/src/material/core/tokens/m2/mat/_tonal-button.scss index d7df7064bbfd..75f6246a677b 100644 --- a/src/material/core/tokens/m2/mat/_tonal-button.scss +++ b/src/material/core/tokens/m2/mat/_tonal-button.scss @@ -11,17 +11,9 @@ $prefix: (mat, tonal-button); // but may be in a future version of the theming API. @function get-unthemable-tokens() { @return ( - // Shape of the container element. container-shape: 4px, - - // Start/end padding of the button. horizontal-padding: 16px, - - // Space between the icon and the button's main content. icon-spacing: 8px, - - // Amount by which to offset the icon so that its presence - // doesn't increase throw off the horizontal padding. icon-offset: -4px, ); } @@ -37,23 +29,11 @@ $prefix: (mat, tonal-button); 0.12), disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)), - - // Color of the element that shows the hover, focus and pressed states. state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the element that shows the hover, focus and pressed states while disabled. disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), - - // Color of the ripple element. ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - - // Opacity of the ripple when the button is hovered. hover-state-layer-opacity: if($is-dark, 0.08, 0.04), - - // Opacity of the ripple when the button is focused. focus-state-layer-opacity: if($is-dark, 0.24, 0.12), - - // Opacity of the ripple when the button is pressed. pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), ); } diff --git a/src/material/core/tokens/m2/mdc/_checkbox.scss b/src/material/core/tokens/m2/mdc/_checkbox.scss deleted file mode 100644 index 44a3a7f65348..000000000000 --- a/src/material/core/tokens/m2/mdc/_checkbox.scss +++ /dev/null @@ -1,136 +0,0 @@ -@use 'sass:map'; -@use '../../../m2/palette' as m2-palette; -@use '../../../m2/theming' as m2-theming; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, checkbox); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. -@function get-unthemable-tokens() { - @return ( - // The color of the checkmark when the checkbox is selected and disabled. - disabled-selected-checkmark-color: #fff, - // The opacity of the ripple when the checkbox is selected and focused. - selected-focus-state-layer-opacity: 0.16, - // The opacity of the ripple when the checkbox is selected and hovered. - selected-hover-state-layer-opacity: 0.04, - // The opacity of the ripple when the checkbox is selected and pressed. - selected-pressed-state-layer-opacity: 0.16, - // The opacity of the ripple when the checkbox is unselected and focused. - unselected-focus-state-layer-opacity: 0.16, - // The opacity of the ripple when the checkbox is unselected and hovered. - unselected-hover-state-layer-opacity: 0.04, - // The opacity of the ripple when the checkbox is unselected and pressed. - unselected-pressed-state-layer-opacity: 0.16, - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - selected-pressed-icon-color: null, - unselected-pressed-icon-color: null, - - // MDC currently doesn't output a slot for these tokens. - disabled-selected-icon-opacity: null, - disabled-unselected-icon-opacity: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme, $palette-name: accent) { - $is-dark: inspection.get-theme-type($theme) == dark; - $foreground-base: inspection.get-theme-color($theme, foreground, base); - $palette-default: inspection.get-theme-color($theme, $palette-name, default); - $disabled-color: sass-utils.safe-color-change( - inspection.get-theme-color($theme, foreground, base), $alpha: 0.38); - $palette-selected: inspection.get-theme-color($theme, $palette-name); - $border-color: sass-utils.safe-color-change( - inspection.get-theme-color($theme, foreground, base), $alpha: 0.54); - $active-border-color: - m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900)); - $selected-checkmark-color: null; - - // Ideally we would derive all values directly from the theme, but it causes a lot of regressions - // internally. For now we fall back to the old hardcoded behavior only for internal apps. - @if (token-definition.$private-is-internal-build) { - $contrast-tone: token-definition.contrast-tone($palette-selected, $is-dark); - $selected-checkmark-color: if($contrast-tone == 'dark', #000, #fff); - } - @else { - $selected-checkmark-color: - inspection.get-theme-color($theme, $palette-name, default-contrast, 1); - } - - @return ( - // The color of the checkbox fill when the checkbox is selected and disabled. - disabled-selected-icon-color: $disabled-color, - // The color of the checkbox border when the checkbox is unselected and disabled. - disabled-unselected-icon-color: $disabled-color, - // The color of the checkmark when the checkbox is selected. - selected-checkmark-color: $selected-checkmark-color, - // The color of the checkbox fill when the checkbox is selected and focused. - selected-focus-icon-color: $palette-selected, - // The color of the checkbox fill when the checkbox is selected and hovered. - selected-hover-icon-color: $palette-selected, - // The color of the checkbox fill when the checkbox is selected. - selected-icon-color: $palette-selected, - // The color of the checkbox fill when the checkbox is selected and pressed. - selected-pressed-icon-color: $palette-selected, - // The color of the checkbox border when the checkbox is unselected and focused. - unselected-focus-icon-color: $active-border-color, - // The color of the checkbox border when the checkbox is unselected and hovered. - unselected-hover-icon-color: $active-border-color, - // The color of the checkbox border when the checkbox is unselected. - unselected-icon-color: $border-color, - // The color of the ripple when the checkbox is selected and focused. - selected-focus-state-layer-color: $palette-default, - // The color of the ripple when the checkbox is selected and hovered. - selected-hover-state-layer-color: $palette-default, - // The color of the ripple when the checkbox is selected and pressed. - selected-pressed-state-layer-color: $palette-default, - // The color of the ripple when the checkbox is unselected and focused. - unselected-focus-state-layer-color: $foreground-base, - // The color of the ripple when the checkbox is unselected and hovered. - unselected-hover-state-layer-color: $foreground-base, - // The color of the ripple when the checkbox is unselected and pressed. - unselected-pressed-state-layer-color: $foreground-base, - ); -} - -// Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($theme) { - @return (); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); - - @return ( - // The diameter of the checkbox's ripple. - state-layer-size: map.get(( - 0: 40px, - -1: 36px, - -2: 32px, - -3: 28px, - ), $scale) - ); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_chip.scss b/src/material/core/tokens/m2/mdc/_chip.scss deleted file mode 100644 index 3a40bab82eff..000000000000 --- a/src/material/core/tokens/m2/mdc/_chip.scss +++ /dev/null @@ -1,313 +0,0 @@ -@use 'sass:color'; -@use 'sass:map'; -@use 'sass:meta'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../m2/palette' as m2-palette; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, chip); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. -@function get-unthemable-tokens() { - @return ( - // The shape & radius of the chip. - container-shape-radius: 16px, - // The shape & radius of the avatar. - with-avatar-avatar-shape-radius: 14px, - // The width & height of the chip avatar. - with-avatar-avatar-size: 28px, - // The width & height of the chip icon. - with-icon-icon-size: 18px, - // The chip's border width. - outline-width: 0, - // The chip's border color. - outline-color: transparent, - // The chip's border color when disabled. - disabled-outline-color: transparent, - // The chip's border color when focused. - focus-outline-color: transparent, - // The opacity of the chip's state overlay when hovered. - hover-state-layer-opacity: 0.04, - // The opacity of the chip's avatar when disabled. - with-avatar-disabled-avatar-opacity: 1, - // The chip's border width when selected. - flat-selected-outline-width: 0, - // The opacity of the chip's state overlay when selected and hovered. - selected-hover-state-layer-opacity: 0.04, - // The opacity of the chip's trailing icon when it is disabled. - with-trailing-icon-disabled-trailing-icon-opacity: 1, - // The opacity of the chip's leading icon when it is disabled. - with-icon-disabled-icon-opacity: 1, - // Not used by MDC. - disabled-label-text-opacity: null, - // Not used by MDC. - disabled-outline-opacity: null, - // Not used by MDC. - elevated-disabled-container-opacity: null, - // Not used by MDC. - flat-disabled-outline-opacity: null, - // Not used by MDC. - flat-disabled-unselected-outline-opacity: null, - // Our chips do not have a border. - flat-outline-width: null, - // Our chips do not have a border. - flat-unselected-outline-width: null, - // Not used by MDC. - with-leading-icon-disabled-leading-icon-opacity: null, - // Not used by MDC. - with-leading-icon-leading-icon-size: null, - // Not used by MDC. - with-trailing-icon-trailing-icon-size: null, - // Elevated chips not implemented. - container-elevation: null, - // Elevated chips not implemented. - container-shadow-color: null, - // Elevated chips not implemented. - elevated-container-elevation: null, - // Elevated chips not implemented. - elevated-container-shadow-color: null, - // Elevated chips not implemented. - container-surface-tint-layer-color: null, - // Elevated chips not implemented. - elevated-disabled-container-elevation: null, - // Elevated chips not implemented. - elevated-focus-container-elevation: null, - // Elevated chips not implemented. - elevated-hover-container-elevation: null, - // Elevated chips not implemented. - elevated-pressed-container-elevation: null, - // Elevated chips not implemented. - elevated-selected-container-elevation: null, - // Elevated chips not implemented. - elevated-unselected-container-color: null, - // Elevated chips not implemented. - flat-container-elevation: null, - // Our chips do not have a border. - flat-disabled-outline-color: null, - // Not used by MDC. - flat-disabled-selected-container-opacity: null, - // Unused. - flat-disabled-selected-outline-color: null, - // Unused. - flat-disabled-selected-outline-opacity: null, - // Unused. - flat-disabled-unselected-outline-color: null, - // Unused. - flat-focus-outline-color: null, - // Unused. - flat-outline-color: null, - // Unused. - flat-selected-container-color: null, - // Unused. - flat-selected-focus-container-elevation: null, - // Unused. - flat-selected-hover-container-elevation: null, - // Unused. - flat-selected-outline-color: null, - // Unused. - flat-selected-pressed-container-elevation: null, - // Unused. - flat-unselected-focus-container-elevation: null, - // Unused. - flat-unselected-focus-outline-color: null, - // Unused. - flat-unselected-hover-container-elevation: null, - // Unused. - flat-unselected-outline-color: null, - // Unused. - flat-unselected-pressed-container-elevation: null, - // Unused. - focus-label-text-color: null, - // Unused. - hover-label-text-color: null, - // Unused. - pressed-label-text-color: null, - // Unused. - pressed-state-layer-color: null, - // Unused. - pressed-state-layer-opacity: null, - // Unused. - selected-focus-label-text-color: null, - // Unused. - selected-hover-label-text-color: null, - // Unused. - selected-pressed-label-text-color: null, - // Unused. - selected-pressed-state-layer-color: null, - // Unused. - selected-pressed-state-layer-opacity: null, - // Unused. - unselected-focus-label-text-color: null, - // Unused. - unselected-focus-state-layer-color: null, - // Unused. - unselected-focus-state-layer-opacity: null, - // Unused. - unselected-hover-label-text-color: null, - // Unused. - unselected-hover-state-layer-color: null, - // Unused. - unselected-hover-state-layer-opacity: null, - // Unused. - unselected-label-text-color: null, - // Unused. - unselected-pressed-label-text-color: null, - // Unused. - unselected-pressed-state-layer-color: null, - // Unused. - unselected-pressed-state-layer-opacity: null, - // Unused. - with-icon-focus-icon-color: null, - // Unused. - with-icon-hover-icon-color: null, - // Unused. - with-icon-pressed-icon-color: null, - // Unused. - with-icon-selected-focus-icon-color: null, - // Unused. - with-icon-selected-hover-icon-color: null, - // Unused. - with-icon-selected-pressed-icon-color: null, - // Unused. - with-icon-unselected-focus-icon-color: null, - // Unused. - with-icon-unselected-hover-icon-color: null, - // Unused. - with-icon-unselected-icon-color: null, - // Unused. - with-icon-unselected-pressed-icon-color: null, - // Unused. - with-leading-icon-disabled-leading-icon-color: null, - // Unused. - with-leading-icon-focus-leading-icon-color: null, - // Unused. - with-leading-icon-hover-leading-icon-color: null, - // Unused. - with-leading-icon-leading-icon-color: null, - // Unused. - with-leading-icon-pressed-leading-icon-color: null, - // Unused. - with-trailing-icon-focus-trailing-icon-color: null, - // Unused. - with-trailing-icon-hover-trailing-icon-color: null, - // Unused. - with-trailing-icon-pressed-trailing-icon-color: null - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme, $palette-name: null) { - $foreground: null; - $background: null; - $state-layer-color: inspection.get-theme-color($theme, foreground, base); - $state-layer-opacity: 0.12; // 0.12 is a common value in Material Design for opacity. - - @if $palette-name == null { - $is-dark: inspection.get-theme-type($theme) == dark; - $grey-50: map.get(m2-palette.$grey-palette, 50); - $grey-900: map.get(m2-palette.$grey-palette, 900); - $foreground: if($is-dark, $grey-50, $grey-900); - - $surface: inspection.get-theme-color($theme, background, card); - $background: if( - meta.type-of($state-layer-color) == color and meta.type-of($surface) == color, - color.mix($state-layer-color, $surface, 12%), - $state-layer-color - ); - } - @else { - $background: inspection.get-theme-color($theme, $palette-name); - $foreground: inspection.get-theme-color($theme, $palette-name, default-contrast); - } - - @return ( - // The text color of a disabled chip. - disabled-label-text-color: $foreground, - // The background-color of the chip. - elevated-container-color: $background, - // The background-color of the chip when selected. - elevated-selected-container-color: $background, - // The background-color of a disabled chip. - elevated-disabled-container-color: $background, - // The background color of the chip when disabled and selected. - flat-disabled-selected-container-color: $background, - // The color of the focus state layer. - focus-state-layer-color: $state-layer-color, - // The color of the hover state layer. - hover-state-layer-color: $state-layer-color, - // The color of the chip's state overlay when selected and hovered. - selected-hover-state-layer-color: $state-layer-color, - // The opacity of the focus state layer. - focus-state-layer-opacity: $state-layer-opacity, - // The color of the chip's state overlay when selected and focused. - selected-focus-state-layer-color: $state-layer-color, - // The opacity of the chip's state overlay when selected and focused. - selected-focus-state-layer-opacity: $state-layer-opacity, - // The chip text color. - label-text-color: $foreground, - // The chip text color when selected. - selected-label-text-color: $foreground, - // The icon color of a chip. - with-icon-icon-color: $foreground, - // The color of the icon of a disabled chip. - with-icon-disabled-icon-color: $foreground, - // The color of the icon of a selected chip. - with-icon-selected-icon-color: $foreground, - // The color of the icon at the end of a disabled chip. - with-trailing-icon-disabled-trailing-icon-color: $foreground, - // The color of the icon at the end of the chip. - with-trailing-icon-trailing-icon-color: $foreground - ); -} - -// Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($theme) { - @return ( - // The font family of the chip text. - label-text-font: inspection.get-theme-typography($theme, body-2, font-family), - // The line height of the chip text. - label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height), - // The font size of the chip text. - label-text-size: inspection.get-theme-typography($theme, body-2, font-size), - // The letter spacing of the chip label. - label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing), - // The font weight of the chip text. - label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight) - ); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - $scale: theming.clamp-density(inspection.get-theme-density($theme), -2); - @return ( - // The height of the chip. - container-height: - map.get( - ( - 0: 32px, - -1: 28px, - -2: 24px, - ), - $scale - ) - ); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_dialog.scss b/src/material/core/tokens/m2/mdc/_dialog.scss deleted file mode 100644 index ba24ed8d343c..000000000000 --- a/src/material/core/tokens/m2/mdc/_dialog.scss +++ /dev/null @@ -1,106 +0,0 @@ -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, dialog); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. -@function get-unthemable-tokens() { - @return ( - // Border radius of the container. - container-shape: 4px, - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - container-elevation: null, - container-shadow-color: null, - with-divider-divider-height: null, - with-divider-divider-color: null, - with-icon-icon-size: null, - with-icon-icon-color: null, - action-label-text-font: null, - action-label-text-line-height: null, - action-label-text-size: null, - action-label-text-weight: null, - action-label-text-tracking: null, - action-label-text-color: null, - action-hover-state-layer-color: null, - action-hover-state-layer-opacity: null, - action-hover-label-text-color: null, - action-focus-state-layer-color: null, - action-focus-state-layer-opacity: null, - action-focus-label-text-color: null, - action-pressed-state-layer-color: null, - action-pressed-state-layer-opacity: null, - action-pressed-label-text-color: null, - headline-color: null, - headline-font: null, - headline-line-height: null, - headline-size: null, - headline-tracking: null, - headline-weight: null, - z-index: null, - container-surface-tint-layer-color: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - $is-dark: inspection.get-theme-type($theme) == dark; - - // Ideally we would derive all values directly from the theme, but it causes a lot of regressions - // internally. For now we fall back to the old hardcoded behavior only for internal apps. - $text-base: if(token-definition.$private-is-internal-build, - if($is-dark, #fff, #000), - inspection.get-theme-color($theme, foreground, text, 1) - ); - - @return ( - // Background color of the container. - container-color: inspection.get-theme-color($theme, background, dialog), - // Color of the dialog header. - subhead-color: sass-utils.safe-color-change($text-base, $alpha: 0.87), - // Color of the dialog body text. - supporting-text-color: sass-utils.safe-color-change($text-base, $alpha: 0.6), - ); -} - -// Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($theme) { - @return ( - // Typography of the dialog header. - subhead-font: inspection.get-theme-typography($theme, headline-6, font-family), - subhead-line-height: inspection.get-theme-typography($theme, headline-6, line-height), - subhead-size: inspection.get-theme-typography($theme, headline-6, font-size), - subhead-weight: inspection.get-theme-typography($theme, headline-6, font-weight), - subhead-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing), - // Typography of the dialog body text. - supporting-text-font: inspection.get-theme-typography($theme, body-1, font-family), - supporting-text-line-height: inspection.get-theme-typography($theme, body-1, line-height), - supporting-text-size: inspection.get-theme-typography($theme, body-1, font-size), - supporting-text-weight: inspection.get-theme-typography($theme, body-1, font-weight), - supporting-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing), - ); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - @return (); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_fab-small.scss b/src/material/core/tokens/m2/mdc/_fab-small.scss deleted file mode 100644 index 8e97e7c7b8c4..000000000000 --- a/src/material/core/tokens/m2/mdc/_fab-small.scss +++ /dev/null @@ -1,89 +0,0 @@ -@use 'sass:map'; -@use '../../../theming/inspection'; -@use '../../../style/elevation'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, fab-small); - -@function get-unthemable-tokens() { - @return ( - container-shape: 50%, - container-elevation-shadow: elevation.get-box-shadow(6), - focus-container-elevation-shadow: elevation.get-box-shadow(8), - hover-container-elevation-shadow: elevation.get-box-shadow(8), - pressed-container-elevation-shadow: elevation.get-box-shadow(12), - - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - container-height: null, - container-width: null, - icon-size: null, - icon-color: null, - - focus-icon-color: null, - focus-outline-color: null, - focus-outline-width: null, - focus-state-layer-color: null, - - hover-icon-color: null, - hover-state-layer-color: null, - - lowered-container-elevation: null, - lowered-focus-container-elevation: null, - lowered-hover-container-elevation: null, - lowered-pressed-container-elevation: null, - - pressed-icon-color: null, - pressed-ripple-color: null, - pressed-ripple-opacity: null, - pressed-state-layer-color: null, - - container-elevation: null, - focus-container-elevation: null, - hover-container-elevation: null, - pressed-container-elevation: null, - container-shadow-color: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - @return ( - // Background color of the FAB. - container-color: inspection.get-theme-color($theme, background, card), - ); -} - -// Generates the mapping for the properties that change based on the FAB palette color. -@function private-get-color-palette-color-tokens($theme, $palette-name) { - @return ( - container-color: inspection.get-theme-color($theme, $palette-name, default), - ); -} - -// Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($theme) { - @return (); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - @return (); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return map.merge( - get-unthemable-tokens(), - map.merge( - get-color-tokens(token-definition.$placeholder-color-config), - map.merge( - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ) - ) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_fab.scss b/src/material/core/tokens/m2/mdc/_fab.scss deleted file mode 100644 index 2fd39d645f9f..000000000000 --- a/src/material/core/tokens/m2/mdc/_fab.scss +++ /dev/null @@ -1,90 +0,0 @@ -@use 'sass:map'; -@use '../../../theming/inspection'; -@use '../../../style/elevation'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, fab); - -@function get-unthemable-tokens() { - @return ( - container-shape: 50%, - container-elevation-shadow: elevation.get-box-shadow(6), - focus-container-elevation-shadow: elevation.get-box-shadow(8), - hover-container-elevation-shadow: elevation.get-box-shadow(8), - pressed-container-elevation-shadow: elevation.get-box-shadow(12), - - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - container-height: null, - container-surface-tint-layer-color: null, - container-width: null, - icon-size: null, - icon-color: null, - - focus-icon-color: null, - focus-outline-color: null, - focus-outline-width: null, - focus-state-layer-color: null, - - hover-icon-color: null, - hover-state-layer-color: null, - - lowered-container-elevation: null, - lowered-focus-container-elevation: null, - lowered-hover-container-elevation: null, - lowered-pressed-container-elevation: null, - - pressed-icon-color: null, - pressed-ripple-color: null, - pressed-ripple-opacity: null, - pressed-state-layer-color: null, - - container-elevation: null, - focus-container-elevation: null, - hover-container-elevation: null, - pressed-container-elevation: null, - container-shadow-color: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - @return ( - // Background color of the FAB. - container-color: inspection.get-theme-color($theme, background, card), - ); -} - -// Generates the mapping for the properties that change based on the FAB palette color. -@function private-get-color-palette-color-tokens($theme, $palette-name) { - @return ( - container-color: inspection.get-theme-color($theme, $palette-name, default), - ); -} - -// Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($theme) { - @return (); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - @return (); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return map.merge( - get-unthemable-tokens(), - map.merge( - get-color-tokens(token-definition.$placeholder-color-config), - map.merge( - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ) - ) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_filled-button.scss b/src/material/core/tokens/m2/mdc/_filled-button.scss deleted file mode 100644 index 715efbc8eaf6..000000000000 --- a/src/material/core/tokens/m2/mdc/_filled-button.scss +++ /dev/null @@ -1,118 +0,0 @@ -@use 'sass:map'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; -@use '../../../theming/inspection'; -@use '../../../theming/theming'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, filled-button); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. -@function get-unthemable-tokens() { - @return ( - container-shape: 4px, - - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - focus-ring-color: null, - focus-ring-offset: null, - container-shadow-color: null, - container-elevation: null, - disabled-container-elevation: null, - focus-container-elevation: null, - hover-container-elevation: null, - keep-touch-target: false, - pressed-container-elevation: null, - focus-label-text-color: null, - hover-label-text-color: null, - pressed-label-text-color: null, - with-icon-disabled-icon-color: null, - with-icon-focus-icon-color: null, - with-icon-hover-icon-color: null, - with-icon-icon-color: null, - with-icon-icon-size: null, - with-icon-pressed-icon-color: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - $is-dark: inspection.get-theme-type($theme) == dark; - - @return ( - container-color: inspection.get-theme-color($theme, background, card), - label-text-color: inspection.get-theme-color($theme, foreground, text, 1), - disabled-container-color: inspection.get-theme-color($theme, foreground, disabled-button, - 0.12), - disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button, - if($is-dark, 0.5, 0.38)), - ); -} - -// Generates the mapping for the properties that change based on the button palette color. -@function private-get-color-palette-color-tokens($theme, $palette-name) { - $container-color: inspection.get-theme-color($theme, $palette-name, default); - $label-text-color: null; - - // Ideally we would derive all values directly from the theme, but it causes a lot of regressions - // internally. For now we fall back to the old hardcoded behavior only for internal apps. - @if (token-definition.$private-is-internal-build) { - $is-dark: inspection.get-theme-type($theme) == dark; - $contrast-tone: token-definition.contrast-tone($container-color, $is-dark); - $label-text-color: if($contrast-tone == 'dark', #000, #fff); - } - @else { - $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1); - } - - @return ( - container-color: $container-color, - label-text-color: $label-text-color, - ); -} - -// 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, button, font-family), - label-text-size: inspection.get-theme-typography($theme, button, font-size), - label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), - label-text-weight: inspection.get-theme-typography($theme, button, font-weight), - label-text-transform: none, - ); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); - - @return ( - container-height: - map.get( - ( - 0: 36px, - -1: 32px, - -2: 28px, - -3: 24px, - ), - $scale - ) - ); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_icon-button.scss b/src/material/core/tokens/m2/mdc/_icon-button.scss deleted file mode 100644 index a334ba0a61ed..000000000000 --- a/src/material/core/tokens/m2/mdc/_icon-button.scss +++ /dev/null @@ -1,88 +0,0 @@ -@use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, icon-button); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. -@function get-unthemable-tokens() { - @return ( - // MDC's icon size applied to svg and img elements inside the component - icon-size: 24px, - - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - // State layer is unused - focus-icon-color: null, - focus-state-layer-color: null, - hover-icon-color: null, - hover-state-layer-color: null, - pressed-icon-color: null, - pressed-state-layer-color: null, - focus-ring-color: null, - focus-ring-offset: null, - - // We use a color with an opacity to show the disabled state, - // instead of applying it to the entire button. - disabled-icon-opacity: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - $is-dark: inspection.get-theme-type($theme) == dark; - - @return ( - icon-color: inherit, - disabled-icon-color: if($is-dark, rgba(#fff, 0.5), rgba(#000, 0.38)), - ); -} - -// Generates the mapping for the properties that change based on the button palette color. -@function private-get-color-palette-color-tokens($theme, $palette-name) { - @return ( - icon-color: inspection.get-theme-color($theme, $palette-name) - ); -} - -// Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($theme) { - @return (); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - $scale: theming.clamp-density(inspection.get-theme-density($theme), -5); - - @return ( - // The diameter of the checkbox's ripple. - state-layer-size: map.get(( - 0: 48px, - -1: 44px, - -2: 40px, - -3: 36px, - -4: 32px, - -5: 28px, - ), $scale) - ); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_list.scss b/src/material/core/tokens/m2/mdc/_list.scss deleted file mode 100644 index 45dd61cfd7c3..000000000000 --- a/src/material/core/tokens/m2/mdc/_list.scss +++ /dev/null @@ -1,219 +0,0 @@ -@use 'sass:map'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, list); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. -@function get-unthemable-tokens() { - @return ( - // Border radius of list items. - list-item-container-shape: 0, - // Border radius of the list item's leading avatar. - list-item-leading-avatar-shape: 50%, - // Background color of list items. - list-item-container-color: transparent, - // Background color of list items when selected. - list-item-selected-container-color: transparent, - // Background color of the list item's leading avatar. - list-item-leading-avatar-color: transparent, - // Height & width of the list item's leading icon. - list-item-leading-icon-size: 24px, - // Height & width of the list item's leading avatar. - list-item-leading-avatar-size: 40px, - // Height & width of the list item's trailing icon. - list-item-trailing-icon-size: 24px, - // Color of the list item's overlay when the item is disabled. - list-item-disabled-state-layer-color: transparent, - // Opacity of the list item's overlay when the item is disabled. - list-item-disabled-state-layer-opacity: 0, - // Opacity of the list item's primary & supporting text when the item is disabled. - list-item-disabled-label-text-opacity: 0.38, - // Opacity of the list item's leading icon when the item is disabled. - list-item-disabled-leading-icon-opacity: 0.38, - // Opacity of the list item's trailing icon when the item is disabled. - list-item-disabled-trailing-icon-opacity: 0.38, - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - // Overline not implemented in Angular Material. - // TODO(mmalerba): Consider implementing in the future. - list-item-overline-color: null, - list-item-overline-font: null, - list-item-overline-line-height: null, - list-item-overline-size: null, - list-item-overline-tracking: null, - list-item-overline-weight: null, - // Leading video not implemented in Angular Material. - // TODO(mmalerba): Consider implementing in the future. - list-item-leading-video-shape: null, - list-item-leading-video-width: null, - list-item-leading-video-height: null, - // Leading image not implemented in Angular Material. - // TODO(mmalerba): Consider implementing in the future. - list-item-leading-image-width: null, - list-item-leading-image-height: null, - list-item-leading-image-shape: null, - // List divider is not implemented in Angular Material. - // TODO(mmalerba): Maybe mat-divider should be based on these tokens? - divider-color: null, - divider-height: null, - // Redundant since it is always overridden by one- two- or three- line tokens, omitted to save - // bytes. - list-item-container-height: null, - // MDC does not seem to emit any CSS variables for these tokens, may be use in the future. - // TODO(mmalerba): Discuss with MDC if these should be added. - list-item-container-elevation: null, - list-item-leading-avatar-label-color: null, - list-item-leading-avatar-label-font: null, - list-item-leading-avatar-label-line-height: null, - list-item-leading-avatar-label-size: null, - list-item-leading-avatar-label-tracking: null, - list-item-leading-avatar-label-weight: null, - list-item-unselected-trailing-icon-color: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - $is-dark: inspection.get-theme-type($theme) == dark; - $foreground-base: inspection.get-theme-color($theme, foreground, base); - $foreground-text: inspection.get-theme-color($theme, foreground, text); - $foreground-secondary-text: inspection.get-theme-color($theme, foreground, secondary-text); - $foreground-hint-text: inspection.get-theme-color($theme, foreground, hint-text); - $text-icon-on-background: sass-utils.safe-color-change( - $foreground-base, $alpha: if($is-dark, 0.5, 0.38)); - - @return ( - // Text color of the list item primary text. - list-item-label-text-color: $foreground-text, - // Text color of the list item supporting text. - list-item-supporting-text-color: $foreground-secondary-text, - // Color of the list item's leading icon. - list-item-leading-icon-color: $text-icon-on-background, - // Text color of the list item's trailing text. - list-item-trailing-supporting-text-color: $foreground-hint-text, - // Color of the list item's trailing icon. - list-item-trailing-icon-color: $text-icon-on-background, - // Color of the list item's trailing icon when the item is selected. - list-item-selected-trailing-icon-color: $text-icon-on-background, - // Text color of the list item's primary text when the item is disabled. - list-item-disabled-label-text-color: $foreground-base, - // Color of the list item's leading icon when the item is disabled. - list-item-disabled-leading-icon-color: $foreground-base, - // Color of the list item's trailing icon when the item is disabled. - list-item-disabled-trailing-icon-color: $foreground-base, - // Color of the list item's primary text when the item is being hovered. - list-item-hover-label-text-color: $foreground-text, - // Color of the list item's leading icon when the item is being hovered. - list-item-hover-leading-icon-color: $text-icon-on-background, - // Color of the list item's trailing icon when the item is being hovered. - list-item-hover-trailing-icon-color: $text-icon-on-background, - // Color of the list item's primary text when the item is focused. - list-item-focus-label-text-color: $foreground-text, - // Color of the list item's overlay when the item is hovered. - list-item-hover-state-layer-color: $foreground-base, - // Opacity of the list item's overlay when the item is hovered. - list-item-hover-state-layer-opacity: if($is-dark, 0.08, 0.04), - // Color of the list item's overlay when the item is focused. - list-item-focus-state-layer-color: $foreground-base, - // Opacity of the list item's overlay when the item is focused. - list-item-focus-state-layer-opacity: if($is-dark, 0.24, 0.12), - ); -} - -// Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($theme) { - @return ( - // Font family of the list item primary text. - list-item-label-text-font: inspection.get-theme-typography($theme, body-1, font-family), - // Line height of the list item primary text. - list-item-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height), - // Font size of the list item primary text. - list-item-label-text-size: inspection.get-theme-typography($theme, body-1, font-size), - // Letter spacing of the list item primary text. - list-item-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing), - // Font weight of the list item primary text. - list-item-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight), - // Font family of the list item supporting text. - list-item-supporting-text-font: inspection.get-theme-typography($theme, body-2, font-family), - // Line height of the list item supporting text. - list-item-supporting-text-line-height:inspection.get-theme-typography( - $theme, body-2, line-height), - // Font size of the list item supporting text. - list-item-supporting-text-size: inspection.get-theme-typography($theme, body-2, font-size), - // Letter spacing of the list item supporting text. - list-item-supporting-text-tracking: inspection.get-theme-typography( - $theme, body-2, letter-spacing), - // Font weight of the list item supporting text. - list-item-supporting-text-weight: inspection.get-theme-typography($theme, body-2, font-weight), - // Font family of the list item's trailing text. - list-item-trailing-supporting-text-font: inspection.get-theme-typography( - $theme, caption, font-family), - // Line height of the list item's trailing text. - list-item-trailing-supporting-text-line-height: inspection.get-theme-typography( - $theme, caption, line-height), - // Font size of the list item's trailing text. - list-item-trailing-supporting-text-size: inspection.get-theme-typography( - $theme, caption, font-size), - // Letter spacing color of the list item's trailing text. - list-item-trailing-supporting-text-tracking: inspection.get-theme-typography( - $theme, caption, letter-spacing), - // Font weight of the list item's trailing text. - list-item-trailing-supporting-text-weight: inspection.get-theme-typography( - $theme, caption, font-weight), - ); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - $scale: inspection.get-theme-density($theme); - - @return ( - // Height of one line list items. - list-item-one-line-container-height: map.get(( - 0: 48px, - -1: 44px, - -2: 40px, - -3: 36px, - -4: 32px, - -5: 24px, - ), $scale), - // Height of two line list items. - list-item-two-line-container-height: map.get(( - 0: 64px, - -1: 60px, - -2: 56px, - -3: 52px, - -4: 48px, - -5: 48px, - ), $scale), - // Height of three line list items. - list-item-three-line-container-height: map.get(( - 0: 88px, - -1: 84px, - -2: 80px, - -3: 76px, - -4: 72px, - -5: 56px, - ), $scale), - ); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_outlined-button.scss b/src/material/core/tokens/m2/mdc/_outlined-button.scss deleted file mode 100644 index 901303712ac9..000000000000 --- a/src/material/core/tokens/m2/mdc/_outlined-button.scss +++ /dev/null @@ -1,120 +0,0 @@ -@use 'sass:map'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; -@use '../../../theming/inspection'; -@use '../../../theming/theming'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, outlined-button); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. -@function get-unthemable-tokens() { - @return ( - keep-touch-target: false, - - outline-width: 1px, - container-shape: 4px, - - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - focus-state-layer-color: null, - hover-state-layer-color: null, - pressed-state-layer-color: null, - - hover-label-text-color: null, - focus-label-text-color: null, - pressed-label-text-color: null, - - hover-outline-color: null, - focus-outline-color: null, - pressed-outline-color: null, - - focus-ring-color: null, - focus-ring-offset: null, - - with-icon-icon-size: null, - with-icon-icon-color: null, - with-icon-hover-icon-color: null, - with-icon-focus-icon-color: null, - with-icon-pressed-icon-color: null, - with-icon-disabled-icon-color: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - $is-dark: inspection.get-theme-type($theme) == dark; - - // Ideally we would derive all values directly from the theme, but it causes a lot of regressions - // internally. For now we fall back to the old hardcoded behavior only for internal apps. - $outline: if(token-definition.$private-is-internal-build, - rgba(if($is-dark, #fff, #000), 0.12), - inspection.get-theme-color($theme, foreground, divider) - ); - - @return ( - disabled-outline-color: $outline, - disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button, - if($is-dark, 0.5, 0.38)), - label-text-color: inspection.get-theme-color($theme, foreground, text, 1), - outline-color: $outline, - ); -} - -// Generates the mapping for the properties that change based on the button palette color. -@function private-get-color-palette-color-tokens($theme, $palette-name) { - @return ( - label-text-color: inspection.get-theme-color($theme, $palette-name, default), - - // TODO: we shouldn't have to set this since it's the same as the non-palette version, however - // there are a bunch of tests internally that depend on it. We should remove this and clean - // up the screenshots separately. - outline-color: map.get(get-color-tokens($theme), outline-color), - ); -} - -// 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, button, font-family), - label-text-size: inspection.get-theme-typography($theme, button, font-size), - label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), - label-text-weight: inspection.get-theme-typography($theme, button, font-weight), - label-text-transform: none, - ); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); - - @return ( - container-height: - map.get( - ( - 0: 36px, - -1: 32px, - -2: 28px, - -3: 24px, - ), - $scale - ) - ); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_protected-button.scss b/src/material/core/tokens/m2/mdc/_protected-button.scss deleted file mode 100644 index 01be282dd431..000000000000 --- a/src/material/core/tokens/m2/mdc/_protected-button.scss +++ /dev/null @@ -1,126 +0,0 @@ -@use 'sass:map'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; -@use '../../../style/elevation'; -@use '../../../theming/inspection'; -@use '../../../theming/theming'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, protected-button); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. -@function get-unthemable-tokens() { - @return ( - container-shape: 4px, - container-elevation-shadow: elevation.get-box-shadow(2), - disabled-container-elevation-shadow: elevation.get-box-shadow(0), - focus-container-elevation-shadow: elevation.get-box-shadow(4), - hover-container-elevation-shadow: elevation.get-box-shadow(4), - pressed-container-elevation-shadow: elevation.get-box-shadow(8), - - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - focus-ring-color: null, - focus-ring-offset: null, - with-icon-icon-size: null, - focus-label-text-color: null, - hover-label-text-color: null, - pressed-label-text-color: null, - with-icon-disabled-icon-color: null, - with-icon-focus-icon-color: null, - with-icon-hover-icon-color: null, - with-icon-icon-color: null, - with-icon-pressed-icon-color: null, - focus-state-layer-color: null, - hover-state-layer-color: null, - pressed-state-layer-color: null, - keep-touch-target: null, - container-elevation: null, - disabled-container-elevation: null, - focus-container-elevation: null, - hover-container-elevation: null, - pressed-container-elevation: null, - container-shadow-color: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - $is-dark: inspection.get-theme-type($theme) == dark; - - @return ( - container-color: inspection.get-theme-color($theme, background, card), - label-text-color: inspection.get-theme-color($theme, foreground, text, 1), - disabled-container-color: inspection.get-theme-color($theme, foreground, disabled-button, - 0.12), - disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button, - if($is-dark, 0.5, 0.38)), - ); -} - -// Generates the mapping for the properties that change based on the button palette color. -@function private-get-color-palette-color-tokens($theme, $palette-name) { - $container-color: inspection.get-theme-color($theme, $palette-name, default); - $label-text-color: null; - - // Ideally we would derive all values directly from the theme, but it causes a lot of regressions - // internally. For now we fall back to the old hardcoded behavior only for internal apps. - @if (token-definition.$private-is-internal-build) { - $is-dark: inspection.get-theme-type($theme) == dark; - $contrast-tone: token-definition.contrast-tone($container-color, $is-dark); - $label-text-color: if($contrast-tone == 'dark', #000, #fff); - } - @else { - $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1); - } - - @return ( - container-color: $container-color, - label-text-color: $label-text-color, - ); -} - -// 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, button, font-family), - label-text-size: inspection.get-theme-typography($theme, button, font-size), - label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), - label-text-weight: inspection.get-theme-typography($theme, button, font-weight), - label-text-transform: none, - ); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); - @return ( - container-height: - map.get( - ( - 0: 36px, - -1: 32px, - -2: 28px, - -3: 24px, - ), - $scale - ) - ); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_radio.scss b/src/material/core/tokens/m2/mdc/_radio.scss deleted file mode 100644 index 67e914c73742..000000000000 --- a/src/material/core/tokens/m2/mdc/_radio.scss +++ /dev/null @@ -1,93 +0,0 @@ -@use 'sass:map'; -@use '../../../m2/palette' as m2-palette; -@use '../../../m2/theming' as m2-theming; -@use '../../../theming/theming'; -@use '../../../theming/inspection'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, radio); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. -@function get-unthemable-tokens() { - @return ( - disabled-selected-icon-opacity: 0.38, - disabled-unselected-icon-opacity: 0.38, - // This is specified both here and in the density tokens, because it - // determines the size of the radio button itself and there are internal - // tests who don't configure the theme correctly. - state-layer-size: 40px, - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - selected-focus-state-layer-color: null, - selected-focus-state-layer-opacity: null, - selected-hover-state-layer-color: null, - selected-hover-state-layer-opacity: null, - selected-pressed-state-layer-color: null, - selected-pressed-state-layer-opacity: null, - unselected-focus-state-layer-color: null, - unselected-focus-state-layer-opacity: null, - unselected-hover-state-layer-color: null, - unselected-hover-state-layer-opacity: null, - unselected-pressed-state-layer-color: null, - unselected-pressed-state-layer-opacity: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme, $palette-name: accent) { - $is-dark: inspection.get-theme-type($theme) == dark; - $palette-color: inspection.get-theme-color($theme, $palette-name, default); - $icon-color: m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900)); - - @return ( - disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1), - disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1), - unselected-hover-icon-color: $icon-color, - unselected-focus-icon-color: $icon-color, - unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54), - unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54), - selected-focus-icon-color: $palette-color, - selected-hover-icon-color: $palette-color, - selected-icon-color: $palette-color, - selected-pressed-icon-color: $palette-color, - ); -} - -// Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($theme) { - @return (); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); - - @return ( - // The diameter of the radio's ripple. - state-layer-size: map.get(( - 0: 40px, - -1: 36px, - -2: 32px, - -3: 28px, - ), $scale) - ); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_slider.scss b/src/material/core/tokens/m2/mdc/_slider.scss deleted file mode 100644 index 8255733ae05f..000000000000 --- a/src/material/core/tokens/m2/mdc/_slider.scss +++ /dev/null @@ -1,144 +0,0 @@ -@use 'sass:map'; -@use '../../../theming/inspection'; -@use '../../token-definition'; -@use '../../../style/elevation'; -@use '../../../style/sass-utils'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, slider); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. -@function get-unthemable-tokens() { - @return ( - // Height of active track. - active-track-height: 6px, - // Border radius of active track. - active-track-shape: 9999px, - // Height of handle. - handle-height: 20px, - // Border radius of handle. - handle-shape: 50%, - // Width of handle. - handle-width: 20px, - // Height of inactive track. - inactive-track-height: 4px, - // Border radius of inactive track. - inactive-track-shape: 9999px, - // Width of handle when overlapping with another handle below it. - with-overlap-handle-outline-width: 1px, - // Opacity of active container with tick marks. - with-tick-marks-active-container-opacity: 0.6, - // Border radius of container with tick marks. - with-tick-marks-container-shape: 50%, - // Size of container with tick marks. - with-tick-marks-container-size: 2px, - // Opacity of inactive container with tick marks. - with-tick-marks-inactive-container-opacity: 0.6, - // Elevation for the handle. - handle-elevation: elevation.get-box-shadow(1), - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - disabled-handle-elevation: null, - label-container-elevation: null, - label-container-height: null, - track-elevation: null, - focus-state-layer-opacity: null, - hover-state-layer-opacity: null, - pressed-state-layer-opacity: null, - handle-shadow-color: null, - // MDC does not seem to use these tokens. - hover-state-layer-color: null, - pressed-handle-color: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - $elevation: inspection.get-theme-color($theme, foreground, elevation); - $is-dark: inspection.get-theme-type($theme) == dark; - $on-surface: if($is-dark, #fff, #000); - - // The default for tokens that rely on the theme will use the primary palette - $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary); - - @return map.merge( - $theme-color-tokens, - ( - // Color of active track when disabled. - disabled-active-track-color: $on-surface, - // Color of handle when disabled. - disabled-handle-color: $on-surface, - // Color of inactive track when disabled. - disabled-inactive-track-color: $on-surface, - // Color of container label. - label-container-color: $on-surface, - // Color of label text. - label-label-text-color: if($is-dark, #000, #fff), - // Color of handle outline when overlapping with another handle below it. - with-overlap-handle-outline-color: #fff, - // Color of container with tick marks when disabled. - with-tick-marks-disabled-container-color: $on-surface, - ) - ); -} - -// Generates tokens for the slider properties that change based on the theme. -@function private-get-color-palette-color-tokens($theme, $palette-name) { - $color: inspection.get-theme-color($theme, $palette-name); - $on-color: inspection.get-theme-color($theme, $palette-name, default-contrast); - - @return ( - // Color of handle. - handle-color: $color, - // Color of handle when focused. - focus-handle-color: $color, - // Color of handle on hover. - hover-handle-color: $color, - // Color of handle when active. - active-track-color: $color, - // Color of inactive track. - inactive-track-color: $color, - // Color of inactive container with tick marks. - with-tick-marks-inactive-container-color: $color, - // Color of active container with tick marks. - with-tick-marks-active-container-color: $on-color, - ); -} - -// Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($theme) { - @return ( - // Font for label text. - label-label-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family), - // Font size of label text. - label-label-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size), - // Line height of label text. - label-label-text-line-height: inspection.get-theme-typography($theme, subtitle-2, line-height), - // Letter spacing of label text. - label-label-text-tracking: inspection.get-theme-typography($theme, subtitle-2, letter-spacing), - // Font weight of label text. - label-label-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight), - ); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - @return (); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_snack-bar.scss b/src/material/core/tokens/m2/mdc/_snack-bar.scss deleted file mode 100644 index 6951e41fed25..000000000000 --- a/src/material/core/tokens/m2/mdc/_snack-bar.scss +++ /dev/null @@ -1,93 +0,0 @@ -@use 'sass:meta'; -@use 'sass:color'; -@use '../../../theming/inspection'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, snack-bar); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. -@function get-unthemable-tokens() { - @return ( - // Sets the snack bar border radius. - container-shape: 4px, - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - // Removed to match the previous appearance. - supporting-text-tracking: null, - // Excluded because they target the wrong DOM node. See the - // comments on the elevation of `.mat-mdc-snack-bar-container`. - container-elevation: null, - container-shadow-color: null, - action-focus-label-text-color: null, - action-focus-state-layer-color: null, - action-focus-state-layer-opacity: null, - action-hover-label-text-color: null, - action-hover-state-layer-color: null, - action-hover-state-layer-opacity: null, - action-label-text-color: null, - action-label-text-font: null, - action-label-text-size: null, - action-label-text-tracking: null, - action-label-text-weight: null, - action-pressed-label-text-color: null, - action-pressed-state-layer-color: null, - action-pressed-state-layer-opacity: null, - icon-color: null, - icon-focus-icon-color: null, - icon-focus-state-layer-color: null, - icon-focus-state-layer-opacity: null, - icon-hover-icon-color: null, - icon-hover-state-layer-color: null, - icon-hover-state-layer-opacity: null, - icon-pressed-icon-color: null, - icon-pressed-state-layer-color: null, - icon-pressed-state-layer-opacity: null, - icon-size: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - $is-dark: inspection.get-theme-type($theme) == dark; - $surface: inspection.get-theme-color($theme, background, card); - - @return ( - container-color: if(meta.type-of($surface) == color, - color.mix(if($is-dark, #fff, #000), $surface, 80%), $surface), - supporting-text-color: if(meta.type-of($surface) == color, rgba($surface, 0.87), $surface) - ); -} - -// Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($theme) { - @return ( - supporting-text-font: inspection.get-theme-typography($theme, body-2, font-family), - supporting-text-line-height: inspection.get-theme-typography($theme, body-2, line-height), - supporting-text-size: inspection.get-theme-typography($theme, body-2, font-size), - supporting-text-weight: inspection.get-theme-typography($theme, body-2, font-weight), - ); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - @return (); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_switch.scss b/src/material/core/tokens/m2/mdc/_switch.scss deleted file mode 100644 index c60d4c722ede..000000000000 --- a/src/material/core/tokens/m2/mdc/_switch.scss +++ /dev/null @@ -1,192 +0,0 @@ -@use 'sass:map'; -@use '../../../style/elevation'; -@use '../../../style/sass-utils'; -@use '../../../theming/inspection'; -@use '../../../theming/theming'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, switch); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. - -@function get-unthemable-tokens() { - @return ( - // Opacity of handle when disabled. - disabled-handle-opacity: null, - // Opacity of icon when disabled and selected. - disabled-selected-icon-opacity: 0.38, - // Opacity of track when disabled. - disabled-track-opacity: 0.12, - // Opacity of icon when disabled and unselected. - disabled-unselected-icon-opacity: 0.38, - // Height of handle. - handle-height: 20px, - // Border radius of handle. - handle-shape: 10px, - // Width of handle. - handle-width: 20px, - // Width and height of icon when selected. - selected-icon-size: 18px, - // Height of track. - track-height: 14px, - // Border radius of track. - track-shape: 7px, - // Width of track. - track-width: 36px, - // Width and height of icon when unselected. - unselected-icon-size: 18px, - // Opacity of ripple when selected and focused. - selected-focus-state-layer-opacity: 0.12, - // Opacity of ripple when selected and on hover. - selected-hover-state-layer-opacity: 0.04, - // Opacity of ripple when selected and pressed. - selected-pressed-state-layer-opacity: 0.1, - // Opacity of ripple when unselected and focused. - unselected-focus-state-layer-opacity: 0.12, - // Opacity of ripple when unselected and on hover. - unselected-hover-state-layer-opacity: 0.04, - // Opacity of ripple when unselected and pressed. - unselected-pressed-state-layer-opacity: 0.1, - - // Unused tokens - handle-elevation: null, - handle-shadow-color: null, - disabled-handle-elevation: null, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - $is-dark: inspection.get-theme-type($theme) == dark; - $on-surface: if($is-dark, #f5f5f5, #424242); - $hairline: if($is-dark, #616161, #e0e0e0); - $on-surface-variant: if($is-dark, #9e9e9e, #616161); - $on-surface-state-content: if($is-dark, #fafafa, #212121); - $disabled-handle-color: if($is-dark, #000, #424242); - $icon-color: if($is-dark, #212121, #fff); - - // The default for tokens that rely on the theme will use the primary palette - $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary); - - @return map.merge( - $theme-color-tokens, - ( - // Color of handle when selected while disabled. - disabled-selected-handle-color: $disabled-handle-color, - // Color of handle when selected while disabled. - disabled-selected-icon-color: $icon-color, - // Color of track when selected while disabled. - disabled-selected-track-color: $on-surface, - // Color of handle when unselected while disabled. - disabled-unselected-handle-color: $disabled-handle-color, - // Color of icon when unselected while disabled. - disabled-unselected-icon-color: $icon-color, - // Color of track when disabled. - disabled-unselected-track-color: $on-surface, - // TODO(crisbeto): `handle-surface-color` was hardcoded to `var(--mat-surface-color, #fff)` - // which made it basically hardcoded to #fff. Should it be based on the theme? - // Color of slide-toggle handle's surface. - handle-surface-color: #fff, - // Color of icon (ex. checkmark) when selected - selected-icon-color: $icon-color, - // Color of handle when unselected and focused. - unselected-focus-handle-color: $on-surface-state-content, - // Color of ripple when unselected and focused. - unselected-focus-state-layer-color: $on-surface, - // Color of track when unselected and focused. - unselected-focus-track-color: $hairline, - // Color of handle when unselected. - unselected-handle-color: $on-surface-variant, - // Color of handle when unselected and on hover. - unselected-hover-handle-color: $on-surface-state-content, - // Color of ripple when unselected and on hover. - unselected-hover-state-layer-color: $on-surface, - // Color of track when unselected and on hover. - unselected-hover-track-color: $hairline, - // Color of icon color when unselected. - unselected-icon-color: $icon-color, - // Color of handle when unselected and pressed. - unselected-pressed-handle-color: $on-surface-state-content, - // Color of ripple when unselected and pressed. - unselected-pressed-state-layer-color: $on-surface, - // Color of track when unselected and pressed. - unselected-pressed-track-color: $hairline, - // Color of track when selected. - unselected-track-color: $hairline, - // Elevation level for handle. - handle-elevation-shadow: elevation.get-box-shadow(1), - // Elevation level for handle when disabled. - disabled-handle-elevation-shadow: elevation.get-box-shadow(0), - ) - ); -} - -// Generates the mapping for the properties that change based on the slide toggle color. -@function private-get-color-palette-color-tokens($theme, $palette-name) { - $is-dark: inspection.get-theme-type($theme) == dark; - $palette-color: inspection.get-theme-color($theme, $palette-name, if($is-dark, 300, 600)); - $state-content: inspection.get-theme-color($theme, $palette-name, if($is-dark, 200, 900)); - $inverse: inspection.get-theme-color($theme, $palette-name, if($is-dark, 600, 300)); - - @return ( - // Color of ripple when selected and focused. - selected-focus-state-layer-color: $palette-color, - // Color of handle when selected - selected-handle-color: $palette-color, - // Color of ripple when selected and on hover. - selected-hover-state-layer-color: $palette-color, - // Color of ripple when selected and pressed. - selected-pressed-state-layer-color: $palette-color, - // Color of handle when selected and focused. - selected-focus-handle-color: $state-content, - // Color of handle when selected and on hover. - selected-hover-handle-color: $state-content, - // Color of handle when selected and pressed. - selected-pressed-handle-color: $state-content, - // Color of track when selected and focused. - selected-focus-track-color: $inverse, - // Color of track when selected and on hover. - selected-hover-track-color: $inverse, - /// Color of track when selected and pressed. - selected-pressed-track-color: $inverse, - // Color of track when selected. - selected-track-color: $inverse, - ); -} - -// Tokens that can be configured through Angular Material's typography theming API. -@function get-typography-tokens($theme) { - @return (); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); - - @return ( - // The diameter of the handle ripple. - state-layer-size: map.get(( - 0: 40px, - -1: 36px, - -2: 32px, - -3: 28px, - ), $scale) - ); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/core/tokens/m2/mdc/_text-button.scss b/src/material/core/tokens/m2/mdc/_text-button.scss deleted file mode 100644 index 10ef6438bce2..000000000000 --- a/src/material/core/tokens/m2/mdc/_text-button.scss +++ /dev/null @@ -1,95 +0,0 @@ -@use 'sass:map'; -@use '../../token-definition'; -@use '../../../style/sass-utils'; -@use '../../../theming/inspection'; -@use '../../../theming/theming'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, text-button); - -// Tokens that can't be configured through Angular Material's current theming API, -// but may be in a future version of the theming API. -// -// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`. -// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in -// our CSS. -@function get-unthemable-tokens() { - @return ( - container-shape: 4px, - - // ============================================================================================= - // = TOKENS NOT USED IN ANGULAR MATERIAL = - // ============================================================================================= - hover-label-text-color: null, - focus-label-text-color: null, - pressed-label-text-color: null, - focus-state-layer-color: null, - hover-state-layer-color: null, - pressed-state-layer-color: null, - with-icon-disabled-icon-color: null, - with-icon-focus-icon-color: null, - with-icon-hover-icon-color: null, - with-icon-icon-color: null, - with-icon-icon-size: null, - with-icon-pressed-icon-color: null, - focus-ring-color: null, - focus-ring-offset: null, - keep-touch-target: false, - ); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { - $is-dark: inspection.get-theme-type($theme) == dark; - - @return ( - label-text-color: inspection.get-theme-color($theme, foreground, text, 1), - disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button, - if($is-dark, 0.5, 0.38)), - ); -} - -// Generates the mapping for the properties that change based on the button palette color. -@function private-get-color-palette-color-tokens($theme, $palette-name) { - $palette: map.get($theme, $palette-name); - - @return ( - label-text-color: inspection.get-theme-color($theme, $palette-name) - ); -} - -// 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, button, font-family), - label-text-size: inspection.get-theme-typography($theme, button, font-size), - label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), - label-text-weight: inspection.get-theme-typography($theme, button, font-weight), - label-text-transform: none, - ); -} - -// Tokens that can be configured through Angular Material's density theming API. -@function get-density-tokens($theme) { - $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); - - @return ( - container-height: map.get(( - 0: 36px, - -1: 32px, - -2: 28px, - -3: 24px, - ), $scale), - ); -} - -// Combines the tokens generated by the above functions into a single map with placeholder values. -// This is used to create token slots. -@function get-token-slots() { - @return sass-utils.deep-merge-all( - get-unthemable-tokens(), - get-color-tokens(token-definition.$placeholder-color-config), - get-typography-tokens(token-definition.$placeholder-typography-config), - get-density-tokens(token-definition.$placeholder-density-config) - ); -} diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss index f33dd9fa5507..784919b4e119 100644 --- a/src/material/dialog/_dialog-theme.scss +++ b/src/material/dialog/_dialog-theme.scss @@ -1,6 +1,5 @@ @use 'sass:map'; @use '../core/style/sass-utils'; -@use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog; @use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog; @use '../core/tokens/token-utils'; @use '../core/theming/theming'; @@ -14,10 +13,6 @@ } @else { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-dialog.$prefix, - tokens-mdc-dialog.get-unthemable-tokens() - ); @include token-utils.create-token-values-mixed( tokens-mat-dialog.$prefix, tokens-mat-dialog.get-unthemable-tokens() @@ -31,10 +26,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-dialog.$prefix, - tokens-mdc-dialog.get-color-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-dialog.$prefix, tokens-mat-dialog.get-color-tokens($theme) @@ -48,10 +39,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-dialog.$prefix, - tokens-mdc-dialog.get-typography-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-dialog.$prefix, tokens-mat-dialog.get-typography-tokens($theme) @@ -70,10 +57,6 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { @return ( - ( - namespace: tokens-mdc-dialog.$prefix, - tokens: tokens-mdc-dialog.get-token-slots(), - ), ( namespace: tokens-mat-dialog.$prefix, tokens: tokens-mat-dialog.get-token-slots(), @@ -109,10 +92,6 @@ 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); @if ($tokens != ()) { - @include token-utils.create-token-values( - tokens-mdc-dialog.$prefix, - map.get($tokens, tokens-mdc-dialog.$prefix) - ); @include token-utils.create-token-values( tokens-mat-dialog.$prefix, map.get($tokens, tokens-mat-dialog.$prefix) diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss index 33e2560d527e..3446cc3a3d26 100644 --- a/src/material/dialog/dialog.scss +++ b/src/material/dialog/dialog.scss @@ -1,5 +1,4 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog; @use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog; @use '../core/tokens/token-utils'; @use '../core/style/variables'; @@ -27,12 +26,6 @@ $_emit-fallbacks: true; } } -@mixin _use-mdc-tokens { - @include token-utils.use-tokens(tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-token-slots()) { - @content; - } -} - // Note that we disable fallback declarations, but we don't disable fallback // values, because there are a lot of internal apps that don't include a proper // theme in their tests. @@ -116,7 +109,7 @@ $_emit-fallbacks: true; $_emit-fallbacks); } - @include _use-mdc-tokens { + @include _use-mat-tokens { @include token-utils.create-token-slot(border-radius, container-shape, $_emit-fallbacks); @include token-utils.create-token-slot(background-color, container-color, $_emit-fallbacks); } @@ -177,7 +170,7 @@ $_emit-fallbacks: true; // Nested to maintain the old specificity. .mat-mdc-dialog-container & { - @include _use-mdc-tokens { + @include _use-mat-tokens { @include token-utils.create-token-slot(color, subhead-color, $_emit-fallbacks); @include token-utils.create-token-slot(font-family, subhead-font, if($_emit-fallbacks, inherit, null)); @@ -207,7 +200,7 @@ $_emit-fallbacks: true; // Nested to maintain the old specificity. .mat-mdc-dialog-container & { - @include _use-mdc-tokens { + @include _use-mat-tokens { @include token-utils.create-token-slot(color, supporting-text-color, $_emit-fallbacks); @include token-utils.create-token-slot(font-family, supporting-text-font, if($_emit-fallbacks, inherit, null)); diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss index 13ecaffad535..735d0eb179cd 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -1,5 +1,5 @@ -@use '../core/tokens/m2/mdc/filled-text-field' as tokens-mdc-filled-text-field; -@use '../core/tokens/m2/mdc/outlined-text-field' as tokens-mdc-outlined-text-field; +@use '../core/tokens/m2/mat/filled-text-field' as tokens-mat-filled-text-field; +@use '../core/tokens/m2/mat/outlined-text-field' as tokens-mat-outlined-text-field; @use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field; @use '../core/theming/theming'; @use '../core/theming/inspection'; @@ -17,12 +17,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-filled-text-field.$prefix, - tokens-mdc-filled-text-field.get-unthemable-tokens() + tokens-mat-filled-text-field.$prefix, + tokens-mat-filled-text-field.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mdc-outlined-text-field.$prefix, - tokens-mdc-outlined-text-field.get-unthemable-tokens() + tokens-mat-outlined-text-field.$prefix, + tokens-mat-outlined-text-field.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( tokens-mat-form-field.$prefix, @@ -43,12 +43,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-filled-text-field.$prefix, - tokens-mdc-filled-text-field.get-color-tokens($theme) + tokens-mat-filled-text-field.$prefix, + tokens-mat-filled-text-field.get-color-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mdc-outlined-text-field.$prefix, - tokens-mdc-outlined-text-field.get-color-tokens($theme) + tokens-mat-outlined-text-field.$prefix, + tokens-mat-outlined-text-field.get-color-tokens($theme) ); @include token-utils.create-token-values-mixed( tokens-mat-form-field.$prefix, @@ -58,12 +58,12 @@ .mat-mdc-form-field.mat-accent { @include token-utils.create-token-values-mixed( - tokens-mdc-filled-text-field.$prefix, - tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent) + tokens-mat-filled-text-field.$prefix, + tokens-mat-filled-text-field.private-get-color-palette-color-tokens($theme, accent) ); @include token-utils.create-token-values-mixed( - tokens-mdc-outlined-text-field.$prefix, - tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent) + tokens-mat-outlined-text-field.$prefix, + tokens-mat-outlined-text-field.private-get-color-palette-color-tokens($theme, accent) ); @include token-utils.create-token-values-mixed( tokens-mat-form-field.$prefix, @@ -73,12 +73,12 @@ .mat-mdc-form-field.mat-warn { @include token-utils.create-token-values-mixed( - tokens-mdc-filled-text-field.$prefix, - tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn) + tokens-mat-filled-text-field.$prefix, + tokens-mat-filled-text-field.private-get-color-palette-color-tokens($theme, warn) ); @include token-utils.create-token-values-mixed( - tokens-mdc-outlined-text-field.$prefix, - tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn) + tokens-mat-outlined-text-field.$prefix, + tokens-mat-outlined-text-field.private-get-color-palette-color-tokens($theme, warn) ); @include token-utils.create-token-values-mixed( tokens-mat-form-field.$prefix, @@ -96,12 +96,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-filled-text-field.$prefix, - tokens-mdc-filled-text-field.get-typography-tokens($theme) + tokens-mat-filled-text-field.$prefix, + tokens-mat-filled-text-field.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mdc-outlined-text-field.$prefix, - tokens-mdc-outlined-text-field.get-typography-tokens($theme) + tokens-mat-outlined-text-field.$prefix, + tokens-mat-outlined-text-field.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( tokens-mat-form-field.$prefix, @@ -128,18 +128,18 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { - $filled-text-field-tokens: tokens-mdc-filled-text-field.get-token-slots(); - $outlined-text-field-tokens: tokens-mdc-outlined-text-field.get-token-slots(); + $filled-text-field-tokens: tokens-mat-filled-text-field.get-token-slots(); + $outlined-text-field-tokens: tokens-mat-outlined-text-field.get-token-slots(); $form-field-tokens: tokens-mat-form-field.get-token-slots(); @return ( ( - namespace: tokens-mdc-filled-text-field.$prefix, + namespace: tokens-mat-filled-text-field.$prefix, tokens: $filled-text-field-tokens, prefix: 'filled-', ), ( - namespace: tokens-mdc-outlined-text-field.$prefix, + namespace: tokens-mat-outlined-text-field.$prefix, tokens: $outlined-text-field-tokens, prefix: 'outlined-', ), @@ -186,12 +186,12 @@ ); $mdc-filled-text-field-tokens: token-utils.get-tokens-for( $tokens, - tokens-mdc-filled-text-field.$prefix, + tokens-mat-filled-text-field.$prefix, $options... ); $mdc-outlined-text-field-tokens: token-utils.get-tokens-for( $tokens, - tokens-mdc-outlined-text-field.$prefix, + tokens-mat-outlined-text-field.$prefix, $options... ); $mat-form-field-tokens: token-utils.get-tokens-for( @@ -200,11 +200,11 @@ $options... ); @include token-utils.create-token-values( - tokens-mdc-filled-text-field.$prefix, + tokens-mat-filled-text-field.$prefix, $mdc-filled-text-field-tokens ); @include token-utils.create-token-values( - tokens-mdc-outlined-text-field.$prefix, + tokens-mat-outlined-text-field.$prefix, $mdc-outlined-text-field-tokens ); @include token-utils.create-token-values(tokens-mat-form-field.$prefix, $mat-form-field-tokens); diff --git a/src/material/form-field/_mdc-text-field-structure.scss b/src/material/form-field/_mdc-text-field-structure.scss index 3f00d56b11ab..4a9c5df58d23 100644 --- a/src/material/form-field/_mdc-text-field-structure.scss +++ b/src/material/form-field/_mdc-text-field-structure.scss @@ -1,18 +1,18 @@ @use '@angular/cdk'; @use '../core/style/vendor-prefixes'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mdc/filled-text-field' as tokens-mdc-filled-text-field; -@use '../core/tokens/m2/mdc/outlined-text-field' as tokens-mdc-outlined-text-field; +@use '../core/tokens/m2/mat/filled-text-field' as tokens-mat-filled-text-field; +@use '../core/tokens/m2/mat/outlined-text-field' as tokens-mat-outlined-text-field; // Includes the structural styles for the form field inherited from MDC. @mixin private-text-field-structure { $filled-slots: ( - tokens-mdc-filled-text-field.$prefix, - tokens-mdc-filled-text-field.get-token-slots() + tokens-mat-filled-text-field.$prefix, + tokens-mat-filled-text-field.get-token-slots() ); $outlined-slots: ( - tokens-mdc-outlined-text-field.$prefix, - tokens-mdc-outlined-text-field.get-token-slots() + tokens-mat-outlined-text-field.$prefix, + tokens-mat-outlined-text-field.get-token-slots() ); .mdc-text-field { diff --git a/src/material/list/_list-inherited-structure.scss b/src/material/list/_list-inherited-structure.scss index 427febfec4b4..b1fdf798e501 100644 --- a/src/material/list/_list-inherited-structure.scss +++ b/src/material/list/_list-inherited-structure.scss @@ -1,10 +1,10 @@ @use '../core/style/vendor-prefixes'; -@use '../core/tokens/m2/mdc/list' as tokens-mdc-list; +@use '../core/tokens/m2/mat/list' as tokens-mat-list; @use '../core/tokens/token-utils'; // Includes the structural styles for the list that were inherited from MDC. @mixin private-list-inherited-structural-styles { - $tokens: (tokens-mdc-list.$prefix, tokens-mdc-list.get-token-slots()); + $tokens: (tokens-mat-list.$prefix, tokens-mat-list.get-token-slots()); .mdc-list { margin: 0; diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss index 69ab84fb2ec9..bd15d3628cf3 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -5,9 +5,8 @@ @use '../core/theming/inspection'; @use '../core/theming/validation'; @use '../core/tokens/m2/mat/list' as tokens-mat-list; -@use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox; -@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio; -@use '../core/tokens/m2/mdc/list' as tokens-mdc-list; +@use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox; +@use '../core/tokens/m2/mat/radio' as tokens-mat-radio; @use '../core/tokens/token-utils'; @use '../core/typography/typography'; @@ -17,10 +16,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-list.$prefix, - tokens-mdc-list.get-unthemable-tokens() - ); @include token-utils.create-token-values-mixed( tokens-mat-list.$prefix, tokens-mat-list.get-unthemable-tokens() @@ -34,10 +29,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-list.$prefix, - tokens-mdc-list.get-color-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-list.$prefix, tokens-mat-list.get-color-tokens($theme) @@ -47,8 +38,8 @@ .mdc-list-item__start, .mdc-list-item__end { @include token-utils.create-token-values-mixed( - tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-color-tokens($theme, primary) + tokens-mat-radio.$prefix, + tokens-mat-radio.get-color-tokens($theme, primary) ); } @@ -56,8 +47,8 @@ .mdc-list-item__start, .mdc-list-item__end { @include token-utils.create-token-values-mixed( - tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-color-tokens($theme, accent) + tokens-mat-radio.$prefix, + tokens-mat-radio.get-color-tokens($theme, accent) ); } } @@ -66,28 +57,28 @@ .mdc-list-item__start, .mdc-list-item__end { @include token-utils.create-token-values-mixed( - tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-color-tokens($theme, warn) + tokens-mat-radio.$prefix, + tokens-mat-radio.get-color-tokens($theme, warn) ); } } .mat-mdc-list-option { @include token-utils.create-token-values-mixed( - tokens-mdc-checkbox.$prefix, - tokens-mdc-checkbox.get-color-tokens($theme, primary) + tokens-mat-checkbox.$prefix, + tokens-mat-checkbox.get-color-tokens($theme, primary) ); } .mat-mdc-list-option.mat-accent { @include token-utils.create-token-values-mixed( - tokens-mdc-checkbox.$prefix, - tokens-mdc-checkbox.get-color-tokens($theme, accent) + tokens-mat-checkbox.$prefix, + tokens-mat-checkbox.get-color-tokens($theme, accent) ); } .mat-mdc-list-option.mat-warn { @include token-utils.create-token-values-mixed( - tokens-mdc-checkbox.$prefix, - tokens-mdc-checkbox.get-color-tokens($theme, warn) + tokens-mat-checkbox.$prefix, + tokens-mat-checkbox.get-color-tokens($theme, warn) ); } @@ -123,10 +114,7 @@ $density-scale: inspection.get-theme-density($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-list.$prefix, - tokens-mdc-list.get-density-tokens($theme) - ); + // TODO: See if this can be removed @include token-utils.create-token-values-mixed( tokens-mat-list.$prefix, tokens-mat-list.get-density-tokens($theme) @@ -136,8 +124,8 @@ .mdc-list-item__start, .mdc-list-item__end { @include token-utils.create-token-values-mixed( - tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-density-tokens($theme) + tokens-mat-radio.$prefix, + tokens-mat-radio.get-density-tokens($theme) ); } @@ -185,10 +173,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-list.$prefix, - tokens-mdc-list.get-typography-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-list.$prefix, tokens-mat-list.get-typography-tokens($theme) @@ -211,10 +195,6 @@ namespace: tokens-mat-list.$prefix, tokens: tokens-mat-list.get-token-slots(), ), - ( - namespace: tokens-mdc-list.$prefix, - tokens: tokens-mdc-list.get-token-slots(), - ), ); } @@ -245,8 +225,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mdc-list-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-list.$prefix); $mat-list-tokens: token-utils.get-tokens-for($tokens, tokens-mat-list.$prefix); - @include token-utils.create-token-values(tokens-mdc-list.$prefix, $mdc-list-tokens); @include token-utils.create-token-values(tokens-mat-list.$prefix, $mat-list-tokens); } diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 95098cebdf4c..7a2150cbd1fe 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -1,6 +1,5 @@ @use '../core/style/layout-common'; @use '../core/tokens/m2/mat/list' as tokens-mat-list; -@use '../core/tokens/m2/mdc/list' as tokens-mdc-list; @use '../core/tokens/token-utils'; @use './list-item-hcm-indicator'; @use './list-inherited-structure'; @@ -8,7 +7,7 @@ @include list-inherited-structure.private-list-inherited-structural-styles; // Add additional slots for the MDC list tokens, needed in Angular Material. -@include token-utils.use-tokens(tokens-mdc-list.$prefix, tokens-mdc-list.get-token-slots()) { +@include token-utils.use-tokens(tokens-mat-list.$prefix, tokens-mat-list.get-token-slots()) { // MDC allows focus and hover colors to take precedence over disabled color. We add the disabled // color here with higher specificity so that the disabled color takes precedence. // TODO(mmalerba): Dicuss with MDC whether to change this in their code. diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss index 00db674780bf..30c8479e8077 100644 --- a/src/material/progress-bar/_progress-bar-theme.scss +++ b/src/material/progress-bar/_progress-bar-theme.scss @@ -3,7 +3,7 @@ @use '../core/theming/inspection'; @use '../core/theming/validation'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mdc/linear-progress' as tokens-mdc-linear-progress; +@use '../core/tokens/m2/mat/linear-progress' as tokens-mat-linear-progress; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-progress-bar. @@ -15,8 +15,8 @@ // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-linear-progress.$prefix, - tokens-mdc-linear-progress.get-unthemable-tokens() + tokens-mat-linear-progress.$prefix, + tokens-mat-linear-progress.get-unthemable-tokens() ); } } @@ -24,8 +24,8 @@ @mixin _palette-styles($theme, $palette-name) { @include token-utils.create-token-values-mixed( - tokens-mdc-linear-progress.$prefix, - tokens-mdc-linear-progress.get-color-tokens($theme, $palette-name) + tokens-mat-linear-progress.$prefix, + tokens-mat-linear-progress.get-color-tokens($theme, $palette-name) ); } @@ -66,8 +66,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mdc-linear-progress.$prefix, - tokens: tokens-mdc-linear-progress.get-token-slots(), + namespace: tokens-mat-linear-progress.$prefix, + tokens: tokens-mat-linear-progress.get-token-slots(), ), ); } @@ -106,6 +106,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $tokens: token-utils.get-tokens-for($tokens, tokens-mdc-linear-progress.$prefix, $options...); - @include token-utils.create-token-values(tokens-mdc-linear-progress.$prefix, $tokens); + $tokens: token-utils.get-tokens-for($tokens, tokens-mat-linear-progress.$prefix, $options...); + @include token-utils.create-token-values(tokens-mat-linear-progress.$prefix, $tokens); } diff --git a/src/material/progress-bar/progress-bar.scss b/src/material/progress-bar/progress-bar.scss index 4e5c61a57dd7..903df4740530 100644 --- a/src/material/progress-bar/progress-bar.scss +++ b/src/material/progress-bar/progress-bar.scss @@ -1,5 +1,5 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mdc/linear-progress' as tokens-mdc-linear-progress; +@use '../core/tokens/m2/mat/linear-progress' as tokens-mat-linear-progress; @use '../core/tokens/token-utils'; @use '../core/style/vendor-prefixes'; @@ -42,8 +42,8 @@ transition: opacity 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1); @include token-utils.use-tokens( - tokens-mdc-linear-progress.$prefix, - tokens-mdc-linear-progress.get-token-slots() + tokens-mat-linear-progress.$prefix, + tokens-mat-linear-progress.get-token-slots() ) { $track-variable: token-utils.get-token-variable(track-height); $indicator-height-variable: token-utils.get-token-variable(active-indicator-height); @@ -66,8 +66,8 @@ transition: transform 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1); @include token-utils.use-tokens( - tokens-mdc-linear-progress.$prefix, - tokens-mdc-linear-progress.get-token-slots() + tokens-mat-linear-progress.$prefix, + tokens-mat-linear-progress.get-token-slots() ) { @include token-utils.create-token-slot(height, active-indicator-height); } @@ -90,8 +90,8 @@ border-top-style: solid; @include token-utils.use-tokens( - tokens-mdc-linear-progress.$prefix, - tokens-mdc-linear-progress.get-token-slots() + tokens-mat-linear-progress.$prefix, + tokens-mat-linear-progress.get-token-slots() ) { @include token-utils.create-token-slot(border-color, active-indicator-color); @include token-utils.create-token-slot(border-top-width, active-indicator-height); @@ -108,8 +108,8 @@ overflow: hidden; @include token-utils.use-tokens( - tokens-mdc-linear-progress.$prefix, - tokens-mdc-linear-progress.get-token-slots() + tokens-mat-linear-progress.$prefix, + tokens-mat-linear-progress.get-token-slots() ) { @include token-utils.create-token-slot(height, track-height); @include token-utils.create-token-slot(border-radius, track-shape); @@ -129,8 +129,8 @@ animation: mdc-linear-progress-buffering 250ms infinite linear; @include token-utils.use-tokens( - tokens-mdc-linear-progress.$prefix, - tokens-mdc-linear-progress.get-token-slots() + tokens-mat-linear-progress.$prefix, + tokens-mat-linear-progress.get-token-slots() ) { @include token-utils.create-token-slot(background-color, track-color); } @@ -150,8 +150,8 @@ transition: flex-basis 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1); @include token-utils.use-tokens( - tokens-mdc-linear-progress.$prefix, - tokens-mdc-linear-progress.get-token-slots() + tokens-mat-linear-progress.$prefix, + tokens-mat-linear-progress.get-token-slots() ) { @include token-utils.create-token-slot(background-color, track-color); } @@ -215,8 +215,8 @@ @keyframes mdc-linear-progress-buffering { from { @include token-utils.use-tokens( - tokens-mdc-linear-progress.$prefix, - tokens-mdc-linear-progress.get-token-slots() + tokens-mat-linear-progress.$prefix, + tokens-mat-linear-progress.get-token-slots() ) { $track-variable: token-utils.get-token-variable(track-height); transform: rotate(180deg) translateX(calc(#{$track-variable} * -2.5)); diff --git a/src/material/progress-spinner/_progress-spinner-theme.scss b/src/material/progress-spinner/_progress-spinner-theme.scss index 70917492251a..dd013ca317d2 100644 --- a/src/material/progress-spinner/_progress-spinner-theme.scss +++ b/src/material/progress-spinner/_progress-spinner-theme.scss @@ -3,7 +3,7 @@ @use '../core/theming/inspection'; @use '../core/theming/validation'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mdc/circular-progress' as tokens-mdc-circular-progress; +@use '../core/tokens/m2/mat/circular-progress' as tokens-mat-circular-progress; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-progress-spinner. @@ -14,8 +14,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-circular-progress.$prefix, - tokens-mdc-circular-progress.get-unthemable-tokens() + tokens-mat-circular-progress.$prefix, + tokens-mat-circular-progress.get-unthemable-tokens() ); } } @@ -32,21 +32,21 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-circular-progress.$prefix, - tokens-mdc-circular-progress.get-color-tokens($theme, primary) + tokens-mat-circular-progress.$prefix, + tokens-mat-circular-progress.get-color-tokens($theme, primary) ); .mat-accent { @include token-utils.create-token-values-mixed( - tokens-mdc-circular-progress.$prefix, - tokens-mdc-circular-progress.get-color-tokens($theme, accent) + tokens-mat-circular-progress.$prefix, + tokens-mat-circular-progress.get-color-tokens($theme, accent) ); } .mat-warn { @include token-utils.create-token-values-mixed( - tokens-mdc-circular-progress.$prefix, - tokens-mdc-circular-progress.get-color-tokens($theme, warn) + tokens-mat-circular-progress.$prefix, + tokens-mat-circular-progress.get-color-tokens($theme, warn) ); } } @@ -67,8 +67,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mdc-circular-progress.$prefix, - tokens: tokens-mdc-circular-progress.get-token-slots(), + namespace: tokens-mat-circular-progress.$prefix, + tokens: tokens-mat-circular-progress.get-token-slots(), ), ); } @@ -109,11 +109,11 @@ ); $mdc-circular-progress-tokens: token-utils.get-tokens-for( $tokens, - tokens-mdc-circular-progress.$prefix, + tokens-mat-circular-progress.$prefix, $options... ); @include token-utils.create-token-values( - tokens-mdc-circular-progress.$prefix, + tokens-mat-circular-progress.$prefix, $mdc-circular-progress-tokens ); } diff --git a/src/material/progress-spinner/progress-spinner.scss b/src/material/progress-spinner/progress-spinner.scss index fe43cdee532c..5429c81370b4 100644 --- a/src/material/progress-spinner/progress-spinner.scss +++ b/src/material/progress-spinner/progress-spinner.scss @@ -1,6 +1,6 @@ @use '@angular/cdk'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mdc/circular-progress' as tokens-mdc-circular-progress; +@use '../core/tokens/m2/mat/circular-progress' as tokens-mat-circular-progress; .mat-mdc-progress-spinner { // Explicitly set to `block` since the browser defaults custom elements to `inline`. @@ -18,8 +18,8 @@ circle { @include token-utils.use-tokens( - tokens-mdc-circular-progress.$prefix, - tokens-mdc-circular-progress.get-token-slots() + tokens-mat-circular-progress.$prefix, + tokens-mat-circular-progress.get-token-slots() ) { @include token-utils.create-token-slot(stroke-width, active-indicator-width); } @@ -94,8 +94,8 @@ .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle, .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic { @include token-utils.use-tokens( - tokens-mdc-circular-progress.$prefix, - tokens-mdc-circular-progress.get-token-slots() + tokens-mat-circular-progress.$prefix, + tokens-mat-circular-progress.get-token-slots() ) { @include token-utils.create-token-slot(stroke, active-indicator-color); } diff --git a/src/material/radio/_radio-common.scss b/src/material/radio/_radio-common.scss index 20ce68945298..7d12af0ff0a7 100644 --- a/src/material/radio/_radio-common.scss +++ b/src/material/radio/_radio-common.scss @@ -1,4 +1,4 @@ -@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio; +@use '../core/tokens/m2/mat/radio' as tokens-mat-radio; @use '../core/tokens/token-utils'; $_icon-size: 20px; @@ -13,7 +13,7 @@ $_icon-size: 20px; // Structural styles for a radio button. Shared with the selection list. @mixin radio-structure($is-interactive) { - $tokens: tokens-mdc-radio.$prefix, tokens-mdc-radio.get-token-slots(); + $tokens: tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots(); .mdc-radio { display: inline-block; diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss index 74a7a386f64a..3617c2dbd255 100644 --- a/src/material/radio/_radio-theme.scss +++ b/src/material/radio/_radio-theme.scss @@ -4,7 +4,6 @@ @use '../core/theming/validation'; @use '../core/tokens/token-utils'; @use '../core/typography/typography'; -@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio; @use '../core/tokens/m2/mat/radio' as tokens-mat-radio; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) @@ -15,10 +14,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-unthemable-tokens() - ); @include token-utils.create-token-values-mixed( tokens-mat-radio.$prefix, tokens-mat-radio.get-unthemable-tokens() @@ -38,10 +33,6 @@ } @else { .mat-mdc-radio-button { &.mat-primary { - @include token-utils.create-token-values-mixed( - tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-color-tokens($theme, primary) - ); @include token-utils.create-token-values-mixed( tokens-mat-radio.$prefix, tokens-mat-radio.get-color-tokens($theme, primary) @@ -49,10 +40,6 @@ } &.mat-accent { - @include token-utils.create-token-values-mixed( - tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-color-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-radio.$prefix, tokens-mat-radio.get-color-tokens($theme) @@ -60,10 +47,6 @@ } &.mat-warn { - @include token-utils.create-token-values-mixed( - tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-color-tokens($theme, warn) - ); @include token-utils.create-token-values-mixed( tokens-mat-radio.$prefix, tokens-mat-radio.get-color-tokens($theme, warn) @@ -80,10 +63,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-typography-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-radio.$prefix, tokens-mat-radio.get-typography-tokens($theme) @@ -101,10 +80,6 @@ $density-scale: inspection.get-theme-density($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-radio.$prefix, - tokens-mdc-radio.get-density-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-radio.$prefix, tokens-mat-radio.get-density-tokens($theme) @@ -116,10 +91,6 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { @return ( - ( - namespace: tokens-mdc-radio.$prefix, - tokens: tokens-mdc-radio.get-token-slots(), - ), ( namespace: tokens-mat-radio.$prefix, tokens: tokens-mat-radio.get-token-slots(), @@ -161,8 +132,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mdc-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-radio.$prefix, $options...); $mat-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mat-radio.$prefix, $options...); - @include token-utils.create-token-values(tokens-mdc-radio.$prefix, $mdc-radio-tokens); @include token-utils.create-token-values(tokens-mat-radio.$prefix, $mat-radio-tokens); } diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss index 0c8416fba55a..423f15ab224b 100644 --- a/src/material/radio/radio.scss +++ b/src/material/radio/radio.scss @@ -1,5 +1,4 @@ @use '../core/tokens/m2/mat/radio' as tokens-mat-radio; -@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio; @use '../core/tokens/token-utils'; @use '../core/style/layout-common'; @use './radio-common'; @@ -61,7 +60,7 @@ // We don't inherit the border focus style from MDC since we don't use their ripple. // Instead we need to replicate it here. - @include token-utils.use-tokens(tokens-mdc-radio.$prefix, tokens-mdc-radio.get-token-slots()) { + @include token-utils.use-tokens(tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots()) { .mdc-radio > .mdc-radio__native-control:focus:enabled:not(:checked) { & ~ .mdc-radio__background > .mdc-radio__outer-circle { @include token-utils.create-token-slot(border-color, unselected-focus-icon-color); diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index 4da83ef0e1ee..9d3c9933c046 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '../core/style/sass-utils'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @@ -5,7 +6,6 @@ @use '../core/tokens/token-utils'; @use '../core/typography/typography'; @use '../core/tokens/m2/mat/switch' as tokens-mat-switch; -@use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-slide-toggle. @@ -15,9 +15,10 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { + // TODO: See if this can be removed @include token-utils.create-token-values-mixed( - tokens-mdc-switch.$prefix, - tokens-mdc-switch.get-unthemable-tokens() + tokens-mat-switch.$prefix, + tokens-mat-switch.get-unthemable-tokens() ); .mat-mdc-slide-toggle { @@ -39,13 +40,13 @@ @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { - $mdc-tokens: tokens-mdc-switch.get-color-tokens($theme); + $mat-tokens: tokens-mat-switch.get-color-tokens($theme); // Add values for MDC slide toggles tokens @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-switch.$prefix, - tokens-mdc-switch.get-color-tokens($theme) + tokens-mat-switch.$prefix, + tokens-mat-switch.get-color-tokens($theme) ); & { @@ -65,23 +66,25 @@ } .mat-mdc-slide-toggle { - @include token-utils.create-token-values-mixed( - tokens-mat-switch.$prefix, - tokens-mat-switch.get-color-tokens($theme) - ); + // TODO(wagnermaciel): Use our token system to define this css variable. + --mat-switch-label-text-color: #{inspection.get-theme-color( + $theme, + foreground, + text + )}; // Change the color palette related tokens to accent or warn if applicable &.mat-accent { @include token-utils.create-token-values-mixed( - tokens-mdc-switch.$prefix, - tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent) + tokens-mat-switch.$prefix, + tokens-mat-switch.private-get-color-palette-color-tokens($theme, accent) ); } &.mat-warn { @include token-utils.create-token-values-mixed( - tokens-mdc-switch.$prefix, - tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn) + tokens-mat-switch.$prefix, + tokens-mat-switch.private-get-color-palette-color-tokens($theme, warn) ); } } @@ -96,9 +99,10 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { + // TODO: See if this can be removed @include token-utils.create-token-values-mixed( - tokens-mdc-switch.$prefix, - tokens-mdc-switch.get-typography-tokens($theme) + tokens-mat-switch.$prefix, + tokens-mat-switch.get-typography-tokens($theme) ); .mat-mdc-slide-toggle { @@ -118,9 +122,10 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { + // TODO: See if this can be removed @include token-utils.create-token-values-mixed( - tokens-mdc-switch.$prefix, - tokens-mdc-switch.get-density-tokens($theme) + tokens-mat-switch.$prefix, + tokens-mat-switch.get-density-tokens($theme) ); .mat-mdc-slide-toggle { @@ -140,10 +145,6 @@ namespace: tokens-mat-switch.$prefix, tokens: tokens-mat-switch.get-token-slots(), ), - ( - namespace: tokens-mdc-switch.$prefix, - tokens: tokens-mdc-switch.get-token-slots(), - ), ); } @@ -181,11 +182,9 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mdc-switch-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-switch.$prefix, $options...); - // Don't pass $options here, since the mat-switch doesn't support color options, - // only the mdc-switch does. $mat-switch-tokens: token-utils.get-tokens-for($tokens, tokens-mat-switch.$prefix); + $mat-switch-tokens-options: token-utils.get-tokens-for($tokens, tokens-mat-switch.$prefix, $options...); - @include token-utils.create-token-values(tokens-mdc-switch.$prefix, $mdc-switch-tokens); - @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-switch-tokens); + $tokens: map.merge($mat-switch-tokens, $mat-switch-tokens-options); + @include token-utils.create-token-values(tokens-mat-switch.$prefix, $tokens); } diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index 631afc3f4c2d..770b1aaf3ba3 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -1,11 +1,9 @@ @use '@angular/cdk'; @use '../core/style/layout-common'; @use '../core/tokens/m2/mat/switch' as tokens-mat-switch; -@use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch; @use '../core/tokens/token-utils'; @use '../core/style/vendor-prefixes'; -$_mdc-slots: (tokens-mdc-switch.$prefix, tokens-mdc-switch.get-token-slots()); $_mat-slots: (tokens-mat-switch.$prefix, tokens-mat-switch.get-token-slots()); $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled'; @@ -22,7 +20,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc padding: 0; position: relative; - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(width, track-width); } @@ -41,7 +39,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc position: relative; width: 100%; - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(height, track-height); @include token-utils.create-token-slot(border-radius, track-shape); @@ -87,7 +85,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1); transform: translateX(0); - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(background, unselected-track-color); } @@ -112,7 +110,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc } } - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { .mdc-switch:enabled:hover:not(:focus):not(:active) & { @include token-utils.create-token-slot(background, unselected-hover-track-color); } @@ -137,7 +135,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc &::after { transform: translateX(-100%); - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(background, selected-track-color); } @@ -161,7 +159,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc } } - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { .mdc-switch:enabled:hover:not(:focus):not(:active) & { @include token-utils.create-token-slot(background, selected-hover-track-color); } @@ -194,7 +192,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc right: auto; transform: translateX(0); - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { width: calc(100% - #{token-utils.get-token-variable(handle-width)}); } @@ -228,7 +226,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc height 75ms cubic-bezier(0.4, 0, 0.2, 1), margin 75ms cubic-bezier(0.4, 0, 0.2, 1); - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(width, handle-width); @include token-utils.create-token-slot(height, handle-height); @include token-utils.create-token-slot(border-radius, handle-shape); @@ -308,7 +306,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc } } - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { &::after { .mdc-switch--selected:enabled & { @include token-utils.create-token-slot(background, selected-handle-color); @@ -368,7 +366,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc right: 0; top: 0; - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { .mdc-switch:enabled & { @include token-utils.create-token-slot(box-shadow, handle-elevation-shadow); } @@ -389,7 +387,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc transform: translate(-50%, -50%); z-index: -1; - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(width, state-layer-size); @include token-utils.create-token-slot(height, state-layer-size); } @@ -416,7 +414,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc opacity: 0.12; } - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { #{$_interactive-disabled-selector}:enabled:focus &, #{$_interactive-disabled-selector}:enabled:active &, #{$_interactive-disabled-selector}:enabled:hover:not(:focus) &, @@ -460,7 +458,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc // Works around a rendering issue in Safari 18.3 (see #30487). transform: translateZ(0); - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { .mdc-switch--disabled.mdc-switch--unselected & { @include token-utils.create-token-slot(opacity, disabled-unselected-icon-opacity); } @@ -481,7 +479,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc opacity: 0; transition: opacity 30ms 0ms cubic-bezier(0.4, 0, 1, 1); - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { .mdc-switch--unselected & { @include token-utils.create-token-slot(width, unselected-icon-size); @include token-utils.create-token-slot(height, unselected-icon-size); diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss index 52f0210cd2fe..172fa30ca3b8 100644 --- a/src/material/slider/_slider-theme.scss +++ b/src/material/slider/_slider-theme.scss @@ -5,7 +5,6 @@ @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/slider' as tokens-mat-slider; -@use '../core/tokens/m2/mdc/slider' as tokens-mdc-slider; /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) /// for the mat-slider. @@ -15,10 +14,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-slider.$prefix, - tokens-mdc-slider.get-unthemable-tokens() - ); @include token-utils.create-token-values-mixed( tokens-mat-slider.$prefix, tokens-mat-slider.get-unthemable-tokens() @@ -37,20 +32,12 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-slider.$prefix, - tokens-mdc-slider.get-color-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-slider.$prefix, tokens-mat-slider.get-color-tokens($theme) ); .mat-accent { - @include token-utils.create-token-values-mixed( - tokens-mdc-slider.$prefix, - tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent) - ); @include token-utils.create-token-values-mixed( tokens-mat-slider.$prefix, tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent) @@ -58,10 +45,6 @@ } .mat-warn { - @include token-utils.create-token-values-mixed( - tokens-mdc-slider.$prefix, - tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn) - ); @include token-utils.create-token-values-mixed( tokens-mat-slider.$prefix, tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn) @@ -79,8 +62,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-slider.$prefix, - tokens-mdc-slider.get-typography-tokens($theme) + tokens-mat-slider.$prefix, + tokens-mat-slider.get-typography-tokens($theme) ); } } @@ -94,8 +77,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-slider.$prefix, - tokens-mdc-slider.get-density-tokens($theme) + tokens-mat-slider.$prefix, + tokens-mat-slider.get-density-tokens($theme) ); } } @@ -108,10 +91,6 @@ namespace: tokens-mat-slider.$prefix, tokens: tokens-mat-slider.get-token-slots(), ), - ( - namespace: tokens-mdc-slider.$prefix, - tokens: tokens-mdc-slider.get-token-slots(), - ), ); } @@ -149,8 +128,6 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); - $mdc-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-slider.$prefix, $options...); $mat-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mat-slider.$prefix, $options...); - @include token-utils.create-token-values(tokens-mdc-slider.$prefix, $mdc-slider-tokens); @include token-utils.create-token-values(tokens-mat-slider.$prefix, $mat-slider-tokens); } diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss index 0e282262ca1a..9ca727b1fdbf 100644 --- a/src/material/slider/slider.scss +++ b/src/material/slider/slider.scss @@ -1,12 +1,10 @@ @use '@angular/cdk'; @use '../core/tokens/m2/mat/slider' as tokens-mat-slider; -@use '../core/tokens/m2/mdc/slider' as tokens-mdc-slider; @use '../core/tokens/token-utils'; @use '../core/style/vendor-prefixes'; $mat-slider-min-size: 128px !default; $mat-slider-horizontal-margin: 8px !default; -$_mdc-slots: (tokens-mdc-slider.$prefix, tokens-mdc-slider.get-token-slots()); $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); .mdc-slider__track { @@ -16,7 +14,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); width: 100%; pointer-events: none; - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(height, inactive-track-height); } } @@ -32,7 +30,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); .mdc-slider__track--active { overflow: hidden; - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(border-radius, active-track-shape); $active-height-ref: token-utils.get-token-variable(active-track-height); $inactive-height-ref: token-utils.get-token-variable(inactive-track-height); @@ -50,7 +48,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); transform-origin: left; transition: transform 80ms ease; - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(border-color, active-track-color); @include token-utils.create-token-slot(border-top-width, active-track-height); @@ -70,7 +68,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); top: 0; opacity: 0.24; - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(background-color, inactive-track-color); @include token-utils.create-token-slot(height, inactive-track-height); @include token-utils.create-token-slot(border-radius, inactive-track-shape); @@ -130,7 +128,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); // the word-break of the value indicator. word-break: normal; - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(background-color, label-container-color); @include token-utils.create-token-slot(color, label-label-text-color); } @@ -164,7 +162,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); @include token-utils.create-token-slot(display, value-indicator-caret-display); } - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(border-top-color, label-container-color); } } @@ -195,7 +193,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); @include token-utils.create-token-slot(transform, value-indicator-text-transform); } - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(font-family, label-label-text-font); @include token-utils.create-token-slot(font-size, label-label-text-size); @include token-utils.create-token-slot(font-weight, label-label-text-weight); @@ -235,7 +233,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); transform: translate(-50%, -50%); border-style: solid; - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { $width-ref: token-utils.get-token-variable(handle-width); $height-ref: token-utils.get-token-variable(handle-height); width: $width-ref; @@ -269,7 +267,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); border: solid 1px #fff; box-sizing: content-box; - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(border-color, with-overlap-handle-outline-color); @include token-utils.create-token-slot(border-width, with-overlap-handle-outline-width); } @@ -289,7 +287,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); .mdc-slider__tick-mark--active, .mdc-slider__tick-mark--inactive { - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(width, with-tick-marks-container-size); @include token-utils.create-token-slot(height, with-tick-marks-container-size); @include token-utils.create-token-slot(border-radius, with-tick-marks-container-shape); @@ -297,7 +295,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); } .mdc-slider__tick-mark--inactive { - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(opacity, with-tick-marks-inactive-container-opacity); @include token-utils.create-token-slot(background-color, with-tick-marks-inactive-container-color); @@ -311,7 +309,7 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); } .mdc-slider__tick-mark--active { - @include token-utils.use-tokens($_mdc-slots...) { + @include token-utils.use-tokens($_mat-slots...) { @include token-utils.create-token-slot(opacity, with-tick-marks-active-container-opacity); @include token-utils.create-token-slot(background-color, with-tick-marks-active-container-color); diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss index ed50ba742648..c130b25a0f39 100644 --- a/src/material/snack-bar/_snack-bar-theme.scss +++ b/src/material/snack-bar/_snack-bar-theme.scss @@ -5,7 +5,6 @@ @use '../core/style/sass-utils'; @use '../core/typography/typography'; @use '../core/tokens/token-utils'; -@use '../core/tokens/m2/mdc/snack-bar' as tokens-mdc-snack-bar; @use '../core/tokens/m2/mat/snack-bar' as tokens-mat-snack-bar; @mixin base($theme) { @@ -15,8 +14,8 @@ // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-snack-bar.$prefix, - tokens-mdc-snack-bar.get-unthemable-tokens() + tokens-mat-snack-bar.$prefix, + tokens-mat-snack-bar.get-unthemable-tokens() ); } } @@ -27,10 +26,6 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed( - tokens-mdc-snack-bar.$prefix, - tokens-mdc-snack-bar.get-color-tokens($theme) - ); @include token-utils.create-token-values-mixed( tokens-mat-snack-bar.$prefix, tokens-mat-snack-bar.get-color-tokens($theme) @@ -45,8 +40,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-snack-bar.$prefix, - tokens-mdc-snack-bar.get-typography-tokens($theme) + tokens-mat-snack-bar.$prefix, + tokens-mat-snack-bar.get-typography-tokens($theme) ); } } @@ -58,10 +53,6 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { @return ( - ( - namespace: tokens-mdc-snack-bar.$prefix, - tokens: tokens-mdc-snack-bar.get-token-slots(), - ), ( namespace: tokens-mat-snack-bar.$prefix, tokens: tokens-mat-snack-bar.get-token-slots(), @@ -99,10 +90,6 @@ 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); @if ($tokens != ()) { - @include token-utils.create-token-values( - tokens-mdc-snack-bar.$prefix, - map.get($tokens, tokens-mdc-snack-bar.$prefix) - ); @include token-utils.create-token-values( tokens-mat-snack-bar.$prefix, map.get($tokens, tokens-mat-snack-bar.$prefix) diff --git a/src/material/snack-bar/snack-bar-container.scss b/src/material/snack-bar/snack-bar-container.scss index 33387620e715..a66981954966 100644 --- a/src/material/snack-bar/snack-bar-container.scss +++ b/src/material/snack-bar/snack-bar-container.scss @@ -1,5 +1,4 @@ @use '@angular/cdk'; -@use '../core/tokens/m2/mdc/snack-bar' as tokens-mdc-snack-bar; @use '../core/tokens/m2/mat/snack-bar' as tokens-mat-snack-bar; @use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button; @use '../core/tokens/token-utils'; @@ -89,8 +88,8 @@ $_side-padding: 8px; } @include token-utils.use-tokens( - tokens-mdc-snack-bar.$prefix, - tokens-mdc-snack-bar.get-token-slots() + tokens-mat-snack-bar.$prefix, + tokens-mat-snack-bar.get-token-slots() ) { .mat-mdc-snack-bar-container & { @include token-utils.create-token-slot(color, supporting-text-color); @@ -113,8 +112,8 @@ $_side-padding: 8px; } @include token-utils.use-tokens( - tokens-mdc-snack-bar.$prefix, - tokens-mdc-snack-bar.get-token-slots() + tokens-mat-snack-bar.$prefix, + tokens-mat-snack-bar.get-token-slots() ) { .mat-mdc-snack-bar-container & { @include token-utils.create-token-slot(font-family, supporting-text-font); diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss index 282db3d041f4..4d4f12007487 100644 --- a/src/material/tabs/_tabs-common.scss +++ b/src/material/tabs/_tabs-common.scss @@ -1,6 +1,6 @@ @use '../core/style/vendor-prefixes'; -@use '../core/tokens/m2/mdc/tab-indicator' as tokens-mdc-tab-indicator; -@use '../core/tokens/m2/mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab; +@use '../core/tokens/m2/mat/tab-indicator' as tokens-mat-tab-indicator; +@use '../core/tokens/m2/mat/secondary-navigation-tab' as tokens-mat-secondary-navigation-tab; @use '../core/tokens/m2/mat/tab-header' as tokens-mat-tab-header; @use '../core/tokens/m2/mat/tab-header-with-background' as tokens-mat-tab-header-with-background; @use '../core/tokens/token-utils'; @@ -103,8 +103,8 @@ $mat-tab-animation-duration: 500ms !default; background: none; @include token-utils.use-tokens( - tokens-mdc-secondary-navigation-tab.$prefix, - tokens-mdc-secondary-navigation-tab.get-token-slots() + tokens-mat-secondary-navigation-tab.$prefix, + tokens-mat-secondary-navigation-tab.get-token-slots() ) { @include token-utils.create-token-slot(height, container-height); } @@ -129,8 +129,8 @@ $mat-tab-animation-duration: 500ms !default; .mdc-tab-indicator__content--underline { @include token-utils.use-tokens( - tokens-mdc-tab-indicator.$prefix, - tokens-mdc-tab-indicator.get-token-slots() + tokens-mat-tab-indicator.$prefix, + tokens-mat-tab-indicator.get-token-slots() ) { @include token-utils.create-token-slot(border-color, active-indicator-color); @include token-utils.create-token-slot(border-top-width, active-indicator-height); @@ -403,8 +403,8 @@ $mat-tab-animation-duration: 500ms !default; .cdk-drop-list &, &.cdk-drop-list { @include token-utils.use-tokens( - tokens-mdc-secondary-navigation-tab.$prefix, - tokens-mdc-secondary-navigation-tab.get-token-slots() + tokens-mat-secondary-navigation-tab.$prefix, + tokens-mat-secondary-navigation-tab.get-token-slots() ) { @include token-utils.create-token-slot(min-height, container-height); } diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss index 368ce348aa42..73dca4636a22 100644 --- a/src/material/tabs/_tabs-theme.scss +++ b/src/material/tabs/_tabs-theme.scss @@ -1,6 +1,6 @@ @use '../core/style/sass-utils'; -@use '../core/tokens/m2/mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab; -@use '../core/tokens/m2/mdc/tab-indicator' as tokens-mdc-tab-indicator; +@use '../core/tokens/m2/mat/secondary-navigation-tab' as tokens-mat-secondary-navigation-tab; +@use '../core/tokens/m2/mat/tab-indicator' as tokens-mat-tab-indicator; @use '../core/tokens/m2/mat/tab-header' as tokens-mat-tab-header; @use '../core/tokens/m2/mat/tab-header-with-background' as tokens-mat-tab-header-with-background; @use '../core/theming/theming'; @@ -18,12 +18,12 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-secondary-navigation-tab.$prefix, - tokens-mdc-secondary-navigation-tab.get-unthemable-tokens() + tokens-mat-secondary-navigation-tab.$prefix, + tokens-mat-secondary-navigation-tab.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( - tokens-mdc-tab-indicator.$prefix, - tokens-mdc-tab-indicator.get-unthemable-tokens() + tokens-mat-tab-indicator.$prefix, + tokens-mat-tab-indicator.get-unthemable-tokens() ); @include token-utils.create-token-values-mixed( tokens-mat-tab-header.$prefix, @@ -82,12 +82,12 @@ @mixin _palette-styles($theme, $palette-name) { @include token-utils.create-token-values-mixed( - tokens-mdc-secondary-navigation-tab.$prefix, - tokens-mdc-secondary-navigation-tab.get-color-tokens($theme, $palette-name) + tokens-mat-secondary-navigation-tab.$prefix, + tokens-mat-secondary-navigation-tab.get-color-tokens($theme, $palette-name) ); @include token-utils.create-token-values-mixed( - tokens-mdc-tab-indicator.$prefix, - tokens-mdc-tab-indicator.get-color-tokens($theme, $palette-name) + tokens-mat-tab-indicator.$prefix, + tokens-mat-tab-indicator.get-color-tokens($theme, $palette-name) ); @include token-utils.create-token-values-mixed( tokens-mat-tab-header.$prefix, @@ -103,12 +103,12 @@ } @else { .mat-mdc-tab-header { @include token-utils.create-token-values-mixed( - tokens-mdc-secondary-navigation-tab.$prefix, - tokens-mdc-secondary-navigation-tab.get-typography-tokens($theme) + tokens-mat-secondary-navigation-tab.$prefix, + tokens-mat-secondary-navigation-tab.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mdc-tab-indicator.$prefix, - tokens-mdc-tab-indicator.get-typography-tokens($theme) + tokens-mat-tab-indicator.$prefix, + tokens-mat-tab-indicator.get-typography-tokens($theme) ); @include token-utils.create-token-values-mixed( tokens-mat-tab-header.$prefix, @@ -130,12 +130,12 @@ } @else { .mat-mdc-tab-header { @include token-utils.create-token-values-mixed( - tokens-mdc-secondary-navigation-tab.$prefix, - tokens-mdc-secondary-navigation-tab.get-density-tokens($theme) + tokens-mat-secondary-navigation-tab.$prefix, + tokens-mat-secondary-navigation-tab.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( - tokens-mdc-tab-indicator.$prefix, - tokens-mdc-tab-indicator.get-density-tokens($theme) + tokens-mat-tab-indicator.$prefix, + tokens-mat-tab-indicator.get-density-tokens($theme) ); @include token-utils.create-token-values-mixed( tokens-mat-tab-header.$prefix, @@ -151,18 +151,18 @@ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. @function _define-overrides() { - $tab-tokens: tokens-mdc-secondary-navigation-tab.get-token-slots(); - $tab-indicator-tokens: tokens-mdc-tab-indicator.get-token-slots(); + $tab-tokens: tokens-mat-secondary-navigation-tab.get-token-slots(); + $tab-indicator-tokens: tokens-mat-tab-indicator.get-token-slots(); $tab-header-tokens: tokens-mat-tab-header.get-token-slots(); $tab-header-with-background-tokens: tokens-mat-tab-header-with-background.get-token-slots(); @return ( ( - namespace: tokens-mdc-secondary-navigation-tab.$prefix, + namespace: tokens-mat-secondary-navigation-tab.$prefix, tokens: $tab-tokens, ), ( - namespace: tokens-mdc-tab-indicator.$prefix, + namespace: tokens-mat-tab-indicator.$prefix, tokens: $tab-indicator-tokens, ), ( @@ -212,7 +212,7 @@ ); $mdc-tab-indicator-tokens: token-utils.get-tokens-for( $tokens, - tokens-mdc-tab-indicator.$prefix, + tokens-mat-tab-indicator.$prefix, $options... ); $mat-tab-header-tokens: token-utils.get-tokens-for( @@ -224,14 +224,14 @@ // only the mdc-tab-indicator and mat-tab-header do. $mdc-secondary-navigation-tab-tokens: token-utils.get-tokens-for( $tokens, - tokens-mdc-secondary-navigation-tab.$prefix + tokens-mat-secondary-navigation-tab.$prefix ); @include token-utils.create-token-values( - tokens-mdc-secondary-navigation-tab.$prefix, + tokens-mat-secondary-navigation-tab.$prefix, $mdc-secondary-navigation-tab-tokens ); @include token-utils.create-token-values( - tokens-mdc-tab-indicator.$prefix, + tokens-mat-tab-indicator.$prefix, $mdc-tab-indicator-tokens ); @include token-utils.create-token-values(tokens-mat-tab-header.$prefix, $mat-tab-header-tokens); diff --git a/src/material/toolbar/toolbar.scss b/src/material/toolbar/toolbar.scss index 2078816fbe09..6d60f13cf7d0 100644 --- a/src/material/toolbar/toolbar.scss +++ b/src/material/toolbar/toolbar.scss @@ -1,8 +1,8 @@ @use '@angular/cdk'; @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar; -@use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button; -@use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button; +@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button; +@use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button; @use '../core/style/variables'; $row-padding: 16px !default; @@ -59,13 +59,13 @@ $height-mobile-portrait: 56px !default; } @include token-utils.use-tokens( - tokens-mdc-text-button.$prefix, tokens-mdc-text-button.get-token-slots()) { + tokens-mat-text-button.$prefix, tokens-mat-text-button.get-token-slots()) { $token: token-utils.get-token-variable-name(label-text-color); #{$token}: #{$color-token}; } @include token-utils.use-tokens( - tokens-mdc-outlined-button.$prefix, tokens-mdc-outlined-button.get-token-slots()) { + tokens-mat-outlined-button.$prefix, tokens-mat-outlined-button.get-token-slots()) { $token: token-utils.get-token-variable-name(label-text-color); #{$token}: #{$color-token}; } diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss index d8798a221aa9..979a60b09243 100644 --- a/src/material/tooltip/_tooltip-theme.scss +++ b/src/material/tooltip/_tooltip-theme.scss @@ -4,7 +4,7 @@ @use '../core/theming/validation'; @use '../core/tokens/token-utils'; @use '../core/typography/typography'; -@use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip; +@use '../core/tokens/m2/mat/plain-tooltip' as tokens-mat-plain-tooltip; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -13,8 +13,8 @@ // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-plain-tooltip.$prefix, - tokens-mdc-plain-tooltip.get-unthemable-tokens() + tokens-mat-plain-tooltip.$prefix, + tokens-mat-plain-tooltip.get-unthemable-tokens() ); } } @@ -26,8 +26,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-plain-tooltip.$prefix, - tokens-mdc-plain-tooltip.get-color-tokens($theme) + tokens-mat-plain-tooltip.$prefix, + tokens-mat-plain-tooltip.get-color-tokens($theme) ); } } @@ -39,8 +39,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-plain-tooltip.$prefix, - tokens-mdc-plain-tooltip.get-typography-tokens($theme) + tokens-mat-plain-tooltip.$prefix, + tokens-mat-plain-tooltip.get-typography-tokens($theme) ); } } @@ -52,8 +52,8 @@ } @else { @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values-mixed( - tokens-mdc-plain-tooltip.$prefix, - tokens-mdc-plain-tooltip.get-density-tokens($theme) + tokens-mat-plain-tooltip.$prefix, + tokens-mat-plain-tooltip.get-density-tokens($theme) ); } } @@ -63,8 +63,8 @@ @function _define-overrides() { @return ( ( - namespace: tokens-mdc-plain-tooltip.$prefix, - tokens: tokens-mdc-plain-tooltip.get-token-slots(), + namespace: tokens-mat-plain-tooltip.$prefix, + tokens: tokens-mat-plain-tooltip.get-token-slots(), ), ); } @@ -97,7 +97,7 @@ 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); @if $tokens != () { - $tokens: token-utils.get-tokens-for($tokens, tokens-mdc-plain-tooltip.$prefix); - @include token-utils.create-token-values(tokens-mdc-plain-tooltip.$prefix, $tokens); + $tokens: token-utils.get-tokens-for($tokens, tokens-mat-plain-tooltip.$prefix); + @include token-utils.create-token-values(tokens-mat-plain-tooltip.$prefix, $tokens); } } diff --git a/src/material/tooltip/tooltip.scss b/src/material/tooltip/tooltip.scss index ab314afdf322..6970107db724 100644 --- a/src/material/tooltip/tooltip.scss +++ b/src/material/tooltip/tooltip.scss @@ -1,4 +1,4 @@ -@use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip; +@use '../core/tokens/m2/mat/plain-tooltip' as tokens-mat-plain-tooltip; @use '../core/tokens/token-utils'; .mat-mdc-tooltip { @@ -62,8 +62,8 @@ will-change: transform, opacity; @include token-utils.use-tokens( - tokens-mdc-plain-tooltip.$prefix, - tokens-mdc-plain-tooltip.get-token-slots() + tokens-mat-plain-tooltip.$prefix, + tokens-mat-plain-tooltip.get-token-slots() ) { @include token-utils.create-token-slot(background-color, container-color); @include token-utils.create-token-slot(color, supporting-text-color); From 06934390105abc91688443108daae0bce89e94f1 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Sun, 30 Mar 2025 12:19:45 -0600 Subject: [PATCH 2/2] refactor: lint --- src/material/slide-toggle/_slide-toggle-theme.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index 9d3c9933c046..d2c9dc3e77e7 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -183,7 +183,8 @@ 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector' ); $mat-switch-tokens: token-utils.get-tokens-for($tokens, tokens-mat-switch.$prefix); - $mat-switch-tokens-options: token-utils.get-tokens-for($tokens, tokens-mat-switch.$prefix, $options...); + $mat-switch-tokens-options: + token-utils.get-tokens-for($tokens, tokens-mat-switch.$prefix, $options...); $tokens: map.merge($mat-switch-tokens, $mat-switch-tokens-options); @include token-utils.create-token-values(tokens-mat-switch.$prefix, $tokens);