Skip to content

Commit 01711b1

Browse files
crisbetocrisbeto
authoredAug 20, 2024··
fix(multiple): account for mixed declarations in latest Sass version (#29596)
Fixes a ton of warnings that showed up in the latest version of Sass as a result of https://sass-lang.com/documentation/breaking-changes/mixed-decls/. BREAKING CHANGE: * In order for Material to be compatible with [recent changes in Sass](https://sass-lang.com/documentation/breaking-changes/mixed-decls/) and upcoming changes in the CSS standard, tokens are now emitted in-place, rather the being hoisted to the top of the selector. As a result, some token overrides might not apply anymore. This is relevant primarily for the cases like `@include mat.button-theme($theme); --mat-button-color: red;`. It can be resolved by wrapping the overrides with `& {}`, for example `@include mat.button-theme($theme); & { --mat-button-color: red; }`. Fixes #29591.
·
20.0.0-next.519.0.0-next.1
1 parent 357f6f2 commit 01711b1

29 files changed

+272
-214
lines changed
 

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@
160160
"requirejs": "^2.3.6",
161161
"rollup": "^2.66.1",
162162
"rollup-plugin-sourcemaps": "^0.6.3",
163-
"sass": "^1.68.0",
163+
"sass": "^1.77.8",
164164
"selenium-webdriver": "^3.6.0",
165165
"semver": "^7.3.5",
166166
"send": "^0.17.2",

‎src/material/badge/badge.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,6 @@ $large-size: $default-size + 6;
6363
box-sizing: border-box;
6464
pointer-events: none;
6565

66-
@include cdk.high-contrast(active, off) {
67-
outline: solid 1px;
68-
border-radius: 0;
69-
}
70-
7166
@include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
7267
@include token-utils.create-token-slot(background-color, background-color);
7368
@include token-utils.create-token-slot(color, text-color);
@@ -101,6 +96,11 @@ $large-size: $default-size + 6;
10196
right: 100%;
10297
}
10398
}
99+
100+
@include cdk.high-contrast(active, off) {
101+
outline: solid 1px;
102+
border-radius: 0;
103+
}
104104
}
105105

106106
.mat-badge-disabled .mat-badge-content {

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ $_standard-tokens: (
2828

2929
.mat-button-toggle-standalone,
3030
.mat-button-toggle-group {
31-
@include elevation.overridable-elevation(2);
3231
position: relative;
3332
display: inline-flex;
3433
flex-direction: row;
@@ -43,6 +42,8 @@ $_standard-tokens: (
4342
@include token-utils.create-token-slot(border-radius, shape);
4443
}
4544

45+
@include elevation.overridable-elevation(2);
46+
4647
@include cdk.high-contrast(active, off) {
4748
outline: solid 1px;
4849
}

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

-2
Original file line numberDiff line numberDiff line change
@@ -141,8 +141,6 @@
141141
@include token-utils.use-tokens($prefix, $slots) {
142142
$icon-spacing: token-utils.get-token-variable(icon-spacing, true);
143143
$icon-offset: token-utils.get-token-variable(icon-offset, true);
144-
$horizontal-padding: token-utils.get-token-variable(horizontal-padding, true);
145-
padding: 0 $horizontal-padding;
146144

147145
@if ($has-with-icon-padding) {
148146
$with-icon-horizontal-padding:

‎src/material/button/button.scss

+61-27
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,9 @@
6363
.mat-mdc-button {
6464
$mat-text-button-slots: tokens-mat-text-button.get-token-slots();
6565

66-
@include button-base.mat-private-button-horizontal-layout(tokens-mat-text-button.$prefix,
67-
$mat-text-button-slots, true);
68-
@include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix,
69-
$mat-text-button-slots);
70-
@include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix,
71-
$mat-text-button-slots);
66+
@include token-utils.use-tokens(tokens-mat-text-button.$prefix, $mat-text-button-slots) {
67+
padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)};
68+
}
7269

7370
@include token-utils.use-tokens(
7471
tokens-mdc-text-button.$prefix,
@@ -95,19 +92,19 @@
9592
@include token-utils.create-token-slot(color, disabled-label-text-color);
9693
}
9794
}
95+
96+
@include button-base.mat-private-button-horizontal-layout(tokens-mat-text-button.$prefix,
97+
$mat-text-button-slots, true);
98+
@include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix,
99+
$mat-text-button-slots);
100+
@include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix,
101+
$mat-text-button-slots);
98102
}
99103

