@elastic/eui-theme-borealis 4.0.0 → 5.1.0

package/lib/cjs/variables/_components.js

@@ -373,6 +373,7 @@ var component_colors = {
       backgroundFilledText = _ref120[0];
     return backgroundFilledText;
   }, ['colors.backgroundFilledText']),
+  tableFooterBackground: _semantic_colors.SEMANTIC_COLORS.shade15,
   tooltipBackground: _colors_dark.dark_background_colors.backgroundBaseSubdued,
   tooltipBorder: _colors_dark.dark_border_colors.borderBaseSubdued,
   tooltipBorderFloating: (0, _euiThemeCommon.computed)(function (_ref121) {
@@ -437,6 +438,7 @@ var components = exports.components = {
       return backgroundBaseInteractiveHover;
     }, ['colors.backgroundBaseInteractiveHover']),
     tableRowBackgroundMarked: _semantic_colors.SEMANTIC_COLORS.warning140,
-    tableRowBackgroundMarkedHover: _semantic_colors.SEMANTIC_COLORS.warning130
+    tableRowBackgroundMarkedHover: _semantic_colors.SEMANTIC_COLORS.warning130,
+    tableFooterBackground: _semantic_colors.SEMANTIC_COLORS.shade135
   })
 };

package/lib/cjs/variables/_forms.js

