@angular/material 20.1.0-next.1 → 20.1.0-rc.0

package/button/_m2-button.scss

@@ -2,105 +2,147 @@
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/style/elevation';
 
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
-  @return (
-    button-filled-container-shape: 4px,
-    button-filled-horizontal-padding: 16px,
-    button-filled-icon-offset: -4px,
-    button-filled-icon-spacing: 8px,
-    button-outlined-container-shape: 4px,
-    button-outlined-horizontal-padding: 15px, // Normally it's 16px, but -1px for the outline.
-    button-outlined-icon-offset: -4px,
-    button-outlined-icon-spacing: 8px,
-    button-outlined-keep-touch-target: false,
-    button-outlined-outline-width: 1px,
-    button-protected-container-elevation-shadow: elevation.get-box-shadow(2),
-    button-protected-container-shape: 4px,
-    button-protected-disabled-container-elevation-shadow: elevation.get-box-shadow(0),
-    button-protected-focus-container-elevation-shadow: elevation.get-box-shadow(4),
-    button-protected-horizontal-padding: 16px,
-    button-protected-hover-container-elevation-shadow: elevation.get-box-shadow(4),
-    button-protected-icon-offset: -4px,
-    button-protected-icon-spacing: 8px,
-    button-protected-pressed-container-elevation-shadow: elevation.get-box-shadow(8),
-    button-text-container-shape: 4px,
-    button-text-horizontal-padding: 8px,
-    button-text-icon-offset: 0,
-    button-text-icon-spacing: 8px,
-    button-text-with-icon-horizontal-padding: 8px,
-    button-tonal-container-shape: 4px,
-    button-tonal-horizontal-padding: 16px,
-    button-tonal-icon-offset: -4px,
-    button-tonal-icon-spacing: 8px,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
+@function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
-  $is-dark: inspection.get-theme-type($theme) == dark;
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
   $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
 
+  $scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $height: map.get((
+    0: 36px,
+    -1: 32px,
+    -2: 28px,
+    -3: 24px,
+  ), $scale);
+  $touch-target-display: if($scale < -1, none, block);
+
   @return (
-    button-filled-container-color: map.get($system, surface),
-    button-filled-disabled-container-color: $disabled-container,
-    button-filled-disabled-label-text-color: $disabled,
-    button-filled-disabled-state-layer-color: map.get($system, on-surface-variant),
-    button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    button-filled-label-text-color: map.get($system, on-surface),
-    button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    button-filled-ripple-color: m3-utils.color-with-opacity(
-        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
-    button-filled-state-layer-color: map.get($system, on-surface),
-    button-outlined-disabled-label-text-color: $disabled,
-    button-outlined-disabled-outline-color: map.get($system, outline),
-    button-outlined-disabled-state-layer-color: map.get($system, on-surface-variant),
-    button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    button-outlined-label-text-color: map.get($system, on-surface),
-    button-outlined-outline-color: map.get($system, outline),
-    button-outlined-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    button-outlined-ripple-color: m3-utils.color-with-opacity(
-        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
-    button-outlined-state-layer-color: map.get($system, on-surface),
-    button-protected-container-color: map.get($system, surface),
-    button-protected-disabled-container-color: $disabled-container,
-    button-protected-disabled-label-text-color: $disabled,
-    button-protected-disabled-state-layer-color: map.get($system, on-surface-variant),
-    button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    button-protected-label-text-color: map.get($system, on-surface),
-    button-protected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    button-protected-ripple-color: m3-utils.color-with-opacity(
-        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
-    button-protected-state-layer-color: map.get($system, on-surface),
-    button-text-disabled-label-text-color: $disabled,
-    button-text-disabled-state-layer-color: map.get($system, on-surface-variant),
-    button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    button-text-label-text-color: map.get($system, on-surface),
-    button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    button-text-ripple-color: m3-utils.color-with-opacity(
-        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
-    button-text-state-layer-color: map.get($system, on-surface),
-    button-tonal-container-color: map.get($system, surface),
-    button-tonal-disabled-container-color: $disabled-container,
-    button-tonal-disabled-label-text-color: $disabled,
-    button-tonal-disabled-state-layer-color: map.get($system, on-surface-variant),
-    button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    button-tonal-label-text-color: map.get($system, on-surface),
-    button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    button-tonal-ripple-color: m3-utils.color-with-opacity(
-        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
-    button-tonal-state-layer-color: map.get($system, on-surface),
+    base: (
+      button-filled-container-shape: 4px,
+      button-filled-horizontal-padding: 16px,
+      button-filled-icon-offset: -4px,
+      button-filled-icon-spacing: 8px,
+      button-outlined-container-shape: 4px,
+      button-outlined-horizontal-padding: 15px, // Normally it's 16px, but -1px for the outline.
+      button-outlined-icon-offset: -4px,
+      button-outlined-icon-spacing: 8px,
+      button-outlined-keep-touch-target: false,
+      button-outlined-outline-width: 1px,
+      button-protected-container-elevation-shadow: elevation.get-box-shadow(2),
+      button-protected-container-shape: 4px,
+      button-protected-disabled-container-elevation-shadow: elevation.get-box-shadow(0),
+      button-protected-focus-container-elevation-shadow: elevation.get-box-shadow(4),
+      button-protected-horizontal-padding: 16px,
+      button-protected-hover-container-elevation-shadow: elevation.get-box-shadow(4),
+      button-protected-icon-offset: -4px,
+      button-protected-icon-spacing: 8px,
+      button-protected-pressed-container-elevation-shadow: elevation.get-box-shadow(8),
+      button-text-container-shape: 4px,
+      button-text-horizontal-padding: 8px,
+      button-text-icon-offset: 0,
+      button-text-icon-spacing: 8px,
+      button-text-with-icon-horizontal-padding: 8px,
+      button-tonal-container-shape: 4px,
+      button-tonal-horizontal-padding: 16px,
+      button-tonal-icon-offset: -4px,
+      button-tonal-icon-spacing: 8px,
+    ),
+    color: (
+      button-filled-container-color: map.get($system, surface),
+      button-filled-disabled-container-color: $disabled-container,
+      button-filled-disabled-label-text-color: $disabled,
+      button-filled-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-filled-label-text-color: map.get($system, on-surface),
+      button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      button-filled-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      button-filled-state-layer-color: map.get($system, on-surface),
+      button-outlined-disabled-label-text-color: $disabled,
+      button-outlined-disabled-outline-color: map.get($system, outline),
+      button-outlined-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-outlined-label-text-color: map.get($system, on-surface),
+      button-outlined-outline-color: map.get($system, outline),
+      button-outlined-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      button-outlined-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      button-outlined-state-layer-color: map.get($system, on-surface),
+      button-protected-container-color: map.get($system, surface),
+      button-protected-disabled-container-color: $disabled-container,
+      button-protected-disabled-label-text-color: $disabled,
+      button-protected-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-protected-label-text-color: map.get($system, on-surface),
+      button-protected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      button-protected-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      button-protected-state-layer-color: map.get($system, on-surface),
+      button-text-disabled-label-text-color: $disabled,
+      button-text-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-text-label-text-color: map.get($system, on-surface),
+      button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      button-text-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      button-text-state-layer-color: map.get($system, on-surface),
+      button-tonal-container-color: map.get($system, surface),
+      button-tonal-disabled-container-color: $disabled-container,
+      button-tonal-disabled-label-text-color: $disabled,
+      button-tonal-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-tonal-label-text-color: map.get($system, on-surface),
+      button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      button-tonal-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      button-tonal-state-layer-color: map.get($system, on-surface),
+    ),
+    typography: (
+      button-filled-label-text-font: map.get($system, label-small-font),
+      button-filled-label-text-size: map.get($system, label-small-size),
+      button-filled-label-text-tracking: map.get($system, label-small-tracking),
+      button-filled-label-text-transform: none,
+      button-filled-label-text-weight: map.get($system, label-small-weight),
+      button-outlined-label-text-font: map.get($system, label-small-font),
+      button-outlined-label-text-size: map.get($system, label-small-size),
+      button-outlined-label-text-tracking: map.get($system, label-small-tracking),
+      button-outlined-label-text-transform: none,
+      button-outlined-label-text-weight: map.get($system, label-small-weight),
+      button-protected-label-text-font: map.get($system, label-small-font),
+      button-protected-label-text-size: map.get($system, label-small-size),
+      button-protected-label-text-tracking: map.get($system, label-small-tracking),
+      button-protected-label-text-transform: none,
+      button-protected-label-text-weight: map.get($system, label-small-weight),
+      button-text-label-text-font: map.get($system, label-small-font),
+      button-text-label-text-size: map.get($system, label-small-size),
+      button-text-label-text-tracking: map.get($system, label-small-tracking),
+      button-text-label-text-transform: none,
+      button-text-label-text-weight: map.get($system, label-small-weight),
+      button-tonal-label-text-font: map.get($system, label-small-font),
+      button-tonal-label-text-size: map.get($system, label-small-size),
+      button-tonal-label-text-tracking: map.get($system, label-small-tracking),
+      button-tonal-label-text-transform: none,
+      button-tonal-label-text-weight: map.get($system, label-small-weight),
+    ),
+    density: (
+      button-filled-container-height: $height,
+      button-filled-touch-target-display: $touch-target-display,
+      button-outlined-container-height: $height,
+      button-outlined-touch-target-display: $touch-target-display,
+      button-protected-container-height: $height,
+      button-protected-touch-target-display: $touch-target-display,
+      button-text-container-height: $height,
+      button-text-touch-target-display: $touch-target-display,
+      button-tonal-container-height: $height,
+      button-tonal-touch-target-display: $touch-target-display,
+    ),
   );
 }
 
@@ -120,7 +162,7 @@
         map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
     button-filled-state-layer-color: map.get($system, on-primary),
     button-outlined-label-text-color: map.get($system, primary),
-    button-outlined-outline-color: map.get(get-color-tokens($theme), button-outlined-outline-color),
+    button-outlined-outline-color: map.get($system, outline),
     button-outlined-ripple-color: m3-utils.color-with-opacity(
         map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
     button-outlined-state-layer-color: map.get($system, primary),
@@ -140,68 +182,3 @@
     button-tonal-state-layer-color: map.get($system, on-primary),
   );
 }
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  $font-family: inspection.get-theme-typography($theme, button, font-family);
-  $font-size: inspection.get-theme-typography($theme, button, font-size);
-  $font-weight: inspection.get-theme-typography($theme, button, font-weight);
-  $letter-spacing: inspection.get-theme-typography($theme, button, letter-spacing);
-  $text-transform: none;
-
-  @return (
-    button-filled-label-text-font: $font-family,
-    button-filled-label-text-size: $font-size,
-    button-filled-label-text-tracking: $letter-spacing,
-    button-filled-label-text-transform: none,
-    button-filled-label-text-weight: $font-weight,
-    button-outlined-label-text-font: $font-family,
-    button-outlined-label-text-size: $font-size,
-    button-outlined-label-text-tracking: $letter-spacing,
-    button-outlined-label-text-transform: none,
-    button-outlined-label-text-weight: $font-weight,
-    button-protected-label-text-font: $font-family,
-    button-protected-label-text-size: $font-size,
-    button-protected-label-text-tracking: $letter-spacing,
-    button-protected-label-text-transform: none,
-    button-protected-label-text-weight: $font-weight,
-    button-text-label-text-font: $font-family,
-    button-text-label-text-size: $font-size,
-    button-text-label-text-tracking: $letter-spacing,
-    button-text-label-text-transform: none,
-    button-text-label-text-weight: $font-weight,
-    button-tonal-label-text-font: $font-family,
-    button-tonal-label-text-size: $font-size,
-    button-tonal-label-text-tracking: $letter-spacing,
-    button-tonal-label-text-transform: none,
-    button-tonal-label-text-weight: $font-weight,
-  );
-}
-
-// 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);
-  $sizes: (
-    0: 36px,
-    -1: 32px,
-    -2: 28px,
-    -3: 24px,
-  );
-
-  $height: map.get($sizes, $scale);
-  $touch-target-display: if($scale < -1, none, block);
-
-  @return (
-    button-filled-container-height: $height,
-    button-filled-touch-target-display: $touch-target-display,
-    button-outlined-container-height: $height,
-    button-outlined-touch-target-display: $touch-target-display,
-    button-protected-container-height: $height,
-    button-protected-touch-target-display: $touch-target-display,
-    button-text-container-height: $height,
-    button-text-touch-target-display: $touch-target-display,
-    button-tonal-container-height: $height,
-    button-tonal-touch-target-display: $touch-target-display,
-  );
-}

package/button/_m2-fab.scss

@@ -1,63 +1,75 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
 
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
-  @return (
-    fab-container-elevation-shadow: elevation.get-box-shadow(6),
-    fab-container-shape: 50%,
-    fab-extended-container-elevation-shadow: elevation.get-box-shadow(6),
-    fab-extended-container-height: 48px,
-    fab-extended-container-shape: 24px,
-    fab-extended-focus-container-elevation-shadow: elevation.get-box-shadow(8),
-    fab-extended-hover-container-elevation-shadow: elevation.get-box-shadow(8),
-    fab-extended-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
-    fab-focus-container-elevation-shadow: elevation.get-box-shadow(8),
-    fab-hover-container-elevation-shadow: elevation.get-box-shadow(8),
-    fab-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
-    fab-small-container-elevation-shadow: elevation.get-box-shadow(6),
-    fab-small-container-shape: 50%,
-    fab-small-focus-container-elevation-shadow: elevation.get-box-shadow(8),
-    fab-small-hover-container-elevation-shadow: elevation.get-box-shadow(8),
-    fab-small-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
+@function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
-  $is-dark: inspection.get-theme-type($theme) == dark;
+  // TODO: Use system colors instead of checking theme type
+  $is-dark: false;
+  @if (meta.type-of($theme) == map and map.get($theme, color)) {
+    $is-dark: inspection.get-theme-type($theme) == dark;
+  }
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
   $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
 
   @return (
-    fab-container-color: map.get($system, surface),
-    fab-disabled-state-container-color: $disabled-container,
-    fab-disabled-state-foreground-color: $disabled,
-    fab-disabled-state-layer-color: map.get($system, on-surface-variant),
-    fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    fab-foreground-color: map.get($system, on-surface),
-    fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    fab-ripple-color: m3-utils.color-with-opacity(
-        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
-    fab-small-container-color: map.get($system, surface),
-    fab-small-disabled-state-container-color: $disabled-container,
-    fab-small-disabled-state-foreground-color: $disabled,
-    fab-small-disabled-state-layer-color: map.get($system, on-surface-variant),
-    fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    fab-small-foreground-color: map.get($system, on-surface),
-    fab-small-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    fab-small-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    fab-small-ripple-color: m3-utils.color-with-opacity(
-        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
-    fab-small-state-layer-color: map.get($system, on-surface),
-    fab-state-layer-color: map.get($system, on-surface),
+    base: (
+      fab-container-elevation-shadow: elevation.get-box-shadow(6),
+      fab-container-shape: 50%,
+      fab-extended-container-elevation-shadow: elevation.get-box-shadow(6),
+      fab-extended-container-height: 48px,
+      fab-extended-container-shape: 24px,
+      fab-extended-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-extended-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-extended-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
+      fab-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
+      fab-small-container-elevation-shadow: elevation.get-box-shadow(6),
+      fab-small-container-shape: 50%,
+      fab-small-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-small-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-small-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
+    ),
+    color: (
+      fab-container-color: map.get($system, surface),
+      fab-disabled-state-container-color: $disabled-container,
+      fab-disabled-state-foreground-color: $disabled,
+      fab-disabled-state-layer-color: map.get($system, on-surface-variant),
+      fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      fab-foreground-color: map.get($system, on-surface),
+      fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      fab-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      fab-small-container-color: map.get($system, surface),
+      fab-small-disabled-state-container-color: $disabled-container,
+      fab-small-disabled-state-foreground-color: $disabled,
+      fab-small-disabled-state-layer-color: map.get($system, on-surface-variant),
+      fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      fab-small-foreground-color: map.get($system, on-surface),
+      fab-small-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      fab-small-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      fab-small-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      fab-small-state-layer-color: map.get($system, on-surface),
+      fab-state-layer-color: map.get($system, on-surface),
+    ),
+    typography: (
+      fab-extended-label-text-font: map.get($system, label-small-font),
+      fab-extended-label-text-size: map.get($system, label-small-size),
+      fab-extended-label-text-tracking: map.get($system, label-small-tracking),
+      fab-extended-label-text-weight: map.get($system, label-small-weight)
+    ),
+    density: (
+      fab-small-touch-target-display: if($density-scale < -1, none, block),
+      fab-touch-target-display: if($density-scale < -1, none, block),
+    ),
   );
 }
 
@@ -79,24 +91,3 @@
     fab-state-layer-color: map.get($system, on-primary),
   );
 }
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    fab-extended-label-text-font: inspection.get-theme-typography($theme, button, font-family),
-    fab-extended-label-text-size: inspection.get-theme-typography($theme, button, font-size),
-    fab-extended-label-text-tracking:
-        inspection.get-theme-typography($theme, button, letter-spacing),
-    fab-extended-label-text-weight: inspection.get-theme-typography($theme, button, font-weight)
-  );
-}
-
-// 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);
-
-  @return (
-    fab-small-touch-target-display: if($density-scale < -1, none, block),
-    fab-touch-target-display: if($density-scale < -1, none, block),
-  );
-}

