[CSS-in-JS] [Breaking] Deprecating EUI theme to Legacy

scripts/compile-scss.js

@@ -26,7 +26,7 @@ const postcssConfigurationWithMinification = {
 async function compileScssFiles(
   sourcePattern,
   destinationDirectory,
-  packageName
+  packageName,
 ) {
   try {
     await mkdir(destinationDirectory);
@@ -134,5 +134,6 @@ if (require.main === module) {
     process.exit(1);
   }
 
-  compileScssFiles(path.join('src', 'theme_*.scss'), 'dist', euiPackageName);
+  compileScssFiles(path.join('src/themes/legacy', 'legacy_*.scss'), 'dist', euiPackageName);
+  compileScssFiles(path.join('src/themes/amsterdam', 'theme_*.scss'), 'dist', euiPackageName);
 }

src-docs/src/components/codesandbox/link.js

@@ -5,6 +5,9 @@ import {
   hasDisplayToggles,
   listExtraDeps,
 } from '../../services';
+import { LEGACY_NAME_KEY } from '../../../../src/themes';
+
+import { ThemeContext } from '../with_theme';
 
 const pkg = require('../../../../package.json');
 
@@ -26,7 +29,6 @@ const getVersion = (packageName) => {
  * 5. Through regex we read the dependencies of both `content` and `display_toggles` and pass that to CS.
  * 6. We pass the files and dependencies as params to CS through a POST call.
  * */
-import { ThemeContext } from '../with_theme';
 
 const displayTogglesRawCode = require('!!raw-loader!../../views/form_controls/display_toggles')
   .default;
@@ -49,11 +51,11 @@ export const CodeSandboxLinkComponent = ({
 }) => {
   let cssFile;
   switch (context.theme) {
-    case 'amsterdam-light':
-      cssFile = '@elastic/eui/dist/eui_theme_amsterdam_light.css';
+    case `${LEGACY_NAME_KEY}_light`:
+      cssFile = '@elastic/eui/dist/eui_legacy_light.css';
       break;
-    case 'amsterdam-dark':
-      cssFile = '@elastic/eui/dist/eui_theme_amsterdam_dark.css';
+    case `${LEGACY_NAME_KEY}_dark`:
+      cssFile = '@elastic/eui/dist/eui_legacy_dark.css';
       break;
     case 'dark':
       cssFile = '@elastic/eui/dist/eui_theme_dark.css';

src-docs/src/components/guide_theme_selector/guide_figma_link.tsx

@@ -28,13 +28,13 @@ const GuideFigmaLinkComponent: React.FunctionComponent<GuideFigmaLinkProps> = ({
 }) => {
   const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
 
-  const isAmsterdam = context.theme.includes('amsterdam');
+  const isLegacy = context.theme.includes('legacy');
 
-  let href = 'https://www.figma.com/community/file/809845546262698150';
+  let href = 'https://www.figma.com/community/file/964536385682658129';
   const label = 'EUI Figma Design Library';
 
-  if (isAmsterdam) {
-    href = 'https://www.figma.com/community/file/964536385682658129';
+  if (isLegacy) {
+    href = 'https://www.figma.com/community/file/809845546262698150';
   }
 
   return isMobileSize ? (
@@ -49,7 +49,6 @@ const GuideFigmaLinkComponent: React.FunctionComponent<GuideFigmaLinkProps> = ({
       <EuiHeaderSectionItemButton
         notificationColor="subdued"
         aria-label={label}
-        // @ts-ignore TODO: FIX
         href={href}
       >
         <EuiIcon type={logoFigma} aria-hidden="true" />

src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx

@@ -31,9 +31,9 @@ const GuideSketchLinkComponent: React.FunctionComponent<GuideSketchLinkProps> =
     'https://github.com/elastic/eui/releases/download/v8.0.0/eui_sketch_8.0.0.zip';
   const label = 'EUI Sketch Library (download)';
 
-  const isAmsterdam = context.theme.includes('amsterdam');
+  const isLegacy = context.theme.includes('legacy');
 
-  if (isAmsterdam) return <></>;
+  if (!isLegacy) return <></>;
 
   return isMobileSize ? (
     <EuiButtonEmpty size="s" flush="both" iconType="logoSketch" href={href}>

src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx

@@ -1,19 +1,23 @@
 /* eslint-disable no-restricted-globals */
 import React, { useState } from 'react';
 
-import { EuiButton } from '../../../../src/components/button';
-import {
-  EuiContextMenuPanel,
-  EuiContextMenuItem,
-} from '../../../../src/components/context_menu';
-import { EuiPopover } from '../../../../src/components/popover';
-import { EuiHorizontalRule } from '../../../../src/components/horizontal_rule';
 import { useIsWithinBreakpoints } from '../../../../src/services/hooks/useIsWithinBreakpoints';
 import { EUI_THEME, EUI_THEMES } from '../../../../src/themes';
 
 import { ThemeContext } from '../with_theme';
 // @ts-ignore Not TS
 import { GuideLocaleSelector } from '../guide_locale_selector';
+import {
+  EuiText,
+  EuiTourStep,
+  EuiPopover,
+  EuiHorizontalRule,
+  EuiButton,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+  EuiLink,
+  EuiIcon,
+} from '../../../../src/components';
 
 type GuideThemeSelectorProps = {
   onToggleLocale: () => {};
@@ -31,6 +35,8 @@ export const GuideThemeSelector: React.FunctionComponent<GuideThemeSelectorProps
   );
 };
 
+const STORAGE_KEY = 'legeacy_theme_notification';
+
 // @ts-ignore Context has no type
 const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorProps> = ({
   context,
@@ -39,9 +45,19 @@ const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorPro
 }) => {
   const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
   const [isPopoverOpen, setPopover] = useState(false);
+  const [isOpen, setIsOpen] = useState(
+    localStorage.getItem(STORAGE_KEY) !== 'dismissed'
+  );
+
+  const onTourDismiss = () => {
+    setIsOpen(false);
+    localStorage.setItem(STORAGE_KEY, 'dismissed');
+  };
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
+    setIsOpen(false);
+    localStorage.setItem(STORAGE_KEY, 'dismissed');
   };
 
   const closePopover = () => {
@@ -84,27 +100,53 @@ const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorPro
   );
 
   return (
-    <EuiPopover
-      id="docsThemeSelector"
-      repositionOnScroll
-      button={button}
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}
-      panelPaddingSize="none"
-      anchorPosition="downRight"
-    >
-      <EuiContextMenuPanel size="s" items={items} />
-      {location.host.includes('803') && (
+    <EuiTourStep
+      content={
+        <EuiText style={{ maxWidth: 320 }}>
+          <p>
+            Amsterdam is now the default theme and the old theme is considered
+            legacy. Our{' '}
+            <EuiLink href="#/guidelines/getting-started#importing-styles">
+              setup instructions
+            </EuiLink>{' '}
+            will sync with the currently selected theme.
+          </p>
+        </EuiText>
+      }
+      isStepOpen={isOpen}
+      onFinish={onTourDismiss}
+      step={1}
+      stepsTotal={1}
+      title={
         <>
-          <EuiHorizontalRule margin="none" />
-          <div style={{ padding: 8 }}>
-            <GuideLocaleSelector
-              onToggleLocale={onToggleLocale}
-              selectedLocale={selectedLocale}
-            />
-          </div>
+          <EuiIcon type="bell" size="s" /> &nbsp; Theming update
         </>
-      )}
-    </EuiPopover>
+      }
+      footerAction={<EuiLink onClick={onTourDismiss}>Got it!</EuiLink>}
+      repositionOnScroll
+    >
+      <EuiPopover
+        id="docsThemeSelector"
+        repositionOnScroll
+        button={button}
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+        panelPaddingSize="none"
+        anchorPosition="downRight"
+      >
+        <EuiContextMenuPanel size="s" items={items} />
+        {location.host.includes('803') && (
+          <>
+            <EuiHorizontalRule margin="none" />
+            <div style={{ padding: 8 }}>
+              <GuideLocaleSelector
+                onToggleLocale={onToggleLocale}
+                selectedLocale={selectedLocale}
+              />
+            </div>
+          </>
+        )}
+      </EuiPopover>
+    </EuiTourStep>
   );
 };

src-docs/src/components/with_theme/theme_context.tsx

@@ -3,13 +3,11 @@ import { EUI_THEMES, EUI_THEME } from '../../../../src/themes';
 // @ts-ignore importing from a JS file
 import { applyTheme } from '../../services';
 import { EuiThemeProvider } from '../../../../src/services';
-import { EuiThemeAmsterdam } from '../../../../src/themes/eui-amsterdam/theme';
-import { EuiThemeDefault } from '../../../../src/themes/eui/theme';
 
 const THEME_NAMES = EUI_THEMES.map(({ value }) => value);
 
 const defaultState = {
-  theme: THEME_NAMES[2],
+  theme: THEME_NAMES[0],
   changeTheme: (themeValue: EUI_THEME['value']) => {
     applyTheme(themeValue);
   },
@@ -52,9 +50,7 @@ export class ThemeProvider extends React.Component<object, State> {
         }}
       >
         <EuiThemeProvider
-          theme={
-            theme.includes('amsterdam') ? EuiThemeAmsterdam : EuiThemeDefault
-          }
+          theme={EUI_THEMES.find((t) => t.value === theme)?.provider}
           colorMode={theme.includes('light') ? 'light' : 'dark'}
         >
           {children}

src-docs/src/index.js

@@ -11,18 +11,19 @@ import { NotFoundView } from './views/not_found/not_found_view';
 import { registerTheme, ExampleContext } from './services';
 
 import Routes from './routes';
-import themeLight from './theme_light.scss';
-import themeDark from './theme_dark.scss';
-import themeAmsterdamLight from './theme_amsterdam_light.scss';
-import themeAmsterdamDark from './theme_amsterdam_dark.scss';
+import legacyThemeLight from './legacy_light.scss';
+import legacyThemeDark from './legacy_dark.scss';
+import themeAmsterdamLight from './theme_light.scss';
+import themeAmsterdamDark from './theme_dark.scss';
 import { ThemeProvider } from './components/with_theme/theme_context';
 import ScrollToHash from './components/scroll_to_hash';
 import { LinkWrapper } from './views/link_wrapper';
+import { LEGACY_NAME_KEY } from '../../src/themes';
 
-registerTheme('light', [themeLight]);
-registerTheme('dark', [themeDark]);
-registerTheme('amsterdam-light', [themeAmsterdamLight]);
-registerTheme('amsterdam-dark', [themeAmsterdamDark]);
+registerTheme('light', [themeAmsterdamLight]);
+registerTheme('dark', [themeAmsterdamDark]);
+registerTheme(`${LEGACY_NAME_KEY}_light`, [legacyThemeLight]);
+registerTheme(`${LEGACY_NAME_KEY}_dark`, [legacyThemeDark]);
 
 // Set up app
 

src-docs/src/theme_amsterdam_dark.scss → src-docs/src/legacy_dark.scss

@@ -1,7 +1,8 @@
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
+@import url('https://rsms.me/inter/inter-ui.css');
 
-@import '../../src/theme_amsterdam_dark';
+@import '../../src/themes/legacy/legacy_dark';
 @import './components/index';
 @import './services/playground/index';
 @import './views/index';

src-docs/src/theme_amsterdam_light.scss → src-docs/src/legacy_light.scss

@@ -1,7 +1,8 @@
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
+@import url('https://rsms.me/inter/inter-ui.css');
 
-@import '../../src/theme_amsterdam_light';
+@import '../../src/themes/legacy/legacy_light';
 @import './components/index';
 @import './services/playground/index';
 @import './views/index';

src-docs/src/services/theme/theme.js

@@ -8,5 +8,5 @@ export function applyTheme(newTheme) {
   Object.keys(themes).forEach((theme) =>
     themes[theme].forEach((cssFile) => cssFile.unuse())
   );
-  themes[newTheme].forEach((cssFile) => cssFile.use());
+  themes[newTheme]?.forEach((cssFile) => cssFile.use());
 }

src-docs/src/theme_dark.scss

@@ -1,8 +1,7 @@
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
-@import url('https://rsms.me/inter/inter-ui.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');
 
-@import '../../src/theme_dark';
+@import '../../src/themes/amsterdam/theme_dark';
 @import './components/index';
 @import './services/playground/index';
 @import './views/index';

src-docs/src/theme_light.scss

@@ -1,8 +1,7 @@
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
-@import url('https://rsms.me/inter/inter-ui.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');
 
-@import '../../src/theme_light';
+@import '../../src/themes/amsterdam/theme_light';
 @import './components/index';
 @import './services/playground/index';
 @import './views/index';

src-docs/src/views/guidelines/_get_sass_vars.js

@@ -1,25 +1,26 @@
 import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_colors.scss';
-import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui/eui_colors_dark.scss';
-import lightAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss';
-import darkAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss';
+import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/legacy/_colors_dark.scss';
+import lightAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/amsterdam/_colors_light.scss';
+import darkAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/amsterdam/_colors_dark.scss';
 import { useContext } from 'react';
 import { ThemeContext } from '../../components';
+import { LEGACY_NAME_KEY } from '../../../../src/themes';
 
 export const useSassVars = () => {
   const themeContext = useContext(ThemeContext);
   let palette;
   switch (themeContext.theme) {
-    case 'amsterdam-dark':
-      palette = { ...darkColors, ...darkAmsterdamColors };
+    case `${LEGACY_NAME_KEY}_light`:
+      palette = lightColors;
       break;
-    case 'amsterdam-light':
-      palette = { ...lightColors, ...lightAmsterdamColors };
+    case `${LEGACY_NAME_KEY}_dark`:
+      palette = { ...lightColors, ...darkColors };
       break;
     case 'dark':
-      palette = darkColors;
+      palette = { ...lightColors, ...darkColors, ...darkAmsterdamColors };
       break;
     default:
-      palette = lightColors;
+      palette = { ...lightColors, ...lightAmsterdamColors };
       break;
   }