100104
.mat-mdc-unelevated-button {
101105
$mat-filled-button-slots: tokens-mat-filled-button.get-token-slots();
102106
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
103107

104-
@include button-base.mat-private-button-horizontal-layout(tokens-mat-filled-button.$prefix,
105-
$mat-filled-button-slots, false);
106-
@include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix,
107-
$mat-filled-button-slots);
108-
@include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix,
109-
$mat-filled-button-slots);
110-
111108
@include token-utils.use-tokens(
112109
tokens-mdc-filled-button.$prefix,
113110
tokens-mdc-filled-button.get-token-slots()
@@ -118,7 +115,23 @@
118115
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
119116
@include token-utils.create-token-slot(text-transform, label-text-transform);
120117
@include token-utils.create-token-slot(font-weight, label-text-weight);
118+
}
119+
120+
@include token-utils.use-tokens(tokens-mat-filled-button.$prefix, $mat-filled-button-slots) {
121+
padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)};
122+
}
123+
124+
@include button-base.mat-private-button-horizontal-layout(tokens-mat-filled-button.$prefix,
125+
$mat-filled-button-slots, false);
126+
@include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix,
127+
$mat-filled-button-slots);
128+
@include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix,
129+
$mat-filled-button-slots);
121130

131+
@include token-utils.use-tokens(
132+
tokens-mdc-filled-button.$prefix,
133+
tokens-mdc-filled-button.get-token-slots()
134+
) {
122135
&:not(:disabled) {
123136
@include token-utils.create-token-slot(color, label-text-color);
124137
@include token-utils.create-token-slot(background-color, container-color);
@@ -141,13 +154,6 @@
141154
$mat-protected-button-slots: tokens-mat-protected-button.get-token-slots();
142155
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
143156

144-
@include button-base.mat-private-button-horizontal-layout(tokens-mat-protected-button.$prefix,
145-
$mat-protected-button-slots, false);
146-
@include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
147-
$mat-protected-button-slots);
148-
@include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix,
149-
$mat-protected-button-slots);
150-
151157
@include token-utils.use-tokens(
152158
tokens-mdc-protected-button.$prefix,
153159
tokens-mdc-protected-button.get-token-slots()
@@ -159,7 +165,26 @@
159165
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
160166
@include token-utils.create-token-slot(text-transform, label-text-transform);
161167
@include token-utils.create-token-slot(font-weight, label-text-weight);
168+
}
169+
170+
@include token-utils.use-tokens(
171+
tokens-mat-protected-button.$prefix,
172+
$mat-protected-button-slots
173+
) {
174+
padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)};
175+
}
176+
177+
@include button-base.mat-private-button-horizontal-layout(tokens-mat-protected-button.$prefix,
178+
$mat-protected-button-slots, false);
179+
@include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
180+
$mat-protected-button-slots);
181+
@include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix,
182+
$mat-protected-button-slots);
162183

184+
@include token-utils.use-tokens(
185+
tokens-mdc-protected-button.$prefix,
186+
tokens-mdc-protected-button.get-token-slots()
187+
) {
163188
&:not(:disabled) {
164189
@include token-utils.create-token-slot(color, label-text-color);
165190
@include token-utils.create-token-slot(background-color, container-color);
@@ -199,13 +224,6 @@
199224
border-style: solid;
200225
transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1);
201226

202-
@include button-base.mat-private-button-horizontal-layout(tokens-mat-outlined-button.$prefix,
203-
$mat-outlined-button-slots, false);
204-
@include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix,
205-
$mat-outlined-button-slots);
206-
@include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix,
207-
$mat-outlined-button-slots);
208-
209227
@include token-utils.use-tokens(
210228
tokens-mdc-outlined-button.$prefix,
211229
tokens-mdc-outlined-button.get-token-slots()
@@ -218,7 +236,23 @@
218236
@include token-utils.create-token-slot(font-weight, label-text-weight);
219237
@include token-utils.create-token-slot(border-radius, container-shape);
220238
@include token-utils.create-token-slot(border-width, outline-width);
239+
}
240+
241+
@include token-utils.use-tokens(tokens-mat-outlined-button.$prefix, $mat-outlined-button-slots) {
242+
padding: 0 #{token-utils.get-token-variable(horizontal-padding, true)};
243+
}
221244

