[High Contrast Mode] EuiKeyPadMenu, EuiImage, EuiOverlayMask, EuiBottomBar, EuiToken

packages/eui/src/components/bottom_bar/bottom_bar.styles.ts

@@ -7,8 +7,9 @@
  */
 
 import { css, keyframes } from '@emotion/react';
-import { euiCanAnimate } from '../../global_styling';
 import { UseEuiTheme, shade } from '../../services';
+import { euiCanAnimate, logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiShadowFlat } from '../../themes/amsterdam/global_styling/mixins';
 
 const euiBottomBarAppear = keyframes`
@@ -30,8 +31,12 @@ export const euiBottomBarStyles = (euiThemeContext: UseEuiTheme) => {
     // Base
     // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
     euiBottomBar: css`
-      ${euiShadowFlat(euiThemeContext)}
-      background: ${shade(euiTheme.colors.lightestShade, 0.5)};
+      background-color: ${shade(euiTheme.colors.lightestShade, 0.5)};
+      ${logicalCSS('border-top', euiTheme.border.thin)}
+      ${highContrastModeStyles(euiThemeContext, {
+        none: euiShadowFlat(euiThemeContext),
+      })}
+
       ${euiCanAnimate} {
         animation: ${euiBottomBarAppear} ${euiTheme.animation.slow}
           ${euiTheme.animation.resistance};

packages/eui/src/components/image/image.styles.ts

@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { UseEuiTheme } from '../../services';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 
@@ -27,9 +28,12 @@ export const euiImageStyles = (euiThemeContext: UseEuiTheme) => ({
     position: relative;
     ${logicalCSS('max-height', '80vh')}
     ${logicalCSS('max-width', '80vw')}
+    ${highContrastModeStyles(euiThemeContext, {
+      preferred: `border: ${euiThemeContext.euiTheme.border.thin};`,
+    })}
   `,
   hasShadow: css`
-    ${euiShadow(euiThemeContext, 's')}
+    ${euiShadow(euiThemeContext, 's', { borderAllInHighContrastMode: true })}
   `,
   // Sizes
   // These sizes are mostly suggestions. Don't look too hard for meaning in their values.

packages/eui/src/components/key_pad_menu/key_pad_menu.stories.tsx

@@ -223,3 +223,40 @@ export const CheckableMulti: Story = {
   },
   render: (args) => <StatefulKeyPadMenu {...args} checkableType="multi" />,
 };
+
+export const HighContrast: Story = {
+  tags: ['vrt-only'],
+  globals: { highContrastMode: true },
+  args: {
+    children: [
+      <EuiKeyPadMenuItem label="Button" autoFocus>
+        <EuiIcon type="grid" size="l" />
+      </EuiKeyPadMenuItem>,
+      <EuiKeyPadMenuItem label="Link" href="#">
+        <EuiIcon type="link" size="l" />
+      </EuiKeyPadMenuItem>,
+      <EuiKeyPadMenuItem
+        label="Badge"
+        betaBadgeLabel="External"
+        betaBadgeTooltipContent="This module is an external app."
+        betaBadgeIconType="popout"
+      >
+        <EuiIcon type="beta" size="l" />
+      </EuiKeyPadMenuItem>,
+      <EuiKeyPadMenuItem label="Selected" isSelected>
+        <EuiIcon type="faceHappy" size="l" />
+      </EuiKeyPadMenuItem>,
+      <EuiKeyPadMenuItem label="Disabled" isDisabled>
+        <EuiIcon type="faceSad" size="l" />
+      </EuiKeyPadMenuItem>,
+      <EuiKeyPadMenuItem
+        label="Selected and disabled"
+        isSelected
+        isDisabled
+        href="#"
+      >
+        <EuiIcon type="faceNeutral" size="l" />
+      </EuiKeyPadMenuItem>,
+    ],
+  },
+};

packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts

@@ -15,6 +15,7 @@ import {
   euiCanAnimate,
   euiFontSize,
 } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 import { euiScreenReaderOnly } from '../accessibility';
 
@@ -38,12 +39,17 @@ export const euiKeyPadMenuItemStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     enabled: css`
-      &:hover,
-      &:focus,
-      &:focus-within {
+      &:is(:hover, :focus, :focus-within) {
         cursor: pointer;
         text-decoration: underline;
-        ${euiShadow(euiThemeContext, 's')}
+
+        ${highContrastModeStyles(euiThemeContext, {
+          none: euiShadow(euiThemeContext, 's'),
+          // Use `outline` instead of border to avoid affecting absolutely positioned children
+          preferred: `
+            outline: ${euiTheme.border.width.thin} solid ${euiTheme.colors.primary};
+          `,
+        })}
 
         ${euiCanAnimate} {
           .euiKeyPadMenuItem__icon {
@@ -61,31 +67,51 @@ export const euiKeyPadMenuItemStyles = (euiThemeContext: UseEuiTheme) => {
       color: ${euiTheme.colors.title};
       background-color: ${euiTheme.focus.backgroundColor};
 
-      &,
-      &:hover,
-      &:focus,
-      &:focus-within {
+      &:is(*, :hover, :focus, :focus-within) {
         color: ${euiTheme.colors.primaryText};
+
+        ${highContrastModeStyles(euiThemeContext, {
+          // Skip checkable items (which render a <label> instead of <button>/<a>),
+          // as they already have sufficient indication of state (checkbox or radio)
+          preferred: `
+            &:not(label) {
+              outline: ${euiTheme.border.width.thick} solid ${euiTheme.colors.primary};
+              outline-offset: 0;
+            }
+          `,
+        })}
       }
     `,
     disabled: {
       disabled: css`
         cursor: not-allowed;
         color: ${euiTheme.colors.disabledText};
 
-        .euiKeyPadMenuItem__icon {
-          filter: grayscale(100%);
-
-          svg * {
-            fill: ${euiTheme.colors.disabledText};
-          }
-        }
+        ${highContrastModeStyles(euiThemeContext, {
+          none: `
+            .euiKeyPadMenuItem__icon {
+              filter: grayscale(100%);
+
+              svg * {
+                fill: ${euiTheme.colors.disabledText};
+              }
+            }
+          `,
+          forced: 'opacity: 0.5;',
+        })}
       `,
       selected: css`
         background-color: ${transparentize(
           euiTheme.colors.disabled,
           euiTheme.focus.transparency
         )};
+        ${highContrastModeStyles(euiThemeContext, {
+          preferred: `
+            &:not(label) {
+              outline: ${euiTheme.border.width.thick} solid ${euiTheme.colors.disabledText};
+            }
+          `,
+        })}
       `,
     },
   };
@@ -130,14 +156,10 @@ export const euiKeyPadMenuItemChildStyles = (euiThemeContext: UseEuiTheme) => {
     `,
 
     euiKeyPadMenuItem__checkableInput: css`
+      position: absolute;
       ${topRightChildren}
       transform: scale(.75);
       transform-origin: top right;
-
-      /* TODO: Remove this once EuiCheckbox and EuiRadio have been converted to Emotion */
-      && {
-        position: absolute;
-      }
     `,
     showCheckableInputOnInteraction: css`
       .euiKeyPadMenuItem:not(:hover, :focus, :focus-within) & {

packages/eui/src/components/overlay_mask/overlay_mask.styles.ts

@@ -10,7 +10,10 @@ import { css } from '@emotion/css';
 import { logicalCSS, euiAnimFadeIn } from '../../global_styling';
 import { transparentize, UseEuiTheme } from '../../services';
 
-export const euiOverlayMaskStyles = ({ euiTheme }: UseEuiTheme) => ({
+export const euiOverlayMaskStyles = ({
+  euiTheme,
+  highContrastMode,
+}: UseEuiTheme) => ({
   euiOverlayMask: css`
     position: fixed;
     ${logicalCSS('top', 0)}
@@ -22,7 +25,10 @@ export const euiOverlayMaskStyles = ({ euiTheme }: UseEuiTheme) => ({
     justify-content: center;
     ${logicalCSS('padding-bottom', '10vh')}
     animation: ${euiAnimFadeIn} ${euiTheme.animation.fast} ease-in;
-    background: ${transparentize(euiTheme.colors.ink, 0.5)};
+    background: ${transparentize(
+      euiTheme.colors.ink,
+      highContrastMode ? 0.85 : 0.5
+    )};
   `,
   aboveHeader: css`
     z-index: ${euiTheme.levels.mask};