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

Reworks the radio touch target to use tokens.

Author: crisbeto

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

@@ -96,7 +96,9 @@ $_density-tokens: (
   (mat, paginator): (
     container-size: (56px, 52px, 48px, 40px),
   ),
-  (mat, radio): (),
+  (mat, radio): (
+    touch-target-display: (block, block, none, none),
+  ),
   (mat, ripple): (),
   (mat, select): (),
   (mat, sidenav): (),

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

@@ -1,4 +1,5 @@
 @use '../../token-utils';
+@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
@@ -29,7 +30,11 @@ $prefix: (mat, radio);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $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.

src/material/radio/_radio-theme.scss

@@ -1,7 +1,6 @@
 @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/mdc-helpers/mdc-helpers';
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -60,6 +59,8 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-radio.$prefix, tokens-mat-radio.get-typography-tokens($theme));
     }
 
     .mat-mdc-radio-button {
@@ -77,12 +78,8 @@
 
     @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 token-utils.create-token-values(
+        tokens-mat-radio.$prefix, tokens-mat-radio.get-density-tokens($theme));
     }
   }
 }

src/material/radio/radio.scss

@@ -108,6 +108,10 @@
       $set-width: true,
       $query: mdc-helpers.$mdc-base-styles-query);
 
+    @include token-utils.use-tokens(tokens-mat-radio.$prefix,tokens-mat-radio.get-token-slots()) {
+      @include token-utils.create-token-slot(display, touch-target-display);
+    }
+
     [dir='rtl'] & {
       left: 0;
       right: 50%;