245+
@include button-base.mat-private-button-horizontal-layout(tokens-mat-outlined-button.$prefix,
246+
$mat-outlined-button-slots, false);
247+
@include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix,
248+
$mat-outlined-button-slots);
249+
@include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix,
250+
$mat-outlined-button-slots);
251+
252+
@include token-utils.use-tokens(
253+
tokens-mdc-outlined-button.$prefix,
254+
tokens-mdc-outlined-button.get-token-slots()
255+
) {
222256
&:not(:disabled) {
223257
@include token-utils.create-token-slot(color, label-text-color);
224258
@include token-utils.create-token-slot(border-color, outline-color);

‎src/material/button/fab.scss

+15-14
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@
1010
@use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small;
1111

1212
.mat-mdc-fab-base {
13-
@include button-base.mat-private-button-interactive();
14-
@include style-private.private-animation-noop();
1513
@include vendor-prefixes.user-select(none);
1614
position: relative;
1715
display: inline-flex;
@@ -32,6 +30,9 @@
3230
transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
3331
flex-shrink: 0; // Prevent the button from shrinking since it's always supposed to be a circle.
3432

33+
@include button-base.mat-private-button-interactive();
34+
@include style-private.private-animation-noop();
35+
3536
&::before {
3637
position: absolute;
3738
box-sizing: border-box;
@@ -114,9 +115,6 @@
114115
}
115116

116117
@mixin _fab-structure($mdc-tokens, $mat-tokens) {
117-
@include button-base.mat-private-button-touch-target(true, $mat-tokens...);
118-
@include button-base.mat-private-button-ripple($mat-tokens...);
119-
120118
@include token-utils.use-tokens($mdc-tokens...) {
121119
@include token-utils.create-token-slot(background-color, container-color);
122120
@include token-utils.create-token-slot(border-radius, container-shape);
@@ -134,6 +132,9 @@
134132
@include token-utils.create-token-slot(background-color, disabled-state-container-color);
135133
}
136134
}
135+
136+
@include button-base.mat-private-button-touch-target(true, $mat-tokens...);
137+
@include button-base.mat-private-button-ripple($mat-tokens...);
137138
}
138139

139140
.mat-mdc-fab {
@@ -167,15 +168,6 @@
167168
max-width: 100%;
168169
line-height: normal;
169170

170-
@include _fab-elevation($mdc-tokens);
171-
172-
@include button-base.mat-private-button-disabled {
173-
// Necessary for interactive disabled buttons.
174-
&, &:focus {
175-
box-shadow: none;
176-
}
177-
}
178-
179171
@include token-utils.use-tokens($mdc-tokens...) {
180172
@include token-utils.create-token-slot(height, container-height);
181173
@include token-utils.create-token-slot(border-radius, container-shape);
@@ -185,6 +177,15 @@
185177
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
186178
}
187179

180+
@include _fab-elevation($mdc-tokens);
181+
182+
@include button-base.mat-private-button-disabled {
183+
// Necessary for interactive disabled buttons.
184+
&, &:focus {
185+
box-shadow: none;
186+
}
187+
}
188+
188189
// stylelint-disable selector-class-pattern
189190
// For Extended FAB with text label followed by icon.
190191
// We are checking for the a button class because white this is a FAB it

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

+10-7
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,17 @@
4949
// the unused `.mdc-button__icon` class. Explicitly set the font-size here.
5050
@include token-utils.create-token-slot(font-size, icon-size);
5151
@include token-utils.create-token-slot(color, icon-color);
52+
}
5253

54+
@include button-base.mat-private-button-interactive();
55+
@include button-base.mat-private-button-ripple(tokens-mat-icon-button.$prefix,
56+
tokens-mat-icon-button.get-token-slots());
57+
@include button-base.mat-private-button-touch-target(true, tokens-mat-icon-button.$prefix,
58+
tokens-mat-icon-button.get-token-slots());
59+
@include private.private-animation-noop();
60+
61+
@include token-utils.use-tokens(
62+
tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) {
5363
@include button-base.mat-private-button-disabled {
5464
@include token-utils.create-token-slot(color, disabled-icon-color);
5565
};
@@ -62,13 +72,6 @@
6272
}
6373
}
6474

65-
@include button-base.mat-private-button-interactive();
66-
@include button-base.mat-private-button-ripple(tokens-mat-icon-button.$prefix,
67-
tokens-mat-icon-button.get-token-slots());
68-
@include button-base.mat-private-button-touch-target(true, tokens-mat-icon-button.$prefix,
69-
tokens-mat-icon-button.get-token-slots());
70-
@include private.private-animation-noop();
71-
7275
.mat-mdc-button-persistent-ripple {
7376
border-radius: 50%;
7477
}

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -175,10 +175,10 @@ $_fallback-size: 40px;
175175
// Always apply the color since the element becomes `opacity: 0`
176176
// when unchecked. This makes the animation look better.
177177
@include token-utils.create-token-slot(color, selected-checkmark-color);
178+
}
178179

