refactor: add density scale to system map

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

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
 
@@ -70,7 +69,8 @@
 
 // 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), -4);
+  $system: m2-utils.get-system($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -4);
   $size-scale: (
     0: 48px,
     -1: 44px,

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

@@ -2,7 +2,6 @@
 @use 'sass:list';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-button-toggle.
@@ -56,7 +55,7 @@
       button-toggle-legacy-state-layer-color: null,
       button-toggle-legacy-text-color: null,
     ),
-    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
+    density: get-density-tokens(map.get($system, density-scale)),
   );
 
   @return $tokens;

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

@@ -3,7 +3,9 @@
 @use './m2-icon-button';
 @use './m3-icon-button';
 @use '../core/tokens/token-utils';
+@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
+@use '../core/theming/theming';
 
 @mixin base($theme) {
   $tokens: m2-icon-button.get-unthemable-tokens();
@@ -60,7 +62,8 @@
     @include token-utils.values(map.get(m3-icon-button.get-tokens($theme), density));
   } @else {
     $icon-size: 24px;
-    $density-scale: inspection.get-theme-density($theme);
+    $system: m2-utils.get-system($theme);
+    $density-scale: theming.clamp-density(map.get($system, density-scale), -5);
     $size-map: (
       0: 48px,
       -1: 44px,

src/material/button/_m2-button.scss

@@ -176,8 +176,8 @@
 
 // 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);
-  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $system: m2-utils.get-system($theme);
+  $scale: theming.clamp-density(map.get($system, density-scale), -3);
   $sizes: (
     0: 36px,
     -1: 32px,

src/material/button/_m2-fab.scss

@@ -93,7 +93,8 @@
 
 // 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);
+  $system: m2-utils.get-system($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
 
   @return (
     fab-small-touch-target-display: if($density-scale < -1, none, block),

src/material/button/_m2-icon-button.scss

@@ -51,18 +51,19 @@
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme, $exclude: ()) {
-  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $system: m2-utils.get-system($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
 
   $tokens: (
-    icon-button-touch-target-display: if($scale < -1, none, block),
+    icon-button-touch-target-display: if($density-scale < -1, none, block),
     icon-button-state-layer-size: map.get((
       0: 48px,
       -1: 44px,
       -2: 40px,
       -3: 36px,
       -4: 32px,
       -5: 28px,
-    ), $scale)
+    ), $density-scale)
   );
 
   @each $token in $exclude {

src/material/button/_m3-button.scss

@@ -4,7 +4,6 @@
 @use '../core/tokens/m3';
 @use '../core/style/elevation';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 
 
 /// Generates custom tokens for the button.
@@ -141,7 +140,7 @@
       button-tonal-label-text-tracking: map.get($system, label-large-tracking),
       button-tonal-label-text-weight: map.get($system, label-large-weight),
     ),
-    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
+    density: get-density-tokens(map.get($system, density-scale)),
   );
 }
 

src/material/button/_m3-fab.scss

@@ -3,7 +3,6 @@
 @use '../core/tokens/m3-utils';
 @use '../core/style/elevation';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-fab.
@@ -72,7 +71,7 @@
       fab-extended-label-text-tracking: map.get($system, label-large-tracking),
       fab-extended-label-text-weight: map.get($system, label-large-weight),
     ),
-    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
+    density: get-density-tokens(map.get($system, density-scale)),
   );
 
   @return $tokens;

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

@@ -2,7 +2,6 @@
 @use 'sass:list';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-icon-button.
@@ -35,7 +34,7 @@
       icon-button-state-layer-color: map.get($system, on-surface-variant),
     ),
     typography: (),
-    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
+    density: get-density-tokens(map.get($system, density-scale)),
   );
 
   @return $tokens;

src/material/checkbox/_m2-checkbox.scss

@@ -69,15 +69,16 @@
 
 // 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);
+  $system: m2-utils.get-system($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
 
   @return (
-    checkbox-touch-target-display: if($scale < -1, none, block),
+    checkbox-touch-target-display: if($density-scale < -1, none, block),
     checkbox-state-layer-size: map.get((
       0: 40px,
       -1: 36px,
       -2: 32px,
       -3: 28px,
-    ), $scale)
+    ), $density-scale)
   );
 }

src/material/checkbox/_m3-checkbox.scss

@@ -2,7 +2,6 @@
 @use 'sass:list';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m3';
 
 /// Generates custom tokens for mat-checkbox.
@@ -52,7 +51,7 @@
       checkbox-label-text-tracking: map.get($system, body-medium-tracking),
       checkbox-label-text-weight: map.get($system, body-medium-weight),
     ),
-    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
+    density: get-density-tokens(map.get($system, density-scale)),
   );
 }
 

src/material/chips/_m2-chip.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../core/theming/inspection';
 @use '../core/theming/theming';
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
@@ -84,7 +83,9 @@
 
 // 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), -2);
+  $system: m2-utils.get-system($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -2);
+
   @return (
     // The height of the chip.
     chip-container-height: map.get(
@@ -93,7 +94,7 @@
           -1: 28px,
           -2: 24px,
         ),
-        $scale
+        $density-scale
     )
   );
 }

src/material/chips/_m3-chip.scss

