Skip to content

Commit 294d886

Browse files
crisbetocrisbeto
committed
refactor(material/core): switch pseudo checkbox to tokens theming API (#28174)
Reworks the pseudo checkbox component to be themed through the tokens API. (cherry picked from commit 0509be9)
1 parent bbe4e85 commit 294d886

File tree

5 files changed

+155
-64
lines changed

5 files changed

+155
-64
lines changed

‎src/material/core/_core-theme.scss

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,8 @@
6060
@mixin density($theme) {
6161
@include option-theme.density($theme);
6262
@include optgroup-theme.density($theme);
63+
@include pseudo-checkbox-theme.density($theme);
6364
@include ripple-theme.density($theme);
64-
65-
// TODO(mmalerba): add density mixins for these.
66-
// @include pseudo-checkbox-theme.density($theme);
6765
}
6866

6967
// Mixin that renders all of the core styles that depend on the theme.

‎src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

Lines changed: 18 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,44 @@
11
@use '../../theming/theming';
22
@use '../../theming/inspection';
3-
4-
@mixin _psuedo-checkbox-styles-with-color($text-color, $background) {
5-
.mat-pseudo-checkbox-checked,
6-
.mat-pseudo-checkbox-indeterminate {
7-
&.mat-pseudo-checkbox-minimal::after {
8-
color: $text-color;
9-
}
10-
11-
// Full (checkbox) appearance inverts colors of text and background.
12-
&.mat-pseudo-checkbox-full {
13-
&::after {
14-
color: $background;
15-
}
16-
17-
background: $text-color;
18-
}
3+
@use '../../style/sass-utils';
4+
@use '../../tokens/token-utils';
5+
@use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
6+
@use '../../tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
7+
8+
@mixin _palette-styles($theme, $palette-name) {
9+
@include sass-utils.current-selector-or-root() {
10+
@include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
11+
tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name));
12+
@include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,
13+
tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name));
1914
}
2015
}
2116

22-
@mixin base($theme) {
23-
// TODO(mmalerba): Move pseudo checkbox base tokens here
24-
}
17+
@mixin base($theme) {}
2518

2619
@mixin color($theme) {
27-
$is-dark-theme: inspection.get-theme-type($theme) == dark;
28-
$primary: inspection.get-theme-color($theme, primary);
29-
$accent: inspection.get-theme-color($theme, accent);
30-
$warn: inspection.get-theme-color($theme, warn);
31-
$background: inspection.get-theme-color($theme, background, background);
32-
$secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
33-
34-
// NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
35-
// this does not work well with elements layered on top of one another. To get around this we
36-
// blend the colors together based on the base color and the theme background.
37-
$white-30pct-opacity-on-dark: #686868;
38-
$black-26pct-opacity-on-light: #b0b0b0;
39-
$disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
40-
$colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate';
41-
42-
.mat-pseudo-checkbox-full {
43-
color: $secondary-text;
44-
&.mat-pseudo-checkbox-disabled {
45-
color: $disabled-color;
46-
}
47-
}
48-
4920
.mat-primary {
50-
@include _psuedo-checkbox-styles-with-color($primary, $background);
21+
@include _palette-styles($theme, primary);
5122
}
5223

5324
// Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
5425
// theme from their parent, rather than implementing their own theming, which is why we
5526
// don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
5627
// in order to allow for the color to be overwritten if the checkbox is inside a parent that
5728
// has `mat-accent` and is placed inside another parent that has `mat-primary`.
58-
@include _psuedo-checkbox-styles-with-color($accent, $background);
29+
@include _palette-styles($theme, accent);
5930
.mat-accent {
60-
@include _psuedo-checkbox-styles-with-color($accent, $background);
31+
@include _palette-styles($theme, accent);
6132
}
6233

6334
.mat-warn {
64-
@include _psuedo-checkbox-styles-with-color($warn, $background);
65-
}
66-
67-
.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-checked,
68-
.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-indeterminate {
69-
&.mat-pseudo-checkbox-minimal::after {
70-
color: $disabled-color;
71-
}
72-
73-
&.mat-pseudo-checkbox-full {
74-
background: $disabled-color;
75-
}
35+
@include _palette-styles($theme, warn);
7636
}
7737
}
7838

7939
@mixin typography($theme) {}
8040

81-
@mixin _density($theme) {}
41+
@mixin density($theme) {}
8242

8343
@mixin theme($theme) {
8444
@include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
@@ -87,7 +47,7 @@
8747
@include color($theme);
8848
}
8949
@if inspection.theme-has($theme, density) {
90-
@include _density($theme);
50+
@include density($theme);
9151
}
9252
@if inspection.theme-has($theme, typography) {
9353
@include typography($theme);

‎src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
@use '../../style/checkbox-common';
33
@use '../../style/private';
44
@use '../../style/variables';
5+
@use '../../tokens/token-utils';
6+
@use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
7+
@use '../../tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
58
@use './pseudo-checkbox-common';
69

710
.mat-pseudo-checkbox {
@@ -51,10 +54,48 @@
5154
box-sizing: content-box;
5255
}
5356

57+
.mat-pseudo-checkbox-minimal {
58+
@include token-utils.use-tokens(tokens-mat-minimal-pseudo-checkbox.$prefix,
59+
tokens-mat-minimal-pseudo-checkbox.get-token-slots()) {
60+
&.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
61+
&::after {
62+
@include token-utils.create-token-slot(color, selected-checkmark-color);
63+
}
64+
65+
&.mat-pseudo-checkbox-disabled::after {
66+
@include token-utils.create-token-slot(color, disabled-selected-checkmark-color);
67+
}
68+
}
69+
}
70+
}
71+
5472
.mat-pseudo-checkbox-full {
55-
border: checkbox-common.$border-width solid;
56-
&.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
57-
border-color: transparent;
73+
@include token-utils.use-tokens(tokens-mat-full-pseudo-checkbox.$prefix,
74+
tokens-mat-full-pseudo-checkbox.get-token-slots()) {
75+
@include token-utils.create-token-slot(border-color, unselected-icon-color);
76+
border-width: checkbox-common.$border-width;
77+
border-style: solid;
78+
79+
&.mat-pseudo-checkbox-disabled {
80+
@include token-utils.create-token-slot(border-color, disabled-unselected-icon-color);
81+
}
82+
83+
&.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
84+
@include token-utils.create-token-slot(background-color, selected-icon-color);
85+
border-color: transparent;
86+
87+
&::after {
88+
@include token-utils.create-token-slot(color, selected-checkmark-color);
89+
}
90+
91+
&.mat-pseudo-checkbox-disabled {
92+
@include token-utils.create-token-slot(background-color, disabled-selected-icon-color);
93+
94+
&::after {
95+
@include token-utils.create-token-slot(color, disabled-selected-checkmark-color);
96+
}
97+
}
98+
}
5899
}
59100
}
60101

‎src/material/core/tokens/m2/mat/_full-pseudo-checkbox.scss

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

‎src/material/core/tokens/m2/mat/_minimal-pseudo-checkbox.scss

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

0 commit comments

Comments
 (0)