Skip to content

Commit 78e8d72

Browse files
amysortoamysorto
committed
Revert "refactor(material/form-field): switch color styles to tokens (#27581)"
This reverts commit e8fb85b.
1 parent 830c8b5 commit 78e8d72

11 files changed

+233
-125
lines changed

‎src/material/core/tokens/m2/mat/_form-field.scss

Lines changed: 1 addition & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
@use 'sass:map';
22
@use '../../token-utils';
33
@use '../../../style/sass-utils';
4-
@use '../../../theming/theming';
5-
@use '../../../theming/palette';
64
@use '../../../typography/typography-utils';
75

86
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -16,43 +14,12 @@ $prefix: (mat, form-field);
1614

1715
// Tokens that can be configured through Angular Material's color theming API.
1816
@function get-color-tokens($config) {
19-
$warn: map.get($config, warn);
2017
$is-dark: map.get($config, is-dark);
2118
$on-surface: if($is-dark, #fff, #000);
22-
$color-tokens: private-get-color-palette-color-tokens($config, primary);
2319

24-
@return map.merge($color-tokens, (
20+
@return (
2521
// MDC has a token for the enabled placeholder, but not for the disabled one.
2622
disabled-input-text-placeholder-color: rgba($on-surface, 0.38),
27-
state-layer-color: rgba($on-surface, 0.87),
28-
error-text-color: theming.get-color-from-palette($warn),
29-
30-
// On dark themes we set the native `select` color to some shade of white,
31-
// however the color propagates to all of the `option` elements, which are
32-
// always on a white background inside the dropdown, causing them to blend in.
33-
// Since we can't change background of the dropdown, we need to explicitly
34-
// reset the color of the options to something dark.
35-
select-option-text-color: if($is-dark, palette.$dark-primary-text, inherit),
36-
// Note the spelling of the `GrayText` here which is a system color. See:
37-
// https://developer.mozilla.org/en-US/docs/Web/CSS/system-color
38-
select-disabled-option-text-color: if($is-dark, palette.$dark-disabled-text, GrayText),
39-
40-
// These values are taken from the MDC select implementation:
41-
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/_select-theme.scss
42-
enabled-select-arrow-color: rgba($on-surface, 0.54),
43-
disabled-select-arrow-color: rgba($on-surface, 0.38),
44-
45-
hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
46-
focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
47-
));
48-
}
49-
50-
// Generates the mapping for the properties that change based on the form field color.
51-
@function private-get-color-palette-color-tokens($config, $palette-name) {
52-
$palette: map.get($config, $palette-name);
53-
54-
@return (
55-
focus-select-arrow-color: theming.get-color-from-palette($palette, default, 0.87),
5623
);
5724
}
5825

‎src/material/core/tokens/m2/mdc/_filled-text-field.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ $prefix: (mdc, filled-text-field);
134134
@return $first-color;
135135
}
136136

137-
// Generates the mapping for the properties that change based on the text field color.
137+
// Generates the mapping for the properties that change based on the slide toggle color.
138138
@function private-get-color-palette-color-tokens($config, $palette-name) {
139139
$palette: map.get($config, $palette-name);
140140
$palette-color: theming.get-color-from-palette($palette);

‎src/material/core/tokens/m2/mdc/_outlined-text-field.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ $prefix: (mdc, outlined-text-field);
117117
));
118118
}
119119

