Skip to content

Commit 8563bb8

Browse files
mmalerbammalerba
committed
refactor(multiple): Copy mdc-form-field tokens to individual components
1 parent c40cb80 commit 8563bb8

19 files changed

+389
-396
lines changed

‎src/material/checkbox/_checkbox-theme.scss

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
2-
@use '@material/form-field/form-field-theme' as mdc-form-field-theme;
32
@use '../core/style/sass-utils';
43
@use '../core/theming/theming';
54
@use '../core/theming/inspection';
65
@use '../core/theming/validation';
76
@use '../core/tokens/token-utils';
87
@use '../core/typography/typography';
98
@use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
10-
@use '../core/tokens/m2/mdc/form-field' as tokens-mdc-form-field;
119
@use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox;
1210

1311
/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -16,12 +14,13 @@
1614
@mixin base($theme) {
1715
@if inspection.get-theme-version($theme) == 1 {
1816
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
19-
}
20-
@else {
17+
} @else {
2118
@include sass-utils.current-selector-or-root() {
2219
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-unthemable-tokens());
2320
@include token-utils.create-token-values(
24-
tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-unthemable-tokens());
21+
tokens-mat-checkbox.$prefix,
22+
tokens-mat-checkbox.get-unthemable-tokens()
23+
);
2524
}
2625
}
2726
}
@@ -34,17 +33,16 @@
3433
@mixin color($theme, $options...) {
3534
@if inspection.get-theme-version($theme) == 1 {
3635
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
37-
}
38-
@else {
36+
} @else {
3937
@include sass-utils.current-selector-or-root() {
4038
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme));
4139
@include token-utils.create-token-values(
42-
tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-color-tokens($theme));
40+
tokens-mat-checkbox.$prefix,
41+
tokens-mat-checkbox.get-color-tokens($theme)
42+
);
4343
}
4444

4545
.mat-mdc-checkbox {
46-
@include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
47-
4846
&.mat-primary {
4947
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
5048
}
@@ -61,16 +59,13 @@
6159
@mixin typography($theme) {
6260
@if inspection.get-theme-version($theme) == 1 {
6361
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
64-
}
65-
@else {
62+
} @else {
6663
@include sass-utils.current-selector-or-root() {
6764
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($theme));
6865
@include token-utils.create-token-values(
69-
tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-typography-tokens($theme));
70-
}
71-
72-
.mat-mdc-checkbox {
73-
@include mdc-form-field-theme.theme(tokens-mdc-form-field.get-typography-tokens($theme));
66+
tokens-mat-checkbox.$prefix,
67+
tokens-mat-checkbox.get-typography-tokens($theme)
68+
);
7469
}
7570
}
7671
}
@@ -82,12 +77,13 @@
8277

8378
@if inspection.get-theme-version($theme) == 1 {
8479
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
85-
}
86-
@else {
80+
} @else {
8781
@include sass-utils.current-selector-or-root() {
8882
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($theme));
8983
@include token-utils.create-token-values(
90-
tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-density-tokens($theme));
84+
tokens-mat-checkbox.$prefix,
85+
tokens-mat-checkbox.get-density-tokens($theme)
86+
);
9187
}
9288
}
9389
}
@@ -97,8 +93,14 @@
9793
@mixin overrides($tokens: ()) {
9894
@include token-utils.batch-create-token-values(
9995
$tokens,
100-
(prefix: tokens-mat-checkbox.$prefix, tokens: tokens-mat-checkbox.get-token-slots()),
101-
(prefix: tokens-mdc-checkbox.$prefix, tokens: tokens-mdc-checkbox.get-token-slots()),
96+
(
97+
prefix: tokens-mat-checkbox.$prefix,
98+
tokens: tokens-mat-checkbox.get-token-slots(),
99+
),
100+
(
101+
prefix: tokens-mdc-checkbox.$prefix,
102+
tokens: tokens-mdc-checkbox.get-token-slots(),
103+
)
102104
);
103105
}
104106

