feat(style): allow palettes to specify a separate hue for colored text (#15149)

Fixes #15148

Author: benelliott

Diff for: src/material/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 for: src/material/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 for: src/material/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: $default) {
   $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 for: src/material/datepicker/_datepicker-theme.scss

@@ -122,14 +122,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 for: src/material/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 for: src/material/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 for: src/material/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 for: src/material/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 for: src/material/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 for: src/material/stepper/_stepper-theme.scss

@@ -47,15 +47,15 @@
 
     .mat-step-icon-state-error {
       background-color: transparent;
-      color: mat-color($warn);
+      color: mat-color($warn, text);
     }
 
     .mat-step-label.mat-step-label-active {
       color: mat-color($foreground, text);
     }
 
     .mat-step-label.mat-step-label-error {
-      color: mat-color($warn);
+      color: mat-color($warn, text);
     }
   }