120-
// Generates the mapping for the properties that change based on the text field color.
120+
// Generates the mapping for the properties that change based on the slide toggle color.
121121
@function private-get-color-palette-color-tokens($config, $palette-name) {
122122
$palette: map.get($config, $palette-name);
123123
$palette-color: theming.get-color-from-palette($palette);

‎src/material/form-field/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ sass_library(
3131
srcs = [
3232
"_form-field-theme.import.scss",
3333
"_form-field-theme.scss",
34+
"_mdc-text-field-theme-variable-refresh.scss",
3435
],
3536
deps = [
3637
":form_field_partials",

‎src/material/form-field/_form-field-focus-overlay.scss

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
2-
@use '../core/tokens/token-utils';
1+
@use '@material/ripple/functions' as mdc-ripple-functions;
2+
@use '@material/textfield' as mdc-textfield;
33
@use '../core/style/layout-common';
44

55
// MDC text-field uses `@material/ripple` in order to show a focus and hover effect for
@@ -13,19 +13,24 @@
1313
.mat-mdc-form-field-focus-overlay {
1414
@include layout-common.fill;
1515
opacity: 0;
16-
pointer-events: none; // Make sure we don't block click on the prefix/suffix.
16+
// Make sure we don't block click on the prefix/suffix.
17+
pointer-events: none;
18+
}
19+
}
20+
21+
@mixin private-form-field-focus-overlay-color() {
22+
$focus-opacity: mdc-ripple-functions.states-opacity(mdc-textfield.$ink-color, focus);
23+
$hover-opacity: mdc-ripple-functions.states-opacity(mdc-textfield.$ink-color, hover);
1724

18-
@include token-utils.use-tokens(
19-
tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()) {
20-
@include token-utils.create-token-slot(background-color, state-layer-color);
25+
.mat-mdc-form-field-focus-overlay {
26+
background-color: mdc-textfield.$ink-color;
27+
}
2128

22-
.mat-mdc-form-field:hover & {
23-
@include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
24-
}
29+
.mat-mdc-form-field:hover .mat-mdc-form-field-focus-overlay {
30+
opacity: $hover-opacity;
31+
}
2532

26-
.mat-mdc-form-field.mat-focused & {
27-
@include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
28-
}
29-
}
33+
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay {
34+
opacity: $focus-opacity;
3035
}
3136
}

‎src/material/form-field/_form-field-native-select.scss

Lines changed: 67 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
@use 'sass:map';
12
@use 'sass:math';
2-
@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
3-
@use '../core/tokens/token-utils';
3+
@use '@material/theme/theme-color' as mdc-theme-color;
4+
@use '../core/theming/palette';
5+
@use '../core/mdc-helpers/mdc-helpers';
46

57
// Width of the Material Design form-field select arrow.
68
$mat-form-field-select-arrow-width: 10px;
@@ -10,8 +12,6 @@ $mat-form-field-select-arrow-height: 5px;
1012
// that the absolute positioned arrow does not overlap the select content.
1113
$mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-width + 5px;
1214

13-
$_tokens: tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots();
14-
1515
// Mixin that creates styles for native select controls in a form-field.
1616
@mixin private-form-field-native-select() {
1717
// Remove the native select down arrow and ensure that the native appearance
@@ -30,18 +30,6 @@ $_tokens: tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()
3030
&:not(:disabled) {
3131
cursor: pointer;
3232
}
33-
34-
&:not(.mat-mdc-native-select-inline) {
35-
@include token-utils.use-tokens($_tokens...) {
36-
option {
37-
@include token-utils.create-token-slot(color, select-option-text-color);
38-
}
39-
40-
option:disabled {
41-
@include token-utils.create-token-slot(color, select-disabled-option-text-color);
42-
}
43-
}
44-
}
4533
}
4634

4735
// Native select elements with the `matInput` directive should have Material Design
@@ -64,26 +52,12 @@ $_tokens: tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()
6452
// Make the arrow non-clickable so the user can click on the form control under it.
6553
pointer-events: none;
6654

67-
@include token-utils.use-tokens($_tokens...) {
68-
@include token-utils.create-token-slot(color, enabled-select-arrow-color);
69-
}
70-
7155
[dir='rtl'] & {
7256
right: auto;
7357
left: 0;
7458
}
7559
}
7660

77-
@include token-utils.use-tokens($_tokens...) {
78-
&.mat-focused .mat-mdc-form-field-infix::after {
79-
@include token-utils.create-token-slot(color, focus-select-arrow-color);
80-
}
81-
82-
&.mat-form-field-disabled .mat-mdc-form-field-infix::after {
83-
@include token-utils.create-token-slot(color, disabled-select-arrow-color);
84-
}
85-
}
86-
8761
// Add padding on the end of the native select so that the content does not
8862
// overlap with the Material Design arrow.
8963
.mat-mdc-form-field-input-control {
@@ -95,3 +69,66 @@ $_tokens: tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()
9569
}
9670
}
9771
}
72+
73+
// Gets the color to use for some text that is highlighted while a select has focus.
74+
@function _get-focused-arrow-color($palette) {
75+
@return rgba(mdc-theme-color.prop-value($palette), 0.87);
76+
}
77+
78+
@mixin private-form-field-native-select-color($config) {
79+
@include mdc-helpers.using-mdc-theme($config) {
80+
// These values are taken from the MDC select implementation:
81+
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/_select-theme.scss
82+
$dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
83+
$disabled-dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
84+
85+
select.mat-mdc-form-field-input-control:not(.mat-mdc-native-select-inline) {
86+
// On dark themes we set the native `select` color to some shade of white,
87+
// however the color propagates to all of the `option` elements, which are
88+
// always on a white background inside the dropdown, causing them to blend in.
89+
// Since we can't change background of the dropdown, we need to explicitly
90+
// reset the color of the options to something dark.
91+
@if (map.get($config, is-dark)) {
92+
option {
93+
color: palette.$dark-primary-text;
94+
}
95+
96+
option:disabled {
97+
color: palette.$dark-disabled-text;
98+
}
99+
}
100+
}
101+
102+
.mat-mdc-form-field-type-mat-native-select {
103+
.mat-mdc-form-field-infix::after {
104+
color: $dropdown-icon-color;
105+
}
106+
107+
&.mat-focused {
108+
&.mat-primary {
109+
.mat-mdc-form-field-infix::after {
110+
color: _get-focused-arrow-color(primary);
111+
}
112+
}
113+
114+
&.mat-accent {
115+
.mat-mdc-form-field-infix::after {
116+
color: _get-focused-arrow-color(secondary);
117+
}
118+
}
119+
120+
&.mat-warn {
121+
.mat-mdc-form-field-infix::after {
122+
color: _get-focused-arrow-color(error);
123+
}
124+
}
125+
}
126+
127+
&.mat-form-field-disabled {
128+
.mat-mdc-form-field-infix::after {
129+
color: $disabled-dropdown-icon-color;
130+
}
131+
}
132+
}
133+
}
134+
}