@@ -111,8 +113,7 @@
111113
@include theming.private-check-duplicate-theme-styles($theme, 'mat-checkbox') {
112114
@if inspection.get-theme-version($theme) == 1 {
113115
@include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
114-
}
115-
@else {
116+
} @else {
116117
@include base($theme);
117118
@if inspection.theme-has($theme, color) {
118119
@include color($theme);
@@ -129,14 +130,16 @@
129130

130131
@mixin _theme-from-tokens($tokens, $options...) {
131132
@include validation.selector-defined(
132-
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
133+
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
134+
);
133135
$mdc-checkbox-tokens: token-utils.get-tokens-for(
134-
$tokens, tokens-mdc-checkbox.$prefix, $options...);
135-
// Don't pass $options here, since the mdc-form-field doesn't support color options,
136+
$tokens,
137+
tokens-mdc-checkbox.$prefix,
138+
$options...
139+
);
140+
// Don't pass $options here, since the mdc-checkbox doesn't support color options,
136141
// only the mdc-checkbox does.
137-
$mdc-form-field-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-form-field.$prefix);
138142
$mat-checkbox-tokens: token-utils.get-tokens-for($tokens, tokens-mat-checkbox.$prefix);
139143
@include mdc-checkbox-theme.theme($mdc-checkbox-tokens);
140-
@include mdc-form-field-theme.theme($mdc-form-field-tokens);
141144
@include token-utils.create-token-values(tokens-mat-checkbox.$prefix, $mat-checkbox-tokens);
142145
}

‎src/material/checkbox/checkbox.scss

Lines changed: 85 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -19,26 +19,31 @@
1919

2020
.mdc-checkbox {
2121
// Add the slots for MDC checkbox.
22-
@include mdc-checkbox-theme.theme-styles(map.merge($mdc-checkbox-slots, (
23-
// Angular Material focuses the native input. rather than the element MDC expects,
24-
// so we create this slot ourselves.
25-
selected-focus-icon-color: null,
26-
unselected-focus-icon-color: null,
27-
// MDC expects `.mdc-checkbox__ripple::before` to be the state layer, but we use
28-
// `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves.
29-
unselected-hover-state-layer-opacity: null,
30-
unselected-hover-state-layer-color: null,
31-
unselected-focus-state-layer-opacity: null,
32-
unselected-focus-state-layer-color: null,
33-
unselected-pressed-state-layer-opacity: null,
34-
unselected-pressed-state-layer-color: null,
35-
selected-hover-state-layer-opacity: null,
36-
selected-hover-state-layer-color: null,
37-
selected-focus-state-layer-opacity: null,
38-
selected-focus-state-layer-color: null,
39-
selected-pressed-state-layer-opacity: null,
40-
selected-pressed-state-layer-color: null,
41-
)));
22+
@include mdc-checkbox-theme.theme-styles(
23+
map.merge(
24+
$mdc-checkbox-slots,
25+
(
26+
// Angular Material focuses the native input. rather than the element MDC expects,
27+
// so we create this slot ourselves.
28+
selected-focus-icon-color: null,
29+
unselected-focus-icon-color: null,
30+
// MDC expects `.mdc-checkbox__ripple::before` to be the state layer, but we use
31+
// `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves.
32+
unselected-hover-state-layer-opacity: null,
33+
unselected-hover-state-layer-color: null,
34+
unselected-focus-state-layer-opacity: null,
35+
unselected-focus-state-layer-color: null,
36+
unselected-pressed-state-layer-opacity: null,
37+
unselected-pressed-state-layer-color: null,
38+
selected-hover-state-layer-opacity: null,
39+
selected-hover-state-layer-color: null,
40+
selected-focus-state-layer-opacity: null,
41+
selected-focus-state-layer-color: null,
42+
selected-pressed-state-layer-opacity: null,
43+
selected-pressed-state-layer-color: null
44+
)
45+
)
46+
);
4247

4348
@include token-utils.use-tokens(tokens-mdc-checkbox.$prefix, $mdc-checkbox-slots) {
4449
// MDC expects focus on .mdc-checkbox, but we focus the native element instead, so we need to
@@ -64,77 +69,101 @@
6469
.mdc-checkbox__ripple {
6570
@include token-utils.create-token-slot(opacity, unselected-hover-state-layer-opacity);
6671
@include token-utils.create-token-slot(
67-
background-color, unselected-hover-state-layer-color);
72+
background-color,
73+
unselected-hover-state-layer-color
74+
);
6875
}
6976

7077
.mat-mdc-checkbox-ripple .mat-ripple-element {
7178
@include token-utils.create-token-slot(
72-
background-color, unselected-hover-state-layer-color);
79+
background-color,
80+
unselected-hover-state-layer-color
81+
);
7382
}
7483
}
7584

7685
.mdc-checkbox__native-control:focus {
7786
& ~ .mdc-checkbox__ripple {
7887
@include token-utils.create-token-slot(opacity, unselected-focus-state-layer-opacity);
7988
@include token-utils.create-token-slot(
80-
background-color, unselected-focus-state-layer-color);
89+
background-color,
90+
unselected-focus-state-layer-color
91+
);
8192
}
8293

8394
& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
8495
@include token-utils.create-token-slot(
85-
background-color, unselected-focus-state-layer-color);
96+
background-color,
97+
unselected-focus-state-layer-color
98+
);
8699
}
87100
}
88101

