Skip to content

Commit edadf8b

Browse files
crisbetocrisbeto
authored
refactor(material-experimental/mdc-core): clean up remaining @import usages (#22045)
Replaces all the remaining `@import` usages with `@use`.
1 parent 6230560 commit edadf8b

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

+705
-713
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: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,31 @@
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
@use '../../material/core/ripple/ripple';
811

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

1513
// Mixin that includes the checkbox theme styles with a given palette.
1614
// By default, the MDC checkbox always uses the `secondary` palette.
1715
@mixin private-checkbox-styles-with-color($color) {
18-
@include checkbox-theme.theme(
16+
@include mdc-checkbox-theme.theme(
1917
(
2018
density-scale: null,
21-
checkmark-color: mdc-theme-prop-value(on-#{$color}),
19+
checkmark-color: mdc-theme-color.prop-value(on-#{$color}),
2220
container-checked-color: $color,
2321
container-checked-hover-color: null,
24-
container-disabled-color: rgba(mdc-theme-prop-value(on-surface), 0.38),
25-
outline-color: rgba(mdc-theme-prop-value(on-surface), 0.54),
22+
container-disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38),
23+
outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54),
2624
outline-hover-color: null,
27-
ripple-color: mdc-theme-prop-value(on-surface),
28-
ripple-opacity: ripple-theme.$dark-ink-opacities,
25+
ripple-color: mdc-theme-color.prop-value(on-surface),
26+
ripple-opacity: mdc-ripple-theme.$dark-ink-opacities,
2927
ripple-checked-color: $color,
30-
ripple-checked-opacity: ripple-theme.$dark-ink-opacities,
28+
ripple-checked-opacity: mdc-ripple-theme.$dark-ink-opacities,
3129
)
3230
);
3331
}
@@ -58,22 +56,22 @@
5856

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

6462
@include mdc-helpers.mat-using-mdc-theme($config) {
65-
$mdc-checkbox-border-color: rgba(
66-
mdc-theme-prop-value(on-surface),
63+
mdc-checkbox-theme.$border-color: rgba(
64+
mdc-theme-color.prop-value(on-surface),
6765
0.54
68-
) !global;
69-
$mdc-checkbox-disabled-color: rgba(
70-
mdc-theme-prop-value(on-surface),
66+
);
67+
mdc-checkbox-theme.$disabled-color: rgba(
68+
mdc-theme-color.prop-value(on-surface),
7169
0.26
72-
) !global;
70+
);
7371

7472
.mat-mdc-checkbox {
7573
@include private-checkbox-styles-with-color(primary);
76-
@include mdc-form-field-core-styles($query: mdc-helpers.$mat-theme-styles-query);
74+
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
7775
@include ripple.theme((
7876
foreground: (
7977
base: mdc-theme-prop-value(on-surface)
@@ -105,22 +103,22 @@
105103
}
106104

107105
// Restore original values of MDC global variables.
108-
$mdc-checkbox-border-color: $orig-mdc-checkbox-border-color !global;
109-
$mdc-checkbox-disabled-color: $orig-mdc-checkbox-disabled-color !global;
106+
mdc-checkbox-theme.$border-color: $orig-border-color;
107+
mdc-checkbox-theme.$disabled-color: $orig-disabled-color;
110108
}
111109

112110
@mixin typography($config-or-theme) {
113111
$config: theming.get-typography-config($config-or-theme);
114112
@include mdc-helpers.mat-using-mdc-typography($config) {
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);
113+
@include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
114+
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
117115
}
118116
}
119117

120118
@mixin density($config-or-theme) {
121119
$density-scale: theming.get-density-config($config-or-theme);
122120
.mat-mdc-checkbox .mdc-checkbox {
123-
@include mdc-checkbox-density(
121+
@include mdc-checkbox-theme.density(
124122
$density-scale,
125123
$query: mdc-helpers.$mat-base-styles-query
126124
);

0 commit comments

Comments
 (0)