@elastic/eui-theme-borealis 0.1.0 → 0.2.0

package/lib/esm/variables/_forms.js

@@ -6,46 +6,27 @@
  * Side Public License, v 1.
  */
 import { computed, mathWithUnits } from '@elastic/eui-theme-common';
-import { dark_background_colors, dark_border_colors, dark_text_colors, } from './colors/_colors_dark';
-import { background_colors, border_colors, text_colors, } from './colors/_colors_light';
 const _forms = {
-    background: background_colors.backgroundBasePlain,
-    backgroundDisabled: background_colors.backgroundBaseDisabled,
-    backgroundReadOnly: background_colors.backgroundBasePlain,
-    backgroundFocused: background_colors.backgroundBasePlain,
-    backgroundAutofilled: background_colors.backgroundBasePrimary,
-    prependBackground: background_colors.backgroundBaseFormsPrepend,
-    border: border_colors.borderBasePlain,
-    borderDisabled: border_colors.borderBaseDisabled,
-    borderAutofilled: border_colors.borderBasePrimary,
-    controlBorder: border_colors.borderBaseFormsControl,
-    controlBorderSelected: border_colors.borderStrongPrimary,
-    controlBorderDisabled: border_colors.borderBaseDisabled,
+    background: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+    backgroundDisabled: computed(([backgroundBaseDisabled]) => backgroundBaseDisabled, ['colors.backgroundBaseDisabled']),
+    backgroundReadOnly: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+    backgroundFocused: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+    backgroundAutofilled: computed(([backgroundBasePrimary]) => backgroundBasePrimary, ['colors.backgroundBasePrimary']),
+    prependBackground: computed(([backgroundBaseFormsPrepend]) => backgroundBaseFormsPrepend, ['colors.backgroundBaseFormsPrepend']),
+    border: computed(([borderBasePlain]) => borderBasePlain, ['colors.borderBasePlain']),
+    borderDisabled: computed(([borderBaseDisabled]) => borderBaseDisabled, ['colors.borderBaseDisabled']),
+    borderAutofilled: computed(([borderBasePrimary]) => borderBasePrimary, ['colors.borderBasePrimary']),
+    controlBorder: computed(([borderBaseFormsControl]) => borderBaseFormsControl, ['colors.borderBaseFormsControl']),
+    controlBorderSelected: computed(([borderStrongPrimary]) => borderStrongPrimary, ['colors.borderStrongPrimary']),
+    controlBorderDisabled: computed(([borderBaseDisabled]) => borderBaseDisabled, ['colors.borderBaseDisabled']),
     controlBackgroundUnselected: 'transparent',
-    controlBackgroundDisabled: background_colors.backgroundBaseFormsControlDisabled,
-    colorHasPlaceholder: text_colors.textSubdued,
-    colorDisabled: text_colors.textDisabled,
-    iconDisabled: text_colors.textDisabled,
+    controlBackgroundDisabled: computed(([backgroundBaseFormsControlDisabled]) => backgroundBaseFormsControlDisabled, ['colors.backgroundBaseFormsControlDisabled']),
+    colorHasPlaceholder: computed(([textSubdued]) => textSubdued, ['colors.textSubdued']),
+    colorDisabled: computed(([textDisabled]) => textDisabled, ['colors.textDisabled']),
+    iconDisabled: computed(([textDisabled]) => textDisabled, ['colors.textDisabled']),
 };
 const _dark_forms = {
     ..._forms,
-    background: dark_background_colors.backgroundBasePlain,
-    backgroundDisabled: dark_background_colors.backgroundBaseDisabled,
-    backgroundReadOnly: dark_background_colors.backgroundBasePlain,
-    backgroundFocused: dark_background_colors.backgroundBasePlain,
-    backgroundAutofilled: dark_background_colors.backgroundBasePrimary,
-    prependBackground: dark_background_colors.backgroundBaseFormsPrepend,
-    border: dark_border_colors.borderBasePlain,
-    borderDisabled: dark_border_colors.borderBaseDisabled,
-    borderAutofilled: dark_border_colors.borderBasePrimary,
-    controlBorder: dark_border_colors.borderBaseFormsControl,
-    controlBorderSelected: dark_border_colors.borderStrongPrimary,
-    controlBorderDisabled: dark_border_colors.borderBaseDisabled,
-    controlBackgroundUnselected: 'transparent',
-    controlBackgroundDisabled: dark_background_colors.backgroundBaseFormsControlDisabled,
-    colorHasPlaceholder: dark_text_colors.textSubdued,
-    colorDisabled: dark_text_colors.textDisabled,
-    iconDisabled: dark_text_colors.textDisabled,
 };
 export const forms = {
     maxWidth: computed(([base]) => mathWithUnits(base, (x) => x * 25), ['size.base']),

package/lib/esm/variables/_forms.js.map

@@ -1 +1 @@
-{"version":3,"file":"_forms.js","sourceRoot":"","sources":["../../../src/variables/_forms.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,WAAW,GACZ,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,GAAG;IACb,UAAU,EAAE,iBAAiB,CAAC,mBAAmB;IACjD,kBAAkB,EAAE,iBAAiB,CAAC,sBAAsB;IAC5D,kBAAkB,EAAE,iBAAiB,CAAC,mBAAmB;IACzD,iBAAiB,EAAE,iBAAiB,CAAC,mBAAmB;IACxD,oBAAoB,EAAE,iBAAiB,CAAC,qBAAqB;IAC7D,iBAAiB,EAAE,iBAAiB,CAAC,0BAA0B;IAC/D,MAAM,EAAE,aAAa,CAAC,eAAe;IACrC,cAAc,EAAE,aAAa,CAAC,kBAAkB;IAChD,gBAAgB,EAAE,aAAa,CAAC,iBAAiB;IACjD,aAAa,EAAE,aAAa,CAAC,sBAAsB;IACnD,qBAAqB,EAAE,aAAa,CAAC,mBAAmB;IACxD,qBAAqB,EAAE,aAAa,CAAC,kBAAkB;IACvD,2BAA2B,EAAE,aAAa;IAC1C,yBAAyB,EACvB,iBAAiB,CAAC,kCAAkC;IACtD,mBAAmB,EAAE,WAAW,CAAC,WAAW;IAC5C,aAAa,EAAE,WAAW,CAAC,YAAY;IACvC,YAAY,EAAE,WAAW,CAAC,YAAY;CACvC,CAAC;AAEF,MAAM,WAAW,GAAG;IAClB,GAAG,MAAM;IACT,UAAU,EAAE,sBAAsB,CAAC,mBAAmB;IACtD,kBAAkB,EAAE,sBAAsB,CAAC,sBAAsB;IACjE,kBAAkB,EAAE,sBAAsB,CAAC,mBAAmB;IAC9D,iBAAiB,EAAE,sBAAsB,CAAC,mBAAmB;IAC7D,oBAAoB,EAAE,sBAAsB,CAAC,qBAAqB;IAClE,iBAAiB,EAAE,sBAAsB,CAAC,0BAA0B;IACpE,MAAM,EAAE,kBAAkB,CAAC,eAAe;IAC1C,cAAc,EAAE,kBAAkB,CAAC,kBAAkB;IACrD,gBAAgB,EAAE,kBAAkB,CAAC,iBAAiB;IACtD,aAAa,EAAE,kBAAkB,CAAC,sBAAsB;IACxD,qBAAqB,EAAE,kBAAkB,CAAC,mBAAmB;IAC7D,qBAAqB,EAAE,kBAAkB,CAAC,kBAAkB;IAC5D,2BAA2B,EAAE,aAAa;IAC1C,yBAAyB,EACvB,sBAAsB,CAAC,kCAAkC;IAC3D,mBAAmB,EAAE,gBAAgB,CAAC,WAAW;IACjD,aAAa,EAAE,gBAAgB,CAAC,YAAY;IAC5C,YAAY,EAAE,gBAAgB,CAAC,YAAY;CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,QAAQ,EAAE,QAAQ,CAChB,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAC9C,CAAC,WAAW,CAAC,CACd;IACD,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,WAAW;CAClB,CAAC"}
+{"version":3,"file":"_forms.js","sourceRoot":"","sources":["../../../src/variables/_forms.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAEpE,MAAM,MAAM,GAAG;IACb,UAAU,EAAE,QAAQ,CAClB,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAC,mBAAmB,EAC9C,CAAC,4BAA4B,CAAC,CAC/B;IACD,kBAAkB,EAAE,QAAQ,CAC1B,CAAC,CAAC,sBAAsB,CAAC,EAAE,EAAE,CAAC,sBAAsB,EACpD,CAAC,+BAA+B,CAAC,CAClC;IACD,kBAAkB,EAAE,QAAQ,CAC1B,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAC,mBAAmB,EAC9C,CAAC,4BAA4B,CAAC,CAC/B;IACD,iBAAiB,EAAE,QAAQ,CACzB,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAC,mBAAmB,EAC9C,CAAC,4BAA4B,CAAC,CAC/B;IACD,oBAAoB,EAAE,QAAQ,CAC5B,CAAC,CAAC,qBAAqB,CAAC,EAAE,EAAE,CAAC,qBAAqB,EAClD,CAAC,8BAA8B,CAAC,CACjC;IACD,iBAAiB,EAAE,QAAQ,CACzB,CAAC,CAAC,0BAA0B,CAAC,EAAE,EAAE,CAAC,0BAA0B,EAC5D,CAAC,mCAAmC,CAAC,CACtC;IACD,MAAM,EAAE,QAAQ,CACd,CAAC,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,eAAe,EACtC,CAAC,wBAAwB,CAAC,CAC3B;IACD,cAAc,EAAE,QAAQ,CACtB,CAAC,CAAC,kBAAkB,CAAC,EAAE,EAAE,CAAC,kBAAkB,EAC5C,CAAC,2BAA2B,CAAC,CAC9B;IACD,gBAAgB,EAAE,QAAQ,CACxB,CAAC,CAAC,iBAAiB,CAAC,EAAE,EAAE,CAAC,iBAAiB,EAC1C,CAAC,0BAA0B,CAAC,CAC7B;IACD,aAAa,EAAE,QAAQ,CACrB,CAAC,CAAC,sBAAsB,CAAC,EAAE,EAAE,CAAC,sBAAsB,EACpD,CAAC,+BAA+B,CAAC,CAClC;IACD,qBAAqB,EAAE,QAAQ,CAC7B,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAC,mBAAmB,EAC9C,CAAC,4BAA4B,CAAC,CAC/B;IACD,qBAAqB,EAAE,QAAQ,CAC7B,CAAC,CAAC,kBAAkB,CAAC,EAAE,EAAE,CAAC,kBAAkB,EAC5C,CAAC,2BAA2B,CAAC,CAC9B;IACD,2BAA2B,EAAE,aAAa;IAC1C,yBAAyB,EAAE,QAAQ,CACjC,CAAC,CAAC,kCAAkC,CAAC,EAAE,EAAE,CACvC,kCAAkC,EACpC,CAAC,2CAA2C,CAAC,CAC9C;IACD,mBAAmB,EAAE,QAAQ,CAC3B,CAAC,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC,WAAW,EAC9B,CAAC,oBAAoB,CAAC,CACvB;IACD,aAAa,EAAE,QAAQ,CACrB,CAAC,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,YAAY,EAChC,CAAC,qBAAqB,CAAC,CACxB;IACD,YAAY,EAAE,QAAQ,CACpB,CAAC,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,YAAY,EAChC,CAAC,qBAAqB,CAAC,CACxB;CACF,CAAC;AAEF,MAAM,WAAW,GAAG;IAClB,GAAG,MAAM;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,QAAQ,EAAE,QAAQ,CAChB,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAC9C,CAAC,WAAW,CAAC,CACd;IACD,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,WAAW;CAClB,CAAC"}

package/lib/esm/variables/_overrides.d.ts

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

package/lib/esm/variables/_overrides.js

@@ -0,0 +1,17 @@
+/*
+ * 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 { PRIMITIVE_COLORS } from './colors/_primitive_colors';
+export const overrides = {
+    HCM: {
+        colors: {
+            ink: PRIMITIVE_COLORS.black,
+            ghost: PRIMITIVE_COLORS.white,
+        },
+    },
+};
+//# sourceMappingURL=_overrides.js.map

package/lib/esm/variables/_overrides.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_overrides.js","sourceRoot":"","sources":["../../../src/variables/_overrides.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,CAAC,MAAM,SAAS,GAAuB;IAC3C,GAAG,EAAE;QACH,MAAM,EAAE;YACN,GAAG,EAAE,gBAAgB,CAAC,KAAK;YAC3B,KAAK,EAAE,gBAAgB,CAAC,KAAK;SAC9B;KACF;CACF,CAAC"}

package/lib/eui_theme_borealis_dark.json

@@ -24,7 +24,7 @@
   "euiBorderWidthThin": "1px",
   "euiBorderWidthThick": "2px",
   "euiBorderColor": "#2B394F",
-  "euiBorderRadius": "6px",
+  "euiBorderRadius": "4px",
   "euiBorderRadiusSmall": "4px",
   "euiBorderThick": "2px solid #2B394F",
   "euiBorderThin": "1px solid #2B394F",
@@ -57,7 +57,7 @@
   "euiFormControlCompressedHeight": "32px",
   "euiFormControlPadding": "12px",
   "euiFormControlCompressedPadding": "8px",
-  "euiFormControlBorderRadius": "6px",
+  "euiFormControlBorderRadius": "4px",
   "euiFormControlCompressedBorderRadius": "4px",
   "euiRadioSize": "16px",
   "euiCheckBoxSize": "16px",
@@ -112,7 +112,7 @@
   },
   "euiPanelBorderRadiusModifiers": {
     "borderRadiusNone": 0,
-    "borderRadiusMedium": "6px"
+    "borderRadiusMedium": "4px"
   },
   "euiPanelBackgroundColorModifiers": {
     "transparent": "rgba(0, 0, 0, 0)",

package/lib/eui_theme_borealis_light.json

@@ -24,7 +24,7 @@
   "euiBorderWidthThin": "1px",
   "euiBorderWidthThick": "2px",
   "euiBorderColor": "#E3E8F2",
-  "euiBorderRadius": "6px",
+  "euiBorderRadius": "4px",
   "euiBorderRadiusSmall": "4px",
   "euiBorderThick": "2px solid #E3E8F2",
   "euiBorderThin": "1px solid #E3E8F2",
@@ -57,7 +57,7 @@
   "euiFormControlCompressedHeight": "32px",
   "euiFormControlPadding": "12px",
   "euiFormControlCompressedPadding": "8px",
-  "euiFormControlBorderRadius": "6px",
+  "euiFormControlBorderRadius": "4px",
   "euiFormControlCompressedBorderRadius": "4px",
   "euiRadioSize": "16px",
   "euiCheckBoxSize": "16px",
@@ -112,7 +112,7 @@
   },
   "euiPanelBorderRadiusModifiers": {
     "borderRadiusNone": 0,
-    "borderRadiusMedium": "6px"
+    "borderRadiusMedium": "4px"
   },
   "euiPanelBackgroundColorModifiers": {
     "transparent": "rgba(0, 0, 0, 0)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-theme-borealis",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A visual theme for EUI",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -32,7 +32,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": "0.2.0",
     "@types/chroma-js": "^2.4.0",
     "@types/jest": "^29.5.12",
     "@types/prettier": "2.7.3",

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/_index.scss

@@ -1,4 +1,11 @@
 // 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';