feat(material-experimental/theming): add M3 paginator support (#28164)

(cherry picked from commit 2cb7ada)

src/dev-app/theme-m3.scss

@@ -48,6 +48,7 @@ html {
   @include mat.menu-theme($light-theme);
   @include mat.optgroup-theme($light-theme);
   @include mat.option-theme($light-theme);
+  @include mat.paginator-theme($light-theme);
   @include mat.progress-bar-theme($light-theme);
   @include mat.progress-spinner-theme($light-theme);
   @include mat.radio-theme($light-theme);
@@ -84,6 +85,7 @@ html {
   @include mat.menu-color($dark-theme);
   @include mat.optgroup-color($dark-theme);
   @include mat.option-color($dark-theme);
+  @include mat.paginator-color($dark-theme);
   @include mat.progress-bar-color($dark-theme);
   @include mat.progress-spinner-color($dark-theme);
   @include mat.radio-color($dark-theme);
@@ -119,6 +121,7 @@ html {
     @include mat.menu-density($scale-theme);
     @include mat.optgroup-density($scale-theme);
     @include mat.option-density($scale-theme);
+    @include mat.paginator-density($scale-theme);
     @include mat.progress-bar-density($scale-theme);
     @include mat.progress-spinner-density($scale-theme);
     @include mat.radio-density($scale-theme);

src/material-experimental/theming/_custom-tokens.scss

@@ -156,6 +156,24 @@
   );
 }
 
+/// Generates custom tokens for the mat-paginator.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-paginator
+@function paginator($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, container-text, body-small),
+    (
+      container-text-color: map.get($systems, md-sys-color, on-surface),
+      container-background-color: map.get($systems, md-sys-color, surface),
+      enabled-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-icon-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      select-trigger-text-size: map.get($systems, md-sys-typescale, body-small-size),
+    )
+  );
+}
+
 /// Generates custom tokens for the mat-radio.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

src/material-experimental/theming/_m3-density.scss

@@ -52,6 +52,9 @@ $_density-tokens: (
   (mat, menu): (),
   (mat, optgroup): (),
   (mat, option): (),
+  (mat, paginator): (
+    container-size: (56px, 52px, 48px, 40px),
+  ),
   (mat, radio): (),
   (mat, ripple): (),
   (mat, select): (),

src/material-experimental/theming/_m3-tokens.scss

@@ -295,6 +295,11 @@
       custom-tokens.option($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, paginator),
+      custom-tokens.paginator($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, radio),
       custom-tokens.radio($systems, $exclude-hardcoded),

src/material/core/tokens/m2/_index.scss

@@ -9,6 +9,7 @@
 @use './mat/menu' as tokens-mat-menu;
 @use './mat/option' as tokens-mat-option;
 @use './mat/optgroup' as tokens-mat-optgroup;
+@use './mat/paginator' as tokens-mat-paginator;
 @use './mat/radio' as tokens-mat-radio;
 @use './mat/ripple' as tokens-mat-ripple;
 @use './mat/select' as tokens-mat-select;
@@ -92,6 +93,7 @@
       _get-tokens-for-module($theme, tokens-mat-menu),
       _get-tokens-for-module($theme, tokens-mat-optgroup),
       _get-tokens-for-module($theme, tokens-mat-option),
+      _get-tokens-for-module($theme, tokens-mat-paginator),
       _get-tokens-for-module($theme, tokens-mat-radio),
       _get-tokens-for-module($theme, tokens-mat-ripple),
       _get-tokens-for-module($theme, tokens-mat-select),

src/material/paginator/_paginator-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use 'sass:meta';
 @use '../core/tokens/m2/mat/paginator' as tokens-mat-paginator;
 @use '../core/style/sass-utils';
@@ -7,55 +8,87 @@
 @use '../core/tokens/token-utils';
 @use '../form-field/form-field-density';
 
-@mixin base($theme) {}
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {}
+}
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
-      tokens-mat-paginator.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
+        tokens-mat-paginator.get-color-tokens($theme));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
-      tokens-mat-paginator.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
+        tokens-mat-paginator.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {
-  $density-scale: inspection.get-theme-density($theme);
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
-      tokens-mat-paginator.get-density-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
+  @else {
+    $density-scale: inspection.get-theme-density($theme);
 
-  // TODO: this should be done through tokens once the form field has been switched over.
-  .mat-mdc-paginator {
-    // We need the form field to be narrower in order to fit into the paginator,
-    // so we set its density to be -4 or denser.
-    @if ((meta.type-of($density-scale) == 'number' and $density-scale >= -4) or
-         $density-scale == maximum) {
-      @include form-field-density.private-form-field-density(-4);
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
+        tokens-mat-paginator.get-density-tokens($theme));
     }
-    @else {
-      @include form-field-density.private-form-field-density($density-scale);
+
+    // TODO: this should be done through tokens once the form field has been switched over.
+    .mat-mdc-paginator {
+      // We need the form field to be narrower in order to fit into the paginator,
+      // so we set its density to be -4 or denser.
+      @if ((meta.type-of($density-scale) == 'number' and $density-scale >= -4) or
+         $density-scale == maximum) {
+        @include form-field-density.private-form-field-density(-4);
+      }
+      @else {
+        @include form-field-density.private-form-field-density($density-scale);
+      }
     }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-paginator') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-paginator.$prefix, map.get($tokens, tokens-mat-paginator.$prefix));
+  }
+}