From 6d0d47e90244a8c2652b969d3e40517d35daa453 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 20 Jun 2023 18:40:59 +0200 Subject: [PATCH] refactor(material/paginator): switch to tokens API (#27325) Reworks the paginator use the new tokens theming API. --- .../core/tokens/m2/mat/_paginator.scss | 66 +++++++++++++++++ src/material/paginator/BUILD.bazel | 2 + src/material/paginator/_paginator-theme.scss | 71 ++++--------------- .../paginator/_paginator-variables.scss | 2 + src/material/paginator/paginator.scss | 33 +++++++++ 5 files changed, 118 insertions(+), 56 deletions(-) create mode 100644 src/material/core/tokens/m2/mat/_paginator.scss diff --git a/src/material/core/tokens/m2/mat/_paginator.scss b/src/material/core/tokens/m2/mat/_paginator.scss new file mode 100644 index 000000000000..e5a3344d396c --- /dev/null +++ b/src/material/core/tokens/m2/mat/_paginator.scss @@ -0,0 +1,66 @@ +@use 'sass:map'; +@use '../../token-utils'; +@use '../../../typography/typography-utils'; +@use '../../../theming/theming'; +@use '../../../style/sass-utils'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mat, paginator); + +// 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($config) { + $foreground: map.get($config, foreground); + $background: map.get($config, background); + + @return ( + container-text-color: theming.get-color-from-palette($foreground, base, 0.87), + container-background-color: theming.get-color-from-palette($background, card), + enabled-icon-color: theming.get-color-from-palette($foreground, base, 0.54), + disabled-icon-color: theming.get-color-from-palette($foreground, base, 0.12), + ); +} + +// Tokens that can be configured through Angular Material's typography theming API. +@function get-typography-tokens($config) { + @return ( + container-text-font: typography-utils.font-family($config, caption) or + typography-utils.font-family($config), + container-text-line-height: typography-utils.line-height($config, caption), + container-text-size: typography-utils.font-size($config, caption), + container-text-tracking: typography-utils.letter-spacing($config, caption), + container-text-weight: typography-utils.font-weight($config, caption), + select-trigger-text-size: typography-utils.font-size($config, caption), + ); +} + +// Tokens that can be configured through Angular Material's density theming API. +@function get-density-tokens($config) { + $density-scale: theming.clamp-density($config, -3); + $size-scale: ( + 0: 56px, + -1: 52px, + -2: 48px, + -3: 40px, + ); + + @return ( + container-size: map.get($size-scale, $density-scale) + ); +} + +// Combines the tokens generated by the above functions into a single map with placeholder values. +// This is used to create token slots. +@function get-token-slots() { + @return sass-utils.deep-merge-all( + get-unthemable-tokens(), + get-color-tokens(token-utils.$placeholder-color-config), + get-typography-tokens(token-utils.$placeholder-typography-config), + get-density-tokens(token-utils.$placeholder-density-config) + ); +} diff --git a/src/material/paginator/BUILD.bazel b/src/material/paginator/BUILD.bazel index 4db9ed471845..e5b0b994bc2c 100644 --- a/src/material/paginator/BUILD.bazel +++ b/src/material/paginator/BUILD.bazel @@ -44,7 +44,9 @@ sass_binary( name = "paginator_scss", src = "paginator.scss", deps = [ + "//:mdc_sass_lib", "//src/cdk:sass_lib", + "//src/material:sass_lib", ], ) diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss index 24f47d65d561..e40951379579 100644 --- a/src/material/paginator/_paginator-theme.scss +++ b/src/material/paginator/_paginator-theme.scss @@ -1,53 +1,17 @@ -@use 'sass:map'; @use 'sass:meta'; -@use '@material/density' as mdc-density; -@use '@material/typography' as mdc-typography; - +@use '../core/tokens/m2/mat/paginator' as tokens-mat-paginator; +@use '../core/style/sass-utils'; @use '../core/typography/typography'; -@use '../core/typography/typography-utils'; -@use '../core/mdc-helpers/mdc-helpers'; @use '../core/theming/theming'; +@use '../core/tokens/token-utils'; @use '../form-field/form-field-density'; -@use './paginator-variables'; @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - $background: map.get($config, background); - $foreground: map.get($config, foreground); - $icon-color: rgba(theming.get-color-from-palette($foreground, base), 0.54); - $disabled-color: rgba(theming.get-color-from-palette($foreground, base), 0.12); - - .mat-mdc-paginator { - background: theming.get-color-from-palette($background, card); - color: rgba(theming.get-color-from-palette($foreground, base), 0.87); - } - - .mat-mdc-paginator-icon { - fill: $icon-color; - } - - .mat-mdc-paginator-decrement, - .mat-mdc-paginator-increment { - border-top: 2px solid $icon-color; - border-right: 2px solid $icon-color; - } - - .mat-mdc-paginator-first, - .mat-mdc-paginator-last { - border-top: 2px solid $icon-color; - } - .mat-mdc-icon-button[disabled] { - .mat-mdc-paginator-decrement, - .mat-mdc-paginator-increment, - .mat-mdc-paginator-first, - .mat-mdc-paginator-last { - border-color: $disabled-color; - } - - .mat-mdc-paginator-icon { - fill: $disabled-color; - } + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-paginator.$prefix, + tokens-mat-paginator.get-color-tokens($config)); } } @@ -55,22 +19,21 @@ $config: typography.private-typography-to-2018-config( theming.get-typography-config($config-or-theme)); - @include mdc-helpers.using-mdc-typography($config) { - .mat-mdc-paginator { - @include mdc-typography.typography(caption, $query: mdc-helpers.$mdc-typography-styles-query); - } - - .mat-mdc-paginator .mat-mdc-select-value { - font-size: typography-utils.font-size($config, caption); - } + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-paginator.$prefix, + tokens-mat-paginator.get-typography-tokens($config)); } } @mixin density($config-or-theme) { $density-scale: theming.get-density-config($config-or-theme); - $height: mdc-density.prop-value( - paginator-variables.$density-config, $density-scale, height); + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-paginator.$prefix, + tokens-mat-paginator.get-density-tokens($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. @@ -82,10 +45,6 @@ @include form-field-density.private-form-field-density($density-scale); } } - - .mat-mdc-paginator-container { - min-height: $height; - } } @mixin theme($theme-or-color-config) { diff --git a/src/material/paginator/_paginator-variables.scss b/src/material/paginator/_paginator-variables.scss index 0b41a650c2f0..d7746ed58142 100644 --- a/src/material/paginator/_paginator-variables.scss +++ b/src/material/paginator/_paginator-variables.scss @@ -1,3 +1,5 @@ +// TODO: this file isn't used, but is kept for backwards compatibility. It should be deleted in v17. + $height: 56px !default; // Minimum height for paginator's in the highest density is determined based on how // much the paginator can shrink until the content exceeds (i.e. navigation buttons). diff --git a/src/material/paginator/paginator.scss b/src/material/paginator/paginator.scss index e0f72e1eef3f..acc6a09eca75 100644 --- a/src/material/paginator/paginator.scss +++ b/src/material/paginator/paginator.scss @@ -1,4 +1,7 @@ @use '@angular/cdk'; +@use '@material/typography/typography' as mdc-typography; +@use '../core/tokens/m2/mat/paginator' as tokens-mat-paginator; +@use '../core/tokens/token-utils'; $padding: 0 8px; $page-size-margin-right: 8px; @@ -13,6 +16,22 @@ $button-icon-size: 28px; .mat-mdc-paginator { display: block; + @include token-utils.use-tokens( + tokens-mat-paginator.$prefix, tokens-mat-paginator.get-token-slots()) { + @include mdc-typography.smooth-font(); + @include token-utils.create-token-slot(color, container-text-color); + @include token-utils.create-token-slot(background-color, container-background-color); + @include token-utils.create-token-slot(font-family, container-text-font); + @include token-utils.create-token-slot(line-height, container-text-line-height); + @include token-utils.create-token-slot(font-size, container-text-size); + @include token-utils.create-token-slot(font-weight, container-text-weight); + @include token-utils.create-token-slot(letter-spacing, container-text-tracking); + + .mat-mdc-select-value { + @include token-utils.create-token-slot(font-size, select-trigger-text-size); + } + } + // This element reserves space for hints and error messages. // Hide it since we know that we won't need it. .mat-mdc-form-field-subscript-wrapper { @@ -39,6 +58,11 @@ $button-icon-size: 28px; padding: $padding; flex-wrap: wrap-reverse; width: 100%; + + @include token-utils.use-tokens( + tokens-mat-paginator.$prefix, tokens-mat-paginator.get-token-slots()) { + @include token-utils.create-token-slot(min-height, container-size); + } } .mat-mdc-paginator-page-size { @@ -74,6 +98,15 @@ $button-icon-size: 28px; display: inline-block; width: $button-icon-size; + @include token-utils.use-tokens( + tokens-mat-paginator.$prefix, tokens-mat-paginator.get-token-slots()) { + @include token-utils.create-token-slot(fill, enabled-icon-color); + + .mat-mdc-icon-button[disabled] & { + @include token-utils.create-token-slot(fill, disabled-icon-color); + } + } + [dir='rtl'] & { transform: rotate(180deg); }