Skip to content

Commit 7a7434a

Browse files
mmalerbammalerba
authored
feat(material-experimental/theming): add M3 form-field & input support (#28121)
1 parent 5bbad71 commit 7a7434a

File tree

7 files changed

+181
-61
lines changed

7 files changed

+181
-61
lines changed

‎src/dev-app/theme-m3.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ $dark-theme: matx.define-theme(map.set($m3-base-config, color, theme-type, dark)
3838
html {
3939
@include mat.card-theme($light-theme);
4040
@include mat.checkbox-theme($light-theme);
41+
@include mat.form-field-theme($light-theme);
42+
@include mat.input-theme($light-theme);
4143
@include mat.progress-bar-theme($light-theme);
4244
@include mat.progress-spinner-theme($light-theme);
4345
@include mat.radio-theme($light-theme);
@@ -62,6 +64,8 @@ html {
6264

6365
@include mat.card-color($dark-theme);
6466
@include mat.checkbox-color($dark-theme);
67+
@include mat.form-field-color($dark-theme);
68+
@include mat.input-color($dark-theme);
6569
@include mat.progress-bar-color($dark-theme);
6670
@include mat.progress-spinner-color($dark-theme);
6771
@include mat.radio-color($dark-theme);
@@ -85,6 +89,8 @@ html {
8589
.demo-density-#{$scale} {
8690
@include mat.card-density($scale-theme);
8791
@include mat.checkbox-density($scale-theme);
92+
@include mat.form-field-density($scale-theme);
93+
@include mat.input-density($scale-theme);
8894
@include mat.progress-bar-density($scale-theme);
8995
@include mat.progress-spinner-density($scale-theme);
9096
@include mat.radio-density($scale-theme);

‎src/material-experimental/theming/_custom-tokens.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,33 @@
3535
);
3636
}
3737

38+
/// Generates custom tokens for the mat-form-field.
39+
/// @param {Map} $systems The MDC system tokens
40+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
41+
/// @return {Map} A set of custom tokens for the mat-form-field
42+
@function form-field($systems, $exclude-hardcoded) {
43+
@return mat.private-merge-all(
44+
_generate-typography-tokens($systems, container-text, body-large),
45+
_generate-typography-tokens($systems, subscript-text, body-small),
46+
(
47+
disabled-input-text-placeholder-color: mat.private-safe-color-change(
48+
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
49+
state-layer-color: map.get($systems, md-sys-color, on-surface),
50+
error-text-color: map.get($systems, md-sys-color, error),
51+
select-option-text-color: map.get($systems, md-ref-palette, neutral10),
52+
select-disabled-option-text-color: mat.private-safe-color-change(
53+
map.get($systems, md-ref-palette, neutral10), $alpha: 0.38),
54+
enabled-select-arrow-color: map.get($systems, md-sys-color, on-surface-variant),
55+
disabled-select-arrow-color: mat.private-safe-color-change(
56+
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
57+
hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
58+
focus-state-layer-opacity: _hardcode(0, $exclude-hardcoded),
59+
focus-select-arrow-color: map.get($systems, md-sys-color, primary),
60+
outlined-label-text-populated-size: map.get($systems, md-sys-typeface, body-large-size),
61+
)
62+
);
63+
}
64+
3865
/// Generates custom tokens for the mat-toolbar.
3966
/// @param {Map} $systems The MDC system tokens
4067
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

‎src/material-experimental/theming/_m3-density.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ $_density-tokens: (
2020
state-layer-size: (40px, 36px, 32px, 28px),
2121
),
2222
(mdc, elevated-card): (),
23+
(mdc, filled-text-field): (),
2324
(mdc, outlined-card): (),
25+
(mdc, outlined-text-field): (),
2426
(mdc, slider): (),
2527
(mdc, snackbar): (),
2628
(mdc, plain-tooltip): (),
@@ -37,6 +39,7 @@ $_density-tokens: (
3739

3840
// Custom Angular Material tokens
3941
(mat, card): (),
42+
(mat, form-fild): (),
4043
(mat, toolbar): (
4144
standard-height: (64px, 60px, 56px, 52px),
4245
mobile-height: (56px, 52px, 48px, 44px),

‎src/material-experimental/theming/_m3-tokens.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,11 +183,21 @@
183183
mdc-tokens.md-comp-elevated-card-values($systems, $exclude-hardcoded),
184184
$token-slots
185185
),
186+
_namespace-tokens(
187+
(mdc, filled-text-field),
188+
mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded),
189+
$token-slots
190+
),
186191
_namespace-tokens(
187192
(mdc, outlined-card),
188193
mdc-tokens.md-comp-outlined-card-values($systems, $exclude-hardcoded),
189194
$token-slots
190195
),
196+
_namespace-tokens(
197+
(mdc, outlined-text-field),
198+
mdc-tokens.md-comp-outlined-text-field-values($systems, $exclude-hardcoded),
199+
$token-slots
200+
),
191201
_namespace-tokens(
192202
(mdc, slider),
193203
mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded),
@@ -240,6 +250,11 @@
240250
custom-tokens.card($systems, $exclude-hardcoded),
241251
$token-slots
242252
),
253+
_namespace-tokens(
254+
(mat, form-field),
255+
custom-tokens.form-field($systems, $exclude-hardcoded),
256+
$token-slots
257+
),
243258
_namespace-tokens(
244259
(mat, toolbar),
245260
custom-tokens.toolbar($systems, $exclude-hardcoded),

‎src/material/core/tokens/m2/_index.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@use 'sass:meta';
33
@use '../../style/sass-utils';
44
@use './mat/card' as tokens-mat-card;
5+
@use './mat/form-field' as tokens-mat-form-field;
56
@use './mat/radio' as tokens-mat-radio;
67
@use './mat/ripple' as tokens-mat-ripple;
78
@use './mat/slide-toggle' as tokens-mat-slide-toggle;
@@ -18,10 +19,12 @@
1819
@use './mdc/circular-progress' as tokens-mdc-circular-progress;
1920
@use './mdc/dialog' as tokens-mdc-dialog;
2021
@use './mdc/elevated-card' as tokens-mdc-elevated-card;
22+
@use './mdc/filled-text-field' as tokens-mdc-filled-text-field;
2123
@use './mdc/icon-button' as tokens-mdc-icon-button;
2224
@use './mdc/linear-progress' as tokens-mdc-linear-progress;
2325
@use './mdc/list' as tokens-mdc-list;
2426
@use './mdc/outlined-card' as tokens-mdc-outlined-card;
27+
@use './mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
2528
@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
2629
@use './mdc/radio' as tokens-mdc-radio;
2730
@use './mdc/slider' as tokens-mdc-slider;
@@ -74,6 +77,7 @@
7477
@function m2-tokens-from-theme($theme) {
7578
@return sass-utils.deep-merge-all(
7679
_get-tokens-for-module($theme, tokens-mat-card),
80+
_get-tokens-for-module($theme, tokens-mat-form-field),
7781
_get-tokens-for-module($theme, tokens-mat-radio),
7882
_get-tokens-for-module($theme, tokens-mat-ripple),
7983
_get-tokens-for-module($theme, tokens-mat-slide-toggle),
@@ -90,10 +94,12 @@
9094
_get-tokens-for-module($theme, tokens-mdc-circular-progress),
9195
_get-tokens-for-module($theme, tokens-mdc-dialog),
9296
_get-tokens-for-module($theme, tokens-mdc-elevated-card),
97+
_get-tokens-for-module($theme, tokens-mdc-filled-text-field),
9398
_get-tokens-for-module($theme, tokens-mdc-icon-button),
9499
_get-tokens-for-module($theme, tokens-mdc-linear-progress),
95100
_get-tokens-for-module($theme, tokens-mdc-list),
96101
_get-tokens-for-module($theme, tokens-mdc-outlined-card),
102+
_get-tokens-for-module($theme, tokens-mdc-outlined-text-field),
97103
_get-tokens-for-module($theme, tokens-mdc-plain-tooltip),
98104
_get-tokens-for-module($theme, tokens-mdc-radio),
99105
_get-tokens-for-module($theme, tokens-mdc-slider),

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

Lines changed: 85 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
@use 'sass:map';
12
@use '@material/textfield/filled-text-field-theme' as mdc-filled-text-field-theme;
23
@use '@material/textfield/outlined-text-field-theme' as mdc-outlined-text-field-theme;
3-
44
@use '../core/tokens/m2/mdc/filled-text-field' as tokens-mdc-filled-text-field;
55
@use '../core/tokens/m2/mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
66
@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
@@ -12,74 +12,110 @@
1212
@use './form-field-density';
1313

1414
@mixin base($theme) {
15-
@include sass-utils.current-selector-or-root() {
16-
@include token-utils.create-token-values(
17-
tokens-mdc-filled-text-field.$prefix,
18-
tokens-mdc-filled-text-field.get-unthemable-tokens());
19-
@include token-utils.create-token-values(
20-
tokens-mdc-outlined-text-field.$prefix,
21-
tokens-mdc-outlined-text-field.get-unthemable-tokens());
22-
@include token-utils.create-token-values(
23-
tokens-mat-form-field.$prefix,
24-
tokens-mat-form-field.get-unthemable-tokens());
15+
@if inspection.get-theme-version($theme) == 1 {
16+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
17+
}
18+
@else {
19+
@include sass-utils.current-selector-or-root() {
20+
@include token-utils.create-token-values(
21+
tokens-mdc-filled-text-field.$prefix,
22+
tokens-mdc-filled-text-field.get-unthemable-tokens());
23+
@include token-utils.create-token-values(
24+
tokens-mdc-outlined-text-field.$prefix,
25+
tokens-mdc-outlined-text-field.get-unthemable-tokens());
26+
@include token-utils.create-token-values(
27+
tokens-mat-form-field.$prefix,
28+
tokens-mat-form-field.get-unthemable-tokens());
29+
}
2530
}
2631
}
2732

2833
@mixin color($theme) {
29-
@include sass-utils.current-selector-or-root() {
30-
@include mdc-filled-text-field-theme.theme(
31-
tokens-mdc-filled-text-field.get-color-tokens($theme));
32-
@include mdc-outlined-text-field-theme.theme(
33-
tokens-mdc-outlined-text-field.get-color-tokens($theme));
34-
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
35-
tokens-mat-form-field.get-color-tokens($theme));
34+
@if inspection.get-theme-version($theme) == 1 {
35+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
3636
}
37+
@else {
38+
@include sass-utils.current-selector-or-root() {
39+
@include mdc-filled-text-field-theme.theme(
40+
tokens-mdc-filled-text-field.get-color-tokens($theme));
41+
@include mdc-outlined-text-field-theme.theme(
42+
tokens-mdc-outlined-text-field.get-color-tokens($theme));
43+
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
44+
tokens-mat-form-field.get-color-tokens($theme));
45+
}
3746

38-
.mat-mdc-form-field.mat-accent {
39-
@include mdc-filled-text-field-theme.theme(
40-
tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent));
41-
@include mdc-outlined-text-field-theme.theme(
42-
tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent));
43-
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
44-
tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent));
45-
}
47+
.mat-mdc-form-field.mat-accent {
48+
@include mdc-filled-text-field-theme.theme(
49+
tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent));
50+
@include mdc-outlined-text-field-theme.theme(
51+
tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent));
52+
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
53+
tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent));
54+
}
4655

47-
.mat-mdc-form-field.mat-warn {
48-
@include mdc-filled-text-field-theme.theme(
49-
tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn));
50-
@include mdc-outlined-text-field-theme.theme(
51-
tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn));
52-
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
53-
tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn));
56+
.mat-mdc-form-field.mat-warn {
57+
@include mdc-filled-text-field-theme.theme(
58+
tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn));
59+
@include mdc-outlined-text-field-theme.theme(
60+
tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn));
61+
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
62+
tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn));
63+
}
5464
}
5565
}
5666

