diff --git a/CHANGELOG.md b/CHANGELOG.md index af06dcb8acf..d9c695e9877 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/scripts/compile-scss.js b/scripts/compile-scss.js index 4f6d13faca3..0bb783d9067 100755 --- a/scripts/compile-scss.js +++ b/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', diff --git a/src-docs/src/components/codesandbox/link.js b/src-docs/src/components/codesandbox/link.js index 3f1fc40f96a..191b1cb7d80 100644 --- a/src-docs/src/components/codesandbox/link.js +++ b/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 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 = () => (Hello world!); 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 - ? '' - : ` + - ` - }, + , document.getElementById('root') );`, }, diff --git a/src-docs/src/components/guide_page/guide_page_header.tsx b/src-docs/src/components/guide_page/guide_page_header.tsx index c24e8c168b8..5da950baf8f 100644 --- a/src-docs/src/components/guide_page/guide_page_header.tsx +++ b/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 = ({ closePopover={() => setMobilePopoverIsOpen(false)} > {renderGithub()} - {renderCodeSandbox()} @@ -132,7 +127,6 @@ export const GuidePageHeader: React.FunctionComponent = ({ selectedLocale={selectedLocale} />, renderGithub(), - , , renderCodeSandbox(), ]; diff --git a/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx b/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx index 6d3336b46de..c7d16b40c1f 100644 --- a/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx +++ b/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx @@ -23,20 +23,12 @@ export const GuideFigmaLink: React.FunctionComponent = () = }; // @ts-ignore Context has no type -const GuideFigmaLinkComponent: React.FunctionComponent = ({ - context, -}) => { +const GuideFigmaLinkComponent: React.FunctionComponent = () => { 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 ? ( {label} diff --git a/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx b/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx deleted file mode 100644 index 73dced9c5bf..00000000000 --- a/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx +++ /dev/null @@ -1,54 +0,0 @@ -/* eslint-disable no-restricted-globals */ -import React from 'react'; - -import { EuiButtonEmpty } from '../../../../src/components/button'; -import { useIsWithinBreakpoints } from '../../../../src/services/hooks/useIsWithinBreakpoints'; - -import { ThemeContext } from '../with_theme'; -import { EuiHeaderSectionItemButton } from '../../../../src/components/header'; -import { EuiToolTip } from '../../../../src/components/tool_tip'; -import { EuiIcon } from '../../../../src/components/icon'; - -type GuideSketchLinkProps = { - context?: any; -}; - -export const GuideSketchLink: React.FunctionComponent = () => { - return ( - - {(context) => } - - ); -}; - -// @ts-ignore Context has no type -const GuideSketchLinkComponent: React.FunctionComponent = ({ - context, -}) => { - const isMobileSize = useIsWithinBreakpoints(['xs', 's']); - - const href = - 'https://github.com/elastic/eui/releases/download/v8.0.0/eui_sketch_8.0.0.zip'; - const label = 'EUI Sketch Library (download)'; - - const isLegacy = context.theme.includes('legacy'); - - if (!isLegacy) return <>; - - return isMobileSize ? ( - - {label} - - ) : ( - - - - - ); -}; diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx b/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx index 0d474e8bfbb..56dc70a00de 100644 --- a/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx +++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx @@ -35,9 +35,8 @@ export const GuideThemeSelector: React.FunctionComponent = ({ context, onToggleLocale, @@ -104,12 +103,8 @@ const GuideThemeSelectorComponent: React.FunctionComponent

- Amsterdam is now the default theme and the old theme is considered - legacy. Our{' '} - - setup instructions - {' '} - will sync with the currently selected theme. + Amsterdam is now the only theme and the legacy theme has been + removed.

} diff --git a/src-docs/src/components/guide_theme_selector/index.ts b/src-docs/src/components/guide_theme_selector/index.ts index 6c24aabe99c..1b35ada0874 100644 --- a/src-docs/src/components/guide_theme_selector/index.ts +++ b/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'; diff --git a/src-docs/src/index.js b/src-docs/src/index.js index 7ad3536ea95..49bac541876 100644 --- a/src-docs/src/index.js +++ b/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 diff --git a/src-docs/src/legacy_dark.scss b/src-docs/src/legacy_dark.scss deleted file mode 100644 index 37c520ddaf8..00000000000 --- a/src-docs/src/legacy_dark.scss +++ /dev/null @@ -1,12 +0,0 @@ -// 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 '../../src/themes/legacy/legacy_dark'; -@import './components/index'; -@import './services/playground/index'; -@import './views/index'; - -// Elastic charts -@import '~@elastic/charts/dist/theme'; -@import '../../src/themes/charts/theme'; diff --git a/src-docs/src/legacy_light.scss b/src-docs/src/legacy_light.scss deleted file mode 100644 index 03057af25c6..00000000000 --- a/src-docs/src/legacy_light.scss +++ /dev/null @@ -1,12 +0,0 @@ -// 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 '../../src/themes/legacy/legacy_light'; -@import './components/index'; -@import './services/playground/index'; -@import './views/index'; - -// Elastic charts -@import '~@elastic/charts/dist/theme'; -@import '../../src/themes/charts/theme'; diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 4fea864ea23..c093b98ee7d 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -441,7 +441,6 @@ const navigation = [ { name: 'Customizing themes', component: ThemeValues, - isNew: true, }, ], }, diff --git a/src-docs/src/views/guidelines/getting_started/_app_setup.tsx b/src-docs/src/views/guidelines/getting_started/_app_setup.tsx index afd5c05d8d3..ff1a69b42fe 100644 --- a/src-docs/src/views/guidelines/getting_started/_app_setup.tsx +++ b/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 = ({}) => { - const { - euiTheme: { themeName }, - colorMode, - } = useEuiTheme(); - const legacyTheme = isLegacyTheme(themeName); + const { colorMode } = useEuiTheme(); - const appSetup = legacyTheme ? ( - - {`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 }) => ( );`} - - ) : ( + const appSetup = ( {`import React from 'react'; import '@elastic/eui/dist/eui_theme_${colorMode.toLowerCase()}.css'; @@ -43,22 +31,25 @@ const MyApp = ({ Page }) => ( return ( <> + +

+ While EUI is in the process of converting from a Sass based theme to + CSS-in-JS via Emotion. We require that both the{' '} + + EuiProvider + {' '} + and the compiled CSS (or raw Sass) files be imported + during this transition. +

+ + + + - {!legacyTheme && ( -

- 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{' '} - - EuiProvider - {' '} - and the compiled CSS (or raw Sass) files be - imported during this transition. -

- )}

- 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{' '} .min.css file extension for the minified version.

