[High contrast mode] DRY utilities

packages/eui/src/components/color_picker/color_palette_display/color_palette_display.styles.ts

@@ -10,6 +10,7 @@ import { css } from '@emotion/react';
 
 import { UseEuiTheme, transparentize } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
+import { preventForcedColors } from '../../../global_styling/functions/high_contrast';
 
 export const euiColorPaletteDisplayStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme, highContrastMode } = euiThemeContext;
@@ -28,7 +29,7 @@ export const euiColorPaletteDisplayStyles = (euiThemeContext: UseEuiTheme) => {
       display: flex;
       flex-direction: row;
       overflow: hidden;
-      ${highContrastMode === 'forced' ? 'forced-color-adjust: none;' : ''}
+      ${preventForcedColors(euiThemeContext)}
 
       &::after {
         content: '';

packages/eui/src/components/color_picker/color_picker_swatch.styles.ts

@@ -14,9 +14,13 @@ import {
   mathWithUnits,
   euiOutline,
 } from '../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling/functions/high_contrast';
 
 export const euiColorPickerSwatchStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, highContrastMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
 
   return {
     euiColorPickerSwatch: css`
@@ -27,15 +31,16 @@ export const euiColorPickerSwatchStyles = (euiThemeContext: UseEuiTheme) => {
         euiTheme.border.radius.medium,
         (x) => x / 2
       )};
-      ${highContrastMode
-        ? `border: ${euiTheme.border.thin};`
-        : `
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `
           border: ${euiTheme.border.width.thin} solid
             ${transparentize(euiTheme.colors.fullShade, 0.1)};
           box-shadow: inset 0 0 0 ${euiTheme.border.width.thin}
             ${transparentize(euiTheme.colors.emptyShade, 0.05)};
-        `}
-      ${highContrastMode === 'forced' ? 'forced-color-adjust: none;' : ''}
+        `,
+        preferred: `border: ${euiTheme.border.thin};`,
+        forced: preventForcedColors(euiThemeContext),
+      })}
       cursor: pointer;
 
       &:disabled {

packages/eui/src/components/color_picker/hue.styles.ts

@@ -10,14 +10,18 @@ import { css } from '@emotion/react';
 
 import { UseEuiTheme, transparentize } from '../../services';
 import { logicalCSS, mathWithUnits } from '../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling/functions/high_contrast';
 import {
   euiRangeThumbPerBrowser,
   euiRangeThumbStyle,
   euiRangeThumbFocusBoxShadow,
 } from '../form/range/range.styles';
 
 export const euiHueStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, highContrastMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
 
   const height = euiTheme.size.m;
   const thumbSize = euiTheme.size.l;
@@ -33,12 +37,10 @@ export const euiHueStyles = (euiThemeContext: UseEuiTheme) => {
     // This wraps the range and sets a rainbow gradient,
     // which allows the range thumb to be larger than the visible track
     euiHue: css`
-      /* stylelint-disable color-no-hex */
       ${logicalCSS('height', height)}
       border-radius: ${height};
-      ${highContrastMode ? `border: ${euiTheme.border.thin};` : ''}
-      ${highContrastMode === 'forced' ? 'forced-color-adjust: none;' : ''}
 
+      /* stylelint-disable color-no-hex */
       background: linear-gradient(
         to right,
         #ff3232 0%,
@@ -50,6 +52,11 @@ export const euiHueStyles = (euiThemeContext: UseEuiTheme) => {
         #ff0094 100%
       );
       /* stylelint-enable color-no-hex */
+
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: `border: ${euiTheme.border.thin};`,
+        forced: preventForcedColors(euiThemeContext),
+      })}
     `,
 
     euiHue__range: css`
