diff --git a/src/lib/core/style/_form-common.scss b/src/lib/core/style/_form-common.scss index 19d0cee24698..93260883c969 100644 --- a/src/lib/core/style/_form-common.scss +++ b/src/lib/core/style/_form-common.scss @@ -6,3 +6,11 @@ background-size: 4px 1px; background-repeat: repeat-x; } + +// Determines the text color of a disabled control since the values are not part of a palette. +@mixin mat-control-disabled-text($theme) { + $foreground: map-get($theme, foreground); + $is-dark-theme: map-get($theme, is-dark); + + color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.5, 0.38)); +} diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss index 9cd15260e3c2..6661e6b2f68d 100644 --- a/src/lib/input/_input-theme.scss +++ b/src/lib/input/_input-theme.scss @@ -5,11 +5,8 @@ @mixin mat-input-theme($theme) { - $foreground: map-get($theme, foreground); - $is-dark-theme: map-get($theme, is-dark); - .mat-input-element:disabled { - color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.42)); + @include mat-control-disabled-text($theme); } } diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss index 685f8f2b82a1..1f435b5b34b1 100644 --- a/src/lib/select/_select-theme.scss +++ b/src/lib/select/_select-theme.scss @@ -10,12 +10,6 @@ $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); - $is-dark-theme: map-get($theme, is-dark); - - .mat-select-disabled .mat-select-value, - .mat-select-arrow { - color: mat-color($foreground, secondary-text); - } .mat-select-content, .mat-select-panel-done-animating { background: mat-color($background, card); @@ -25,6 +19,14 @@ color: mat-color($foreground, text); } + .mat-select-disabled .mat-select-value { + @include mat-control-disabled-text($theme); + } + + .mat-select-arrow { + color: mat-color($foreground, secondary-text); + } + .mat-select-panel { .mat-option.mat-selected:not(.mat-option-multiple) { background: mat-color($background, hover, 0.12); @@ -51,13 +53,9 @@ } .mat-select.mat-select-disabled .mat-select-arrow { - color: mat-color($foreground, secondary-text); + @include mat-control-disabled-text($theme); } } - - .mat-select.mat-select-disabled .mat-select-arrow { - color: mat-color($warn); - } } @mixin mat-select-typography($config) {