diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index 358d0202a34f..0cb987338dc9 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -22,6 +22,18 @@ @include mat.tabs-color($theme, $color-variant: $color-variant); } + &.mat-mdc-slide-toggle { + @include mat.slide-toggle-color($theme, $color-variant: $color-variant); + } + + &.mat-mdc-form-field { + @include mat.select-color($theme, $color-variant: $color-variant); + } + + &.mat-mdc-radio-button { + @include mat.radio-color($theme, $color-variant: $color-variant); + } + // M3 dropped support for warn/error color FABs. @if $color-variant != error { &.mat-mdc-fab, diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 895b52ef81da..22657a289916 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -368,7 +368,7 @@ color: _hardcode(inherit, $exclude-hardcoded), ), ( // Color variants: - neutral: (), // Default, no overrides needed. + surface: (), // Default, no overrides needed. primary: ( color: map.get($systems, md-sys-color, primary), ), @@ -627,12 +627,24 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-radio @function radio($systems, $exclude-hardcoded) { - @return ( + @return (( ripple-color: map.get($systems, md-sys-color, on-surface), checked-ripple-color: map.get($systems, md-sys-color, primary), disabled-label-color: mat.private-safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), - ); + ), ( + // Color variants: + primary: (), // Default, no overrides needed + secondary: ( + checked-ripple-color: map.get($systems, md-sys-color, secondary), + ), + tertiary: ( + checked-ripple-color: map.get($systems, md-sys-color, tertiary), + ), + error: ( + checked-ripple-color: map.get($systems, md-sys-color, error), + ), + )); } /// Generates custom tokens for the mat-ripple. @@ -650,7 +662,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-select @function select($systems, $exclude-hardcoded) { - @return mat.private-merge-all( + @return (mat.private-merge-all( _generate-typography-tokens($systems, trigger-text, body-large), ( panel-background-color: map.get($systems, md-sys-color, surface-container), @@ -664,7 +676,19 @@ focused-arrow-color: map.get($systems, md-sys-color, primary), invalid-arrow-color: map.get($systems, md-sys-color, error), ) - ); + ), ( + // Color variants: + primary: (), // Default, no overrides needed + secondary: ( + focused-arrow-color: map.get($systems, md-sys-color, secondary), + ), + tertiary: ( + focused-arrow-color: map.get($systems, md-sys-color, tertiary), + ), + error: ( + focused-arrow-color: map.get($systems, md-sys-color, error), + ) + )); } /// Generates custom tokens for the mat-sidenav. @@ -684,14 +708,6 @@ ); } -/// Generates custom tokens for the mat-slide-toggle. -/// @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-slide-toggle -@function slide-toggle($systems, $exclude-hardcoded) { - @return _generate-typography-tokens($systems, label-text, label-large); -} - /// Generates custom tokens for the mat-slider. /// @param {Map} $systems The MDC system tokens /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values @@ -1010,3 +1026,97 @@ ), ); } + +/// Generates custom token overrides for the mdc-switch color variants. +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @return {Map} A set of color variant token overrides for the mdc-switch +@function mdc-switch-color-variants($systems, $exclude-hardcoded) { + @return ( + primary: (), // Default, no overrides needed + secondary: ( + selected-focus-handle-color: map.get($systems, md-sys-color, secondary-container), + selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary-container), + selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary), + selected-focus-track-color: map.get($systems, md-sys-color, secondary), + selected-handle-color: map.get($systems, md-sys-color, on-secondary), + selected-hover-handle-color: map.get($systems, md-sys-color, secondary-container), + selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary-container), + selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary), + selected-hover-track-color: map.get($systems, md-sys-color, secondary), + selected-icon-color: map.get($systems, md-sys-color, on-secondary-container), + selected-pressed-handle-color: map.get($systems, md-sys-color, secondary-container), + selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary-container), + selected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary), + selected-pressed-track-color: map.get($systems, md-sys-color, secondary), + selected-track-color: map.get($systems, md-sys-color, secondary), + ), + tertiary: ( + selected-focus-handle-color: map.get($systems, md-sys-color, tertiary-container), + selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary-container), + selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary), + selected-focus-track-color: map.get($systems, md-sys-color, tertiary), + selected-handle-color: map.get($systems, md-sys-color, on-tertiary), + selected-hover-handle-color: map.get($systems, md-sys-color, tertiary-container), + selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary-container), + selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary), + selected-hover-track-color: map.get($systems, md-sys-color, tertiary), + selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container), + selected-pressed-handle-color: map.get($systems, md-sys-color, tertiary-container), + selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary-container), + selected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary), + selected-pressed-track-color: map.get($systems, md-sys-color, tertiary), + selected-track-color: map.get($systems, md-sys-color, tertiary), + ), + error: ( + selected-focus-handle-color: map.get($systems, md-sys-color, error-container), + selected-focus-icon-color: map.get($systems, md-sys-color, on-error-container), + selected-focus-state-layer-color: map.get($systems, md-sys-color, error), + selected-focus-track-color: map.get($systems, md-sys-color, error), + selected-handle-color: map.get($systems, md-sys-color, on-error), + selected-hover-handle-color: map.get($systems, md-sys-color, error-container), + selected-hover-icon-color: map.get($systems, md-sys-color, on-error-container), + selected-hover-state-layer-color: map.get($systems, md-sys-color, error), + selected-hover-track-color: map.get($systems, md-sys-color, error), + selected-icon-color: map.get($systems, md-sys-color, on-error-container), + selected-pressed-handle-color: map.get($systems, md-sys-color, error-container), + selected-pressed-icon-color: map.get($systems, md-sys-color, on-error-container), + selected-pressed-state-layer-color: map.get($systems, md-sys-color, error), + selected-pressed-track-color: map.get($systems, md-sys-color, error), + selected-track-color: map.get($systems, md-sys-color, error), + ), + ); +} + +@function mdc-radio-color-variants($systems, $exclude-hardcoded) { + @return ( + primary: (), // Default, no overrides needed + secondary: ( + selected-focus-icon-color: map.get($systems, md-sys-color, secondary), + selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary), + selected-hover-icon-color: map.get($systems, md-sys-color, secondary), + selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary), + selected-icon-color: map.get($systems, md-sys-color, secondary), + selected-pressed-icon-color: map.get($systems, md-sys-color, secondary), + unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary), + ), + tertiary: ( + selected-focus-icon-color: map.get($systems, md-sys-color, tertiary), + selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary), + selected-hover-icon-color: map.get($systems, md-sys-color, tertiary), + selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary), + selected-icon-color: map.get($systems, md-sys-color, tertiary), + selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary), + unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary), + ), + error: ( + selected-focus-icon-color: map.get($systems, md-sys-color, error), + selected-focus-state-layer-color: map.get($systems, md-sys-color, error), + selected-hover-icon-color: map.get($systems, md-sys-color, error), + selected-hover-state-layer-color: map.get($systems, md-sys-color, error), + selected-icon-color: map.get($systems, md-sys-color, error), + selected-pressed-icon-color: map.get($systems, md-sys-color, error), + unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error), + ), + ); +} diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index 868c4d403c44..5fcd30ddac0b 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -643,7 +643,10 @@ ), _namespace-tokens( (mdc, radio), - mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded), + ( + mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded), + custom-tokens.mdc-radio-color-variants($systems, $exclude-hardcoded) + ), $token-slots ), _namespace-tokens( @@ -661,7 +664,10 @@ ), _namespace-tokens( (mdc, switch), - mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded), + ( + mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded), + custom-tokens.mdc-switch-color-variants($systems, $exclude-hardcoded) + ), $token-slots ), _namespace-tokens( @@ -818,11 +824,6 @@ custom-tokens.sidenav($systems, $exclude-hardcoded), $token-slots ), - _namespace-tokens( - (mat, slide-toggle), - custom-tokens.slide-toggle($systems, $exclude-hardcoded), - $token-slots - ), _namespace-tokens( (mat, slider), custom-tokens.slider($systems, $exclude-hardcoded), diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss index f2d26c7b9235..11c05d2934b0 100644 --- a/src/material/icon/_icon-theme.scss +++ b/src/material/icon/_icon-theme.scss @@ -72,8 +72,8 @@ /// Outputs all (base, color, typography, and density) theme styles for the mat-icon. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): -/// $color-variant: The color variant to use for the icon: neutral, primary, secondary, tertiary, -/// or error (If not specified, default neutral color will be used). +/// $color-variant: The color variant to use for the icon: surface, primary, secondary, tertiary, +/// or error (If not specified, default surface color will be used). @mixin theme($theme, $options...) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss index 77cfeaf4143e..2443858abe47 100644 --- a/src/material/radio/_radio-theme.scss +++ b/src/material/radio/_radio-theme.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use '@material/radio/radio-theme' as mdc-radio-theme; @use '@material/form-field/form-field-theme' as mdc-form-field-theme; @use '../core/style/sass-utils'; @@ -10,6 +9,9 @@ @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) +/// for the mat-radio. +/// @param {Map} $theme The theme to generate base styles for. @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); @@ -23,9 +25,14 @@ } } -@mixin color($theme) { +/// Outputs color theme styles for the mat-radio. +/// @param {Map} $theme The theme to generate color styles for. +/// @param {ArgList} Additional optional arguments (only supported for M3 themes): +/// $color-variant: The color variant to use for the radio button: primary, secondary, tertiary, +/// or error (If not specified, default primary color will be used). +@mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { - @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { .mat-mdc-radio-button { @@ -52,6 +59,8 @@ } } +/// Outputs typography theme styles for the mat-radio. +/// @param {Map} $theme The theme to generate typography styles for. @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); @@ -69,6 +78,8 @@ } } +/// Outputs typography theme styles for the mat-radio. +/// @param {Map} $theme The theme to generate density styles for. @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); @@ -84,10 +95,15 @@ } } -@mixin theme($theme) { +/// Outputs all (base, color, typography, and density) theme styles for the mat-radio. +/// @param {Map} $theme The theme to generate styles for. +/// @param {ArgList} Additional optional arguments (only supported for M3 themes): +/// $color-variant: The color variant to use for the radio button: primary, secondary, tertiary, +/// or error (If not specified, default primary color will be used). +@mixin theme($theme, $options...) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-radio') { @if inspection.get-theme-version($theme) == 1 { - @include _theme-from-tokens(inspection.get-theme-tokens($theme)); + @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); } @else { @include base($theme); @@ -104,11 +120,13 @@ } } -@mixin _theme-from-tokens($tokens) { - @if ($tokens != ()) { - @include mdc-radio-theme.theme(map.get($tokens, tokens-mdc-radio.$prefix)); - @include mdc-form-field-theme.theme(map.get($tokens, tokens-mdc-form-field.$prefix)); - @include token-utils.create-token-values( - tokens-mat-radio.$prefix, map.get($tokens, tokens-mat-radio.$prefix)); - } +@mixin _theme-from-tokens($tokens, $options...) { + $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...); + // Don't pass $options here, since the mdc-form-field doesn't support color options, + // only the mdc-radio and mat-radio do. + $mdc-form-field-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-form-field.$prefix); + @include mdc-radio-theme.theme($mdc-radio-tokens); + @include mdc-form-field-theme.theme($mdc-form-field-tokens); + @include token-utils.create-token-values(tokens-mat-radio.$prefix, $mat-radio-tokens); } diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss index c39c938d3e74..4ee5adc232b5 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use '@material/density' as mdc-density; @use '@material/textfield' as mdc-textfield; @use '../core/tokens/m2/mat/select' as tokens-mat-select; @@ -9,6 +8,9 @@ @use '../core/theming/inspection'; @use '../core/typography/typography'; +/// Outputs base theme styles (styles not dependent on the color, typography, or density settings) +/// for the mat-select. +/// @param {Map} $theme The theme to generate base styles for. @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); @@ -16,9 +18,14 @@ @else {} } -@mixin color($theme) { +/// Outputs color theme styles for the mat-select. +/// @param {Map} $theme The theme to generate color styles for. +/// @param {ArgList} Additional optional arguments (only supported for M3 themes): +/// $color-variant: The color variant to use for the select arrow: primary, secondary, tertiary, +/// or error (If not specified, default primary color will be used). +@mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { - @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { @@ -38,6 +45,8 @@ } } +/// Outputs typography theme styles for the mat-select. +/// @param {Map} $theme The theme to generate typography styles for. @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); @@ -50,6 +59,8 @@ } } +/// Outputs typography theme styles for the mat-select. +/// @param {Map} $theme The theme to generate density styles for. @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); @@ -79,10 +90,15 @@ } } -@mixin theme($theme) { +/// Outputs all (base, color, typography, and density) theme styles for the mat-icon. +/// @param {Map} $theme The theme to generate styles for. +/// @param {ArgList} Additional optional arguments (only supported for M3 themes): +/// $color-variant: The color variant to use for the select arrow: primary, secondary, tertiary, +/// or error (If not specified, default primary color will be used). +@mixin theme($theme, $options...) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-select') { @if inspection.get-theme-version($theme) == 1 { - @include _theme-from-tokens(inspection.get-theme-tokens($theme)); + @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); } @else { @include base($theme); @@ -99,9 +115,7 @@ } } -@mixin _theme-from-tokens($tokens) { - @if ($tokens != ()) { - @include token-utils.create-token-values( - tokens-mat-select.$prefix, map.get($tokens, tokens-mat-select.$prefix)); - } +@mixin _theme-from-tokens($tokens, $options...) { + $mat-select-tokens: token-utils.get-tokens-for($tokens, tokens-mat-select.$prefix, $options...); + @include token-utils.create-token-values(tokens-mat-select.$prefix, $mat-select-tokens); } diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index cb841939cfff..3a071fa53048 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -1,12 +1,15 @@ -@use 'sass:map'; @use '@material/switch/switch-theme' as mdc-switch-theme; @use '@material/form-field/form-field-theme' as mdc-form-field-theme; @use '../core/theming/theming'; @use '../core/theming/inspection'; +@use '../core/tokens/token-utils'; @use '../core/typography/typography'; @use '../core/tokens/m2/mdc/form-field' as tokens-mdc-form-field; @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. +/// @param {Map} $theme The theme to generate base styles for. @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); @@ -18,9 +21,14 @@ } } -@mixin color($theme) { +/// Outputs color theme styles for the mat-slide-toggle. +/// @param {Map} $theme The theme to generate color styles for. +/// @param {ArgList} Additional optional arguments (only supported for M3 themes): +/// $color-variant: The color variant to use for the slide-toggle: primary, secondary, tertiary, +/// or error (If not specified, default primary color will be used). +@mixin color($theme, $options...) { @if inspection.get-theme-version($theme) == 1 { - @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { $is-dark: inspection.get-theme-type($theme) == dark; @@ -50,6 +58,8 @@ } } +/// Outputs typography theme styles for the mat-slide-toggle. +/// @param {Map} $theme The theme to generate typography styles for. @mixin typography($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); @@ -65,6 +75,8 @@ } } +/// Outputs density theme styles for the mat-slide-toggle. +/// @param {Map} $theme The theme to generate density styles for. @mixin density($theme) { @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); @@ -78,10 +90,15 @@ } } -@mixin theme($theme) { +/// Outputs all (base, color, typography, and density) theme styles for the mat-icon. +/// @param {Map} $theme The theme to generate styles for. +/// @param {ArgList} Additional optional arguments (only supported for M3 themes): +/// $color-variant: The color variant to use for the slide-toggle: primary, secondary, tertiary, +/// or error (If not specified, default primary color will be used). +@mixin theme($theme, $options...) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') { @if inspection.get-theme-version($theme) == 1 { - @include _theme-from-tokens(inspection.get-theme-tokens($theme)); + @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); } @else { @include base($theme); @@ -98,9 +115,11 @@ } } -@mixin _theme-from-tokens($tokens) { - @if ($tokens != ()) { - @include mdc-switch-theme.theme(map.get($tokens, tokens-mdc-switch.$prefix)); - @include mdc-form-field-theme.theme(map.get($tokens, tokens-mdc-form-field.$prefix)); - } +@mixin _theme-from-tokens($tokens, $options...) { + $mdc-switch-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-switch.$prefix, $options...); + // Don't pass $options here, since the mdc-form-field doesn't support color options, + // only the mdc-switch does. + $mdc-form-field-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-form-field.$prefix); + @include mdc-switch-theme.theme($mdc-switch-tokens); + @include mdc-form-field-theme.theme($mdc-form-field-tokens); }