[Visual Refresh] Add Borealis theme

.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh

@@ -33,7 +33,7 @@ analytics_vault="secret/ci/elastic-eui/analytics"
 export DOCS_BASE_URL="/${bucket_directory}"
 export DOCS_GOOGLE_TAG_MANAGER_ID="$(retry 5 vault read -field=google_tag_manager_id "${analytics_vault}")"
 
-yarn workspaces foreach -Rpt --from @elastic/eui-website run build
+yarn workspace @elastic/eui-website run build:workspaces
 
 echo "+++ Configuring environment for website deployment"
 

.buildkite/scripts/pipelines/pipeline_test.sh

@@ -29,53 +29,53 @@ COMMAND=""
 case $TEST_TYPE in
   lint)
     echo "[TASK]: Running linters"
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui lint"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui lint"
     ;;
 
   unit:ts)
     echo "[TASK]: Running .ts and .js unit tests"
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=non-react"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=non-react"
     ;;
 
   unit:tsx:16)
     echo "[TASK]: Running Jest .tsx tests against React 16"
     DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=jest_token_react16 "${buildkite_analytics_vault}")")
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=16 --testMatch=react"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=16 --testMatch=react"
     ;;
 
   unit:tsx:17)
     echo "[TASK]: Running Jest .tsx tests against React 17"
     DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=jest_token_react17 "${buildkite_analytics_vault}")")
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=17 --testMatch=react"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=17 --testMatch=react"
     ;;
 
   unit:tsx)
     echo "[TASK]: Running Jest .tsx tests against React 18"
     DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=jest_token_react18 "${buildkite_analytics_vault}")")
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=react"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=react"
     ;;
 
   cypress:16)
     echo "[TASK]: Running Cypress tests against React 16"
     DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=cypress_token_react16 "${buildkite_analytics_vault}")")
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=16"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=16"
     ;;
 
   cypress:17)
     echo "[TASK]: Running Cypress tests against React 17"
     DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=cypress_token_react17 "${buildkite_analytics_vault}")")
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=17"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=17"
     ;;
 
   cypress:18)
     echo "[TASK]: Running Cypress tests against React 18"
     DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=cypress_token_react18 "${buildkite_analytics_vault}")")
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048"
     ;;
 
   cypress:a11y)
     echo "[TASK]: Running Cypress accessibility tests against React 18"
-    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui run test-cypress-a11y --node-options=--max_old_space_size=2048"
+    COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui run test-cypress-a11y --node-options=--max_old_space_size=2048"
     ;;
 
   *)

.buildkite/scripts/release/step_build.sh

@@ -10,6 +10,7 @@ echo "+++ :yarn: Installing dependencies"
 yarn
 
 echo "+++ :yarn: Building @elastic/eui"
+yarn build:workspaces
 yarn build
 
 echo "+++ :yarn: Built @elastic/eui"

package.json

@@ -12,7 +12,8 @@
     "pre-push": "yarn --cwd packages/eui pre-push",
     "preinstall": "echo \"\\x1b[K\\x1b[37;41mWarning: EUI has recently migrated to a monorepo structure. Please run EUI scripts like \\x1b[1;4myarn start\\x1b[0m\\x1b[37;41m or \\x1b[1;4myarn build\\x1b[0m\\x1b[37;41m from the \\x1b[1;4mpackages/eui\\x1b[0m\\x1b[37;41m directory instead!\n\nIf this is the first time you're running EUI after the monorepo migration, please run this first from the root repository's directory to clean up your local environment:\n  \\x1b[1;4mrm -rf node_modules .cache-loader dist es lib optimize test-env types .eslintcache .loki reports docs .nyc_output eui.d.ts && yarn\\x1b[0m\\x1b[37;41m\n\nInstall process will continue in 10 seconds...\\x1b[0m\"; sleep 10",
     "start": "echo '\\x1b[K\\x1b[37;41mPlease run this script from the \\x1b[1;4mpackages/eui\\x1b[0m\\x1b[37;41m directory instead\\x1b[0m'; exit 1",
