Skip to content

Commit 51d8e00

Browse files
andrewseguinandrewseguin
committed
refactor: use slot()
1 parent 4d070e4 commit 51d8e00

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+966
-1097
lines changed

‎src/material/badge/badge.scss‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,18 @@ $large-size: $default-size + 6;
2222
// * `container-size` token - In M2 the token is emitted as `unset` to preserve the legacy
2323
// behavior while in M3 it targets `min-width` and `min-height` which allows the badge to
2424
// grow with the content.
25-
@include token-utils.create-token-slot(width, $legacy-size-var-name);
26-
@include token-utils.create-token-slot(height, $legacy-size-var-name);
27-
@include token-utils.create-token-slot(min-width, $size-var-name);
28-
@include token-utils.create-token-slot(min-height, $size-var-name);
29-
@include token-utils.create-token-slot(line-height, '#{$prefix}line-height');
30-
@include token-utils.create-token-slot(padding, '#{$prefix}container-padding');
31-
@include token-utils.create-token-slot(font-size, '#{$prefix}text-size');
32-
@include token-utils.create-token-slot(margin, '#{$prefix}container-offset');
25+
width: token-utils.slot($legacy-size-var-name);
26+
height: token-utils.slot($legacy-size-var-name);
27+
min-width: token-utils.slot($size-var-name);
28+
min-height: token-utils.slot($size-var-name);
29+
line-height: token-utils.slot('#{$prefix}line-height');
30+
padding: token-utils.slot('#{$prefix}container-padding');
31+
font-size: token-utils.slot('#{$prefix}text-size');
32+
margin: token-utils.slot('#{$prefix}container-offset');
3333
}
3434

3535
&.mat-badge-overlap .mat-badge-content {
36-
@include token-utils.create-token-slot(margin, '#{$prefix}container-overlap-offset');
36+
margin: token-utils.slot('#{$prefix}container-overlap-offset');
3737
}
3838
}
3939
}
@@ -63,11 +63,11 @@ $large-size: $default-size + 6;
6363
pointer-events: none;
6464

6565
@include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
66-
@include token-utils.create-token-slot(background-color, background-color);
67-
@include token-utils.create-token-slot(color, text-color);
68-
@include token-utils.create-token-slot(font-family, text-font);
69-
@include token-utils.create-token-slot(font-weight, text-weight);
70-
@include token-utils.create-token-slot(border-radius, container-shape);
66+
background-color: token-utils.slot(background-color);
67+
color: token-utils.slot(text-color);
68+
font-family: token-utils.slot(text-font);
69+
font-weight: token-utils.slot(text-weight);
70+
border-radius: token-utils.slot(container-shape);
7171

7272
.mat-badge-above & {
7373
bottom: 100%;
@@ -104,8 +104,8 @@ $large-size: $default-size + 6;
104104

105105
.mat-badge-disabled .mat-badge-content {
106106
@include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
107-
@include token-utils.create-token-slot(background-color, disabled-state-background-color);
108-
@include token-utils.create-token-slot(color, disabled-state-text-color);
107+
background-color: token-utils.slot(disabled-state-background-color);
108+
color: token-utils.slot(disabled-state-text-color);
109109
}
110110
}
111111

‎src/material/bottom-sheet/bottom-sheet-container.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,13 @@ $container-horizontal-padding: 16px !default;
4747

4848
@include token-utils.use-tokens(
4949
tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-token-slots()) {
50-
@include token-utils.create-token-slot(background, container-background-color);
51-
@include token-utils.create-token-slot(color, container-text-color);
52-
@include token-utils.create-token-slot(font-family, container-text-font);
53-
@include token-utils.create-token-slot(font-size, container-text-size);
54-
@include token-utils.create-token-slot(line-height, container-text-line-height);
55-
@include token-utils.create-token-slot(font-weight, container-text-weight);
56-
@include token-utils.create-token-slot(letter-spacing, container-text-tracking);
50+
background: token-utils.slot(container-background-color);
51+
color: token-utils.slot(container-text-color);
52+
font-family: token-utils.slot(container-text-font);
53+
font-size: token-utils.slot(container-text-size);
54+
line-height: token-utils.slot(container-text-line-height);
55+
font-weight: token-utils.slot(container-text-weight);
56+
letter-spacing: token-utils.slot(container-text-tracking);
5757
}
5858

