@elastic/eui-theme-borealis 0.0.4 → 0.0.6

package/lib/eui_theme_borealis_light.json

@@ -47,67 +47,67 @@
   },
   "euiPaletteColorBlind": {
     "euiColorVis0": {
-      "graphic": "#00BEB8",
-      "behindText": "#00BEB8"
+      "graphic": "#16C5C0",
+      "behindText": "#16C5C0"
     },
     "euiColorVis1": {
       "graphic": "#98E6E2",
       "behindText": "#98E6E2"
     },
     "euiColorVis2": {
-      "graphic": "#599DFF",
-      "behindText": "#599DFF"
+      "graphic": "#61A2FF",
+      "behindText": "#61A2FF"
     },
     "euiColorVis3": {
-      "graphic": "#B4D5FF",
-      "behindText": "#B4D5FF"
+      "graphic": "#BFDBFF",
+      "behindText": "#BFDBFF"
     },
     "euiColorVis4": {
-      "graphic": "#ED6BA2",
-      "behindText": "#ED6BA2"
+      "graphic": "#EE72A6",
+      "behindText": "#EE72A6"
     },
     "euiColorVis5": {
-      "graphic": "#FFBED5",
-      "behindText": "#FFBED5"
+      "graphic": "#FFC7DB",
+      "behindText": "#FFC7DB"
     },
     "euiColorVis6": {
-      "graphic": "#F66D64",
-      "behindText": "#F66D64"
+      "graphic": "#F6726A",
+      "behindText": "#F6726A"
     },
     "euiColorVis7": {
-      "graphic": "#FFC0B8",
-      "behindText": "#FFC0B8"
+      "graphic": "#FFC9C2",
+      "behindText": "#FFC9C2"
     },
     "euiColorVis8": {
-      "graphic": "#E6AB01",
-      "behindText": "#E6AB01"
+      "graphic": "#EAAE01",
+      "behindText": "#EAAE01"
     },
     "euiColorVis9": {
-      "graphic": "#FCD279",
-      "behindText": "#FCD279"
+      "graphic": "#FCD883",
+      "behindText": "#FCD883"
     }
   },
   "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'",
-  "euiColorVis0": "#00BEB8",
-  "euiColorVis1": "#98E6E2",
-  "euiColorVis2": "#599DFF",
-  "euiColorVis3": "#B4D5FF",
-  "euiColorVis4": "#ED6BA2",
-  "euiColorVis5": "#FFBED5",
-  "euiColorVis6": "#F66D64",
-  "euiColorVis7": "#FFC0B8",
-  "euiColorVis8": "#E6AB01",
-  "euiColorVis9": "#FCD279",
-  "euiColorVis0_behindText": "#00BEB8",
-  "euiColorVis1_behindText": "#98E6E2",
-  "euiColorVis2_behindText": "#599DFF",
+  "euiColorVis0": "#16C5C0",
+  "euiColorVis1": "#A6EDEA",
+  "euiColorVis2": "#61A2FF",
+  "euiColorVis3": "#BFDBFF",
+  "euiColorVis4": "#EE72A6",
+  "euiColorVis5": "#FFC7DB",
+  "euiColorVis6": "#F6726A",
+  "euiColorVis7": "#FFC9C2",
+  "euiColorVis8": "#EAAE01",
+  "euiColorVis9": "#FCD883",
+  "euiColorVis0_behindText": "#16C5C0",
+  "euiColorVis1_behindText": "#A6EDEA",
+  "euiColorVis2_behindText": "#61A2FF",
   "euiColorVis3_behindText": "#B4D5FF",
-  "euiColorVis4_behindText": "#ED6BA2",
-  "euiColorVis5_behindText": "#FFBED5",
-  "euiColorVis6_behindText": "#F66D64",
-  "euiColorVis7_behindText": "#FFC0B8",
-  "euiColorVis8_behindText": "#E6AB01",
-  "euiColorVis9_behindText": "#FCD279",
+  "euiColorVis4_behindText": "#EE72A6",
+  "euiColorVis5_behindText": "#FFC7DB",
+  "euiColorVis6_behindText": "#F6726A",
+  "euiColorVis7_behindText": "#FFC9C2",
+  "euiColorVis8_behindText": "#EAAE01",
+  "euiColorVis9_behindText": "#FCD883",
   "euiFontWeightLight": 300,
   "euiFontWeightRegular": 400,
   "euiFontWeightMedium": 450,
