diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index aeb43c96174f..e7881ed3e993 100644 --- a/src/lib/button/_button-theme.scss +++ b/src/lib/button/_button-theme.scss @@ -86,7 +86,7 @@ $_mat-button-ripple-opacity: 0.1; color: inherit; background: transparent; - @include _mat-button-theme-property($theme, 'color', default); + @include _mat-button-theme-property($theme, 'color', text); @include _mat-button-focus-overlay-color($theme); // Setup the ripple color to be based on the text color. This ensures that the ripples diff --git a/src/lib/core/option/_option-theme.scss b/src/lib/core/option/_option-theme.scss index 9f948272e423..bbd5e78dad2b 100644 --- a/src/lib/core/option/_option-theme.scss +++ b/src/lib/core/option/_option-theme.scss @@ -33,15 +33,15 @@ } .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) { - color: mat-color($primary); + color: mat-color($primary, text); } .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) { - color: mat-color($accent); + color: mat-color($accent, text); } .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) { - color: mat-color($warn); + color: mat-color($warn, text); } } diff --git a/src/lib/core/theming/_theming.scss b/src/lib/core/theming/_theming.scss index 86c4538c58f0..3bd9e3a937a3 100644 --- a/src/lib/core/theming/_theming.scss +++ b/src/lib/core/theming/_theming.scss @@ -14,11 +14,12 @@ // @param $color-map // @param $primary // @param $lighter -@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) { +@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: 500) { $result: map_merge($base-palette, ( default: map-get($base-palette, $default), lighter: map-get($base-palette, $lighter), darker: map-get($base-palette, $darker), + text: map-get($base-palette, $text), default-contrast: mat-contrast($base-palette, $default), lighter-contrast: mat-contrast($base-palette, $lighter), diff --git a/src/lib/datepicker/_datepicker-theme.scss b/src/lib/datepicker/_datepicker-theme.scss index d338be532aa6..d8e7dfb0bafa 100644 --- a/src/lib/datepicker/_datepicker-theme.scss +++ b/src/lib/datepicker/_datepicker-theme.scss @@ -102,14 +102,14 @@ $mat-calendar-weekday-table-font-size: 11px !default; } .mat-datepicker-toggle-active { - color: mat-color(map-get($theme, primary)); + color: mat-color(map-get($theme, primary), text); &.mat-accent { - color: mat-color(map-get($theme, accent)); + color: mat-color(map-get($theme, accent), text); } &.mat-warn { - color: mat-color(map-get($theme, warn)); + color: mat-color(map-get($theme, warn), text); } } } diff --git a/src/lib/form-field/_form-field-theme.scss b/src/lib/form-field/_form-field-theme.scss index 0b89cc94a63c..81243d5ddc68 100644 --- a/src/lib/form-field/_form-field-theme.scss +++ b/src/lib/form-field/_form-field-theme.scss @@ -19,14 +19,14 @@ // Label colors. Required is used for the `*` star shown in the label. $label-color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6)); - $focused-label-color: mat-color($primary); - $required-label-color: mat-color($accent); + $focused-label-color: mat-color($primary, text); + $required-label-color: mat-color($accent, text); // Underline colors. $underline-color-base: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87)); - $underline-color-accent: mat-color($accent); - $underline-color-warn: mat-color($warn); - $underline-focused-color: mat-color($primary); + $underline-color-accent: mat-color($accent, text); + $underline-color-warn: mat-color($warn, text); + $underline-focused-color: mat-color($primary, text); .mat-form-field-label { color: $label-color; diff --git a/src/lib/icon/_icon-theme.scss b/src/lib/icon/_icon-theme.scss index ba9f862279ba..bc34b20954ce 100644 --- a/src/lib/icon/_icon-theme.scss +++ b/src/lib/icon/_icon-theme.scss @@ -11,15 +11,15 @@ .mat-icon { &.mat-primary { - color: mat-color($primary); + color: mat-color($primary, text); } &.mat-accent { - color: mat-color($accent); + color: mat-color($accent, text); } &.mat-warn { - color: mat-color($warn); + color: mat-color($warn, text); } } } diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss index 91ff9287f2a5..d7abd3a33c35 100644 --- a/src/lib/input/_input-theme.scss +++ b/src/lib/input/_input-theme.scss @@ -21,7 +21,7 @@ } .mat-input-element { - caret-color: mat-color($primary); + caret-color: mat-color($primary, text); @include input-placeholder { color: _mat-control-placeholder-color($theme); @@ -44,16 +44,16 @@ } .mat-accent .mat-input-element { - caret-color: mat-color($accent); + caret-color: mat-color($accent, text); } .mat-warn .mat-input-element, .mat-form-field-invalid .mat-input-element { - caret-color: mat-color($warn); + caret-color: mat-color($warn, text); } .mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after { - color: mat-color($warn); + color: mat-color($warn, text); } } diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss index bdaa4536803d..1105d1628029 100644 --- a/src/lib/select/_select-theme.scss +++ b/src/lib/select/_select-theme.scss @@ -40,20 +40,20 @@ .mat-form-field { &.mat-focused { &.mat-primary .mat-select-arrow { - color: mat-color($primary); + color: mat-color($primary, text); } &.mat-accent .mat-select-arrow { - color: mat-color($accent); + color: mat-color($accent, text); } &.mat-warn .mat-select-arrow { - color: mat-color($warn); + color: mat-color($warn, text); } } .mat-select.mat-select-invalid .mat-select-arrow { - color: mat-color($warn); + color: mat-color($warn, text); } .mat-select.mat-select-disabled .mat-select-arrow { diff --git a/src/lib/snack-bar/_snack-bar-theme.scss b/src/lib/snack-bar/_snack-bar-theme.scss index b58e3119559d..f9c1bd598cd3 100644 --- a/src/lib/snack-bar/_snack-bar-theme.scss +++ b/src/lib/snack-bar/_snack-bar-theme.scss @@ -16,7 +16,7 @@ } .mat-simple-snackbar-action { - color: if($is-dark-theme, inherit, mat-color($accent)); + color: if($is-dark-theme, inherit, mat-color($accent, text)); } } diff --git a/src/lib/stepper/_stepper-theme.scss b/src/lib/stepper/_stepper-theme.scss index 3ed6674b7156..ac4b0091f989 100644 --- a/src/lib/stepper/_stepper-theme.scss +++ b/src/lib/stepper/_stepper-theme.scss @@ -47,7 +47,7 @@ .mat-step-icon-state-error { background-color: transparent; - color: mat-color($warn); + color: mat-color($warn, text); } .mat-step-label.mat-step-label-active { @@ -55,7 +55,7 @@ } .mat-step-label.mat-step-label-error { - color: mat-color($warn); + color: mat-color($warn, text); } }