@angular/material 20.1.0-next.2 → 20.1.0

package/icon/_m2-icon.scss

@@ -1,24 +1,10 @@
-
-// 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 ();
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  // Default the icon to `inherit` so it matches the text around it.
-  @return private-get-icon-color-tokens(inherit);
-}
-
-// 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) {
-  @return ();
+@function get-tokens($theme) {
+  @return (
+    base: (),
+    color: private-get-icon-color-tokens(inherit),
+    typography: (),
+    density: (),
+  );
 }
 
 // Mixin used to set a specific color on an icon.

package/list/_list-theme.scss

@@ -8,9 +8,10 @@
 @use './m2-list';
 @use './m3-list';
 @use '../core/tokens/m2-utils';
+@use '../core/theming/theming';
 
 @mixin base($theme) {
-  $tokens: m2-list.get-unthemable-tokens();
+  $tokens: map.get(m2-list.get-tokens($theme), base);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-list.get-tokens($theme), base);
   }
@@ -19,7 +20,7 @@
 }
 
 @mixin color($theme) {
-  $tokens: m2-list.get-color-tokens($theme);
+  $tokens: map.get(m2-list.get-tokens($theme), color);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-list.get-tokens($theme), color);
   }
@@ -29,14 +30,14 @@
   @if inspection.get-theme-version($theme) != 1 {
     .mdc-list-item__start,
     .mdc-list-item__end {
-      $tokens: m2-radio.get-color-tokens($theme, primary);
+      $tokens: m2-radio.private-get-color-palette-color-tokens($theme, primary);
       @include token-utils.values($tokens);
     }
 
     .mat-accent {
       .mdc-list-item__start,
       .mdc-list-item__end {
-        $tokens: m2-radio.get-color-tokens($theme, secondary);
+        $tokens: m2-radio.private-get-color-palette-color-tokens($theme, secondary);
         @include token-utils.values($tokens);
       }
     }
@@ -44,23 +45,23 @@
     .mat-warn {
       .mdc-list-item__start,
       .mdc-list-item__end {
-        $tokens: m2-radio.get-color-tokens($theme, error);
+        $tokens: m2-radio.private-get-color-palette-color-tokens($theme, error);
         @include token-utils.values($tokens);
       }
     }
 
     .mat-mdc-list-option {
-      $tokens: m2-checkbox.get-color-tokens($theme, primary);
+      $tokens: m2-checkbox.private-get-color-palette-color-tokens($theme, primary);
       @include token-utils.values($tokens);
     }
 
     .mat-mdc-list-option.mat-accent {
-      $tokens: m2-checkbox.get-color-tokens($theme, secondary);
+      $tokens: m2-checkbox.private-get-color-palette-color-tokens($theme, secondary);
       @include token-utils.values($tokens);
     }
 
     .mat-mdc-list-option.mat-warn {
-      $tokens: m2-checkbox.get-color-tokens($theme, error);
+      $tokens: m2-checkbox.private-get-color-palette-color-tokens($theme, error);
       @include token-utils.values($tokens);
     }
 
@@ -90,7 +91,7 @@
 }
 
 @mixin density($theme) {
-  $tokens: m2-list.get-density-tokens($theme);
+  $tokens: map.get(m2-list.get-tokens($theme), density);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-list.get-tokens($theme), density);
   }
@@ -98,11 +99,12 @@
   @include token-utils.values($tokens);
 
   @if inspection.get-theme-version($theme) != 1 {
-    $density-scale: inspection.get-theme-density($theme);
+    $system: m2-utils.get-system($theme);
+    $density-scale: theming.clamp-density(map.get($system, density-scale), -5);
 
     .mdc-list-item__start,
     .mdc-list-item__end {
-      $tokens: m2-radio.get-density-tokens($theme);
+      $tokens: map.get(m2-radio.get-tokens($theme), density);
       @include token-utils.values($tokens);
     }
 
@@ -146,7 +148,7 @@
 }
 
 @mixin typography($theme) {
-  $tokens: m2-list.get-typography-tokens($theme);
+  $tokens: map.get(m2-list.get-tokens($theme), typography);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-list.get-tokens($theme), typography);
   }

