[Theme] Base theme setup

.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh

@@ -33,7 +33,7 @@ analytics_vault="secret/ci/elastic-eui/analytics"
 export DOCS_BASE_URL="/${bucket_directory}"
 export DOCS_GOOGLE_TAG_MANAGER_ID="$(retry 5 vault read -field=google_tag_manager_id "${analytics_vault}")"
 
-yarn workspaces foreach -Rpt --from @elastic/eui-website run build
+yarn workspace @elastic/eui-website run build:workspaces
 
 echo "+++ Configuring environment for website deployment"
 

.buildkite/scripts/pipelines/pipeline_test.sh

@@ -29,53 +29,53 @@ COMMAND=""
 case $TEST_TYPE in
   lint)
     echo "[TASK]: Running linters"
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui lint"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui lint"
     ;;
 
   unit:ts)
     echo "[TASK]: Running .ts and .js unit tests"
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=non-react"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=non-react"
     ;;
 
   unit:tsx:16)
     echo "[TASK]: Running Jest .tsx tests against React 16"
     DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=jest_token_react16 "${buildkite_analytics_vault}")")
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=16 --testMatch=react"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=16 --testMatch=react"
     ;;
 
   unit:tsx:17)
     echo "[TASK]: Running Jest .tsx tests against React 17"
     DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=jest_token_react17 "${buildkite_analytics_vault}")")
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=17 --testMatch=react"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=17 --testMatch=react"
     ;;
 
   unit:tsx)
     echo "[TASK]: Running Jest .tsx tests against React 18"
     DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=jest_token_react18 "${buildkite_analytics_vault}")")
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=react"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=react"
     ;;
 
   cypress:16)
     echo "[TASK]: Running Cypress tests against React 16"
     DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=cypress_token_react16 "${buildkite_analytics_vault}")")
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=16"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=16"
     ;;
 
   cypress:17)
     echo "[TASK]: Running Cypress tests against React 17"
     DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=cypress_token_react17 "${buildkite_analytics_vault}")")
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=17"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=17"
     ;;
 
   cypress:18)
     echo "[TASK]: Running Cypress tests against React 18"
     DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=cypress_token_react18 "${buildkite_analytics_vault}")")
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048"
     ;;
 
   cypress:a11y)
     echo "[TASK]: Running Cypress accessibility tests against React 18"
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui run test-cypress-a11y --node-options=--max_old_space_size=2048"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui run test-cypress-a11y --node-options=--max_old_space_size=2048"
     ;;
 
   *)

.buildkite/scripts/release/step_build.sh

@@ -10,6 +10,7 @@ echo "+++ :yarn: Installing dependencies"
 yarn
 
 echo "+++ :yarn: Building @elastic/eui"
+yarn build:workspaces
 yarn build
 
 echo "+++ :yarn: Built @elastic/eui"

packages/docusaurus-theme/package.json

@@ -34,8 +34,9 @@
     "@docusaurus/theme-common": "^3.5.2",
     "@docusaurus/utils-validation": "^3.5.2",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "94.5.0",
+    "@elastic/eui": "workspace:^",
     "@elastic/eui-docgen": "workspace:^",
+    "@elastic/eui-theme-borealis": "workspace:^",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@types/react-window": "^1.8.8",

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

@@ -91,9 +91,9 @@ export const NavbarItem = (props: Props) => {
   } = props;
 
   const isBrowser = useIsBrowser();
-  const { theme } = useContext(AppThemeContext);
+  const { colorMode } = useContext(AppThemeContext);
 
