feat(material-experimental/theming): add M3 tokens for pseudo checkbox (#28407)

Sets up the M3 tokens for the pseudo checkbox component.

Author: crisbeto

src/dev-app/theme-m3.scss

@@ -77,6 +77,7 @@ html {
   @include mat.optgroup-theme($light-theme);
   @include mat.option-theme($light-theme);
   @include mat.paginator-theme($light-theme);
+  @include mat.pseudo-checkbox-theme($light-theme);
   @include mat.progress-bar-theme($light-theme);
   @include mat.progress-spinner-theme($light-theme);
   @include mat.radio-theme($light-theme);
@@ -126,6 +127,7 @@ html {
   @include mat.optgroup-color($dark-theme);
   @include mat.option-color($dark-theme);
   @include mat.paginator-color($dark-theme);
+  @include mat.pseudo-checkbox-color($dark-theme);
   @include mat.progress-bar-color($dark-theme);
   @include mat.progress-spinner-color($dark-theme);
   @include mat.radio-color($dark-theme);
@@ -174,6 +176,7 @@ html {
     @include mat.optgroup-density($scale-theme);
     @include mat.option-density($scale-theme);
     @include mat.paginator-density($scale-theme);
+    @include mat.pseudo-checkbox-density($scale-theme);
     @include mat.progress-bar-density($scale-theme);
     @include mat.progress-spinner-density($scale-theme);
     @include mat.radio-density($scale-theme);

src/material-experimental/theming/_custom-tokens.scss

@@ -521,6 +521,38 @@
   );
 }
 
+/// Generates custom tokens for the full variant of mat-pseudo-checkbox.
+/// @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 full variant of mat-pseudo-checkbox
+@function full-pseudo-checkbox($systems, $exclude-hardcoded) {
+  $disabled-color-base: map.get($systems, 'md-sys-color', 'on-surface');
+  $disabled-color: if($disabled-color-base == null, null, rgba($disabled-color-base, 0.38));
+
+  @return (
+    selected-icon-color: map.get($systems, 'md-sys-color', 'primary'),
+    selected-checkmark-color: map.get($systems, 'md-sys-color', 'on-primary'),
+    unselected-icon-color: map.get($systems, 'md-sys-color', 'on-surface-variant'),
+    disabled-selected-checkmark-color: map.get($systems, 'md-sys-color', 'surface'),
+    disabled-unselected-icon-color: $disabled-color,
+    disabled-selected-icon-color: $disabled-color,
+  );
+}
+
+/// Generates custom tokens for the minimal variant of mat-pseudo-checkbox.
+/// @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 minimal variant of mat-pseudo-checkbox
+@function minimal-pseudo-checkbox($systems, $exclude-hardcoded) {
+  $disabled-color-base: map.get($systems, 'md-sys-color', 'on-surface');
+  $disabled-color: if($disabled-color-base == null, null, rgba($disabled-color-base, 0.38));
+
+  @return (
+    selected-checkmark-color: map.get($systems, 'md-sys-color', 'primary'),
+    disabled-selected-checkmark-color: $disabled-color,
+  );
+}
+
 /// Generates custom tokens for the mat-radio.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

src/material-experimental/theming/_m3-density.scss

@@ -88,6 +88,8 @@ $_density-tokens: (
   (mat, menu): (),
   (mat, optgroup): (),
   (mat, option): (),
+  (mat, full-pseudo-checkbox): (),
+  (mat, minimal-pseudo-checkbox): (),
   (mat, paginator): (
     container-size: (56px, 52px, 48px, 40px),
   ),

src/material-experimental/theming/_m3-tokens.scss

@@ -676,6 +676,16 @@
       custom-tokens.paginator($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, full-pseudo-checkbox),
+      custom-tokens.full-pseudo-checkbox($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, minimal-pseudo-checkbox),
+      custom-tokens.minimal-pseudo-checkbox($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, radio),
       custom-tokens.radio($systems, $exclude-hardcoded),

src/material/_index.scss

@@ -60,7 +60,8 @@
 @forward './core/option/optgroup-theme' as optgroup-* show optgroup-color, optgroup-typography,
   optgroup-theme, optgroup-density, optgroup-base;
 @forward './core/selection/pseudo-checkbox/pseudo-checkbox-theme' as pseudo-checkbox-* show
-  pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme, pseudo-checkbox-base;
+  pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme, pseudo-checkbox-density,
+  pseudo-checkbox-base;
 @forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show
   pseudo-checkbox-legacy-size;
 @forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show

src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../../theming/theming';
 @use '../../theming/inspection';
 @use '../../style/sass-utils';
@@ -14,25 +15,39 @@
   }
 }
 
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
+      map.get($tokens, tokens-mat-full-pseudo-checkbox.$prefix));
+    @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,
+      map.get($tokens, tokens-mat-minimal-pseudo-checkbox.$prefix));
+  }
+}
+
 @mixin base($theme) {}
 
 @mixin color($theme) {
-  .mat-primary {
-    @include _palette-styles($theme, primary);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
+  @else {
+    .mat-primary {
+      @include _palette-styles($theme, primary);
+    }
 
-  // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
-  // theme from their parent, rather than implementing their own theming, which is why we
-  // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
-  // in order to allow for the color to be overwritten if the checkbox is inside a parent that
-  // has `mat-accent` and is placed inside another parent that has `mat-primary`.
-  @include _palette-styles($theme, accent);
-  .mat-accent {
+    // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
+    // theme from their parent, rather than implementing their own theming, which is why we
+    // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
+    // in order to allow for the color to be overwritten if the checkbox is inside a parent that
+    // has `mat-accent` and is placed inside another parent that has `mat-primary`.
     @include _palette-styles($theme, accent);
-  }
+    .mat-accent {
+      @include _palette-styles($theme, accent);
+    }
 
-  .mat-warn {
-    @include _palette-styles($theme, warn);
+    .mat-warn {
+      @include _palette-styles($theme, warn);
+    }
   }
 }
 
@@ -42,15 +57,20 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
-    @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);
+      }
     }
   }
 }

src/material/core/tokens/m2/_index.scss

@@ -21,6 +21,8 @@
 @use './mat/option' as tokens-mat-option;
 @use './mat/optgroup' as tokens-mat-optgroup;
 @use './mat/paginator' as tokens-mat-paginator;
+@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
+@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
 @use './mat/radio' as tokens-mat-radio;
 @use './mat/ripple' as tokens-mat-ripple;
 @use './mat/select' as tokens-mat-select;
@@ -122,6 +124,8 @@
       _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-full-pseudo-checkbox),
+      _get-tokens-for-module($theme, tokens-mat-minimal-pseudo-checkbox),
       _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),