@@ -76,38 +83,42 @@ export const euiHueStyles = (euiThemeContext: UseEuiTheme) => {
       ${euiRangeThumbPerBrowser(`
         ${euiRangeThumbStyle(euiThemeContext)}
         border-width: ${thumbBorder};
-        ${
-          highContrastMode
-            ? `
+
+        ${highContrastModeStyles(euiThemeContext, {
+          none: `
+            background-color: transparent;
+            box-shadow: ${thumbBoxShadow};
+          `,
+          preferred: `
             background-color: ${euiTheme.colors.ghost};
             border: ${thumbBorder} solid ${euiTheme.colors.ink};
             box-shadow: none;
-          `
-            : `
-            background-color: transparent;
-            box-shadow: ${thumbBoxShadow};
-          `
-        }`)}
+          `,
+        })}
+      `)}
 
       /* Remove wrapping outline and show focus on thumb only */
       &:focus {
         outline: none;
       }
 
-      ${highContrastMode
-        ? `
-        &:focus {
-          ${euiRangeThumbPerBrowser(`
-            outline: ${euiTheme.border.width.thin} solid ${euiTheme.colors.ink};
-            outline-offset: 0;
-          `)}
-        }`
-        : `
-        &:focus-visible {
-          ${euiRangeThumbPerBrowser(
-            euiRangeThumbFocusBoxShadow(euiThemeContext)
-          )}
-        }`}
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `
+          &:focus-visible {
+            ${euiRangeThumbPerBrowser(
+              euiRangeThumbFocusBoxShadow(euiThemeContext)
+            )}
+          }
+        `,
+        preferred: `
+          &:focus {
+            ${euiRangeThumbPerBrowser(`
+              outline: ${euiTheme.border.width.thin} solid ${euiTheme.colors.ink};
+              outline-offset: 0;
+            `)}
+          }
+        `,
+      })}
     `,
   };
 };

packages/eui/src/components/color_picker/saturation.styles.ts

@@ -14,9 +14,13 @@ import {
   logicalSizeCSS,
   mathWithUnits,
 } from '../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling/functions/high_contrast';
 
 export const euiSaturationStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, highContrastMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
 
   const indicatorSize = euiTheme.size.m;
   const borderRadius = euiTheme.border.radius.small;
@@ -38,32 +42,36 @@ export const euiSaturationStyles = (euiThemeContext: UseEuiTheme) => {
         outline: none; /* Hide focus ring from tabindex=0 */
 
         .euiSaturation__indicator {
-          ${highContrastMode
-            ? `
-              outline: ${euiTheme.border.width.thin} solid ${euiTheme.colors.ink};
-              outline-offset: 0;`
-            : `
+          ${highContrastModeStyles(euiThemeContext, {
+            none: `
               outline: none; /* Standardize indicator focus ring */
               box-shadow: 0 0 0 ${euiTheme.focus.width} ${euiTheme.colors.primary};
               border-color: ${euiTheme.colors.primary};
-            `}
+            `,
+            preferred: `
+              outline: ${euiTheme.border.width.thin} solid ${euiTheme.colors.ink};
+              outline-offset: 0;
+            `,
+          })}
         }
       }
 
-      ${highContrastMode === 'forced' ? 'forced-color-adjust: none;' : ''}
-      ${highContrastMode
-        ? // The border must be in an overlaid pseudo element to not affect the
-          // width/height and position of the indicator, or cause border-radius issues
-          `&::after {
+      ${highContrastModeStyles(euiThemeContext, {
+        // The border must be in an overlaid pseudo element to not affect the
+        // width/height/position of the indicator, or cause border-radius issues
+        preferred: `
+          &::after {
             z-index: 1;
             content: '';
             position: absolute;
             inset: 0;
             border: ${euiTheme.border.thin};
             border-radius: inherit;
             pointer-events: none;
-          }`
-        : ''}
+          }
+        `,
+        forced: preventForcedColors(euiThemeContext),
+      })}
     `,
 
     euiSaturation__lightness: css`
@@ -89,21 +97,25 @@ export const euiSaturationStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalSizeCSS(indicatorSize)}
       transform: translateX(-50%) translateY(-50%);
       border-radius: 100%;