@@ -162,7 +162,7 @@
   "euiHeaderBackgroundColor": "#FFFFFF",
   "euiHeaderDarkBackgroundColor": "#0B1628",
   "euiHeaderBorderColor": "#E3E8F2",
-  "euiHeaderBreadcrumbColor": "#D6E9FF",
+  "euiHeaderBreadcrumbColor": "#D9E8FF",
   "euiHeaderHeight": "48px",
   "euiHeaderChildSize": "40px",
   "euiHeaderHeightCompensation": "48px",
@@ -183,7 +183,7 @@
     "subdued": "#F6F9FC",
     "accent": "#FFEBF5",
     "accentSecondary": "#E2F9F7",
-    "primary": "#E5F3FF",
+    "primary": "#E8F1FF",
     "success": "#E2F8F0",
     "warning": "#FDF3D8",
     "danger": "#FFE8E5"
@@ -296,10 +296,10 @@
   "euiColorDarkestShade": "#2B394F",
   "euiColorFullShade": "#07101F",
   "euiPageBackgroundColor": "#F6F9FC",
-  "euiColorHighlight": "#E5F3FF",
-  "euiTextColor": "#172336",
+  "euiColorHighlight": "#E8F1FF",
+  "euiTextColor": "#1D2A3E",
   "euiTitleColor": "#111C2C",
-  "euiTextSubduedColor": "#5A6D8C",
+  "euiTextSubduedColor": "#516381",
   "euiColorDisabled": "#E3E8F2",
   "euiColorPrimaryText": "#1750BA",
   "euiColorSuccessText": "#09724D",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-theme-borealis",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "A visual theme for EUI",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -23,13 +23,17 @@
     "url": "https://github.com/elastic/eui.git",
     "directory": "packages/eui-theme-borealis"
   },
