@use '@material/textfield' as mdc-textfield; @use '@material/theme/variables' as mdc-theme-variables; @use 'sass:color'; @use 'sass:meta'; // 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 private-text-field-refresh-theme-variables() { $_disabled-border: mdc-textfield.$disabled-border; mdc-textfield.$disabled-border: _variable-safe-rgba(mdc-theme-variables.prop-value(on-surface), 0.06); $_bottom-line-hover: mdc-textfield.$bottom-line-hover; mdc-textfield.$bottom-line-hover: _variable-safe-rgba(mdc-theme-variables.prop-value(on-surface), 0.87); $_bottom-line-idle: mdc-textfield.$bottom-line-idle; mdc-textfield.$bottom-line-idle: _variable-safe-rgba(mdc-theme-variables.prop-value(on-surface), 0.42); $_label: mdc-textfield.$label; mdc-textfield.$label: _variable-safe-rgba(mdc-theme-variables.prop-value(on-surface), 0.6); $_ink-color: mdc-textfield.$ink-color; mdc-textfield.$ink-color: _variable-safe-rgba(mdc-theme-variables.prop-value(on-surface), 0.87); $_focused-label-color: mdc-textfield.$focused-label-color; mdc-textfield.$focused-label-color: _variable-safe-rgba(mdc-theme-variables.prop-value(primary), 0.87); $_placeholder-ink-color: mdc-textfield.$placeholder-ink-color; mdc-textfield.$placeholder-ink-color: _variable-safe-rgba(mdc-theme-variables.prop-value(on-surface), 0.6); $_disabled-label-color: mdc-textfield.$disabled-label-color; mdc-textfield.$disabled-label-color: _variable-safe-rgba(mdc-theme-variables.prop-value(on-surface), 0.38); $_disabled-ink-color: mdc-textfield.$disabled-ink-color; mdc-textfield.$disabled-ink-color: _variable-safe-rgba(mdc-theme-variables.prop-value(on-surface), 0.38); $_disabled-placeholder-ink-color: mdc-textfield.$disabled-placeholder-ink-color; mdc-textfield.$disabled-placeholder-ink-color: _variable-safe-rgba(mdc-theme-variables.prop-value(on-surface), 0.38); $_background: mdc-textfield.$background; mdc-textfield.$background: _variable-safe-mix(mdc-theme-variables.prop-value(on-surface), mdc-theme-variables.prop-value(surface), 4%); $_disabled-background: mdc-textfield.$disabled-background; mdc-textfield.$disabled-background: _variable-safe-mix(mdc-theme-variables.prop-value(on-surface), mdc-theme-variables.prop-value(surface), 2%); $_outlined-idle-border: mdc-textfield.$outlined-idle-border; mdc-textfield.$outlined-idle-border: _variable-safe-rgba(mdc-theme-variables.prop-value(on-surface), 0.38); $_outlined-disabled-border: mdc-textfield.$outlined-disabled-border; mdc-textfield.$outlined-disabled-border: _variable-safe-rgba(mdc-theme-variables.prop-value(on-surface), 0.06); $_outlined-hover-border: mdc-textfield.$outlined-hover-border; mdc-textfield.$outlined-hover-border: _variable-safe-rgba(mdc-theme-variables.prop-value(on-surface), 0.87); // 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-textfield.$disabled-border: $_disabled-border; mdc-textfield.$bottom-line-hover: $_bottom-line-hover; mdc-textfield.$bottom-line-idle: $_bottom-line-idle; mdc-textfield.$label: $_label; mdc-textfield.$ink-color: $_ink-color; mdc-textfield.$focused-label-color: $_focused-label-color; mdc-textfield.$placeholder-ink-color: $_placeholder-ink-color; mdc-textfield.$disabled-label-color: $_disabled-label-color; mdc-textfield.$disabled-ink-color: $_disabled-ink-color; mdc-textfield.$disabled-placeholder-ink-color: $_disabled-placeholder-ink-color; mdc-textfield.$background: $_background; mdc-textfield.$disabled-background: $_disabled-background; mdc-textfield.$outlined-idle-border: $_outlined-idle-border; mdc-textfield.$outlined-disabled-border: $_outlined-disabled-border; mdc-textfield.$outlined-hover-border: $_outlined-hover-border; } @function _variable-safe-rgba($color, $opacity) { @if (meta.type-of($color) == color) { @return rgba($color, $opacity); } @return $color; } @function _variable-safe-mix($first-color, $second-color, $amount) { @if (meta.type-of($first-color) == color and meta.type-of($second-color) == color) { @return color.mix($first-color, $second-color, $amount); } @return $first-color; }