Skip to content

Commit a969fda

Browse files
asynclizcopybara-github
asyncliz
authored and
copybara-github
committed
fix(text-field): apply suffix-color and icon size tokens
Text field changes: - Fixed suffix color token not applying - Fixed icon size tokens not applying - Remove redundant styles with field changes Field changes: - Added content-type token for inheriting font - Added leading/trailing content color tokens for icons - Update field token values functions to be easier to grok all tokens - Remove container-height token - Update screenshots for new tokens PiperOrigin-RevId: 512652818
1 parent d755d10 commit a969fda

File tree

9 files changed

+507
-393
lines changed

9 files changed

+507
-393
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ Dialog | 🟢 | 🟢 | 🔴
4242
Divider | 🟢 | 🟢 | 🟡
4343
Elevation | 🟢 | 🔴 | 🔴
4444
Focus ring | 🟢 | 🔴 | 🔴
45-
Field | 🟢 | 🟢 | 🔴
45+
Field | 🟢 | 🟢 | 🟡
4646
Icon | 🟢 | 🟢 | 🔴
4747
List | 🟢 | 🟢 | 🟡
4848
Menu | 🟢 | 🟢 | 🟡

‎field/lib/_content.scss‎

Lines changed: 83 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,33 @@ $_enter-delay: $_label-duration - $_visible-duration;
3333
position: relative;
3434
}
3535

36+
.start {
37+
color: var(--_leading-content-color);
38+
}
39+
40+
.end {
41+
color: var(--_trailing-content-color);
42+
}
43+
3644
.start,
3745
.end {
3846
justify-content: center;
3947
}
4048

49+
// TODO(b/239188049): remove when layout tokens are ready
50+
.with-start .start,
51+
.with-end .end {
52+
min-width: 48px;
53+
}
54+
55+
.with-start .start {
56+
margin-inline-end: 4px;
57+
}
58+
59+
.with-end .end {
60+
margin-inline-start: 4px;
61+
}
62+
4163
.middle {
4264
// The container of the field aligns sections by "center". Only the middle
4365
// section opts in to baseline alignment.
@@ -51,14 +73,16 @@ $_enter-delay: $_label-duration - $_visible-duration;
5173
}
5274

5375
.content {
76+
// Content elements provided to the field (such as <input>) may use
77+
// `currentColor` to inherit this property.
78+
color: var(--_content-color);
5479
display: flex;
5580
flex: 1;
81+
// Content elements provided to the field (such as <input>) may inherit font
82+
font: var(--_content-type);
5683
opacity: 0;
5784
transition: opacity $_visible-duration
5885
map.get($_md-sys-motion, 'easing-emphasized');
59-
// Content elements provided to the field (such as <input>) may use
60-
// `currentColor` to inherit this property.
61-
color: var(--_content-color);
6286
}
6387

6488
.no-label .content,
@@ -68,33 +92,83 @@ $_enter-delay: $_label-duration - $_visible-duration;
6892
transition-delay: $_enter-delay;
6993
}
7094

71-
.disabled.no-label .content,
72-
.disabled.focused .content,
73-
.disabled.populated .content {
74-
opacity: var(--_disabled-content-opacity);
75-
}
76-
7795
:hover .content {
7896
color: var(--_hover-content-color);
7997
}
8098

99+
:hover .start {
100+
color: var(--_hover-leading-content-color);
101+
}
102+
103+
:hover .end {
104+
color: var(--_hover-trailing-content-color);
105+
}
106+
81107
.focused .content {
82108
color: var(--_focus-content-color);
83109
}
84110

111+
.focused .start {
112+
color: var(--_focus-leading-content-color);
113+
}
114+
115+
.focused .end {
116+
color: var(--_focus-trailing-content-color);
117+
}
118+
85119
.disabled .content {
86120
color: var(--_disabled-content-color);
87121
}
88122

