[EuiSuperDatePicker] Improve Windows high contrast state indication

cee-chen · cee-chen · commit 543f22bd8aa1 · 2024-12-02T20:11:37.000-08:00
- needs updating still isn't great, but I think this is the best I can do for now :/
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
@@ -25,6 +25,7 @@ import {
   euiFormControlDefaultShadow,
   euiFormControlInvalidStyles,
   euiFormControlDisabledStyles,
+  euiFormControlShowBackgroundUnderline,
 } from '../../form/form.styles';
 
 export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
@@ -161,7 +162,10 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
         .euiDatePopoverButton:focus,
         .euiPopover-isOpen .euiDatePopoverButton {
           --euiFormControlStateColor: ${euiTheme.colors.primary};
-          background-size: 100% 100%;
+          ${euiFormControlShowBackgroundUnderline(
+            euiThemeContext,
+            euiTheme.colors.primary
+          )}
         }
       `,
       disabled: css`
@@ -197,8 +201,21 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
         .euiDatePopoverButton:focus,
         .euiPopover-isOpen .euiDatePopoverButton {
           --euiFormControlStateColor: ${euiTheme.colors.success};
-          background-size: 100% 100%;
+          ${euiFormControlShowBackgroundUnderline(
+            euiThemeContext,
+            euiTheme.colors.success
+          )}
         }
+
+        ${highContrastMode === 'forced'
+          ? // Force the fill color of all icons/svgs to give a bit more indication of state,
+            // since Windows high contrast themes otherwise override background/text color
+            `
+          svg,
+          & + * svg {
+            fill: ${euiTheme.colors.success};
+          }`
+          : ''}
       `,
     },
   };
diff --git a/packages/eui/src/components/form/form.styles.ts b/packages/eui/src/components/form/form.styles.ts
@@ -346,7 +346,7 @@ export const euiFormControlAutoFillStyles = (euiThemeContext: UseEuiTheme) => {
   `;
 };
 
-const euiFormControlShowBackgroundUnderline = (
+export const euiFormControlShowBackgroundUnderline = (
   euiThemeContext: UseEuiTheme,
   color: string
 ) => {
