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/package.json

@@ -34,7 +34,7 @@
     "@docusaurus/theme-common": "^3.5.2",
     "@docusaurus/utils-validation": "^3.5.2",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "97.2.0",
+    "@elastic/eui": "workspace:^",
     "@elastic/eui-docgen": "workspace:^",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",

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

@@ -6,6 +6,7 @@ import {
   useEuiMemoizedStyles,
   UseEuiTheme,
 } from '@elastic/eui';
+import { highContrastModeStyles } from '@elastic/eui/lib/global_styling/functions/high_contrast';
 import { css } from '@emotion/react';
 import { GuidelineType } from './types';
 import { GuidelineText } from './guideline_text';
@@ -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, highContrastMode } = 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

@@ -9,13 +9,13 @@ import { EUI_THEMES, EuiProvider, EuiThemeColorMode } from '@elastic/eui';
 
 import { EuiThemeOverrides } from './theme_overrides';
 
-const EUI_THEME_NAMES = EUI_THEMES.map(
-  ({ value }) => value
-) as EuiThemeColorMode[];
+const EUI_THEME_NAMES = EUI_THEMES.map(({ value }) => value);
 
 const defaultState = {
-  theme: EUI_THEME_NAMES[0] as EuiThemeColorMode,
+  theme: EUI_THEME_NAMES[0] as string,
+  colorMode: 'LIGHT' as EuiThemeColorMode,
   changeTheme: (themeValue: EuiThemeColorMode) => {},
+  changeColorMode: (colorMode: EuiThemeColorMode) => {},
 };
 
 export const AppThemeContext = createContext(defaultState);
@@ -24,25 +24,42 @@ export const AppThemeProvider: FunctionComponent<PropsWithChildren> = ({
   children,
 }) => {
   const isBrowser = useIsBrowser();
-  const [theme, setTheme] = useState<EuiThemeColorMode>(() => {
+
+  const [theme, setTheme] = useState<string>(() => {
     if (isBrowser) {
-      return localStorage.getItem('theme') as EuiThemeColorMode ?? defaultState.theme;
+      return (
+        (localStorage.getItem('theme') as EuiThemeColorMode) ??
+        defaultState.theme
+      );
     }
 
     return defaultState.theme;
   });
 
+  const [colorMode, setColorMode] = useState<EuiThemeColorMode>(() => {
+    if (isBrowser) {
+      return (
+        (localStorage.getItem('colorMode') as EuiThemeColorMode) ??
+        defaultState.colorMode
+      );
+    }
+
+    return defaultState.colorMode;
+  });
+
   return (
     <AppThemeContext.Provider
       value={{
-        theme,
+        theme: theme,
+        colorMode,
         changeTheme: setTheme,
+        changeColorMode: setColorMode,
       }}
     >
       <EuiProvider
         globalStyles={false}
         modify={EuiThemeOverrides}
-        colorMode={theme}
+        colorMode={colorMode}
       >
         {children}
       </EuiProvider>

packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx

@@ -17,20 +17,20 @@ function ColorModeToggle({
   onChange,
   ...rest
 }: WrappedProps): JSX.Element {
-  const { theme, changeTheme } = useContext(AppThemeContext);
+  const { colorMode, changeColorMode } = useContext(AppThemeContext);
 
   useEffect(() => {
-    changeTheme(value);
+    changeColorMode;
   }, []);
 
-  const handleOnChange = (themeName: EuiThemeColorMode) => {
-    changeTheme(themeName);
-    onChange?.(themeName);
+  const handleOnChange = (colorMode: EuiThemeColorMode) => {
+    changeColorMode(colorMode);
+    onChange?.(colorMode);
   };
 
   return (
     <OriginalColorModeToggle
-      value={theme}
+      value={colorMode}
       onChange={handleOnChange}
       {...rest}
     />

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;