@@ -99,9 +99,9 @@ var _forms = {
   clearButtonBackground: _semantic_colors.SEMANTIC_COLORS.shade60,
   controlBorder: (0, _euiThemeCommon.computed)(function (_ref29) {
     var _ref30 = _slicedToArray(_ref29, 1),
-      borderBaseFormsControl = _ref30[0];
-    return borderBaseFormsControl;
-  }, ['colors.borderBaseFormsControl']),
+      borderBaseProminent = _ref30[0];
+    return borderBaseProminent;
+  }, ['colors.borderBaseProminent']),
   controlBorderSelected: (0, _euiThemeCommon.computed)(function (_ref31) {
     var _ref32 = _slicedToArray(_ref31, 1),
       borderStrongPrimary = _ref32[0];

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

@@ -140,11 +140,12 @@ var dark_border_colors = exports.dark_border_colors = {
   borderBaseDanger: _semantic_colors.SEMANTIC_COLORS.danger120,
   borderBasePlain: _semantic_colors.SEMANTIC_COLORS.shade100,
   borderBaseSubdued: _semantic_colors.SEMANTIC_COLORS.shade120,
+  borderBaseProminent: _semantic_colors.SEMANTIC_COLORS.shade80,
   borderBaseDisabled: _semantic_colors.SEMANTIC_COLORS.shade100,
   borderBaseFloating: _semantic_colors.SEMANTIC_COLORS.shade120,
   borderBaseFormsColorSwatch: _semantic_colors.SEMANTIC_COLORS.plainLightAlpha32,
-  borderBaseFormsControl: _semantic_colors.SEMANTIC_COLORS.shade80,
   borderInteractiveFormsHoverPlain: _semantic_colors.SEMANTIC_COLORS.shade90,
+  borderInteractiveFormsHoverProminent: _semantic_colors.SEMANTIC_COLORS.shade60,
   borderInteractiveFormsHoverDanger: _semantic_colors.SEMANTIC_COLORS.danger70,
   borderStrongPrimary: _semantic_colors.SEMANTIC_COLORS.primary60,
   borderStrongAccent: _semantic_colors.SEMANTIC_COLORS.accent60,

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

@@ -140,11 +140,12 @@ var border_colors = exports.border_colors = {
   borderBaseDanger: _semantic_colors.SEMANTIC_COLORS.danger30,
   borderBasePlain: _semantic_colors.SEMANTIC_COLORS.shade30,
   borderBaseSubdued: _semantic_colors.SEMANTIC_COLORS.shade20,
+  borderBaseProminent: _semantic_colors.SEMANTIC_COLORS.shade50,
   borderBaseDisabled: _semantic_colors.SEMANTIC_COLORS.shade30,
   borderBaseFloating: _primitive_colors.PRIMITIVE_COLORS.transparent,
   borderBaseFormsColorSwatch: _semantic_colors.SEMANTIC_COLORS.shade100Alpha24,
-  borderBaseFormsControl: _semantic_colors.SEMANTIC_COLORS.shade60,
   borderInteractiveFormsHoverPlain: _semantic_colors.SEMANTIC_COLORS.shade40,
+  borderInteractiveFormsHoverProminent: _semantic_colors.SEMANTIC_COLORS.shade70,
   borderInteractiveFormsHoverDanger: _semantic_colors.SEMANTIC_COLORS.danger80,
   borderStrongPrimary: _semantic_colors.SEMANTIC_COLORS.primary90,
   borderStrongAccent: _semantic_colors.SEMANTIC_COLORS.accent90,

package/lib/esm/variables/_components.js

@@ -116,6 +116,7 @@ const component_colors = {
     tableRowBackgroundMarked: SEMANTIC_COLORS.warning10,
     tableRowBackgroundMarkedHover: SEMANTIC_COLORS.warning20,
     tableCellSortableIconColor: computed(([backgroundFilledText]) => backgroundFilledText, ['colors.backgroundFilledText']),
+    tableFooterBackground: SEMANTIC_COLORS.shade15,
     tooltipBackground: dark_background_colors.backgroundBaseSubdued,
     tooltipBorder: dark_border_colors.borderBaseSubdued,
     tooltipBorderFloating: computed(([borderBaseFloating]) => borderBaseFloating, ['colors.borderBaseFloating']),
@@ -162,5 +163,6 @@ export const components = {
         tableRowInteractiveBackgroundFocus: computed(([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover']),
         tableRowBackgroundMarked: SEMANTIC_COLORS.warning140,
         tableRowBackgroundMarkedHover: SEMANTIC_COLORS.warning130,
+        tableFooterBackground: SEMANTIC_COLORS.shade135,
     },
 };

package/lib/esm/variables/_forms.js

@@ -24,7 +24,7 @@ const _forms = {
     borderAutofilled: computed(([borderBasePrimary]) => borderBasePrimary, ['colors.borderBasePrimary']),
     borderAutofilledHovered: computed(([borderStrongPrimary]) => borderStrongPrimary, ['colors.borderStrongPrimary']),
     clearButtonBackground: SEMANTIC_COLORS.shade60,
-    controlBorder: computed(([borderBaseFormsControl]) => borderBaseFormsControl, ['colors.borderBaseFormsControl']),
+    controlBorder: computed(([borderBaseProminent]) => borderBaseProminent, ['colors.borderBaseProminent']),
     controlBorderSelected: computed(([borderStrongPrimary]) => borderStrongPrimary, ['colors.borderStrongPrimary']),
     controlBorderDisabled: computed(([borderBaseDisabled]) => borderBaseDisabled, ['colors.borderBaseDisabled']),
     controlBackgroundUnselected: 'transparent',

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

@@ -127,11 +127,12 @@ export const dark_border_colors = {
     borderBaseDanger: SEMANTIC_COLORS.danger120,
     borderBasePlain: SEMANTIC_COLORS.shade100,
     borderBaseSubdued: SEMANTIC_COLORS.shade120,
+    borderBaseProminent: SEMANTIC_COLORS.shade80,
     borderBaseDisabled: SEMANTIC_COLORS.shade100,
     borderBaseFloating: SEMANTIC_COLORS.shade120,
     borderBaseFormsColorSwatch: SEMANTIC_COLORS.plainLightAlpha32,
-    borderBaseFormsControl: SEMANTIC_COLORS.shade80,
     borderInteractiveFormsHoverPlain: SEMANTIC_COLORS.shade90,
+    borderInteractiveFormsHoverProminent: SEMANTIC_COLORS.shade60,
     borderInteractiveFormsHoverDanger: SEMANTIC_COLORS.danger70,
     borderStrongPrimary: SEMANTIC_COLORS.primary60,
     borderStrongAccent: SEMANTIC_COLORS.accent60,

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

@@ -127,11 +127,12 @@ export const border_colors = {
     borderBaseDanger: SEMANTIC_COLORS.danger30,
     borderBasePlain: SEMANTIC_COLORS.shade30,
     borderBaseSubdued: SEMANTIC_COLORS.shade20,
+    borderBaseProminent: SEMANTIC_COLORS.shade50,
     borderBaseDisabled: SEMANTIC_COLORS.shade30,
     borderBaseFloating: PRIMITIVE_COLORS.transparent,
     borderBaseFormsColorSwatch: SEMANTIC_COLORS.shade100Alpha24,
-    borderBaseFormsControl: SEMANTIC_COLORS.shade60,
     borderInteractiveFormsHoverPlain: SEMANTIC_COLORS.shade40,
+    borderInteractiveFormsHoverProminent: SEMANTIC_COLORS.shade70,
     borderInteractiveFormsHoverDanger: SEMANTIC_COLORS.danger80,
     borderStrongPrimary: SEMANTIC_COLORS.primary90,
     borderStrongAccent: SEMANTIC_COLORS.accent90,

package/lib/eui_theme_borealis_dark.json

@@ -445,11 +445,12 @@
   "euiColorBorderBaseDanger": "#5E2129",
   "euiColorBorderBasePlain": "#485975",
   "euiColorBorderBaseSubdued": "#2B394F",
+  "euiColorBorderBaseProminent": "#6A7FA0",
   "euiColorBorderBaseDisabled": "#485975",
   "euiColorBorderBaseFloating": "#2B394F",
   "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255, 0.32)",
-  "euiColorBorderBaseFormsControl": "#6A7FA0",
   "euiColorBorderInteractiveFormsHoverPlain": "#5A6D8C",
+  "euiColorBorderInteractiveFormsHoverProminent": "#8E9FBC",
   "euiColorBorderInteractiveFormsHoverDanger": "#EE4C48",
   "euiColorBorderStrongPrimary": "#61A2FF",
   "euiColorBorderStrongAccent": "#EE72A6",

package/lib/eui_theme_borealis_dark.json.d.ts

@@ -446,11 +446,12 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
     euiColorBorderBaseDanger: string;
     euiColorBorderBasePlain: string;
     euiColorBorderBaseSubdued: string;
+    euiColorBorderBaseProminent: string;
     euiColorBorderBaseDisabled: string;
     euiColorBorderBaseFloating: string;
     euiColorBorderBaseFormsColorSwatch: string;
-    euiColorBorderBaseFormsControl: string;
     euiColorBorderInteractiveFormsHoverPlain: string;
+    euiColorBorderInteractiveFormsHoverProminent: string;
     euiColorBorderInteractiveFormsHoverDanger: string;
     euiColorBorderStrongPrimary: string;
     euiColorBorderStrongAccent: string;

package/lib/eui_theme_borealis_light.json

@@ -445,11 +445,12 @@
   "euiColorBorderBaseDanger": "#FFC9C2",
   "euiColorBorderBasePlain": "#CAD3E2",
   "euiColorBorderBaseSubdued": "#E3E8F2",
+  "euiColorBorderBaseProminent": "#A2B1C9",
   "euiColorBorderBaseDisabled": "#CAD3E2",
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(72,89,117, 0.24)",
-  "euiColorBorderBaseFormsControl": "#8E9FBC",
   "euiColorBorderInteractiveFormsHoverPlain": "#B4C1D5",
+  "euiColorBorderInteractiveFormsHoverProminent": "#798EAF",
   "euiColorBorderInteractiveFormsHoverDanger": "#DA3737",
   "euiColorBorderStrongPrimary": "#0B64DD",
   "euiColorBorderStrongAccent": "#BC1E70",

package/lib/eui_theme_borealis_light.json.d.ts

@@ -446,11 +446,12 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorBorderBaseDanger: string;
     euiColorBorderBasePlain: string;
     euiColorBorderBaseSubdued: string;
+    euiColorBorderBaseProminent: string;
     euiColorBorderBaseDisabled: string;
     euiColorBorderBaseFloating: string;
     euiColorBorderBaseFormsColorSwatch: string;
-    euiColorBorderBaseFormsControl: string;
     euiColorBorderInteractiveFormsHoverPlain: string;
+    euiColorBorderInteractiveFormsHoverProminent: string;
     euiColorBorderInteractiveFormsHoverDanger: string;
     euiColorBorderStrongPrimary: string;
     euiColorBorderStrongAccent: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-theme-borealis",
-  "version": "4.0.0",
+  "version": "5.1.0",
   "description": "A visual theme for EUI",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -12,10 +12,12 @@
     "build:types": "NODE_ENV=production tsc --project tsconfig.types.json",
     "build-pack": "yarn build && npm pack",
     "copy-files": "node ./scripts/copy-json-files.js",
-    "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass",
-    "lint-es": "eslint --cache src/**/*.ts --max-warnings 0",
+    "lint": "yarn run lint-ts && yarn run lint-es && yarn run lint-sass",
+    "lint-ts": "tsc --noEmit",
+    "lint-es": "eslint --cache \"src/**/*.ts\" --max-warnings 0",
     "lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings",
-    "test": "jest ./src",
+    "test": "yarn test-unit",
+    "test-unit": "jest ./src --passWithNoTests",
     "pre-push": "yarn build:workspaces && yarn lint && yarn test"
   },
   "repository": {
@@ -23,8 +25,8 @@
     "url": "https://github.com/elastic/eui.git",
     "directory": "packages/eui-theme-borealis"
   },
-  "dependency": {
-    "@elastic/eui-theme-common": "workspace:*",
+  "dependencies": {
+    "@elastic/eui-theme-common": "7.1.0",
     "chroma-js": "^2.4.2"
   },
   "devDependencies": {
@@ -33,7 +35,7 @@
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
-    "@elastic/eui-theme-common": "6.0.0",
+    "@elastic/eui-theme-common": "7.1.0",
     "@types/chroma-js": "^2.4.0",
     "@types/jest": "^29.5.12",
     "@types/prettier": "2.7.3",

package/src/mixins/_shadow.scss

@@ -6,6 +6,7 @@
   }
 }
 
+/* stylelint-disable-next-line scss/at-function-pattern */
 @function _colorMode() {
   @if (lightness($euiColorTextParagraph) < 50) {
     @return 'light';
@@ -18,39 +19,39 @@
 @mixin euiSlightShadow($color: $euiShadowColor) {
   @if _colorMode() == 'light' {
     box-shadow:
-      0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
-      0px 1px 4px 0px hsl(from $euiShadowColor h s l / 0.06),
-      0px 2px 8px 0px hsl(from $euiShadowColor h s l / 0.04);
+      0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16),
+      0 1px 4px 0 hsl(from $euiShadowColor h s l / 0.06),
+      0 2px 8px 0 hsl(from $euiShadowColor h s l / 0.04);
   } @else {
     box-shadow:
-      0px 1px 4px 0px hsl(from $euiShadowColor h s l / 0.4),
-      0px 2px 8px 0px hsl(from $euiShadowColor h s l/ 0.24);
+      0 1px 4px 0 hsl(from $euiShadowColor h s l / 0.4),
+      0 2px 8px 0 hsl(from $euiShadowColor h s l/ 0.24);
   }
 }
 
 @mixin euiBottomShadowSmall($color: $euiShadowColor) {
   @if _colorMode == 'light' {
     box-shadow:
-      0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
-      0px 2px 7px 0px hsl(from $euiShadowColor h s l / 0.08),
-      0px 4px 11px 0px hsl(from $euiShadowColor h s l / 0.05);
+      0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16),
+      0 2px 7px 0 hsl(from $euiShadowColor h s l / 0.08),
+      0 4px 11px 0 hsl(from $euiShadowColor h s l / 0.05);
   } @else {
     box-shadow:
-      0px 2px 7px 0px hsl(from $euiShadowColor h s l / 0.46),
-      0px 4px 11px 0px hsl(from $euiShadowColor h s l / 0.26);
+      0 2px 7px 0 hsl(from $euiShadowColor h s l / 0.46),
+      0 4px 11px 0 hsl(from $euiShadowColor h s l / 0.26);
   }
 }
 
 @mixin euiBottomShadowMedium($color: $euiShadowColor) {
   @if _colorMode == 'light' {
     box-shadow:
-      0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
-      0px 3px 10px 0px hsl(from $euiShadowColor h s l / 0.1),
-      0px 6px 14px 0px hsl(from $euiShadowColor h s l / 0.06);
+      0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16),
+      0 3px 10px 0 hsl(from $euiShadowColor h s l / 0.1),
+      0 6px 14px 0 hsl(from $euiShadowColor h s l / 0.06);
   } @else {
     box-shadow:
-      0px 3px 10px 0px hsl(from $euiShadowColor h s l / 0.52),
-      0px 6px 14px 0px hsl(from $euiShadowColor h s l / 0.28);
+      0 3px 10px 0 hsl(from $euiShadowColor h s l / 0.52),
+      0 6px 14px 0 hsl(from $euiShadowColor h s l / 0.28);
   }
 }
 
@@ -70,24 +71,24 @@
   @if ($reverse) {
     @if _colorMode == 'light' {
       box-shadow:
-        0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
-        0px -4px 13px 0px hsl(from $euiShadowColor h s l / 0.12),
-        0px -8px 17px 0px hsl(from $euiShadowColor h s l / 0.07);
+        0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16),
+        0 -4px 13px 0 hsl(from $euiShadowColor h s l / 0.12),
+        0 -8px 17px 0 hsl(from $euiShadowColor h s l / 0.07);
     } @else {
       box-shadow:
-        0px -4px 13px 0px hsl(from $euiShadowColor h s l / 0.58),
-        0px -8px 17px 0px hsl(from $euiShadowColor h s l / 0.3);
+        0 -4px 13px 0 hsl(from $euiShadowColor h s l / 0.58),
+        0 -8px 17px 0 hsl(from $euiShadowColor h s l / 0.3);
     }
   } @else {
     @if _colorMode == 'light' {
       box-shadow:
-        0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
-        0px 4px 13px 0px hsl(from $euiShadowColor h s l / 0.12),
-        0px 8px 17px 0px hsl(from $euiShadowColor h s l / 0.07);
+        0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16),
+        0 4px 13px 0 hsl(from $euiShadowColor h s l / 0.12),
+        0 8px 17px 0 hsl(from $euiShadowColor h s l / 0.07);
     } @else {
       box-shadow:
-        0px 4px 13px 0px hsl(from $euiShadowColor h s l / 0.58),
-        0px 8px 17px 0px hsl(from $euiShadowColor h s l / 0.3);
+        0 4px 13px 0 hsl(from $euiShadowColor h s l / 0.58),
+        0 8px 17px 0 hsl(from $euiShadowColor h s l / 0.3);
     }
   }
 }
@@ -128,4 +129,4 @@
   // This workaround forces a stacking context on the scrolling container, which
   // hopefully addresses the bug. @see https://github.com/elastic/eui/pull/7855
   transform: translateZ(0);
-}
+}

package/src/theme_dark.scss

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

package/src/theme_light.scss

@@ -3,8 +3,7 @@
 @import './variables/colors/colors_light';
 @import './variables/shadows_light';
 
-
 // Global styling
 @import './variables/index';
 @import 'mixins/index';
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';

package/src/variables/_index.scss

@@ -1,7 +1,7 @@
 // Import base theme first, then override
 
-// TODO: untangle border scss definitions by moving them and related usage to the theme 
-// package instead of the common one 
+// TODO: untangle border scss definitions by moving them and related usage to the theme
+// package instead of the common one
 
 @import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/size';
 @import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/responsive';

package/src/variables/_shadows_dark.scss

@@ -1,20 +1,20 @@
 // Shadows
 $euiShadowColor: $euiColorInk !default;
 
-$euiShadowDownXS: 0px 1px 4px 0px hsla(from $euiShadowColor h s l / 0.4), 0px 2px 8px 0px hsla(from $euiShadowColor h s l / 0.24);
-$euiShadowDownS: 0px 2px 7px 0px hsla(from $euiShadowColor h s l / 0.46), 0px 4px 11px 0px hsla(from $euiShadowColor h s l / 0.26);
-$euiShadowDownM: 0px 3px 10px 0px hsla(from $euiShadowColor h s l / 0.52), 0px 6px 14px 0px hsla(from $euiShadowColor h s l / 0.28);
-$euiShadowDownL: 0px 4px 13px 0px hsla(from $euiShadowColor h s l / 0.58), 0px 8px 17px 0px hsla(from $euiShadowColor h s l / 0.3);
-$euiShadowDownXL: 0px 5px 16px 0px hsla(from $euiShadowColor h s l / 0.64), 0px 10px 20px 0px hsla(from $euiShadowColor h s l / 0.32);
+$euiShadowDownXS: 0 1px 4px 0 hsla(from $euiShadowColor h s l / 0.4), 0 2px 8px 0 hsla(from $euiShadowColor h s l / 0.24);
+$euiShadowDownS: 0 2px 7px 0 hsla(from $euiShadowColor h s l / 0.46), 0 4px 11px 0 hsla(from $euiShadowColor h s l / 0.26);
+$euiShadowDownM: 0 3px 10px 0 hsla(from $euiShadowColor h s l / 0.52), 0 6px 14px 0 hsla(from $euiShadowColor h s l / 0.28);
+$euiShadowDownL: 0 4px 13px 0 hsla(from $euiShadowColor h s l / 0.58), 0 8px 17px 0 hsla(from $euiShadowColor h s l / 0.3);
+$euiShadowDownXL: 0 5px 16px 0 hsla(from $euiShadowColor h s l / 0.64), 0 10px 20px 0 hsla(from $euiShadowColor h s l / 0.32);
 
-$euiShadowUpXS: 0px 1px 4px 0px hsla(from $euiShadowColor h s l / 0.4), 0px -2px 8px 0px hsla(from $euiShadowColor h s l / 0.24);
-$euiShadowUpS: 0px 2px 7px 0px hsla(from $euiShadowColor h s l / 0.46), 0px -4px 11px 0px hsla(from $euiShadowColor h s l / 0.26);
-$euiShadowUpM: 0px 3px 10px 0px hsla(from $euiShadowColor h s l / 0.52), 0px -6px 14px 0px hsla(from $euiShadowColor h s l / 0.28);
-$euiShadowUpL: 0px 4px 13px 0px hsla(from $euiShadowColor h s l / 0.58), 0px -8px 17px 0px hsla(from $euiShadowColor h s l / 0.3);
-$euiShadowUpXL: 0px 5px 16px 0px hsla(from $euiShadowColor h s l / 0.64), 0px -10px 20px 0px hsla(from $euiShadowColor h s l / 0.32);
+$euiShadowUpXS: 0 1px 4px 0 hsla(from $euiShadowColor h s l / 0.4), 0 -2px 8px 0 hsla(from $euiShadowColor h s l / 0.24);
+$euiShadowUpS: 0 2px 7px 0 hsla(from $euiShadowColor h s l / 0.46), 0 -4px 11px 0 hsla(from $euiShadowColor h s l / 0.26);
+$euiShadowUpM: 0 3px 10px 0 hsla(from $euiShadowColor h s l / 0.52), 0 -6px 14px 0 hsla(from $euiShadowColor h s l / 0.28);
+$euiShadowUpL: 0 4px 13px 0 hsla(from $euiShadowColor h s l / 0.58), 0 -8px 17px 0 hsla(from $euiShadowColor h s l / 0.3);
+$euiShadowUpXL: 0 5px 16px 0 hsla(from $euiShadowColor h s l / 0.64), 0 -10px 20px 0 hsla(from $euiShadowColor h s l / 0.32);
 
-$euiShadowHoverDown: 0px 2px 7px 0px hsla(from $euiShadowColor h s l / 0.46), 0px 4px 11px 0px hsla(from $euiShadowColor h s l / 0.26);
-$euiShadowHoverXLDown: 0px 6px 19px 0px hsla(from $euiShadowColor h s l / 0.7), 0px 12px 23px 0px hsla(from $euiShadowColor h s l / 0.34);
+$euiShadowHoverDown: 0 2px 7px 0 hsla(from $euiShadowColor h s l / 0.46), 0 4px 11px 0 hsla(from $euiShadowColor h s l / 0.26);
+$euiShadowHoverXLDown: 0 6px 19px 0 hsla(from $euiShadowColor h s l / 0.7), 0 12px 23px 0 hsla(from $euiShadowColor h s l / 0.34);
 
-$euiShadowHoverUp: 0px -2px 7px 0px hsla(from $euiShadowColor h s l / 0.46), 0px -4px 11px 0px hsla(from $euiShadowColor h s l / 0.26);
-$euiShadowHoverXLUp: 0px -6px 19px 0px hsla(from $euiShadowColor h s l / 0.7), 0px -12px 23px 0px hsla(from $euiShadowColor h s l / 0.34);
+$euiShadowHoverUp: 0 -2px 7px 0 hsla(from $euiShadowColor h s l / 0.46), 0 -4px 11px 0 hsla(from $euiShadowColor h s l / 0.26);
+$euiShadowHoverXLUp: 0 -6px 19px 0 hsla(from $euiShadowColor h s l / 0.7), 0 -12px 23px 0 hsla(from $euiShadowColor h s l / 0.34);

package/src/variables/_shadows_light.scss

@@ -1,20 +1,20 @@
 // Shadows
 $euiShadowColor: $euiColorShade120 !default;
 
-$euiShadowDownXS: 0px 0px 2px 0px hsl(from $euiShadowColor h s l /  0.16), 0px 1px 4px 0px hsl(from $euiShadowColor h s l / 0.06), 0px 2px 8px 0px hsl(from $euiShadowColor h s l / 0.04);
-$euiShadowDownS: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 2px 7px 0px hsl(from $euiShadowColor h s l / 0.08), 0px 4px 11px 0px hsl(from $euiShadowColor h s l / 0.05);
-$euiShadowDownM: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 3px 10px 0px hsl(from $euiShadowColor h s l / 0.1), 0px 6px 14px 0px hsl(from $euiShadowColor h s l / 0.06);
-$euiShadowDownL: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 4px 13px 0px hsl(from $euiShadowColor h s l / 0.12), 0px 8px 17px 0px hsl(from $euiShadowColor h s l / 0.07);
-$euiShadowDownXL: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 5px 16px 0px hsl(from $euiShadowColor h s l / 0.14), 0px 10px 20px 0px hsl(from $euiShadowColor h s l / 0.08);
+$euiShadowDownXS: 0 0 2px 0 hsl(from $euiShadowColor h s l /  0.16), 0 1px 4px 0 hsl(from $euiShadowColor h s l / 0.06), 0 2px 8px 0 hsl(from $euiShadowColor h s l / 0.04);
+$euiShadowDownS: 0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16), 0 2px 7px 0 hsl(from $euiShadowColor h s l / 0.08), 0 4px 11px 0 hsl(from $euiShadowColor h s l / 0.05);
+$euiShadowDownM: 0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16), 0 3px 10px 0 hsl(from $euiShadowColor h s l / 0.1), 0 6px 14px 0 hsl(from $euiShadowColor h s l / 0.06);
+$euiShadowDownL: 0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16), 0 4px 13px 0 hsl(from $euiShadowColor h s l / 0.12), 0 8px 17px 0 hsl(from $euiShadowColor h s l / 0.07);
+$euiShadowDownXL: 0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16), 0 5px 16px 0 hsl(from $euiShadowColor h s l / 0.14), 0 10px 20px 0 hsl(from $euiShadowColor h s l / 0.08);
 