-  const isDarkMode = theme === 'dark';
+  const isDarkMode = colorMode === 'dark';
 
   const styles = useEuiMemoizedStyles(getStyles);
   const cssStyles = [

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

@@ -5,17 +5,39 @@ import {
   useState,
 } from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import { EUI_THEMES, EuiProvider, EuiThemeColorMode } from '@elastic/eui';
+import {
+  EuiProvider,
+  EuiThemeAmsterdam,
+  EuiThemeColorMode,
+} from '@elastic/eui';
+import { EuiThemeBorealis } from '@elastic/eui-theme-borealis';
 
 import { EuiThemeOverrides } from './theme_overrides';
 
-const EUI_THEME_NAMES = EUI_THEMES.map(
-  ({ value }) => value
-) as EuiThemeColorMode[];
+const EXPERIMENTAL_THEMES = [
+  {
+    text: 'Borealis',
+    value: EuiThemeBorealis.key,
+    provider: EuiThemeBorealis,
+  },
+];
+
+export const AVAILABLE_THEMES = [
+  {
+    text: 'Amsterdam',
+    value: EuiThemeAmsterdam.key,
+    provider: EuiThemeAmsterdam,
+  },
+  ...EXPERIMENTAL_THEMES,
+];
+
+const EUI_COLOR_MODES = ['light', 'dark'] as EuiThemeColorMode[];
 
 const defaultState = {
-  theme: EUI_THEME_NAMES[0] as EuiThemeColorMode,
-  changeTheme: (themeValue: EuiThemeColorMode) => {},
+  colorMode: EUI_COLOR_MODES[0] as EuiThemeColorMode,
+  changeColorMode: (colorMode: EuiThemeColorMode) => {},
+  theme: AVAILABLE_THEMES[0]!,
+  changeTheme: (themeValue: string) => {},
 };
 
 export const AppThemeContext = createContext(defaultState);
@@ -24,25 +46,39 @@ export const AppThemeProvider: FunctionComponent<PropsWithChildren> = ({
   children,
 }) => {
   const isBrowser = useIsBrowser();
-  const [theme, setTheme] = useState<EuiThemeColorMode>(() => {
+  const [colorMode, setColorMode] = useState<EuiThemeColorMode>(() => {
     if (isBrowser) {
-      return localStorage.getItem('theme') as EuiThemeColorMode ?? defaultState.theme;
+      return (
+        (localStorage.getItem('theme') as EuiThemeColorMode) ??
+        defaultState.colorMode
+      );
     }
 
-    return defaultState.theme;
+    return defaultState.colorMode;
   });
 
+  const [theme, setTheme] = useState(defaultState.theme);
+
+  const handleChangeTheme = (themeValue: string) => {
+    const themeObj = AVAILABLE_THEMES.find((t) => t.value === themeValue);
+
+    setTheme((currentTheme) => themeObj ?? currentTheme);
+  };
+
   return (
     <AppThemeContext.Provider
       value={{
+        colorMode,
         theme,
-        changeTheme: setTheme,
+        changeColorMode: setColorMode,
+        changeTheme: handleChangeTheme,
       }}
     >
       <EuiProvider
         globalStyles={false}
         modify={EuiThemeOverrides}
-        colorMode={theme}
+        colorMode={colorMode}
+        theme={theme.provider}
       >
         {children}
       </EuiProvider>

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

@@ -0,0 +1,94 @@
+import { useContext, useEffect, useState } from 'react';
+import { css } from '@emotion/react';
+import {
+  EuiAvatar,
+  EuiButtonEmpty,
+  euiFocusRing,
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiPopover,
+  useEuiMemoizedStyles,
+  useEuiTheme,
+  UseEuiTheme,
+} from '@elastic/eui';
+
+import { AppThemeContext, AVAILABLE_THEMES } from '../theme_context';
+
+const getStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    button: css`
+      padding: 0;
+    `,
+    listItem: css`
+      .euiListGroupItem__button:focus-visible {
+        // overriding the global "outset" style to ensure the focus style is not cut off
+        ${euiFocusRing(euiThemeContext, 'inset', {
+          color: euiTheme.colors.primary,
+        })};
+      }
+    `,
+  };
+};
+
+export const ThemeSwitcher = () => {
+  const { euiTheme } = useEuiTheme();
+  const [currentTheme, setCurrentTheme] = useState(
+    AVAILABLE_THEMES[0]?.value ?? ''
+  );
+  const [isPopoverOpen, setPopoverOpen] = useState(false);
+  const { theme, changeTheme } = useContext(AppThemeContext);
+
+  useEffect(() => {
+    changeTheme(currentTheme);
+  }, [currentTheme]);
+
+  const styles = useEuiMemoizedStyles(getStyles);
+
+  const button = (
+    <EuiButtonEmpty
+      size="s"
+      color="text"
+      css={styles.button}
+      onClick={() => setPopoverOpen((isOpen) => !isOpen)}
+      aria-label={`${theme.text} theme`}
+    >
+      <EuiAvatar name={theme.text} size="s" color={euiTheme.colors.primary} />
+    </EuiButtonEmpty>
+  );
+
+  return (
+    <EuiPopover
+      isOpen={isPopoverOpen}
+      closePopover={() => setPopoverOpen(false)}
+      button={button}
+      panelPaddingSize="xs"
+      repositionOnScroll
+      aria-label="EUI theme list"
+    >
+      <EuiListGroup>
+        {AVAILABLE_THEMES &&
+          AVAILABLE_THEMES.map((theme) => {
+            const isCurrentTheme = currentTheme === theme.value;
+
+            const handleOnClick = () => {
+              setCurrentTheme(theme.value);
+            };
+
+            return (
+              <EuiListGroupItem
+                key={theme.value}
+                css={styles.listItem}
+                label={theme.text}
+                size="xs"
+                isActive={isCurrentTheme}
+                color={isCurrentTheme ? 'primary' : 'text'}
+                onClick={handleOnClick}
+              />
+            );
+          })}
+      </EuiListGroup>
+    </EuiPopover>
+  );
+};

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(value);
   }, []);
 
-  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/Logo/index.tsx

@@ -62,8 +62,8 @@ function LogoThemedImage({
   alt: string;
   imageClassName?: string;
 }) {
-  const { theme } = useContext(AppThemeContext);
-  const isDarkMode = theme === 'dark';
+  const { colorMode } = useContext(AppThemeContext);
+  const isDarkMode = colorMode === 'dark';
 
   const styles = useEuiMemoizedStyles(getStyles);
 

packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx

@@ -15,7 +15,13 @@ import SearchBar from '@theme-original/SearchBar';
 import NavbarMobileSidebarToggle from '@theme-original/Navbar/MobileSidebar/Toggle';
 import NavbarLogo from '@theme-original/Navbar/Logo';
 import NavbarSearch from '@theme-original/Navbar/Search';
-import { euiFocusRing, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
+import {
+  euiFocusRing,
+  euiTextTruncate,
+  useEuiMemoizedStyles,
+  UseEuiTheme,
+  isExperimentalThemeEnabled,
+} from '@elastic/eui';
 import {
   euiFormControlText,
   euiFormVariables,
@@ -24,6 +30,7 @@ import {
 import euiVersions from '@site/static/versions.json';
 
 import { VersionSwitcher } from '../../../components/version_switcher';
+import { ThemeSwitcher } from '../../../components/theme_switcher';
 
 const DOCS_PATH = '/docs';
 
@@ -67,6 +74,10 @@ const getStyles = (euiThemeContext: UseEuiTheme) => {
       @media (min-width: 997px) {
         gap: ${euiTheme.size.l};
       }
+
+      .navbar__link {
+        ${euiTextTruncate()}
+      }
     `,
     navbarItemsRight: css`
       gap: ${euiTheme.size.s};
@@ -125,6 +136,11 @@ const getStyles = (euiThemeContext: UseEuiTheme) => {
         display: none;
       }
     `,
+    themeSwitcher: css`
+      @media (max-width: 996px) {
+        display: none;
+      }
+    `,
   };
 };
 
@@ -218,6 +234,12 @@ export default function NavbarContent(): JSX.Element {
             )}
             <NavbarColorModeToggle className="colorModeToggle" />
             <NavbarItems items={rightItems} />
+
+            {isBrowser && isExperimentalThemeEnabled() && (
+              <div css={styles.themeSwitcher}>
+                <ThemeSwitcher />
+              </div>
+            )}
           </>
         }
       />