-    "build": "echo '\\x1b[K\\x1b[37;41mPlease run this script from the \\x1b[1;4mpackages/eui\\x1b[0m\\x1b[37;41m directory instead\\x1b[0m'; exit 1"
+    "build": "echo '\\x1b[K\\x1b[37;41mPlease run this script from the \\x1b[1;4mpackages/eui\\x1b[0m\\x1b[37;41m directory instead\\x1b[0m'; exit 1",
+    "release": "node scripts/release"
   },
   "repository": {
     "type": "git",
@@ -24,6 +25,9 @@
   "devDependencies": {
     "pre-push": "^0.1.4"
   },
+  "dependencies": {
+    "@elastic/eui-release-cli": "link:packages/release-cli"
+  },
   "resolutions": {
     "prismjs": "1.27.0",
     "react": "^18",

packages/docusaurus-theme/package.json

@@ -34,8 +34,9 @@
     "@docusaurus/theme-common": "^3.5.2",
     "@docusaurus/utils-validation": "^3.5.2",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "97.2.0",
+    "@elastic/eui": "workspace:^",
     "@elastic/eui-docgen": "workspace:^",
+    "@elastic/eui-theme-borealis": "workspace:^",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@types/react-window": "^1.8.8",

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

@@ -8,31 +8,31 @@ import {
 import { FunctionComponent, PropsWithChildren } from 'react';
 
 type VARIANTS = 'info' | 'tip' | 'note' | 'danger' | 'warning';
-type TEXT_COLORS = 'primaryText' | 'successText' | 'dangerText' | 'warningText';
+type TEXT_COLORS = 'textPrimary' | 'textSuccess' | 'textDanger' | 'textWarning';
 
 const VARIANT_TO_COLOR_MAP: Record<
   VARIANTS,
   { backgroundVariable: string; colorKey: TEXT_COLORS }
 > = {
   info: {
     backgroundVariable: 'var(--eui-background-color-primary)',
-    colorKey: 'primaryText',
+    colorKey: 'textPrimary',
   },
   note: {
     backgroundVariable: 'var(--eui-background-color-primary)',
-    colorKey: 'primaryText',
+    colorKey: 'textPrimary',
   },
   tip: {
     backgroundVariable: 'var(--eui-background-color-success)',
-    colorKey: 'successText',
+    colorKey: 'textSuccess',
   },
   danger: {
     backgroundVariable: 'var(--eui-background-color-danger)',
-    colorKey: 'dangerText',
+    colorKey: 'textDanger',
   },
   warning: {
     backgroundVariable: 'var(--eui-background-color-warning)',
-    colorKey: 'warningText',
+    colorKey: 'textWarning',
   },
 };
 
@@ -52,7 +52,7 @@ const getStyles = (theme: UseEuiTheme, variant: VARIANTS) => {
       .alert {
         --ifm-alert-background-color: ${VARIANT_TO_COLOR_MAP[variant]
           .backgroundVariable};
-        --ifm-alert-foreground-color: ${euiTheme.colors.text};
+        --ifm-alert-foreground-color: ${euiTheme.colors.textParagraph};
         --ifm-alert-padding-horizontal: ${euiTheme.size.base};
         --ifm-alert-padding-vertical: ${euiTheme.size.base};
         --ifm-alert-border-width: ${euiTheme.border.width.thin};

packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx

@@ -36,23 +36,24 @@ const getDemoActionsBarStyles = (euiTheme: UseEuiTheme) => {
       &:last-child {
         // border radius should be 1px smaller to work nicely
         // with the wrapper border width of 1px
-        border-radius: 0 0 calc(var(--docs-demo-border-radius) - 1px) calc(var(--docs-demo-border-radius) - 1px);
+        border-radius: 0 0 calc(var(--docs-demo-border-radius) - 1px)
+          calc(var(--docs-demo-border-radius) - 1px);
       }
     `,
     button: css`
-      background: var(--eui-background-color-primary-opaque);
+      background: var(--eui-background-color-primary);
       border: 1px solid var(--eui-border-color-primary);
       margin-right: auto;
     `,
   };
-}
+};
 
 export const DemoActionsBar = ({
   isSourceOpen,
   setSourceOpen,
   onClickOpenInCodeSandbox,
   onClickReloadExample,
-  onClickCopyToClipboard
+  onClickCopyToClipboard,
 }: DemoActionsBarProps) => {
   const styles = useEuiMemoizedStyles(getDemoActionsBarStyles);
 

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

@@ -91,9 +91,9 @@ export const NavbarItem = (props: Props) => {
   } = props;
 
   const isBrowser = useIsBrowser();
-  const { theme } = useContext(AppThemeContext);
+  const { colorMode } = useContext(AppThemeContext);
 
-  const isDarkMode = theme === 'dark';
+  const isDarkMode = colorMode === 'dark';
 
   const styles = useEuiMemoizedStyles(getStyles);
   const cssStyles = [

packages/docusaurus-theme/src/components/prop_table/prop_table.tsx

@@ -7,9 +7,13 @@ import {
   EuiCode,
   UseEuiTheme,
   EuiTitle,
-  useEuiMemoizedStyles, EuiLink,
+  useEuiMemoizedStyles,
+  EuiLink,
 } from '@elastic/eui';
-import { ProcessedComponent, ProcessedComponentProp } from '@elastic/eui-docgen';
+import {
+  ProcessedComponent,
+  ProcessedComponentProp,
+} from '@elastic/eui-docgen';
 import { useCallback, useMemo } from 'react';
 import { css } from '@emotion/react';
 import { PropTableExtendedTypes } from './extended_types';
@@ -19,9 +23,8 @@ export interface PropTableProps {
   headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
-const getPropId = (prop: ProcessedComponentProp, componentName: string) => (
-  `${encodeURIComponent(componentName)}-prop-${prop.name}`
-);
+const getPropId = (prop: ProcessedComponentProp, componentName: string) =>
+  `${encodeURIComponent(componentName)}-prop-${prop.name}`;
 
 const getPropTableStyles = ({ euiTheme }: UseEuiTheme) => ({
   propTable: css`
@@ -53,7 +56,7 @@ const getPropTableStyles = ({ euiTheme }: UseEuiTheme) => ({
   `,
   required: css`
     font-family: ${euiTheme.font.familyCode};
-    color: ${euiTheme.colors.dangerText};
+    color: ${euiTheme.colors.textDanger};
   `,
   type: css`
     font-weight: ${euiTheme.font.weight.semiBold};
@@ -78,19 +81,23 @@ export const PropTable = ({
   const styles = useEuiMemoizedStyles(getPropTableStyles);
 
   const tableItems = useMemo<Array<ProcessedComponentProp>>(
-    () => Object.values(definition.props).sort(
-      (a, b) => +b.isRequired - +a.isRequired
-    ),
-    [definition.props],
+    () =>
+      Object.values(definition.props).sort(
+        (a, b) => +b.isRequired - +a.isRequired
+      ),
+    [definition.props]
   );
 
   const columns = useMemo<Array<EuiBasicTableColumn<ProcessedComponentProp>>>(
-    () => ([
+    () => [
       {
         field: 'name',
         name: 'Prop',
-        width: "150",
-        render(value: ProcessedComponentProp['name'], prop: ProcessedComponentProp) {
+        width: '150',
+        render(
+          value: ProcessedComponentProp['name'],
+          prop: ProcessedComponentProp
+        ) {
           return (
             <span css={styles.propName}>
               {value}
@@ -110,44 +117,59 @@ export const PropTable = ({
       {
         field: 'description',
         name: 'Description and type',
-        render(value: ProcessedComponentProp['description'], prop: ProcessedComponentProp) {
+        render(
+          value: ProcessedComponentProp['description'],
+          prop: ProcessedComponentProp
+        ) {
           return (
-            <EuiFlexGroup direction="column" alignItems="flexStart" gutterSize="s">
+            <EuiFlexGroup
+              direction="column"
+              alignItems="flexStart"
+              gutterSize="s"
+            >
               {value?.trim() && (
-                <EuiMarkdownFormat css={styles.description}>{value}</EuiMarkdownFormat>
+                <EuiMarkdownFormat css={styles.description}>
+                  {value}
+                </EuiMarkdownFormat>
               )}
               {prop.type && (
                 <span css={styles.type}>
-                  Type: {' '}
+                  Type:{' '}
                   <EuiCode language="ts">
                     {prop.type.raw || prop.type.name}
                   </EuiCode>
                 </span>
               )}
             </EuiFlexGroup>
           );
-        }
+        },
       },
       {
         field: 'defaultValue',
         name: 'Default value',
-        width: "120",
-        render(value: ProcessedComponentProp['defaultValue'], prop: ProcessedComponentProp) {
+        width: '120',
+        render(
+          value: ProcessedComponentProp['defaultValue'],
+          prop: ProcessedComponentProp
+        ) {
           if (prop.isRequired && !value?.trim().length) {
-            return <EuiTextColor css={styles.required}>Required</EuiTextColor>
+            return <EuiTextColor css={styles.required}>Required</EuiTextColor>;
           }
 
           return value && <EuiCode>{value}</EuiCode>;
         },
-      }
-    ]),
-    [],
+      },
+    ],
+    []
   );
 
-  const rowProps = useCallback((item: ProcessedComponentProp) => ({
-    id: getPropId(item, definition.displayName),
-    css: styles.tableRow,
-  }), [definition.displayName]);
+  const rowProps = useCallback(
+    (item: ProcessedComponentProp) => ({
+      id: getPropId(item, definition.displayName),
+      css: styles.tableRow,
+    }),
+    [definition.displayName]
+  );
 
   return (
     <EuiFlexGroup