+  "dependency": {
+    "chroma-js": "^2.4.2"
+  },
   "devDependencies": {
     "@babel/cli": "^7.21.5",
     "@babel/core": "^7.21.8",
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
-    "@elastic/eui-theme-common": "0.0.4",
+    "@elastic/eui-theme-common": "0.0.6",
+    "@types/chroma-js": "^2.4.0",
     "@types/jest": "^29.5.12",
     "@types/prettier": "2.7.3",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
@@ -50,7 +54,7 @@
     "typescript": "^5.6.2"
   },
   "peerDependencies": {
-    "@elastic/eui-theme-common": "0.0.1"
+    "@elastic/eui-theme-common": "0.0.5"
   },
   "main": "lib/cjs/index.js",
   "exports": {

package/src/variables/colors/_colors_dark.scss

@@ -39,14 +39,15 @@ $euiColorBackgroundBaseDanger: $euiColorDanger140 !default;
 $euiColorBackgroundBaseSubdued: $euiColorPlainDark !default;
 $euiColorBackgroundBasePlain: $euiColorShade145 !default;
 $euiColorBackgroundBaseDisabled: $euiColorShade130 !default;
+$euiColorBackgroundBaseHighlighted: $euiColorShade135 !default;
 $euiColorBackgroundBaseFormsPrepend: $euiColorShade125 !default;
 $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade120 !default;
 
-$euiColorBackgroundBaseInteractiveHover: $euiColorTransparentWhite10 !default;
-$euiColorBackgroundBaseInteractiveSelect: $euiColorShade125 !default;
-$euiColorBackgroundBaseInteractiveOverlay: $euiColorShadeTransparent80 !default;
-$euiColorBackgroundBaseSkeletonEdge: $euiColorTransparentWhite10 !default;
-$euiColorBackgroundBaseSkeletonMiddle: $euiColorTransparentWhite30 !default;
+$euiColorBackgroundBaseInteractiveHover: $euiColorPlainLightAlpha8 !default;
+$euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary130 !default;
+$euiColorBackgroundBaseInteractiveOverlay: $euiColorShade120Alpha70 !default;
+$euiColorBackgroundBaseSkeletonEdge: $euiColorPlainLightAlpha16 !default;
+$euiColorBackgroundBaseSkeletonMiddle: $euiColorPlainLightAlpha8 !default;
 
 $euiColorBackgroundLightPrimary: $euiColorPrimary130 !default;
 $euiColorBackgroundLightAccent: $euiColorAccent130 !default;
@@ -65,16 +66,16 @@ $euiColorBackgroundFilledDanger: $euiColorDanger60 !default;
 $euiColorBackgroundFilledText: $euiColorShade60 !default;
 
 // Texts (legacy)
-$euiTextColor: $euiColorShade20 !default;
-$euiTitleColor: $euiColorShade15 !default;
+$euiTextColor: $euiColorShade30 !default;
+$euiTitleColor: $euiColorShade20 !default;
 $euiTextSubduedColor: $euiColorShade60 !default;
 $euiColorDisabled: $euiColorBackgroundBaseDisabled !default;
 $euiColorDisabledText: $euiColorShade80 !default;
 $euiLinkColor: $euiColorPrimary60 !default;
 
 // Texts
-$euiColorTextParagraph: $euiColorShade20 !default;
-$euiColorTextHeading: $euiColorShade15 !default;
+$euiColorTextParagraph: $euiColorShade30 !default;
+$euiColorTextHeading: $euiColorShade20 !default;
 $euiColorTextSubdued: $euiColorShade60 !default;
 $euiColorTextDisabled: $euiColorShade80 !default;
 $euiColorTextInverse: $euiColorPlainDark !default;
@@ -106,7 +107,7 @@ $euiColorBorderBasePlain: $euiColorShade100;
 $euiColorBorderBaseSubdued: $euiColorShade120;
 $euiColorBorderBaseDisabled: $euiColorShade100;
 $euiColorBorderBaseFloating: $euiColorShade120;
-$euiColorBorderBaseFormsColorSwatch: $euiColorTransparentWhite30;
+$euiColorBorderBaseFormsColorSwatch: $euiColorPlainLightAlpha32;
 $euiColorBorderBaseFormsControl: $euiColorShade80;
 
 $euiColorStrongBasePrimary: $euiColorPrimary60;

package/src/variables/colors/_colors_light.scss

@@ -40,14 +40,15 @@ $euiColorBackgroundBaseDanger: $euiColorDanger10 !default;
 $euiColorBackgroundBaseSubdued: $euiColorShade10 !default;
 $euiColorBackgroundBasePlain: $euiColorPlainLight !default;
 $euiColorBackgroundBaseDisabled: $euiColorShade15 !default;
+$euiColorBackgroundBaseHighlighted: $euiColorShade10 !default;
 $euiColorBackgroundBaseFormsPrepend: $euiColorShade15 !default;
 $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade30 !default;
 
-$euiColorBackgroundBaseInteractiveHover: $euiColorShadeTransparent10 !default;
-$euiColorBackgroundBaseInteractiveSelect: $euiColorShade15 !default;
-$euiColorBackgroundBaseInteractiveOverlay: $euiColorShadeTransparent80 !default;
-$euiColorBackgroundBaseSkeletonEdge: $euiColorShadeTransparent30 !default;
-$euiColorBackgroundBaseSkeletonMiddle: $euiColorShadeTransparent10 !default;
+$euiColorBackgroundBaseInteractiveHover: $euiColorPrimary100Alpha4 !default;
+$euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary10 !default;
+$euiColorBackgroundBaseInteractiveOverlay: $euiColorShade100Alpha70 !default;
+$euiColorBackgroundBaseSkeletonEdge: $euiColorShade100Alpha16 !default;
+$euiColorBackgroundBaseSkeletonMiddle: $euiColorShade100Alpha4 !default;
 
 $euiColorBackgroundLightPrimary: $euiColorPrimary20 !default;
 $euiColorBackgroundLightAccent: $euiColorAccent20 !default;
@@ -61,22 +62,22 @@ $euiColorBackgroundFilledPrimary: $euiColorPrimary90 !default;
 $euiColorBackgroundFilledAccent: $euiColorAccent90 !default;
 $euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary90 !default;
 $euiColorBackgroundFilledSuccess: $euiColorSuccess90 !default;
-$euiColorBackgroundFilledWarning: $euiColorWarning90 !default;
+$euiColorBackgroundFilledWarning: $euiColorWarning40 !default;
 $euiColorBackgroundFilledDanger: $euiColorDanger90 !default;
 $euiColorBackgroundFilledText: $euiColorShade90 !default;
 
 // Texts (legacy)
-$euiTextColor: $euiColorShade135 !default;
+$euiTextColor: $euiColorShade130 !default;
 $euiTitleColor: $euiColorShade140 !default;
-$euiTextSubduedColor: $euiColorShade90 !default;
+$euiTextSubduedColor: $euiColorShade95 !default;
 $euiColorDisabled: $euiColorBackgroundBaseDisabled !default;
 $euiColorDisabledText: $euiColorShade70 !default;
 $euiLinkColor: $euiColorPrimary100 !default;
 
 // Texts
-$euiColorTextParagraph: $euiColorShade135 !default;
+$euiColorTextParagraph: $euiColorShade130 !default;
 $euiColorTextHeading: $euiColorShade140 !default;
-$euiColorTextSubdued: $euiColorShade90 !default;
+$euiColorTextSubdued: $euiColorShade95 !default;
 $euiColorTextDisabled: $euiColorShade70 !default;
 $euiColorTextInverse: $euiColorPlainLight !default;
 
@@ -106,9 +107,9 @@ $euiColorBorderBaseDanger: $euiColorDanger30;
 $euiColorBorderBasePlain: $euiColorShade30;
 $euiColorBorderBaseSubdued: $euiColorShade20;
 $euiColorBorderBaseDisabled: $euiColorShade30;
-$euiColorBorderBaseFloating: $euiColorTransparentWhite0;
+$euiColorBorderBaseFloating: $euiColorTransparent;
 
-$euiColorBorderBaseFormsColorSwatch: $euiColorShadeTransparent30;
+$euiColorBorderBaseFormsColorSwatch: $euiColorShade100Alpha24;
 $euiColorBorderBaseFormsControl: $euiColorShade60;
 
 $euiColorBorderStrongPrimary: $euiColorPrimary100;

package/src/variables/colors/_semantic_colors.scss

@@ -5,66 +5,26 @@
  */
 
 
-$euiColorWhite: #FFF !default;
-$euiColorBlack: #000 !default;
+$euiColorWhite: #FFFFFF !default;
+$euiColorBlack: #000000 !default;
 $euiColorMutedBlack: #0E0F12 !default;
 $euiColorBlueBlack: #050F21 !default;
-
-$euiColorTransparentWhite0: 'transparent' !default;
-$euiColorTransparentWhite10: rgba(255, 255, 255, 0.06) !default;
-$euiColorTransparentWhite20: rgba(255, 255, 255, 0.10) !default;
-$euiColorTransparentWhite30: rgba(255, 255, 255, 0.16) !default;
-$euiColorTransparentWhite40: rgba(255, 255, 255, 0.22) !default;
-$euiColorTransparentWhite50: rgba(255, 255, 255, 0.28) !default;
-$euiColorTransparentWhite60: rgba(255, 255, 255, 0.34) !default;
-$euiColorTransparentWhite70: rgba(255, 255, 255, 0.42) !default;
-$euiColorTransparentWhite80: rgba(255, 255, 255, 0.50) !default;
-$euiColorTransparentWhite90: rgba(255, 255, 255, 0.58) !default;
-$euiColorTransparentWhite100: rgba(255, 255, 255, 0.66) !default;
-$euiColorTransparentWhite110: rgba(255, 255, 255, 0.74) !default;
-$euiColorTransparentWhite120: rgba(255, 255, 255, 0.8) !default;
-$euiColorTransparentWhite130: rgba(255, 255, 255, 0.84) !default;
-$euiColorTransparentWhite140: rgba(255, 255, 255, 0.88) !default;
-
-$euiColorTransparentMutedGrey10: rgba(54, 95, 178, 0.06) !default;
-$euiColorTransparentMutedGrey20: rgba(50, 88, 163, 0.10) !default;
-$euiColorTransparentMutedGrey30: rgba(44, 75, 138, 0.15) !default;
-$euiColorTransparentMutedGrey40: rgba(37, 60, 111, 0.19) !default;
-$euiColorTransparentMutedGrey50: rgba(31, 48, 84, 0.24) !default;
-$euiColorTransparentMutedGrey60: rgba(24, 35, 58, 0.32) !default;
-$euiColorTransparentMutedGrey70: rgba(18, 22, 32, 0.40) !default;
-$euiColorTransparentMutedGrey80: rgba(14, 15, 18, 0.50) !default;
-$euiColorTransparentMutedGrey90: rgba(14, 15, 18, 0.60) !default;
-$euiColorTransparentMutedGrey100: rgba(14, 15, 18, 0.68) !default;
-$euiColorTransparentMutedGrey110: rgba(14, 15, 18, 0.76) !default;
-$euiColorTransparentMutedGrey120: rgba(14, 15, 18, 0.84) !default;
-$euiColorTransparentMutedGrey130: rgba(14, 15, 18, 0.88) !default;
-$euiColorTransparentMutedGrey140: rgba(14, 15, 18, 0.92) !default;
-
-$euiColorTransparentBlueGrey10: rgba(54, 95, 178, 0.06) !default;
-$euiColorTransparentBlueGrey20: rgba(54, 95, 178, 0.10) !default;
-$euiColorTransparentBlueGrey30: rgba(54, 95, 178, 0.16) !default;
-$euiColorTransparentBlueGrey40: rgba(54, 95, 178, 0.22) !default;
-$euiColorTransparentBlueGrey50: rgba(47, 84, 158, 0.28) !default;
-$euiColorTransparentBlueGrey60: rgba(35, 65, 123, 0.36) !default;
-$euiColorTransparentBlueGrey70: rgba(24, 45, 88, 0.44) !default;
-$euiColorTransparentBlueGrey80: rgba(11, 25, 51, 0.52) !default;
-$euiColorTransparentBlueGrey90: rgba(5, 15, 33, 0.60) !default;
-$euiColorTransparentBlueGrey100: rgba(5, 15, 33, 0.68) !default;
-$euiColorTransparentBlueGrey110: rgba(5, 15, 33, 0.76) !default;
-$euiColorTransparentBlueGrey120: rgba(5, 15, 33, 0.84) !default;
-$euiColorTransparentBlueGrey130: rgba(5, 15, 33, 0.88) !default;
-$euiColorTransparentBlueGrey140: rgba(5, 15, 33, 0.92) !default;
+$euiColorTransparent: 'transparent' !default;
 
 $euiColorPlainLight: $euiColorWhite !default;
 $euiColorPlainDark: $euiColorBlueBlack !default;
 
-$euiColorPrimary10: #E5F3FF !default;
-$euiColorPrimary20: #D6E9FF !default;
-$euiColorPrimary30: #B4D5FF !default;
-$euiColorPrimary40: #96C3FF !default;
-$euiColorPrimary50: #78B0FF !default;
-$euiColorPrimary60: #599DFF !default;
+$euiColorPlainLightAlpha8: rgba($euiColorPlainLight, 0.08) !default;
+$euiColorPlainLightAlpha12: rgba($euiColorPlainLight, 0.12) !default;
+$euiColorPlainLightAlpha16: rgba($euiColorPlainLight, 0.16) !default;
+$euiColorPlainLightAlpha32: rgba($euiColorPlainLight, 0.32) !default;
+
+$euiColorPrimary10: #E8F1FF !default;
+$euiColorPrimary20: #D9E8FF !default;
+$euiColorPrimary30: #BFDBFF !default;
+$euiColorPrimary40: #A3CBFF !default;
+$euiColorPrimary50: #85B7FF !default;
+$euiColorPrimary60: #61A2FF !default;
 $euiColorPrimary70: #3788FF !default;
 $euiColorPrimary80: #2476F0 !default;
 $euiColorPrimary90: #0B64DD !default;
@@ -74,12 +34,19 @@ $euiColorPrimary120: #123778 !default;
 $euiColorPrimary130: #0D2F5E !default;
 $euiColorPrimary140: #0A2342 !default;
 
+$euiColorPrimary70Alpha12: rgba($euiColorPrimary70, 0.12) !default;
+$euiColorPrimary70Alpha16: rgba($euiColorPrimary70, 0.16) !default;
+
+$euiColorPrimary100Alpha4: rgba($euiColorPrimary100, 0.04) !default;
+$euiColorPrimary100Alpha8: rgba($euiColorPrimary100, 0.08) !default;
+$euiColorPrimary100Alpha12: rgba($euiColorPrimary100, 0.12) !default;
+
 $euiColorAccent10: #FFEBF5 !default;
 $euiColorAccent20: #FDDDE9 !default;
-$euiColorAccent30: #FFBED5 !default;
-$euiColorAccent40: #FBA3C4 !default;
-$euiColorAccent50: #F588B3 !default;
-$euiColorAccent60: #ED6BA2 !default;
+$euiColorAccent30: #FFC7DB !default;
+$euiColorAccent40: #FBADCA !default;
+$euiColorAccent50: #F58EB7 !default;
+$euiColorAccent60: #EE72A6 !default;
 $euiColorAccent70: #E54A91 !default;
 $euiColorAccent80: #D13680 !default;
 $euiColorAccent90: #BC1E70 !default;
@@ -89,12 +56,15 @@ $euiColorAccent120: #5E2140 !default;
 $euiColorAccent130: #481E32 !default;
 $euiColorAccent140: #351725 !default;
 
+$euiColorAccent70Alpha12: rgba($euiColorAccent70, 0.12) !default;
+$euiColorAccent70Alpha16: rgba($euiColorAccent70, 0.16) !default;
+
 $euiColorAccentSecondary10: #E2F9F7 !default;
 $euiColorAccentSecondary20: #C9F3F0 !default;
-$euiColorAccentSecondary30: #98E6E2 !default;
-$euiColorAccentSecondary40: #5DD8D2 !default;
-$euiColorAccentSecondary50: #2ECCC7 !default;
-$euiColorAccentSecondary60: #00BEB8 !default;
+$euiColorAccentSecondary30: #A6EDEA !default;
+$euiColorAccentSecondary40: #77E5E0 !default;
+$euiColorAccentSecondary50: #51D6D2 !default;
+$euiColorAccentSecondary60: #16C5C0 !default;
 $euiColorAccentSecondary70: #00B0AA !default;
 $euiColorAccentSecondary80: #009E99 !default;
 $euiColorAccentSecondary90: #008B87 !default;
@@ -104,12 +74,15 @@ $euiColorAccentSecondary120: #044949 !default;
 $euiColorAccentSecondary130: #023436 !default;
 $euiColorAccentSecondary140: #03282B !default;
 
+$euiColorAccentSecondary70Alpha12: rgba($euiColorAccentSecondary70, 0.12) !default;
+$euiColorAccentSecondary70Alpha16: rgba($euiColorAccentSecondary70, 0.16) !default;
+
 $euiColorSuccess10: #E2F8F0 !default;
 $euiColorSuccess20: #C9F3E3 !default;
-$euiColorSuccess30: #9DEDCE !default;
-$euiColorSuccess40: #6EDEB7 !default;
-$euiColorSuccess50: #3ACFA0 !default;
-$euiColorSuccess60: #23BE8F !default;
+$euiColorSuccess30: #AEE8D2 !default;
+$euiColorSuccess40: #88E3C3 !default;
+$euiColorSuccess50: #59CFAA !default;
+$euiColorSuccess60: #24C292 !default;
 $euiColorSuccess70: #04AE7E !default;
 $euiColorSuccess80: #00996B !default;
 $euiColorSuccess90: #008A5E !default;
@@ -119,12 +92,15 @@ $euiColorSuccess120: #094837 !default;
 $euiColorSuccess130: #0D362B !default;
 $euiColorSuccess140: #092A26 !default;
 
+$euiColorSuccess70Alpha12: rgba($euiColorSuccess70, 0.12) !default;
+$euiColorSuccess70Alpha16: rgba($euiColorSuccess70, 0.16) !default;
+
 $euiColorWarning10: #FDF3D8 !default;
 $euiColorWarning20: #FDE9B5 !default;
-$euiColorWarning30: #FCD279 !default;
+$euiColorWarning30: #FCD883 !default;
 $euiColorWarning40: #FACB3D !default;
 $euiColorWarning50: #F5BC00 !default;
-$euiColorWarning60: #E6AB01 !default;
+$euiColorWarning60: #EAAE01 !default;
 $euiColorWarning70: #CA9601 !default;
 $euiColorWarning80: #AD7E00 !default;
 $euiColorWarning90: #966B03 !default;
@@ -134,12 +110,15 @@ $euiColorWarning120: #513910 !default;
 $euiColorWarning130: #3D3014 !default;
 $euiColorWarning140: #2C2721 !default;
 
+$euiColorWarning40Alpha12: rgba($euiColorWarning40, 0.12) !default;
+$euiColorWarning40Alpha24: rgba($euiColorWarning40, 0.24) !default;
+
 $euiColorDanger10: #FFE8E5 !default;
 $euiColorDanger20: #FDDDD8 !default;
-$euiColorDanger30: #FFC0B8 !default;
-$euiColorDanger40: #FFA59C !default;
-$euiColorDanger50: #FC8A80 !default;
-$euiColorDanger60: #F66D64 !default;
+$euiColorDanger30: #FFC9C2 !default;
+$euiColorDanger40: #FFB5AD !default;
+$euiColorDanger50: #FC9188 !default;
+$euiColorDanger60: #F6726A !default;
 $euiColorDanger70: #EE4C48 !default;
 $euiColorDanger80: #DA3737 !default;
 $euiColorDanger90: #C61E25 !default;
@@ -149,6 +128,9 @@ $euiColorDanger120: #5E2129 !default;
 $euiColorDanger130: #491D27 !default;
 $euiColorDanger140: #351721 !default;
 
+$euiColorDanger70Alpha12: rgba($euiColorDanger70, 0.12) !default;
+$euiColorDanger70Alpha16: rgba($euiColorDanger70, 0.16) !default;
+
 $euiColorAssistance10: #F3ECFE !default;
 $euiColorAssistance20: #ECE2FE !default;
 $euiColorAssistance30: #DECDFE !default;
@@ -193,19 +175,11 @@ $euiColorShade135: #172336 !default;
 $euiColorShade140: #111C2C !default;
 $euiColorShade145: #0B1628 !default;
 
-$euiColorShadeTransparent10: $euiColorTransparentBlueGrey10 !default;
-$euiColorShadeTransparent20: $euiColorTransparentBlueGrey20 !default;
-$euiColorShadeTransparent30: $euiColorTransparentBlueGrey30 !default;
-$euiColorShadeTransparent40: $euiColorTransparentBlueGrey40 !default;
-$euiColorShadeTransparent50: $euiColorTransparentBlueGrey50 !default;
-$euiColorShadeTransparent60: $euiColorTransparentBlueGrey60 !default;
-$euiColorShadeTransparent70: $euiColorTransparentBlueGrey70 !default;
-$euiColorShadeTransparent80: $euiColorTransparentBlueGrey80 !default;
-$euiColorShadeTransparent90: $euiColorTransparentBlueGrey90 !default;
-$euiColorShadeTransparent100: $euiColorTransparentBlueGrey100 !default;
-$euiColorShadeTransparent110: $euiColorTransparentBlueGrey110 !default;
-$euiColorShadeTransparent120: $euiColorTransparentBlueGrey120 !default;
-$euiColorShadeTransparent130: $euiColorTransparentBlueGrey130 !default;
-$euiColorShadeTransparent140: $euiColorTransparentBlueGrey140 !default;
+$euiColorShade100Alpha4: rgba($euiColorShade100, 0.04) !default;
+$euiColorShade100Alpha16: rgba($euiColorShade100, 0.16) !default;
+$euiColorShade100Alpha24: rgba($euiColorShade100, 0.24) !default;
+$euiColorShade100Alpha70: rgba($euiColorShade100, 0.7) !default;
+
+$euiColorShade120Alpha70: rgba($euiColorShade120, 0.7) !default;