[EuiSelectableTemplateSitewide] Increase contrast of text when in dar…

…k header (#5724)
elastic · Mar 16, 2022 · bdf5fdf · bdf5fdf
1 parent 43444cc
commit bdf5fdf
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Added `compressed` prop to `EuiFilterGroup` and reduced the size of the `EuiFilterButton` notification badge ([#5717](https://github.com/elastic/eui/pull/5717))
 - Updated `testenv` mock for `EuiIcon` to render `aria-label` as text ([#5709](https://github.com/elastic/eui/pull/5709))
 - Added `editorChecklist` glyph to `EuiIcon` ([#5705](https://github.com/elastic/eui/pull/5705))
+- Increased contrast of `EuiSelectableTemplateSitewide` input text when in dark header ([#5724](https://github.com/elastic/eui/pull/5724))
 
 **Breaking changes**
 
@@ -49,7 +50,7 @@
 - Added `textWrap` to `EuiSelectableListItem`, `EuiSelectableList`, and `EuiSelectable.listOptions` ([#5679](https://github.com/elastic/eui/issues/5679))
 - Forced `truncation` on `EuiSuggest` items when `isVirtualize` ([#5679](https://github.com/elastic/eui/issues/5679))
 - Changed proportion handling between content and image in `horizontal` `EuiEmptyPrompt` and added spacing between ([#5663](https://github.com/elastic/eui/pull/5663))
-- Reduced SASS compilation time using a different math `pow` implementation ([#5674](https://github.com/elastic/eui/pull/5674)) 
+- Reduced SASS compilation time using a different math `pow` implementation ([#5674](https://github.com/elastic/eui/pull/5674))
 
 **Bug fixes**
 

diff --git a/src/components/selectable/selectable_templates/_selectable_template_sitewide.scss b/src/components/selectable/selectable_templates/_selectable_template_sitewide.scss
@@ -9,12 +9,13 @@
   }
 
   &:not(:focus-within) {
-    color: transparentize($euiColorGhost, .3);
+    // Increase contrast of filled text to be more than placeholder text
+    color: $euiColorGhost;
 
     input {
       // Increase contrast of placeholder text
       @include euiPlaceholderPerBrowser {
-        color: transparentize($euiColorGhost, .6);
+        color: makeHighContrastColor($euiFormControlPlaceholderText, $euiHeaderDarkBackgroundColor, 8);
       }
 
       // Inherit color from form control layout