Skip to content

Commit 5b4c067

Browse files
crisbetocrisbeto
committed
refactor(material-experimental/mdc-core): clean up remaining @import usages
Replaces all the remaining `@import` usages with `@use`.
1 parent db6511b commit 5b4c067

Some content is hidden

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

59 files changed

+717
-725
lines changed

‎src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1+
@use '@material/menu-surface/mixins' as mdc-menu-surface;
2+
@use '@material/list/mixins' as mdc-list;
13
@use '../mdc-helpers/mdc-helpers';
24
@use '../../material/core/theming/theming';
3-
@import '@material/menu-surface/mixins.import';
4-
@import '@material/list/mixins.import';
55

66
@mixin color($config-or-theme) {
77
$config: theming.get-color-config($config-or-theme);
88
@include mdc-helpers.mat-using-mdc-theme($config) {
9-
@include mdc-menu-surface-core-styles(mdc-helpers.$mat-theme-styles-query);
10-
@include mdc-list-deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query);
9+
@include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
10+
@include mdc-list.deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query);
1111
}
1212
}
1313

1414
@mixin typography($config-or-theme) {
1515
$config: theming.get-typography-config($config-or-theme);
1616
@include mdc-helpers.mat-using-mdc-typography($config) {
17-
@include mdc-menu-surface-core-styles(mdc-helpers.$mat-typography-styles-query);
17+
@include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
1818

1919
.mat-mdc-autocomplete-panel {
2020
// Note that we include this private mixin, because the public one adds
2121
// a bunch of styles that we aren't using for the autocomplete panel.
22-
@include mdc-list-deprecated-base_(mdc-helpers.$mat-typography-styles-query);
22+
@include mdc-list.deprecated-base_(mdc-helpers.$mat-typography-styles-query);
2323
}
2424
}
2525
}

‎src/material-experimental/mdc-autocomplete/autocomplete.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1+
@use '@material/menu-surface/mixins' as mdc-menu-surface;
2+
@use '@material/list/mixins' as mdc-list;
13
@use '../../cdk/a11y/a11y';
24
@use '../mdc-helpers/mdc-helpers';
3-
@import '@material/menu-surface/mixins.import';
4-
@import '@material/list/mixins.import';
5-
@import '@material/list/variables.import';
65

7-
@include mdc-menu-surface-core-styles($query: structure);
6+
@include mdc-menu-surface.core-styles($query: structure);
87

98
// Note that the `.mdc-menu-surface` is here in order to bump up the specificity
109
// and avoid interference with `mat-menu` which uses the same mixins from MDC.
@@ -19,7 +18,7 @@
1918

2019
// Note that we include this private mixin, because the public
2120
// one adds a bunch of styles that we aren't using for the menu.
22-
@include mdc-list-deprecated-base_($query: structure);
21+
@include mdc-list.deprecated-base_($query: structure);
2322
@include a11y.high-contrast(active, off) {
2423
outline: solid 1px;
2524
}

‎src/material-experimental/mdc-button/_button-theme.scss

Lines changed: 91 additions & 68 deletions
Large diffs are not rendered by default.

‎src/material-experimental/mdc-button/button.scss

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
@use '@material/button/button';
1+
@use '@material/button/button' as mdc-button;
2+
@use '@material/button/variables' as mdc-button-variables;
23
@use '../mdc-helpers/mdc-helpers';
34
@use '../../cdk/a11y/a11y';
45
@use '_button-base';
56

6-
@import '@material/button/mixins.import';
7-
@import '@material/button/variables.import';
8-
@import '@material/ripple/mixins.import';
97

10-
@include mdc-button-without-ripple($query: mdc-helpers.$mat-base-styles-query);
8+
@include mdc-button.without-ripple($query: mdc-helpers.$mat-base-styles-query);
119

1210
.mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
1311
@include button-base.mat-private-button-interactive();
@@ -22,22 +20,22 @@
2220
// mixins will style the icons appropriately.
2321
.mat-mdc-button {
2422
.mat-icon {
25-
@include button.icon();
23+
@include mdc-button.icon();
2624
}
2725
.mdc-button__label + .mat-icon {
28-
@include button.icon-trailing();
26+
@include mdc-button.icon-trailing();
2927
}
3028
}
3129

3230
.mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
3331
// Icons inside contained buttons have different styles due to increased button padding
3432
.mat-icon {
35-
@include button.icon();
36-
@include button.icon-contained();
33+
@include mdc-button.icon();
34+
@include mdc-button.icon-contained();
3735
}
3836

3937
.mdc-button__label + .mat-icon {
40-
@include button.icon-contained-trailing();
38+
@include mdc-button.icon-contained-trailing();
4139
}
4240
}
4341