-$euiShadowUpXS: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -1px 4px 0px hsl(from $euiShadowColor h s l / 0.06), 0px -2px 8px 0px hsl(from $euiShadowColor h s l / 0.04);
-$euiShadowUpS: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -2px 7px 0px hsl(from $euiShadowColor h s l / 0.08), 0px -4px 11px 0px hsl(from $euiShadowColor h s l / 0.05);
-$euiShadowUpM: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -3px 10px 0px hsl(from $euiShadowColor h s l / 0.1), 0px -6px 14px 0px hsl(from $euiShadowColor h s l / 0.06);
-$euiShadowUpL: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -4px 13px 0px hsl(from $euiShadowColor h s l / 0.12), 0px -8px 17px 0px hsl(from $euiShadowColor h s l / 0.07);
-$euiShadowUpXL: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -5px 16px 0px hsl(from $euiShadowColor h s l / 0.14), 0px -10px 20px 0px hsl(from $euiShadowColor h s l / 0.08);
+$euiShadowUpXS: 0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16), 0 -1px 4px 0 hsl(from $euiShadowColor h s l / 0.06), 0 -2px 8px 0 hsl(from $euiShadowColor h s l / 0.04);
+$euiShadowUpS: 0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16), 0 -2px 7px 0 hsl(from $euiShadowColor h s l / 0.08), 0 -4px 11px 0 hsl(from $euiShadowColor h s l / 0.05);
+$euiShadowUpM: 0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16), 0 -3px 10px 0 hsl(from $euiShadowColor h s l / 0.1), 0 -6px 14px 0 hsl(from $euiShadowColor h s l / 0.06);
+$euiShadowUpL: 0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16), 0 -4px 13px 0 hsl(from $euiShadowColor h s l / 0.12), 0 -8px 17px 0 hsl(from $euiShadowColor h s l / 0.07);
+$euiShadowUpXL: 0 0 2px 0 hsl(from $euiShadowColor h s l / 0.16), 0 -5px 16px 0 hsl(from $euiShadowColor h s l / 0.14), 0 -10px 20px 0 hsl(from $euiShadowColor h s l / 0.08);
 
