Skip to content

Commit

Permalink
refactor(material/sort): switch to token theming API
Browse files Browse the repository at this point in the history
Reworks the sort header to use the new tokens theming API.
  • Loading branch information
crisbeto committed Oct 19, 2023
1 parent f0697d9 commit ab1bd97
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 23 deletions.
60 changes: 60 additions & 0 deletions src/material/core/tokens/m2/mat/_sort.scss
Original file line number Diff line number Diff line change
@@ -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)
);
}
44 changes: 21 additions & 23 deletions src/material/sort/_sort-theme.scss
Original file line number Diff line number Diff line change
@@ -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') {
Expand Down
6 changes: 6 additions & 0 deletions src/material/sort/sort-header.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit ab1bd97

Please sign in to comment.