89102
&:active .mdc-checkbox__native-control {
90103
& ~ .mdc-checkbox__ripple {
91104
@include token-utils.create-token-slot(opacity, unselected-pressed-state-layer-opacity);
92105
@include token-utils.create-token-slot(
93-
background-color, unselected-pressed-state-layer-color);
106+
background-color,
107+
unselected-pressed-state-layer-color
108+
);
94109
}
95110

96111
& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
97112
@include token-utils.create-token-slot(
98-
background-color, unselected-pressed-state-layer-color);
113+
background-color,
114+
unselected-pressed-state-layer-color
115+
);
99116
}
100117
}
101118

102119
&:hover .mdc-checkbox__native-control:checked {
103120
& ~ .mdc-checkbox__ripple {
104121
@include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity);
105122
@include token-utils.create-token-slot(
106-
background-color, selected-hover-state-layer-color);
123+
background-color,
124+
selected-hover-state-layer-color
125+
);
107126
}
108127

109128
& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
110129
@include token-utils.create-token-slot(
111-
background-color, selected-hover-state-layer-color);
130+
background-color,
131+
selected-hover-state-layer-color
132+
);
112133
}
113134
}
114135

115136
.mdc-checkbox__native-control:focus:checked {
116137
& ~ .mdc-checkbox__ripple {
117138
@include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity);
118139
@include token-utils.create-token-slot(
119-
background-color, selected-focus-state-layer-color);
140+
background-color,
141+
selected-focus-state-layer-color
142+
);
120143
}
121144

122145
& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
123146
@include token-utils.create-token-slot(
124-
background-color, selected-focus-state-layer-color);
147+
background-color,
148+
selected-focus-state-layer-color
149+
);
125150
}
126151
}
127152

128153
&:active .mdc-checkbox__native-control:checked {
129154
& ~ .mdc-checkbox__ripple {
130155
@include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity);
131156
@include token-utils.create-token-slot(
132-
background-color, selected-pressed-state-layer-color);
157+
background-color,
158+
selected-pressed-state-layer-color
159+
);
133160
}
134161

135162
& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
136163
@include token-utils.create-token-slot(
137-
background-color, selected-pressed-state-layer-color);
164+
background-color,
165+
selected-pressed-state-layer-color
166+
);
138167
}
139168
}
140169
}
@@ -167,13 +196,27 @@
167196
// user of this. Therefore we add the pointer cursor on top of MDC's styles.
168197
label {
169198
cursor: pointer;
199+
200+
@include token-utils.use-tokens(
201+
tokens-mat-checkbox.$prefix,
202+
tokens-mat-checkbox.get-token-slots()
203+
) {
204+
@include token-utils.create-token-slot(color, label-text-color);
205+
@include token-utils.create-token-slot(font-family, label-text-font);
206+
@include token-utils.create-token-slot(line-height, label-text-line-height);
207+
@include token-utils.create-token-slot(font-size, label-text-size);
208+
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
209+
@include token-utils.create-token-slot(font-weight, label-text-weight);
210+
}
170211
}
171212

172213
&.mat-mdc-checkbox-disabled label {
173214
cursor: default;
174215

175-
@include token-utils.use-tokens(tokens-mat-checkbox.$prefix,
176-
tokens-mat-checkbox.get-token-slots()) {
216+
@include token-utils.use-tokens(
217+
tokens-mat-checkbox.$prefix,
218+
tokens-mat-checkbox.get-token-slots()
219+
) {
177220
@include token-utils.create-token-slot(color, disabled-label-color);
178221
}
179222
}
@@ -201,7 +244,8 @@
201244
}
202245
}
203246

204-
.mat-mdc-checkbox-ripple, .mdc-checkbox__ripple {
247+
.mat-mdc-checkbox-ripple,
248+
.mdc-checkbox__ripple {
205249
@include layout-common.fill();
206250

207251
// Usually the ripple radius would be specified through the MatRipple input, but
@@ -225,10 +269,13 @@
225269
.mat-mdc-checkbox-touch-target {
226270
@include mdc-touch-target.touch-target(
227271
$set-width: true,
228-
$query: mdc-helpers.$mdc-base-styles-query);
272+
$query: mdc-helpers.$mdc-base-styles-query
273+
);
229274

230-
@include token-utils.use-tokens(tokens-mat-checkbox.$prefix,
231-
tokens-mat-checkbox.get-token-slots()) {
275+
@include token-utils.use-tokens(
276+
tokens-mat-checkbox.$prefix,
277+
tokens-mat-checkbox.get-token-slots()
278+
) {
232279
@include token-utils.create-token-slot(display, touch-target-display);
233280
}
234281
}

0 commit comments

Comments
 (0)