[EuiForm] Increase clear button contrast + fix display on Windows

elastic · Nov 27, 2024 · 0580f23 · 0580f23
1 parent 3086ef9
commit 0580f23
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/...ce/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/...ce/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png
diff --git a/...nce/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/...nce/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png
diff --git a/...es/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts b/...es/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts
@@ -13,15 +13,20 @@ import { UseEuiTheme } from '../../../services';
 export const EuiFormControlLayoutClearButtonStyles = ({
   euiTheme,
   colorMode,
+  highContrastMode,
 }: UseEuiTheme) => {
   const backgroundColor =
-    colorMode === 'DARK'
+    highContrastMode === 'forced'
+      ? euiTheme.colors.fullShade
+      : colorMode === 'DARK' || highContrastMode // mediumShade is not sufficient WCAG contrast
       ? euiTheme.colors.darkShade
       : euiTheme.colors.mediumShade;
+
   return {
     euiFormControlLayoutClearButton: css`
       pointer-events: all;
       background-color: ${backgroundColor};
+      ${highContrastMode === 'forced' ? 'forced-color-adjust: none;' : ''}
       border-radius: 50%;
       line-height: 0; /* ensures the icon stays vertically centered */