-$euiShadowHoverDown: 0px 0px 2px 0px hsla(from $euiShadowColor h s l / 0.16), 0px 2px 7px 0px hsla(from $euiShadowColor h s l / 0.08), 0px 4px 11px 0px hsla(from $euiShadowColor h s l / 0.05);
-$euiShadowHoverXLDown: 0px 0px 2px 0px hsl(from $euiShadowColor h s l/ 0.16), 0px 6px 19px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 12px 23px 0px hsl(from $euiShadowColor h s l / 0.09);
+$euiShadowHoverDown: 0 0 2px 0 hsla(from $euiShadowColor h s l / 0.16), 0 2px 7px 0 hsla(from $euiShadowColor h s l / 0.08), 0 4px 11px 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowHoverXLDown: 0 0 2px 0 hsl(from $euiShadowColor h s l/ 0.16), 0 6px 19px 0 hsl(from $euiShadowColor h s l / 0.16), 0 12px 23px 0 hsl(from $euiShadowColor h s l / 0.09);
 
-$euiShadowHoverUp: 0px 0px 2px 0px hsla(from $euiShadowColor h s l / 0.16), 0px -2px 7px 0px hsla(from $euiShadowColor h s l / 0.08), 0px -4px 11px 0px hsla(from $euiShadowColor h s l / 0.05);
-$euiShadowHoverXLUp: 0px 0px 2px 0px hsl(from $euiShadowColor h s l/ 0.16), 0px -6px 19px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -12px 23px 0px hsl(from $euiShadowColor h s l / 0.09);
+$euiShadowHoverUp: 0 0 2px 0 hsla(from $euiShadowColor h s l / 0.16), 0 -2px 7px 0 hsla(from $euiShadowColor h s l / 0.08), 0 -4px 11px 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowHoverXLUp: 0 0 2px 0 hsl(from $euiShadowColor h s l/ 0.16), 0 -6px 19px 0 hsl(from $euiShadowColor h s l / 0.16), 0 -12px 23px 0 hsl(from $euiShadowColor h s l / 0.09);

