@elastic/eui-theme-borealis 2.0.0 → 3.0.0

package/lib/cjs/variables/colors/{_colors_vis.js → _colors_vis_light.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorVis = void 0;
+exports.colorVisLight = void 0;
 var _semantic_colors = require("./_semantic_colors");
 var _primitive_colors = require("./_primitive_colors");
 /*
@@ -49,7 +49,7 @@ var euiPaletteColorBlind = {
     graphic: _semantic_colors.SEMANTIC_COLORS.warning30
   }
 };
-var colorVis = exports.colorVis = {
+var colorVisLight = exports.colorVisLight = {
   euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic,
   euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic,
   euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic,
@@ -70,20 +70,16 @@ var colorVis = exports.colorVis = {
   euiColorVisBehindText7: euiPaletteColorBlind.euiColorVis7.graphic,
   euiColorVisBehindText8: euiPaletteColorBlind.euiColorVis8.graphic,
   euiColorVisBehindText9: euiPaletteColorBlind.euiColorVis9.graphic,
-  euiColorVisAsTextLight0: _semantic_colors.SEMANTIC_COLORS.accentSecondary100,
-  euiColorVisAsTextLight1: _semantic_colors.SEMANTIC_COLORS.primary100,
-  euiColorVisAsTextLight2: _semantic_colors.SEMANTIC_COLORS.accent100,
-  euiColorVisAsTextLight3: _semantic_colors.SEMANTIC_COLORS.danger100,
-  euiColorVisAsTextLight4: _semantic_colors.SEMANTIC_COLORS.warning100,
-  euiColorVisAsTextLight5: _semantic_colors.SEMANTIC_COLORS.success100,
-  euiColorVisAsTextLight6: _semantic_colors.SEMANTIC_COLORS.assistance100,
-  euiColorVisAsTextDark0: _semantic_colors.SEMANTIC_COLORS.accentSecondary60,
-  euiColorVisAsTextDark1: _semantic_colors.SEMANTIC_COLORS.primary60,
-  euiColorVisAsTextDark2: _semantic_colors.SEMANTIC_COLORS.accent60,
-  euiColorVisAsTextDark3: _semantic_colors.SEMANTIC_COLORS.danger60,
-  euiColorVisAsTextDark4: _semantic_colors.SEMANTIC_COLORS.warning60,
-  euiColorVisAsTextDark5: _semantic_colors.SEMANTIC_COLORS.success60,
-  euiColorVisAsTextDark6: _semantic_colors.SEMANTIC_COLORS.assistance60,
+  euiColorVisText0: _semantic_colors.SEMANTIC_COLORS.accentSecondary110,
+  euiColorVisText1: _semantic_colors.SEMANTIC_COLORS.accentSecondary100,
+  euiColorVisText2: _semantic_colors.SEMANTIC_COLORS.primary110,
+  euiColorVisText3: _semantic_colors.SEMANTIC_COLORS.primary90,
+  euiColorVisText4: _semantic_colors.SEMANTIC_COLORS.accent100,
+  euiColorVisText5: _semantic_colors.SEMANTIC_COLORS.accent80,
+  euiColorVisText6: _semantic_colors.SEMANTIC_COLORS.danger100,
+  euiColorVisText7: _semantic_colors.SEMANTIC_COLORS.danger80,
+  euiColorVisText8: _semantic_colors.SEMANTIC_COLORS.warning110,
+  euiColorVisText9: _semantic_colors.SEMANTIC_COLORS.warning90,
   euiColorVisNeutral0: _semantic_colors.SEMANTIC_COLORS.neutral60,
   euiColorVisNeutral1: _semantic_colors.SEMANTIC_COLORS.neutral30,
   euiColorVisSuccess0: _semantic_colors.SEMANTIC_COLORS.success60,

package/lib/cjs/variables/colors/index.js

@@ -7,23 +7,31 @@ exports.colors = void 0;
 var _semantic_colors = require("./_semantic_colors");
 var _colors_light = require("./_colors_light");
 var _colors_dark = require("./_colors_dark");
-var _colors_vis = require("./_colors_vis");
+var _colors_vis_light = require("./_colors_vis_light");
+var _colors_vis_dark = require("./_colors_vis_dark");
 var _colors_severity = require("./_colors_severity");
-/*
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
  * 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.
  */
-
 var colors = exports.colors = {
   ghost: _semantic_colors.SEMANTIC_COLORS.plainLight,
   ink: _semantic_colors.SEMANTIC_COLORS.plainDark,
   plainLight: _semantic_colors.SEMANTIC_COLORS.plainLight,
   plainDark: _semantic_colors.SEMANTIC_COLORS.plainDark,
-  LIGHT: _colors_light.light_colors,
-  DARK: _colors_dark.dark_colors,
-  vis: _colors_vis.colorVis,
-  severity: _colors_severity.severityColors
+  severity: _colors_severity.severityColors,
+  LIGHT: _objectSpread(_objectSpread({}, _colors_light.light_colors), {}, {
+    vis: _colors_vis_light.colorVisLight
+  }),
+  DARK: _objectSpread(_objectSpread({}, _colors_dark.dark_colors), {}, {
+    vis: _colors_vis_dark.colorVisDark
+  })
 };

package/lib/esm/index.d.ts

@@ -1,5 +1,7 @@
 import { EuiThemeShape } from '@elastic/eui-theme-common';
-export { colorVis } from './variables/colors/_colors_vis';
+import { colorVisLight } from './variables/colors/_colors_vis_light';
+import { colorVisDark } from './variables/colors/_colors_vis_dark';
+export { colorVisLight as colorVis, colorVisLight, colorVisDark };
 export declare const EUI_THEME_BOREALIS_KEY = "EUI_THEME_BOREALIS";
 export declare const euiThemeBorealis: EuiThemeShape;
 export declare const EuiThemeBorealis: {

package/lib/esm/index.js

@@ -16,7 +16,9 @@ import { font } from './variables/_typography';
 import { focus } from './variables/_states';
 import { components } from './variables/_components';
 import { overrides } from './variables/_overrides';
-export { colorVis } from './variables/colors/_colors_vis';
+import { colorVisLight } from './variables/colors/_colors_vis_light';
+import { colorVisDark } from './variables/colors/_colors_vis_dark';
+export { colorVisLight as colorVis, colorVisLight, colorVisDark };
 export const EUI_THEME_BOREALIS_KEY = 'EUI_THEME_BOREALIS';
 export const euiThemeBorealis = {
     colors,

package/lib/esm/variables/_components.js

@@ -9,7 +9,6 @@ import { computed, } from '@elastic/eui-theme-common';
 import { SEMANTIC_COLORS } from './colors/_semantic_colors';
 import { dark_background_colors, dark_border_colors, } from './colors/_colors_dark';
 import { border_colors } from './colors/_colors_light';
-import { colorVis } from './colors/_colors_vis';
 import { buttons } from './_buttons';
 import { forms } from './_forms';
 const component_colors = {
@@ -27,34 +26,41 @@ const component_colors = {
     codeBackground: computed(([backgroundBaseHighlighted]) => backgroundBaseHighlighted, ['colors.backgroundBaseHighlighted']),
     codeBackgroundSelected: 'inherit',
     codeColor: computed(([textParagraph]) => textParagraph, ['colors.textParagraph']),
-    codeInlineColor: colorVis.euiColorVisAsTextLight6,
+    codeInlineColor: SEMANTIC_COLORS.assistance100,
     codeCommentColor: computed(([textSubdued]) => textSubdued, ['colors.textSubdued']),
     codeSelectorColor: 'inherit',
-    codeStringColor: colorVis.euiColorVisAsTextLight2,
-    codeTagColor: colorVis.euiColorVisAsTextLight1,
-    codeNameColor: colorVis.euiColorVisAsTextLight1,
-    codeNumberColor: colorVis.euiColorVisAsTextLight0,
-    codeInlineCodeKeywordColor: colorVis.euiColorVisAsTextLight6,
-    codeKeywordColor: colorVis.euiColorVisAsTextLight1,
+    codeStringColor: SEMANTIC_COLORS.accent100,
+    codeTagColor: SEMANTIC_COLORS.primary100,
+    codeNameColor: SEMANTIC_COLORS.primary100,
+    codeNumberColor: SEMANTIC_COLORS.accentSecondary100,
+    codeInlineCodeKeywordColor: SEMANTIC_COLORS.assistance100,
+    codeKeywordColor: SEMANTIC_COLORS.primary100,
     codeFunctionTitleColor: 'inherit',
-    codeTypeColor: colorVis.euiColorVisAsTextLight1,
+    codeTypeColor: SEMANTIC_COLORS.primary100,
     codeAttributeColor: 'inherit',
-    codeSymbolColor: colorVis.euiColorVisAsTextLight3,
+    codeSymbolColor: SEMANTIC_COLORS.danger100,
     codeParamsColor: 'inherit',
     codeMetaColor: computed(([textSubdued]) => textSubdued, ['colors.textSubdued']),
-    codeTitleColor: colorVis.euiColorVisAsTextLight4,
-    codeSectionColor: colorVis.euiColorVisAsTextLight3,
-    codeAdditionColor: colorVis.euiColorVisAsTextLight0,
-    codeDeletionColor: colorVis.euiColorVisAsTextLight3,
+    codeTitleColor: SEMANTIC_COLORS.warning100,
+    codeSectionColor: SEMANTIC_COLORS.danger100,
+    codeAdditionColor: SEMANTIC_COLORS.accentSecondary100,
+    codeDeletionColor: SEMANTIC_COLORS.danger100,
     codeSelectorClassColor: 'inherit',
     codeSelectorIdColor: 'inherit',
     collapsibleNavGroupBackground: computed(([backgroundBaseSubdued]) => backgroundBaseSubdued, ['colors.backgroundBaseSubdued']),
     collapsibleNavGroupBackgroundDark: dark_background_colors.backgroundBaseSubdued,
     dataGridBorderColor: computed(([borderBaseSubdued]) => borderBaseSubdued, ['colors.borderBaseSubdued']),
     dataGridVerticalLineBorderColor: computed(([borderBaseSubdued]) => borderBaseSubdued, ['colors.borderBaseSubdued']),
-    dataGridRowBackgroundStriped: computed(([backgroundBaseSubdued]) => backgroundBaseSubdued, ['colors.backgroundBaseSubdued']),
+    dataGridRowBackground: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
     dataGridRowBackgroundHover: computed(([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover']),
     dataGridRowBackgroundSelect: computed(([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect']),
+    dataGridRowBackgroundSelectHover: computed(([backgroundBaseInteractiveSelectHover]) => backgroundBaseInteractiveSelectHover, ['colors.backgroundBaseInteractiveSelectHover']),
+    dataGridRowStripesBackground: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+    dataGridRowStripesBackgroundHover: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+    dataGridRowStripesBackgroundStriped: computed(([backgroundBaseSubdued]) => backgroundBaseSubdued, ['colors.backgroundBaseSubdued']),
+    dataGridRowStripesBackgroundStripedHover: computed(([backgroundBaseSubdued]) => backgroundBaseSubdued, ['colors.backgroundBaseSubdued']),
+    dataGridRowStripesBackgroundSelect: computed(([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect']),
+    dataGridRowStripesBackgroundSelectHover: computed(([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect']),
     dragDropDraggingBackground: computed(([backgroundBaseSuccess]) => backgroundBaseSuccess, ['colors.backgroundBaseSuccess']),
     dragDropDraggingOverBackground: computed(([backgroundLightSuccess]) => backgroundLightSuccess, ['colors.backgroundLightSuccess']),
     filterButtonBadgeBackgroundHover: SEMANTIC_COLORS.shade25,
@@ -99,9 +105,9 @@ const component_colors = {
     switchIconDisabled: forms.LIGHT.iconDisabled,
     tableRowBackgroundHover: computed(([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover']),
     tableRowBackgroundSelected: computed(([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect']),
-    tableRowBackgroundSelectedHover: computed(([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect']),
+    tableRowBackgroundSelectedHover: computed(([backgroundBaseInteractiveSelectHover]) => backgroundBaseInteractiveSelectHover, ['colors.backgroundBaseInteractiveSelectHover']),
     tableRowInteractiveBackgroundHover: computed(([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect']),
-    tableRowInteractiveBackgroundFocus: computed(([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect']),
+    tableRowInteractiveBackgroundFocus: computed(([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover']),
     tableCellSortableIconColor: computed(([backgroundFilledText]) => backgroundFilledText, ['colors.backgroundFilledText']),
     tooltipBackground: dark_background_colors.backgroundBaseSubdued,
     tooltipBorder: dark_border_colors.borderBaseSubdued,
@@ -116,18 +122,19 @@ export const components = {
     DARK: {
         ...component_colors,
         buttonGroupFocusColor: SEMANTIC_COLORS.plainLight,
-        codeInlineColor: colorVis.euiColorVisAsTextDark6,
-        codeStringColor: colorVis.euiColorVisAsTextDark2,
-        codeTagColor: colorVis.euiColorVisAsTextDark1,
-        codeNameColor: colorVis.euiColorVisAsTextDark1,
-        codeNumberColor: colorVis.euiColorVisAsTextDark0,
-        codeKeywordColor: colorVis.euiColorVisAsTextDark6,
-        codeTypeColor: colorVis.euiColorVisAsTextDark1,
-        codeSymbolColor: colorVis.euiColorVisAsTextDark3,
-        codeTitleColor: colorVis.euiColorVisAsTextDark4,
-        codeSectionColor: colorVis.euiColorVisAsTextDark3,
-        codeAdditionColor: colorVis.euiColorVisAsTextDark0,
-        codeDeletionColor: colorVis.euiColorVisAsTextDark3,
+        codeInlineColor: SEMANTIC_COLORS.assistance60,
+        codeStringColor: SEMANTIC_COLORS.accent60,
+        codeTagColor: SEMANTIC_COLORS.primary60,
+        codeNameColor: SEMANTIC_COLORS.primary60,
+        codeNumberColor: SEMANTIC_COLORS.accentSecondary60,
+        codeInlineCodeKeywordColor: SEMANTIC_COLORS.assistance60,
+        codeKeywordColor: SEMANTIC_COLORS.assistance60,
+        codeTypeColor: SEMANTIC_COLORS.primary60,
+        codeSymbolColor: SEMANTIC_COLORS.danger60,
+        codeTitleColor: SEMANTIC_COLORS.warning60,
+        codeSectionColor: SEMANTIC_COLORS.danger60,
+        codeAdditionColor: SEMANTIC_COLORS.accentSecondary60,
+        codeDeletionColor: SEMANTIC_COLORS.danger60,
         filterButtonBadgeBackgroundHover: SEMANTIC_COLORS.shade105,
         loadingSpinnerBorder: dark_border_colors.borderBasePlain,
         loadingChartMonoBackground0: SEMANTIC_COLORS.shade110,

package/lib/esm/variables/colors/_colors_dark.js

@@ -74,6 +74,7 @@ export const dark_background_colors = {
     backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade120,
     backgroundBaseInteractiveHover: SEMANTIC_COLORS.plainLightAlpha8,
     backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary130,
+    backgroundBaseInteractiveSelectHover: SEMANTIC_COLORS.primary120,
     backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade120Alpha70,
     backgroundBaseSkeletonEdge: SEMANTIC_COLORS.plainLightAlpha16,
     backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.plainLightAlpha8,
@@ -138,6 +139,7 @@ export const dark_border_colors = {
     borderStrongWarning: SEMANTIC_COLORS.warning40,
     borderStrongRisk: SEMANTIC_COLORS.risk50,
     borderStrongDanger: SEMANTIC_COLORS.danger60,
+    borderStrongText: SEMANTIC_COLORS.shade60,
 };
 export const dark_special_colors = {
     body: SEMANTIC_COLORS.plainDark,

package/lib/esm/variables/colors/_colors_light.js

@@ -74,6 +74,7 @@ export const background_colors = {
     backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade30,
     backgroundBaseInteractiveHover: SEMANTIC_COLORS.primary100Alpha4,
     backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary10,
+    backgroundBaseInteractiveSelectHover: SEMANTIC_COLORS.primary20,
     backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade100Alpha70,
     backgroundBaseSkeletonEdge: SEMANTIC_COLORS.shade100Alpha16,
     backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.shade100Alpha4,
@@ -138,6 +139,7 @@ export const border_colors = {
     borderStrongWarning: SEMANTIC_COLORS.warning100,
     borderStrongRisk: SEMANTIC_COLORS.risk100,
     borderStrongDanger: SEMANTIC_COLORS.danger100,
+    borderStrongText: SEMANTIC_COLORS.shade90,
 };
 export const special_colors = {
     body: SEMANTIC_COLORS.shade10,

package/lib/esm/variables/colors/{_colors_vis.d.ts → _colors_vis_dark.d.ts}

@@ -1,2 +1,2 @@
 import { _EuiThemeVisColors } from '@elastic/eui-theme-common';
-export declare const colorVis: _EuiThemeVisColors;
+export declare const colorVisDark: _EuiThemeVisColors;

package/lib/esm/variables/colors/_colors_vis_dark.js

@@ -0,0 +1,22 @@
+/*
+ * 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 { SEMANTIC_COLORS } from './_semantic_colors';
+import { colorVisLight } from './_colors_vis_light';
+export const colorVisDark = {
+    ...colorVisLight,
+    euiColorVisText0: SEMANTIC_COLORS.accentSecondary60,
+    euiColorVisText1: SEMANTIC_COLORS.accentSecondary30,
+    euiColorVisText2: SEMANTIC_COLORS.primary60,
+    euiColorVisText3: SEMANTIC_COLORS.primary30,
+    euiColorVisText4: SEMANTIC_COLORS.accent60,
+    euiColorVisText5: SEMANTIC_COLORS.accent30,
+    euiColorVisText6: SEMANTIC_COLORS.danger60,
+    euiColorVisText7: SEMANTIC_COLORS.danger30,
+    euiColorVisText8: SEMANTIC_COLORS.warning60,
+    euiColorVisText9: SEMANTIC_COLORS.warning30,
+};

package/lib/esm/variables/colors/_colors_vis_light.d.ts

@@ -0,0 +1,2 @@
+import { _EuiThemeVisColors } from '@elastic/eui-theme-common';
+export declare const colorVisLight: _EuiThemeVisColors;

package/lib/esm/variables/colors/{_colors_vis.js → _colors_vis_light.js}

@@ -42,7 +42,7 @@ const euiPaletteColorBlind = {
         graphic: SEMANTIC_COLORS.warning30,
     },
 };
-export const colorVis = {
+export const colorVisLight = {
     euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic,
     euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic,
     euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic,
@@ -63,20 +63,16 @@ export const colorVis = {
     euiColorVisBehindText7: euiPaletteColorBlind.euiColorVis7.graphic,
     euiColorVisBehindText8: euiPaletteColorBlind.euiColorVis8.graphic,
     euiColorVisBehindText9: euiPaletteColorBlind.euiColorVis9.graphic,
-    euiColorVisAsTextLight0: SEMANTIC_COLORS.accentSecondary100,
-    euiColorVisAsTextLight1: SEMANTIC_COLORS.primary100,
-    euiColorVisAsTextLight2: SEMANTIC_COLORS.accent100,
-    euiColorVisAsTextLight3: SEMANTIC_COLORS.danger100,
-    euiColorVisAsTextLight4: SEMANTIC_COLORS.warning100,
-    euiColorVisAsTextLight5: SEMANTIC_COLORS.success100,
-    euiColorVisAsTextLight6: SEMANTIC_COLORS.assistance100,
-    euiColorVisAsTextDark0: SEMANTIC_COLORS.accentSecondary60,
-    euiColorVisAsTextDark1: SEMANTIC_COLORS.primary60,
-    euiColorVisAsTextDark2: SEMANTIC_COLORS.accent60,
-    euiColorVisAsTextDark3: SEMANTIC_COLORS.danger60,
-    euiColorVisAsTextDark4: SEMANTIC_COLORS.warning60,
-    euiColorVisAsTextDark5: SEMANTIC_COLORS.success60,
-    euiColorVisAsTextDark6: SEMANTIC_COLORS.assistance60,
+    euiColorVisText0: SEMANTIC_COLORS.accentSecondary110,
+    euiColorVisText1: SEMANTIC_COLORS.accentSecondary100,
+    euiColorVisText2: SEMANTIC_COLORS.primary110,
+    euiColorVisText3: SEMANTIC_COLORS.primary90,
+    euiColorVisText4: SEMANTIC_COLORS.accent100,
+    euiColorVisText5: SEMANTIC_COLORS.accent80,
+    euiColorVisText6: SEMANTIC_COLORS.danger100,
+    euiColorVisText7: SEMANTIC_COLORS.danger80,
+    euiColorVisText8: SEMANTIC_COLORS.warning110,
+    euiColorVisText9: SEMANTIC_COLORS.warning90,
     euiColorVisNeutral0: SEMANTIC_COLORS.neutral60,
     euiColorVisNeutral1: SEMANTIC_COLORS.neutral30,
     euiColorVisSuccess0: SEMANTIC_COLORS.success60,

package/lib/esm/variables/colors/index.js

@@ -8,15 +8,21 @@
 import { SEMANTIC_COLORS } from './_semantic_colors';
 import { light_colors } from './_colors_light';
 import { dark_colors } from './_colors_dark';
-import { colorVis } from './_colors_vis';
+import { colorVisLight } from './_colors_vis_light';
+import { colorVisDark } from './_colors_vis_dark';
 import { severityColors } from './_colors_severity';
 export const colors = {
     ghost: SEMANTIC_COLORS.plainLight,
     ink: SEMANTIC_COLORS.plainDark,
     plainLight: SEMANTIC_COLORS.plainLight,
     plainDark: SEMANTIC_COLORS.plainDark,
-    LIGHT: light_colors,
-    DARK: dark_colors,
-    vis: colorVis,
     severity: severityColors,
+    LIGHT: {
+        ...light_colors,
+        vis: colorVisLight,
+    },
+    DARK: {
+        ...dark_colors,
+        vis: colorVisDark,
+    },
 };

package/lib/eui_theme_borealis_dark.json

@@ -282,20 +282,16 @@
   "euiColorVis7_behindText": "#FFC9C2",
   "euiColorVis8_behindText": "#EAAE01",
   "euiColorVis9_behindText": "#FCD883",
-  "euiColorVisAsTextLight0": "#047471",
-  "euiColorVisAsTextLight1": "#1750BA",
-  "euiColorVisAsTextLight2": "#A11262",
-  "euiColorVisAsTextLight3": "#A71627",
-  "euiColorVisAsTextLight4": "#825803",
-  "euiColorVisAsTextLight5": "#09724D",
-  "euiColorVisAsTextLight6": "#6B3C9F",
-  "euiColorVisAsTextDark0": "#16C5C0",
-  "euiColorVisAsTextDark1": "#61A2FF",
-  "euiColorVisAsTextDark2": "#EE72A6",
-  "euiColorVisAsTextDark3": "#F6726A",
-  "euiColorVisAsTextDark4": "#EAAE01",
-  "euiColorVisAsTextDark5": "#24C292",
-  "euiColorVisAsTextDark6": "#B084F5",
+  "euiColorVisText0": "#16C5C0",
+  "euiColorVisText1": "#A6EDEA",
+  "euiColorVisText2": "#61A2FF",
+  "euiColorVisText3": "#BFDBFF",
+  "euiColorVisText4": "#EE72A6",
+  "euiColorVisText5": "#FFC7DB",
+  "euiColorVisText6": "#F6726A",
+  "euiColorVisText7": "#FFC9C2",
+  "euiColorVisText8": "#EAAE01",
+  "euiColorVisText9": "#FCD883",
   "euiColorVisSuccess0": "#24C292",
   "euiColorVisSuccess1": "#AEE8D2",
   "euiColorVisWarning0": "#FCD883",
@@ -381,6 +377,7 @@
   "euiColorBackgroundBaseFormsControlDisabled": "#2B394F",
   "euiColorBackgroundBaseInteractiveHover": "rgba(255,255,255, 0.08)",
   "euiColorBackgroundBaseInteractiveSelect": "#0D2F5E",
+  "euiColorBackgroundBaseInteractiveSelectHover": "#123778",
   "euiColorBackgroundBaseInteractiveOverlay": "rgba(43,57,79, 0.7)",
   "euiColorBackgroundBaseSkeletonEdge": "rgba(255,255,255, 0.16)",
   "euiColorBackgroundBaseSkeletonMiddle": "rgba(255,255,255, 0.08)",
@@ -423,5 +420,6 @@
   "euiColorBorderStrongSuccess": "#24C292",
   "euiColorBorderStrongWarning": "#FACB3D",
   "euiColorBorderStrongRisk": "#FC8544",
-  "euiColorBorderStrongDanger": "#F6726A"
+  "euiColorBorderStrongDanger": "#F6726A",
+  "euiColorBorderStrongText": "#8E9FBC"
 }

package/lib/eui_theme_borealis_dark.json.d.ts

@@ -283,20 +283,16 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
     euiColorVis7_behindText: string;
     euiColorVis8_behindText: string;
     euiColorVis9_behindText: string;
-    euiColorVisAsTextLight0: string;
-    euiColorVisAsTextLight1: string;
-    euiColorVisAsTextLight2: string;
-    euiColorVisAsTextLight3: string;
-    euiColorVisAsTextLight4: string;
-    euiColorVisAsTextLight5: string;
-    euiColorVisAsTextLight6: string;
-    euiColorVisAsTextDark0: string;
-    euiColorVisAsTextDark1: string;
-    euiColorVisAsTextDark2: string;
-    euiColorVisAsTextDark3: string;
-    euiColorVisAsTextDark4: string;
-    euiColorVisAsTextDark5: string;
-    euiColorVisAsTextDark6: string;
+    euiColorVisText0: string;
+    euiColorVisText1: string;
+    euiColorVisText2: string;
+    euiColorVisText3: string;
+    euiColorVisText4: string;
+    euiColorVisText5: string;
+    euiColorVisText6: string;
+    euiColorVisText7: string;
+    euiColorVisText8: string;
+    euiColorVisText9: string;
     euiColorVisSuccess0: string;
     euiColorVisSuccess1: string;
     euiColorVisWarning0: string;
@@ -382,6 +378,7 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
     euiColorBackgroundBaseFormsControlDisabled: string;
     euiColorBackgroundBaseInteractiveHover: string;
     euiColorBackgroundBaseInteractiveSelect: string;
+    euiColorBackgroundBaseInteractiveSelectHover: string;
     euiColorBackgroundBaseInteractiveOverlay: string;
     euiColorBackgroundBaseSkeletonEdge: string;
     euiColorBackgroundBaseSkeletonMiddle: string;
@@ -425,6 +422,7 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
     euiColorBorderStrongWarning: string;
     euiColorBorderStrongRisk: string;
     euiColorBorderStrongDanger: string;
+    euiColorBorderStrongText: string;
   };
   export default sassVariables;
 }

package/lib/eui_theme_borealis_light.json

@@ -282,20 +282,16 @@
   "euiColorVis7_behindText": "#FFC9C2",
   "euiColorVis8_behindText": "#EAAE01",
   "euiColorVis9_behindText": "#FCD883",
-  "euiColorVisAsTextLight0": "#047471",
-  "euiColorVisAsTextLight1": "#1750BA",
-  "euiColorVisAsTextLight2": "#A11262",
-  "euiColorVisAsTextLight3": "#A71627",
-  "euiColorVisAsTextLight4": "#825803",
-  "euiColorVisAsTextLight5": "#09724D",
-  "euiColorVisAsTextLight6": "#6B3C9F",
-  "euiColorVisAsTextDark0": "#16C5C0",
-  "euiColorVisAsTextDark1": "#61A2FF",
-  "euiColorVisAsTextDark2": "#EE72A6",
-  "euiColorVisAsTextDark3": "#F6726A",
-  "euiColorVisAsTextDark4": "#EAAE01",
-  "euiColorVisAsTextDark5": "#24C292",
-  "euiColorVisAsTextDark6": "#B084F5",
+  "euiColorVisText0": "#065B58",
+  "euiColorVisText1": "#047471",
+  "euiColorVisText2": "#154399",
+  "euiColorVisText3": "#0B64DD",
+  "euiColorVisText4": "#A11262",
+  "euiColorVisText5": "#D13680",
+  "euiColorVisText6": "#A71627",
+  "euiColorVisText7": "#DA3737",
+  "euiColorVisText8": "#6A4906",
+  "euiColorVisText9": "#966B03",
   "euiColorVisSuccess0": "#24C292",
   "euiColorVisSuccess1": "#AEE8D2",
   "euiColorVisWarning0": "#FCD883",
@@ -381,6 +377,7 @@
   "euiColorBackgroundBaseFormsControlDisabled": "#CAD3E2",
   "euiColorBackgroundBaseInteractiveHover": "rgba(23,80,186, 0.04)",
   "euiColorBackgroundBaseInteractiveSelect": "#E8F1FF",
+  "euiColorBackgroundBaseInteractiveSelectHover": "#D9E8FF",
   "euiColorBackgroundBaseInteractiveOverlay": "rgba(72,89,117, 0.7)",
   "euiColorBackgroundBaseSkeletonEdge": "rgba(72,89,117, 0.16)",
   "euiColorBackgroundBaseSkeletonMiddle": "rgba(72,89,117, 0.04)",
@@ -423,5 +420,6 @@
   "euiColorBorderStrongSuccess": "#09724D",
   "euiColorBorderStrongWarning": "#825803",
   "euiColorBorderStrongRisk": "#9E3A16",
-  "euiColorBorderStrongDanger": "#A71627"
+  "euiColorBorderStrongDanger": "#A71627",
+  "euiColorBorderStrongText": "#5A6D8C"
 }

package/lib/eui_theme_borealis_light.json.d.ts

@@ -283,20 +283,16 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorVis7_behindText: string;
     euiColorVis8_behindText: string;
     euiColorVis9_behindText: string;
-    euiColorVisAsTextLight0: string;
-    euiColorVisAsTextLight1: string;
-    euiColorVisAsTextLight2: string;
-    euiColorVisAsTextLight3: string;
-    euiColorVisAsTextLight4: string;
-    euiColorVisAsTextLight5: string;
-    euiColorVisAsTextLight6: string;
-    euiColorVisAsTextDark0: string;
-    euiColorVisAsTextDark1: string;
-    euiColorVisAsTextDark2: string;
-    euiColorVisAsTextDark3: string;
-    euiColorVisAsTextDark4: string;
-    euiColorVisAsTextDark5: string;
-    euiColorVisAsTextDark6: string;
+    euiColorVisText0: string;
+    euiColorVisText1: string;
+    euiColorVisText2: string;
+    euiColorVisText3: string;
+    euiColorVisText4: string;
+    euiColorVisText5: string;
+    euiColorVisText6: string;
+    euiColorVisText7: string;
+    euiColorVisText8: string;
+    euiColorVisText9: string;
     euiColorVisSuccess0: string;
     euiColorVisSuccess1: string;
     euiColorVisWarning0: string;
@@ -382,6 +378,7 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorBackgroundBaseFormsControlDisabled: string;
     euiColorBackgroundBaseInteractiveHover: string;
     euiColorBackgroundBaseInteractiveSelect: string;
+    euiColorBackgroundBaseInteractiveSelectHover: string;
     euiColorBackgroundBaseInteractiveOverlay: string;
     euiColorBackgroundBaseSkeletonEdge: string;
     euiColorBackgroundBaseSkeletonMiddle: string;
@@ -425,6 +422,7 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorBorderStrongWarning: string;
     euiColorBorderStrongRisk: string;
     euiColorBorderStrongDanger: string;
+    euiColorBorderStrongText: string;
   };
   export default sassVariables;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-theme-borealis",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "A visual theme for EUI",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -33,7 +33,7 @@
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
-    "@elastic/eui-theme-common": "1.2.0",
+    "@elastic/eui-theme-common": "2.0.0",
     "@types/chroma-js": "^2.4.0",
     "@types/jest": "^29.5.12",
     "@types/prettier": "2.7.3",

package/src/theme_dark.scss

@@ -1,5 +1,6 @@
 
 // color mode specific variables
+@import './variables/colors/colors_vis_dark';
 @import './variables/colors/colors_dark';
 
 

package/src/theme_light.scss

@@ -1,4 +1,5 @@
 // color mode specific variables
+@import './variables/colors/colors_vis_light';
 @import './variables/colors/colors_light';
 
 

package/src/variables/_index.scss

@@ -9,7 +9,6 @@
 @import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/index';
 @import 'states';
 
-@import './colors/colors_vis';
 @import './colors/colors_severity';
 @import 'form';
 @import 'page';

package/src/variables/colors/_colors_dark.scss

@@ -47,6 +47,7 @@ $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade120 !default;
 
 $euiColorBackgroundBaseInteractiveHover: $euiColorPlainLightAlpha8 !default;
 $euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary130 !default;
+$euiColorBackgroundBaseInteractiveSelectHover: $euiColorPrimary120 !default;
 $euiColorBackgroundBaseInteractiveOverlay: $euiColorShade120Alpha70 !default;
 $euiColorBackgroundBaseSkeletonEdge: $euiColorPlainLightAlpha16 !default;
 $euiColorBackgroundBaseSkeletonMiddle: $euiColorPlainLightAlpha8 !default;
@@ -128,6 +129,7 @@ $euiColorBorderStrongSuccess: $euiColorSuccess60 !default;
 $euiColorBorderStrongWarning: $euiColorWarning40 !default;
 $euiColorBorderStrongRisk: $euiColorRisk50 !default;
 $euiColorBorderStrongDanger: $euiColorDanger60 !default;
+$euiColorBorderStrongText: $euiColorShade60 !default;
 
 // Charts
 $euiColorChartLines: $euiColorShade85 !default;

package/src/variables/colors/_colors_light.scss

@@ -48,6 +48,7 @@ $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade30 !default;
 
 $euiColorBackgroundBaseInteractiveHover: $euiColorPrimary100Alpha4 !default;
 $euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary10 !default;
+$euiColorBackgroundBaseInteractiveSelectHover: $euiColorPrimary20 !default;
 $euiColorBackgroundBaseInteractiveOverlay: $euiColorShade100Alpha70 !default;
 $euiColorBackgroundBaseSkeletonEdge: $euiColorShade100Alpha16 !default;
 $euiColorBackgroundBaseSkeletonMiddle: $euiColorShade100Alpha4 !default;
@@ -130,6 +131,7 @@ $euiColorBorderStrongSuccess: $euiColorSuccess100 !default;
 $euiColorBorderStrongWarning: $euiColorWarning100 !default;
 $euiColorBorderStrongRisk: $euiColorRisk100 !default;
 $euiColorBorderStrongDanger: $euiColorDanger100 !default;
+$euiColorBorderStrongText: $euiColorShade90 !default;
 
 // Charts
 $euiColorChartLines: $euiColorShade30 !default;