Skip to content

Commit cc02ea8

Browse files
refactor(material/divider): switch to tokens API (#27478)
1 parent fd8f7f6 commit cc02ea8

File tree

4 files changed

+72
-14
lines changed

4 files changed

+72
-14
lines changed
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@use 'sass:map';
2+
@use '../../token-utils';
3+
@use '../../../theming/theming';
4+
@use '../../../style/sass-utils';
5+
6+
// The prefix used to generate the fully qualified name for tokens in this file.
7+
$prefix: (mat, divider);
8+
9+
// Tokens that can't be configured through Angular Material's current theming API,
10+
// but may be in a future version of the theming API.
11+
@function get-unthemable-tokens() {
12+
@return (
13+
width: 1px
14+
);
15+
}
16+
17+
// Tokens that can be configured through Angular Material's color theming API.
18+
@function get-color-tokens($config) {
19+
$foreground: map.get($config, foreground);
20+
21+
@return (
22+
color: theming.get-color-from-palette($foreground, divider)
23+
);
24+
}
25+
26+
// Tokens that can be configured through Angular Material's typography theming API.
27+
@function get-typography-tokens($config) {
28+
@return ();
29+
}
30+
31+
// Tokens that can be configured through Angular Material's density theming API.
32+
@function get-density-tokens($config) {
33+
@return ();
34+
}
35+
36+
// Combines the tokens generated by the above functions into a single map with placeholder values.
37+
// This is used to create token slots.
38+
@function get-token-slots() {
39+
@return sass-utils.deep-merge-all(
40+
get-unthemable-tokens(),
41+
get-color-tokens(token-utils.$placeholder-color-config),
42+
get-typography-tokens(token-utils.$placeholder-typography-config),
43+
get-density-tokens(token-utils.$placeholder-density-config)
44+
);
45+
}

src/material/divider/BUILD.bazel

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ sass_library(
3333
sass_binary(
3434
name = "divider_scss",
3535
src = "divider.scss",
36+
deps = [
37+
":divider_scss_lib",
38+
"//src/material/core:core_scss_lib",
39+
],
3640
)
3741

3842
ng_test_library(

src/material/divider/_divider-theme.scss

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
1-
@use 'sass:map';
1+
@use '../core/style/sass-utils';
22
@use '../core/theming/theming';
3+
@use '../core/tokens/token-utils';
4+
@use '../core/tokens/m2/mat/divider' as tokens-mat-divider;
35

46
@mixin color($config-or-theme) {
57
$config: theming.get-color-config($config-or-theme);
6-
$foreground: map.get($config, foreground);
78

8-
.mat-divider {
9-
border-top-color: theming.get-color-from-palette($foreground, divider);
10-
}
11-
12-
.mat-divider-vertical {
13-
border-right-color: theming.get-color-from-palette($foreground, divider);
9+
@include sass-utils.current-selector-or-root() {
10+
@include token-utils.create-token-values(tokens-mat-divider.$prefix,
11+
tokens-mat-divider.get-color-tokens($config));
1412
}
1513
}
1614

src/material/divider/divider.scss

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
1-
$width: 1px;
1+
@use '../core/tokens/token-utils';
2+
@use '../core/tokens/m2/mat/divider' as tokens-mat-divider;
3+
4+
25
$inset-margin: 80px;
36

47
.mat-divider {
8+
@include token-utils.create-token-values(
9+
tokens-mat-divider.$prefix, tokens-mat-divider.get-unthemable-tokens());
10+
511
display: block;
612
margin: 0;
7-
border-top-width: $width;
813
border-top-style: solid;
14+
@include token-utils.use-tokens(
15+
tokens-mat-divider.$prefix, tokens-mat-divider.get-token-slots()) {
16+
@include token-utils.create-token-slot(border-top-color, color);
17+
@include token-utils.create-token-slot(border-top-width, width);
918

10-
&.mat-divider-vertical {
11-
border-top: 0;
12-
border-right-width: $width;
13-
border-right-style: solid;
19+
&.mat-divider-vertical {
20+
border-top: 0;
21+
border-right-style: solid;
22+
@include token-utils.create-token-slot(border-right-color, color);
23+
@include token-utils.create-token-slot(border-right-width, width);
24+
}
1425
}
1526

1627
&.mat-divider-inset {

0 commit comments

Comments
 (0)