Skip to content

fix(material-experimental/theming): Add support for color variants in slide-toggle, select, and radio #28445

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 18, 2024
Merged

fix(material-experimental/theming): Add support for color variants in slide-toggle, select, and radio #28445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/dev-app/theme-m3.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
136 changes: 123 additions & 13 deletions src/material-experimental/theming/_custom-tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
),
Expand Down Expand Up @@ -614,12 +614,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.
Expand All @@ -637,7 +649,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),
Expand All @@ -651,7 +663,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.
Expand All @@ -671,14 +695,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
Expand Down Expand Up @@ -997,3 +1013,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),
),
);
}
15 changes: 8 additions & 7 deletions src/material-experimental/theming/_m3-tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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(
Expand Down Expand Up @@ -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),
Expand Down
4 changes: 2 additions & 2 deletions src/material/icon/_icon-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
42 changes: 30 additions & 12 deletions src/material/radio/_radio-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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));
Expand All @@ -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 {
Expand All @@ -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));
Expand All @@ -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));
Expand All @@ -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);
Expand All @@ -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);
}
Loading