From b8e548d3aaf8aa35447d09cf009cd06aedabb871 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 28 Sep 2023 21:54:59 +0000 Subject: [PATCH] feat(material-experimental/theming): add M3 radio support --- src/dev-app/theme-m3.scss | 3 + .../theming/_custom-tokens.scss | 8 ++ .../theming/_m3-density.scss | 8 +- .../theming/_m3-tokens.scss | 10 ++ src/material/radio/_radio-theme.scss | 120 +++++++++++------- 5 files changed, 105 insertions(+), 44 deletions(-) diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index a1183cf286ca..d50cd098d709 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -43,6 +43,7 @@ html { @include mat.slider-theme($light-theme); @include mat.snack-bar-theme($light-theme); @include mat.progress-spinner-theme($light-theme); + @include mat.radio-theme($light-theme); } // Emit dark theme styles. @@ -58,6 +59,7 @@ html { @include mat.slider-color($dark-theme); @include mat.snack-bar-color($dark-theme); @include mat.progress-spinner-color($dark-theme); + @include mat.radio-color($dark-theme); } // Emit density styles for each scale. @@ -72,5 +74,6 @@ html { @include mat.slider-density($scale-theme); @include mat.snack-bar-density($scale-theme); @include mat.progress-spinner-density($scale-theme); + @include mat.radio-density($scale-theme); } } diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 47d100766951..f87dfae44369 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -63,3 +63,11 @@ button-color: map.get($systems, md-sys-color, inverse-primary), ); } + +@function radio($systems, $exclude-hardcoded) { + @return ( + ripple-color: map.get($systems, md-sys-color, on-surface), + checked-ripple-color: map.get($systems, md-sys-color, primary), + disabled-label-color: map.get($systems, md-sys-color, on-surface), + ); +} diff --git a/src/material-experimental/theming/_m3-density.scss b/src/material-experimental/theming/_m3-density.scss index 7759ccc413b7..bf6fa843ca02 100644 --- a/src/material-experimental/theming/_m3-density.scss +++ b/src/material-experimental/theming/_m3-density.scss @@ -15,19 +15,25 @@ /// ) // TODO(mmalerba): Add density tokens for remaining components. $_density-tokens: ( + // MDC tokens (mdc, checkbox): ( state-layer-size: (40px, 36px, 32px, 28px), ), (mdc, elevated-card): (), (mdc, outlined-card): (), (mdc, slider): (), - (mat, card): (), (mdc, plain-tooltip): (), + (mdc, radio): ( + state-layer-size: (40px, 36px, 32px, 28px), + ), + // Custom Angular Material tokens + (mat, card): (), (mat, toolbar): ( standard-height: (64px, 60px, 56px, 52px), mobile-height: (56px, 52px, 48px, 44px), ), (mat, slider): (), + (mat, radio): (), ); /// Gets the value for the given density scale from the given set of density values. diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index 34294fd0d461..c69b4f3de7ce 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -208,6 +208,11 @@ mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mdc, radio), + mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded), + $token-slots + ), // Choose values for our made up tokens based on MDC system tokens or sensible hardcoded // values. _namespace-tokens( @@ -230,6 +235,11 @@ custom-tokens.snack-bar($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mat, radio), + custom-tokens.radio($systems, $exclude-hardcoded), + $token-slots + ), ); // Strip out tokens that are systemized by our made up density system. diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss index 7cc297cce273..0289b3e10618 100644 --- a/src/material/radio/_radio-theme.scss +++ b/src/material/radio/_radio-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '@material/radio/radio-theme' as mdc-radio-theme; @use '@material/form-field' as mdc-form-field; @use '../core/mdc-helpers/mdc-helpers'; @@ -10,78 +11,111 @@ @use '../core/tokens/m2/mat/radio' as tokens-mat-radio; @mixin base($theme) { - @include sass-utils.current-selector-or-root() { - @include mdc-radio-theme.theme(tokens-mdc-radio.get-unthemable-tokens()); - @include token-utils.create-token-values( - tokens-mat-radio.$prefix, tokens-mat-radio.get-unthemable-tokens()); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } -} - -@mixin color($theme) { - @include mdc-helpers.using-mdc-theme($theme) { + @else { @include sass-utils.current-selector-or-root() { - @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query); + @include mdc-radio-theme.theme(tokens-mdc-radio.get-unthemable-tokens()); + @include token-utils.create-token-values( + tokens-mat-radio.$prefix, tokens-mat-radio.get-unthemable-tokens()); } } +} - .mat-mdc-radio-button { - &.mat-primary { - @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary)); - @include token-utils.create-token-values(tokens-mat-radio.$prefix, - tokens-mat-radio.get-color-tokens($theme, primary)); +@mixin color($theme) { + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); + } + @else { + @include mdc-helpers.using-mdc-theme($theme) { + .mat-mdc-radio-button { + @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query); + } } - &.mat-accent { - @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme)); - @include token-utils.create-token-values(tokens-mat-radio.$prefix, - tokens-mat-radio.get-color-tokens($theme)); - } + .mat-mdc-radio-button { + &.mat-primary { + @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary)); + @include token-utils.create-token-values(tokens-mat-radio.$prefix, + tokens-mat-radio.get-color-tokens($theme, primary)); + } - &.mat-warn { - @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn)); - @include token-utils.create-token-values(tokens-mat-radio.$prefix, - tokens-mat-radio.get-color-tokens($theme, warn)); + &.mat-accent { + @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme)); + @include token-utils.create-token-values(tokens-mat-radio.$prefix, + tokens-mat-radio.get-color-tokens($theme)); + } + + &.mat-warn { + @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn)); + @include token-utils.create-token-values(tokens-mat-radio.$prefix, + tokens-mat-radio.get-color-tokens($theme, warn)); + } } } } @mixin typography($theme) { - @include sass-utils.current-selector-or-root() { - @include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($theme)); + @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() { + @include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($theme)); + } - .mat-mdc-radio-button { - @include mdc-helpers.using-mdc-typography($theme) { - @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query); + .mat-mdc-radio-button { + @include mdc-helpers.using-mdc-typography($theme) { + @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query); + } } } } @mixin density($theme) { - $density-scale: inspection.get-theme-density($theme); - - @include sass-utils.current-selector-or-root() { - @include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } + @else { + $density-scale: inspection.get-theme-density($theme); + + @include sass-utils.current-selector-or-root() { + @include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme)); + } - @include mdc-helpers.if-touch-targets-unsupported($density-scale) { - .mat-mdc-radio-touch-target { - display: none; + @include mdc-helpers.if-touch-targets-unsupported($density-scale) { + .mat-mdc-radio-touch-target { + display: none; + } } } } @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-radio') { - @include base($theme); - @if inspection.theme-has($theme, color) { - @include color($theme); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme)); } - @if inspection.theme-has($theme, density) { - @include density($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); + } } } } + +@mixin _theme-from-tokens($tokens) { + @if ($tokens != ()) { + @include mdc-radio-theme.theme(map.get($tokens, tokens-mdc-radio.$prefix)); + @include token-utils.create-token-values( + tokens-mat-radio.$prefix, map.get($tokens, tokens-mat-radio.$prefix)); + } +}