refactor(material/checkbox): switch touch target to tokens

Switches the checkbox touch target to use tokens.

Author: crisbeto

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

@@ -68,6 +68,9 @@ $_density-tokens: (
   (mat, badge): (),
   (mat, bottom-sheet): (),
   (mat, card): (),
+  (mat, checkbox): (
+    touch-target-display: (block, block, none, none),
+  ),
   (mat, datepicker): (),
   (mat, divider): (),
   (mat, expansion): (

src/material/checkbox/_checkbox-theme.scss

@@ -2,12 +2,13 @@
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field/form-field-theme' as mdc-form-field-theme;
 @use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 @use '../core/tokens/m2/mdc/form-field' as tokens-mdc-form-field;
+@use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox;
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
@@ -16,6 +17,8 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-unthemable-tokens());
     }
   }
 }
@@ -27,6 +30,8 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-color-tokens($theme));
     }
 
     .mat-mdc-checkbox {
@@ -55,6 +60,8 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-typography-tokens($theme));
     }
 
     .mat-mdc-checkbox {
@@ -72,12 +79,8 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($theme));
-    }
-
-    @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
-      .mat-mdc-checkbox-touch-target {
-        display: none;
-      }
+      @include token-utils.create-token-values(
+        tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-density-tokens($theme));
     }
   }
 }
@@ -108,5 +111,7 @@
     //   so this mixin is currently incomplete.
     @include mdc-checkbox-theme.theme(map.get($tokens, tokens-mdc-checkbox.$prefix));
     @include mdc-form-field-theme.theme(map.get($tokens, tokens-mdc-form-field.$prefix));
+    @include token-utils.create-token-values(
+      tokens-mat-checkbox.$prefix, map.get($tokens, tokens-mat-checkbox.$prefix));
   }
 }

src/material/checkbox/checkbox.scss

@@ -8,6 +8,7 @@
 @use '../core/style/layout-common';
 @use '../core/style/vendor-prefixes';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
+@use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox;
 @use '../core/tokens/token-utils';
 
 @include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
@@ -220,6 +221,11 @@
   @include mdc-touch-target.touch-target(
     $set-width: true,
     $query: mdc-helpers.$mdc-base-styles-query);
+
+  @include token-utils.use-tokens(tokens-mat-checkbox.$prefix,
+    tokens-mat-checkbox.get-token-slots()) {
+    @include token-utils.create-token-slot(display, touch-target-display);
+  }
 }
 
 // Checkbox components have to set `border-radius: 50%` in order to support density scaling

src/material/core/tokens/m2/mat/_checkbox.scss

@@ -0,0 +1,43 @@
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, checkbox);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    touch-target-display: if($density-scale < -1, none, block),
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}