[Visual Refresh] Setup semantic color tokens

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/theme/EditThisPage/index.tsx

@@ -5,7 +5,7 @@ import type { Props } from '@theme-original/EditThisPage';
 import { EuiButton, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
 // @ts-ignore - eui only has module declarations for '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button'
 // but importing from /src results in "Module not found" error
-import { euiButtonColor } from '@elastic/eui/lib/themes/amsterdam/global_styling/mixins/button';
+import { euiButtonColor } from '@elastic/eui/lib/global_styling/mixins/_button';
 
 const getStyles = (theme: UseEuiTheme) => {
   const { euiTheme } = theme;

packages/docusaurus-theme/src/theme/Root.styles.ts

@@ -7,11 +7,8 @@
  */
 
 import {
-  euiBorderColor,
   euiFontSizeFromScale,
   euiLineHeightFromBaseline,
-  useEuiBackgroundColor,
-  useEuiFocusRing,
   UseEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
@@ -48,76 +45,72 @@ export const getGlobalStyles = (theme: UseEuiTheme) => {
   const lineHeightXXS = euiLineHeightFromBaseline('xxs', euiTheme);
 
   return css`
-      // color theme related variables
-      :root,
-      [data-theme='dark']:root {
-        /* EUI theme variables */
-        --eui-background-color-primary: ${useEuiBackgroundColor('primary')};
-        --eui-background-color-primary-opaque: ${useEuiBackgroundColor(
-          'primary',
-          { method: 'opaque' }
-        )};
-        --eui-background-color-success: ${useEuiBackgroundColor('success')};
-        --eui-background-color-danger: ${useEuiBackgroundColor('danger')};
-        --eui-background-color-warning: ${useEuiBackgroundColor('warning')};
-        --eui-background-color-accent: ${useEuiBackgroundColor('accent')};
-
-        --eui-color-danger-text: ${euiTheme.colors.dangerText};
-
-        /* Docusaurus theme variables */
-        --ifm-background-color: ${colors.body};
-        --ifm-font-color-base: ${colors.text};
-        --ifm-link-color: ${colors.link};
-        --ifm-link-hover-color: ${colors.link};
-
-        --ifm-menu-color: ${euiTheme.colors.text};
-        --ifm-menu-color-background-active: ${euiTheme.colors.lightestShade};
-        --ifm-menu-color-background-hover: var(--eui-background-color-primary);
-
-        --ifm-pre-background: ${euiTheme.colors.lightestShade};
-      }
-
-      :root {
-        /* EUI theme variables */
-        --eui-font-size-base: ${fontBase.fontSize};
-        --eui-font-size-xxl: ${fontSizeXXL};
-        --eui-font-size-xl: ${fontSizeXL};
-        --eui-font-size-l: ${fontSizeL};
-        --eui-font-size-m: ${fontSizeM};
-        --eui-font-size-s: ${fontSizeS};
-        --eui-font-size-xs: ${fontSizeXS};
-        --eui-font-size-xxs: ${fontSizeXXS};
-
-        --eui-line-height-base: ${lineHeightXL};
-        --eui-line-height-xxl: ${lineHeightXXL};
-        --eui-line-height-xl: ${lineHeightXL};
-        --eui-line-height-l: ${lineHeightL};
-        --eui-line-height-m: ${lineHeightM};
-        --eui-line-height-s: ${lineHeightS};
-        --eui-line-height-xs: ${lineHeightXS};
-        --eui-line-height-xxs: ${lineHeightXXS};
-
-        --eui-size-xs: ${euiTheme.size.xs};
-        --eui-size-s: ${euiTheme.size.s};
-
-        --eui-border-color-primary: ${euiBorderColor(theme, 'primary')};
-
-        --eui-theme-content-vertical-spacing: ${euiTheme.size.base};
-
-        /* Docusaurus theme variables */
-        --ifm-font-family-base: ${fontBase.fontFamily};
-        --ifm-font-size-base: var(--eui-font-size-base);
-        --ifm-font-weight-base: ${fontBase.fontWeight};
-        --ifm-line-height-base: var(--eui-line-height-base);
-
-        --ifm-h1-font-size: var(--eui-font-size-xl);
-        --ifm-h2-font-size: var(--eui-font-size-l);
-        --ifm-h3-font-size: var(--eui-font-size-m);
-        --ifm-h4-font-size: var(--eui-font-size-s);
-        --ifm-h5-font-size: var(--eui-font-size-xs);
-        --ifm-h6-font-size: var(--eui-font-size-xxs);
-
-        --ifm-global-radius: ${euiTheme.border.radius.small};
-      }
+    // color theme related variables
+    :root,
+    [data-theme='dark']:root {
+      /* EUI theme variables */
+      --eui-background-color-primary: ${colors.backgroundBasePrimary};
+      --eui-background-color-success: ${colors.backgroundBaseSuccess};
+      --eui-background-color-danger: ${colors.backgroundBaseDanger};
+      --eui-background-color-warning: ${colors.backgroundBaseWarning};
+      --eui-background-color-accent: ${colors.backgroundBaseAccent};
+
+      --eui-color-danger-text: ${colors.textDanger};
+
+      /* Docusaurus theme variables */
+      --ifm-background-color: ${colors.backgroundBasePlain};
+      --ifm-font-color-base: ${colors.textParagraph};
+      --ifm-link-color: ${colors.link};
+      --ifm-link-hover-color: ${colors.link};
+
+      --ifm-menu-color: ${colors.textParagraph};
+      --ifm-menu-color-background-active: ${colors.backgroundBaseSubdued};
+      --ifm-menu-color-background-hover: var(--eui-background-color-primary);
+
+      --ifm-pre-background: ${colors.lightestShade};
+    }
+
+    :root {
+      /* EUI theme variables */
+      --eui-font-size-base: ${fontBase.fontSize};
+      --eui-font-size-xxl: ${fontSizeXXL};
+      --eui-font-size-xl: ${fontSizeXL};
+      --eui-font-size-l: ${fontSizeL};
+      --eui-font-size-m: ${fontSizeM};
+      --eui-font-size-s: ${fontSizeS};
+      --eui-font-size-xs: ${fontSizeXS};
+      --eui-font-size-xxs: ${fontSizeXXS};
+
+      --eui-line-height-base: ${lineHeightXL};
+      --eui-line-height-xxl: ${lineHeightXXL};
+      --eui-line-height-xl: ${lineHeightXL};
+      --eui-line-height-l: ${lineHeightL};
+      --eui-line-height-m: ${lineHeightM};
+      --eui-line-height-s: ${lineHeightS};
+      --eui-line-height-xs: ${lineHeightXS};
+      --eui-line-height-xxs: ${lineHeightXXS};
+
+      --eui-size-xs: ${size.xs};
+      --eui-size-s: ${size.s};
+
+      --eui-border-color-primary: ${colors.borderStrongPrimary};
+
+      --eui-theme-content-vertical-spacing: ${size.base};
+
+      /* Docusaurus theme variables */
+      --ifm-font-family-base: ${fontBase.fontFamily};
+      --ifm-font-size-base: var(--eui-font-size-base);
+      --ifm-font-weight-base: ${fontBase.fontWeight};
+      --ifm-line-height-base: var(--eui-line-height-base);
+
+      --ifm-h1-font-size: var(--eui-font-size-xl);
+      --ifm-h2-font-size: var(--eui-font-size-l);
+      --ifm-h3-font-size: var(--eui-font-size-m);
+      --ifm-h4-font-size: var(--eui-font-size-s);
+      --ifm-h5-font-size: var(--eui-font-size-xs);
+      --ifm-h6-font-size: var(--eui-font-size-xxs);
+
+      --ifm-global-radius: ${euiTheme.border.radius.small};
+    }
   `;
 };

packages/eui-theme-borealis/package.json

@@ -10,7 +10,7 @@
     "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass",
     "lint-es": "eslint --cache src/**/*.ts --max-warnings 0",
     "lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings",
-    "test": "jest",
+    "test": "jest ./src",
     "pre-push": "yarn build:workspaces && yarn lint && yarn test"
   },
   "repository": {

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

@@ -8,14 +8,15 @@
 
 import { buildTheme, EuiThemeShape } from '@elastic/eui-theme-common';
 
-import { colors } from './variables/_colors';
+import { colors } from './variables/colors';
 import { animation } from './variables/_animation';
 import { breakpoint } from './variables/_breakpoint';
 import { base, size } from './variables/_size';
 import { border } from './variables/_borders';
 import { levels } from './variables/_levels';
 import { font } from './variables/_typography';
 import { focus } from './variables/_states';
+import { components } from './variables/_components';
 
 export const EUI_THEME_BOREALIS_KEY = 'EUI_THEME_BOREALIS';
 
@@ -29,6 +30,7 @@ export const euiThemeBorealis: EuiThemeShape = {
   breakpoint,
   levels,
   focus,
+  components,
 };
 
 export const EuiThemeBorealis = buildTheme(

packages/eui-theme-borealis/src/theme_dark.scss

@@ -1,8 +1,8 @@
 
 // color mode specific variables
-@import './variables/colors_dark';
+@import './variables/colors/colors_dark';
 
 
 // Global styling
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';
-@import './variables/index';
+@import './variables/index';
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';

packages/eui-theme-borealis/src/theme_light.scss

@@ -1,7 +1,7 @@
 // color mode specific variables
-@import './variables/colors_light';
+@import './variables/colors/colors_light';
 
 
 // Global styling
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';
-@import './variables/index';
+@import './variables/index';
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';

packages/eui-theme-borealis/src/variables/_borders.scss

@@ -0,0 +1,3 @@
+// Borders
+
+$euiBorderColor: #00ff00 !default;

packages/eui-theme-borealis/src/variables/_borders.ts

@@ -13,7 +13,10 @@ import {
 } from '@elastic/eui-theme-common';
 
 export const border: _EuiThemeBorder = {
-  color: computed(([lightShade]) => lightShade, ['colors.lightShade']),
+  color: computed(
+    ([borderBasePlain]) => borderBasePlain,
+    ['colors.borderBasePlain']
+  ),
   width: {
     thin: '1px',
     thick: '2px',

packages/eui-theme-borealis/src/variables/_buttons.scss

@@ -1,4 +1,18 @@
-$euiButtonColorDisabled: $euiColorDisabled;
-$euiButtonColorDisabledText: $euiColorDisabledText;
-$euiButtonDefaultTransparency: .8;
-$euiButtonFontWeight: $euiFontWeightMedium;
+$euiButtonHeight: $euiSizeXXL !default;
+$euiButtonHeightSmall: $euiSizeXL !default;
+$euiButtonHeightXSmall: $euiSizeL !default;
+
+// Modifier naming and colors.
+$euiButtonTypes: (
+  primary: $euiColorBackgroundFilledPrimary,
+  accent: $euiColorBackgroundFilledAccent,
+  success: $euiColorBackgroundFilledSuccess,
+  warning: $euiColorBackgroundFilledWarning,
+  danger: $euiColorBackgroundFilledDanger,
+  ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
+  text: $euiColorBackgroundFilledText, // Reserved for special use cases
+) !default;
+
+// TODO: Remove this once elastic-charts no longer uses this variable
+// @see https://github.com/elastic/elastic-charts/pull/2528
+$euiButtonColorDisabledText: $euiColorTextDisabled;