package/src/variables/colors/_colors_dark.scss

@@ -116,12 +116,13 @@ $euiColorBorderBaseDanger: $euiColorDanger120 !default;
 
 $euiColorBorderBasePlain: $euiColorShade100 !default;
 $euiColorBorderBaseSubdued: $euiColorShade120 !default;
+$euiColorBorderBaseProminent: $euiColorShade80 !default;
 $euiColorBorderBaseDisabled: $euiColorShade100 !default;
 $euiColorBorderBaseFloating: $euiColorShade120 !default;
 $euiColorBorderBaseFormsColorSwatch: $euiColorPlainLightAlpha32 !default;
-$euiColorBorderBaseFormsControl: $euiColorShade80 !default;
 
 $euiColorBorderInteractiveFormsHoverPlain: $euiColorShade90 !default;
+$euiColorBorderInteractiveFormsHoverProminent: $euiColorShade60 !default;
 $euiColorBorderInteractiveFormsHoverDanger: $euiColorDanger70 !default;
 
 $euiColorBorderStrongPrimary: $euiColorPrimary60 !default;

package/src/variables/colors/_colors_light.scss

@@ -117,13 +117,14 @@ $euiColorBorderBaseDanger: $euiColorDanger30 !default;
 
 $euiColorBorderBasePlain: $euiColorShade30 !default;
 $euiColorBorderBaseSubdued: $euiColorShade20 !default;