‎src/material/form-field/_form-field-subscript.scss

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '@material/textfield' as mdc-textfield;
2+
@use '@material/theme/theme' as mdc-theme;
13
@use '@material/typography' as mdc-typography;
24
@use '@material/textfield/variables' as mdc-textfield-variables;
35

@@ -56,11 +58,13 @@
5658
// Single error message displayed beneath the form field underline.
5759
.mat-mdc-form-field-error {
5860
display: block;
61+
}
62+
}
5963

60-
@include token-utils.use-tokens(tokens-mat-form-field.$prefix,
61-
tokens-mat-form-field.get-token-slots()) {
62-
@include token-utils.create-token-slot(color, error-text-color);
63-
}
64+
@mixin private-form-field-subscript-color() {
65+
// MDC does not have built-in error treatment.
66+
.mat-mdc-form-field-error {
67+
@include mdc-theme.prop(color, mdc-textfield.$error);
6468
}
6569

6670
// The subscript wrapper has a minimum height to avoid that the form-field

‎src/material/form-field/_form-field-theme.scss

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,14 @@
66
@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
77
@use '../core/theming/theming';
88
@use '../core/typography/typography';
9+
@use '../core/mdc-helpers/mdc-helpers';
910
@use '../core/style/sass-utils';
1011
@use '../core/tokens/token-utils';
1112
@use './form-field-density';
13+
@use './form-field-subscript';
14+
@use './form-field-focus-overlay';
15+
@use './form-field-native-select';
16+
@use './mdc-text-field-theme-variable-refresh';
1217

1318
@mixin color($config-or-theme) {
1419
$config: theming.get-color-config($config-or-theme);
@@ -22,22 +27,50 @@
2227
tokens-mat-form-field.get-color-tokens($config));
2328
}
2429

