[Visual Refresh] Make Borealis default theme in EUI

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

@@ -14,21 +14,17 @@ import { EuiThemeBorealis } from '@elastic/eui-theme-borealis';
 
 import { EuiThemeOverrides } from './theme_overrides';
 
-const EXPERIMENTAL_THEMES = [
+export const AVAILABLE_THEMES = [
   {
     text: 'Borealis',
     value: EuiThemeBorealis.key,
     provider: EuiThemeBorealis,
   },
-];
-
-export const AVAILABLE_THEMES = [
   {
     text: 'Amsterdam',
     value: EuiThemeAmsterdam.key,
     provider: EuiThemeAmsterdam,
   },
-  ...EXPERIMENTAL_THEMES,
 ];
 
 const EUI_COLOR_MODES = ['light', 'dark'] as EuiThemeColorMode[];

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

@@ -20,7 +20,6 @@ import {
   euiTextTruncate,
   useEuiMemoizedStyles,
   UseEuiTheme,
-  isExperimentalThemeEnabled,
 } from '@elastic/eui';
 import {
   euiFormControlText,
@@ -235,7 +234,7 @@ export default function NavbarContent(): JSX.Element {
             <NavbarColorModeToggle className="colorModeToggle" />
             <NavbarItems items={rightItems} />
 
-            {isBrowser && isExperimentalThemeEnabled() && (
+            {isBrowser && (
               <div css={styles.themeSwitcher}>
                 <ThemeSwitcher />
               </div>

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

@@ -10,7 +10,6 @@ import euiVersions from '@site/static/versions.json';
 
 import { VersionSwitcher } from '../../../../components/version_switcher';
 import { ThemeSwitcher } from '../../../../components/theme_switcher';
-import { isExperimentalThemeEnabled } from '@elastic/eui/lib/themes/themes';
 
 const getStyles = ({ euiTheme }: UseEuiTheme) => ({
   sidebar: css`
@@ -66,7 +65,7 @@ export default function NavbarMobileSidebarHeader(): JSX.Element {
     <div className="navbar-sidebar__brand" css={styles.sidebar}>
       <NavbarLogo />
       {isBrowser && versions && <VersionSwitcher versions={versions} />}
-      {isBrowser && isExperimentalThemeEnabled() && <ThemeSwitcher />}
+      {isBrowser && <ThemeSwitcher />}
       <NavbarColorModeToggle />
       <CloseButton />
     </div>

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

@@ -18,6 +18,8 @@ import { font } from './variables/_typography';
 import { focus } from './variables/_states';
 import { components } from './variables/_components';
 
+export { colorVis } from './variables/colors/_colors_vis';
+
 export const EUI_THEME_BOREALIS_KEY = 'EUI_THEME_BOREALIS';
 
 export const euiThemeBorealis: EuiThemeShape = {

packages/eui/.storybook/decorator.tsx

@@ -21,21 +21,17 @@ import { EuiThemeColorMode } from '../src/services';
 import { EuiProvider, EuiProviderProps } from '../src/components/provider';
 import { EuiThemeAmsterdam } from '../src/themes';
 
-const EXPERIMENTAL_THEMES = [
+export const AVAILABLE_THEMES = [
   {
     text: 'Borealis',
     value: EuiThemeBorealis.key,
     provider: EuiThemeBorealis,
   },
-];
-
-export const AVAILABLE_THEMES = [
   {
     text: 'Amsterdam',
     value: EuiThemeAmsterdam.key,
     provider: EuiThemeAmsterdam,
   },
-  ...EXPERIMENTAL_THEMES,
 ];
 
 /**
@@ -167,17 +163,14 @@ export const euiProviderDecoratorGlobals: Preview['globalTypes'] = {
       dynamicTitle: true,
     },
   },
-};
-
-export const euiProviderDecoratorGlobalsExperimental = {
   theme: {
     description: 'Theme for EuiProvider',
-    defaultValue: EuiThemeAmsterdam.key,
+    defaultValue: EuiThemeBorealis.key,
     toolbar: {
       title: 'Theme',
       items: [
-        { value: EuiThemeAmsterdam.key, title: 'Amsterdam', icon: 'box' },
         { value: EuiThemeBorealis.key, title: 'Borealis', icon: 'box' },
+        { value: EuiThemeAmsterdam.key, title: 'Amsterdam', icon: 'box' },
       ],
       dynamicTitle: true,
     },

packages/eui/.storybook/preview.tsx

@@ -37,13 +37,8 @@ setEuiDevProviderWarning('error');
 /**
  * Custom global decorators
  */
-import { isExperimentalThemeEnabled } from '../src/themes';
 import { customJsxDecorator } from './addons/code-snippet/decorators/jsx_decorator';
-import {
-  EuiProviderDecorator,
-  euiProviderDecoratorGlobals,
-  euiProviderDecoratorGlobalsExperimental,
-} from './decorator';
+import { EuiProviderDecorator, euiProviderDecoratorGlobals } from './decorator';
 
 const preview: Preview = {
   decorators: [
@@ -59,12 +54,7 @@ const preview: Preview = {
       </EuiProviderDecorator>
     ),
   ],
-  globalTypes: isExperimentalThemeEnabled()
-    ? {
-        ...euiProviderDecoratorGlobals,
-        ...euiProviderDecoratorGlobalsExperimental,
-      }
-    : { ...euiProviderDecoratorGlobals },
+  globalTypes: euiProviderDecoratorGlobals,
   parameters: {
     backgrounds: { disable: true }, // Use colorMode instead
     options: {

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

@@ -3,11 +3,11 @@ import {
   EUI_THEME_BOREALIS_KEY,
   EuiThemeBorealis,
 } from '@elastic/eui-theme-borealis';
+
 import {
-  EUI_THEMES,
   EUI_THEME,
   AMSTERDAM_NAME_KEY,
-  isExperimentalThemeEnabled,
+  EuiThemeAmsterdam,
 } from '../../../../src/themes';
 import { EuiThemeColorModeStandard } from '../../../../src/services';
 // @ts-ignore importing from a JS file
@@ -34,17 +34,18 @@ const THEME_CSS_MAP = {
   },
 };
 
-const EXPERIMENTAL_THEMES: EUI_THEME[] = isExperimentalThemeEnabled()
-  ? [
-      {
-        text: 'Borealis',
-        value: EuiThemeBorealis.key,
-        provider: EuiThemeBorealis,
-      },
-    ]
-  : [];
-
-export const AVAILABLE_THEMES = [...EUI_THEMES, ...EXPERIMENTAL_THEMES];
+export const AVAILABLE_THEMES = [
+  {
+    text: 'Borealis',
+    value: EuiThemeBorealis.key,
+    provider: EuiThemeBorealis,
+  },
+  {
+    text: 'Amsterdam',
+    value: AMSTERDAM_NAME_KEY,
+    provider: EuiThemeAmsterdam,
+  },
+];
 const THEME_NAMES = AVAILABLE_THEMES.map(({ value }) => value);
 
 AVAILABLE_THEMES.forEach((theme) => {

packages/eui/src/components/avatar/__snapshots__/avatar.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = `
   class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2 emotion-euiAvatar-user-m-uppercase-euiTestCss"
   data-test-subj="test subject string"
   role="img"
-  style="background-color: rgb(238, 120, 157); color: rgb(0, 0, 0);"
+  style="background-color: rgb(125, 186, 255); color: rgb(0, 0, 0);"
   title="  "
 >
   <span
@@ -23,7 +23,7 @@ exports[`EuiAvatar is rendered 1`] = `
   class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2 emotion-euiAvatar-user-m-uppercase-euiTestCss"
   data-test-subj="test subject string"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -39,7 +39,7 @@ exports[`EuiAvatar props casing capitalize is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-user-m-capitalize"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -55,7 +55,7 @@ exports[`EuiAvatar props casing lowercase is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-user-m-lowercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -71,7 +71,7 @@ exports[`EuiAvatar props casing none is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-user-m-none"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -87,7 +87,7 @@ exports[`EuiAvatar props casing uppercase is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-user-m-uppercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -164,7 +164,7 @@ exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-user-m-uppercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -179,7 +179,7 @@ exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-user-m-uppercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -195,7 +195,7 @@ exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-user-m-uppercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -211,7 +211,7 @@ exports[`EuiAvatar props iconType is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-user-m-uppercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -237,7 +237,7 @@ exports[`EuiAvatar props initials is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-user-m-uppercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -253,7 +253,7 @@ exports[`EuiAvatar props initialsLength is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-user-m-uppercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -268,7 +268,7 @@ exports[`EuiAvatar props isDisabled is rendered 1`] = `
 <div
   class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar-isDisabled emotion-euiAvatar-user-m-uppercase-isDisabled"
   role="presentation"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -284,7 +284,7 @@ exports[`EuiAvatar props size l is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--l euiAvatar--user emotion-euiAvatar-user-l-uppercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -300,7 +300,7 @@ exports[`EuiAvatar props size m is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-user-m-uppercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -316,7 +316,7 @@ exports[`EuiAvatar props size s is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--s euiAvatar--user emotion-euiAvatar-user-s-uppercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -332,7 +332,7 @@ exports[`EuiAvatar props size xl is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--xl euiAvatar--user emotion-euiAvatar-user-xl-uppercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span
@@ -348,7 +348,7 @@ exports[`EuiAvatar props type is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--space emotion-euiAvatar-space-m-none"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-color: rgb(255, 139, 190); color: rgb(0, 0, 0);"
   title="name"
 >
   <span

packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap

@@ -196,7 +196,7 @@ exports[`EuiBadge props color accepts hex 1`] = `
 exports[`EuiBadge props color accepts rgba 1`] = `
 <span
   class="euiBadge emotion-euiBadge"
-  style="--euiBadgeBackgroundColor: rgba(255,255,255,1); --euiBadgeTextColor: #000000;"
+  style="--euiBadgeBackgroundColor: rgba(255,255,255,1); --euiBadgeTextColor: #07101F;"
   title="Content"
 >
   <span

packages/eui/src/components/button/__snapshots__/button.test.tsx.snap

@@ -299,7 +299,7 @@ exports[`EuiButton props isLoading is rendered 1`] = `
       aria-label="Loading"
       class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
       role="progressbar"
-      style="border-color: #0077cc currentcolor currentcolor currentcolor;"
+      style="border-color: #1750ba currentcolor currentcolor currentcolor;"
     />
   </span>
 </button>

packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`EuiButtonDisplayContent button icon loading icon renders disabled & loa
     aria-label="Loading"
     class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
     role="progressbar"
-    style="border-color: #0077cc currentcolor currentcolor currentcolor;"
+    style="border-color: #1750ba currentcolor currentcolor currentcolor;"
   />
   <span
     class="eui-textTruncate"

packages/eui/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap

@@ -327,7 +327,7 @@ exports[`EuiButtonEmpty props isLoading is rendered 1`] = `
       aria-label="Loading"
       class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
       role="progressbar"
-      style="border-color: #0077cc currentcolor currentcolor currentcolor;"
+      style="border-color: #1750ba currentcolor currentcolor currentcolor;"
     />
     <span
       class="eui-textTruncate euiButtonEmpty__text"

packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap

@@ -257,7 +257,7 @@ exports[`EuiButtonIcon props isLoading is rendered 1`] = `
     aria-label="Loading"
     class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
     role="progressbar"
-    style="border-color: #0077cc currentcolor currentcolor currentcolor;"
+    style="border-color: #1750ba currentcolor currentcolor currentcolor;"
   />
 </button>
 `;