@@ -68,9 +66,10 @@
6866
// then. See: https://github.com/angular/components/issues/13738
6967
.mat-mdc-outlined-button .mat-mdc-button-ripple,
7068
.mat-mdc-outlined-button .mdc-button__ripple {
71-
top: -$mdc-button-outlined-border-width;
72-
left: -$mdc-button-outlined-border-width;
73-
bottom: -$mdc-button-outlined-border-width;
74-
right: -$mdc-button-outlined-border-width;
69+
$offset: -(mdc-button-variables.$outlined-border-width);
70+
top: $offset;
71+
left: $offset;
72+
bottom: $offset;
73+
right: $offset;
7574
border: none;
7675
}

‎src/material-experimental/mdc-button/fab.scss

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1+
@use '@material/fab' as mdc-fab;
12
@use '../mdc-helpers/mdc-helpers';
23
@use '_button-base';
3-
@import '@material/fab/mixins.import';
4-
@import '@material/fab/variables.import';
5-
@import '@material/button/variables.import';
6-
@import '@material/theme/variables.import';
74

8-
@include mdc-fab-without-ripple($query: mdc-helpers.$mat-base-styles-query);
5+
@include mdc-fab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
96

107
.mat-mdc-fab, .mat-mdc-mini-fab {
118
@include button-base.mat-private-button-interactive();
@@ -26,18 +23,18 @@
2623
// mixin will style the icons appropriately.
2724
/* stylelint-disable-next-line selector-class-pattern */
2825
.mat-icon, .material-icons {
29-
@include mdc-fab-icon_();
26+
@include mdc-fab.icon_();
3027
}
3128
}
3229

