refactor: add density scale to system map (angular#31389)

Co-authored-by: Andrew Seguin <[email protected]>

Author: andrewseguin

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)
   );
 }