Skip to content

Commit 27111eb

Browse files
devversionjelbourn
devversion
authored and
jelbourn
committed
feat(material-experimental/mdc-form-field): support theming through feature targeting (#18265)
1 parent f43e3e8 commit 27111eb

File tree

4 files changed

+100
-6
lines changed

4 files changed

+100
-6
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,10 @@ ng_module(
3232

3333
sass_library(
3434
name = "mdc_form_field_scss_lib",
35-
srcs = ["_mdc-form-field.scss"],
35+
srcs = [
36+
"_mdc-form-field.scss",
37+
"_mdc-text-field-theme-variable-refresh.scss",
38+
],
3639
deps = [
3740
":form_field_partials",
3841
"//src/cdk/a11y:a11y_scss_lib",

‎src/material-experimental/mdc-form-field/_mdc-form-field.scss

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,40 @@
1-
@import '@material/textfield/variables.import';
1+
@use '@material/ripple/mixins' as mdc-ripple;
2+
3+
@import '@material/textfield/mixins.import';
24
@import '../mdc-helpers/mdc-helpers';
35
@import 'form-field-subscript';
46
@import 'form-field-bottom-line';
7+
@import 'mdc-text-field-theme-variable-refresh';
58

69
@mixin mat-form-field-theme-mdc($theme) {
710
@include mat-using-mdc-theme($theme) {
8-
@include _mat-form-field-subscript-theme();
9-
@include _mat-form-field-bottom-line-theme();
11+
@include _mdc-text-field-refresh-theme-variables() {
12+
@include mdc-text-field-core-styles($query: $mat-theme-styles-query);
13+
@include mdc-floating-label-core-styles($query: $mat-theme-styles-query);
14+
@include mdc-text-field-core-styles($query: $mat-theme-styles-query);
15+
@include _mat-form-field-subscript-theme();
16+
@include _mat-form-field-bottom-line-theme();
17+
18+
// MDC text-field intends to hide the ripples in the outline appearance. The styles for
19+
// this collide with other styles from the structure styles. This is because the ripples
20+
// are made invisible by using the `mdc-ripple.states-base-color` mixin. The mixin makes the
21+
// ripples `transparent` by generating `content: none` instead. This means that the style
22+
// will collide with the default `content` for ripple pseudo elements. Depending on how
23+
// themes and component styles are inserted, the ripples will not hide properly. To ensure
24+
// that the ripples are not rendered in the outline appearance, we copy the mixin call but
25+
// increase the specificity.
26+
.mat-mdc-text-field-wrapper.mdc-text-field--outlined {
27+
@include mdc-ripple.states-base-color(transparent);
28+
}
29+
}
1030
}
1131
}
1232

1333
@mixin mat-form-field-typography-mdc($config) {
1434
@include mat-using-mdc-typography($config) {
35+
@include mdc-text-field-core-styles($query: $mat-typography-styles-query);
36+
@include mdc-floating-label-core-styles($query: $mat-typography-styles-query);
37+
@include mdc-text-field-core-styles($query: $mat-typography-styles-query);
1538
@include _mat-form-field-subscript-typography($config);
1639
}
1740
}

‎src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@use 'sass:color';
2+
@use '@material/theme/variables' as theme-variables;
3+
4+
@import '@material/textfield/variables.import';
5+
6+
// Mixin that refreshes the MDC text-field theming variables. This mixin should be used when
7+
// the base MDC theming variables have been explicitly updated, but the component specific
8+
// theming-based variables are still based on the old MDC base theming variables. The mixin
9+
// restores the previous values for the variables to avoid unexpected global side effects.
10+
@mixin _mdc-text-field-refresh-theme-variables() {
11+
$_mdc-text-field-disabled-border-border: $mdc-text-field-disabled-border-border;
12+
$mdc-text-field-disabled-border: rgba(theme-variables.prop-value(on-surface), 0.06) !global;
13+
$_mdc-text-field-bottom-line-idle: $mdc-text-field-bottom-line-idle;
14+
$mdc-text-field-bottom-line-idle: rgba(theme-variables.prop-value(on-surface), 0.42) !global;
15+
$_mdc-text-field-label: $mdc-text-field-label;
16+
$mdc-text-field-label: rgba(theme-variables.prop-value(on-surface), 0.6) !global;
17+
$_mdc-text-field-ink-color: $mdc-text-field-ink-color;
18+
$mdc-text-field-ink-color: rgba(theme-variables.prop-value(on-surface), 0.87) !global;
19+
$_mdc-text-field-focused-label-color: $mdc-text-field-focused-label-color;
20+
$mdc-text-field-focused-label-color: rgba(theme-variables.prop-value(primary), 0.87) !global;
21+
$_mdc-text-field-placeholder-ink-color: $mdc-text-field-placeholder-ink-color;
22+
$mdc-text-field-placeholder-ink-color: rgba(theme-variables.prop-value(on-surface), 0.54) !global;
23+
$_mdc-text-field-disabled-label-color: $mdc-text-field-disabled-label-color;
24+
$mdc-text-field-disabled-label-color: rgba(theme-variables.prop-value(on-surface), 0.38) !global;
25+
$_mdc-text-field-disabled-ink-color: $mdc-text-field-disabled-ink-color;
26+
$mdc-text-field-disabled-ink-color: rgba(theme-variables.prop-value(on-surface), 0.38) !global;
27+
$_mdc-text-field-disabled-placeholder-ink-color: $mdc-text-field-disabled-placeholder-ink-color;
28+
$mdc-text-field-disabled-placeholder-ink-color:
29+
rgba(theme-variables.prop-value(on-surface), 0.38) !global;
30+
$_mdc-text-field-background: $mdc-text-field-background;
31+
$mdc-text-field-background: color.mix(
32+
theme-variables.prop-value(on-surface), theme-variables.prop-value(surface), 4%) !global;
33+
$_mdc-text-field-disabled-background: $mdc-text-field-disabled-background;
34+
$mdc-text-field-disabled-background: color.mix(
35+
theme-variables.prop-value(on-surface), theme-variables.prop-value(surface), 2%) !global;
36+
$_mdc-text-field-outlined-idle-border: $mdc-text-field-outlined-idle-border;
37+
$mdc-text-field-outlined-idle-border: rgba(theme-variables.prop-value(on-surface), 0.38) !global;
38+
$_mdc-text-field-outlined-disabled-border: $mdc-text-field-outlined-disabled-border;
39+
$mdc-text-field-outlined-disabled-border:
40+
rgba(theme-variables.prop-value(on-surface), 0.06) !global;
41+
$_mdc-text-field-outlined-hover-border: $mdc-text-field-outlined-hover-border;
42+
$mdc-text-field-outlined-hover-border: rgba(theme-variables.prop-value(on-surface), 0.87) !global;
43+
44+
// The content will be generated with the refreshed MDC text-field theming variables.
45+
@content;
46+
47+
// Reset all variables to ensure that this mixin does not cause unexpected side effects.
48+
$mdc-text-field-disabled-border-border: $_mdc-text-field-disabled-border-border !global;
49+
$mdc-text-field-bottom-line-idle: $_mdc-text-field-bottom-line-idle !global;
50+
$mdc-text-field-label: $_mdc-text-field-label !global;
51+
$mdc-text-field-ink-color: $_mdc-text-field-ink-color !global;
52+
$mdc-text-field-focused-label-color: $_mdc-text-field-focused-label-color !global;
53+
$mdc-text-field-placeholder-ink-color: $_mdc-text-field-placeholder-ink-color !global;
54+
$mdc-text-field-disabled-label-color: $_mdc-text-field-disabled-label-color !global;
55+
$mdc-text-field-disabled-ink-color: $_mdc-text-field-disabled-ink-color !global;
56+
$mdc-text-field-disabled-placeholder-ink-color:
57+
$_mdc-text-field-disabled-placeholder-ink-color !global;
58+
$mdc-text-field-background: $_mdc-text-field-background !global;
59+
$mdc-text-field-disabled-background: $_mdc-text-field-disabled-background !global;
60+
$mdc-text-field-outlined-idle-border: $_mdc-text-field-outlined-idle-border !global;
61+
$mdc-text-field-outlined-disabled-border: $_mdc-text-field-outlined-disabled-border !global;
62+
$mdc-text-field-outlined-hover-border: $_mdc-text-field-outlined-hover-border !global;
63+
}

‎src/material-experimental/mdc-form-field/form-field.scss

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
// TODO(devversion): do not import all text-field styles. Use feature targeting once available.
2-
@import '@material/textfield/mdc-text-field';
1+
@import '@material/textfield/mixins.import';
2+
33
@import 'form-field-sizing';
44
@import 'form-field-subscript';
55
@import 'form-field-bottom-line';
66
@import 'mdc-text-field-textarea-overrides';
77
@import 'mdc-text-field-structure-overrides';
88

9+
// Base styles for MDC notched-outline, MDC floating label and MDC text-field.
10+
@include mdc-notched-outline-core-styles($query: $mat-base-styles-query);
11+
@include mdc-floating-label-core-styles($query: $mat-base-styles-query);
12+
@include mdc-text-field-core-styles($query: $mat-base-styles-query);
13+
914
// MDC text-field overwrites.
1015
@include _mat-mdc-text-field-textarea-overrides();
1116
@include _mat-mdc-text-field-structure-overrides();

0 commit comments

Comments
 (0)