123+
.disabled.no-label .content,
124+
.disabled.focused .content,
125+
.disabled.populated .content {
126+
opacity: var(--_disabled-content-opacity);
127+
}
128+
129+
.disabled .start {
130+
color: var(--_disabled-leading-content-color);
131+
opacity: var(--_disabled-leading-content-opacity);
132+
}
133+
134+
.disabled .end {
135+
color: var(--_disabled-trailing-content-color);
136+
opacity: var(--_disabled-trailing-content-opacity);
137+
}
138+
89139
.error .content {
90140
color: var(--_error-content-color);
91141
}
92142

143+
.error .start {
144+
color: var(--_error-leading-content-color);
145+
}
146+
147+
.error .end {
148+
color: var(--_error-trailing-content-color);
149+
}
150+
93151
.error:hover .content {
94152
color: var(--_error-hover-content-color);
95153
}
96154

155+
.error:hover .start {
156+
color: var(--_error-hover-leading-content-color);
157+
}
158+
159+
.error:hover .end {
160+
color: var(--_error-hover-trailing-content-color);
161+
}
162+
97163
.error.focused .content {
98164
color: var(--_error-focus-content-color);
99165
}
166+
167+
.error.focused .start {
168+
color: var(--_error-focus-leading-content-color);
169+
}
170+
171+
.error.focused .end {
172+
color: var(--_error-focus-trailing-content-color);
173+
}
100174
}

‎field/lib/_md-comp-filled-field.scss‎

Lines changed: 123 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -11,76 +11,135 @@
1111
// go/keep-sorted end
1212

1313
$_default-deps: (
14-
md-sys-color: tokens.md-sys-color-values-light(),
15-
md-sys-shape: tokens.md-sys-shape-values(),
16-
md-sys-state: tokens.md-sys-state-values(),
17-
md-sys-typescale: tokens.md-sys-typescale-values(),
14+
'md-sys-color': tokens.md-sys-color-values-light(),
15+
'md-sys-shape': tokens.md-sys-shape-values(),
16+
'md-sys-state': tokens.md-sys-state-values(),
17+
'md-sys-typescale': tokens.md-sys-typescale-values(),
1818
);
1919

