Remove legacy theme

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Changed the I18n token `euiDataGridToolbar.fullScreenButton` to `euiFullscreenSelector.fullscreenButton`, and its text to `Enter fullscreen` (with no space) ([#5680](https://github.com/elastic/eui/pull/5680))
 - Changed the I18n token `euiDataGridToolbar.fullScreenButtonActive` to `euiFullscreenSelector.fullscreenButtonActive`, and its text to `Exit fullscreen` (with no space) ([#5680](https://github.com/elastic/eui/pull/5680))
+- Removed compiled legacy theme styles ([#5688](https://github.com/elastic/eui/pull/5688))
 
 ## [`51.0.0`](https://github.com/elastic/eui/tree/v51.0.0)
 

scripts/compile-scss.js

@@ -146,13 +146,6 @@ if (require.main === module) {
     process.exit(1);
   }
 
-  compileScssFiles({
-    sourcePattern: path.join('src/themes/legacy', 'legacy_*.scss'), 
-    destinationDirectory: 'dist',
-    docsVariablesDirectory: 'src-docs/src/views/theme/_json',
-    packageName: euiPackageName
-  });
-
   compileScssFiles({
     sourcePattern: path.join('src/themes/amsterdam', 'theme_*.scss'), 
     destinationDirectory: 'dist',

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

@@ -5,7 +5,6 @@ import {
   hasDisplayToggles,
   listExtraDeps,
 } from '../../services';
-import { LEGACY_NAME_KEY } from '../../../../src/themes';
 
 import { ThemeContext } from '../with_theme';
 
@@ -25,7 +24,7 @@ const getVersion = (packageName) => {
  * 1. A `content` prop is passed containing the src-doc example code we need to manipulate for CS.
  * 2. If no content exists (like the homepage link), we'll make a hello world file bundled with EUI and call it a day.
  * 3. If content exists, we build an `demo.js/tsx` (depending on the passed source type) file with a <Demo> component based on the original content.
- * 4. If the default theme is in use, create an `index.html file in `./public` and an `index.js` file alongside to provide global styles.
+ * 4. Create an `index.html file in `./public` and an `index.js` file alongside to provide global styles.
  * 5. If content contains `DisplayToggles`, we also generate a `display_toggles.js` file alongside to import.
  * 6. Through regex we read the dependencies of both `content` and `display_toggles` and pass that to CS.
  * 7. We pass the files, dependencies, and queries as params to CS through a POST call.
@@ -52,12 +51,6 @@ export const CodeSandboxLinkComponent = ({
 }) => {
   let cssFile;
   switch (context.theme) {
-    case `${LEGACY_NAME_KEY}_light`:
-      cssFile = '@elastic/eui/dist/eui_legacy_light.css';
-      break;
-    case `${LEGACY_NAME_KEY}_dark`:
-      cssFile = '@elastic/eui/dist/eui_legacy_dark.css';
-      break;
     case 'dark':
       cssFile = '@elastic/eui/dist/eui_theme_dark.css';
       break;
@@ -66,8 +59,6 @@ export const CodeSandboxLinkComponent = ({
       break;
   }
 
-  const isLegacyTheme = context.theme.includes(LEGACY_NAME_KEY);
-
   const providerPropsObject = {};
   // Only add configuration if it isn't the default
   if (context.theme.includes('dark')) {
@@ -159,35 +150,20 @@ export const Demo = () => (<EuiButton>Hello world!</EuiButton>);
         content: `import '${cssFile}';
 import ReactDOM from 'react-dom';
 import React from 'react';
-${
-  /* 4 */
-  !isLegacyTheme
-    ? `import createCache from '@emotion/cache';
+import createCache from '@emotion/cache';
 import { EuiProvider } from '@elastic/eui';
-`
-    : ''
-}
+
 import { Demo } from './demo';
-${
-  /* 4 */
-  !isLegacyTheme
-    ? `
+
 const cache = createCache({
   key: 'codesandbox',
   container: document.querySelector('meta[name="global-styles"]'),
 });
-`
-    : ''
-}
+
 ReactDOM.render(
-  ${
-    /* 4 */
-    isLegacyTheme
-      ? '<Demo />'
-      : `<EuiProvider cache={cache} ${providerProps}>
+  <EuiProvider cache={cache} ${providerProps}>
     <Demo />
-  </EuiProvider>`
-  },
+  </EuiProvider>,
   document.getElementById('root')
 );`,
       },

src-docs/src/components/guide_page/guide_page_header.tsx

@@ -15,11 +15,7 @@ import { EuiButtonEmpty } from '../../../../src/components/button';
 // @ts-ignore Not TS
 import { CodeSandboxLink } from '../../components/codesandbox/link';
 import logoEUI from '../../images/logo-eui.svg';
-import {
-  GuideThemeSelector,
-  GuideSketchLink,
-  GuideFigmaLink,
-} from '../guide_theme_selector';
+import { GuideThemeSelector, GuideFigmaLink } from '../guide_theme_selector';
 
 const pkg = require('../../../../package.json');
 
@@ -111,7 +107,6 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
         closePopover={() => setMobilePopoverIsOpen(false)}
       >
         {renderGithub()}
-        <GuideSketchLink />
         <GuideFigmaLink />
         {renderCodeSandbox()}
       </EuiPopover>
@@ -132,7 +127,6 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
           selectedLocale={selectedLocale}
         />,
         renderGithub(),
-        <GuideSketchLink key="sketch" />,
         <GuideFigmaLink key="figma" />,
         renderCodeSandbox(),
       ];

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

@@ -23,20 +23,12 @@ export const GuideFigmaLink: React.FunctionComponent<GuideFigmaLinkProps> = () =
 };
 
 // @ts-ignore Context has no type
-const GuideFigmaLinkComponent: React.FunctionComponent<GuideFigmaLinkProps> = ({
-  context,
-}) => {
+const GuideFigmaLinkComponent: React.FunctionComponent<GuideFigmaLinkProps> = () => {
   const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
 
-  const isLegacy = context.theme.includes('legacy');
-
-  let href = 'https://www.figma.com/community/file/964536385682658129';
+  const href = 'https://www.figma.com/community/file/964536385682658129';
   const label = 'EUI Figma Design Library';
 
-  if (isLegacy) {
-    href = 'https://www.figma.com/community/file/809845546262698150';
-  }
-
   return isMobileSize ? (
     <EuiButtonEmpty size="s" flush="both" iconType={logoFigma} href={href}>
       {label}

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

@@ -2,9 +2,9 @@
 import React, { useState } from 'react';
 
 import { useIsWithinBreakpoints } from '../../../../src/services/hooks/useIsWithinBreakpoints';
-import { EUI_THEME, EUI_THEMES } from '../../../../src/themes';
+import { EUI_THEME } from '../../../../src/themes';
 
-import { ThemeContext } from '../with_theme';
+import { ThemeContext, SUPPORTED_THEMES } from '../with_theme';
 // @ts-ignore Not TS
 import { GuideLocaleSelector } from '../guide_locale_selector';
 import {
@@ -37,7 +37,6 @@ export const GuideThemeSelector: React.FunctionComponent<GuideThemeSelectorProps
 
 const STORAGE_KEY = 'legeacy_theme_notification';
 
-// @ts-ignore Context has no type
 const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorProps> = ({
   context,
   onToggleLocale,
@@ -65,13 +64,14 @@ const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorPro
   };
 
   const currentTheme: EUI_THEME =
-    EUI_THEMES.find((theme) => theme.value === context.theme) || EUI_THEMES[0];
+    SUPPORTED_THEMES.find((theme) => theme.value === context.theme) ||
+    SUPPORTED_THEMES[0];
 
   const getIconType = (value: EUI_THEME['value']) => {
     return value === currentTheme.value ? 'check' : 'empty';
   };
 
-  const items = EUI_THEMES.map((theme) => {
+  const items = SUPPORTED_THEMES.map((theme) => {
     return (
       <EuiContextMenuItem
         key={theme.value}
@@ -104,8 +104,8 @@ const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorPro
       content={
         <EuiText style={{ maxWidth: 320 }}>
           <p>
-            Amsterdam is now the default theme and the old theme is considered
-            legacy. Our{' '}
+            Amsterdam is now the default theme and the old theme is deprecated.
+            Our{' '}
             <EuiLink href="#/guidelines/getting-started#importing-styles">
               setup instructions
             </EuiLink>{' '}

src-docs/src/components/guide_theme_selector/index.ts

@@ -1,3 +1,2 @@
 export { GuideThemeSelector } from './guide_theme_selector';
 export { GuideFigmaLink } from './guide_figma_link';
-export { GuideSketchLink } from './guide_sketch_link';

src-docs/src/components/with_theme/index.ts

@@ -1,2 +1,2 @@
-export { ThemeProvider, ThemeContext } from './theme_context';
+export { ThemeProvider, ThemeContext, SUPPORTED_THEMES } from './theme_context';
 export { LanguageSelector } from './language_selector';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EUI_THEMES, EUI_THEME } from '../../../../src/themes';
+import { EUI_THEMES, EUI_THEME, LEGACY_NAME_KEY } from '../../../../src/themes';
 // @ts-ignore importing from a JS file
 import { applyTheme } from '../../services';
 
@@ -23,8 +23,10 @@ export const theme_languages: THEME_LANGUAGES[] = [
     title: 'Language selector: Sass',
   },
 ];
-
-const THEME_NAMES = EUI_THEMES.map(({ value }) => value);
+export const SUPPORTED_THEMES = EUI_THEMES.filter(
+  (item) => !item.value.includes(LEGACY_NAME_KEY)
+);
+const THEME_NAMES = SUPPORTED_THEMES.map(({ value }) => value);
 const THEME_LANGS = theme_languages.map(({ id }) => id);
 
 const defaultState = {

src-docs/src/index.js

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