package/list/_m2-list.scss

@@ -1,106 +1,92 @@
-@use '../core/theming/inspection';
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
+@use '../core/theming/theming';
 
-// 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 (
-    list-active-indicator-color: transparent,
-    list-active-indicator-shape: 4px,
-    list-list-item-container-shape: 0,
-    list-list-item-leading-avatar-shape: 50%,
-    list-list-item-container-color: transparent,
-    list-list-item-selected-container-color: transparent,
-    list-list-item-leading-avatar-color: transparent,
-    list-list-item-leading-icon-size: 24px,
-    list-list-item-leading-avatar-size: 40px,
-    list-list-item-trailing-icon-size: 24px,
-    list-list-item-disabled-state-layer-color: transparent,
-    list-list-item-disabled-state-layer-opacity: 0,
-    list-list-item-disabled-label-text-opacity: 0.38,
-    list-list-item-disabled-leading-icon-opacity: 0.38,
-    list-list-item-disabled-trailing-icon-opacity: 0.38,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $system: m2-utils.get-system($theme);
-
-  @return (
-    list-list-item-label-text-color: map.get($system, on-surface),
-    list-list-item-supporting-text-color: map.get($system, on-surface-variant),
-    list-list-item-leading-icon-color: map.get($system, on-surface-variant),
-    list-list-item-trailing-supporting-text-color: map.get($system, on-surface-variant),
-    list-list-item-trailing-icon-color: map.get($system, on-surface-variant),
-    list-list-item-selected-trailing-icon-color: map.get($system, on-surface-variant),
-    list-list-item-disabled-label-text-color: map.get($system, on-surface),
-    list-list-item-disabled-leading-icon-color: map.get($system, on-surface),
-    list-list-item-disabled-trailing-icon-color: map.get($system, on-surface),
-    list-list-item-hover-label-text-color: map.get($system, on-surface),
-    list-list-item-hover-leading-icon-color: map.get($system, on-surface-variant),
-    list-list-item-hover-state-layer-color: map.get($system, on-surface),
-    list-list-item-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    list-list-item-hover-trailing-icon-color: map.get($system, on-surface-variant),
-    list-list-item-focus-label-text-color: map.get($system, on-surface),
-    list-list-item-focus-state-layer-color: map.get($system, on-surface),
-    list-list-item-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
+@function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
-  @return (
-    list-list-item-label-text-font: map.get($system, body-large-font),
-    list-list-item-label-text-line-height: map.get($system, body-large-line-height),
-    list-list-item-label-text-size: map.get($system, body-large-size),
-    list-list-item-label-text-tracking: map.get($system, body-large-tracking),
-    list-list-item-label-text-weight: map.get($system, body-large-weight),
-    list-list-item-supporting-text-font: map.get($system, body-medium-font),
-    list-list-item-supporting-text-line-height: map.get($system, body-medium-line-height),
-    list-list-item-supporting-text-size: map.get($system, body-medium-size),
-    list-list-item-supporting-text-tracking: map.get($system, body-medium-tracking),
-    list-list-item-supporting-text-weight: map.get($system, body-medium-weight),
-    list-list-item-trailing-supporting-text-font: map.get($system, body-small-font),
-    list-list-item-trailing-supporting-text-line-height: map.get($system, body-small-line-height),
-    list-list-item-trailing-supporting-text-size: map.get($system, body-small-size),
-    list-list-item-trailing-supporting-text-tracking: map.get($system, body-small-tracking),
-    list-list-item-trailing-supporting-text-weight: map.get($system, body-small-weight),
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $scale: inspection.get-theme-density($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -5);
 
   @return (
-    list-list-item-leading-icon-start-space: 16px,
-    list-list-item-leading-icon-end-space: 32px,
-    list-list-item-one-line-container-height: map.get((
-      0: 48px,
-      -1: 44px,
-      -2: 40px,
-      -3: 36px,
-      -4: 32px,
-      -5: 24px,
-    ), $scale),
-    list-list-item-two-line-container-height: map.get((
-      0: 64px,
-      -1: 60px,
-      -2: 56px,
-      -3: 52px,
-      -4: 48px,
-      -5: 48px,
-    ), $scale),
-    list-list-item-three-line-container-height: map.get((
-      0: 88px,
-      -1: 84px,
-      -2: 80px,
-      -3: 76px,
-      -4: 72px,
-      -5: 56px,
-    ), $scale),
+    base: (
+      list-active-indicator-color: transparent,
+      list-active-indicator-shape: 4px,
+      list-list-item-container-shape: 0,
+      list-list-item-leading-avatar-shape: 50%,
+      list-list-item-container-color: transparent,
+      list-list-item-selected-container-color: transparent,
+      list-list-item-leading-avatar-color: transparent,
+      list-list-item-leading-icon-size: 24px,
+      list-list-item-leading-avatar-size: 40px,
+      list-list-item-trailing-icon-size: 24px,
+      list-list-item-disabled-state-layer-color: transparent,
+      list-list-item-disabled-state-layer-opacity: 0,
+      list-list-item-disabled-label-text-opacity: 0.38,
+      list-list-item-disabled-leading-icon-opacity: 0.38,
+      list-list-item-disabled-trailing-icon-opacity: 0.38,
+    ),
+    color: (
+      list-list-item-label-text-color: map.get($system, on-surface),
+      list-list-item-supporting-text-color: map.get($system, on-surface-variant),
+      list-list-item-leading-icon-color: map.get($system, on-surface-variant),
+      list-list-item-trailing-supporting-text-color: map.get($system, on-surface-variant),
+      list-list-item-trailing-icon-color: map.get($system, on-surface-variant),
+      list-list-item-selected-trailing-icon-color: map.get($system, on-surface-variant),
+      list-list-item-disabled-label-text-color: map.get($system, on-surface),
+      list-list-item-disabled-leading-icon-color: map.get($system, on-surface),
+      list-list-item-disabled-trailing-icon-color: map.get($system, on-surface),
+      list-list-item-hover-label-text-color: map.get($system, on-surface),
+      list-list-item-hover-leading-icon-color: map.get($system, on-surface-variant),
+      list-list-item-hover-state-layer-color: map.get($system, on-surface),
+      list-list-item-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      list-list-item-hover-trailing-icon-color: map.get($system, on-surface-variant),
+      list-list-item-focus-label-text-color: map.get($system, on-surface),
+      list-list-item-focus-state-layer-color: map.get($system, on-surface),
+      list-list-item-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    ),
+    typography: (
+      list-list-item-label-text-font: map.get($system, body-large-font),
+      list-list-item-label-text-line-height: map.get($system, body-large-line-height),
+      list-list-item-label-text-size: map.get($system, body-large-size),
+      list-list-item-label-text-tracking: map.get($system, body-large-tracking),
+      list-list-item-label-text-weight: map.get($system, body-large-weight),
+      list-list-item-supporting-text-font: map.get($system, body-medium-font),
+      list-list-item-supporting-text-line-height: map.get($system, body-medium-line-height),
+      list-list-item-supporting-text-size: map.get($system, body-medium-size),
+      list-list-item-supporting-text-tracking: map.get($system, body-medium-tracking),
+      list-list-item-supporting-text-weight: map.get($system, body-medium-weight),
+      list-list-item-trailing-supporting-text-font: map.get($system, body-small-font),
+      list-list-item-trailing-supporting-text-line-height: map.get($system, body-small-line-height),
+      list-list-item-trailing-supporting-text-size: map.get($system, body-small-size),
+      list-list-item-trailing-supporting-text-tracking: map.get($system, body-small-tracking),
+      list-list-item-trailing-supporting-text-weight: map.get($system, body-small-weight),
+    ),
+    density: (
+      list-list-item-leading-icon-start-space: 16px,
+      list-list-item-leading-icon-end-space: 32px,
+      list-list-item-one-line-container-height: map.get((
+        0: 48px,
+        -1: 44px,
+        -2: 40px,
+        -3: 36px,
+        -4: 32px,
+        -5: 24px,
+      ), $density-scale),
+      list-list-item-two-line-container-height: map.get((
+        0: 64px,
+        -1: 60px,
+        -2: 56px,
+        -3: 52px,
+        -4: 48px,
+        -5: 48px,
+      ), $density-scale),
+      list-list-item-three-line-container-height: map.get((
+        0: 88px,
+        -1: 84px,
+        -2: 80px,
+        -3: 76px,
+        -4: 72px,
+        -5: 56px,
+      ), $density-scale),
+    ),
   );
 }

package/list/_m3-list.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-list.
@@ -72,7 +71,7 @@
       list-list-item-trailing-supporting-text-tracking: map.get($system, label-small-tracking),
       list-list-item-trailing-supporting-text-weight: map.get($system, label-small-weight),
     ),
