@elastic/eui-theme-borealis 0.1.0 → 1.0.0-snapshot.1746441787383

package/lib/eui_theme_borealis_light.json.d.ts

@@ -40,8 +40,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
       primary: string;
       accent: string;
       accentSecondary: string;
+      neutral: string;
       success: string;
       warning: string;
+      risk: string;
       danger: string;
       ghost: string;
       text: string;
@@ -313,21 +315,12 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorVisCool2: string;
     euiColorVisComplementary0: string;
     euiColorVisComplementary1: string;
-    euiColorSeverity0: string;
-    euiColorSeverity1: string;
-    euiColorSeverity2: string;
-    euiColorSeverity3: string;
-    euiColorSeverity4: string;
-    euiColorSeverity5: string;
-    euiColorSeverity6: string;
-    euiColorSeverity7: string;
-    euiColorSeverity8: string;
-    euiColorSeverity9: string;
-    euiColorSeverity10: string;
-    euiColorSeverity11: string;
-    euiColorSeverity12: string;
-    euiColorSeverity13: string;
-    euiColorSeverity14: string;
+    euiColorSeverityUnknown: string;
+    euiColorSeverityNeutral: string;
+    euiColorSeveritySuccess: string;
+    euiColorSeverityWarning: string;
+    euiColorSeverityRisk: string;
+    euiColorSeverityDanger: string;
     euiColorChartLines: string;
     euiColorChartBand: string;
     euiColorGhost: string;
@@ -363,8 +356,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorTextPrimary: string;
     euiColorTextAccent: string;
     euiColorTextAccentSecondary: string;
+    euiColorTextNeutral: string;
     euiColorTextSuccess: string;
     euiColorTextWarning: string;
+    euiColorTextRisk: string;
     euiColorTextDanger: string;
     euiColorTextParagraph: string;
     euiColorTextHeading: string;
@@ -374,8 +369,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorBackgroundBasePrimary: string;
     euiColorBackgroundBaseAccent: string;
     euiColorBackgroundBaseAccentSecondary: string;
+    euiColorBackgroundBaseNeutral: string;
     euiColorBackgroundBaseSuccess: string;
     euiColorBackgroundBaseWarning: string;
+    euiColorBackgroundBaseRisk: string;
     euiColorBackgroundBaseDanger: string;
     euiColorBackgroundBaseSubdued: string;
     euiColorBackgroundBasePlain: string;
@@ -391,22 +388,28 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorBackgroundLightPrimary: string;
     euiColorBackgroundLightAccent: string;
     euiColorBackgroundLightAccentSecondary: string;
+    euiColorBackgroundLightNeutral: string;
     euiColorBackgroundLightSuccess: string;
     euiColorBackgroundLightWarning: string;
+    euiColorBackgroundLightRisk: string;
     euiColorBackgroundLightDanger: string;
     euiColorBackgroundLightText: string;
     euiColorBackgroundFilledPrimary: string;
     euiColorBackgroundFilledAccent: string;
     euiColorBackgroundFilledAccentSecondary: string;
+    euiColorBackgroundFilledNeutral: string;
     euiColorBackgroundFilledSuccess: string;
     euiColorBackgroundFilledWarning: string;
+    euiColorBackgroundFilledRisk: string;
     euiColorBackgroundFilledDanger: string;
     euiColorBackgroundFilledText: string;
     euiColorBorderBasePrimary: string;
     euiColorBorderBaseAccent: string;
     euiColorBorderBaseAccentSecondary: string;
+    euiColorBorderBaseNeutral: string;
     euiColorBorderBaseSuccess: string;
     euiColorBorderBaseWarning: string;
+    euiColorBorderBaseRisk: string;
     euiColorBorderBaseDanger: string;
     euiColorBorderBasePlain: string;
     euiColorBorderBaseSubdued: string;
@@ -417,8 +420,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     euiColorBorderStrongPrimary: string;
     euiColorBorderStrongAccent: string;
     euiColorBorderStrongAccentSecondary: string;
+    euiColorBorderStrongNeutral: string;
     euiColorBorderStrongSuccess: string;
     euiColorBorderStrongWarning: string;
+    euiColorBorderStrongRisk: string;
     euiColorBorderStrongDanger: string;
   };
   export default sassVariables;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-theme-borealis",