25-
.mat-mdc-form-field.mat-accent {
26-
@include mdc-filled-text-field-theme.theme(
27-
tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($config, accent));
28-
@include mdc-outlined-text-field-theme.theme(
29-
tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($config, accent));
30-
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
31-
tokens-mat-form-field.private-get-color-palette-color-tokens($config, accent));
32-
}
30+
@include mdc-helpers.using-mdc-theme($config) {
31+
@include mdc-text-field-theme-variable-refresh.private-text-field-refresh-theme-variables() {
32+
@include form-field-subscript.private-form-field-subscript-color();
33+
@include form-field-focus-overlay.private-form-field-focus-overlay-color();
34+
@include form-field-native-select.private-form-field-native-select-color($config);
3335

34-
.mat-mdc-form-field.mat-warn {
35-
@include mdc-filled-text-field-theme.theme(
36-
tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($config, warn));
37-
@include mdc-outlined-text-field-theme.theme(
38-
tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($config, warn));
39-
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
40-
tokens-mat-form-field.private-get-color-palette-color-tokens($config, warn));
36+
.mat-mdc-form-field.mat-accent {
37+
@include mdc-filled-text-field-theme.theme(
38+
tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($config, accent));
39+
@include mdc-outlined-text-field-theme.theme(
40+
tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($config, accent));
41+
}
42+
43+
.mat-mdc-form-field.mat-warn {
44+
@include mdc-filled-text-field-theme.theme(
45+
tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($config, warn));
46+
@include mdc-outlined-text-field-theme.theme(
47+
tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($config, warn));
48+
}
49+
50+
// This fixes an issue where the notch appears to be thicker than the rest of the outline when
51+
// zoomed in on Chrome. The border inconsistency seems to be some kind of rendering artifact
52+
// that arises from a combination of the fact that the notch contains text, while the leading
53+
// and trailing outline do not, combined with the fact that the border is semi-transparent.
54+
// Experimentally, I discovered that adding a transparent left border fixes the inconsistency.
55+
// Note: class name is repeated to achieve sufficient specificity over the various MDC states.
56+
// (hover, focus, etc.)
57+
// TODO(mmalerba): port this fix into MDC
58+
// TODO(crisbeto): move this into the structural styles
59+
.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
60+
&.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
61+
border-left: 1px solid transparent;
62+
}
63+
}
64+
65+
[dir='rtl'] {
66+
.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
67+
&.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
68+
border-left: none;
69+
border-right: 1px solid transparent;
70+
}
71+
}
72+
}
73+
}
4174
}
4275
}
4376

‎src/material/form-field/_mdc-text-field-structure-overrides.scss

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -154,24 +154,4 @@
154154
content: none;
155155
}
156156

157-
// This fixes an issue where the notch appears to be thicker than the rest of the outline when
158-
// zoomed in on Chrome. The border inconsistency seems to be some kind of rendering artifact
159-
// that arises from a combination of the fact that the notch contains text, while the leading
160-
// and trailing outline do not, combined with the fact that the border is semi-transparent.
161-
// Experimentally, I discovered that adding a transparent left border fixes the inconsistency.
162-
// Note: class name is repeated to achieve sufficient specificity over the various MDC states.
163-
// (hover, focus, etc.)
164-
// TODO(mmalerba): port this fix into MDC
165-
.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
166-
&.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
167-
border-left: 1px solid transparent;
168-
}
169-
}
170-
171-
[dir='rtl'] .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
172-
&.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
173-
border-left: none;
174-
border-right: 1px solid transparent;
175-
}
176-
}
177157
}

0 commit comments

Comments
 (0)