3330
.mat-mdc-extended-fab {
34-
@include mdc-fab-extended_();
31+
@include mdc-fab.extended_();
3532

3633
/* stylelint-disable-next-line selector-class-pattern */
3734
.mat-icon, .material-icons {
38-
@include mdc-fab-extended-icon-padding(
39-
$mdc-fab-extended-icon-padding,
40-
$mdc-fab-extended-label-padding
35+
@include mdc-fab.extended-icon-padding(
36+
mdc-fab.$extended-icon-padding,
37+
mdc-fab.$extended-label-padding
4138
);
4239
}
4340

@@ -46,10 +43,10 @@
4643
// uses the same template as button.
4744
/* stylelint-disable-next-line selector-class-pattern */
4845
.mdc-button__label + .mat-icon, .mdc-button__label + .material-icons {
49-
@include mdc-fab-extended-icon-padding(
50-
$mdc-fab-extended-icon-padding,
51-
$mdc-fab-extended-label-padding,
52-
$is-icon-at-end: true
46+
@include mdc-fab.extended-icon-padding(
47+
mdc-fab.$extended-icon-padding,
48+
mdc-fab.$extended-label-padding,
49+
$is-icon-at-end: true
5350
);
5451
}
5552
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
@use '@material/icon-button' as mdc-icon-button;
12
@use '../mdc-helpers/mdc-helpers';
23
@use '_button-base';
3-
@import '@material/icon-button/mixins.import';
44

5-
@include mdc-icon-button-without-ripple($query: mdc-helpers.$mat-base-styles-query);
5+
@include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-base-styles-query);
66

77
.mat-mdc-icon-button {
88
@include button-base.mat-private-button-interactive() {

‎src/material-experimental/mdc-card/_card-theme.scss

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
1+
@use '@material/card' as mdc-card;
2+
@use '@material/typography' as mdc-typography;
3+
@use '@material/theme/theme-color' as mdc-theme-color;
14
@use 'sass:color';
25
@use 'sass:map';
36
@use '../mdc-helpers/mdc-helpers';
47
@use '../../material/core/theming/theming';
5-
@import '@material/card/mixins.import';
6-
@import '@material/theme/functions.import';
7-
@import '@material/card/variables.import';
8-
@import '@material/typography/mixins.import';
98

109
@mixin color($config-or-theme) {
1110
$config: theming.get-color-config($config-or-theme);
1211
$foreground: map.get($config, foreground);
1312
$is-dark-theme: map.get($config, is-dark);
1413

15-
$orig-mdc-card-action-icon-color: $mdc-card-action-icon-color;
16-
$orig-mdc-card-outline-color: $mdc-card-outline-color;
14+
$orig-mdc-card-action-icon-color: mdc-card.$action-icon-color;
15+
$orig-mdc-card-outline-color: mdc-card.$outline-color;
1716

1817
@include mdc-helpers.mat-using-mdc-theme($config) {
19-
$mdc-card-action-icon-color:
20-
rgba(mdc-theme-prop-value(on-surface), mdc-theme-text-emphasis(medium)) !global;
21-
$mdc-card-outline-color:
22-
color.mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !global;
18+
mdc-card.$action-icon-color: rgba(mdc-theme-color.prop-value(on-surface),
19+
mdc-theme-color.text-emphasis(medium));
20+
mdc-card.$outline-color: color.mix(mdc-theme-color.prop-value(on-surface),
21+
mdc-theme-color.prop-value(surface), 12%);
2322

24-
@include mdc-card-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
23+
@include mdc-card.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
2524

2625
// Card subtitles are an Angular Material construct (not MDC), so we explicitly set their
2726
// color to secondary text here.
@@ -30,23 +29,23 @@
3029
}
3130
}
3231

33-
$mdc-card-action-icon-color: $orig-mdc-card-action-icon-color !global;
34-
$mdc-card-outline-color: $orig-mdc-card-outline-color !global;
32+
mdc-card.$action-icon-color: $orig-mdc-card-action-icon-color;
33+
mdc-card.$outline-color: $orig-mdc-card-outline-color;
3534
}
3635

3736
@mixin typography($config-or-theme) {
3837
$config: theming.get-typography-config($config-or-theme);
3938
@include mdc-helpers.mat-using-mdc-typography($config) {
40-
@include mdc-card-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
39+
@include mdc-card.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
4140

4241
// Card subtitles and titles are an Angular Material construct (not MDC), so we explicitly
4342
// set their typographic styles here.
4443
.mat-mdc-card-title {
45-
@include mdc-typography(headline6);
44+
@include mdc-typography.typography(headline6);
4645
}
4746

4847
.mat-mdc-card-subtitle {
49-
@include mdc-typography(subtitle2);
48+
@include mdc-typography.typography(subtitle2);
5049
}
5150
}
5251
}

‎src/material-experimental/mdc-card/card.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
@use '@material/card' as mdc-card;
12
@use '../mdc-helpers/mdc-helpers';
2-
@import '@material/card/mixins.import';
33

44
// TODO(jelbourn): move header and title-group styles to their own files.
55

@@ -10,7 +10,7 @@ $mat-card-header-size: 40px !default;
1010
$mat-card-default-padding: 16px !default;
1111

1212
// Include all MDC card styles except for color and typography.
13-
@include mdc-card-without-ripple($query: mdc-helpers.$mat-base-styles-query);
13+
@include mdc-card.without-ripple($query: mdc-helpers.$mat-base-styles-query);
1414

1515
// Title text and subtitles text within a card. MDC doesn't have pre-made title sections for cards.
1616
// Maintained here for backwards compatibility with the previous generation MatCard.

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

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,33 @@
1-
@use '@material/checkbox/checkbox-theme' as checkbox-theme;
2-
@use '@material/ripple/ripple-theme' as ripple-theme;
1+
@use '@material/checkbox/checkbox' as mdc-checkbox;
2+
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
3+
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
4+
@use '@material/form-field' as mdc-form-field;
5+
@use '@material/theme/theme-color' as mdc-theme-color;
36
@use '@material/theme/theme';
47
@use 'sass:map';
58
@use '../mdc-helpers/mdc-helpers';
69
@use '../../material/core/theming/theming';
710

8-
@import '@material/checkbox/mixins.import';
9-
@import '@material/checkbox/variables.import';
10-
@import '@material/form-field/mixins.import';
11-
@import '@material/ripple/variables.import';
12-
@import '@material/theme/functions.import';
1311

1412
// Mixin that includes the checkbox theme styles with a given palette.
1513
// By default, the MDC checkbox always uses the `secondary` palette.
1614
@mixin private-checkbox-styles-with-color($color) {
17-
@include checkbox-theme.theme(
15+
@include mdc-checkbox-theme.theme(
1816
(
1917
density-scale: null,
20-
checkmark-color: mdc-theme-prop-value(on-#{$color}),
18+
checkmark-color: mdc-theme-color.prop-value(on-#{$color}),
2119
container-checked-color: $color,
2220
container-checked-hover-color: null,
23-
container-disabled-color: rgba(mdc-theme-prop-value(on-surface), 0.38),
24-
outline-color: rgba(mdc-theme-prop-value(on-surface), 0.54),
21+
container-disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38),
22+
outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54),
2523
outline-hover-color: null,
26-
ripple-color: mdc-theme-prop-value(on-surface),
27-
ripple-opacity: ripple-theme.$dark-ink-opacities,
24+
ripple-color: mdc-theme-color.prop-value(on-surface),
25+
ripple-opacity: mdc-ripple-theme.$dark-ink-opacities,
2826
ripple-checked-color: $color,
29-
ripple-checked-opacity: ripple-theme.$dark-ink-opacities,
27+
ripple-checked-opacity: mdc-ripple-theme.$dark-ink-opacities,
3028
)
3129
);
32-
@include _background-focus-indicator-color(mdc-theme-prop-value(on-surface));
30+
@include _background-focus-indicator-color(mdc-theme-color.prop-value(on-surface));
3331
@include _background-focus-indicator-checked-color($color);
3432
}
3533

@@ -57,22 +55,22 @@
5755

5856
// Save original values of MDC global variables. We need to save these so we can restore the
5957
// variables to their original values and prevent unintended side effects from using this mixin.
60-
$orig-mdc-checkbox-border-color: $mdc-checkbox-border-color;
61-
$orig-mdc-checkbox-disabled-color: $mdc-checkbox-disabled-color;
58+
$orig-border-color: mdc-checkbox-theme.$border-color;
59+
$orig-disabled-color: mdc-checkbox-theme.$disabled-color;
6260

6361
@include mdc-helpers.mat-using-mdc-theme($config) {
64-
$mdc-checkbox-border-color: rgba(
65-
mdc-theme-prop-value(on-surface),
62+
mdc-checkbox-theme.$border-color: rgba(
63+
mdc-theme-color.prop-value(on-surface),
6664
0.54
67-
) !global;
68-
$mdc-checkbox-disabled-color: rgba(
69-
mdc-theme-prop-value(on-surface),
65+
);
66+
mdc-checkbox-theme.$disabled-color: rgba(
67+
mdc-theme-color.prop-value(on-surface),
7068
0.26
71-
) !global;
69+
);
7270

7371
.mat-mdc-checkbox {
7472
@include private-checkbox-styles-with-color(primary);
75-
@include mdc-form-field-core-styles($query: mdc-helpers.$mat-theme-styles-query);
73+
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
7674
}
7775

7876
// MDC's checkbox doesn't support a `color` property. We add support for it by adding a CSS
@@ -81,7 +79,7 @@
8179
.mat-mdc-checkbox {
8280
.mat-ripple-element,
8381
.mdc-checkbox__background::before {
84-
background: mdc-theme-prop-value(on-surface);
82+
background: mdc-theme-color.prop-value(on-surface);
8583
}
8684

8785
.mdc-checkbox--selected ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
@@ -107,26 +105,26 @@
107105
}
108106

109107
// Restore original values of MDC global variables.
110-
$mdc-checkbox-border-color: $orig-mdc-checkbox-border-color !global;
111-
$mdc-checkbox-disabled-color: $orig-mdc-checkbox-disabled-color !global;
108+
mdc-checkbox-theme.$border-color: $orig-border-color;
109+
mdc-checkbox-theme.$disabled-color: $orig-disabled-color;
112110
}
113111

114112
@mixin typography($config-or-theme) {
115113
$config: theming.get-typography-config($config-or-theme);
116114
@include mdc-helpers.mat-using-mdc-typography($config) {
117-
@include mdc-checkbox-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
118-
@include mdc-form-field-core-styles($query: mdc-helpers.$mat-typography-styles-query);
115+
@include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
116+
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
119117
}
120118
}
121119

122120
// TODO(b/175233410): Use ripple element to show focus indicator.
123121
@mixin _background-focus-density($density-scale) {
124-
$ripple-size: checkbox-theme.get-ripple-size($density-scale);
125-
$checkbox-padding: ($ripple-size - checkbox-theme.$icon-size) / 2;
122+
$ripple-size: mdc-checkbox-theme.get-ripple-size($density-scale);
123+
$checkbox-padding: ($ripple-size - mdc-checkbox-theme.$icon-size) / 2;
126124

127125
.mdc-checkbox__background::before {
128-
top: -(checkbox-theme.$border-width) - $checkbox-padding;
129-
left: -(checkbox-theme.$border-width) - $checkbox-padding;
126+
top: -(mdc-checkbox-theme.$border-width) - $checkbox-padding;
127+
left: -(mdc-checkbox-theme.$border-width) - $checkbox-padding;
130128
width: $ripple-size;
131129
height: $ripple-size;
132130
}
@@ -135,7 +133,7 @@
135133
@mixin density($config-or-theme) {
136134
$density-scale: theming.get-density-config($config-or-theme);
137135
.mat-mdc-checkbox .mdc-checkbox {
138-
@include mdc-checkbox-density(
136+
@include mdc-checkbox-theme.density(
139137
$density-scale,
140138
$query: mdc-helpers.$mat-base-styles-query
141139
);

0 commit comments

Comments
 (0)