diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index 8ef64cc9a61c..232386377ec2 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -41,6 +41,7 @@ html { @include mat.autocomplete-theme($light-theme); @include mat.badge-theme($light-theme); @include mat.bottom-sheet-theme($light-theme); + @include mat.button-theme($light-theme); @include mat.button-toggle-theme($light-theme); @include mat.card-theme($light-theme); @include mat.checkbox-theme($light-theme); @@ -87,6 +88,7 @@ html { @include mat.autocomplete-color($dark-theme); @include mat.badge-color($dark-theme); @include mat.bottom-sheet-color($dark-theme); + @include mat.button-color($dark-theme); @include mat.button-toggle-color($dark-theme); @include mat.card-color($dark-theme); @include mat.checkbox-color($dark-theme); @@ -132,6 +134,7 @@ html { @include mat.autocomplete-density($scale-theme); @include mat.badge-density($scale-theme); @include mat.bottom-sheet-density($scale-theme); + @include mat.button-density($scale-theme); @include mat.button-toggle-density($scale-theme); @include mat.card-density($scale-theme); @include mat.checkbox-density($scale-theme); diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 4ccbaf85d54f..7a1b4c191f6e 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -339,6 +339,78 @@ ); } +/// Generates custom tokens for the mat-button. +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @return {Map} A set of custom tokens for the mat-button +@function text-button($systems, $exclude-hardcoded) { + @return ( + state-layer-color: map.get($systems, md-sys-color, primary), + disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), + ripple-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, primary), + $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) + ), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), + ); +} + +/// Generates custom tokens for the mat-flat-button. +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @return {Map} A set of custom tokens for the mat-flat-button +@function filled-button($systems, $exclude-hardcoded) { + @return ( + state-layer-color: map.get($systems, md-sys-color, on-primary), + disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), + ripple-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-primary), + $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) + ), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), + ); +} + +/// Generates custom tokens for the mat-raised-button. +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @return {Map} A set of custom tokens for the mat-raised-button +@function elevated-button($systems, $exclude-hardcoded) { + @return ( + state-layer-color: map.get($systems, md-sys-color, primary), + disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), + ripple-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, primary), + $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) + ), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), + ); +} + +/// Generates custom tokens for the mat-outlined-button. +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @return {Map} A set of custom tokens for the mat-outlined-button +@function outlined-button($systems, $exclude-hardcoded) { + @return ( + state-layer-color: map.get($systems, md-sys-color, primary), + disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), + ripple-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, primary), + $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) + ), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), + ); +} + /// Generates custom tokens for the mat-icon-button. /// @param {Map} $systems The MDC system tokens /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values @@ -346,6 +418,7 @@ @function icon-button($systems, $exclude-hardcoded) { @return ( state-layer-color: map.get($systems, md-sys-color, on-surface-variant), + disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), ripple-color: mat.private-safe-color-change( map.get($systems, md-sys-color, on-surface-variant), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) diff --git a/src/material-experimental/theming/_m3-density.scss b/src/material-experimental/theming/_m3-density.scss index 5c725c2c4ca8..fed83976fec4 100644 --- a/src/material-experimental/theming/_m3-density.scss +++ b/src/material-experimental/theming/_m3-density.scss @@ -28,6 +28,18 @@ $_density-tokens: ( (mdc, extended-fab): (), (mdc, fab): (), (mdc, filled-text-field): (), + (mdc, text-button): ( + container-height: (40px, 36px, 32px, 28px), + ), + (mdc, protected-button): ( + container-height: (40px, 36px, 32px, 28px), + ), + (mdc, filled-button): ( + container-height: (40px, 36px, 32px, 28px), + ), + (mdc, outlined-button): ( + container-height: (40px, 36px, 32px, 28px), + ), (mdc, icon-button): ( state-layer-size: (48px, 44px, 40px, 36px, 32px, 28px), ), diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index 600ddde8d56f..bb5d538d3345 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -256,6 +256,71 @@ @return $tokens; } + +/// Fixes inconsistent values in the text button tokens so that they can produce valid styles. +/// @param {Map} $initial-tokens Map of text button tokens currently being generated. +/// @param {Map} $all-tokens Map of all text button tokens, including hardcoded values. +/// @return {Map} The given tokens, with the invalid values replaced with valid ones. +@function _fix-text-button-tokens($initial-tokens, $all-tokens) { + @return _combine-color-tokens($initial-tokens, $all-tokens, ( + ( + color: 'disabled-label-text-color', + opacity: 'disabled-label-text-opacity', + ), + )); +} + +/// Fixes inconsistent values in the filled button tokens so that they can produce valid styles. +/// @param {Map} $initial-tokens Map of filled button tokens currently being generated. +/// @param {Map} $all-tokens Map of all filled button tokens, including hardcoded values. +/// @return {Map} The given tokens, with the invalid values replaced with valid ones. +@function _fix-filled-button-tokens($initial-tokens, $all-tokens) { + @return _combine-color-tokens($initial-tokens, $all-tokens, ( + ( + color: 'disabled-label-text-color', + opacity: 'disabled-label-text-opacity', + ), + ( + color: 'disabled-container-color', + opacity: 'disabled-container-opacity', + ) + )); +} + +/// Fixes inconsistent values in the protected button tokens so that they can produce valid styles. +/// @param {Map} $initial-tokens Map of protected button tokens currently being generated. +/// @param {Map} $all-tokens Map of all protected button tokens, including hardcoded values. +/// @return {Map} The given tokens, with the invalid values replaced with valid ones. +@function _fix-protected-button-tokens($initial-tokens, $all-tokens) { + @return _combine-color-tokens($initial-tokens, $all-tokens, ( + ( + color: 'disabled-label-text-color', + opacity: 'disabled-label-text-opacity', + ), + ( + color: 'disabled-container-color', + opacity: 'disabled-container-opacity', + ) + )); +} + +/// Fixes inconsistent values in the outlined button tokens so that they can produce valid styles. +/// @param {Map} $initial-tokens Map of outlined button tokens currently being generated. +/// @param {Map} $all-tokens Map of all outlined button tokens, including hardcoded values. +/// @return {Map} The given tokens, with the invalid values replaced with valid ones. +@function _fix-outlined-button-tokens($initial-tokens, $all-tokens) { + @return _combine-color-tokens($initial-tokens, $all-tokens, ( + ( + color: 'disabled-label-text-color', + opacity: 'disabled-label-text-opacity', + ), + ( + color: 'disabled-outline-color', + opacity: 'disabled-outline-opacity', + ) + )); +} + /// Fixes inconsistent values in the outlined text field tokens so that they can produce valid /// styles. /// @param {Map} $initial-tokens Map of outlined text field tokens currently being generated. @@ -386,6 +451,47 @@ mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mdc, text-button), + _fix-text-button-tokens( + mdc-tokens.md-comp-text-button-values($systems, $exclude-hardcoded), + // Need to pass in the hardcoded values, because they + // include opacities that are used for the disabled state. + mdc-tokens.md-comp-text-button-values($systems, false), + ), + $token-slots + ), + _namespace-tokens( + // Note: in M3 the "protected" button is called "elevated". + (mdc, protected-button), + _fix-protected-button-tokens( + mdc-tokens.md-comp-elevated-button-values($systems, $exclude-hardcoded), + // Need to pass in the hardcoded values, because they + // include opacities that are used for the disabled state. + mdc-tokens.md-comp-elevated-button-values($systems, false), + ), + $token-slots + ), + _namespace-tokens( + (mdc, filled-button), + _fix-filled-button-tokens( + mdc-tokens.md-comp-filled-button-values($systems, $exclude-hardcoded), + // Need to pass in the hardcoded values, because they + // include opacities that are used for the disabled state. + mdc-tokens.md-comp-filled-button-values($systems, false), + ), + $token-slots + ), + _namespace-tokens( + (mdc, outlined-button), + _fix-outlined-button-tokens( + mdc-tokens.md-comp-outlined-button-values($systems, $exclude-hardcoded), + // Need to pass in the hardcoded values, because they + // include opacities that are used for the disabled state. + mdc-tokens.md-comp-outlined-button-values($systems, false), + ), + $token-slots + ), _namespace-tokens( (mdc, linear-progress), mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded), @@ -504,6 +610,27 @@ custom-tokens.icon($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mat, text-button), + custom-tokens.text-button($systems, $exclude-hardcoded), + $token-slots + ), + _namespace-tokens( + (mat, filled-button), + custom-tokens.filled-button($systems, $exclude-hardcoded), + $token-slots + ), + _namespace-tokens( + // Note: in M3 the "protected" button is called "elevated". + (mat, protected-button), + custom-tokens.elevated-button($systems, $exclude-hardcoded), + $token-slots + ), + _namespace-tokens( + (mat, outlined-button), + custom-tokens.outlined-button($systems, $exclude-hardcoded), + $token-slots + ), _namespace-tokens( (mat, icon-button), custom-tokens.icon-button($systems, $exclude-hardcoded), diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index b123cd888aa7..fe97981bb458 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '@material/button/button-text-theme' as mdc-button-text-theme; @use '@material/button/button-filled-theme' as mdc-button-filled-theme; @use '@material/button/button-protected-theme' as mdc-button-protected-theme; @@ -80,9 +81,28 @@ @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens); } +@mixin _theme-from-tokens($tokens) { + @if ($tokens != ()) { + @include mdc-button-text-theme.theme(map.get($tokens, tokens-mdc-text-button.$prefix)); + @include mdc-button-protected-theme.theme( + map.get($tokens, tokens-mdc-protected-button.$prefix)); + @include mdc-button-filled-theme.theme(map.get($tokens, tokens-mdc-filled-button.$prefix)); + @include mdc-button-outlined-theme.theme(map.get($tokens, tokens-mdc-outlined-button.$prefix)); + + @include token-utils.create-token-values( + tokens-mat-text-button.$prefix, map.get($tokens, tokens-mat-text-button.$prefix)); + @include token-utils.create-token-values( + tokens-mat-protected-button.$prefix, map.get($tokens, tokens-mat-protected-button.$prefix)); + @include token-utils.create-token-values( + tokens-mat-filled-button.$prefix, map.get($tokens, tokens-mat-filled-button.$prefix)); + @include token-utils.create-token-values( + tokens-mat-outlined-button.$prefix, map.get($tokens, tokens-mat-outlined-button.$prefix)); + } +} + @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { - // TODO(crisbeto): emit M3 base tokens here. + @include theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { @@ -99,131 +119,152 @@ } @mixin color($theme) { - @include sass-utils.current-selector-or-root() { - @include _text-button-variant($theme, null); - @include _filled-button-variant($theme, null); - @include _protected-button-variant($theme, null); - @include _outlined-button-variant($theme, null); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } - - .mat-mdc-button { - &.mat-primary { - @include _text-button-variant($theme, primary); - } - - &.mat-accent { - @include _text-button-variant($theme, accent); + @else { + @include sass-utils.current-selector-or-root() { + @include _text-button-variant($theme, null); + @include _filled-button-variant($theme, null); + @include _protected-button-variant($theme, null); + @include _outlined-button-variant($theme, null); } - &.mat-warn { - @include _text-button-variant($theme, warn); - } - } + .mat-mdc-button { + &.mat-primary { + @include _text-button-variant($theme, primary); + } - .mat-mdc-unelevated-button { - &.mat-primary { - @include _filled-button-variant($theme, primary); - } + &.mat-accent { + @include _text-button-variant($theme, accent); + } - &.mat-accent { - @include _filled-button-variant($theme, accent); + &.mat-warn { + @include _text-button-variant($theme, warn); + } } - &.mat-warn { - @include _filled-button-variant($theme, warn); - } - } + .mat-mdc-unelevated-button { + &.mat-primary { + @include _filled-button-variant($theme, primary); + } - .mat-mdc-raised-button { - &.mat-primary { - @include _protected-button-variant($theme, primary); - } + &.mat-accent { + @include _filled-button-variant($theme, accent); + } - &.mat-accent { - @include _protected-button-variant($theme, accent); + &.mat-warn { + @include _filled-button-variant($theme, warn); + } } - &.mat-warn { - @include _protected-button-variant($theme, warn); - } + .mat-mdc-raised-button { + &.mat-primary { + @include _protected-button-variant($theme, primary); + } - // TODO(wagnermaciel): Remove this workaround when b/301126527 is resolved - @include mdc-helpers.disable-mdc-fallback-declarations { - @include mdc-elevation-theme.elevation(2); + &.mat-accent { + @include _protected-button-variant($theme, accent); + } - &:hover, &:focus { - @include mdc-elevation-theme.elevation(4); + &.mat-warn { + @include _protected-button-variant($theme, warn); } - &:active, &:focus:active { - @include mdc-elevation-theme.elevation(8); + // TODO(wagnermaciel): Remove this workaround when b/301126527 is resolved + @include mdc-helpers.disable-mdc-fallback-declarations { + @include mdc-elevation-theme.elevation(2); + + &:hover, &:focus { + @include mdc-elevation-theme.elevation(4); + } + + &:active, &:focus:active { + @include mdc-elevation-theme.elevation(8); + } } } - } - .mat-mdc-outlined-button { - &.mat-primary { - @include _outlined-button-variant($theme, primary); - } + .mat-mdc-outlined-button { + &.mat-primary { + @include _outlined-button-variant($theme, primary); + } - &.mat-accent { - @include _outlined-button-variant($theme, accent); - } + &.mat-accent { + @include _outlined-button-variant($theme, accent); + } - &.mat-warn { - @include _outlined-button-variant($theme, warn); + &.mat-warn { + @include _outlined-button-variant($theme, warn); + } } } } @mixin typography($theme) { - $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme); - $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme); - $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme); - $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme); - - @include sass-utils.current-selector-or-root() { - @include mdc-button-text-theme.theme($text-typography-tokens); - @include mdc-button-filled-theme.theme($filled-typography-tokens); - @include mdc-button-outlined-theme.theme($outlined-typography-tokens); - @include mdc-button-protected-theme.theme($protected-typography-tokens); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } + @else { + @include sass-utils.current-selector-or-root() { + $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme); + $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme); + $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme); + $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme); + + @include mdc-button-text-theme.theme($text-typography-tokens); + @include mdc-button-filled-theme.theme($filled-typography-tokens); + @include mdc-button-outlined-theme.theme($outlined-typography-tokens); + @include mdc-button-protected-theme.theme($protected-typography-tokens); + } } } @mixin density($theme) { - $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3); - $text-density-tokens: tokens-mdc-text-button.get-density-tokens($theme); - $filled-density-tokens: tokens-mdc-filled-button.get-density-tokens($theme); - $outlined-density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme); - $protected-density-tokens: tokens-mdc-protected-button.get-density-tokens($theme); - - @include sass-utils.current-selector-or-root() { - @include mdc-button-text-theme.theme($text-density-tokens); - @include mdc-button-filled-theme.theme($filled-density-tokens); - @include mdc-button-outlined-theme.theme($outlined-density-tokens); - @include mdc-button-protected-theme.theme($protected-density-tokens); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } + @else { + $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3); + + @include sass-utils.current-selector-or-root() { + $text-density-tokens: tokens-mdc-text-button.get-density-tokens($theme); + $filled-density-tokens: tokens-mdc-filled-button.get-density-tokens($theme); + $outlined-density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme); + $protected-density-tokens: tokens-mdc-protected-button.get-density-tokens($theme); + + @include mdc-button-text-theme.theme($text-density-tokens); + @include mdc-button-filled-theme.theme($filled-density-tokens); + @include mdc-button-outlined-theme.theme($outlined-density-tokens); + @include mdc-button-protected-theme.theme($protected-density-tokens); + } - .mat-mdc-button, - .mat-mdc-raised-button, - .mat-mdc-unelevated-button, - .mat-mdc-outlined-button { - // TODO: tokenize the touch target visibility. - @include button-base.mat-private-button-touch-target-density($density-scale); + .mat-mdc-button, + .mat-mdc-raised-button, + .mat-mdc-unelevated-button, + .mat-mdc-outlined-button { + // TODO: tokenize the touch target visibility. + @include button-base.mat-private-button-touch-target-density($density-scale); + } } } @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') { - @include base($theme); - @if inspection.theme-has($theme, color) { - @include color($theme); - } - @if inspection.theme-has($theme, density) { - @include density($theme); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme)); } - @if inspection.theme-has($theme, typography) { - @include typography($theme); + @else { + @include base($theme); + @if inspection.theme-has($theme, color) { + @include color($theme); + } + @if inspection.theme-has($theme, density) { + @include density($theme); + } + @if inspection.theme-has($theme, typography) { + @include typography($theme); + } } } } diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss index d5d5c54c3f7a..29898c8954c1 100644 --- a/src/material/core/tokens/m2/_index.scss +++ b/src/material/core/tokens/m2/_index.scss @@ -3,6 +3,10 @@ @use '../../style/sass-utils'; @use './mat/autocomplete' as tokens-mat-autocomplete; @use './mat/badge' as tokens-mat-badge; +@use './mat/text-button' as tokens-mat-text-button; +@use './mat/protected-button' as tokens-mat-protected-button; +@use './mat/filled-button' as tokens-mat-filled-button; +@use './mat/outlined-button' as tokens-mat-outlined-button; @use './mat/bottom-sheet' as tokens-mat-bottom-sheet; @use './mat/card' as tokens-mat-card; @use './mat/datepicker' as tokens-mat-datepicker; @@ -32,6 +36,10 @@ @use './mat/toolbar' as tokens-mat-toolbar; @use './mat/tree' as tokens-mat-tree; @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; @@ -104,14 +112,17 @@ _get-tokens-for-module($theme, tokens-mat-divider), _get-tokens-for-module($theme, tokens-mat-expansion), _get-tokens-for-module($theme, tokens-mat-fab), + _get-tokens-for-module($theme, tokens-mat-filled-button), _get-tokens-for-module($theme, tokens-mat-form-field), _get-tokens-for-module($theme, tokens-mat-grid-list), - _get-tokens-for-module($theme, tokens-mat-icon), _get-tokens-for-module($theme, tokens-mat-icon-button), + _get-tokens-for-module($theme, tokens-mat-icon), _get-tokens-for-module($theme, tokens-mat-menu), _get-tokens-for-module($theme, tokens-mat-optgroup), _get-tokens-for-module($theme, tokens-mat-option), + _get-tokens-for-module($theme, tokens-mat-outlined-button), _get-tokens-for-module($theme, tokens-mat-paginator), + _get-tokens-for-module($theme, tokens-mat-protected-button), _get-tokens-for-module($theme, tokens-mat-radio), _get-tokens-for-module($theme, tokens-mat-ripple), _get-tokens-for-module($theme, tokens-mat-select), @@ -120,9 +131,10 @@ _get-tokens-for-module($theme, tokens-mat-snack-bar), _get-tokens-for-module($theme, tokens-mat-sort), _get-tokens-for-module($theme, tokens-mat-stepper), - _get-tokens-for-module($theme, tokens-mat-tab-header), _get-tokens-for-module($theme, tokens-mat-tab-header-with-background), + _get-tokens-for-module($theme, tokens-mat-tab-header), _get-tokens-for-module($theme, tokens-mat-table), + _get-tokens-for-module($theme, tokens-mat-text-button), _get-tokens-for-module($theme, tokens-mat-toolbar), _get-tokens-for-module($theme, tokens-mat-tree), _get-tokens-for-module($theme, tokens-mdc-checkbox), @@ -132,18 +144,22 @@ _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-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), _get-tokens-for-module($theme, tokens-mdc-tab-indicator), + _get-tokens-for-module($theme, tokens-mdc-tab), + _get-tokens-for-module($theme, tokens-mdc-text-button), ); }