-  "version": "0.1.0",
+  "version": "1.0.0-snapshot.1746441787383",
   "description": "A visual theme for EUI",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -24,6 +24,7 @@
     "directory": "packages/eui-theme-borealis"
   },
   "dependency": {
+    "@elastic/eui-theme-common": "workspace:*",
     "chroma-js": "^2.4.2"
   },
   "devDependencies": {
@@ -32,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": "0.1.0",
+    "@elastic/eui-theme-common": "1.0.0-snapshot.1746441787383",
     "@types/chroma-js": "^2.4.0",
     "@types/jest": "^29.5.12",
     "@types/prettier": "2.7.3",
@@ -53,9 +54,6 @@
     "stylelint-config-standard-scss": "^9.0.0",
     "typescript": "^5.6.2"
   },
-  "peerDependencies": {
-    "@elastic/eui-theme-common": "0.0.9"
-  },
   "main": "lib/cjs/index.js",
   "exports": {
     "./lib/*": "./lib/*",
@@ -74,5 +72,6 @@
   ],
   "installConfig": {
     "hoistingLimits": "workspaces"
-  }
+  },
+  "stableVersion": "1.0.0"
 }

package/src/variables/_borders.scss

@@ -0,0 +1,11 @@
+// Borders
+
+$euiBorderWidthThin: 1px !default;
+$euiBorderWidthThick: 2px !default;
+
+$euiBorderColor: $euiColorBorderBaseSubdued !default;
+$euiBorderRadius: $euiSizeS * .5 !default;
+$euiBorderRadiusSmall: $euiSizeS * .5 !default;
+$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default;
+$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default;
+$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default;

package/src/variables/_buttons.scss

