Skip to content

Commit faf4b16

Browse files
authored
refactor(material-experimental/mdc-select): remove dependency on @material/select (#24148)
Cleans up the MDC-based select's theme by removing the dependency on `@material/select` and the variable overrides since we weren't including any of MDC's mixins.
1 parent 557ac0d commit faf4b16

File tree

1 file changed

+6
-27
lines changed

1 file changed

+6
-27
lines changed

src/material-experimental/mdc-select/_select-theme.scss

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@use '@material/theme/theme-color' as mdc-theme-color;
22
@use '@material/menu-surface' as mdc-menu-surface;
33
@use '@material/list/evolution-mixins' as mdc-list;
4-
@use '@material/select' as mdc-select;
54
@use '@material/typography' as mdc-typography;
65
@use '../mdc-helpers/mdc-helpers';
76
@use '../../material/core/typography/typography';
@@ -15,38 +14,25 @@
1514
@mixin color($config-or-theme) {
1615
$config: theming.get-color-config($config-or-theme);
1716

18-
// Save original values of MDC global variables. We need to save these so we can restore the
19-
// variables to their original values and prevent unintended side effects from using this mixin.
20-
$orig-ink-color: mdc-select.$ink-color;
21-
$orig-label-color: mdc-select.$label-color;
22-
$orig-disabled-label-color: mdc-select.$disabled-label-color;
23-
$orig-dropdown-icon-color: mdc-select.$dropdown-icon-color;
24-
$orig-disabled-dropdown-icon-color: mdc-select.$disabled-dropdown-icon-color;
25-
2617
@include mdc-helpers.mat-using-mdc-theme($config) {
27-
mdc-select.$ink-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
28-
mdc-select.$label-color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
29-
mdc-select.$disabled-label-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
30-
mdc-select.$dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
31-
mdc-select.$disabled-dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
32-
18+
$disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
3319
@include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
3420
@include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
3521

3622
.mat-mdc-select-value {
37-
color: mdc-select.$ink-color;
23+
color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
3824
}
3925

4026
.mat-mdc-select-placeholder {
41-
color: mdc-select.$label-color;
27+
color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
4228
}
4329

4430
.mat-mdc-select-disabled .mat-mdc-select-value {
45-
color: mdc-select.$disabled-label-color;
31+
color: $disabled-color;
4632
}
4733

4834
.mat-mdc-select-arrow {
49-
color: mdc-select.$dropdown-icon-color;
35+
color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
5036
}
5137

5238
.mat-mdc-form-field {
@@ -69,17 +55,10 @@
6955
}
7056

7157
.mat-mdc-select.mat-mdc-select-disabled .mat-mdc-select-arrow {
72-
color: mdc-select.$disabled-dropdown-icon-color;
58+
color: $disabled-color;
7359
}
7460
}
7561
}
76-
77-
// Restore original values of MDC global variables.
78-
mdc-select.$ink-color: $orig-ink-color;
79-
mdc-select.$label-color: $orig-label-color;
80-
mdc-select.$disabled-label-color: $orig-disabled-label-color;
81-
mdc-select.$dropdown-icon-color: $orig-dropdown-icon-color;
82-
mdc-select.$disabled-dropdown-icon-color: $orig-disabled-dropdown-icon-color;
8362
}
8463

8564
@mixin typography($config-or-theme) {

0 commit comments

Comments
 (0)