Remove legacy theme

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
-No public interface changes since `51.1.0`.
+**Breaking changes**
+
+- Removed Legacy theme including compiled CSS ([#5688](https://github.com/elastic/eui/pull/5688))
 
 ## [`51.1.0`](https://github.com/elastic/eui/tree/v51.1.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

@@ -35,9 +35,8 @@ export const GuideThemeSelector: React.FunctionComponent<GuideThemeSelectorProps
   );
 };
 
-const STORAGE_KEY = 'legeacy_theme_notification';
+const STORAGE_KEY = 'legacy_theme_notification';
 
-// @ts-ignore Context has no type
 const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorProps> = ({
   context,
   onToggleLocale,
@@ -104,12 +103,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{' '}
-            <EuiLink href="#/guidelines/getting-started#importing-styles">
-              setup instructions
-            </EuiLink>{' '}
-            will sync with the currently selected theme.
+            Amsterdam is now the only theme and the legacy theme has been
+            removed.
           </p>
         </EuiText>
       }

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/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
 

src-docs/src/routes.js

@@ -441,7 +441,6 @@ const navigation = [
       {
         name: 'Customizing themes',
         component: ThemeValues,
-        isNew: true,
       },
     ],
   },

src-docs/src/views/guidelines/getting_started/_app_setup.tsx

@@ -3,30 +3,18 @@ import { Link } from 'react-router-dom';
 import {
   EuiCodeBlock,
   useEuiTheme,
-  isLegacyTheme,
   EuiCode,
   EuiSpacer,
   EuiText,
+  EuiCallOut,
 } from '../../../../../src';
 
 type AppSetup = {};
 
 export const AppSetup: FunctionComponent<AppSetup> = ({}) => {
-  const {
-    euiTheme: { themeName },
-    colorMode,
-  } = useEuiTheme();
-  const legacyTheme = isLegacyTheme(themeName);
+  const { colorMode } = useEuiTheme();
 
-  const appSetup = legacyTheme ? (
-    <EuiCodeBlock language="jsx" isCopyable fontSize="m">
-      {`import React from 'react';
-// This is the legacy theme and will be deprecated
-import '@elastic/eui/dist/eui_legacy_${colorMode.toLowerCase()}.css';
-
-const MyApp = ({ Page }) => ( <Page /> );`}
-    </EuiCodeBlock>
-  ) : (
+  const appSetup = (
     <EuiCodeBlock language="jsx" isCopyable fontSize="m">
       {`import React from 'react';
 import '@elastic/eui/dist/eui_theme_${colorMode.toLowerCase()}.css';
@@ -43,22 +31,25 @@ const MyApp = ({ Page }) => (
 
   return (
     <>
+      <EuiCallOut color="warning">
+        <p>
+          While EUI is in the process of converting from a Sass based theme to
+          CSS-in-JS via Emotion. We require that both the{' '}
+          <Link to="/utilities/provider">
+            <strong>EuiProvider</strong>
+          </Link>{' '}
+          <strong>and</strong> the compiled CSS (or raw Sass) files be imported
+          during this transition.
+        </p>
+      </EuiCallOut>
+
+      <EuiSpacer />
+
       <EuiText grow={false}>
-        {!legacyTheme && (
-          <p>
-            EUI provides a general context provider to handle global aspects
-            like theming. While EUI is in the process of converting from a Sass
-            based theme to CSS-in-JS via Emotion. We require that both the{' '}
-            <Link to="/utilities/provider">
-              <strong>EuiProvider</strong>
-            </Link>{' '}
-            <strong>and</strong> the compiled CSS (or raw Sass) files be
-            imported during this transition.
-          </p>
-        )}
         <p>
-          EUI builds with both a light and dark theme. You can import these
-          default themes through their respective compiled CSS files. Use the{' '}
+          EUI provides a general context provider to handle global aspects like
+          light and dark theme. You can import these default themes through
+          their respective compiled CSS files. Use the{' '}
           <EuiCode>.min.css</EuiCode> file extension for the minified version.
         </p>
       </EuiText>
@@ -70,13 +61,9 @@ const MyApp = ({ Page }) => (
       <EuiText grow={false}>
         <p>
           For the dark theme, you can swap the words <EuiCode>light</EuiCode>{' '}
-          for <EuiCode>dark</EuiCode>.{' '}
-          {!legacyTheme && (
-            <>
-              For more configuration options of the provider, see the{' '}
-              <Link to="/utilities/provider">EuiProvider documentation</Link>.
-            </>
-          )}
+          for <EuiCode>dark</EuiCode>. <br />
+          For more configuration options of the provider, see the{' '}
+          <Link to="/utilities/provider">EuiProvider documentation</Link>.
         </p>
       </EuiText>
     </>