feat(material-experimental/theming): add M3 radio support

angular · Oct 2, 2023 · 222d09c · 222d09c
1 parent ae80455
commit 222d09c
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 44 deletions.
diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss
@@ -42,6 +42,7 @@ html {
   @include mat.toolbar-theme($light-theme);
   @include mat.slider-theme($light-theme);
   @include mat.snack-bar-theme($light-theme);
+  @include mat.radio-theme($light-theme);
 }
 
 // Emit dark theme styles.
@@ -56,6 +57,7 @@ html {
   @include mat.toolbar-color($dark-theme);
   @include mat.slider-color($dark-theme);
   @include mat.snack-bar-color($dark-theme);
+  @include mat.radio-color($dark-theme);
 }
 
 // Emit density styles for each scale.
@@ -69,5 +71,6 @@ html {
     @include mat.toolbar-density($scale-theme);
     @include mat.slider-density($scale-theme);
     @include mat.snack-bar-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
@@ -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
@@ -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
@@ -203,6 +203,11 @@
           mdc-tokens.md-comp-plain-tooltip-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(
@@ -225,6 +230,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
@@ -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) {
+      @include sass-utils.current-selector-or-root() {
+        @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));
+  }
+}