package/button/_m2-icon-button.scss

@@ -1,33 +1,41 @@
 @use 'sass:map';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
 
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
-  @return (
-    icon-button-icon-size: 24px,
-    icon-button-container-shape: 50%,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
+@function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
-  $is-dark: inspection.get-theme-type($theme) == dark;
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
 
   @return (
-    icon-button-disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
-    icon-button-disabled-state-layer-color: map.get($system, on-surface-variant),
-    icon-button-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    icon-button-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    icon-button-icon-color: inherit,
-    icon-button-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    icon-button-ripple-color: m3-utils.color-with-opacity(
-        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
-    icon-button-state-layer-color: map.get($system, on-surface),
+    base: (
+      icon-button-icon-size: 24px,
+      icon-button-container-shape: 50%,
+    ),
+    color: (
+      icon-button-disabled-icon-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      icon-button-disabled-state-layer-color: map.get($system, on-surface-variant),
+      icon-button-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      icon-button-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      icon-button-icon-color: inherit,
+      icon-button-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      icon-button-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      icon-button-state-layer-color: map.get($system, on-surface),
+    ),
+    typography: (),
+    density: (
+      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,
+      ), $density-scale)
+    ),
   );
 }
 
@@ -43,31 +51,3 @@
         map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
   );
 }
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// 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);
-
-  $tokens: (
-    icon-button-touch-target-display: if($scale < -1, none, block),
-    icon-button-state-layer-size: map.get((
-      0: 48px,
-      -1: 44px,
-      -2: 40px,
-      -3: 36px,
-      -4: 32px,
-      -5: 28px,
-    ), $scale)
-  );
-
-  @each $token in $exclude {
-    $tokens: map.remove($tokens, $token);
-  }
-
-  @return $tokens;
-}

package/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)),
   );
 }
 

package/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;

package/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;

package/button/testing/index.d.ts

@@ -18,6 +18,7 @@ interface ButtonHarnessFilters extends BaseHarnessFilters {
 
 /** Harness for interacting with a mat-button in tests. */
 declare class MatButtonHarness extends ContentContainerComponentHarness {
+    /** Selector for the harness. */
     static hostSelector: string;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a button with specific attributes.