[Visual Refresh] Remove legacy Amsterdam theme #9090

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

mgadewoll merged 22 commits into elastic:main from mgadewoll:theme/remove-amsterdam

Oct 27, 2025

packages/docusaurus-theme/changelogs/upcoming/9090.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    - Added `HighContrastModeToggle` component and adds it as main navbar item
+    **Breaking changes**
+    - Removed `ThemeSwitcher` component

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

-Original file line number
+Diff line change
@@ -0,0 +1,28 @@
+    import { useContext } from 'react';
+    import { useEuiTheme } from '@elastic/eui';
+    import { NavbarItem } from '../navbar_item';
+    import { AppThemeContext } from '../theme_context';
+    export const HighContrastModeToggle = () => {
+      const euiThemeContext = useEuiTheme();
+      const appContext = useContext(AppThemeContext);
+      const { changeHighContrastMode } = appContext;
+      const isForcedContrastMode = euiThemeContext.highContrastMode === 'forced';
+      const _highContrastMode =
+        appContext.highContrastMode && !isForcedContrastMode
+          ? appContext.highContrastMode
+          : euiThemeContext.highContrastMode;
+      return (
+        <NavbarItem
+          title={'Toggle high contrast mode'}
+          icon="contrast"
+          isMenuItem={false}
+          isSelected={!!_highContrastMode}
+          onClick={() => changeHighContrastMode(!_highContrastMode)}
+        />
+      );
+    };

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ import { @@
       EuiIcon,
       ExclusiveUnion,
       IconType,
+      mathWithUnits,
       PropsForAnchor,
       PropsForButton,
       useEuiMemoizedStyles,
@@ Expand All / @@ -26,6 +27,7 @@ type SharedProps = { @@
       icon: IconType;
       showLabel?: boolean;
       isMenuItem?: boolean;
+      isSelected?: boolean;
     } & CommonProps;
     type Props = ExclusiveUnion<
@@ Expand All / @@ -44,8 +46,7 @@ export const getStyles = ({ euiTheme }: UseEuiTheme) => ({ @@
         transition: background var(--ifm-transition-fast);
         &:hover {
-          background-color: ${euiTheme.components.buttons
-            .backgroundTextHover};
+          background-color: ${euiTheme.components.buttons.backgroundTextHover};
           color: currentColor;
         }
       `,
@@ Expand Down Expand Up / @@ -74,6 +75,10 @@ export const getStyles = ({ euiTheme }: UseEuiTheme) => ({ @@
       disabled: css`
         cursor: not-allowed;
       `,
+      selected: css`
+        background-color: ${euiTheme.colors.backgroundFilledText};
+        color: ${euiTheme.colors.textInverse};
+      `,
       title: css`
         @media (min-width: 997px) {
           display: none;
@@ Expand All / @@ -97,6 +102,8 @@ export const NavbarItem = (props: Props) => { @@
         target,
         showLabel,
         isMenuItem = true,
+        isSelected,
+        css,
       } = props;
       const isBrowser = useIsBrowser();
@@ Expand All / @@ -109,6 +116,7 @@ export const NavbarItem = (props: Props) => { @@
         styles.item,
         isMenuItem ? styles.menuItem : styles.navItem,
         !isBrowser && styles.disabled,
+        isSelected && styles.selected,
         isDarkMode && styles.darkMode,
       ];
@@ Expand Down Expand Up / @@ -148,6 +156,7 @@ export const NavbarItem = (props: Props) => { @@
           title={title}
           aria-label={title}
           aria-live="polite"
+          aria-pressed={isSelected != null ? isSelected : undefined}
         >
           {content}
         </button>
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -11,19 +11,15 @@ import { @@
       FunctionComponent,
       PropsWithChildren,
       useContext,
-      useLayoutEffect,
+      useEffect,
       useState,
     } from 'react';
     import useIsBrowser from '@docusaurus/useIsBrowser';
     import createCache from '@emotion/cache';
     import { CacheProvider } from '@emotion/react';
-    import {
-      EUI_THEME,
-      EuiProvider,
-      EuiThemeAmsterdam,
-      EuiThemeColorMode,
-    } from '@elastic/eui';
+    import { EuiProvider, EuiThemeColorMode } from '@elastic/eui';
     import { EuiThemeBorealis } from '@elastic/eui-theme-borealis';
+    import { type EUI_THEME } from '@elastic/eui-theme-common';
     import { EuiThemeOverrides } from './theme_overrides';
@@ Expand All / @@ -33,11 +29,6 @@ export const AVAILABLE_THEMES: EUI_THEME[] = [ @@
         value: EuiThemeBorealis.key,
         provider: EuiThemeBorealis,
       },
-      {
-        text: 'Amsterdam',
-        value: EuiThemeAmsterdam.key,
-        provider: EuiThemeAmsterdam,
-      },
     ];
     const EUI_COLOR_MODES = ['light', 'dark'] as const;
@@ Expand Down Expand Up @@
       });
       const [highContrastMode, setHighContrastMode] = useState<boolean | undefined>(
-        () => {
-          if (isBrowser) {
-            return localStorage.getItem('highContrastMode')
-              ? localStorage.getItem('highContrastMode') === 'true'
-              : defaultState.highContrastMode;
-          }
-          return defaultState.highContrastMode;
-        }
+        false
       );
-      const [theme, setTheme] = useState(defaultState.theme);
+      const getHighContrastModeSetting = () => {
+        return localStorage?.getItem('highContrastMode')
+          ? localStorage?.getItem('highContrastMode') === 'true'
+          : defaultState.highContrastMode;
+      };
+      useEffect(() => {
+        if (isBrowser) {
+          setHighContrastMode(getHighContrastModeSetting());
+        }
+      }, [isBrowser]);
+      const [theme, setTheme] = useState<EUI_THEME>(defaultState.theme);
       const handleChangeTheme = (themeValue: string) => {
         const matchedTheme = AVAILABLE_THEMES.find((t) => t.value === themeValue);
@@ Expand Down @@

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

This file was deleted.

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -10,10 +10,12 @@ import { JSX } from 'react'; @@
     import { css } from '@emotion/react';
     import Translate from '@docusaurus/Translate';
     import type { Props } from '@theme-original/EditThisPage';
-    import { EuiButton, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
-    // @ts-ignore - eui only has module declarations for '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button'
-    // but importing from /src results in "Module not found" error
-    import { euiButtonColor } from '@elastic/eui/lib/global_styling/mixins/_button';
+    import {
+      EuiButton,
+      euiButtonColor,
+      useEuiMemoizedStyles,
+      UseEuiTheme,
+    } from '@elastic/eui';
     const getStyles = (theme: UseEuiTheme) => {
       const buttonColor = euiButtonColor(theme, 'primary');
@@ Expand Down @@

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -39,7 +39,7 @@ import {
  
      VersionSwitcher,

      VersionSwitcherProps,

    } from '../../../components/version_switcher';

    import { ThemeSwitcher } from '../../../components/theme_switcher';

    import { HighContrastModeToggle } from '../../../components/high_contrast_mode_toggle';

    const DOCS_PATH = '/docs';

    @@ -248,13 +248,12 @@ export default function NavbarContent({
  
                  </NavbarSearch>

                )}

                <NavbarColorModeToggle className="colorModeToggle" />

                <NavbarItems items={rightItems} />

                {isBrowser && (

                  <div css={styles.themeSwitcher}>

                    <ThemeSwitcher />

                    <HighContrastModeToggle />

                  </div>

                )}

                <NavbarItems items={rightItems} />

              </>

            }

          />

packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     import { css } from '@emotion/react';
     import useIsBrowser from '@docusaurus/useIsBrowser';
-    import { ThemeSwitcher } from '../../../../components/theme_switcher';
     import {
       VersionSwitcher,
       VersionSwitcherProps,
     } from '../../../../components/version_switcher';
+    import { HighContrastModeToggle } from '../../../../components/high_contrast_mode_toggle';
     const getStyles = ({ euiTheme }: UseEuiTheme) => ({
       sidebar: css`
@@ Expand Down Expand Up / @@ -81,8 +81,8 @@ export default function NavbarMobileSidebarHeader({ @@
           {isBrowser && versionSwitcherOptions && (
             <VersionSwitcher {...versionSwitcherOptions} />
           )}
-          {isBrowser && <ThemeSwitcher />}
           <NavbarColorModeToggle />
+          {isBrowser && <HighContrastModeToggle />}
           <CloseButton />
         </div>
       );
@@ Expand Down @@

packages/eui-theme-borealis/.stylelintrc.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -70,12 +70,6 @@ module.exports = { @@
         {
           // TODO: Remove Sass-specific config & rules once we're completely off Sass
           files: ['**/*.scss'],
-          ignoreFiles: [
-            'generator-eui/**/*.scss',
-            'src/global_styling/react_date_picker/**/*.scss',
-            'src/themes/amsterdam/global_styling/react_date_picker/**/*.scss',
-            'src/components/date_picker/react-datepicker/**/*.scss',
-          ],
           extends: [
             'stylelint-config-standard-scss',
             'stylelint-config-prettier-scss',
@@ Expand Down @@

packages/eui-theme-borealis/changelogs/upcoming/9090.md

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+    **Breaking changes**
+    - Removed `euiTheme.flags.hasGlobalFocusColor`
+    - Removed `euiTheme.flags.hasVisColorAdjustment`
+    - Removed `euiTheme.flags.buttonVariant` and `euiTheme.flags.formVariant`
+    - Removed `euiTheme.components.keyPadMenuItemBackgroundDisabledSelect`

packages/eui-theme-borealis/src/index.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -40,10 +40,6 @@ export const euiThemeBorealis: EuiThemeShape = { @@
       focus,
       components,
       flags: {
-        hasGlobalFocusColor: true,
-        hasVisColorAdjustment: false,
-        buttonVariant: 'refresh',
-        formVariant: 'refresh',
         shadowVariant: 'refresh',
       },
       overrides,
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Visual Refresh] Remove legacy Amsterdam theme #9090

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!