@@ -6,8 +6,10 @@ $euiButtonHeightXSmall: $euiSizeL !default;
 $euiButtonTypes: (
   primary: $euiColorBackgroundFilledPrimary,
   accent: $euiColorBackgroundFilledAccent,
+  neutral: $euiColorBackgroundFilledNeutral,
   success: $euiColorBackgroundFilledSuccess,
   warning: $euiColorBackgroundFilledWarning,
+  risk: $euiColorBackgroundFilledRisk,
   danger: $euiColorBackgroundFilledDanger,
   ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
   text: $euiColorBackgroundFilledText, // Reserved for special use cases

package/src/variables/_index.scss

@@ -1,8 +1,16 @@
 // 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 
+
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/size';
+// borders are used in the common package, to define them on theme level we require the size variables first
+@import 'borders';
 @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';
 @import 'font_weight';

package/src/variables/colors/_colors_dark.scss

@@ -33,8 +33,10 @@ $euiColorHighlight: $euiColorPrimary100 !default;
 $euiColorBackgroundBasePrimary: $euiColorPrimary140 !default;
 $euiColorBackgroundBaseAccent: $euiColorAccent140 !default;
 $euiColorBackgroundBaseAccentSecondary: $euiColorAccentSecondary140 !default;
+$euiColorBackgroundBaseNeutral: $euiColorNeutral140 !default;
 $euiColorBackgroundBaseSuccess: $euiColorSuccess140 !default;
 $euiColorBackgroundBaseWarning: $euiColorWarning140 !default;
+$euiColorBackgroundBaseRisk: $euiColorRisk140 !default;
 $euiColorBackgroundBaseDanger: $euiColorDanger140 !default;
 $euiColorBackgroundBaseSubdued: $euiColorPlainDark !default;
 $euiColorBackgroundBasePlain: $euiColorShade145 !default;
@@ -52,16 +54,20 @@ $euiColorBackgroundBaseSkeletonMiddle: $euiColorPlainLightAlpha8 !default;
 $euiColorBackgroundLightPrimary: $euiColorPrimary130 !default;
 $euiColorBackgroundLightAccent: $euiColorAccent130 !default;
 $euiColorBackgroundLightAccentSecondary: $euiColorAccentSecondary130 !default;
+$euiColorBackgroundLightNeutral: $euiColorNeutral130 !default;
 $euiColorBackgroundLightSuccess: $euiColorSuccess130 !default;
+$euiColorBackgroundLightRisk: $euiColorRisk130 !default;
 $euiColorBackgroundLightWarning: $euiColorWarning130 !default;
 $euiColorBackgroundLightDanger: $euiColorDanger130 !default;
-$euiColorBackgroundLightText: $euiColorShade130 !default;
+$euiColorBackgroundLightText: $euiColorShade120 !default;
 
 $euiColorBackgroundFilledPrimary: $euiColorPrimary60 !default;
 $euiColorBackgroundFilledAccent: $euiColorAccent60 !default;
 $euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary60 !default;
+$euiColorBackgroundFilledNeutral: $euiColorNeutral50 !default;
 $euiColorBackgroundFilledSuccess: $euiColorSuccess60 !default;
 $euiColorBackgroundFilledWarning: $euiColorWarning40 !default;
+$euiColorBackgroundFilledRisk: $euiColorRisk50 !default;
 $euiColorBackgroundFilledDanger: $euiColorDanger60 !default;
 $euiColorBackgroundFilledText: $euiColorShade60 !default;
 
@@ -91,16 +97,20 @@ $euiColorDangerText: $euiColorDanger60 !default;
 $euiColorTextPrimary: $euiColorPrimary60 !default;
 $euiColorTextAccent: $euiColorAccent60 !default;
 $euiColorTextAccentSecondary: $euiColorAccentSecondary60 !default;
+$euiColorTextNeutral: $euiColorNeutral60 !default;
 $euiColorTextSuccess: $euiColorSuccess60 !default;
 $euiColorTextWarning: $euiColorWarning30 !default;
+$euiColorTextRisk: $euiColorRisk50 !default;
 $euiColorTextDanger: $euiColorDanger60 !default;
 
 // Borders
 $euiColorBorderBasePrimary: $euiColorPrimary120 !default;
 $euiColorBorderBaseAccent: $euiColorAccent120 !default;
 $euiColorBorderBaseAccentSecondary: $euiColorAccentSecondary120 !default;
+$euiColorBorderBaseNeutral: $euiColorNeutral120 !default;
 $euiColorBorderBaseSuccess: $euiColorSuccess120 !default;
 $euiColorBorderBaseWarning: $euiColorWarning120 !default;
+$euiColorBorderBaseRisk: $euiColorRisk120 !default;
 $euiColorBorderBaseDanger: $euiColorDanger120 !default;
 
 $euiColorBorderBasePlain: $euiColorShade100 !default;
@@ -113,8 +123,10 @@ $euiColorBorderBaseFormsControl: $euiColorShade80 !default;
 $euiColorBorderStrongPrimary: $euiColorPrimary60 !default;
 $euiColorBorderStrongAccent: $euiColorAccent60 !default;
 $euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary60 !default;
+$euiColorBorderStrongNeutral: $euiColorNeutral60 !default;
 $euiColorBorderStrongSuccess: $euiColorSuccess60 !default;
 $euiColorBorderStrongWarning: $euiColorWarning40 !default;
+$euiColorBorderStrongRisk: $euiColorRisk50 !default;
 $euiColorBorderStrongDanger: $euiColorDanger60 !default;
 
 // Charts

package/src/variables/colors/_colors_light.scss

@@ -34,8 +34,10 @@ $euiColorHighlight: $euiColorPrimary10 !default;
 $euiColorBackgroundBasePrimary: $euiColorPrimary10 !default;
 $euiColorBackgroundBaseAccent: $euiColorAccent10 !default;
 $euiColorBackgroundBaseAccentSecondary: $euiColorAccentSecondary10 !default;
+$euiColorBackgroundBaseNeutral: $euiColorNeutral10 !default;
 $euiColorBackgroundBaseSuccess: $euiColorSuccess10 !default;
 $euiColorBackgroundBaseWarning: $euiColorWarning10 !default;
+$euiColorBackgroundBaseRisk: $euiColorRisk10 !default;
 $euiColorBackgroundBaseDanger: $euiColorDanger10 !default;
 $euiColorBackgroundBaseSubdued: $euiColorShade10 !default;
 $euiColorBackgroundBasePlain: $euiColorPlainLight !default;
@@ -53,16 +55,20 @@ $euiColorBackgroundBaseSkeletonMiddle: $euiColorShade100Alpha4 !default;
 $euiColorBackgroundLightPrimary: $euiColorPrimary20 !default;
 $euiColorBackgroundLightAccent: $euiColorAccent20 !default;
 $euiColorBackgroundLightAccentSecondary: $euiColorAccentSecondary20 !default;
+$euiColorBackgroundLightNeutral: $euiColorNeutral20 !default;
 $euiColorBackgroundLightSuccess: $euiColorSuccess20 !default;
 $euiColorBackgroundLightWarning: $euiColorWarning20 !default;
+$euiColorBackgroundLightRisk: $euiColorRisk20 !default;
 $euiColorBackgroundLightDanger: $euiColorDanger20 !default;
 $euiColorBackgroundLightText: $euiColorShade20 !default;
 
 $euiColorBackgroundFilledPrimary: $euiColorPrimary90 !default;
 $euiColorBackgroundFilledAccent: $euiColorAccent90 !default;
 $euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary90 !default;
+$euiColorBackgroundFilledNeutral: $euiColorNeutral80 !default;
 $euiColorBackgroundFilledSuccess: $euiColorSuccess90 !default;
 $euiColorBackgroundFilledWarning: $euiColorWarning40 !default;
+$euiColorBackgroundFilledRisk: $euiColorRisk70 !default;
 $euiColorBackgroundFilledDanger: $euiColorDanger90 !default;
 $euiColorBackgroundFilledText: $euiColorShade90 !default;
 
@@ -92,16 +98,20 @@ $euiColorDangerText: $euiColorDanger100 !default;
 $euiColorTextPrimary: $euiColorPrimary100 !default;
 $euiColorTextAccent: $euiColorAccent100 !default;
 $euiColorTextAccentSecondary: $euiColorAccentSecondary100 !default;
+$euiColorTextNeutral: $euiColorNeutral100 !default;
 $euiColorTextSuccess: $euiColorSuccess100 !default;
 $euiColorTextWarning: $euiColorWarning110 !default;
+$euiColorTextRisk: $euiColorRisk100 !default;
 $euiColorTextDanger: $euiColorDanger100 !default;
 
 // Borders
 $euiColorBorderBasePrimary: $euiColorPrimary30 !default;
 $euiColorBorderBaseAccent: $euiColorAccent30 !default;
 $euiColorBorderBaseAccentSecondary: $euiColorAccentSecondary30 !default;
+$euiColorBorderBaseNeutral: $euiColorNeutral30 !default;
 $euiColorBorderBaseSuccess: $euiColorSuccess30 !default;
 $euiColorBorderBaseWarning: $euiColorWarning30 !default;
+$euiColorBorderBaseRisk: $euiColorRisk30 !default;
 $euiColorBorderBaseDanger: $euiColorDanger30 !default;
 
 $euiColorBorderBasePlain: $euiColorShade30 !default;
@@ -115,8 +125,10 @@ $euiColorBorderBaseFormsControl: $euiColorShade60 !default;
 $euiColorBorderStrongPrimary: $euiColorPrimary100 !default;
 $euiColorBorderStrongAccent: $euiColorAccent100 !default;
 $euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary100 !default;
+$euiColorBorderStrongNeutral: $euiColorNeutral100 !default;
 $euiColorBorderStrongSuccess: $euiColorSuccess100 !default;
 $euiColorBorderStrongWarning: $euiColorWarning100 !default;
+$euiColorBorderStrongRisk: $euiColorRisk100 !default;
 $euiColorBorderStrongDanger: $euiColorDanger100 !default;
 
 // Charts

package/src/variables/colors/_colors_severity.scss

@@ -0,0 +1,7 @@
+// Severity
+$euiColorSeverityUnknown: #E3E8F2 !default;
+$euiColorSeverityNeutral: #B5E5F2 !default;
+$euiColorSeveritySuccess: #24C292 !default;
+$euiColorSeverityWarning: #FCD883 !default;
+$euiColorSeverityRisk: #FF995E !default;
+$euiColorSeverityDanger: #EE4C48 !default;

package/src/variables/colors/_semantic_colors.scss

@@ -36,6 +36,7 @@ $euiColorPrimary140: #0A2342 !default;
 
 $euiColorPrimary70Alpha12: rgba($euiColorPrimary70, 0.12) !default;
 $euiColorPrimary70Alpha16: rgba($euiColorPrimary70, 0.16) !default;
+$euiColorPrimary70Alpha20: rgba($euiColorPrimary70, 0.2) !default;
 
 $euiColorPrimary100Alpha4: rgba($euiColorPrimary100, 0.04) !default;
 $euiColorPrimary100Alpha8: rgba($euiColorPrimary100, 0.08) !default;
@@ -58,6 +59,7 @@ $euiColorAccent140: #351725 !default;
 
 $euiColorAccent70Alpha12: rgba($euiColorAccent70, 0.12) !default;
 $euiColorAccent70Alpha16: rgba($euiColorAccent70, 0.16) !default;
+$euiColorAccent70Alpha20: rgba($euiColorAccent70, 0.2) !default;
 
 $euiColorAccentSecondary10: #E2F9F7 !default;
 $euiColorAccentSecondary20: #C9F3F0 !default;
@@ -76,6 +78,22 @@ $euiColorAccentSecondary140: #03282B !default;
 
 $euiColorAccentSecondary70Alpha12: rgba($euiColorAccentSecondary70, 0.12) !default;
 $euiColorAccentSecondary70Alpha16: rgba($euiColorAccentSecondary70, 0.16) !default;
+$euiColorAccentSecondary70Alpha20: rgba($euiColorAccentSecondary70, 0.2) !default;
+
+$euiColorNeutral10: '#E5F6FA' !default;
+$euiColorNeutral20: '#CFEEF7' !default;
+$euiColorNeutral30: '#B5E5F2' !default;
+$euiColorNeutral40: '#94D8EB' !default;
+$euiColorNeutral50: '#63C8E3' !default;
+$euiColorNeutral60: '#37B8DC' !default;
+$euiColorNeutral70: '#0dA1C9' !default;
+$euiColorNeutral80: '#1C8CB5' !default;
+$euiColorNeutral90: '#19799F' !default;
+$euiColorNeutral100: '#0F658A' !default;
+$euiColorNeutral110: '#055476' !default;
+$euiColorNeutral120: '#00425C' !default;
+$euiColorNeutral130: '#003447' !default;
+$euiColorNeutral140: '#002938' !default;
 
 $euiColorSuccess10: #E2F8F0 !default;
 $euiColorSuccess20: #C9F3E3 !default;
@@ -94,6 +112,7 @@ $euiColorSuccess140: #092A26 !default;
 
 $euiColorSuccess70Alpha12: rgba($euiColorSuccess70, 0.12) !default;
 $euiColorSuccess70Alpha16: rgba($euiColorSuccess70, 0.16) !default;
+$euiColorSuccess70Alpha20: rgba($euiColorSuccess70, 0.2) !default;
 
 $euiColorWarning10: #FDF3D8 !default;
 $euiColorWarning20: #FDE9B5 !default;
@@ -110,8 +129,9 @@ $euiColorWarning120: #513910 !default;
 $euiColorWarning130: #3D3014 !default;
 $euiColorWarning140: #2C2721 !default;
 
-$euiColorWarning40Alpha12: rgba($euiColorWarning40, 0.12) !default;
-$euiColorWarning40Alpha24: rgba($euiColorWarning40, 0.24) !default;
+$euiColorWarning60Alpha12: rgba($euiColorWarning60, 0.12) !default;
+$euiColorWarning60Alpha16: rgba($euiColorWarning60, 0.16) !default;
+$euiColorWarning60Alpha20: rgba($euiColorWarning60, 0.2) !default;
 
 $euiColorDanger10: #FFE8E5 !default;
 $euiColorDanger20: #FDDDD8 !default;
@@ -130,6 +150,22 @@ $euiColorDanger140: #351721 !default;
 
 $euiColorDanger70Alpha12: rgba($euiColorDanger70, 0.12) !default;
 $euiColorDanger70Alpha16: rgba($euiColorDanger70, 0.16) !default;
+$euiColorDanger70Alpha20: rgba($euiColorDanger70, 0.2) !default;
+
+$euiColorRisk10: '#FFEDD6' !default;
+$euiColorRisk20: '#FFDEBF' !default;
+$euiColorRisk30: '#FFCDA1' !default;
+$euiColorRisk40: '#FFB787' !default;
+$euiColorRisk50: '#FF995E' !default;
+$euiColorRisk60: '#FC8544' !default;
+$euiColorRisk70: '#ED6723' !default;
+$euiColorRisk80: '#DB541B' !default;
+$euiColorRisk90: '#C24411' !default;
+$euiColorRisk100: '#9E3A16' !default;
+$euiColorRisk110: '#782E18' !default;
+$euiColorRisk120: '#5E281A' !default;
+$euiColorRisk130: '#4A221C' !default;
+$euiColorRisk140: '#361D18' !default;
 
 $euiColorAssistance10: #F3ECFE !default;
 $euiColorAssistance20: #ECE2FE !default;