From ab1bd97aad8265b792ec0c95b6015153d3a5ea54 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 19 Oct 2023 09:56:26 +0200 Subject: [PATCH] refactor(material/sort): switch to token theming API Reworks the sort header to use the new tokens theming API. --- src/material/core/tokens/m2/mat/_sort.scss | 60 ++++++++++++++++++++++ src/material/sort/_sort-theme.scss | 44 ++++++++-------- src/material/sort/sort-header.scss | 6 +++ 3 files changed, 87 insertions(+), 23 deletions(-) create mode 100644 src/material/core/tokens/m2/mat/_sort.scss diff --git a/src/material/core/tokens/m2/mat/_sort.scss b/src/material/core/tokens/m2/mat/_sort.scss new file mode 100644 index 000000000000..1c9498a0f95b --- /dev/null +++ b/src/material/core/tokens/m2/mat/_sort.scss @@ -0,0 +1,60 @@ +@use 'sass:color'; +@use 'sass:meta'; +@use '../../token-utils'; +@use '../../../theming/inspection'; +@use '../../../style/sass-utils'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mat, sort); + +// 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) { + $table-background: inspection.get-theme-color($theme, background, card); + $text-color: inspection.get-theme-color($theme, foreground, secondary-text); + $arrow-color: null; + + // Because the arrow is made up of multiple elements that are stacked on top of each other, + // we can't use the semi-transparent color from the theme directly. If the value is a color + // *type*, we convert it into a solid color by taking the opacity from the rgba value and + // using the value to determine the percentage of the background to put into foreground + // when mixing the colors together. Otherwise, if it resolves to something different + // (e.g. it resolves to a CSS variable), we use the color directly. + @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) { + $text-opacity: opacity($text-color); + $arrow-color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%); + } + @else { + $arrow-color: $text-color; + } + + @return ( + arrow-color: $arrow-color, + ); +} + +// 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 (); +} + +// 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/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss index a831c6afbbf5..a1d3116de80c 100644 --- a/src/material/sort/_sort-theme.scss +++ b/src/material/sort/_sort-theme.scss @@ -1,36 +1,34 @@ -@use 'sass:color'; -@use 'sass:meta'; +@use '../core/tokens/m2/mat/sort' as tokens-mat-sort; +@use '../core/style/sass-utils'; +@use '../core/typography/typography'; @use '../core/theming/theming'; @use '../core/theming/inspection'; +@use '../core/tokens/token-utils'; -@mixin base($theme) { - // TODO(mmalerba): Move sort header base tokens here -} +@mixin base($theme) {} @mixin color($theme) { - .mat-sort-header-arrow { - $table-background: inspection.get-theme-color($theme, background, card); - $text-color: inspection.get-theme-color($theme, foreground, secondary-text); + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-sort.$prefix, + tokens-mat-sort.get-color-tokens($theme)); + } +} - // Because the arrow is made up of multiple elements that are stacked on top of each other, - // we can't use the semi-transparent color from the theme directly. If the value is a color - // *type*, we convert it into a solid color by taking the opacity from the rgba value and - // using the value to determine the percentage of the background to put into foreground - // when mixing the colors together. Otherwise, if it resolves to something different - // (e.g. it resolves to a CSS variable), we use the color directly. - @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) { - $text-opacity: opacity($text-color); - color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%); - } - @else { - color: $text-color; - } +@mixin typography($theme) { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-sort.$prefix, + tokens-mat-sort.get-typography-tokens($theme)); } } -@mixin typography($theme) {} +@mixin density($theme) { + $density-scale: inspection.get-theme-density($theme); -@mixin density($theme) {} + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-sort.$prefix, + tokens-mat-sort.get-density-tokens($theme)); + } +} @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') { diff --git a/src/material/sort/sort-header.scss b/src/material/sort/sort-header.scss index ee772bb68223..204b76ee66d4 100644 --- a/src/material/sort/sort-header.scss +++ b/src/material/sort/sort-header.scss @@ -1,5 +1,7 @@ @use '@angular/cdk'; +@use '../core/tokens/m2/mat/sort' as tokens-mat-sort; +@use '../core/tokens/token-utils'; @use '../core/focus-indicators/private'; $header-arrow-margin: 6px; @@ -56,6 +58,10 @@ $header-arrow-hint-opacity: 0.38; position: relative; display: flex; + @include token-utils.use-tokens(tokens-mat-sort.$prefix, tokens-mat-sort.get-token-slots()) { + @include token-utils.create-token-slot(color, arrow-color); + } + // Start off at 0 since the arrow may become visible while parent are animating. // This will be overwritten when the arrow animations kick in. See #11819. opacity: 0;