[HCM] Add high contrast mode support

.github/pull_request_template.md

@@ -12,6 +12,8 @@ Remove or strikethrough items that do not apply to your PR.
 
 - Browser QA
     - [ ] Checked in both **light and dark** modes
+    - [ ] Checked in both [MacOS](https://support.apple.com/lv-lv/guide/mac-help/unac089/mac) and [Windows](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) **high contrast modes**
+      - (_[emulate forced colors](https://devtoolstips.org/tips/en/emulate-forced-colors/) if you do not have access to a Windows machine_.)
     - [ ] Checked in **mobile**
     - [ ] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**
     - [ ] Checked for **accessibility** including keyboard-only and screenreader modes

packages/docusaurus-theme/src/components/demo/demo.tsx

@@ -56,7 +56,7 @@ export interface DemoProps extends PropsWithChildren {
 
 const getDemoStyles = (euiTheme: UseEuiTheme) => ({
   demo: css`
-    --docs-demo-border-color: ${euiTheme.euiTheme.colors.lightShade};
+    --docs-demo-border-color: ${euiTheme.euiTheme.border.color};
     --docs-demo-border-radius: ${euiTheme.euiTheme.size.s};
 
     border: 1px solid var(--docs-demo-border-color);

packages/docusaurus-theme/src/components/guideline/guideline.tsx

@@ -5,6 +5,7 @@ import {
   EuiPanelProps,
   useEuiMemoizedStyles,
   UseEuiTheme,
+  highContrastModeStyles,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { GuidelineType } from './types';
@@ -17,23 +18,38 @@ export interface GuidelineProps extends PropsWithChildren {
   panelStyle?: EuiPanelProps['style'];
 }
 
-const getGuidelineStyles = ({ euiTheme }: UseEuiTheme) => ({
-  root: css`
-    margin-block: var(--eui-theme-content-vertical-spacing);
-  `,
-  wrapper: css`
-    border-block-end: 2px solid ${euiTheme.colors.lightShade};
-  `,
-  wrapperDo: css`
-    border-color: ${euiTheme.colors.success};
-  `,
-  wrapperDont: css`
-    border-color: ${euiTheme.colors.danger};
-  `,
-  textWrapper: css`
-    margin-block-start: var(--eui-size-xs);
-  `,
-});
+const getGuidelineStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  return {
+    root: css`
+      margin-block: var(--eui-theme-content-vertical-spacing);
+    `,
+    wrapper: css`
+      border-block-end: ${euiTheme.border.thick};
+      border-start-start-radius: ${euiTheme.border.radius.medium};
+      border-start-end-radius: ${euiTheme.border.radius.medium};
+      overflow: hidden;
+
+      ${highContrastModeStyles(euiThemeContext, {
+        // Code block is used within a panel which already has a border - skip doubling up
+        preferred: `
+          & > .euiCodeBlock {
+            border: none;
+          }
+        `,
+      })}
+    `,
+    wrapperDo: css`
+      border-color: ${euiTheme.colors.success};
+    `,
+    wrapperDont: css`
+      border-color: ${euiTheme.colors.danger};
+    `,
+    textWrapper: css`
+      margin-block-start: var(--eui-size-xs);
+    `,
+  };
+};
 
 export const Guideline = ({
   children,

packages/docusaurus-theme/src/components/theme_context/index.tsx

@@ -6,6 +6,7 @@ import {
 } from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import {
+  EUI_THEME,
   EuiProvider,
   EuiThemeAmsterdam,
   EuiThemeColorMode,
@@ -29,10 +30,19 @@ export const AVAILABLE_THEMES = [
 
 const EUI_COLOR_MODES = ['light', 'dark'] as EuiThemeColorMode[];
 
-const defaultState = {
+const defaultState: {
+  colorMode: EuiThemeColorMode;
+  highContrastMode: boolean | undefined;
+  theme: EUI_THEME;
+  changeColorMode: (colorMode: EuiThemeColorMode) => void;
+  changeHighContrastMode: (highContrastMode: boolean) => void;
+  changeTheme: (themeValue: string) => void;
+} = {
   colorMode: EUI_COLOR_MODES[0] as EuiThemeColorMode,
-  changeColorMode: (colorMode: EuiThemeColorMode) => {},
+  highContrastMode: undefined,
   theme: AVAILABLE_THEMES[0]!,
+  changeColorMode: (colorMode: EuiThemeColorMode) => {},
+  changeHighContrastMode: (highContrastMode: boolean) => {},
   changeTheme: (themeValue: string) => {},
 };
 
@@ -45,14 +55,26 @@ export const AppThemeProvider: FunctionComponent<PropsWithChildren> = ({
   const [colorMode, setColorMode] = useState<EuiThemeColorMode>(() => {
     if (isBrowser) {
       return (
-        (localStorage.getItem('theme') as EuiThemeColorMode) ??
+        (localStorage.getItem('colorMode') as EuiThemeColorMode) ??
         defaultState.colorMode
       );
     }
 
     return defaultState.colorMode;
   });
 
+  const [highContrastMode, setHighContrastMode] = useState<boolean | undefined>(
+    () => {
+      if (isBrowser) {
+        return localStorage.getItem('highContrastMode')
+          ? localStorage.getItem('highContrastMode') === 'true'
+          : defaultState.highContrastMode;
+      }
+
+      return defaultState.highContrastMode;
+    }
+  );
+
   const [theme, setTheme] = useState(defaultState.theme);
 
   const handleChangeTheme = (themeValue: string) => {
@@ -61,12 +83,19 @@ export const AppThemeProvider: FunctionComponent<PropsWithChildren> = ({
     setTheme((currentTheme) => themeObj ?? currentTheme);
   };
 
+  const handleChangeHighContrastMode = (highContrastMode: boolean) => {
+    localStorage.setItem('highContrastMode', highContrastMode.toString());
+    setHighContrastMode(highContrastMode);
+  };
+
   return (
     <AppThemeContext.Provider
       value={{
         colorMode,
+        highContrastMode,
         theme,
         changeColorMode: setColorMode,
+        changeHighContrastMode: handleChangeHighContrastMode,
         changeTheme: handleChangeTheme,
       }}
     >
@@ -75,6 +104,7 @@ export const AppThemeProvider: FunctionComponent<PropsWithChildren> = ({
         modify={EuiThemeOverrides}
         colorMode={colorMode}
         theme={theme.provider}
+        highContrastMode={highContrastMode}
       >
         {children}
       </EuiProvider>

packages/docusaurus-theme/src/components/theme_switcher/index.tsx

@@ -4,9 +4,13 @@ import {
   EuiAvatar,
   EuiButtonEmpty,
   euiFocusRing,
+  EuiHorizontalRule,
   EuiListGroup,
   EuiListGroupItem,
   EuiPopover,
+  EuiPopoverFooter,
+  EuiSwitch,
+  EuiSwitchEvent,
   useEuiMemoizedStyles,
   useEuiTheme,
   UseEuiTheme,
@@ -33,12 +37,21 @@ const getStyles = (euiThemeContext: UseEuiTheme) => {
 };
 
 export const ThemeSwitcher = () => {
-  const { euiTheme } = useEuiTheme();
+  const euiThemeContext = useEuiTheme();
+  const { euiTheme } = euiThemeContext;
+
   const [currentTheme, setCurrentTheme] = useState(
     AVAILABLE_THEMES[0]?.value ?? ''
   );
   const [isPopoverOpen, setPopoverOpen] = useState(false);
-  const { theme, changeTheme } = useContext(AppThemeContext);
+  const appContext = useContext(AppThemeContext);
+  const { theme, changeTheme, changeHighContrastMode } = appContext;
+
+  const isForcedContrastMode = euiThemeContext.highContrastMode === 'forced';
+  const _highContrastMode =
+    appContext.colorMode && !isForcedContrastMode
+      ? appContext.highContrastMode
+      : euiThemeContext.highContrastMode;
 
   useEffect(() => {
     changeTheme(currentTheme);
@@ -63,7 +76,7 @@ export const ThemeSwitcher = () => {
       isOpen={isPopoverOpen}
       closePopover={() => setPopoverOpen(false)}
       button={button}
-      panelPaddingSize="xs"
+      panelPaddingSize="none"
       repositionOnScroll
       aria-label="EUI theme list"
     >
@@ -89,6 +102,17 @@ export const ThemeSwitcher = () => {
             );
           })}
       </EuiListGroup>
+      <EuiPopoverFooter paddingSize="s">
+        <EuiSwitch
+          compressed
+          label="High contrast"
+          checked={!!_highContrastMode}
+          onChange={(e: EuiSwitchEvent) => {
+            changeHighContrastMode(!_highContrastMode);
+          }}
+          disabled={isForcedContrastMode}
+        />
+      </EuiPopoverFooter>
     </EuiPopover>
   );
 };

packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx

@@ -17,6 +17,7 @@ const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => {
     sidebar: css`
       --doc-sidebar-width: 258px;
       --doc-sidebar-hidden-width: 30px;
+      --ifm-toc-border-color: ${euiTheme.border.color};
 
       // ensure scrolling still works
       display: flex;
@@ -28,7 +29,7 @@ const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => {
   };
 };
 
-// converted from css moduels to Emotion
+// converted from css modules to Emotion
 const styles = {
   docSidebarContainer: css`
     display: none;

packages/eui-theme-borealis/src/variables/_components.ts

@@ -41,6 +41,8 @@ const component_colors: _EuiThemeComponentColors = {
 
   bottomBarBackground: SEMANTIC_COLORS.plainDark,
 
+  buttonGroupBackgroundDisabledSelected:
+    background_colors.backgroundBaseFormsControlDisabled,
   buttonGroupBorderColor: border_colors.borderBasePlain,
   buttonGroupBorderColorSelected: border_colors.borderBasePlain,
   buttonGroupFocusColor: brand_text_colors.textPrimary,
@@ -120,6 +122,9 @@ const component_colors: _EuiThemeComponentColors = {
 
   markdownFormatTableBorderColor: border_colors.borderBasePlain,
 
+  overlayMaskBackground: background_colors.backgroundBaseInteractiveOverlay,
+  overlayMaskBackgroundHighContrast: `rgba(${SEMANTIC_COLORS.shade140RGB}, 0.9)`,
+
   popoverPanelBackground: background_colors.backgroundBasePlain,
   popoverFooterBorderColor: border_colors.borderBaseSubdued,
 
@@ -130,6 +135,8 @@ const component_colors: _EuiThemeComponentColors = {
 
   selectableListItemBorderColor: border_colors.borderBaseSubdued,
 
+  skeletonBackgroundSkeletonMiddleHighContrast: `rgba(${SEMANTIC_COLORS.shade100RGB}, 0.04)`,
+
   superDatePickerBackgroundSuccees: background_colors.backgroundBaseSuccess,
 
   switchBackgroundOn: background_colors.backgroundFilledPrimary,
@@ -181,6 +188,8 @@ export const components: _EuiThemeComponents = {
       dark_background_colors.backgroundLightText,
     breadcrumbsApplicationColor: dark_text_colors.textSubdued,
 
+    buttonGroupBackgroundDisabledSelected:
+      dark_background_colors.backgroundBaseFormsControlDisabled,
     buttonGroupBorderColor: dark_border_colors.borderBasePlain,
     buttonGroupBorderColorSelected: dark_border_colors.borderBasePlain,
     buttonGroupFocusColor: dark_brand_text_colors.textPrimary,
@@ -258,6 +267,10 @@ export const components: _EuiThemeComponents = {
 
     markdownFormatTableBorderColor: dark_border_colors.borderBasePlain,
 
+    overlayMaskBackground:
+      dark_background_colors.backgroundBaseInteractiveOverlay,
+    overlayMaskBackgroundHighContrast: `rgba(${SEMANTIC_COLORS.shade140RGB}, 0.9)`,
+
     popoverPanelBackground: dark_background_colors.backgroundBasePlain,
     popoverFooterBorderColor: dark_border_colors.borderBaseSubdued,
 
@@ -268,6 +281,8 @@ export const components: _EuiThemeComponents = {
 
     selectableListItemBorderColor: dark_border_colors.borderBaseSubdued,
 
+    skeletonBackgroundSkeletonMiddleHighContrast: `rgba(${SEMANTIC_COLORS.plainLightRGB}, 0.3)`,
+
     switchBackgroundOn: dark_background_colors.backgroundFilledPrimary,
     switchBackgroundOff: dark_background_colors.backgroundFilledText,
     switchUncompressedBackgroundDisabled: