@elastic/eui-theme-borealis 0.0.1 → 0.0.2

package/lib/eui_theme_borealis_light.json.d.ts

@@ -0,0 +1,317 @@
+declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
+  const sassVariables: {
+    euiZDataGrid: number;
+    euiZHeaderBelowDataGrid: number;
+    euiZDataGridCellPopover: number;
+    euiDataGridCellPaddingS: string;
+    euiDataGridCellPaddingM: string;
+    euiDataGridCellPaddingL: string;
+    euiTableHoverColor: string;
+    euiTableSelectedColor: string;
+    euiTableHoverSelectedColor: string;
+    euiTableActionsBorderColor: string;
+    euiTableHoverClickableColor: string;
+    euiTableFocusClickableColor: string;
+    euiContrastRatioText: number;
+    euiContrastRatioGraphic: number;
+    euiContrastRatioDisabled: number;
+    euiAnimSlightBounce: string;
+    euiAnimSlightResistance: string;
+    euiAnimSpeedExtraFast: string;
+    euiAnimSpeedFast: string;
+    euiAnimSpeedNormal: string;
+    euiAnimSpeedSlow: string;
+    euiAnimSpeedExtraSlow: string;
+    euiBorderWidthThin: string;
+    euiBorderWidthThick: string;
+    euiBorderColor: string;
+    euiBorderRadius: string;
+    euiBorderRadiusSmall: string;
+    euiBorderThick: string;
+    euiBorderThin: string;
+    euiBorderEditable: string;
+    euiButtonHeight: string;
+    euiButtonHeightSmall: string;
+    euiButtonHeightXSmall: string;
+    euiButtonColorDisabled: string;
+    euiButtonColorDisabledText: string;
+    euiButtonColorGhostDisabled: string;
+    euiButtonTypes: {
+      primary: string;
+      accent: string;
+      accentSecondary: string;
+      success: string;
+      warning: string;
+      danger: string;
+      ghost: string;
+      text: string;
+    };
+    euiPaletteColorBlind: {
+      euiColorVis0: {
+        graphic: string;
+        behindText: string;
+      };
+      euiColorVis1: {
+        graphic: string;
+        behindText: string;
+      };
+      euiColorVis2: {
+        graphic: string;
+        behindText: string;
+      };
+      euiColorVis3: {
+        graphic: string;
+        behindText: string;
+      };
+      euiColorVis4: {
+        graphic: string;
+        behindText: string;
+      };
+      euiColorVis5: {
+        graphic: string;
+        behindText: string;
+      };
+      euiColorVis6: {
+        graphic: string;
+        behindText: string;
+      };
+      euiColorVis7: {
+        graphic: string;
+        behindText: string;
+      };
+      euiColorVis8: {
+        graphic: string;
+        behindText: string;
+      };
+      euiColorVis9: {
+        graphic: string;
+        behindText: string;
+      };
+    };
+    euiPaletteColorBlindKeys: string;
+    euiColorVis0: string;
+    euiColorVis1: string;
+    euiColorVis2: string;
+    euiColorVis3: string;
+    euiColorVis4: string;
+    euiColorVis5: string;
+    euiColorVis6: string;
+    euiColorVis7: string;
+    euiColorVis8: string;
+    euiColorVis9: string;
+    euiColorVis0_behindText: string;
+    euiColorVis1_behindText: string;
+    euiColorVis2_behindText: string;
+    euiColorVis3_behindText: string;
+    euiColorVis4_behindText: string;
+    euiColorVis5_behindText: string;
+    euiColorVis6_behindText: string;
+    euiColorVis7_behindText: string;
+    euiColorVis8_behindText: string;
+    euiColorVis9_behindText: string;
+    euiFontWeightLight: number;
+    euiFontWeightRegular: number;
+    euiFontWeightMedium: number;
+    euiFontWeightSemiBold: number;
+    euiFontWeightBold: number;
+    euiCodeFontWeightRegular: number;
+    euiCodeFontWeightBold: number;
+    euiFormMaxWidth: string;
+    euiFormControlHeight: string;
+    euiFormControlCompressedHeight: string;
+    euiFormControlPadding: string;
+    euiFormControlCompressedPadding: string;
+    euiFormControlBorderRadius: string;
+    euiFormControlCompressedBorderRadius: string;
+    euiRadioSize: string;
+    euiCheckBoxSize: string;
+    euiCheckboxBorderRadius: string;
+    euiSwitchHeight: string;
+    euiSwitchWidth: string;
+    euiSwitchThumbSize: string;
+    euiSwitchIconHeight: string;
+    euiSwitchHeightCompressed: string;
+    euiSwitchWidthCompressed: string;
+    euiSwitchThumbSizeCompressed: string;
+    euiSwitchHeightMini: string;
+    euiSwitchWidthMini: string;
+    euiSwitchThumbSizeMini: string;
+    euiFormBackgroundColor: string;
+    euiFormBackgroundDisabledColor: string;
+    euiFormBackgroundReadOnlyColor: string;
+    euiFormBorderOpaqueColor: string;
+    euiFormBorderColor: string;
+    euiFormBorderDisabledColor: string;
+    euiFormCustomControlDisabledIconColor: string;
+    euiFormCustomControlBorderColor: string;
+    euiFormControlDisabledColor: string;
+    euiFormControlBoxShadow: string;
+    euiFormControlPlaceholderText: string;
+    euiFormInputGroupLabelBackground: string;
+    euiFormInputGroupBorder: string;
+    euiSwitchOffColor: string;
+    euiFormControlIconSizes: {
+      small: string;
+      medium: string;
+      large: string;
+      xLarge: string;
+      xxLarge: string;
+    };
+    euiFormControlLayoutGroupInputHeight: string;
+    euiFormControlLayoutGroupInputCompressedHeight: string;
+    euiFormControlLayoutGroupInputCompressedBorderRadius: string;
+    euiHeaderBackgroundColor: string;
+    euiHeaderDarkBackgroundColor: string;
+    euiHeaderBorderColor: string;
+    euiHeaderBreadcrumbColor: string;
+    euiHeaderHeight: string;
+    euiHeaderChildSize: string;
+    euiHeaderHeightCompensation: string;
+    euiPageDefaultMaxWidth: string;
+    euiPageSidebarMinWidth: string;
+    euiPanelPaddingModifiers: {
+      paddingSmall: string;
+      paddingMedium: string;
+      paddingLarge: string;
+    };
+    euiPanelBorderRadiusModifiers: {
+      borderRadiusNone: number;
+      borderRadiusMedium: string;
+    };
+    euiPanelBackgroundColorModifiers: {
+      transparent: string;
+      plain: string;
+      subdued: string;
+      accent: string;
+      accentSecondary: string;
+      primary: string;
+      success: string;
+      warning: string;
+      danger: string;
+    };
+    euiBreakpoints: {
+      xs: number;
+      s: string;
+      m: string;
+      l: string;
+      xl: string;
+    };
+    euiBreakpointKeys: string;
+    euiShadowColor: string;
+    euiSize: string;
+    euiSizeXS: string;
+    euiSizeS: string;
+    euiSizeM: string;
+    euiSizeL: string;
+    euiSizeXL: string;
+    euiSizeXXL: string;
+    euiScrollBar: string;
+    euiScrollBarCorner: string;
+    euiScrollBarCornerThin: string;
+    euiFocusRingColor: string;
+    euiFocusRingAnimStartColor: string;
+    euiFocusRingAnimStartSize: string;
+    euiFocusRingAnimStartSizeLarge: string;
+    euiFocusRingSizeLarge: string;
+    euiFocusRingSize: string;
+    euiFocusTransparency: number;
+    euiFocusTransparencyPercent: string;
+    euiFocusBackgroundColor: string;
+    euiFontFamily: string;
+    euiCodeFontFamily: string;
+    euiFontFeatureSettings: string;
+    euiTextScale: string;
+    euiFontSize: string;
+    euiFontSizeXS: string;
+    euiFontSizeS: string;
+    euiFontSizeM: string;
+    euiFontSizeL: string;
+    euiFontSizeXL: string;
+    euiFontSizeXXL: string;
+    euiLineHeight: number;
+    euiBodyLineHeight: number;
+    euiTitles: {
+      xxxs: {
+        'font-size': string;
+        'line-height': string;
+        'font-weight': number;
+      };
+      xxs: {
+        'font-size': string;
+        'line-height': string;
+        'font-weight': number;
+      };
+      xs: {
+        'font-size': string;
+        'line-height': string;
+        'font-weight': number;
+      };
+      s: {
+        'font-size': string;
+        'line-height': string;
+        'font-weight': number;
+      };
+      m: {
+        'font-size': string;
+        'line-height': string;
+        'font-weight': number;
+      };
+      l: {
+        'font-size': string;
+        'line-height': string;
+        'font-weight': number;
+      };
+    };
+    euiZLevel0: number;
+    euiZLevel1: number;
+    euiZLevel2: number;
+    euiZLevel3: number;
+    euiZLevel4: number;
+    euiZLevel5: number;
+    euiZLevel6: number;
+    euiZLevel7: number;
+    euiZLevel8: number;
+    euiZLevel9: number;
+    euiZToastList: number;
+    euiZModal: number;
+    euiZMask: number;
+    euiZNavigation: number;
+    euiZContentMenu: number;
+    euiZHeader: number;
+    euiZFlyout: number;
+    euiZMaskBelowHeader: number;
+    euiZContent: number;
+    euiColorGhost: string;
+    euiColorInk: string;
+    euiColorPrimary: string;
+    euiColorAccent: string;
+    euiColorAccentSecondary: string;
+    euiColorSuccess: string;
+    euiColorWarning: string;
+    euiColorDanger: string;
+    euiColorEmptyShade: string;
+    euiColorLightestShade: string;
+    euiColorLightShade: string;
+    euiColorMediumShade: string;
+    euiColorDarkShade: string;
+    euiColorDarkestShade: string;
+    euiColorFullShade: string;
+    euiPageBackgroundColor: string;
+    euiColorHighlight: string;
+    euiTextColor: string;
+    euiTitleColor: string;
+    euiTextSubduedColor: string;
+    euiColorDisabled: string;
+    euiColorPrimaryText: string;
+    euiColorSuccessText: string;
+    euiColorAccentText: string;
+    euiColorAccentSecondaryText: string;
+    euiColorWarningText: string;
+    euiColorDangerText: string;
+    euiColorDisabledText: string;
+    euiLinkColor: string;
+    euiColorChartLines: string;
+    euiColorChartBand: string;
+  };
+  export default sassVariables;
+}

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@elastic/eui-theme-borealis",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A visual theme for EUI",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
     "build:workspaces": "yarn workspaces foreach -Rti --from @elastic/eui-theme-borealis --exclude @elastic/eui-theme-borealis run build",
