refactor: move density tokens to their token files (#30839)

* refactor: move density tokens to their token files

* refactor: include density tokens in themes

Author: andrewseguin

src/material/autocomplete/_autocomplete-theme.scss

@@ -48,7 +48,7 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(

src/material/badge/_badge-theme.scss

@@ -74,7 +74,7 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
   }
 }

src/material/bottom-sheet/_bottom-sheet-theme.scss

@@ -48,7 +48,7 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
   }
 }

src/material/button-toggle/_button-toggle-theme.scss

@@ -5,6 +5,7 @@
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use './m2-button-toggle';
+@use './m3-button-toggle';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-button-toggle.
@@ -59,7 +60,8 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(
+        m3-button-toggle.$prefix, m3-button-toggle.get-density-tokens($theme));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -97,6 +99,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

src/material/button-toggle/_m3-button-toggle.scss

@@ -1,6 +1,9 @@
 @use 'sass:map';
+@use 'sass:list';
 @use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, button-toggle);
@@ -58,3 +61,13 @@ $prefix: (mat, button-toggle);
 
   @return m3-utils.namespace($prefix, ($tokens, $color-variants), $token-slots);
 }
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    height: list.nth((40px, 40px, 40px, 36px, 24px), $index),
+  );
+}

src/material/button/_button-theme.scss

@@ -5,6 +5,7 @@
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use './m2-button';
+@use './m3-button';
 
 @mixin _button-variant($theme, $palette) {
   $mat-tokens: if(
@@ -91,7 +92,8 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(
+        m3-button.$prefix, m3-button.get-density-tokens($theme));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -127,6 +129,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

src/material/button/_fab-theme.scss

@@ -3,6 +3,7 @@
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
 @use './m2-fab';
+@use './m3-fab';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 
@@ -80,7 +81,7 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(m3-fab.$prefix, m3-fab.get-density-tokens($theme));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -116,6 +117,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

src/material/button/_icon-button-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use 'sass:math';
 @use './m2-icon-button';
+@use './m3-icon-button';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
@@ -74,7 +75,8 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(
+        m3-icon-button.$prefix, m3-icon-button.get-density-tokens($theme));
   } @else {
     $icon-size: 24px;
     $density-scale: inspection.get-theme-density($theme);
@@ -137,6 +139,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

src/material/button/_m3-button.scss

@@ -1,7 +1,10 @@
 @use 'sass:map';
+@use 'sass:list';
 @use '../core/tokens/m3-utils';
 @use '../core/style/sass-utils';
 @use '../core/style/elevation';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, button);
@@ -14,7 +17,6 @@ $prefix: (mat, button);
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
   $tokens: (
     filled-container-color: map.get($systems, md-sys-color, primary),
-    filled-container-height: if($exclude-hardcoded, null, 40px),
     filled-container-shape: map.get($systems, md-sys-shape, corner-full),
     filled-disabled-container-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
@@ -37,7 +39,6 @@ $prefix: (mat, button);
         map.get($systems, md-sys-color, on-primary),
         $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)    ),
     filled-state-layer-color: map.get($systems, md-sys-color, on-primary),
-    outlined-container-height: if($exclude-hardcoded, null, 40px),
     outlined-container-shape: map.get($systems, md-sys-shape, corner-full),
     outlined-disabled-label-text-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
@@ -64,7 +65,6 @@ $prefix: (mat, button);
     outlined-state-layer-color: map.get($systems, md-sys-color, primary),
     protected-container-color: map.get($systems, md-sys-color, surface),
     protected-container-elevation-shadow: map.get($systems, md-sys-elevation, level1),
-    protected-container-height: if($exclude-hardcoded, null, 40px),
     protected-container-shape: map.get($systems, md-sys-shape, corner-full),
     protected-disabled-container-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
@@ -91,7 +91,6 @@ $prefix: (mat, button);
         map.get($systems, md-sys-color, primary),
         $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)),
     protected-state-layer-color: map.get($systems, md-sys-color, primary),
-    text-container-height: if($exclude-hardcoded, null, 40px),
     text-container-shape: map.get($systems, md-sys-shape, corner-full),
     text-disabled-label-text-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
@@ -113,7 +112,6 @@ $prefix: (mat, button);
     text-state-layer-color: map.get($systems, md-sys-color, primary),
     text-with-icon-horizontal-padding: m3-utils.hardcode(16px, $exclude-hardcoded),
     tonal-container-color: map.get($systems, md-sys-color, secondary-container),
-    tonal-container-height: if($exclude-hardcoded, null, 40px),
     tonal-container-shape: map.get($systems, md-sys-shape, corner-full),
     tonal-disabled-container-color: sass-utils.safe-color-change(
         map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
@@ -241,3 +239,22 @@ $prefix: (mat, button);
 
   @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    filled-touch-target-display: list.nth((block, block, none, none), $index),
+    filled-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    outlined-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    outlined-touch-target-display: list.nth((block, block, none, none), $index),
+    protected-touch-target-display: list.nth((block, block, none, none), $index),
+    protected-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    text-touch-target-display: list.nth((block, block, none, none), $index),
+    text-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    tonal-container-height: list.nth((40px, 36px, 32px, 28px), $index),
+    tonal-touch-target-display: list.nth((block, block, none, none), $index),
+  );
+}

src/material/button/_m3-fab.scss

@@ -1,7 +1,10 @@
 @use 'sass:map';
+@use 'sass:list';
 @use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
 @use '../core/style/elevation';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, fab);
@@ -172,3 +175,13 @@ $prefix: (mat, fab);
 
   @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    touch-target-display: list.nth((block, block, none, none), $index),
+  );
+}