[EuiToast] Increase color indicator to match form underline + add for…

…ced colors workaround
elastic · Nov 27, 2024 · 737cb08 · 737cb08
1 parent 0580f23
commit 737cb08
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 16 deletions.
diff --git a/packages/eui/src/components/toast/toast.styles.ts b/packages/eui/src/components/toast/toast.styles.ts
@@ -7,13 +7,17 @@
  */
 
 import { css } from '@emotion/react';
-import { euiTextBreakWord, logicalCSS } from '../../global_styling';
+import {
+  euiTextBreakWord,
+  logicalCSS,
+  mathWithUnits,
+} from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 import { euiShadowLarge } from '../../themes/amsterdam';
 import { euiTitle } from '../title/title.styles';
 
 export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, highContrastMode } = euiThemeContext;
 
   return {
     // Base
@@ -26,7 +30,6 @@ export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('padding-vertical', euiTheme.size.base)}
       background-color: ${euiTheme.colors.emptyShade};
       ${logicalCSS('width', '100%')}
-
       ${euiTextBreakWord()} /* Prevent long lines from overflowing */
 
       &:hover,
@@ -43,18 +46,41 @@ export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('right', euiTheme.size.base)}
     `,
     // Variants
-    primary: css`
-      ${logicalCSS('border-top', `2px solid ${euiTheme.colors.primary}`)}
-    `,
-    success: css`
-      ${logicalCSS('border-top', `2px solid ${euiTheme.colors.success}`)}
-    `,
-    warning: css`
-      ${logicalCSS('border-top', `2px solid ${euiTheme.colors.warning}`)}
-    `,
-    danger: css`
-      ${logicalCSS('border-top', `2px solid ${euiTheme.colors.danger}`)}
-    `,
+    colors: {
+      _getStyles: (color: string) => {
+        // Increase color/border thickness for all high contrast modes
+        const borderWidth = highContrastMode
+          ? mathWithUnits(euiTheme.border.width.thick, (x) => x * 2)
+          : euiTheme.border.width.thick;
+
+        // Windows high contrast mode ignores/overrides border colors, which have semantic meaning here.
+        // To get around this, we'll set `forced-color-adjust: none` to the parent, but we need to
+        // re-enable forced colors for children, in case consumers render low-contrast content
+        const forcedColorsWorkaround = `
+          forced-color-adjust: none;
+          & > * {
+            forced-color-adjust: auto;
+          }
+        `;
+
+        return `
+          ${logicalCSS('border-top', `${borderWidth} solid ${color}`)}
+          ${highContrastMode === 'forced' ? forcedColorsWorkaround : ''}
+        `;
+      },
+      get primary() {
+        return css(this._getStyles(euiTheme.colors.primary));
+      },
+      get success() {
+        return css(this._getStyles(euiTheme.colors.success));
+      },
+      get warning() {
+        return css(this._getStyles(euiTheme.colors.warning));
+      },
+      get danger() {
+        return css(this._getStyles(euiTheme.colors.danger));
+      },
+    },
   };
 };
 

diff --git a/packages/eui/src/components/toast/toast.tsx b/packages/eui/src/components/toast/toast.tsx
@@ -42,7 +42,7 @@ export const EuiToast: FunctionComponent<EuiToastProps> = ({
   ...rest
 }) => {
   const baseStyles = useEuiMemoizedStyles(euiToastStyles);
-  const baseCss = [baseStyles.euiToast, color && baseStyles[color]];
+  const baseCss = [baseStyles.euiToast, color && baseStyles.colors[color]];
   const headerStyles = useEuiMemoizedStyles(euiToastHeaderStyles);
   const headerCss = [
     headerStyles.euiToastHeader,