-    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
+    density: get-density-tokens(map.get($system, density-scale)),
   );
 }
 

package/menu/_m2-menu.scss

@@ -3,55 +3,42 @@
 @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 (
-    menu-container-shape: 4px,
-    menu-divider-bottom-spacing: 0,
-    menu-divider-top-spacing: 0,
-    menu-item-spacing: 16px,
-    menu-item-icon-size: 24px,
-    menu-item-leading-spacing: 16px,
-    menu-item-trailing-spacing: 16px,
-    menu-item-with-icon-leading-spacing: 16px,
-    menu-item-with-icon-trailing-spacing: 16px,
-    menu-container-elevation-shadow: elevation.get-box-shadow(8),
-
-    // Unused
-    menu-base-elevation-level: null,
-  );
-}
-
-// 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);
 
   @return (
-    menu-item-label-text-color: map.get($system, on-surface),
-    menu-item-icon-color: map.get($system, on-surface),
-    menu-item-hover-state-layer-color: m3-utils.color-with-opacity(
-        map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
-    menu-item-focus-state-layer-color: m3-utils.color-with-opacity(
-        map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
-    menu-container-color: map.get($system, surface),
-    menu-divider-color: map.get($system, outline),
-  );
-}
+    base: (
+      menu-container-shape: 4px,
+      menu-divider-bottom-spacing: 0,
+      menu-divider-top-spacing: 0,
+      menu-item-spacing: 16px,
+      menu-item-icon-size: 24px,
+      menu-item-leading-spacing: 16px,
+      menu-item-trailing-spacing: 16px,
+      menu-item-with-icon-leading-spacing: 16px,
+      menu-item-with-icon-trailing-spacing: 16px,
+      menu-container-elevation-shadow: elevation.get-box-shadow(8),
 
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  $system: m2-utils.get-system($theme);
-  @return (
-    menu-item-label-text-font: map.get($system, body-large-font),
-    menu-item-label-text-size: map.get($system, body-large-size),
-    menu-item-label-text-tracking: map.get($system, body-large-tracking),
-    menu-item-label-text-line-height: map.get($system, body-large-line-height),
-    menu-item-label-text-weight: map.get($system, body-large-weight),
+      // Unused
+      menu-base-elevation-level: null,
+    ),
+    color: (
+      menu-item-label-text-color: map.get($system, on-surface),
+      menu-item-icon-color: map.get($system, on-surface),
+      menu-item-hover-state-layer-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+      menu-item-focus-state-layer-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
+      menu-container-color: map.get($system, surface),
+      menu-divider-color: map.get($system, outline),
+    ),
+    typography: (
+      menu-item-label-text-font: map.get($system, body-large-font),
+      menu-item-label-text-size: map.get($system, body-large-size),
+      menu-item-label-text-tracking: map.get($system, body-large-tracking),
+      menu-item-label-text-line-height: map.get($system, body-large-line-height),
+      menu-item-label-text-weight: map.get($system, body-large-weight),
+    ),
+    density: (),
   );
 }
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  @return ();
-}