2020
@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
21-
$text-field-values: tokens.md-comp-filled-text-field-values(
21+
$text-field: tokens.md-comp-filled-text-field-values(
2222
$deps,
2323
$exclude-hardcoded-values
2424
);
25-
// TODO(b/203778922): Remove *-type when type composite tokens are removed
26-
// Remove unused tokens.
27-
$values: map.remove(
28-
$text-field-values,
29-
caret-color,
30-
disabled-input-text-color,
31-
disabled-input-text-opacity,
32-
error-focus-caret-color,
33-
error-focus-input-text-color,
34-
error-hover-input-text-color,
35-
error-input-text-color,
36-
focus-input-text-color,
37-
hover-input-text-color,
38-
input-text-color,
39-
input-text-font,
40-
input-text-line-height,
41-
input-text-size,
42-
input-text-tracking,
43-
input-text-type,
44-
input-text-weight,
45-
input-text-placeholder-color,
46-
input-text-prefix-color,
47-
input-text-suffix-color,
48-
label-text-font,
49-
label-text-line-height,
50-
label-text-size,
51-
label-text-tracking,
52-
label-text-weight,
53-
supporting-text-font,
54-
supporting-text-line-height,
55-
supporting-text-size,
56-
supporting-text-tracking,
57-
supporting-text-weight
58-
);
5925

60-
// Add missing tokens.
61-
$values: map.merge(
62-
$values,
63-
(
64-
container-padding-horizontal: if($exclude-hardcoded-values, null, 16px),
65-
container-padding-vertical: if($exclude-hardcoded-values, null, 16px),
66-
content-color: map.get($text-field-values, input-text-color),
67-
disabled-content-color:
68-
map.get($text-field-values, disabled-input-text-color),
69-
disabled-content-opacity:
70-
map.get($text-field-values, disabled-input-text-opacity),
71-
error-content-color: map.get($text-field-values, error-input-text-color),
72-
error-focus-content-color:
73-
map.get($text-field-values, error-focus-input-text-color),
74-
error-hover-content-color:
75-
map.get($text-field-values, error-hover-input-text-color),
76-
focus-content-color: map.get($text-field-values, focus-input-text-color),
77-
hover-content-color: map.get($text-field-values, hover-input-text-color),
78-
supporting-text-padding: if($exclude-hardcoded-values, null, 16px),
79-
supporting-text-padding-top: if($exclude-hardcoded-values, null, 4px),
80-
with-label-container-padding-vertical:
81-
if($exclude-hardcoded-values, null, 8px),
82-
)
26+
@return (
27+
// go/keep-sorted start
28+
'active-indicator-color': map.get($text-field, 'active-indicator-color'),
29+
'active-indicator-height': map.get($text-field, 'active-indicator-height'),
30+
'container-color': map.get($text-field, 'container-color'),
31+
'container-padding-horizontal': if($exclude-hardcoded-values, null, 16px),
32+
'container-padding-vertical': if($exclude-hardcoded-values, null, 16px),
33+
'container-shape': map.get($text-field, 'container-shape'),
34+
'content-color': map.get($text-field, 'input-text-color'),
35+
'content-type': map.get($text-field, 'input-text-type'),
36+
'disabled-active-indicator-color':
37+
map.get($text-field, 'disabled-active-indicator-color'),
38+
'disabled-active-indicator-height':
39+
map.get($text-field, 'disabled-active-indicator-height'),
40+
'disabled-active-indicator-opacity':
41+
map.get($text-field, 'disabled-active-indicator-opacity'),
42+
'disabled-container-color': map.get($text-field, 'disabled-container-color'),
43+
'disabled-container-opacity':
44+
map.get($text-field, 'disabled-container-opacity'),
45+
'disabled-content-color': map.get($text-field, 'disabled-input-text-color'),
46+
'disabled-content-opacity':
47+
map.get($text-field, 'disabled-input-text-opacity'),
48+
'disabled-label-text-color':
49+
map.get($text-field, 'disabled-label-text-color'),
50+
'disabled-label-text-opacity':
51+
map.get($text-field, 'disabled-label-text-opacity'),
52+
'disabled-leading-content-color':
53+
map.get($text-field, 'disabled-leading-icon-color'),
54+
'disabled-leading-content-opacity':
55+
map.get($text-field, 'disabled-leading-icon-opacity'),
56+
'disabled-supporting-text-color':
57+
map.get($text-field, 'disabled-supporting-text-color'),
58+
'disabled-supporting-text-opacity':
59+
map.get($text-field, 'disabled-supporting-text-opacity'),
60+
'disabled-trailing-content-color':
61+
map.get($text-field, 'disabled-trailing-icon-color'),
62+
'disabled-trailing-content-opacity':
63+
map.get($text-field, 'disabled-trailing-icon-opacity'),
64+
'error-active-indicator-color':
65+
map.get($text-field, 'error-active-indicator-color'),
66+
'error-content-color': map.get($text-field, 'error-input-text-color'),
67+
'error-focus-active-indicator-color':
68+
map.get($text-field, 'error-focus-active-indicator-color'),
69+
'error-focus-content-color':
70+
map.get($text-field, 'error-focus-leading-icon-color'),
71+
'error-focus-label-text-color':
72+
map.get($text-field, 'error-focus-label-text-color'),
73+
'error-focus-leading-content-color':
74+
map.get($text-field, 'error-focus-leading-icon-color'),
75+
'error-focus-supporting-text-color':
76+
map.get($text-field, 'error-focus-supporting-text-color'),
77+
'error-focus-trailing-content-color':
78+
map.get($text-field, 'error-focus-trailing-icon-color'),
79+
'error-hover-active-indicator-color':
80+
map.get($text-field, 'error-hover-active-indicator-color'),
81+
'error-hover-content-color':
82+
map.get($text-field, 'error-hover-input-text-color'),
83+
'error-hover-label-text-color':
84+
map.get($text-field, 'error-hover-label-text-color'),
85+
'error-hover-leading-content-color':
86+
map.get($text-field, 'error-hover-leading-icon-color'),
87+
'error-hover-state-layer-color':
88+
map.get($text-field, 'error-hover-state-layer-color'),
89+
'error-hover-state-layer-opacity':
90+
map.get($text-field, 'error-hover-state-layer-opacity'),
91+
'error-hover-supporting-text-color':
92+
map.get($text-field, 'error-hover-supporting-text-color'),
93+
'error-hover-trailing-content-color':
94+
map.get($text-field, 'error-hover-trailing-icon-color'),
95+
'error-label-text-color': map.get($text-field, 'error-label-text-color'),
96+
'error-leading-content-color':
97+
map.get($text-field, 'error-leading-icon-color'),
98+
'error-supporting-text-color':
99+
map.get($text-field, 'error-supporting-text-color'),
100+
'error-trailing-content-color':
101+
map.get($text-field, 'error-trailing-icon-color'),
102+
'focus-active-indicator-color':
103+
map.get($text-field, 'focus-active-indicator-color'),
104+
'focus-active-indicator-height':
105+
map.get($text-field, 'focus-active-indicator-height'),
106+
'focus-content-color': map.get($text-field, 'focus-input-text-color'),
107+
'focus-label-text-color': map.get($text-field, 'focus-label-text-color'),
108+
'focus-leading-content-color':
109+
map.get($text-field, 'focus-leading-icon-color'),
110+
'focus-supporting-text-color':
111+
map.get($text-field, 'focus-supporting-text-color'),
112+
'focus-trailing-content-color':
113+
map.get($text-field, 'focus-trailing-icon-color'),
114+
'hover-active-indicator-color':
115+
map.get($text-field, 'hover-active-indicator-color'),
116+
'hover-active-indicator-height':
117+
map.get($text-field, 'hover-active-indicator-height'),
118+
'hover-content-color': map.get($text-field, 'hover-input-text-color'),
119+
'hover-label-text-color': map.get($text-field, 'hover-label-text-color'),
120+
'hover-leading-content-color':
121+
map.get($text-field, 'hover-leading-icon-color'),
122+
'hover-state-layer-color': map.get($text-field, 'hover-state-layer-color'),
123+
'hover-state-layer-opacity':
124+
map.get($text-field, 'hover-state-layer-opacity'),
125+
'hover-supporting-text-color':
126+
map.get($text-field, 'hover-supporting-text-color'),
127+
'hover-trailing-content-color':
128+
map.get($text-field, 'hover-trailing-icon-color'),
129+
'label-text-color': map.get($text-field, 'label-text-color'),
130+
'label-text-populated-line-height':
131+
map.get($text-field, 'label-text-populated-line-height'),
132+
'label-text-populated-size':
133+
map.get($text-field, 'label-text-populated-size'),
134+
'label-text-type': map.get($text-field, 'label-text-type'),
135+
'leading-content-color': map.get($text-field, 'leading-icon-color'),
136+
'supporting-text-color': map.get($text-field, 'supporting-text-color'),
137+
'supporting-text-padding': if($exclude-hardcoded-values, null, 16px),
138+
'supporting-text-padding-top': if($exclude-hardcoded-values, null, 4px),
139+
'supporting-text-type': map.get($text-field, 'supporting-text-type'),
140+
'trailing-content-color': map.get($text-field, 'trailing-icon-color'),
141+
'with-label-container-padding-vertical':
142+
if($exclude-hardcoded-values, null, 8px),
143+
// go/keep-sorted end
83144
);
84-
85-
@return $values;
86145
}

0 commit comments

Comments
 (0)