5959
@include cdk.high-contrast {
@@ -77,8 +77,8 @@ $container-horizontal-padding: 16px !default;
7777
%_mat-bottom-sheet-container-border-radius {
7878
@include token-utils.use-tokens(
7979
tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-token-slots()) {
80-
@include token-utils.create-token-slot(border-top-left-radius, container-shape);
81-
@include token-utils.create-token-slot(border-top-right-radius, container-shape);
80+
border-top-left-radius: token-utils.slot(container-shape);
81+
border-top-right-radius: token-utils.slot(container-shape);
8282
}
8383
}
8484

‎src/material/button-toggle/button-toggle.scss‎

Lines changed: 48 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ $_standard-tokens: (
4141
transform: translateZ(0);
4242

4343
@include token-utils.use-tokens($_legacy-tokens...) {
44-
@include token-utils.create-token-slot(border-radius, shape);
44+
border-radius: token-utils.slot(shape);
4545
}
4646

4747
@include elevation.overridable-elevation(2);
@@ -54,12 +54,12 @@ $_standard-tokens: (
5454
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
5555
.mat-button-toggle-group-appearance-standard {
5656
@include token-utils.use-tokens($_standard-tokens...) {
57-
@include token-utils.create-token-slot(border-radius, shape);
58-
border: solid 1px token-utils.get-token-variable(divider-color);
57+
border-radius: token-utils.slot(shape);
58+
border: solid 1px token-utils.slot(divider-color);
5959

6060
.mat-pseudo-checkbox {
6161
--mat-minimal-pseudo-checkbox-selected-checkmark-color: #{
62-
token-utils.get-token-variable(selected-state-text-color)};
62+
token-utils.slot(selected-state-text-color)};
6363
}
6464
}
6565

@@ -87,18 +87,18 @@ $_standard-tokens: (
8787
position: relative;
8888

8989
@include token-utils.use-tokens($_legacy-tokens...) {
90-
@include token-utils.create-token-slot(color, text-color);
91-
@include token-utils.create-token-slot(font-family, label-text-font);
92-
@include token-utils.create-token-slot(font-size, label-text-size);
93-
@include token-utils.create-token-slot(line-height, label-text-line-height);
94-
@include token-utils.create-token-slot(font-weight, label-text-weight);
95-
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
90+
color: token-utils.slot(text-color);
91+
font-family: token-utils.slot(label-text-font);
92+
font-size: token-utils.slot(label-text-size);
93+
line-height: token-utils.slot(label-text-line-height);
94+
font-weight: token-utils.slot(label-text-weight);
95+
letter-spacing: token-utils.slot(label-text-tracking);
9696

9797
--mat-minimal-pseudo-checkbox-selected-checkmark-color: #{
98-
token-utils.get-token-variable(selected-state-text-color)};
98+
token-utils.slot(selected-state-text-color)};
9999

100100
&.cdk-keyboard-focused .mat-button-toggle-focus-overlay {
101-
@include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
101+
opacity: token-utils.slot(focus-state-layer-opacity);
102102
}
103103
}
104104

@@ -156,23 +156,22 @@ $_standard-tokens: (
156156

157157
.mat-button-toggle-checked {
158158
@include token-utils.use-tokens($_legacy-tokens...) {
159-
@include token-utils.create-token-slot(color, selected-state-text-color);
160-
@include token-utils.create-token-slot(background-color, selected-state-background-color);
159+
color: token-utils.slot(selected-state-text-color);
160+
background-color: token-utils.slot(selected-state-background-color);
161161
}
162162
}
163163

164164
.mat-button-toggle-disabled {
165165
pointer-events: none;
166166

167167
@include token-utils.use-tokens($_legacy-tokens...) {
168-
@include token-utils.create-token-slot(color, disabled-state-text-color);
169-
@include token-utils.create-token-slot(background-color, disabled-state-background-color);
168+
color: token-utils.slot(disabled-state-text-color);
169+
background-color: token-utils.slot(disabled-state-background-color);
170170
--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #{
171-
token-utils.get-token-variable(disabled-state-text-color)};
171+
token-utils.slot(disabled-state-text-color)};
172172

173173
&.mat-button-toggle-checked {
174-
@include token-utils.create-token-slot(background-color,
175-
disabled-selected-state-background-color);
174+
background-color: token-utils.slot(disabled-selected-state-background-color);
176175
}
177176
}
178177
}
@@ -183,14 +182,14 @@ $_standard-tokens: (
183182

184183
.mat-button-toggle-appearance-standard {
185184
@include token-utils.use-tokens($_standard-tokens...) {
186-
$divider-color: token-utils.get-token-variable(divider-color);
187-
@include token-utils.create-token-slot(color, text-color);
188-
@include token-utils.create-token-slot(background-color, background-color);
189-
@include token-utils.create-token-slot(font-family, label-text-font);
190-
@include token-utils.create-token-slot(font-size, label-text-size);
191-
@include token-utils.create-token-slot(line-height, label-text-line-height);
192-
@include token-utils.create-token-slot(font-weight, label-text-weight);
193-
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
185+
$divider-color: token-utils.slot(divider-color);
186+
color: token-utils.slot(text-color);
187+
background-color: token-utils.slot(background-color);
188+
font-family: token-utils.slot(label-text-font);
189+
font-size: token-utils.slot(label-text-size);
190+
line-height: token-utils.slot(label-text-line-height);
191+
font-weight: token-utils.slot(label-text-weight);
192+
letter-spacing: token-utils.slot(label-text-tracking);
194193

195194
.mat-button-toggle-group-appearance-standard & + & {
196195
border-left: solid 1px $divider-color;
@@ -208,40 +207,39 @@ $_standard-tokens: (
208207
}
209208

210209
&.mat-button-toggle-checked {
211-
@include token-utils.create-token-slot(color, selected-state-text-color);
212-
@include token-utils.create-token-slot(background-color, selected-state-background-color);
210+
color: token-utils.slot(selected-state-text-color);
211+
background-color: token-utils.slot(selected-state-background-color);
213212
}
214213

215214
&.mat-button-toggle-disabled {
216-
@include token-utils.create-token-slot(color, disabled-state-text-color);
217-
@include token-utils.create-token-slot(background-color, disabled-state-background-color);
215+
color: token-utils.slot(disabled-state-text-color);
216+
background-color: token-utils.slot(disabled-state-background-color);
218217

219218
.mat-pseudo-checkbox {
220219
--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #{
221-
token-utils.get-token-variable(disabled-selected-state-text-color)};
220+
token-utils.slot(disabled-selected-state-text-color)};
222221
}
223222

224223
&.mat-button-toggle-checked {
225-
@include token-utils.create-token-slot(color, disabled-selected-state-text-color);
226-
@include token-utils.create-token-slot(background-color,
227-
disabled-selected-state-background-color);
224+
color: token-utils.slot(disabled-selected-state-text-color);
225+
background-color: token-utils.slot(disabled-selected-state-background-color);
228226
}
229227
}
230228

231229
.mat-button-toggle-focus-overlay {
232-
@include token-utils.create-token-slot(background-color, state-layer-color);
230+
background-color: token-utils.slot(state-layer-color);
233231
}
234232

235233
&:hover .mat-button-toggle-focus-overlay {
236-
@include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
234+
opacity: token-utils.slot(hover-state-layer-opacity);
237235
}
238236

239237
// Similar to components like the checkbox, slide-toggle and radio, we cannot show the focus
240238
// overlay for `.cdk-program-focused` because mouse clicks on the <label> element would be
241239
// always treated as programmatic focus.
242240
// TODO(paul): support `program` as well. See https://github.com/angular/components/issues/9889
243241
&.cdk-keyboard-focused .mat-button-toggle-focus-overlay {
244-
@include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
242+
opacity: token-utils.slot(focus-state-layer-opacity);
245243
}
246244
}
247245

@@ -262,7 +260,7 @@ $_standard-tokens: (
262260
padding: 0 $legacy-padding;
263261

264262
@include token-utils.use-tokens($_legacy-tokens...) {
265-
@include token-utils.create-token-slot(line-height, height);
263+
line-height: token-utils.slot(height);
266264
}
267265

268266
// Prevents IE from shifting the content on click.
@@ -272,7 +270,7 @@ $_standard-tokens: (
272270
padding: 0 $standard-padding;
273271

274272
@include token-utils.use-tokens($_standard-tokens...) {
275-
@include token-utils.create-token-slot(line-height, height);
273+
line-height: token-utils.slot(height);
276274
}
277275
}
278276
}
@@ -291,7 +289,7 @@ $_standard-tokens: (
291289
opacity: 0;
292290

293291
@include token-utils.use-tokens($_legacy-tokens...) {
294-
@include token-utils.create-token-slot(background-color, state-layer-color);
292+
background-color: token-utils.slot(state-layer-color);
295293
}
296294
}
297295

@@ -383,30 +381,30 @@ $_standard-tokens: (
383381
// radius of the button-toggle-group or standalone button-toggle.
384382
@include token-utils.use-tokens($_standard-tokens...) {
385383
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
386-
@include token-utils.create-token-slot(--mat-focus-indicator-border-radius, shape);
384+
--mat-focus-indicator-border-radius: token-utils.slot(shape);
387385
}
388386

389387
.mat-button-toggle-group-appearance-standard:not(.mat-button-toggle-vertical) .mat-button-toggle {
390388
&:last-of-type .mat-button-toggle-button::before {
391-
@include token-utils.create-token-slot(border-top-right-radius, shape);
392-
@include token-utils.create-token-slot(border-bottom-right-radius, shape);
389+
border-top-right-radius: token-utils.slot(shape);
390+
border-bottom-right-radius: token-utils.slot(shape);
393391
}
394392

395393
&:first-of-type .mat-button-toggle-button::before {
396-
@include token-utils.create-token-slot(border-top-left-radius, shape);
397-
@include token-utils.create-token-slot(border-bottom-left-radius, shape);
394+
border-top-left-radius: token-utils.slot(shape);
395+
border-bottom-left-radius: token-utils.slot(shape);
398396
}
399397
}
400398

401399
.mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle {
402400
&:last-of-type .mat-button-toggle-button::before {
403-
@include token-utils.create-token-slot(border-bottom-right-radius, shape);
404-
@include token-utils.create-token-slot(border-bottom-left-radius, shape);
401+
border-bottom-right-radius: token-utils.slot(shape);
402+
border-bottom-left-radius: token-utils.slot(shape);
405403
}
406404

407405
&:first-of-type .mat-button-toggle-button::before {
408-
@include token-utils.create-token-slot(border-top-right-radius, shape);
409-
@include token-utils.create-token-slot(border-top-left-radius, shape);
406+
border-top-right-radius: token-utils.slot(shape);
407+
border-top-left-radius: token-utils.slot(shape);
410408
}
411409
}
412410
}

‎src/material/button/_button-base.scss‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -60,31 +60,31 @@
6060
@mixin mat-private-button-ripple($prefix, $slots) {
6161
@include token-utils.use-tokens($prefix, $slots) {
6262
.mat-ripple-element {
63-
@include token-utils.create-token-slot(background-color, ripple-color);
63+
background-color: token-utils.slot(ripple-color);
6464
}
6565

6666
.mat-mdc-button-persistent-ripple::before {
67-
@include token-utils.create-token-slot(background-color, state-layer-color);
67+
background-color: token-utils.slot(state-layer-color);
6868
}
6969

7070
&.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before {
71-
@include token-utils.create-token-slot(background-color, disabled-state-layer-color);
71+
background-color: token-utils.slot(disabled-state-layer-color);
7272
}
7373

7474
&:hover > .mat-mdc-button-persistent-ripple::before {
75-
@include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
75+
opacity: token-utils.slot(hover-state-layer-opacity);
7676
}
7777

7878
&.cdk-program-focused,
7979
&.cdk-keyboard-focused,
8080
&.mat-mdc-button-disabled-interactive:focus {
8181
> .mat-mdc-button-persistent-ripple::before {
82-
@include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
82+
opacity: token-utils.slot(focus-state-layer-opacity);
8383
}
8484
}
8585

8686
&:active > .mat-mdc-button-persistent-ripple::before {
87-
@include token-utils.create-token-slot(opacity, pressed-state-layer-opacity);
87+
opacity: token-utils.slot(pressed-state-layer-opacity);
8888
}
8989
}
9090
}
@@ -112,7 +112,7 @@
112112
// Adds an elevation shadow to a button.
113113
@mixin mat-private-button-elevation($token-name) {
114114
// MDC outputs a variable that is the same as the token name, but suffixed with `-shadow`.
115-
box-shadow: token-utils.get-token-variable($token-name + '-shadow');
115+
box-shadow: token-utils.slot($token-name + '-shadow');
116116
}
117117

118118
@mixin mat-private-button-touch-target($is-square, $prefix, $slots) {
@@ -132,19 +132,19 @@
132132
}
133133

134134
@include token-utils.use-tokens($prefix, $slots) {
135-
@include token-utils.create-token-slot(display, touch-target-display);
135+
display: token-utils.slot(touch-target-display);
136136
}
137137
}
138138
}
139139

140140
@mixin mat-private-button-horizontal-layout($prefix, $slots, $has-with-icon-padding) {
141141
@include token-utils.use-tokens($prefix, $slots) {
142-
$icon-spacing: token-utils.get-token-variable(icon-spacing, true);
143-
$icon-offset: token-utils.get-token-variable(icon-offset, true);
142+
$icon-spacing: token-utils.slot(icon-spacing, true);
143+
$icon-offset: token-utils.slot(icon-offset, true);
144144

145145
@if ($has-with-icon-padding) {
146146
$with-icon-horizontal-padding:
147-
token-utils.get-token-variable(with-icon-horizontal-padding, true);
147+
token-utils.slot(with-icon-horizontal-padding, true);
148148

149149
// stylelint-disable-next-line selector-class-pattern
150150
&:has(.material-icons, mat-icon, [matButtonIcon]) {

0 commit comments

Comments
 (0)