Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(material-experimental/mdc-form-field): support theming through feature targeting #18265

Merged
merged 1 commit into from
Jan 26, 2020
Merged

feat(material-experimental/mdc-form-field): support theming through feature targeting #18265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/material-experimental/mdc-form-field/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@ ng_module(

sass_library(
name = "mdc_form_field_scss_lib",
srcs = ["_mdc-form-field.scss"],
srcs = [
"_mdc-form-field.scss",
"_mdc-text-field-theme-variable-refresh.scss",
],
deps = [
":form_field_partials",
"//src/cdk/a11y:a11y_scss_lib",
Expand Down
29 changes: 26 additions & 3 deletions src/material-experimental/mdc-form-field/_mdc-form-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,40 @@
@import '@material/textfield/variables.import';
@use '@material/ripple/mixins' as mdc-ripple;

@import '@material/textfield/mixins.import';
@import '../mdc-helpers/mdc-helpers';
@import 'form-field-subscript';
@import 'form-field-bottom-line';
@import 'mdc-text-field-theme-variable-refresh';

@mixin mat-form-field-theme-mdc($theme) {
@include mat-using-mdc-theme($theme) {
@include _mat-form-field-subscript-theme();
@include _mat-form-field-bottom-line-theme();
@include _mdc-text-field-refresh-theme-variables() {
@include mdc-text-field-core-styles($query: $mat-theme-styles-query);
@include mdc-floating-label-core-styles($query: $mat-theme-styles-query);
@include mdc-text-field-core-styles($query: $mat-theme-styles-query);
@include _mat-form-field-subscript-theme();
@include _mat-form-field-bottom-line-theme();

// MDC text-field intends to hide the ripples in the outline appearance. The styles for
// this collide with other styles from the structure styles. This is because the ripples
// are made invisible by using the `mdc-ripple.states-base-color` mixin. The mixin makes the
// ripples `transparent` by generating `content: none` instead. This means that the style
// will collide with the default `content` for ripple pseudo elements. Depending on how
// themes and component styles are inserted, the ripples will not hide properly. To ensure
// that the ripples are not rendered in the outline appearance, we copy the mixin call but
// increase the specificity.
.mat-mdc-text-field-wrapper.mdc-text-field--outlined {
@include mdc-ripple.states-base-color(transparent);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This mixin seems to be explicitly filtered out in mixins.import. I don't know why it isn't exposed there. Importing it through mixins.scss works. This matches how MDC text-field imports it, so I don't think it's wrong doing that here too.

}
}
}
}

@mixin mat-form-field-typography-mdc($config) {
@include mat-using-mdc-typography($config) {
@include mdc-text-field-core-styles($query: $mat-typography-styles-query);
@include mdc-floating-label-core-styles($query: $mat-typography-styles-query);
@include mdc-text-field-core-styles($query: $mat-typography-styles-query);
@include _mat-form-field-subscript-typography($config);
}
}
63 changes: 63 additions & 0 deletions src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
@use 'sass:color';
@use '@material/theme/variables' as theme-variables;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As mentioned in the meeting. The variable value expressions are basically just copied over from their variables.scss file. I didn't bother updating every function invocation / variable reference to use the old syntax. Since the MDC styles already use @use and @forward anyway, I don't think there is any reason why we can't use it here (and save some work)


@import '@material/textfield/variables.import';

// Mixin that refreshes the MDC text-field theming variables. This mixin should be used when
// the base MDC theming variables have been explicitly updated, but the component specific
// theming-based variables are still based on the old MDC base theming variables. The mixin
// restores the previous values for the variables to avoid unexpected global side effects.
@mixin _mdc-text-field-refresh-theme-variables() {
$_mdc-text-field-disabled-border-border: $mdc-text-field-disabled-border-border;
$mdc-text-field-disabled-border: rgba(theme-variables.prop-value(on-surface), 0.06) !global;
$_mdc-text-field-bottom-line-idle: $mdc-text-field-bottom-line-idle;
$mdc-text-field-bottom-line-idle: rgba(theme-variables.prop-value(on-surface), 0.42) !global;
$_mdc-text-field-label: $mdc-text-field-label;
$mdc-text-field-label: rgba(theme-variables.prop-value(on-surface), 0.6) !global;
$_mdc-text-field-ink-color: $mdc-text-field-ink-color;
$mdc-text-field-ink-color: rgba(theme-variables.prop-value(on-surface), 0.87) !global;
$_mdc-text-field-focused-label-color: $mdc-text-field-focused-label-color;
$mdc-text-field-focused-label-color: rgba(theme-variables.prop-value(primary), 0.87) !global;
$_mdc-text-field-placeholder-ink-color: $mdc-text-field-placeholder-ink-color;
$mdc-text-field-placeholder-ink-color: rgba(theme-variables.prop-value(on-surface), 0.54) !global;
$_mdc-text-field-disabled-label-color: $mdc-text-field-disabled-label-color;
$mdc-text-field-disabled-label-color: rgba(theme-variables.prop-value(on-surface), 0.38) !global;
$_mdc-text-field-disabled-ink-color: $mdc-text-field-disabled-ink-color;
$mdc-text-field-disabled-ink-color: rgba(theme-variables.prop-value(on-surface), 0.38) !global;
$_mdc-text-field-disabled-placeholder-ink-color: $mdc-text-field-disabled-placeholder-ink-color;
$mdc-text-field-disabled-placeholder-ink-color:
rgba(theme-variables.prop-value(on-surface), 0.38) !global;
$_mdc-text-field-background: $mdc-text-field-background;
$mdc-text-field-background: color.mix(
theme-variables.prop-value(on-surface), theme-variables.prop-value(surface), 4%) !global;
$_mdc-text-field-disabled-background: $mdc-text-field-disabled-background;
$mdc-text-field-disabled-background: color.mix(
theme-variables.prop-value(on-surface), theme-variables.prop-value(surface), 2%) !global;
$_mdc-text-field-outlined-idle-border: $mdc-text-field-outlined-idle-border;
$mdc-text-field-outlined-idle-border: rgba(theme-variables.prop-value(on-surface), 0.38) !global;
$_mdc-text-field-outlined-disabled-border: $mdc-text-field-outlined-disabled-border;
$mdc-text-field-outlined-disabled-border:
rgba(theme-variables.prop-value(on-surface), 0.06) !global;
$_mdc-text-field-outlined-hover-border: $mdc-text-field-outlined-hover-border;
$mdc-text-field-outlined-hover-border: rgba(theme-variables.prop-value(on-surface), 0.87) !global;

// The content will be generated with the refreshed MDC text-field theming variables.
@content;

// Reset all variables to ensure that this mixin does not cause unexpected side effects.
$mdc-text-field-disabled-border-border: $_mdc-text-field-disabled-border-border !global;
$mdc-text-field-bottom-line-idle: $_mdc-text-field-bottom-line-idle !global;
$mdc-text-field-label: $_mdc-text-field-label !global;
$mdc-text-field-ink-color: $_mdc-text-field-ink-color !global;
$mdc-text-field-focused-label-color: $_mdc-text-field-focused-label-color !global;
$mdc-text-field-placeholder-ink-color: $_mdc-text-field-placeholder-ink-color !global;
$mdc-text-field-disabled-label-color: $_mdc-text-field-disabled-label-color !global;
$mdc-text-field-disabled-ink-color: $_mdc-text-field-disabled-ink-color !global;
$mdc-text-field-disabled-placeholder-ink-color:
$_mdc-text-field-disabled-placeholder-ink-color !global;
$mdc-text-field-background: $_mdc-text-field-background !global;
$mdc-text-field-disabled-background: $_mdc-text-field-disabled-background !global;
$mdc-text-field-outlined-idle-border: $_mdc-text-field-outlined-idle-border !global;
$mdc-text-field-outlined-disabled-border: $_mdc-text-field-outlined-disabled-border !global;
$mdc-text-field-outlined-hover-border: $_mdc-text-field-outlined-hover-border !global;
}
9 changes: 7 additions & 2 deletions src/material-experimental/mdc-form-field/form-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
// TODO(devversion): do not import all text-field styles. Use feature targeting once available.
@import '@material/textfield/mdc-text-field';
@import '@material/textfield/mixins.import';

@import 'form-field-sizing';
@import 'form-field-subscript';
@import 'form-field-bottom-line';
@import 'mdc-text-field-textarea-overrides';
@import 'mdc-text-field-structure-overrides';

// Base styles for MDC notched-outline, MDC floating label and MDC text-field.
@include mdc-notched-outline-core-styles($query: $mat-base-styles-query);
@include mdc-floating-label-core-styles($query: $mat-base-styles-query);
@include mdc-text-field-core-styles($query: $mat-base-styles-query);

// MDC text-field overwrites.
@include _mat-mdc-text-field-textarea-overrides();
@include _mat-mdc-text-field-structure-overrides();
Expand Down