Skip to content

Commit 61a9790

Browse files
crisbetocrisbeto
authored
refactor(material/form-field): switch to tokens theming API (#27548)
Switches the styles coming from MDC to the tokens theming API. There will be a follow-up PR to switch the remaining custom styles.
1 parent f3f65ad commit 61a9790

File tree

6 files changed

+479
-63
lines changed

6 files changed

+479
-63
lines changed

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@use 'sass:map';
2+
@use '../../token-utils';
3+
@use '../../../style/sass-utils';
4+
5+
// The prefix used to generate the fully qualified name for tokens in this file.
6+
$prefix: (mat, form-field);
7+
8+
// Tokens that can't be configured through Angular Material's current theming API,
9+
// but may be in a future version of the theming API.
10+
@function get-unthemable-tokens() {
11+
@return ();
12+
}
13+
14+
// Tokens that can be configured through Angular Material's color theming API.
15+
@function get-color-tokens($config) {
16+
$is-dark: map.get($config, is-dark);
17+
$on-surface: if($is-dark, #fff, #000);
18+
19+
@return (
20+
// MDC has a token for the enabled placeholder, but not for the disabled one.
21+
disabled-input-text-placeholder-color: rgba($on-surface, 0.38),
22+
);
23+
}
24+
25+
// Tokens that can be configured through Angular Material's typography theming API.
26+
@function get-typography-tokens($config) {
27+
@return ();
28+
}
29+
30+
// Tokens that can be configured through Angular Material's density theming API.
31+
@function get-density-tokens($config) {
32+
@return ();
33+
}
34+
35+
// Combines the tokens generated by the above functions into a single map with placeholder values.
36+
// This is used to create token slots.
37+
@function get-token-slots() {
38+
@return sass-utils.deep-merge-all(
39+
get-unthemable-tokens(),
40+
get-color-tokens(token-utils.$placeholder-color-config),
41+
get-typography-tokens(token-utils.$placeholder-typography-config),
42+
get-density-tokens(token-utils.$placeholder-density-config)
43+
);
44+
}

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

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
@use 'sass:color';
2+
@use 'sass:map';
3+
@use 'sass:meta';
4+
@use '../../../theming/theming';
5+
@use '../../../style/sass-utils';
6+
@use '../../../typography/typography-utils';
7+
@use '../../token-utils';
8+
9+
// The prefix used to generate the fully qualified name for tokens in this file.
10+
$prefix: (mdc, filled-text-field);
11+
12+
// Tokens that can't be configured through Angular Material's current theming API,
13+
// but may be in a future version of the theming API.
14+
//
15+
// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
16+
// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
17+
// our CSS.
18+
@function get-unthemable-tokens() {
19+
@return (
20+
active-indicator-height: 1px,
21+
focus-active-indicator-height: 2px,
22+
container-shape: 4px,
23+
24+
// =============================================================================================
25+
// = TOKENS NOT USED IN ANGULAR MATERIAL =
26+
// =============================================================================================
27+
disabled-active-indicator-height: null,
28+
hover-active-indicator-height: null,
29+
disabled-active-indicator-opacity: null,
30+
error-focus-caret-color: null,
31+
error-hover-caret-color: null,
32+
focus-caret-color: null,
33+
hover-caret-color: null,
34+
label-text-populated-line-height: null,
35+
label-text-populated-size: null,
36+
label-text-type: null,
37+
disabled-label-text-opacity: null,
38+
hover-label-text-color: null,
39+
error-hover-label-text-color: null,
40+
supporting-text-color: null,
41+
supporting-text-font: null,
42+
supporting-text-line-height: null,
43+
supporting-text-size: null,
44+
supporting-text-tracking: null,
45+
supporting-text-weight: null,
46+
disabled-supporting-text-color: null,
47+
disabled-supporting-text-opacity: null,
48+
error-focus-supporting-text-color: null,
49+
error-hover-supporting-text-color: null,
50+
error-supporting-text-color: null,
51+
focus-supporting-text-color: null,
52+
hover-supporting-text-color: null,
53+
input-text-prefix-color: null,
54+
container-height: null,
55+
disabled-trailing-icon-color: null,
56+
disabled-trailing-icon-opacity: null,
57+
error-focus-trailing-icon-color: null,
58+
error-hover-trailing-icon-color: null,
59+
error-trailing-icon-color: null,
60+
focus-trailing-icon-color: null,
61+
hover-trailing-icon-color: null,
62+
trailing-icon-color: null,
63+
trailing-icon-size: null,
64+
disabled-leading-icon-color: null,
65+
disabled-leading-icon-opacity: null,
66+
error-focus-leading-icon-color: null,
67+
error-hover-leading-icon-color: null,
68+
error-leading-icon-color: null,
69+
focus-leading-icon-color: null,
70+
hover-leading-icon-color: null,
71+
leading-icon-color: null,
72+
leading-icon-size: null,
73+
input-text-type: null,
74+
input-text-suffix-color: null,
75+
input-text-font: null,
76+
input-text-line-height: null,
77+
input-text-size: null,
78+
input-text-tracking: null,
79+
input-text-weight: null,
80+
error-input-text-color: null,
81+
focus-input-text-color: null,
82+
hover-input-text-color: null,
83+
disabled-input-text-opacity: null,
84+
error-focus-input-text-color: null,
85+
error-hover-input-text-color: null,
86+
disabled-container-opacity: null,
87+
error-hover-state-layer-color: null,
88+
error-hover-state-layer-opacity: null,
89+
hover-state-layer-color: null,
90+
hover-state-layer-opacity: null,
91+
);
92+
}
93+
94+
// Tokens that can be configured through Angular Material's color theming API.
95+
@function get-color-tokens($config) {
96+
$foreground: map.get($config, foreground);
97+
$background: map.get($config, background);
98+
$warn: map.get($config, warn);
99+
$is-dark: map.get($config, is-dark);
100+
$surface: theming.get-color-from-palette($background, card);
101+
$on-surface: if($is-dark, #fff, #000);
102+
$warn-color: theming.get-color-from-palette($warn);
103+
$color-tokens: private-get-color-palette-color-tokens($config, primary);
104+
105+
@return map.merge($color-tokens, (
106+
container-color: _variable-safe-mix($on-surface, $surface, 4%),
107+
disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
108+
109+
label-text-color: rgba($on-surface, 0.6),
110+
disabled-label-text-color: rgba($on-surface, 0.38),
111+
112+
input-text-color: rgba($on-surface, 0.87),
113+
disabled-input-text-color: rgba($on-surface, 0.38),
114+
input-text-placeholder-color: rgba($on-surface, 0.6),
115+
116+
error-focus-label-text-color: $warn-color,
117+
error-label-text-color: $warn-color,
118+
error-caret-color: $warn-color,
119+
120+
active-indicator-color: rgba($on-surface, 0.42),
121+
disabled-active-indicator-color: rgba($on-surface, 0.06),
122+
hover-active-indicator-color: rgba($on-surface, 0.87),
123+
error-active-indicator-color: $warn-color,
124+
error-focus-active-indicator-color: $warn-color,
125+
error-hover-active-indicator-color: $warn-color,
126+
));
127+
}
128+
129+
@function _variable-safe-mix($first-color, $second-color, $amount) {
130+
@if (meta.type-of($first-color) == color and meta.type-of($second-color) == color) {
131+
@return color.mix($first-color, $second-color, $amount);
132+
}
133+
@return $first-color;
134+
}
135+
136+
// Generates the mapping for the properties that change based on the slide toggle color.
137+
@function private-get-color-palette-color-tokens($config, $palette-name) {
138+
$palette: map.get($config, $palette-name);
139+
$palette-color: theming.get-color-from-palette($palette);
140+
141+
@return (
142+
caret-color: $palette-color,
143+
focus-active-indicator-color: $palette-color,
144+
focus-label-text-color: theming.get-color-from-palette($palette, default, 0.87),
145+
);
146+
}
147+
148+
// Tokens that can be configured through Angular Material's typography theming API.
149+
@function get-typography-tokens($config) {
150+
$fallback-font-family: typography-utils.font-family($config);
151+
152+
@return (
153+
label-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
154+
label-text-line-height: typography-utils.line-height($config, body-1),
155+
label-text-size: typography-utils.font-size($config, body-1),
156+
label-text-tracking: typography-utils.letter-spacing($config, body-1),
157+
label-text-weight: typography-utils.font-weight($config, body-1),
158+
);
159+
}
160+
161+
// Tokens that can be configured through Angular Material's density theming API.
162+
@function get-density-tokens($config) {
163+
@return ();
164+
}
165+
166+
// Combines the tokens generated by the above functions into a single map with placeholder values.
167+
// This is used to create token slots.
168+
@function get-token-slots() {
169+
@return sass-utils.deep-merge-all(
170+
get-unthemable-tokens(),
171+
get-color-tokens(token-utils.$placeholder-color-config),
172+
get-typography-tokens(token-utils.$placeholder-typography-config),
173+
get-density-tokens(token-utils.$placeholder-density-config)
174+
);
175+
}

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

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
@use 'sass:map';
2+
@use '../../../theming/theming';
3+
@use '../../../style/sass-utils';
4+
@use '../../../typography/typography-utils';
5+
@use '../../token-utils';
6+
7+
// The prefix used to generate the fully qualified name for tokens in this file.
8+
$prefix: (mdc, outlined-text-field);
9+
10+
// Tokens that can't be configured through Angular Material's current theming API,
11+
// but may be in a future version of the theming API.
12+
//
13+
// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
14+
// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
15+
// our CSS.
16+
@function get-unthemable-tokens() {
17+
@return (
18+
outline-width: 1px,
19+
focus-outline-width: 2px,
20+
container-shape: 4px,
21+
22+
// =============================================================================================
23+
// = TOKENS NOT USED IN ANGULAR MATERIAL =
24+
// =============================================================================================
25+
error-focus-caret-color: null,
26+
error-hover-caret-color: null,
27+
focus-caret-color: null,
28+
hover-caret-color: null,
29+
disabled-outline-opacity: null,
30+
hover-outline-width: null,
31+
disabled-outline-width: null,
32+
label-text-type: null,
33+
label-text-populated-line-height: null,
34+
label-text-populated-size: null,
35+
hover-label-text-color: null,
36+
error-hover-label-text-color: null,
37+
disabled-label-text-opacity: null,
38+
disabled-supporting-text-color: null,
39+
disabled-supporting-text-opacity: null,
40+
error-focus-supporting-text-color: null,
41+
error-hover-supporting-text-color: null,
42+
error-supporting-text-color: null,
43+
focus-supporting-text-color: null,
44+
hover-supporting-text-color: null,
45+
supporting-text-color: null,
46+
supporting-text-font: null,
47+
supporting-text-line-height: null,
48+
supporting-text-size: null,
49+
supporting-text-tracking: null,
50+
supporting-text-type: null,
51+
supporting-text-weight: null,
52+
disabled-leading-icon-color: null,
53+
disabled-leading-icon-opacity: null,
54+
error-focus-leading-icon-color: null,
55+
error-hover-leading-icon-color: null,
56+
error-leading-icon-color: null,
57+
focus-leading-icon-color: null,
58+
hover-leading-icon-color: null,
59+
leading-icon-color: null,
60+
leading-icon-size: null,
61+
disabled-trailing-icon-color: null,
62+
disabled-trailing-icon-opacity: null,
63+
error-focus-trailing-icon-color: null,
64+
error-hover-trailing-icon-color: null,
65+
error-trailing-icon-color: null,
66+
focus-trailing-icon-color: null,
67+
hover-trailing-icon-color: null,
68+
trailing-icon-color: null,
69+
trailing-icon-size: null,
70+
input-text-prefix-color: null,
71+
input-text-type: null,
72+
container-height: null,
73+
input-text-suffix-color: null,
74+
input-text-font: null,
75+
input-text-line-height: null,
76+
input-text-size: null,
77+
input-text-tracking: null,
78+
input-text-weight: null,
79+
disabled-input-text-opacity: null,
80+
error-focus-input-text-color: null,
81+
error-hover-input-text-color: null,
82+
error-input-text-color: null,
83+
focus-input-text-color: null,
84+
hover-input-text-color: null,
85+
);
86+
}
87+
88+
// Tokens that can be configured through Angular Material's color theming API.
89+
@function get-color-tokens($config) {
90+
$foreground: map.get($config, foreground);
91+
$warn: map.get($config, warn);
92+
$is-dark: map.get($config, is-dark);
93+
$on-surface: if($is-dark, #fff, #000);
94+
$warn-color: theming.get-color-from-palette($warn);
95+
$color-tokens: private-get-color-palette-color-tokens($config, primary);
96+
97+
@return map.merge($color-tokens, (
98+
label-text-color: rgba($on-surface, 0.6),
99+
disabled-label-text-color: rgba($on-surface, 0.38),
100+
101+
input-text-color: rgba($on-surface, 0.87),
102+
disabled-input-text-color: rgba($on-surface, 0.38),
103+
input-text-placeholder-color: rgba($on-surface, 0.6),
104+
105+
error-caret-color: $warn-color,
106+
error-focus-label-text-color: $warn-color,
107+
error-label-text-color: $warn-color,
108+
109+
// Outline tokens
110+
outline-color: rgba($on-surface, 0.38),
111+
disabled-outline-color: rgba($on-surface, 0.06),
112+
hover-outline-color: rgba($on-surface, 0.87),
113+
error-focus-outline-color: $warn-color,
114+
error-hover-outline-color: $warn-color,
115+
error-outline-color: $warn-color,
116+
));
117+
}
118+
119+
// Generates the mapping for the properties that change based on the slide toggle color.
120+
@function private-get-color-palette-color-tokens($config, $palette-name) {
121+
$palette: map.get($config, $palette-name);
122+
$palette-color: theming.get-color-from-palette($palette);
123+
124+
@return (
125+
caret-color: $palette-color,
126+
focus-outline-color: $palette-color,
127+
focus-label-text-color: theming.get-color-from-palette($palette, default, 0.87),
128+
);
129+
}
130+
131+
// Tokens that can be configured through Angular Material's typography theming API.
132+
@function get-typography-tokens($config) {
133+
$fallback-font-family: typography-utils.font-family($config);
134+
135+
@return (
136+
label-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
137+
label-text-line-height: typography-utils.line-height($config, body-1),
138+
label-text-size: typography-utils.font-size($config, body-1),
139+
label-text-tracking: typography-utils.letter-spacing($config, body-1),
140+
label-text-weight: typography-utils.font-weight($config, body-1),
141+
);
142+
}
143+
144+
// Tokens that can be configured through Angular Material's density theming API.
145+
@function get-density-tokens($config) {
146+
@return ();
147+
}
148+
149+
// Combines the tokens generated by the above functions into a single map with placeholder values.
150+
// This is used to create token slots.
151+
@function get-token-slots() {
152+
@return sass-utils.deep-merge-all(
153+
get-unthemable-tokens(),
154+
get-color-tokens(token-utils.$placeholder-color-config),
155+
get-typography-tokens(token-utils.$placeholder-typography-config),
156+
get-density-tokens(token-utils.$placeholder-density-config)
157+
);
158+
}

0 commit comments

Comments
 (0)