refactor: update density

Author: andrewseguin

src/material/button/_m2-button.scss

@@ -148,22 +148,23 @@ $prefix: (mat, button);
     filled-ripple-color: $ripple-color,
     filled-state-layer-color: $state-layer-color,
     outlined-label-text-color: inspection.get-theme-color($theme, $palette-name, default),
-    outlined-outline-color: map.get(get-color-tokens($theme), outline-color),
+    outlined-outline-color: map.get(get-color-tokens($theme), outlined-outline-color),
     outlined-ripple-color:
-        if(meta.type-of($color) == color,
-          rgba($color, $ripple-opacity),
+        if(
+          meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
+          rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
           inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
-    outlined-state-layer-color: $color,
+    outlined-state-layer-color: inspection.get-theme-color($theme, $palette-name),
     protected-container-color: $container-color,
     protected-label-text-color: $label-text-color,
     protected-ripple-color: $ripple-color,
     protected-state-layer-color: $state-layer-color,
     text-label-text-color: inspection.get-theme-color($theme, $palette-name),
     text-ripple-color:
-        if(meta.type-of($color) == color,
-          rgba($color, $ripple-opacity),
+        if(meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
+          rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
           inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
-    text-state-layer-color: $color,
+    text-state-layer-color: inspection.get-theme-color($theme, $palette-name),
     tonal-container-color: inspection.get-theme-color($theme, $palette-name, default),
     tonal-label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
     tonal-ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1),

src/material/core/tokens/_density.scss

@@ -30,29 +30,32 @@ $_density-tokens: (
     (mat, datepicker): (),
     (mat, dialog): (),
     (mat, divider): (),
-    (mat, card-elevated): (),
     (mat, expansion): (
       header-collapsed-state-height: (48px, 44px, 40px, 36px),
       header-expanded-state-height: (64px, 60px, 56px, 48px),
     ),
-    (mat, fab-extended): (),
     (mat, fab): (
       touch-target-display: (block, block, none, none),
     ),
-    (mat, fab-small): (),
-    (mat, button-filled): (
-      touch-target-display: (block, block, none, none),
-      container-height: (40px, 36px, 32px, 28px),
+    (mat, button): (
+      filled-touch-target-display: (block, block, none, none),
+      filled-container-height: (40px, 36px, 32px, 28px),
+      outlined-container-height: (40px, 36px, 32px, 28px),
+      outlined-touch-target-display: (block, block, none, none),
+      protected-touch-target-display: (block, block, none, none),
+      protected-container-height: (40px, 36px, 32px, 28px),
+      text-touch-target-display: (block, block, none, none),
+      text-container-height: (40px, 36px, 32px, 28px),
+      tonal-container-height: (40px, 36px, 32px, 28px),
+      tonal-touch-target-display: (block, block, none, none),
     ),
-    (mat, form-field-filled): (),
     (mat, form-field): (
       container-height: (56px, 52px, 48px, 44px, 40px, 36px),
       filled-label-display: (block, block, none, none, none, none),
       container-vertical-padding: (16px, 14px, 12px, 10px, 8px, 6px),
       filled-with-label-container-padding-top: (24px, 22px, 12px, 10px, 8px, 6px),
       filled-with-label-container-padding-bottom: (8px, 6px, 12px, 10px, 8px, 6px),
     ),
-    (mat, pseudo-checkbox-full): (),
     (mat, grid-list): (),
     (mat, icon): (),
     (mat, icon-button): (
@@ -69,26 +72,15 @@ $_density-tokens: (
       list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
     ),
     (mat, menu): (),
-    (mat, pseudo-checkbox-minimal): (),
     (mat, optgroup): (),
     (mat, option): (),
-    (mat, button-outlined): (
-      container-height: (40px, 36px, 32px, 28px),
-      touch-target-display: (block, block, none, none),
-    ),
-    (mat, card-outlined): (),
-    (mat, form-field-outlined): (),
     (mat, paginator): (
       container-size: (56px, 52px, 48px, 40px),
       form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
       form-field-container-vertical-padding: (8px, 8px, 8px, 8px, 8px, 6px),
       touch-target-display: (block, block, none, none),
     ),
     (mat, tooltip): (),
-    (mat, button-protected): (
-      touch-target-display: (block, block, none, none),
-      container-height: (40px, 36px, 32px, 28px),
-    ),
     (mat, radio): (
       touch-target-display: (block, block, none, none),
       state-layer-size: (40px, 36px, 32px, 28px),
@@ -116,15 +108,7 @@ $_density-tokens: (
       footer-container-height: (52px, 48px, 44px, 40px, 36px),
       row-item-container-height: (52px, 48px, 44px, 40px, 36px),
     ),
-    (mat, button-text): (
-      touch-target-display: (block, block, none, none),
-      container-height: (40px, 36px, 32px, 28px),
-    ),
     (mat, timepicker): (),
-    (mat, button-tonal): (
-      container-height: (40px, 36px, 32px, 28px),
-      touch-target-display: (block, block, none, none),
-    ),
     (mat, toolbar): (
       standard-height: (64px, 60px, 56px, 52px),
       mobile-height: (56px, 52px, 48px, 44px),

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

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../core/tokens/m3-utils';
-@use '../core/style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, slide-toggle);
@@ -104,21 +103,12 @@ $prefix: (mat, slide-toggle);
     visible-track-opacity: m3-utils.hardcode(1, $exclude-hardcoded),
     visible-track-transition: m3-utils.hardcode(opacity 75ms, $exclude-hardcoded),
     with-icon-handle-size: m3-utils.hardcode(24px, $exclude-hardcoded),
-    handle-elevation-shadow: map.get($systems, md-sys-elevation, level0),
-    disabled-handle-elevation-shadow: map.get($systems, md-sys-elevation, level0),
+    // These tokens have always been empty for M3, but these token values should be used
+    // (with the same technique of calling `elevation.get-box-shadow`)
+    // Currently, internal users have M2 tokens being applied by accident
+    // handle-elevation-shadow: map.get($systems, md-sys-elevation, level0),
+    // disabled-handle-elevation-shadow: map.get($systems, md-sys-elevation, level0),
   );
-  $elevation-tokens: (
-    handle-elevation-shadow,
-    disabled-handle-elevation-shadow
-  );
-
-  @each $token in $elevation-tokens {
-    $elevation: map.get($tokens, $token);
-
-    @if ($elevation != null) {
-      $tokens: map.set($tokens, $token, elevation.get-box-shadow($elevation));
-    }
-  }
 
   $variant-tokens: (
     primary: (), // Default, no overrides needed