@@ -2,7 +2,6 @@
 @use 'sass:list';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-chip.
@@ -67,7 +66,7 @@
       chip-label-text-tracking: map.get($system, label-large-tracking),
       chip-label-text-weight: map.get($system, label-large-weight),
     ),
-    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
+    density: get-density-tokens(map.get($system, density-scale)),
   );
 }
 

src/material/core/m2/_theming.scss

@@ -114,7 +114,7 @@
   @return $theme;
 }
 
-@function _define-system($primary, $accent, $warn, $is-dark, $typography) {
+@function _define-system($primary, $accent, $warn, $is-dark, $typography, $density-scale) {
   $palettes: (
     primary: $primary,
     accent: $accent,
@@ -128,7 +128,7 @@
   $sys-state: m2.md-sys-state-values();
   $sys-typography: m2.md-sys-typescale-values($typography);
 
-  $system: ();
+  $system: (density-scale: $density-scale);
   @each $map in ($sys-color, $sys-state, $sys-typography) {
     $system: map.merge($system, $map);
   }
@@ -188,7 +188,9 @@
         $accent: $accent,
         $warn: $warn,
         $is-dark: $is-dark,
-        $typography: ());
+        $typography: (),
+        $density-scale: 0
+    );
     $theme: map.set($theme, _mat-system, $system);
     @return $theme;
   }
@@ -216,7 +218,9 @@
       $accent: map.get($result, accent) or map.get($result, color, accent) or (),
       $warn: map.get($result, warn) or map.get($result, color, warn) or (),
       $is-dark: $is-dark,
-      $typography: map.get($result, typography) or ());
+      $typography: map.get($result, typography) or (),
+      $density-scale: map.get($result, density),
+  );
   $theme: map.set($theme, _mat-system, $system);
   @return $theme;
 }

src/material/core/theming/_definition.scss

@@ -90,7 +90,9 @@ $theme-version: 1;
     ),
     m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
   );
-  $system: ();
+  $system: (
+    density-scale: $density-scale,
+  );
   @each $sys-map in $system-maps {
     $system: map.merge($system, $sys-map);
   }

src/material/core/tokens/_m2-utils.scss

@@ -1,16 +1,24 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use './m2';
 
 // Gets the theme's system values as a flat map.
 @function get-system($theme) {
-  $system: map.get($theme, _mat-system);
-  @if $system {
-    @return $system;
+  @if meta.type-of($theme) == map {
+    $system: map.get($theme, _mat-system);
+    @if $system {
+      @return $system;
+    }
+
+    // If the $theme is a typography-config, convert it to a system map.
+    @if map.has-key($theme, body-1) {
+      @return m2.md-sys-typescale-values($theme);
+    }
   }
 
-  // If the $theme is a typography-config, convert it to a system map.
-  @if map.has-key($theme, body-1) {
-    @return m2.md-sys-typescale-values($theme);
+  // If the $theme is a density scale, convert it to a system map.
+  @if meta.type-of($theme) == 'number' or $theme == minimum or $theme == maximum {
+    @return (density-scale: $theme);
   }
 
   @return ();

src/material/core/tokens/m3/_theme.scss

@@ -28,7 +28,7 @@ $_sys-maps: (
   ),
 );
 
-$_system: ();
+$_system: (density-scale: 0);
 @each $sys-map in $_sys-maps {
   $_system: map.merge($_system, _create-system-app-vars-map($sys-map));
 }

src/material/expansion/_m2-expansion.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
 @use '../core/style/elevation';
@@ -59,7 +58,8 @@
 
 // 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);
+  $system: m2-utils.get-system($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
   $collapsed-scale: (
     0: 48px,
     -1: 44px,
@@ -74,7 +74,7 @@
   );
 
   @return (
-    expansion-header-collapsed-state-height: map.get($collapsed-scale, $scale),
-    expansion-header-expanded-state-height: map.get($expanded-scale, $scale),
+    expansion-header-collapsed-state-height: map.get($collapsed-scale, $density-scale),
+    expansion-header-expanded-state-height: map.get($expanded-scale, $density-scale),
   );
 }

src/material/expansion/_m3-expansion.scss

@@ -2,7 +2,6 @@
 @use 'sass:list';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m3';
 @use '../core/style/elevation';
 
@@ -46,7 +45,7 @@ $prefix: (mat, expansion);
       expansion-header-text-tracking: map.get($system, title-medium-tracking),
       expansion-header-text-weight: map.get($system, title-medium-weight),
     ),
-    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
+    density: get-density-tokens(map.get($system, density-scale)),
   );
 }
 

src/material/form-field/_m2-form-field.scss

@@ -172,7 +172,8 @@
 
 // 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), -5);
+  $system: m2-utils.get-system($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -5);
   $size-scale: (
     0: 56px,
     -1: 52px,

src/material/form-field/_m3-form-field.scss

@@ -2,7 +2,6 @@
 @use 'sass:list';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m3';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -117,7 +116,7 @@ $prefix: (mat, form-field);
       form-field-filled-label-text-weight: map.get($system, body-large-weight),
       form-field-outlined-label-text-populated-size: null,
     ),
-    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
+    density: get-density-tokens(map.get($system, density-scale)),
   );
 }