-    "build": "tsc",
+    "build:clean": "rimraf lib/",
+    "build": "yarn build:clean && yarn build:compile && yarn build:compile:cjs && yarn build:types && yarn copy-files",
+    "build:compile": "tsc --project ./tsconfig.json",
+    "build:compile:cjs": "NODE_ENV=production NO_COREJS_POLYFILL=true babel src --out-dir=lib/cjs --extensions .js,.ts,.tsx --source-maps=true",
+    "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-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings",
@@ -19,7 +24,12 @@
     "directory": "packages/eui-theme-borealis"
   },
   "devDependencies": {
-    "@elastic/eui-theme-common": "0.0.1",
+    "@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.2",
     "@types/jest": "^29.5.12",
     "@types/prettier": "2.7.3",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
@@ -32,6 +42,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^29.7.0",
     "prettier": "^2.8.8",
+    "rimraf": "^6.0.1",
     "stylelint": "^15.7.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard": "^33.0.0",
@@ -39,20 +50,23 @@
     "typescript": "^5.6.2"
   },
   "peerDependencies": {
-    "@elastic/eui-theme-common": "0.0.1"
+    "@elastic/eui-theme-common": "0.0.2"
   },
-  "main": "lib/index.js",
+  "main": "lib/cjs/index.js",
   "exports": {
     "./lib/*": "./lib/*",
     ".": {
-      "default": "./lib/index.js"
+      "require": "./lib/cjs/index.js",
+      "import": "./lib/esm/index.js",
+      "default": "./lib/cjs/index.js"
     }
   },
   "files": [
-    "lib",
-    "licenses",
+    "lib/",
     "src/**/*.scss",
-    "README.md"
+    "README.md",
+    "licenses",
+    "!lib/**/*.tsbuildinfo"
   ],
   "installConfig": {
     "hoistingLimits": "workspaces"

package/src/variables/_index.scss

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

package/src/variables/_typography.scss

@@ -3,7 +3,7 @@ $euiFontFamily: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetic
 
 // Font sizes -- scale is loosely based on Minor Third (1.200) with a base of 14px
 // Base list is an altered scale based on 16px to match the resulted values below
-$euiTextScale:    2.125, 1.6875, 1.375, 1.125, 1, .875, .75 !default;
+$euiTextScale:    1,875, 1.5, 1.25, 1, .875, .75 !default;
 
 $euiFontSize:     $euiSize - 2; // 14px
 

package/src/variables/colors/_colors_dark.scss

@@ -43,7 +43,7 @@ $euiColorBackgroundBaseFormsPrepend: $euiColorShade125 !default;
 $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade120 !default;
 
 $euiColorBackgroundBaseInteractiveHover: $euiColorTransparentWhite10 !default;
-$euiColorBackgroundBaseInteractiveSelect: $euiColorShade130 !default;
+$euiColorBackgroundBaseInteractiveSelect: $euiColorShade125 !default;
 $euiColorBackgroundBaseInteractiveOverlay: $euiColorShadeTransparent80 !default;
 $euiColorBackgroundBaseSkeletonEdge: $euiColorTransparentWhite10 !default;
 $euiColorBackgroundBaseSkeletonMiddle: $euiColorTransparentWhite30 !default;
@@ -67,16 +67,16 @@ $euiColorBackgroundFilledText: $euiColorShade60 !default;
 // Texts (legacy)
 $euiTextColor: $euiColorShade20 !default;
 $euiTitleColor: $euiColorShade15 !default;
-$euiTextSubduedColor: $euiColorShade40 !default;
+$euiTextSubduedColor: $euiColorShade60 !default;
 $euiColorDisabled: $euiColorBackgroundBaseDisabled !default;
-$euiColorDisabledText: $euiColorShade60 !default;
+$euiColorDisabledText: $euiColorShade80 !default;
 $euiLinkColor: $euiColorPrimary60 !default;
 
 // Texts
 $euiColorTextParagraph: $euiColorShade20 !default;
 $euiColorTextHeading: $euiColorShade15 !default;
-$euiColorTextSubdued: $euiColorShade40 !default;
-$euiColorTextDisabled: $euiColorShade60 !default;
+$euiColorTextSubdued: $euiColorShade60 !default;
+$euiColorTextDisabled: $euiColorShade80 !default;
 $euiColorTextInverse: $euiColorPlainDark !default;
 
 // Brand texts (legacy)
@@ -102,9 +102,9 @@ $euiColorBorderBaseSuccess: $euiColorSuccess120;
 $euiColorBorderBaseWarning: $euiColorWarning120;
 $euiColorBorderBaseDanger: $euiColorDanger120;
 
-$euiColorBorderBasePlain: $euiColorShade110;
+$euiColorBorderBasePlain: $euiColorShade100;
 $euiColorBorderBaseSubdued: $euiColorShade120;
-$euiColorBorderBaseDisabled: $euiColorShade120;
+$euiColorBorderBaseDisabled: $euiColorShade100;
 $euiColorBorderBaseFloating: $euiColorShade120;
 $euiColorBorderBaseFormsColorSwatch: $euiColorTransparentWhite30;
 $euiColorBorderBaseFormsControl: $euiColorShade80;

package/src/variables/colors/_colors_light.scss

@@ -20,7 +20,7 @@ $euiColorDanger: $euiColorDanger90 !default;
 
 // Shades
 $euiColorEmptyShade: $euiColorPlainLight !default;
-$euiColorLightestShade: $euiColorShade20 !default;
+$euiColorLightestShade: $euiColorShade15 !default;
 $euiColorLightShade: $euiColorShade30 !default;
 $euiColorMediumShade: $euiColorShade60 !default;
 $euiColorDarkShade: $euiColorShade90 !default;

package/src/variables/colors/_colors_vis.scss

@@ -0,0 +1,72 @@
+// Visualization colors
+// stylelint-disable color-no-hex
+
+// Maps allow for easier JSON usage
+// Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file
+// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function
+$euiPaletteColorBlind: (
+  euiColorVis0: (
+    graphic: #00BEB8,
+    behindText: #00BEB8,
+  ),
+  euiColorVis1: (
+    graphic: #93E5E0,
+    behindText: #93E5E0,
+  ),
+  euiColorVis2: (
+    graphic: #599DFF,
+    behindText: #599DFF,
+  ),
+  euiColorVis3: (
+    graphic: #B4D5FF,
+    behindText: #B4D5FF,
+  ),
+  euiColorVis4: (
+    graphic: #ED6BA2,
+    behindText: #ED6BA2,
+  ),
+  euiColorVis5: (
+    graphic: #FFBED5,
+    behindText: #FFBED5,
+  ),
+  euiColorVis6: (
+    graphic: #F66D64,
+    behindText: #F66D64,
+  ),
+  euiColorVis7: (
+    graphic: #FFC0B8,
+    behindText: #FFC0B8,
+  ),
+  euiColorVis8: (
+    graphic: #ED9E00,
+    behindText: #ED9E00,
+  ),
+  euiColorVis9: (
+    graphic: #FFD569,
+    behindText: #FFD569,
+  )
+) !default;
+
+$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind);
+
+$euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default;
+$euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default;
+$euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default;
+$euiColorVis3: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'graphic') !default;
+$euiColorVis4: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'graphic') !default;
+$euiColorVis5: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'graphic') !default;
+$euiColorVis6: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'graphic') !default;
+$euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic') !default;
+$euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default;
+$euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default;
+
+$euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default;
+$euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default;
+$euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default;
+$euiColorVis3_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'behindText') !default;
+$euiColorVis4_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'behindText') !default;
+$euiColorVis5_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'behindText') !default;
+$euiColorVis6_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'behindText') !default;
+$euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'behindText') !default;
+$euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default;
+$euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default;