diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index 38d18f1b489a..5f031af7bdea 100644 --- a/src/dev-app/theme-m3.scss +++ b/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); diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 247552c5c37c..2fdf3c57a9d8 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/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 diff --git a/src/material-experimental/theming/_m3-density.scss b/src/material-experimental/theming/_m3-density.scss index 00ce0a30a567..9225ee21628f 100644 --- a/src/material-experimental/theming/_m3-density.scss +++ b/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): (), diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index 06ef1aed060e..00be5b499ebc 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/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), diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss index bab478ea17ee..c04c83ab212a 100644 --- a/src/material/core/tokens/m2/_index.scss +++ b/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), diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss index 405ab5c86032..367f95d1a926 100644 --- a/src/material/paginator/_paginator-theme.scss +++ b/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)); + } +}