@@ -70,13 +61,9 @@ const MyApp = ({ Page }) => (

For the dark theme, you can swap the words light{' '} - for dark.{' '} - {!legacyTheme && ( - <> - For more configuration options of the provider, see the{' '} - EuiProvider documentation. - - )} + for dark.
+ For more configuration options of the provider, see the{' '} + EuiProvider documentation.

diff --git a/src-docs/src/views/guidelines/getting_started/_customize_tokens.tsx b/src-docs/src/views/guidelines/getting_started/_customize_tokens.tsx deleted file mode 100644 index ff9f7d1d831..00000000000 --- a/src-docs/src/views/guidelines/getting_started/_customize_tokens.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, { useContext } from 'react'; - -import { EuiCodeBlock, LEGACY_NAME_KEY } from '../../../../../src'; - -import { ThemeContext } from '../../../components/with_theme'; - -export const CustomizeTokens = () => { - const themeContext = useContext(ThemeContext); - let files; - switch (themeContext.theme) { - case `${LEGACY_NAME_KEY}_light`: - files = `// This is the legacy theme and will be deprecated -@import '@elastic/eui/src/themes/legacy/theme_light';`; - break; - case `${LEGACY_NAME_KEY}_dark`: - files = `// This is the legacy theme and will be deprecated -@import '@elastic/eui/src/themes/legacy/theme_dark';`; - break; - case 'dark': - files = "@import '@elastic/eui/src/themes/amsterdam/theme_dark';"; - break; - default: - files = "@import '@elastic/eui/src/themes/amsterdam/theme_light';"; - break; - } - - return ( - - {`// mytheme.scss -$euiColorPrimary: #7B61FF; - -// The following rebuilds the entire EUI component styles -${files} - -@import 'your/custom/styles';`} - - ); -}; diff --git a/src-docs/src/views/guidelines/getting_started/_customizing.tsx b/src-docs/src/views/guidelines/getting_started/_customizing.tsx new file mode 100644 index 00000000000..bd19330490e --- /dev/null +++ b/src-docs/src/views/guidelines/getting_started/_customizing.tsx @@ -0,0 +1,105 @@ +import React, { FunctionComponent, useContext } from 'react'; +import { Link } from 'react-router-dom'; + +import { + EuiCodeBlock, + EuiSplitPanel, + EuiFlexGroup, + EuiFlexItem, + EuiText, + EuiHorizontalRule, + EuiCode, +} from '../../../../../src'; + +import { GuideSectionExampleCode } from '../../../components/guide_section/guide_section_parts/guide_section_code'; +import { LanguageSelector, ThemeContext } from '../../../components/with_theme'; +const overrideSimpleSource = require('!!raw-loader!../../theme/override_simple'); + +export const CustomizeTokens = () => { + const themeContext = useContext(ThemeContext); + let files; + switch (themeContext.theme) { + case 'dark': + files = "@import '@elastic/eui/src/themes/amsterdam/theme_dark';"; + break; + default: + files = "@import '@elastic/eui/src/themes/amsterdam/theme_light';"; + break; + } + + return ( + + {`// mytheme.scss +$euiColorPrimary: #7B61FF; + +// The following rebuilds the entire EUI component styles +${files} + +@import 'your/custom/styles';`} + + ); +}; + +export const Customizing: FunctionComponent = () => { + const themeContext = useContext(ThemeContext); + const currentLanguage = themeContext.themeLanguage; + const showSass = currentLanguage.includes('sass'); + + return ( + + + + + +

+ + Keep an eye out for this language selector that will allow you + to view the syntax for either the Sass or CSS-in-JS (Emotion) + theming mechanisms. + +

+ + + + + + + + + {showSass ? ( + <> + + +

+ This will require style, css, postcss, and sass loaders and a + full re-compile of all EUI component styles. +

+ + + + + + + ) : ( + <> + + +

+ You can pass along a full or partial list of global{' '} + overrides to the{' '} + + EuiProvider + {' '} + which will update the EUI components that are currently using + the Emotion method of theming. +

+ + + + + + + )} + + ); +}; diff --git a/src-docs/src/views/guidelines/getting_started/_tokens.tsx b/src-docs/src/views/guidelines/getting_started/_tokens.tsx index 0f1057c29a7..1731c112295 100644 --- a/src-docs/src/views/guidelines/getting_started/_tokens.tsx +++ b/src-docs/src/views/guidelines/getting_started/_tokens.tsx @@ -3,7 +3,6 @@ import { Link } from 'react-router-dom'; import { EuiCodeBlock, - LEGACY_NAME_KEY, EuiSplitPanel, EuiFlexGroup, EuiFlexItem, @@ -20,16 +19,6 @@ const ImportOutsideExample = () => { const themeContext = useContext(ThemeContext); let files; switch (themeContext.theme) { - case `${LEGACY_NAME_KEY}_light`: - files = `// This is the legacy theme and will be deprecated -@import '@elastic/eui/src/themes/legacy/colors_light'; -@import '@elastic/eui/src/themes/legacy/globals';`; - break; - case `${LEGACY_NAME_KEY}_dark`: - files = `// This is the legacy theme and will be deprecated -@import '@elastic/eui/src/themes/legacy/colors_dark'; -@import '@elastic/eui/src/themes/legacy/globals';`; - break; case 'dark': files = `@import '@elastic/eui/src/themes/amsterdam/colors_dark'; @import '@elastic/eui/src/themes/amsterdam/globals';`; diff --git a/src-docs/src/views/guidelines/getting_started/getting_started.js b/src-docs/src/views/guidelines/getting_started/getting_started.js index 8a35a4e6161..6de72cdb5d0 100644 --- a/src-docs/src/views/guidelines/getting_started/getting_started.js +++ b/src-docs/src/views/guidelines/getting_started/getting_started.js @@ -5,7 +5,8 @@ import { EuiCodeBlock, EuiCode, EuiText, EuiSpacer } from '../../../../../src'; import { AppSetup } from './_app_setup'; import { Tokens } from './_tokens'; -import { CustomizeTokens } from './_customize_tokens'; +import { Customizing } from './_customizing'; +import { ThemeNotice } from '../../../views/theme/_components/_theme_notice.tsx'; export const GettingStarted = { title: 'Getting started', @@ -85,21 +86,22 @@ export const GettingStarted = { -

Customizing the style tokens with Sass

+

Customizing the style tokens

EUI can be slightly customized to fit your branding needs by - altering the base tokens like color and typography. Currently, it - is only supported using the Sass method and requires a full - re-compile of all EUI component styles. + altering the base tokens like color and typography. Simply declare + your token overrides before importing the whole EUI theme. This + will re-compile all of the EUI components with your colors.

- Simply declare your token overrides before importing the whole EUI - theme. This will re-compile all of the EUI components with your - colors. + For a full list of global tokens visit{' '} + Customizing theme.

- + + +

Do not use in conjunction with the compiled CSS.

@@ -143,7 +145,7 @@ export const GettingStarted = { { - "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');" + "@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');" } @@ -156,7 +158,7 @@ export const GettingStarted = { { - "@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/css2?family=Inter:ital,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');" } diff --git a/src-docs/src/views/notification_event/notification_event_example.js b/src-docs/src/views/notification_event/notification_event_example.js index 596d519b728..e8e00333fbc 100644 --- a/src-docs/src/views/notification_event/notification_event_example.js +++ b/src-docs/src/views/notification_event/notification_event_example.js @@ -68,7 +68,6 @@ const notificationEvents = events.map((event) => ( export const NotificationEventExample = { title: 'Notification event', beta: true, - isNew: true, intro: (

diff --git a/src-docs/src/views/panel/panel_shadow.js b/src-docs/src/views/panel/panel_shadow.js index e416546703a..91a8bf82733 100644 --- a/src-docs/src/views/panel/panel_shadow.js +++ b/src-docs/src/views/panel/panel_shadow.js @@ -1,16 +1,7 @@ import React from 'react'; -import { - EuiPanel, - EuiCode, - EuiSpacer, - LEGACY_NAME_KEY, - useEuiTheme, -} from '../../../../src'; +import { EuiPanel, EuiCode, EuiSpacer } from '../../../../src'; export default () => { - const { euiTheme } = useEuiTheme(); - const isLegacyTheme = euiTheme.themeName.includes(LEGACY_NAME_KEY); - return (

@@ -19,19 +10,9 @@ export default () => { - {/* This example only works for the default theme. The legacy theme has `hasBorder={true}` by default. */} - {!isLegacyTheme && ( - - {'hasBorder={true}'} - - )} - - {/* This example only matters for the legacy theme. The default theme has `hasBorder={false}` by default. */} - {isLegacyTheme && ( - - {'hasShadow={false} hasBorder={false}'} - - )} + + {'hasBorder={true}'} +
); }; diff --git a/src-docs/src/views/provider/provider_example.js b/src-docs/src/views/provider/provider_example.js index 000b08f9789..ddd455c07e6 100644 --- a/src-docs/src/views/provider/provider_example.js +++ b/src-docs/src/views/provider/provider_example.js @@ -17,7 +17,6 @@ import GlobalStyles from './provider_styles'; export const ProviderExample = { title: 'Provider', - isNew: true, intro: (

diff --git a/src-docs/src/views/provider/provider_setup.tsx b/src-docs/src/views/provider/provider_setup.tsx index e3d78c7b0c2..d91d02576fc 100644 --- a/src-docs/src/views/provider/provider_setup.tsx +++ b/src-docs/src/views/provider/provider_setup.tsx @@ -1,19 +1,16 @@ import React from 'react'; -import { EuiCodeBlock, useEuiTheme, isLegacyTheme } from '../../../../src'; +import { EuiCodeBlock, useEuiTheme } from '../../../../src'; export default () => { - const { euiTheme, colorMode } = useEuiTheme(); - const isLegacy = isLegacyTheme(euiTheme.themeName); + const { colorMode } = useEuiTheme(); return ( {`import { EuiProvider } from '@elastic/eui'; const MyApp = () => ( - + {/* Content */} );`} diff --git a/src-docs/src/views/provider/provider_styles.tsx b/src-docs/src/views/provider/provider_styles.tsx index f4df4a9e0e1..0a77d8918c7 100644 --- a/src-docs/src/views/provider/provider_styles.tsx +++ b/src-docs/src/views/provider/provider_styles.tsx @@ -1,21 +1,14 @@ import React from 'react'; -import { - EuiCodeBlock, - EuiSpacer, - useEuiTheme, - isLegacyTheme, -} from '../../../../src'; +import { EuiCodeBlock, EuiSpacer, useEuiTheme } from '../../../../src'; export default () => { - const { euiTheme, colorMode } = useEuiTheme(); - const isLegacy = isLegacyTheme(euiTheme.themeName); + const { colorMode } = useEuiTheme(); return ( <> - {!isLegacy - ? ` + {` @@ -25,9 +18,7 @@ export default () => {

-` - : ` -`} +`} @@ -35,20 +26,14 @@ export default () => { {`// App.js import { EuiProvider } from '@elastic/eui' -${ - !isLegacy - ? `import createCache from '@emotion/cache'; +import createCache from '@emotion/cache'; const cache = createCache({ key: 'myApp', container: document.querySelector('meta[name="global-style-insert"]'), }); -` - : '' -} - + + {/* Content */} `} diff --git a/src-docs/src/views/text/_text_scaling.scss b/src-docs/src/views/text/_text_scaling.scss index 07dd2bb3ece..84392a2cf05 100644 --- a/src-docs/src/views/text/_text_scaling.scss +++ b/src-docs/src/views/text/_text_scaling.scss @@ -15,8 +15,4 @@ &[class*='--extraSmall'] { background-size: 100% $euiFontSizeXS / 2; } - - &[class*='legacy'] { - background-size: 100% $euiFontSize / 2; - } } diff --git a/src-docs/src/views/text/text_example.js b/src-docs/src/views/text/text_example.js index 58506d7ddbb..b97b6304b62 100644 --- a/src-docs/src/views/text/text_example.js +++ b/src-docs/src/views/text/text_example.js @@ -10,8 +10,6 @@ import { EuiTextAlign, } from '../../../../src/components'; -import { LEGACY_NAME_KEY } from '../../../../src/themes'; - import { textConfig, textColorConfig } from './playground'; import Text from './text'; @@ -48,10 +46,6 @@ const LineHeightText = () => { const themeContext = useContext(ThemeContext); let text; switch (themeContext.theme) { - case `${LEGACY_NAME_KEY}_light`: - case `${LEGACY_NAME_KEY}_dark`: - text = ''; - break; default: text = ( <> diff --git a/src-docs/src/views/theme/_components/_theme_notice.tsx b/src-docs/src/views/theme/_components/_theme_notice.tsx index 7f332de2132..209b74e53a3 100644 --- a/src-docs/src/views/theme/_components/_theme_notice.tsx +++ b/src-docs/src/views/theme/_components/_theme_notice.tsx @@ -1,48 +1,31 @@ import React, { FunctionComponent } from 'react'; -import { Link } from 'react-router-dom'; -import { EuiSpacer, EuiCallOut } from '../../../../../src'; +import { EuiCallOut, EuiLink } from '../../../../../src'; type ThemeNotice = { - type?: 'required' | 'support' | 'both' | null; + type?: 'support' | null; }; export const ThemeNotice: FunctionComponent = ({ - type = 'required', + type = 'support', }) => { - const required = ( - -

- The following page assumes that you have wrapped your entire application - with the new EuiThemeProvider. -

- - ); - const support = ( - +

- The EuiThemeProvider is only - available for consuming the values. Modifying or - overriding the values will not have any effect on the individual EUI - components, yet. Instead, you will need to use the{' '} - Sass method. + EUI is transitioning to a CSS-in-JS solution for theming and requires + consuming/customizing global variables in{' '} + both the Sass and CSS-in-JS methods. To track this + effort, subscribe to the{' '} + + Meta ticket + + .

); switch (type) { - case 'required': - return required; case 'support': return support; - case 'both': - return ( - <> - {required} - - {support} - - ); default: return <>; } diff --git a/src-docs/src/views/theme/_json/_get_json_vars.js b/src-docs/src/views/theme/_json/_get_json_vars.js index ecfae2d29d6..d620e3db1bb 100644 --- a/src-docs/src/views/theme/_json/_get_json_vars.js +++ b/src-docs/src/views/theme/_json/_get_json_vars.js @@ -2,27 +2,18 @@ import { useContext } from 'react'; import lightColors from './eui_theme_light.json'; import darkColors from './eui_theme_dark.json'; -import lightLegacyColors from './eui_legacy_light.json'; -import darkLegacyColors from './eui_legacy_dark.json'; import { ThemeContext } from '../../../components'; -import { LEGACY_NAME_KEY } from '../../../../../src/themes/legacy/theme'; export const useJsonVars = () => { const themeContext = useContext(ThemeContext); let palette; switch (themeContext.theme) { - case 'light': - palette = lightColors; - break; case 'dark': palette = darkColors; break; - case `${LEGACY_NAME_KEY}-dark`: - palette = darkLegacyColors; - break; default: - palette = lightLegacyColors; + palette = lightColors; break; } diff --git a/src-docs/src/views/theme/_json/eui_legacy_dark.json b/src-docs/src/views/theme/_json/eui_legacy_dark.json deleted file mode 100644 index 017374a5bbb..00000000000 --- a/src-docs/src/views/theme/_json/eui_legacy_dark.json +++ /dev/null @@ -1,771 +0,0 @@ -{ - "paddingSizes": { - "xs": "4px", - "s": "8px", - "m": "16px", - "l": "24px", - "xl": "32px" - }, - "avatarSizing": { - "s": { - "size": "24px", - "font-size": "12px" - }, - "m": { - "size": "32px", - "font-size": "14.4px" - }, - "l": { - "size": "40px", - "font-size": "19.200000000000003px" - }, - "xl": { - "size": "64px", - "font-size": "25.6px" - } - }, - "euiBadgeGroupGutterTypes": { - "gutterExtraSmall": "4px", - "gutterSmall": "8px" - }, - "euiBreadcrumbSpacing": "8px", - "euiBreadcrumbTruncateWidth": "160px", - "euiButtonEmptyTypes": { - "primary": "#1ba9f5", - "danger": "#ff6666", - "disabled": "#4c4e51", - "ghost": "#ffffff", - "text": "#dfe5ef", - "success": "#7de2d1", - "warning": "#ffce7a" - }, - "euiCallOutTypes": { - "primary": "#1ba9f5", - "success": "#7de2d1", - "warning": "#ffce7a", - "danger": "#ff6666" - }, - "euiCardSpacing": "16px", - "euiCardBottomNodeHeight": "40px", - "euiCardSelectButtonBorders": { - "text": "#7de2d1", - "primary": "#1ba9f5", - "success": "#7de2d1", - "danger": "#ff6666", - "ghost": "#98a2b3" - }, - "euiCardSelectButtonBackgrounds": { - "text": "#25262e", - "primary": "#08334a", - "success": "#26443f", - "danger": "#4d1f1f", - "ghost": "#98a2b3" - }, - "euiCardPaddingModifiers": { - "paddingNone": 0, - "paddingSmall": "8px", - "paddingMedium": "16px", - "paddingLarge": "24px" - }, - "euiCheckableCardPadding": "16px", - "euiCodeBlockPaddingModifiers": { - "paddingSmall": "8px", - "paddingMedium": "16px", - "paddingLarge": "24px" - }, - "euiCollapsibleNavGroupLightBackgroundColor": "#141519", - "euiCollapsibleNavGroupDarkBackgroundColor": "#131317", - "euiCollapsibleNavGroupDarkHighContrastColor": "#1ba9f5", - "euiColorPickerValueRange0": "#ffffff", - "euiColorPickerValueRange1": "rgba(255, 255, 255, 0)", - "euiColorPickerSaturationRange0": "#000000", - "euiColorPickerSaturationRange1": "rgba(0, 0, 0, 0)", - "euiColorPickerIndicatorSize": "12px", - "euiColorPickerWidth": "152px", - "euiColorPaletteDisplaySizes": { - "sizeExtraSmall": "4px", - "sizeSmall": "8px", - "sizeMedium": "16px" - }, - "euiContextMenuWidth": "256px", - "euiControlBarBackground": "#000000", - "euiControlBarText": "#a9aaad", - "euiControlBarBorderColor": "rgba(255, 255, 255, 0.19999999999999996)", - "euiControlBarInitialHeight": "40px", - "euiControlBarMaxHeight": "calc(100vh - 80px)", - "euiControlBarHeights": { - "s": "240px", - "m": "480px", - "l": "100vh" - }, - "euiDataGridPrefix": ".euiDataGrid--", - "euiDataGridStyles": "'bordersAll', 'bordersNone', 'bordersHorizontal', 'paddingSmall', 'paddingMedium', 'paddingLarge', 'stripes', 'rowHoverNone', 'rowHoverHighlight', 'headerShade', 'headerUnderline', 'footerShade', 'footerOverline', 'fontSizeSmall', 'fontSizeLarge', 'noControls', 'stickyFooter'", - "euiZDataGrid": 999, - "euiZHeaderBelowDataGrid": 998, - "euiZDataGridCellPopover": 1000, - "euiDataGridColumnResizerWidth": "3px", - "euiDataGridPopoverMaxHeight": "400px", - "euiDataGridCellPaddingS": "4px", - "euiDataGridCellPaddingM": "6px", - "euiDataGridCellPaddingL": "8px", - "euiDataGridVerticalBorder": "solid 1px #24272e", - "euiSuperDatePickerWidth": "480px", - "euiSuperDatePickerButtonWidth": "118px", - "euiDragAndDropSpacing": { - "s": "2px", - "m": "4px", - "l": "8px" - }, - "euiExpressionColors": { - "subdued": "#7a7f89", - "primary": "#1ba9f5", - "success": "#7de2d1", - "warning": "#ffce7a", - "danger": "#ff6666", - "accent": "#f990c0" - }, - "euiFacetGutterSizes": { - "gutterNone": 0, - "gutterSmall": "4px", - "gutterMedium": "8px", - "gutterLarge": "12px" - }, - "gutterTypes": { - "gutterExtraSmall": "4px", - "gutterSmall": "8px", - "gutterMedium": "16px", - "gutterLarge": "24px", - "gutterExtraLarge": "40px" - }, - "fractions": { - "fourths": { - "percentage": "25%", - "count": 4 - }, - "thirds": { - "percentage": "33.3%", - "count": 3 - }, - "halves": { - "percentage": "50%", - "count": 2 - }, - "single": { - "percentage": "100%", - "count": 1 - } - }, - "flyoutSizes": { - "small": { - "min": "384px", - "width": "25vw", - "max": "403px" - }, - "medium": { - "min": "424px", - "width": "50vw", - "max": "768px" - }, - "large": { - "min": "691px", - "width": "75vw", - "max": "992px" - } - }, - "euiFlyoutBorder": "1px solid #343741", - "euiFlyoutPaddingModifiers": { - "paddingNone": 0, - "paddingSmall": "8px", - "paddingMedium": "16px", - "paddingLarge": "24px" - }, - "euiFilePickerTallHeight": "128px", - "euiRangeLevelColors": { - "primary": "#1ba9f5", - "success": "#7de2d1", - "warning": "#ffce7a", - "danger": "#ff6666" - }, - "textareaResizing": { - "vertical": "resizeVertical", - "horizontal": "resizeHorizontal", - "both": "resizeBoth", - "none": "resizeNone" - }, - "euiHeaderLinksGutterSizes": { - "gutterXS": "4px", - "gutterS": "8px", - "gutterM": "12px", - "gutterL": "24px" - }, - "ruleMargins": { - "marginXSmall": "8px", - "marginSmall": "12px", - "marginMedium": "16px", - "marginLarge": "24px", - "marginXLarge": "32px", - "marginXXLarge": "40px" - }, - "euiIconLoadingOpacity": 0.05, - "euiIconColors": { - "accent": "#f990c0", - "danger": "#ff6666", - "ghost": "#ffffff", - "primary": "#1ba9f5", - "success": "#7de2d1", - "subdued": "#7a7f89", - "text": "#dfe5ef", - "warning": "#ffce7a", - "inherit": "inherit" - }, - "euiIconSizes": { - "small": "12px", - "medium": "16px", - "large": "24px", - "xLarge": "32px", - "xxLarge": "40px" - }, - "euiKeyPadMenuSize": "96px", - "euiKeyPadMenuMarginSize": "4px", - "euiLinkColors": { - "subdued": "#7a7f89", - "primary": "#1ba9f5", - "success": "#7de2d1", - "accent": "#f990c0", - "warning": "#ffce7a", - "danger": "#ff6666", - "text": "#dfe5ef", - "ghost": "#ffffff" - }, - "euiListGroupItemHoverBackground": "rgba(52, 55, 65, 0.25)", - "euiListGroupItemHoverBackgroundGhost": "rgba(255, 255, 255, 0.09999999999999998)", - "euiListGroupGutterTypes": { - "gutterSmall": "8px", - "gutterMedium": "16px" - }, - "euiListGroupItemColorTypes": { - "primary": "#1ba9f5", - "text": "#dfe5ef", - "subdued": "#7a7f89", - "ghost": "#ffffff" - }, - "euiListGroupItemSizeTypes": { - "xSmall": "12px", - "small": "14px", - "medium": "16px", - "large": "20px" - }, - "euiGradientStartStop": "#2e3039", - "euiGradientMiddle": "#282a31", - "euiLoadingSpinnerSizes": { - "small": "12px", - "medium": "16px", - "large": "24px", - "xLarge": "32px", - "xxLarge": "40px" - }, - "euiMarkdownEditorMinHeight": "150px", - "euiPopoverArrowSize": "12px", - "euiPopoverTranslateDistance": "8px", - "euiProgressSizes": { - "xs": "2px", - "s": "4px", - "m": "8px", - "l": "16px" - }, - "euiProgressColors": { - "primary": "#1ba9f5", - "success": "#7de2d1", - "warning": "#ffce7a", - "danger": "#ff6666", - "accent": "#f990c0", - "subdued": "#7a7f89", - "vis0": "#54b399", - "vis1": "#6092c0", - "vis2": "#d36086", - "vis3": "#9170b8", - "vis4": "#ca8eae", - "vis5": "#d6bf57", - "vis6": "#b9a888", - "vis7": "#da8b45", - "vis8": "#aa6556", - "vis9": "#e7664c", - "customColor": "currentColor" - }, - "euiResizableButtonTransitionSpeed": "150ms", - "euiResizableButtonSize": "16px", - "euiSelectableListItemBorder": "1px solid #202128", - "euiSelectableListItemPadding": "4px 12px", - "euiSelectableTemplateSitewideTypes": { - "application": { - "color": "#6092c0", - "font-weight": 500 - }, - "deployment": { - "color": "#54b399", - "font-weight": 500 - }, - "article": { - "color": "#9170b8", - "font-weight": 500 - }, - "case": { - "color": "#e7664c", - "font-weight": 500 - }, - "platform": { - "color": "#d6bf57", - "font-weight": 500 - } - }, - "euiSideNavEmphasizedBackgroundColor": "rgba(52, 55, 65, 0.30000000000000004)", - "euiSideNavRootTextcolor": "#dfe5ef", - "euiSideNavBranchTextcolor": "#878b95", - "euiSideNavSelectedTextcolor": "#1ba9f5", - "euiSideNavDisabledTextcolor": "#55575a", - "spacerSizes": { - "xs": "4px", - "s": "8px", - "m": "16px", - "l": "24px", - "xl": "32px", - "xxl": "40px" - }, - "euiStepNumberSize": "32px", - "euiStepNumberSmallSize": "24px", - "euiStepNumberMargin": "16px", - "euiStepStatusColorsToFade": { - "warning": "#ffce7a", - "danger": "#ff6666", - "disabled": "#98a2b3", - "incomplete": "#98a2b3" - }, - "euiSuggestItemColors": { - "tint0": "#54b399", - "tint1": "#6092c0", - "tint2": "#d36086", - "tint3": "#9170b8", - "tint4": "#ca8eae", - "tint5": "#d6bf57", - "tint6": "#b9a888", - "tint7": "#da8b45", - "tint8": "#aa6556", - "tint9": "#e7664c", - "tint10": "#98a2b3" - }, - "euiTableCellContentPadding": "8px", - "euiTableCellContentPaddingCompressed": "4px", - "euiTableCellCheckboxWidth": "32px", - "euiTableActionsAreaWidth": "40px", - "euiTableHoverColor": "#1e1e25", - "euiTableSelectedColor": "#052231", - "euiTableHoverSelectedColor": "#051f2c", - "euiTableActionsBorderColor": "rgba(83, 89, 102, 0.09999999999999998)", - "euiTableHoverClickableColor": "rgba(27, 169, 245, 0.050000000000000044)", - "euiTableFocusClickableColor": "rgba(27, 169, 245, 0.09999999999999998)", - "euiTextColors": { - "default": "#dfe5ef", - "subdued": "#7a7f89", - "success": "#7de2d1", - "accent": "#f990c0", - "warning": "#ffce7a", - "danger": "#ff6666", - "ghost": "#ffffff", - "inherit": "inherit" - }, - "euiTextConstrainedMaxWidth": "36em", - "euiToastWidth": "320px", - "euiToastTypes": { - "primary": "#1ba9f5", - "success": "#7de2d1", - "warning": "#ffce7a", - "danger": "#ff6666" - }, - "euiTokenGrayColor": "#535966", - "euiTokenTypes": { - "euiColorVis0": { - "graphic": "#54b399", - "behindText": "#6dccb1" - }, - "euiColorVis1": { - "graphic": "#6092c0", - "behindText": "#79aad9" - }, - "euiColorVis2": { - "graphic": "#d36086", - "behindText": "#ee789d" - }, - "euiColorVis3": { - "graphic": "#9170b8", - "behindText": "#a987d1" - }, - "euiColorVis4": { - "graphic": "#ca8eae", - "behindText": "#e4a6c7" - }, - "euiColorVis5": { - "graphic": "#d6bf57", - "behindText": "#f1d86f" - }, - "euiColorVis6": { - "graphic": "#b9a888", - "behindText": "#d2c0a0" - }, - "euiColorVis7": { - "graphic": "#da8b45", - "behindText": "#f5a35c" - }, - "euiColorVis8": { - "graphic": "#aa6556", - "behindText": "#c47c6c" - }, - "euiColorVis9": { - "graphic": "#e7664c", - "behindText": "#ff7e62" - }, - "gray": { - "graphic": "#535966", - "behindText": "#535966" - } - }, - "euiTokenTypeKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9', 'gray'", - "euiContrastRatioText": 4.5, - "euiContrastRatioGraphic": 3, - "euiContrastRatioDisabled": 2, - "euiDatePickerCalendarWidth": "284px", - "euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)", - "euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)", - "euiAnimSpeedExtraFast": "90ms", - "euiAnimSpeedFast": "150ms", - "euiAnimSpeedNormal": "250ms", - "euiAnimSpeedSlow": "350ms", - "euiAnimSpeedExtraSlow": "500ms", - "euiBorderWidthThin": "1px", - "euiBorderWidthThick": "2px", - "euiBorderColor": "#343741", - "euiBorderRadius": "4px", - "euiBorderRadiusSmall": "2px", - "euiBorderThick": "2px solid #343741", - "euiBorderThin": "1px solid #343741", - "euiBorderEditable": "2px dotted #343741", - "euiButtonHeight": "40px", - "euiButtonHeightSmall": "32px", - "euiButtonHeightXSmall": "24px", - "euiButtonColorDisabled": "#434548", - "euiButtonColorDisabledText": "#4c4e51", - "euiButtonColorGhostDisabled": "#343741", - "euiButtonTypes": { - "primary": "#1ba9f5", - "accent": "#f990c0", - "success": "#7de2d1", - "warning": "#ffce7a", - "danger": "#ff6666", - "subdued": "#7a7f89", - "ghost": "#ffffff", - "text": "#98a2b3" - }, - "euiCodeBlockBackgroundColor": "#25262e", - "euiCodeBlockColor": "#dfe5ef", - "euiCodeBlockSelectedBackgroundColor": "inherit", - "euiCodeBlockCommentColor": "#8d919a", - "euiCodeBlockSelectorTagColor": "inherit", - "euiCodeBlockStringColor": "#d77092", - "euiCodeBlockTagColor": "#6092c0", - "euiCodeBlockNameColor": "#6092c0", - "euiCodeBlockNumberColor": "#54b399", - "euiCodeBlockKeywordColor": "#a184c2", - "euiCodeBlockFunctionTitleColor": "inherit", - "euiCodeBlockTypeColor": "#6092c0", - "euiCodeBlockAttributeColor": "inherit", - "euiCodeBlockSymbolColor": "#e7664c", - "euiCodeBlockParamsColor": "inherit", - "euiCodeBlockMetaColor": "#8d919a", - "euiCodeBlockTitleColor": "#da8b45", - "euiCodeBlockSectionColor": "#e7664c", - "euiCodeBlockAdditionColor": "#54b399", - "euiCodeBlockDeletionColor": "#ff6666", - "euiCodeBlockSelectorClassColor": "inherit", - "euiCodeBlockSelectorIdColor": "inherit", - "euiPaletteColorBlind": { - "euiColorVis0": { - "graphic": "#54b399", - "behindText": "#6dccb1" - }, - "euiColorVis1": { - "graphic": "#6092c0", - "behindText": "#79aad9" - }, - "euiColorVis2": { - "graphic": "#d36086", - "behindText": "#ee789d" - }, - "euiColorVis3": { - "graphic": "#9170b8", - "behindText": "#a987d1" - }, - "euiColorVis4": { - "graphic": "#ca8eae", - "behindText": "#e4a6c7" - }, - "euiColorVis5": { - "graphic": "#d6bf57", - "behindText": "#f1d86f" - }, - "euiColorVis6": { - "graphic": "#b9a888", - "behindText": "#d2c0a0" - }, - "euiColorVis7": { - "graphic": "#da8b45", - "behindText": "#f5a35c" - }, - "euiColorVis8": { - "graphic": "#aa6556", - "behindText": "#c47c6c" - }, - "euiColorVis9": { - "graphic": "#e7664c", - "behindText": "#ff7e62" - } - }, - "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", - "euiColorVis0": "#54b399", - "euiColorVis1": "#6092c0", - "euiColorVis2": "#d36086", - "euiColorVis3": "#9170b8", - "euiColorVis4": "#ca8eae", - "euiColorVis5": "#d6bf57", - "euiColorVis6": "#b9a888", - "euiColorVis7": "#da8b45", - "euiColorVis8": "#aa6556", - "euiColorVis9": "#e7664c", - "euiColorVis0_behindText": "#6dccb1", - "euiColorVis1_behindText": "#79aad9", - "euiColorVis2_behindText": "#ee789d", - "euiColorVis3_behindText": "#a987d1", - "euiColorVis4_behindText": "#e4a6c7", - "euiColorVis5_behindText": "#f1d86f", - "euiColorVis6_behindText": "#d2c0a0", - "euiColorVis7_behindText": "#f5a35c", - "euiColorVis8_behindText": "#c47c6c", - "euiColorVis9_behindText": "#ff7e62", - "euiFontWeightLight": 300, - "euiFontWeightRegular": 400, - "euiFontWeightMedium": 500, - "euiFontWeightSemiBold": 600, - "euiFontWeightBold": 700, - "euiCodeFontWeightRegular": 400, - "euiCodeFontWeightBold": 700, - "euiFormMaxWidth": "400px", - "euiFormControlHeight": "40px", - "euiFormControlCompressedHeight": "32px", - "euiFormControlPadding": "12px", - "euiFormControlCompressedPadding": "8px", - "euiFormControlBorderRadius": 0, - "euiFormControlCompressedBorderRadius": "2px", - "euiRadioSize": "16px", - "euiCheckBoxSize": "16px", - "euiCheckboxBorderRadius": "4px", - "euiSwitchHeight": "20px", - "euiSwitchWidth": "44px", - "euiSwitchThumbSize": "20px", - "euiSwitchIconHeight": "16px", - "euiSwitchHeightCompressed": "16px", - "euiSwitchWidthCompressed": "28px", - "euiSwitchThumbSizeCompressed": "16px", - "euiSwitchHeightMini": "10px", - "euiSwitchWidthMini": "22px", - "euiSwitchThumbSizeMini": "10px", - "euiFormBackgroundColor": "#16171c", - "euiFormBackgroundDisabledColor": "#202128", - "euiFormBackgroundReadOnlyColor": "rgba(0, 0, 0, 0.050000000000000044)", - "euiFormBorderOpaqueColor": "#ffffff", - "euiFormBorderColor": "rgba(255, 255, 255, 0.09999999999999998)", - "euiFormBorderDisabledColor": "rgba(255, 255, 255, 0.09999999999999998)", - "euiFormCustomControlDisabledIconColor": "#a6aab0", - "euiFormCustomControlBorderColor": "#66676d", - "euiFormControlDisabledColor": "#535966", - "euiFormControlBoxShadow": "0 1px 1px -1px rgba(0, 0, 0, 0.19999999999999996) 0 3px 2px -2px rgba(0, 0, 0, 0.19999999999999996)", - "euiFormControlPlaceholderText": "#81858f", - "euiFormInputGroupLabelBackground": "#2c2f37", - "euiFormInputGroupBorder": "1px solid #34373f", - "euiSwitchOffColor": "rgba(83, 89, 102, 0.7)", - "euiFormControlLayoutGroupInputHeight": "38px", - "euiFormControlLayoutGroupInputCompressedHeight": "30px", - "euiFormControlLayoutGroupInputCompressedBorderRadius": "1px", - "euiRangeTrackColor": "#98a2b3", - "euiRangeThumbRadius": "50%", - "euiRangeThumbHeight": "16px", - "euiRangeThumbWidth": "16px", - "euiRangeThumbBorderColor": "#98a2b3", - "euiRangeTrackWidth": "100%", - "euiRangeTrackHeight": "2px", - "euiRangeTrackBorderWidth": 0, - "euiRangeTrackBorderColor": "#98a2b3", - "euiRangeTrackRadius": "4px", - "euiRangeDisabledOpacity": 0.25, - "euiRangeHighlightHeight": "4px", - "euiHeaderBackgroundColor": "#1d1e24", - "euiHeaderDarkBackgroundColor": "#131317", - "euiHeaderBorderColor": "#343741", - "euiHeaderBreadcrumbColor": "#d4dae5", - "euiHeaderHeight": "48px", - "euiHeaderChildSize": "48px", - "euiHeaderHeightCompensation": "49px", - "euiPageDefaultMaxWidth": "1000px", - "euiPageSidebarMinWidth": "192px", - "euiPanelPaddingModifiers": { - "paddingSmall": "8px", - "paddingMedium": "16px", - "paddingLarge": "24px" - }, - "euiPanelBorderRadiusModifiers": { - "borderRadiusNone": 0, - "borderRadiusMedium": "4px" - }, - "euiPanelBackgroundColorModifiers": { - "transparent": "rgba(0, 0, 0, 0)", - "plain": "#1d1e24", - "subdued": "#141519", - "accent": "#4b2b3a", - "primary": "#08334a", - "success": "#26443f", - "warning": "#4d3e25", - "danger": "#4d1f1f" - }, - "euiBreakpoints": { - "xs": 0, - "s": "575px", - "m": "768px", - "l": "992px", - "xl": "1200px" - }, - "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'", - "euiShadowColor": "#000000", - "euiShadowColorLarge": "#000000", - "euiSize": "16px", - "euiSizeXS": "4px", - "euiSizeS": "8px", - "euiSizeM": "12px", - "euiSizeL": "24px", - "euiSizeXL": "32px", - "euiSizeXXL": "40px", - "euiButtonMinWidth": "112px", - "euiScrollBar": "16px", - "euiScrollBarCorner": "4px", - "euiScrollBarCornerThin": "6px", - "euiFocusRingColor": "rgba(27, 169, 245, 0.3)", - "euiFocusRingAnimStartColor": "rgba(27, 169, 245, 0)", - "euiFocusRingAnimStartSize": "6px", - "euiFocusRingAnimStartSizeLarge": "10px", - "euiFocusRingSizeLarge": "4px", - "euiFocusRingSize": "3px", - "euiFocusTransparency": 0.2, - "euiFocusTransparencyPercent": "80%", - "euiFocusBackgroundColor": "#052231", - "euiTooltipBackgroundColor": "#000000", - "euiTooltipBorderColor": "#333333", - "euiTooltipAnimations": { - "top": "euiToolTipTop", - "left": "euiToolTipBottom", - "bottom": "euiToolTipLeft", - "right": "euiToolTipRight" - }, - "euiFontFamily": "'Inter UI', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", - "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace", - "euiFontFeatureSettings": "calt 1 kern 1 liga 1", - "euiTextScale": "2.25 1.75 1.25 1.125 1 0.875 0.75", - "euiFontSize": "16px", - "euiFontSizeXS": "12px", - "euiFontSizeS": "14px", - "euiFontSizeM": "18px", - "euiFontSizeL": "20px", - "euiFontSizeXL": "28px", - "euiFontSizeXXL": "36px", - "euiLineHeight": 1.5, - "euiBodyLineHeight": 1, - "euiTitles": { - "xxxs": { - "font-size": "12px", - "line-height": "1.5rem", - "font-weight": 700 - }, - "xxs": { - "font-size": "14px", - "line-height": "1.5rem", - "font-weight": 700 - }, - "xs": { - "font-size": "16px", - "line-height": "1.5rem", - "font-weight": 600, - "letter-spacing": "-0.02em" - }, - "s": { - "font-size": "20px", - "line-height": "2rem", - "font-weight": 500, - "letter-spacing": "-0.025em" - }, - "m": { - "font-size": "28px", - "line-height": "2.5rem", - "font-weight": 300, - "letter-spacing": "-0.04em" - }, - "l": { - "font-size": "36px", - "line-height": "3rem", - "font-weight": 300, - "letter-spacing": "-0.03em" - } - }, - "euiZLevel0": 0, - "euiZLevel1": 1000, - "euiZLevel2": 2000, - "euiZLevel3": 3000, - "euiZLevel4": 4000, - "euiZLevel5": 5000, - "euiZLevel6": 6000, - "euiZLevel7": 7000, - "euiZLevel8": 8000, - "euiZLevel9": 9000, - "euiZToastList": 9000, - "euiZModal": 8000, - "euiZMask": 6000, - "euiZNavigation": 6000, - "euiZContentMenu": 2000, - "euiZHeader": 1000, - "euiZFlyout": 1000, - "euiZMaskBelowHeader": 1000, - "euiZContent": 0, - "euiColorGhost": "#ffffff", - "euiColorInk": "#000000", - "euiColorPrimary": "#1ba9f5", - "euiColorAccent": "#f990c0", - "euiColorSuccess": "#7de2d1", - "euiColorWarning": "#ffce7a", - "euiColorDanger": "#ff6666", - "euiColorEmptyShade": "#1d1e24", - "euiColorLightestShade": "#25262e", - "euiColorLightShade": "#343741", - "euiColorMediumShade": "#535966", - "euiColorDarkShade": "#98a2b3", - "euiColorDarkestShade": "#d4dae5", - "euiColorFullShade": "#ffffff", - "euiPageBackgroundColor": "#141519", - "euiColorHighlight": "#2e2d25", - "euiTextColor": "#dfe5ef", - "euiTitleColor": "#dfe5ef", - "euiTextSubduedColor": "#7a7f89", - "euiColorDisabled": "#434548", - "euiColorPrimaryText": "#1ba9f5", - "euiColorSuccessText": "#7de2d1", - "euiColorAccentText": "#f990c0", - "euiColorWarningText": "#ffce7a", - "euiColorDangerText": "#ff6666", - "euiColorDisabledText": "#4c4e51", - "euiLinkColor": "#1ba9f5", - "euiColorChartLines": "#343741", - "euiColorChartBand": "#2a2b33" -} \ No newline at end of file diff --git a/src-docs/src/views/theme/_json/eui_legacy_light.json b/src-docs/src/views/theme/_json/eui_legacy_light.json deleted file mode 100644 index 24aaec6acde..00000000000 --- a/src-docs/src/views/theme/_json/eui_legacy_light.json +++ /dev/null @@ -1,771 +0,0 @@ -{ - "paddingSizes": { - "xs": "4px", - "s": "8px", - "m": "16px", - "l": "24px", - "xl": "32px" - }, - "avatarSizing": { - "s": { - "size": "24px", - "font-size": "12px" - }, - "m": { - "size": "32px", - "font-size": "14.4px" - }, - "l": { - "size": "40px", - "font-size": "19.200000000000003px" - }, - "xl": { - "size": "64px", - "font-size": "25.6px" - } - }, - "euiBadgeGroupGutterTypes": { - "gutterExtraSmall": "4px", - "gutterSmall": "8px" - }, - "euiBreadcrumbSpacing": "8px", - "euiBreadcrumbTruncateWidth": "160px", - "euiButtonEmptyTypes": { - "primary": "#006bb4", - "danger": "#bd271e", - "disabled": "#afb0b3", - "ghost": "#ffffff", - "text": "#343741", - "success": "#017d73", - "warning": "#9b6900" - }, - "euiCallOutTypes": { - "primary": "#006bb4", - "success": "#017d73", - "warning": "#f5a700", - "danger": "#bd271e" - }, - "euiCardSpacing": "16px", - "euiCardBottomNodeHeight": "40px", - "euiCardSelectButtonBorders": { - "text": "#017d73", - "primary": "#006bb4", - "success": "#017d73", - "danger": "#bd271e", - "ghost": "#69707d" - }, - "euiCardSelectButtonBackgrounds": { - "text": "#f5f7fa", - "primary": "#e6f0f8", - "success": "#e6f2f1", - "danger": "#f8e9e9", - "ghost": "#69707d" - }, - "euiCardPaddingModifiers": { - "paddingNone": 0, - "paddingSmall": "8px", - "paddingMedium": "16px", - "paddingLarge": "24px" - }, - "euiCheckableCardPadding": "16px", - "euiCodeBlockPaddingModifiers": { - "paddingSmall": "8px", - "paddingMedium": "16px", - "paddingLarge": "24px" - }, - "euiCollapsibleNavGroupLightBackgroundColor": "#fafbfd", - "euiCollapsibleNavGroupDarkBackgroundColor": "#2a2c34", - "euiCollapsibleNavGroupDarkHighContrastColor": "#2580bf", - "euiColorPickerValueRange0": "#ffffff", - "euiColorPickerValueRange1": "rgba(255, 255, 255, 0)", - "euiColorPickerSaturationRange0": "#000000", - "euiColorPickerSaturationRange1": "rgba(0, 0, 0, 0)", - "euiColorPickerIndicatorSize": "12px", - "euiColorPickerWidth": "152px", - "euiColorPaletteDisplaySizes": { - "sizeExtraSmall": "4px", - "sizeSmall": "8px", - "sizeMedium": "16px" - }, - "euiContextMenuWidth": "256px", - "euiControlBarBackground": "#343741", - "euiControlBarText": "#ffffff", - "euiControlBarBorderColor": "rgba(255, 255, 255, 0.19999999999999996)", - "euiControlBarInitialHeight": "40px", - "euiControlBarMaxHeight": "calc(100vh - 80px)", - "euiControlBarHeights": { - "s": "240px", - "m": "480px", - "l": "100vh" - }, - "euiDataGridPrefix": ".euiDataGrid--", - "euiDataGridStyles": "'bordersAll', 'bordersNone', 'bordersHorizontal', 'paddingSmall', 'paddingMedium', 'paddingLarge', 'stripes', 'rowHoverNone', 'rowHoverHighlight', 'headerShade', 'headerUnderline', 'footerShade', 'footerOverline', 'fontSizeSmall', 'fontSizeLarge', 'noControls', 'stickyFooter'", - "euiZDataGrid": 999, - "euiZHeaderBelowDataGrid": 998, - "euiZDataGridCellPopover": 1000, - "euiDataGridColumnResizerWidth": "3px", - "euiDataGridPopoverMaxHeight": "400px", - "euiDataGridCellPaddingS": "4px", - "euiDataGridCellPaddingM": "6px", - "euiDataGridCellPaddingL": "8px", - "euiDataGridVerticalBorder": "solid 1px #edf0f5", - "euiSuperDatePickerWidth": "480px", - "euiSuperDatePickerButtonWidth": "118px", - "euiDragAndDropSpacing": { - "s": "2px", - "m": "4px", - "l": "8px" - }, - "euiExpressionColors": { - "subdued": "#6a717d", - "primary": "#006bb4", - "success": "#017d73", - "warning": "#9b6900", - "danger": "#bd271e", - "accent": "#dd0a73" - }, - "euiFacetGutterSizes": { - "gutterNone": 0, - "gutterSmall": "4px", - "gutterMedium": "8px", - "gutterLarge": "12px" - }, - "gutterTypes": { - "gutterExtraSmall": "4px", - "gutterSmall": "8px", - "gutterMedium": "16px", - "gutterLarge": "24px", - "gutterExtraLarge": "40px" - }, - "fractions": { - "fourths": { - "percentage": "25%", - "count": 4 - }, - "thirds": { - "percentage": "33.3%", - "count": 3 - }, - "halves": { - "percentage": "50%", - "count": 2 - }, - "single": { - "percentage": "100%", - "count": 1 - } - }, - "flyoutSizes": { - "small": { - "min": "384px", - "width": "25vw", - "max": "403px" - }, - "medium": { - "min": "424px", - "width": "50vw", - "max": "768px" - }, - "large": { - "min": "691px", - "width": "75vw", - "max": "992px" - } - }, - "euiFlyoutBorder": "1px solid #d3dae6", - "euiFlyoutPaddingModifiers": { - "paddingNone": 0, - "paddingSmall": "8px", - "paddingMedium": "16px", - "paddingLarge": "24px" - }, - "euiFilePickerTallHeight": "128px", - "euiRangeLevelColors": { - "primary": "#006bb4", - "success": "#017d73", - "warning": "#f5a700", - "danger": "#bd271e" - }, - "textareaResizing": { - "vertical": "resizeVertical", - "horizontal": "resizeHorizontal", - "both": "resizeBoth", - "none": "resizeNone" - }, - "euiHeaderLinksGutterSizes": { - "gutterXS": "4px", - "gutterS": "8px", - "gutterM": "12px", - "gutterL": "24px" - }, - "ruleMargins": { - "marginXSmall": "8px", - "marginSmall": "12px", - "marginMedium": "16px", - "marginLarge": "24px", - "marginXLarge": "32px", - "marginXXLarge": "40px" - }, - "euiIconLoadingOpacity": 0.05, - "euiIconColors": { - "accent": "#dd0a73", - "danger": "#bd271e", - "ghost": "#ffffff", - "primary": "#006bb4", - "success": "#017d73", - "subdued": "#6a717d", - "text": "#343741", - "warning": "#be8100", - "inherit": "inherit" - }, - "euiIconSizes": { - "small": "12px", - "medium": "16px", - "large": "24px", - "xLarge": "32px", - "xxLarge": "40px" - }, - "euiKeyPadMenuSize": "96px", - "euiKeyPadMenuMarginSize": "4px", - "euiLinkColors": { - "subdued": "#6a717d", - "primary": "#006bb4", - "success": "#017d73", - "accent": "#dd0a73", - "warning": "#9b6900", - "danger": "#bd271e", - "text": "#343741", - "ghost": "#ffffff" - }, - "euiListGroupItemHoverBackground": "rgba(211, 218, 230, 0.25)", - "euiListGroupItemHoverBackgroundGhost": "rgba(255, 255, 255, 0.09999999999999998)", - "euiListGroupGutterTypes": { - "gutterSmall": "8px", - "gutterMedium": "16px" - }, - "euiListGroupItemColorTypes": { - "primary": "#006bb4", - "text": "#343741", - "subdued": "#6a717d", - "ghost": "#ffffff" - }, - "euiListGroupItemSizeTypes": { - "xSmall": "12px", - "small": "14px", - "medium": "16px", - "large": "20px" - }, - "euiGradientStartStop": "#f0f2f6", - "euiGradientMiddle": "#f6f8fa", - "euiLoadingSpinnerSizes": { - "small": "12px", - "medium": "16px", - "large": "24px", - "xLarge": "32px", - "xxLarge": "40px" - }, - "euiMarkdownEditorMinHeight": "150px", - "euiPopoverArrowSize": "12px", - "euiPopoverTranslateDistance": "8px", - "euiProgressSizes": { - "xs": "2px", - "s": "4px", - "m": "8px", - "l": "16px" - }, - "euiProgressColors": { - "primary": "#006bb4", - "success": "#017d73", - "warning": "#f5a700", - "danger": "#bd271e", - "accent": "#dd0a73", - "subdued": "#6a717d", - "vis0": "#54b399", - "vis1": "#6092c0", - "vis2": "#d36086", - "vis3": "#9170b8", - "vis4": "#ca8eae", - "vis5": "#d6bf57", - "vis6": "#b9a888", - "vis7": "#da8b45", - "vis8": "#aa6556", - "vis9": "#e7664c", - "customColor": "currentColor" - }, - "euiResizableButtonTransitionSpeed": "150ms", - "euiResizableButtonSize": "16px", - "euiSelectableListItemBorder": "1px solid #eef2f7", - "euiSelectableListItemPadding": "4px 12px", - "euiSelectableTemplateSitewideTypes": { - "application": { - "color": "#4e779c", - "font-weight": 500 - }, - "deployment": { - "color": "#3b7d6a", - "font-weight": 500 - }, - "article": { - "color": "#8365a6", - "font-weight": 500 - }, - "case": { - "color": "#bc533e", - "font-weight": 500 - }, - "platform": { - "color": "#807234", - "font-weight": 500 - } - }, - "euiSideNavEmphasizedBackgroundColor": "rgba(211, 218, 230, 0.30000000000000004)", - "euiSideNavRootTextcolor": "#1a1c21", - "euiSideNavBranchTextcolor": "#656b77", - "euiSideNavSelectedTextcolor": "#006bb4", - "euiSideNavDisabledTextcolor": "#a6a7aa", - "spacerSizes": { - "xs": "4px", - "s": "8px", - "m": "16px", - "l": "24px", - "xl": "32px", - "xxl": "40px" - }, - "euiStepNumberSize": "32px", - "euiStepNumberSmallSize": "24px", - "euiStepNumberMargin": "16px", - "euiStepStatusColorsToFade": { - "warning": "#f5a700", - "danger": "#bd271e", - "disabled": "#69707d", - "incomplete": "#69707d" - }, - "euiSuggestItemColors": { - "tint0": "#54b399", - "tint1": "#6092c0", - "tint2": "#d36086", - "tint3": "#9170b8", - "tint4": "#ca8eae", - "tint5": "#d6bf57", - "tint6": "#b9a888", - "tint7": "#da8b45", - "tint8": "#aa6556", - "tint9": "#e7664c", - "tint10": "#69707d" - }, - "euiTableCellContentPadding": "8px", - "euiTableCellContentPaddingCompressed": "4px", - "euiTableCellCheckboxWidth": "32px", - "euiTableActionsAreaWidth": "40px", - "euiTableHoverColor": "#fafbfd", - "euiTableSelectedColor": "#eef5fa", - "euiTableHoverSelectedColor": "#e6f0f8", - "euiTableActionsBorderColor": "rgba(152, 162, 179, 0.09999999999999998)", - "euiTableHoverClickableColor": "rgba(0, 107, 180, 0.050000000000000044)", - "euiTableFocusClickableColor": "rgba(0, 107, 180, 0.09999999999999998)", - "euiTextColors": { - "default": "#343741", - "subdued": "#6a717d", - "success": "#017d73", - "accent": "#dd0a73", - "warning": "#f5a700", - "danger": "#bd271e", - "ghost": "#ffffff", - "inherit": "inherit" - }, - "euiTextConstrainedMaxWidth": "36em", - "euiToastWidth": "320px", - "euiToastTypes": { - "primary": "#006bb4", - "success": "#017d73", - "warning": "#c88800", - "danger": "#bd271e" - }, - "euiTokenGrayColor": "#69707d", - "euiTokenTypes": { - "euiColorVis0": { - "graphic": "#54b399", - "behindText": "#6dccb1" - }, - "euiColorVis1": { - "graphic": "#6092c0", - "behindText": "#79aad9" - }, - "euiColorVis2": { - "graphic": "#d36086", - "behindText": "#ee789d" - }, - "euiColorVis3": { - "graphic": "#9170b8", - "behindText": "#a987d1" - }, - "euiColorVis4": { - "graphic": "#ca8eae", - "behindText": "#e4a6c7" - }, - "euiColorVis5": { - "graphic": "#d6bf57", - "behindText": "#f1d86f" - }, - "euiColorVis6": { - "graphic": "#b9a888", - "behindText": "#d2c0a0" - }, - "euiColorVis7": { - "graphic": "#da8b45", - "behindText": "#f5a35c" - }, - "euiColorVis8": { - "graphic": "#aa6556", - "behindText": "#c47c6c" - }, - "euiColorVis9": { - "graphic": "#e7664c", - "behindText": "#ff7e62" - }, - "gray": { - "graphic": "#69707d", - "behindText": "#69707d" - } - }, - "euiTokenTypeKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9', 'gray'", - "euiContrastRatioText": 4.5, - "euiContrastRatioGraphic": 3, - "euiContrastRatioDisabled": 2, - "euiDatePickerCalendarWidth": "284px", - "euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)", - "euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)", - "euiAnimSpeedExtraFast": "90ms", - "euiAnimSpeedFast": "150ms", - "euiAnimSpeedNormal": "250ms", - "euiAnimSpeedSlow": "350ms", - "euiAnimSpeedExtraSlow": "500ms", - "euiBorderWidthThin": "1px", - "euiBorderWidthThick": "2px", - "euiBorderColor": "#d3dae6", - "euiBorderRadius": "4px", - "euiBorderRadiusSmall": "2px", - "euiBorderThick": "2px solid #d3dae6", - "euiBorderThin": "1px solid #d3dae6", - "euiBorderEditable": "2px dotted #d3dae6", - "euiButtonHeight": "40px", - "euiButtonHeightSmall": "32px", - "euiButtonHeightXSmall": "24px", - "euiButtonColorDisabled": "#c2c3c6", - "euiButtonColorDisabledText": "#afb0b3", - "euiButtonColorGhostDisabled": "#69707d", - "euiButtonTypes": { - "primary": "#006bb4", - "accent": "#dd0a73", - "success": "#017d73", - "warning": "#f5a700", - "danger": "#bd271e", - "subdued": "#6a717d", - "ghost": "#ffffff", - "text": "#69707d" - }, - "euiCodeBlockBackgroundColor": "#f5f7fa", - "euiCodeBlockColor": "#343741", - "euiCodeBlockSelectedBackgroundColor": "inherit", - "euiCodeBlockCommentColor": "#6a717d", - "euiCodeBlockSelectorTagColor": "inherit", - "euiCodeBlockStringColor": "#ac4e6d", - "euiCodeBlockTagColor": "#4a7194", - "euiCodeBlockNameColor": "#4a7194", - "euiCodeBlockNumberColor": "#3b7d6a", - "euiCodeBlockKeywordColor": "#7c609e", - "euiCodeBlockFunctionTitleColor": "inherit", - "euiCodeBlockTypeColor": "#4a7194", - "euiCodeBlockAttributeColor": "inherit", - "euiCodeBlockSymbolColor": "#b34f3b", - "euiCodeBlockParamsColor": "inherit", - "euiCodeBlockMetaColor": "#6a717d", - "euiCodeBlockTitleColor": "#996130", - "euiCodeBlockSectionColor": "#b34f3b", - "euiCodeBlockAdditionColor": "#3b7d6a", - "euiCodeBlockDeletionColor": "#bd271e", - "euiCodeBlockSelectorClassColor": "inherit", - "euiCodeBlockSelectorIdColor": "inherit", - "euiPaletteColorBlind": { - "euiColorVis0": { - "graphic": "#54b399", - "behindText": "#6dccb1" - }, - "euiColorVis1": { - "graphic": "#6092c0", - "behindText": "#79aad9" - }, - "euiColorVis2": { - "graphic": "#d36086", - "behindText": "#ee789d" - }, - "euiColorVis3": { - "graphic": "#9170b8", - "behindText": "#a987d1" - }, - "euiColorVis4": { - "graphic": "#ca8eae", - "behindText": "#e4a6c7" - }, - "euiColorVis5": { - "graphic": "#d6bf57", - "behindText": "#f1d86f" - }, - "euiColorVis6": { - "graphic": "#b9a888", - "behindText": "#d2c0a0" - }, - "euiColorVis7": { - "graphic": "#da8b45", - "behindText": "#f5a35c" - }, - "euiColorVis8": { - "graphic": "#aa6556", - "behindText": "#c47c6c" - }, - "euiColorVis9": { - "graphic": "#e7664c", - "behindText": "#ff7e62" - } - }, - "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", - "euiColorVis0": "#54b399", - "euiColorVis1": "#6092c0", - "euiColorVis2": "#d36086", - "euiColorVis3": "#9170b8", - "euiColorVis4": "#ca8eae", - "euiColorVis5": "#d6bf57", - "euiColorVis6": "#b9a888", - "euiColorVis7": "#da8b45", - "euiColorVis8": "#aa6556", - "euiColorVis9": "#e7664c", - "euiColorVis0_behindText": "#6dccb1", - "euiColorVis1_behindText": "#79aad9", - "euiColorVis2_behindText": "#ee789d", - "euiColorVis3_behindText": "#a987d1", - "euiColorVis4_behindText": "#e4a6c7", - "euiColorVis5_behindText": "#f1d86f", - "euiColorVis6_behindText": "#d2c0a0", - "euiColorVis7_behindText": "#f5a35c", - "euiColorVis8_behindText": "#c47c6c", - "euiColorVis9_behindText": "#ff7e62", - "euiFontWeightLight": 300, - "euiFontWeightRegular": 400, - "euiFontWeightMedium": 500, - "euiFontWeightSemiBold": 600, - "euiFontWeightBold": 700, - "euiCodeFontWeightRegular": 400, - "euiCodeFontWeightBold": 700, - "euiFormMaxWidth": "400px", - "euiFormControlHeight": "40px", - "euiFormControlCompressedHeight": "32px", - "euiFormControlPadding": "12px", - "euiFormControlCompressedPadding": "8px", - "euiFormControlBorderRadius": 0, - "euiFormControlCompressedBorderRadius": "2px", - "euiRadioSize": "16px", - "euiCheckBoxSize": "16px", - "euiCheckboxBorderRadius": "4px", - "euiSwitchHeight": "20px", - "euiSwitchWidth": "44px", - "euiSwitchThumbSize": "20px", - "euiSwitchIconHeight": "16px", - "euiSwitchHeightCompressed": "16px", - "euiSwitchWidthCompressed": "28px", - "euiSwitchThumbSizeCompressed": "16px", - "euiSwitchHeightMini": "10px", - "euiSwitchWidthMini": "22px", - "euiSwitchThumbSizeMini": "10px", - "euiFormBackgroundColor": "#fbfcfd", - "euiFormBackgroundDisabledColor": "#eef2f7", - "euiFormBackgroundReadOnlyColor": "rgba(211, 218, 230, 0.050000000000000044)", - "euiFormBorderOpaqueColor": "#0f2776", - "euiFormBorderColor": "rgba(15, 39, 118, 0.09999999999999998)", - "euiFormBorderDisabledColor": "rgba(15, 39, 118, 0.09999999999999998)", - "euiFormCustomControlDisabledIconColor": "#5e646f", - "euiFormCustomControlBorderColor": "#c9cbcd", - "euiFormControlDisabledColor": "#98a2b3", - "euiFormControlBoxShadow": "0 1px 1px -1px rgba(152, 162, 179, 0.19999999999999996) 0 3px 2px -2px rgba(152, 162, 179, 0.19999999999999996)", - "euiFormControlPlaceholderText": "#6a717d", - "euiFormInputGroupLabelBackground": "#e9edf3", - "euiFormInputGroupBorder": "1px solid #e4e8ee", - "euiSwitchOffColor": "rgba(152, 162, 179, 0.19999999999999996)", - "euiFormControlLayoutGroupInputHeight": "38px", - "euiFormControlLayoutGroupInputCompressedHeight": "30px", - "euiFormControlLayoutGroupInputCompressedBorderRadius": "1px", - "euiRangeTrackColor": "#69707d", - "euiRangeThumbRadius": "50%", - "euiRangeThumbHeight": "16px", - "euiRangeThumbWidth": "16px", - "euiRangeThumbBorderColor": "#69707d", - "euiRangeTrackWidth": "100%", - "euiRangeTrackHeight": "2px", - "euiRangeTrackBorderWidth": 0, - "euiRangeTrackBorderColor": "#69707d", - "euiRangeTrackRadius": "4px", - "euiRangeDisabledOpacity": 0.25, - "euiRangeHighlightHeight": "4px", - "euiHeaderBackgroundColor": "#ffffff", - "euiHeaderDarkBackgroundColor": "#25282f", - "euiHeaderBorderColor": "#d3dae6", - "euiHeaderBreadcrumbColor": "#343741", - "euiHeaderHeight": "48px", - "euiHeaderChildSize": "48px", - "euiHeaderHeightCompensation": "49px", - "euiPageDefaultMaxWidth": "1000px", - "euiPageSidebarMinWidth": "192px", - "euiPanelPaddingModifiers": { - "paddingSmall": "8px", - "paddingMedium": "16px", - "paddingLarge": "24px" - }, - "euiPanelBorderRadiusModifiers": { - "borderRadiusNone": 0, - "borderRadiusMedium": "4px" - }, - "euiPanelBackgroundColorModifiers": { - "transparent": "rgba(0, 0, 0, 0)", - "plain": "#ffffff", - "subdued": "#fafbfd", - "accent": "#fce7f1", - "primary": "#e6f0f8", - "success": "#e6f2f1", - "warning": "#fef6e6", - "danger": "#f8e9e9" - }, - "euiBreakpoints": { - "xs": 0, - "s": "575px", - "m": "768px", - "l": "992px", - "xl": "1200px" - }, - "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'", - "euiShadowColor": "#98a2b3", - "euiShadowColorLarge": "#414e65", - "euiSize": "16px", - "euiSizeXS": "4px", - "euiSizeS": "8px", - "euiSizeM": "12px", - "euiSizeL": "24px", - "euiSizeXL": "32px", - "euiSizeXXL": "40px", - "euiButtonMinWidth": "112px", - "euiScrollBar": "16px", - "euiScrollBarCorner": "4px", - "euiScrollBarCornerThin": "6px", - "euiFocusRingColor": "rgba(0, 107, 180, 0.3)", - "euiFocusRingAnimStartColor": "rgba(0, 107, 180, 0)", - "euiFocusRingAnimStartSize": "6px", - "euiFocusRingAnimStartSizeLarge": "10px", - "euiFocusRingSizeLarge": "4px", - "euiFocusRingSize": "3px", - "euiFocusTransparency": 0.1, - "euiFocusTransparencyPercent": "90%", - "euiFocusBackgroundColor": "#e6f0f8", - "euiTooltipBackgroundColor": "#404040", - "euiTooltipBorderColor": "#595959", - "euiTooltipAnimations": { - "top": "euiToolTipTop", - "left": "euiToolTipBottom", - "bottom": "euiToolTipLeft", - "right": "euiToolTipRight" - }, - "euiFontFamily": "'Inter UI', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", - "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace", - "euiFontFeatureSettings": "calt 1 kern 1 liga 1", - "euiTextScale": "2.25 1.75 1.25 1.125 1 0.875 0.75", - "euiFontSize": "16px", - "euiFontSizeXS": "12px", - "euiFontSizeS": "14px", - "euiFontSizeM": "18px", - "euiFontSizeL": "20px", - "euiFontSizeXL": "28px", - "euiFontSizeXXL": "36px", - "euiLineHeight": 1.5, - "euiBodyLineHeight": 1, - "euiTitles": { - "xxxs": { - "font-size": "12px", - "line-height": "1.5rem", - "font-weight": 700 - }, - "xxs": { - "font-size": "14px", - "line-height": "1.5rem", - "font-weight": 700 - }, - "xs": { - "font-size": "16px", - "line-height": "1.5rem", - "font-weight": 600, - "letter-spacing": "-0.02em" - }, - "s": { - "font-size": "20px", - "line-height": "2rem", - "font-weight": 500, - "letter-spacing": "-0.025em" - }, - "m": { - "font-size": "28px", - "line-height": "2.5rem", - "font-weight": 300, - "letter-spacing": "-0.04em" - }, - "l": { - "font-size": "36px", - "line-height": "3rem", - "font-weight": 300, - "letter-spacing": "-0.03em" - } - }, - "euiZLevel0": 0, - "euiZLevel1": 1000, - "euiZLevel2": 2000, - "euiZLevel3": 3000, - "euiZLevel4": 4000, - "euiZLevel5": 5000, - "euiZLevel6": 6000, - "euiZLevel7": 7000, - "euiZLevel8": 8000, - "euiZLevel9": 9000, - "euiZToastList": 9000, - "euiZModal": 8000, - "euiZMask": 6000, - "euiZNavigation": 6000, - "euiZContentMenu": 2000, - "euiZHeader": 1000, - "euiZFlyout": 1000, - "euiZMaskBelowHeader": 1000, - "euiZContent": 0, - "euiColorGhost": "#ffffff", - "euiColorInk": "#000000", - "euiColorPrimary": "#006bb4", - "euiColorAccent": "#dd0a73", - "euiColorSuccess": "#017d73", - "euiColorWarning": "#f5a700", - "euiColorDanger": "#bd271e", - "euiColorEmptyShade": "#ffffff", - "euiColorLightestShade": "#f5f7fa", - "euiColorLightShade": "#d3dae6", - "euiColorMediumShade": "#98a2b3", - "euiColorDarkShade": "#69707d", - "euiColorDarkestShade": "#343741", - "euiColorFullShade": "#000000", - "euiPageBackgroundColor": "#fafbfd", - "euiColorHighlight": "#fffcdd", - "euiTextColor": "#343741", - "euiTitleColor": "#1a1c21", - "euiTextSubduedColor": "#6a717d", - "euiColorDisabled": "#c2c3c6", - "euiColorPrimaryText": "#006bb4", - "euiColorSuccessText": "#017d73", - "euiColorAccentText": "#dd0a73", - "euiColorWarningText": "#9b6900", - "euiColorDangerText": "#bd271e", - "euiColorDisabledText": "#afb0b3", - "euiLinkColor": "#006bb4", - "euiColorChartLines": "#eef0f3", - "euiColorChartBand": "#f5f7fa" -} \ No newline at end of file diff --git a/src-docs/src/views/theme/borders/borders.tsx b/src-docs/src/views/theme/borders/borders.tsx index 056586c32ec..d82d37d186b 100644 --- a/src-docs/src/views/theme/borders/borders.tsx +++ b/src-docs/src/views/theme/borders/borders.tsx @@ -73,7 +73,7 @@ export default () => { } + notice={} description="The border tokens contain both individual border property values and full shorthand border properties." showThemeLanguageToggle > diff --git a/src-docs/src/views/theme/breakpoints/breakpoints.tsx b/src-docs/src/views/theme/breakpoints/breakpoints.tsx index 925a51c08ff..a025305275a 100644 --- a/src-docs/src/views/theme/breakpoints/breakpoints.tsx +++ b/src-docs/src/views/theme/breakpoints/breakpoints.tsx @@ -26,7 +26,7 @@ export default () => { } + notice={} showThemeLanguageToggle description={ <> diff --git a/src-docs/src/views/theme/color/colors.tsx b/src-docs/src/views/theme/color/colors.tsx index 1e0299b481e..011dde7ee78 100644 --- a/src-docs/src/views/theme/color/colors.tsx +++ b/src-docs/src/views/theme/color/colors.tsx @@ -101,9 +101,7 @@ export default () => { - } + notice={} showThemeLanguageToggle tabs={tabs.map((tab) => { return { diff --git a/src-docs/src/views/theme/color_mode/color_mode_example.js b/src-docs/src/views/theme/color_mode/color_mode_example.js index 996ca0481ff..3c59b60c30d 100644 --- a/src-docs/src/views/theme/color_mode/color_mode_example.js +++ b/src-docs/src/views/theme/color_mode/color_mode_example.js @@ -12,8 +12,7 @@ const InverseSource = require('!!raw-loader!./inverse'); export const ColorModeExample = { title: 'Color mode', - notice: , - isNew: true, + notice: , beta: true, intro: , sections: [ diff --git a/src-docs/src/views/theme/customizing/_sass.tsx b/src-docs/src/views/theme/customizing/_sass.tsx index d5ee80ae435..16000573b1a 100644 --- a/src-docs/src/views/theme/customizing/_sass.tsx +++ b/src-docs/src/views/theme/customizing/_sass.tsx @@ -1,28 +1,7 @@ -import React, { useContext } from 'react'; -import { EuiSpacer, EuiCallOut, EuiText, EuiLink } from '../../../../../src'; +import React from 'react'; +import { EuiSpacer, EuiText } from '../../../../../src'; -// @ts-ignore Importing from JS -import { ThemeContext } from '../../../components/with_theme'; -import { CustomizeTokens } from '../../guidelines/getting_started/_customize_tokens'; - -export const SassAlert = () => { - const themeContext = useContext(ThemeContext); - return themeContext.theme.includes('legacy') ? ( - <> - ) : ( - -

- EUI is transitioning to a CSS-in-JS solution for theming and so this - method of overriding the theme will only affect components that are - still Sass-based. To track this effort, subscribe to the{' '} - - Meta ticket - - . -

- - ); -}; +import { CustomizeTokens } from '../../guidelines/getting_started/_customizing'; export default () => { return ( diff --git a/src-docs/src/views/theme/customizing/values.tsx b/src-docs/src/views/theme/customizing/values.tsx index 49400e3e0e4..21c7ba855bd 100644 --- a/src-docs/src/views/theme/customizing/values.tsx +++ b/src-docs/src/views/theme/customizing/values.tsx @@ -38,7 +38,7 @@ import Animation from './_animation'; // @ts-ignore Importing from JS import Breakpoints from './_breakpoints'; -import Sass, { SassAlert } from './_sass'; +import Sass from './_sass'; // @ts-ignore TODO const JsonFlyout = ({ setIsOpen }) => { @@ -80,8 +80,7 @@ export default () => { } - notice={showSass ? : } + notice={} showThemeLanguageToggle > {showSass ? ( diff --git a/src-docs/src/views/theme/other/other.tsx b/src-docs/src/views/theme/other/other.tsx index 218e7d06043..46a6d58a027 100644 --- a/src-docs/src/views/theme/other/other.tsx +++ b/src-docs/src/views/theme/other/other.tsx @@ -125,7 +125,7 @@ export default () => { } + notice={} showThemeLanguageToggle description="Here are a few more global theme tokens for styles we use throughout EUI." > diff --git a/src-docs/src/views/theme/sizing/sizing.tsx b/src-docs/src/views/theme/sizing/sizing.tsx index 0e5871dc079..29e2fff05d8 100644 --- a/src-docs/src/views/theme/sizing/sizing.tsx +++ b/src-docs/src/views/theme/sizing/sizing.tsx @@ -41,7 +41,7 @@ export default () => { } + notice={} showThemeLanguageToggle > diff --git a/src-docs/src/views/theme/theme_example.js b/src-docs/src/views/theme/theme_example.js index 9970cfcc16f..7b469e1406b 100644 --- a/src-docs/src/views/theme/theme_example.js +++ b/src-docs/src/views/theme/theme_example.js @@ -24,9 +24,7 @@ const createComputedSource = require('!!raw-loader!./create_computed'); export const ThemeExample = { title: 'Theme provider', - isNew: true, - beta: true, - notice: , + notice: , intro: ( <> @@ -88,7 +86,7 @@ export const ThemeExample = {

The concept for each prop is explained in subsequent sections. More information on the full shape of an EUI theme, see the{' '} - Global Values{' '} + Global Values{' '} page.

diff --git a/src-docs/src/views/theme/typography/typography.tsx b/src-docs/src/views/theme/typography/typography.tsx index c127898bff2..6ed8626c733 100644 --- a/src-docs/src/views/theme/typography/typography.tsx +++ b/src-docs/src/views/theme/typography/typography.tsx @@ -41,7 +41,6 @@ export const typographySections = [ export default () => { const { euiTheme } = useEuiTheme(); const themeContext = useContext(ThemeContext); - const legacyTheme = !themeContext.theme.includes('amsterdam'); const currentLanguage = themeContext.themeLanguage; const showSass = currentLanguage.includes('sass'); @@ -108,7 +107,7 @@ export default () => { } + notice={} showThemeLanguageToggle description={ <> @@ -156,51 +155,47 @@ export default () => { {weightContent} - {!legacyTheme ? ( - <> - -

- EUI also supports variable font families which can be{' '} - - imported from Google fonts using their new API - - . Though we still recommend sticking to the theme token names. -

- - - } - example={ -
The quick brown fox
- } - snippet={ - showSass - ? findSassFontWeight({ fontWeight }) - : findJSFontWeight({ fontWeight, euiTheme }) - } - snippetLanguage={showSass ? 'scss' : 'jsx'} - /> - - ) : undefined} + +

+ EUI also supports variable font families which can be{' '} + + imported from Google fonts using their new API + + . Though we still recommend sticking to the theme token names. +

+ + + } + example={ +
The quick brown fox
+ } + snippet={ + showSass + ? findSassFontWeight({ fontWeight }) + : findJSFontWeight({ fontWeight, euiTheme }) + } + snippetLanguage={showSass ? 'scss' : 'jsx'} + /> {scaleContent} diff --git a/src/components/provider/__snapshots__/provider.test.tsx.snap b/src/components/provider/__snapshots__/provider.test.tsx.snap index 20c28f010d0..d4aa0803c0f 100644 --- a/src/components/provider/__snapshots__/provider.test.tsx.snap +++ b/src/components/provider/__snapshots__/provider.test.tsx.snap @@ -601,304 +601,6 @@ exports[`EuiProvider changing color modes propagates \`colorMode\` 1`] = ` `; -exports[`EuiProvider changing themes propagates \`theme\` 1`] = ` - - - -`; - exports[`EuiProvider is rendered 1`] = ` { it('is rendered', () => { @@ -39,14 +38,6 @@ describe('EuiProvider', () => { }); }); - describe('changing themes', () => { - it('propagates `theme`', () => { - const component = shallow(); - - expect(component).toMatchSnapshot(); - }); - }); - describe('changing color modes', () => { it('propagates `colorMode`', () => { const component = shallow(); diff --git a/src/global_styling/reset/global_styles.tsx b/src/global_styling/reset/global_styles.tsx index ad9c45690fe..2337d113ccb 100644 --- a/src/global_styling/reset/global_styles.tsx +++ b/src/global_styling/reset/global_styles.tsx @@ -12,13 +12,12 @@ import { useScrollBar } from '../mixins/_helpers'; import { shade, tint, transparentize } from '../../services/color'; import { useEuiTheme } from '../../services/theme'; import { resetStyles as reset } from './reset'; -import { isLegacyTheme } from '../../themes'; export interface EuiGlobalStylesProps {} export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => { const { - euiTheme: { base, border, colors, font, themeName }, + euiTheme: { base, border, colors, font }, colorMode, } = useEuiTheme(); @@ -34,15 +33,6 @@ export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => { width: 'auto', }); - /** - * Early return with no styles if using the legacy theme, - * which has reset and global styles included in the compiled CSS. - * Comes after `scrollbarStyles` because of hook rules. - */ - if (isLegacyTheme(themeName)) { - return null; - } - /** * This font reset sets all our base font/typography related properties * that are needed to override browser-specific element settings. diff --git a/src/themes/index.ts b/src/themes/index.ts index e1b0ae15b8c..bb3ed5901ae 100644 --- a/src/themes/index.ts +++ b/src/themes/index.ts @@ -7,7 +7,6 @@ */ export type { EUI_THEME } from './themes'; -export { EUI_THEMES, isLegacyTheme, isDefaultTheme } from './themes'; +export { EUI_THEMES, isDefaultTheme } from './themes'; export { AMSTERDAM_NAME_KEY, EuiThemeAmsterdam } from './amsterdam/theme'; -export { LEGACY_NAME_KEY, EuiThemeLegacy } from './legacy/theme'; diff --git a/src/themes/legacy/theme.ts b/src/themes/legacy/theme.ts deleted file mode 100644 index 6acb25a4e64..00000000000 --- a/src/themes/legacy/theme.ts +++ /dev/null @@ -1,30 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import { buildTheme } from '../../services/theme/utils'; -import { EuiThemeShape } from '../../services/theme/types'; -import { animation } from '../../global_styling/variables/_animations'; -import { breakpoint } from '../../global_styling/variables/_breakpoint'; -import { colors } from '../../global_styling/variables/_colors'; -import { base, size } from '../../global_styling/variables/_size'; -import { font } from '../../global_styling/variables/_typography'; -import { border } from '../../global_styling/variables/_borders'; - -export const LEGACY_NAME_KEY = 'EUI_THEME_LEGACY'; - -export const euiThemeLegacy: EuiThemeShape = { - colors, - base, - size, - font, - border, - animation, - breakpoint, -}; - -export const EuiThemeLegacy = buildTheme(euiThemeLegacy, LEGACY_NAME_KEY); diff --git a/src/themes/themes.test.ts b/src/themes/themes.test.ts index 4fc4c66a52d..cb8f4533d4a 100644 --- a/src/themes/themes.test.ts +++ b/src/themes/themes.test.ts @@ -6,15 +6,7 @@ * Side Public License, v 1. */ -import { isLegacyTheme, isDefaultTheme } from './themes'; - -describe('isLegacyTheme', () => { - it('returns true for the legacy name', () => { - expect(isLegacyTheme('EUI_THEME_LEGACY')).toBe(true); - expect(isLegacyTheme('EUI_THEME_AMSTERDAM')).toBe(false); - expect(isLegacyTheme('CUSTOM_DEFAULT')).toBe(false); - }); -}); +import { isDefaultTheme } from './themes'; describe('isDefaultTheme', () => { it('returns true for the default name', () => { diff --git a/src/themes/themes.ts b/src/themes/themes.ts index e886521e0fd..d2f714092df 100644 --- a/src/themes/themes.ts +++ b/src/themes/themes.ts @@ -8,7 +8,6 @@ import { EuiThemeSystem } from '../services'; import { EuiThemeAmsterdam, AMSTERDAM_NAME_KEY } from './amsterdam/theme'; -import { EuiThemeLegacy, LEGACY_NAME_KEY } from './legacy/theme'; export interface EUI_THEME { text: string; @@ -27,22 +26,8 @@ export const EUI_THEMES: EUI_THEME[] = [ value: 'dark', provider: EuiThemeAmsterdam, }, - { - text: 'Legacy: Light', - value: `${LEGACY_NAME_KEY}_light`, - provider: EuiThemeLegacy, - }, - { - text: 'Legacy: Dark', - value: `${LEGACY_NAME_KEY}_dark`, - provider: EuiThemeLegacy, - }, ]; -export const isLegacyTheme = (name: string) => { - return name === LEGACY_NAME_KEY; -}; - export const isDefaultTheme = (name: string) => { return name === AMSTERDAM_NAME_KEY; }; diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md index 8e7d00fcab1..61a250b1876 100644 --- a/wiki/writing-styles-with-emotion.md +++ b/wiki/writing-styles-with-emotion.md @@ -10,7 +10,7 @@ Styles can be added conditionally based on environment variables, such as the ac ``` ` color: colors.primary; - font-size: ${isLegacyTheme ? '16px' : '14px'`} + background: ${colorMode === 'light' ? 'white' : 'black'`} ` ``` @@ -22,4 +22,4 @@ Although possible in some contexts, it is not recommended to "shortcut" logic us ## The `css` prop -TBD \ No newline at end of file +TBD