diff --git a/src/material/core/tokens/m2/mat/_divider.scss b/src/material/core/tokens/m2/mat/_divider.scss new file mode 100644 index 000000000000..edfb87e728c4 --- /dev/null +++ b/src/material/core/tokens/m2/mat/_divider.scss @@ -0,0 +1,45 @@ +@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, divider); + +// 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 ( + line-color: theming.get-color-from-palette($foreground, divider) + ); +} + +// Tokens that can be configured through Angular Material's typography theming API. +@function get-typography-tokens($config) { + @return (); +} + +// Tokens that can be configured through Angular Material's density theming API. +@function get-density-tokens($config) { + @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/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss index 520b22554723..394247951da7 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -1,16 +1,15 @@ @use 'sass:map'; +@use '../core/style/sass-utils'; @use '../core/theming/theming'; +@use '../core/tokens/token-utils'; +@use '../core/tokens/m2/mat/divider' as tokens-mat-divider; @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - $foreground: map.get($config, foreground); - .mat-divider { - border-top-color: theming.get-color-from-palette($foreground, divider); - } - - .mat-divider-vertical { - border-right-color: theming.get-color-from-palette($foreground, divider); + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-divider.$prefix, + tokens-mat-divider.get-color-tokens($config)); } } diff --git a/src/material/divider/divider.scss b/src/material/divider/divider.scss index 4fb1e3d89ce8..7234203e3049 100644 --- a/src/material/divider/divider.scss +++ b/src/material/divider/divider.scss @@ -1,3 +1,7 @@ +@use '../core/tokens/token-utils'; +@use '../core/tokens/m2/mat/divider' as tokens-mat-divider; + + $width: 1px; $inset-margin: 80px; @@ -6,11 +10,15 @@ $inset-margin: 80px; margin: 0; border-top-width: $width; border-top-style: solid; + @include token-utils.use-tokens(tokens-mat-divider.$prefix, tokens-mat-divider.get-token-slots()) { + @include token-utils.create-token-slot(border-top-color, line-color); - &.mat-divider-vertical { - border-top: 0; - border-right-width: $width; - border-right-style: solid; + &.mat-divider-vertical { + border-top: 0; + border-right-width: $width; + border-right-style: solid; + @include token-utils.create-token-slot(border-right-color, line-color); + } } &.mat-divider-inset {