5767
@mixin typography($theme) {
58-
@include sass-utils.current-selector-or-root() {
59-
@include mdc-filled-text-field-theme.theme(
60-
tokens-mdc-filled-text-field.get-typography-tokens($theme));
61-
@include mdc-outlined-text-field-theme.theme(
62-
tokens-mdc-outlined-text-field.get-typography-tokens($theme));
63-
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
64-
tokens-mat-form-field.get-typography-tokens($theme));
68+
@if inspection.get-theme-version($theme) == 1 {
69+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
70+
}
71+
@else {
72+
@include sass-utils.current-selector-or-root() {
73+
@include mdc-filled-text-field-theme.theme(
74+
tokens-mdc-filled-text-field.get-typography-tokens($theme));
75+
@include mdc-outlined-text-field-theme.theme(
76+
tokens-mdc-outlined-text-field.get-typography-tokens($theme));
77+
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
78+
tokens-mat-form-field.get-typography-tokens($theme));
79+
}
6580
}
6681
}
6782

6883
@mixin density($theme) {
69-
@include form-field-density.private-form-field-density($theme);
84+
@if inspection.get-theme-version($theme) == 1 {
85+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
86+
}
87+
@else {
88+
@include form-field-density.private-form-field-density($theme);
89+
}
7090
}
7191