package/menu/_menu-theme.scss

@@ -6,7 +6,7 @@
 @use '../core/typography/typography';
 
 @mixin base($theme) {
-  $tokens: m2-menu.get-unthemable-tokens();
+  $tokens: map.get(m2-menu.get-tokens($theme), base);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-menu.get-tokens($theme), base);
   }
@@ -15,7 +15,7 @@
 }
 
 @mixin color($theme) {
-  $tokens: m2-menu.get-color-tokens($theme);
+  $tokens: map.get(m2-menu.get-tokens($theme), color);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-menu.get-tokens($theme), color);
   }
@@ -24,7 +24,7 @@
 }
 
 @mixin typography($theme) {
-  $tokens: m2-menu.get-typography-tokens($theme);
+  $tokens: map.get(m2-menu.get-tokens($theme), typography);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-menu.get-tokens($theme), typography);
   }
@@ -33,7 +33,7 @@
 }
 
 @mixin density($theme) {
-  $tokens: m2-menu.get-density-tokens($theme);
+  $tokens: map.get(m2-menu.get-tokens($theme), density);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-menu.get-tokens($theme), density);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material",
-  "version": "20.1.0-next.2",
+  "version": "20.1.0",
   "description": "Angular Material",
   "repository": {
     "type": "git",
@@ -353,11 +353,11 @@
     }
   },
   "peerDependencies": {
-    "@angular/cdk": "20.1.0-next.2",
-    "@angular/core": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
-    "@angular/common": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
-    "@angular/forms": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
-    "@angular/platform-browser": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
+    "@angular/cdk": "20.1.0",
+    "@angular/core": "^20.0.0 || ^21.0.0",
+    "@angular/common": "^20.0.0 || ^21.0.0",
+    "@angular/forms": "^20.0.0 || ^21.0.0",
+    "@angular/platform-browser": "^20.0.0 || ^21.0.0",
     "rxjs": "^6.5.3 || ^7.4.0"
   },
   "dependencies": {

package/paginator/_m2-paginator.scss

@@ -1,75 +1,56 @@
 @use 'sass:math';
 @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 ();
-}
-
-// 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);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -5);
 