-      ${highContrastMode
-        ? `
-        border: ${euiTheme.border.width.thick} solid ${euiTheme.colors.ink};
-        background-color: ${euiTheme.colors.ghost};`
-        : `
-        border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.darkestShade};
 
-        &::before {
-          content: '';
-          position: absolute;
-          inset: 0;
-          border-radius: 100%;
-          border: ${euiTheme.border.width.thin} solid
-            ${euiTheme.colors.lightestShade};
-        }`}
+      ${highContrastModeStyles(euiThemeContext, {
+        none: `
+          border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.darkestShade};
+
+          &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: 100%;
+            border: ${euiTheme.border.width.thin} solid
+              ${euiTheme.colors.lightestShade};
+          }
+        `,
+        preferred: `
+          border: ${euiTheme.border.width.thick} solid ${euiTheme.colors.ink};
+          background-color: ${euiTheme.colors.ghost};
+        `,
+      })}
     `,
   };
 };

packages/eui/src/components/date_picker/react_date_picker.styles.ts

@@ -8,6 +8,9 @@
 
 // Needs to use vanilla `css` to pass a className directly to react-datepicker
 import { css } from '@emotion/css';
+// Emotion can handle serializing objects passed directly to css``, but not objs nested
+// in another function util, so we need to serialize some style objects manually
+import { serializeStyles } from '@emotion/serialize';
 
 import { UseEuiTheme } from '../../services';
 import {
@@ -18,6 +21,10 @@ import {
   logicalCSS,
   mathWithUnits,
 } from '../../global_styling';
+import {
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling/functions/high_contrast';
 import {
   euiButtonColor,
   euiButtonEmptyColor,
@@ -232,7 +239,7 @@ export const _monthYearDropdowns = (euiThemeContext: UseEuiTheme) => {
 };
 
 export const _dayCalendarStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, highContrastMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
   const { gapSize } = euiDatePickerVariables(euiThemeContext);
 
   const daySize = euiTheme.size.xl;
@@ -295,20 +302,22 @@ export const _dayCalendarStyles = (euiThemeContext: UseEuiTheme) => {
 
       &--highlighted,
       &--highlighted:hover {
-        ${highContrastMode !== 'forced'
-          ? euiButtonColor(euiThemeContext, 'success')
-          : `border: ${euiTheme.border.thin};`}
+        ${highContrastModeStyles(euiThemeContext, {
+          none: serializeStyles([euiButtonColor(euiThemeContext, 'success')])
+            .styles,
+          forced: `border: ${euiTheme.border.thin};`,
+        })}
       }
 
       &--in-range,
       &--in-range:hover {
         ${euiButtonColor(euiThemeContext, 'primary')};
       }
 
-      ${highContrastMode !== 'forced'
-        ? // Ranges use 2 side box-shadows that are the same as the button
-          //background to fill the gap between margins
-          `
+      ${highContrastModeStyles(euiThemeContext, {
+        // Ranges use 2 side box-shadows that are the same as the button
+        // background to fill the gap between margins
+        none: `
           &--in-range:not(&--selected):not(:hover):not(&--disabled) {
             box-shadow: -${rangeMarginOffset} 0 ${rangeBackgroundColor},
               ${rangeMarginOffset} 0 ${rangeBackgroundColor};
@@ -330,9 +339,10 @@ export const _dayCalendarStyles = (euiThemeContext: UseEuiTheme) => {
                 border-radius ${animationSpeed} ease-in-out,
                 background-color ${animationSpeed} ease-in;
             }
-          }`
-        : // In Windows high contrast mode, use borders and pseudo elements instead of background colors
-          `
+          }
+        `,
+        // In Windows high contrast mode, use borders and pseudo elements instead of background colors
+        forced: `
           &--in-range:not(&--selected) {
             position: relative;
             transform: none;
@@ -350,7 +360,9 @@ export const _dayCalendarStyles = (euiThemeContext: UseEuiTheme) => {
           }
           &--range-end:not(&--selected)::before {
             border-inline-end: ${euiTheme.border.thin};
-          }`}
+          }
+        `,
+      })}
 
       &--selected,
       &--selected:hover,
@@ -361,9 +373,11 @@ export const _dayCalendarStyles = (euiThemeContext: UseEuiTheme) => {
 
       &--disabled,
       &--disabled:hover {
-        ${highContrastMode !== 'forced'
-          ? euiButtonColor(euiThemeContext, 'disabled')
-          : 'opacity: 0.5;'}
+        ${highContrastModeStyles(euiThemeContext, {
+          none: serializeStyles([euiButtonColor(euiThemeContext, 'disabled')])
+            .styles,
+          forced: `opacity: 0.5;`,
+        })}
         cursor: not-allowed;
         text-decoration: none;
         transform: none;
@@ -380,14 +394,16 @@ export const _dayCalendarStyles = (euiThemeContext: UseEuiTheme) => {
       &--in-selecting-range:not(&--in-range),
       &--disabled.react-datepicker__day--selected,
       &--disabled.react-datepicker__day--selected:hover {
-        ${highContrastMode !== 'forced'
-          ? euiButtonColor(euiThemeContext, 'danger')
-          : `
+        ${highContrastModeStyles(euiThemeContext, {
+          none: serializeStyles([euiButtonColor(euiThemeContext, 'danger')])
+            .styles,
+          forced: `
             color: ${euiTheme.colors.dangerText};
             border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.dangerText};
             background-color: ${euiTheme.colors.emptyShade};
             opacity: 1;
-          `}
+          `,
+        })}
       }
     }
   `;
@@ -505,6 +521,6 @@ const _highContrastSelected = (euiThemeContext: UseEuiTheme) => {
     : `
         background-color: ${euiTheme.colors.fullShade};
         color: ${euiTheme.colors.emptyShade};
-        forced-color-adjust: none;
+        ${preventForcedColors(euiThemeContext)}
       `;
 };