7292
@mixin theme($theme) {
7393
@include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field') {
74-
@include base($theme);
75-
@if inspection.theme-has($theme, color) {
76-
@include color($theme);
94+
@if inspection.get-theme-version($theme) == 1 {
95+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
7796
}
78-
@if inspection.theme-has($theme, density) {
79-
@include density($theme);
80-
}
81-
@if inspection.theme-has($theme, typography) {
82-
@include typography($theme);
97+
@else {
98+
@include base($theme);
99+
@if inspection.theme-has($theme, color) {
100+
@include color($theme);
101+
}
102+
@if inspection.theme-has($theme, density) {
103+
@include density($theme);
104+
}
105+
@if inspection.theme-has($theme, typography) {
106+
@include typography($theme);
107+
}
83108
}
84109
}
85110
}
111+
112+
@mixin _theme-from-tokens($tokens) {
113+
@if ($tokens != ()) {
114+
@include mdc-filled-text-field-theme.theme(
115+
map.get($tokens, tokens-mdc-filled-text-field.$prefix));
116+
@include mdc-outlined-text-field-theme.theme(
117+
map.get($tokens, tokens-mdc-outlined-text-field.$prefix));
118+
@include token-utils.create-token-values(
119+
tokens-mat-form-field.$prefix, map.get($tokens, tokens-mat-form-field.$prefix));
120+
}
121+
}

‎src/material/input/_input-theme.scss

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,52 @@
22
@use '../core/theming/inspection';
33
@use '../core/typography/typography';
44

5-
@mixin base($theme) {}
5+
@mixin base($theme) {
6+
@if inspection.get-theme-version($theme) == 1 {
7+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
8+
}
9+
@else {}
10+
}
611

7-
@mixin color($theme) {}
12+
@mixin color($theme) {
13+
@if inspection.get-theme-version($theme) == 1 {
14+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
15+
}
16+
@else {}
17+
}
818

9-
@mixin typography($theme) {}
19+
@mixin typography($theme) {
20+
@if inspection.get-theme-version($theme) == 1 {
21+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
22+
}
23+
@else {}
24+
}
1025

11-
@mixin density($theme) {}
26+
@mixin density($theme) {
27+
@if inspection.get-theme-version($theme) == 1 {
28+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
29+
}
30+
@else {}
31+
}
1232

1333
@mixin theme($theme) {
1434
@include theming.private-check-duplicate-theme-styles($theme, 'mat-input') {
15-
@include base($theme);
16-
@if inspection.theme-has($theme, color) {
17-
@include color($theme);
35+
@if inspection.get-theme-version($theme) == 1 {
36+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
1837
}
19-
@if inspection.theme-has($theme, density) {
20-
@include density($theme);
21-
}
22-
@if inspection.theme-has($theme, typography) {
23-
@include typography($theme);
38+
@else {
39+
@include base($theme);
40+
@if inspection.theme-has($theme, color) {
41+
@include color($theme);
42+
}
43+
@if inspection.theme-has($theme, density) {
44+
@include density($theme);
45+
}
46+
@if inspection.theme-has($theme, typography) {
47+
@include typography($theme);
48+
}
2449
}
2550
}
2651
}
52+
53+
@mixin _theme-from-tokens($tokens) {}

0 commit comments

Comments
 (0)