-  @return (
-    paginator-container-text-color: map.get($system, on-surface),
-    paginator-container-background-color: map.get($system, surface),
-    paginator-enabled-icon-color: map.get($system, on-surface-variant),
-    paginator-disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  $system: m2-utils.get-system($theme);
-  @return (
-    paginator-container-text-font: map.get($system, body-small-font),
-    paginator-container-text-line-height: map.get($system, body-small-line-height),
-    paginator-container-text-size: map.get($system, body-small-size),
-    paginator-container-text-tracking: map.get($system, body-small-tracking),
-    paginator-container-text-weight: map.get($system, body-small-weight),
-    paginator-select-trigger-text-size: map.get($system, body-small-size),
-  );
-}
-
-// 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);
-  $size-scale: (
-    0: 56px,
-    -1: 52px,
-    -2: 48px,
-    -3: 40px,
-    -4: 40px,
-    -5: 40px,
-  );
-  $form-field-size-scale: (
+  $form-field-height: map.get((
     0: 56px,
     -1: 52px,
     -2: 48px,
     -3: 44px,
     -4: 40px,
     -5: 36px,
-  );
-  $form-field-density-scale: if($density-scale > -4, -4, $density-scale);
-  $form-field-height: map.get($form-field-size-scale, $form-field-density-scale);
-
-  // We computed the desired height of the form-field using the density configuration. The
-  // spec only describes vertical spacing/alignment in non-dense mode. This means that we
-  // cannot update the spacing to explicit numbers based on the density scale. Instead, we
-  // determine the height reduction and equally subtract it from the default `top` and `bottom`
-  // padding that is provided by the Material Design specification.
-  $form-field-vertical-deduction: math.div(56px - $form-field-height, 2);
-  $form-field-vertical-padding: 16px - $form-field-vertical-deduction;
+  ), if($density-scale > -4, -4, $density-scale));
 
   @return (
-    paginator-container-size: map.get($size-scale, $density-scale),
-    paginator-form-field-container-height: $form-field-height,
-    paginator-form-field-container-vertical-padding: $form-field-vertical-padding,
-    paginator-touch-target-display: if($density-scale < -2, none, block),
+    base: (),
+    color: (
+      paginator-container-text-color: map.get($system, on-surface),
+      paginator-container-background-color: map.get($system, surface),
+      paginator-enabled-icon-color: map.get($system, on-surface-variant),
+      paginator-disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    ),
+    typography: (
+      paginator-container-text-font: map.get($system, body-small-font),
+      paginator-container-text-line-height: map.get($system, body-small-line-height),
+      paginator-container-text-size: map.get($system, body-small-size),
+      paginator-container-text-tracking: map.get($system, body-small-tracking),
+      paginator-container-text-weight: map.get($system, body-small-weight),
+      paginator-select-trigger-text-size: map.get($system, body-small-size),
+    ),
+    density: (
+      paginator-container-size: map.get((
+        0: 56px,
+        -1: 52px,
+        -2: 48px,
+        -3: 40px,
+        -4: 40px,
+        -5: 40px,
+      ), $density-scale),
+      paginator-form-field-container-height: $form-field-height,
+      // We computed the desired height of the form-field using the density configuration. The
+      // spec only describes vertical spacing/alignment in non-dense mode. This means that we
+      // cannot update the spacing to explicit numbers based on the density scale. Instead, we
+      // determine the height reduction and equally subtract it from the default `top` and `bottom`
+      // padding that is provided by the Material Design specification.
+      paginator-form-field-container-vertical-padding:
+          16px - math.div(56px - $form-field-height, 2),
+      paginator-touch-target-display: if($density-scale < -2, none, block),
+    ),
   );
 }