+$euiColorBorderBaseProminent: $euiColorShade50 !default;
 $euiColorBorderBaseDisabled: $euiColorShade30 !default;
 $euiColorBorderBaseFloating: $euiColorTransparent !default;
 
 $euiColorBorderBaseFormsColorSwatch: $euiColorShade100Alpha24 !default;
-$euiColorBorderBaseFormsControl: $euiColorShade60 !default;
 
 $euiColorBorderInteractiveFormsHoverPlain: $euiColorShade40 !default;
+$euiColorBorderInteractiveFormsHoverProminent: $euiColorShade70 !default;
 $euiColorBorderInteractiveFormsHoverDanger: $euiColorDanger80 !default;
 
 $euiColorBorderStrongPrimary: $euiColorPrimary90 !default;
@@ -136,7 +137,6 @@ $euiColorBorderStrongRisk: $euiColorRisk90 !default;
 $euiColorBorderStrongDanger: $euiColorDanger90 !default;
 $euiColorBorderStrongText: $euiColorShade90 !default;
 
-
 // Charts
 $euiColorChartLines: $euiColorShade30 !default;
 $euiColorChartBand: $euiColorShade10 !default;

package/src/variables/colors/_semantic_colors.scss

@@ -4,7 +4,6 @@
  * TODO: automatically generate scss variable files
  */
 
-
 $euiColorWhite: #FFFFFF !default;
 $euiColorBlack: #000000 !default;
 $euiColorMutedBlack: #0E0F12 !default;
@@ -86,7 +85,7 @@ $euiColorNeutral30: #B5E5F2 !default;
 $euiColorNeutral40: #94D8EB !default;
 $euiColorNeutral50: #63C8E3 !default;
 $euiColorNeutral60: #37B8DC !default;
-$euiColorNeutral70: #0dA1C9 !default;
+$euiColorNeutral70: #0DA1C9 !default;
 $euiColorNeutral80: #1C8CB5 !default;
 $euiColorNeutral90: #19799F !default;
 $euiColorNeutral100: #0F658A !default;
@@ -217,5 +216,3 @@ $euiColorShade100Alpha24: rgba($euiColorShade100, 0.24) !default;
 $euiColorShade100Alpha70: rgba($euiColorShade100, 0.7) !default;
 
 $euiColorShade120Alpha70: rgba($euiColorShade120, 0.7) !default;
- 
-