179-
@include cdk.high-contrast(active, off) {
180-
color: CanvasText;
181-
}
180+
@include cdk.high-contrast(active, off) {
181+
color: CanvasText;
182182
}
183183
}
184184

@@ -214,15 +214,15 @@ $_fallback-size: 40px;
214214
transition: opacity $_transition-duration $_exit-curve,
215215
transform $_transition-duration $_exit-curve;
216216

217-
@include cdk.high-contrast(active, off) {
218-
margin: 0 1px;
219-
}
220-
221217
@include token-utils.use-tokens($prefix, $slots) {
222218
// Always apply the color since the element becomes `opacity: 0`
223219
// when unchecked. This makes the animation look better.
224220
@include token-utils.create-token-slot(border-color, selected-checkmark-color);
225221
}
222+
223+
@include cdk.high-contrast(active, off) {
224+
margin: 0 1px;
225+
}
226226
}
227227

228228
@include token-utils.use-tokens($prefix, $slots) {

‎src/material/checkbox/checkbox.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
@include checkbox-common.checkbox-structure(true);
77

88
.mat-mdc-checkbox {
9-
@include checkbox-common.checkbox-noop-animations;
10-
119
// The host node defaults to `display: inline`, we have to change it in order for margins to work.
1210
display: inline-block;
1311
// Avoids issues in some CSS grid layouts (see #25153).
1412
position: relative;
1513
// Disable the browser's tap highlight since we indicate state with the ripple instead.
1614
-webkit-tap-highlight-color: transparent;
1715

16+
@include checkbox-common.checkbox-noop-animations;
17+
1818
// Clicking the label toggles the checkbox, but MDC does not include any styles that inform the
1919
// user of this. Therefore we add the pointer cursor on top of MDC's styles.
2020
label {

‎src/material/chips/chip.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -642,6 +642,11 @@ $_avatar-trailing-padding: 8px;
642642
// MDC centers the text, but we have a lot of internal customers who have it at the start.
643643
text-align: left;
644644

645+
// Give the text label a higher z-index than the focus overlay to ensure that the focus overlay
646+
// does not affect the color of the text. Material spec requires state layer to not interfere with
647+
// text color.
648+
z-index: 1;
649+
645650
[dir='rtl'] & {
646651
text-align: right;
647652
}
@@ -671,11 +676,6 @@ $_avatar-trailing-padding: 8px;
671676
$offset: calc(#{$border-width} + 2px);
672677
margin: calc(#{$offset} * -1);
673678
}
674-
675-
// Give the text label a higher z-index than the focus overlay to ensure that the focus overlay
676-
// does not affect the color of the text. Material spec requires state layer to not interfere with
677-
// text color.
678-
z-index: 1;
679679
}
680680

681681
.mat-mdc-chip-remove {

0 commit comments

Comments
 (0)
Please sign in to comment.