package/paginator/_m3-paginator.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-paginator.
@@ -25,7 +24,7 @@
       paginator-container-text-weight: map.get($system, body-small-weight),
       paginator-select-trigger-text-size: map.get($system, body-small-size),
     ),
-    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
+    density: get-density-tokens(map.get($system, density-scale)),
   );
 }
 

package/paginator/_paginator-theme.scss

@@ -6,7 +6,7 @@
 @use '../core/tokens/token-utils';
 
 @mixin base($theme) {
-  $tokens: m2-paginator.get-unthemable-tokens();
+  $tokens: map.get(m2-paginator.get-tokens($theme), base);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-paginator.get-tokens($theme), base);
   }
@@ -15,7 +15,7 @@
 }
 
 @mixin color($theme) {
-  $tokens: m2-paginator.get-color-tokens($theme);
+  $tokens: map.get(m2-paginator.get-tokens($theme), color);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-paginator.get-tokens($theme), color);
   }
@@ -24,7 +24,7 @@
 }
 
 @mixin typography($theme) {
-  $tokens: m2-paginator.get-typography-tokens($theme);
+  $tokens: map.get(m2-paginator.get-tokens($theme), typography);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-paginator.get-tokens($theme), typography);
   }
@@ -33,7 +33,7 @@
 }
 
 @mixin density($theme) {
-  $tokens: m2-paginator.get-density-tokens($theme);
+  $tokens: map.get(m2-paginator.get-tokens($theme), density);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-paginator.get-tokens($theme), density);
   }