@elastic/eui-theme-borealis 8.0.0 → 8.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/lib/cjs/variables/_borders.js +5 -1
  2. package/lib/cjs/variables/_overrides.js +6 -1
  3. package/lib/cjs/variables/_typography.js +2 -1
  4. package/lib/cjs/variables/colors/_colors_dark.js +6 -5
  5. package/lib/cjs/variables/colors/_colors_light.js +4 -3
  6. package/lib/esm/variables/_borders.js +4 -0
  7. package/lib/esm/variables/_overrides.js +5 -0
  8. package/lib/esm/variables/_typography.js +1 -0
  9. package/lib/esm/variables/colors/_colors_dark.js +6 -5
  10. package/lib/esm/variables/colors/_colors_light.js +4 -3
  11. package/lib/eui_theme_borealis_dark.json +31 -20
  12. package/lib/eui_theme_borealis_dark.json.d.ts +11 -0
  13. package/lib/eui_theme_borealis_light.json +25 -14
  14. package/lib/eui_theme_borealis_light.json.d.ts +11 -0
  15. package/package.json +3 -3
  16. package/src/variables/_borders.scss +4 -0
  17. package/src/variables/_typography.scss +6 -0
  18. package/src/variables/colors/_colors_dark.scss +7 -6
  19. package/src/variables/colors/_colors_light.scss +4 -3
package/lib/cjs/variables/_borders.js CHANGED
@@ -29,7 +29,11 @@ var border = exports.border = {
29
29
  },
30
30
  radius: {
31
31
  medium: (0, _euiThemeCommon.computed)((0, _euiThemeCommon.sizeToPixel)(0.25)),
32
- small: (0, _euiThemeCommon.computed)((0, _euiThemeCommon.sizeToPixel)(0.25))
32
+ small: (0, _euiThemeCommon.computed)((0, _euiThemeCommon.sizeToPixel)(0.25)),
33
+ inline: (0, _euiThemeCommon.computed)((0, _euiThemeCommon.sizeToPixel)(0.25)),
34
+ control: (0, _euiThemeCommon.computed)((0, _euiThemeCommon.sizeToPixel)(0.5)),
35
+ panel: (0, _euiThemeCommon.computed)((0, _euiThemeCommon.sizeToPixel)(0.75)),
36
+ frame: (0, _euiThemeCommon.computed)((0, _euiThemeCommon.sizeToPixel)(1))
33
37
  },
34
38
  thin: (0, _euiThemeCommon.computed)(function (_ref3) {
35
39
  var _ref4 = _slicedToArray(_ref3, 2),
package/lib/cjs/variables/_overrides.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.overrides = void 0;
7
7
  var _primitive_colors = require("./colors/_primitive_colors");
8
+ var _semantic_colors = require("./colors/_semantic_colors");
8
9
  var _colors_vis_hcm = require("./colors/_colors_vis_hcm");
9
10
  var _colors_severity_hcm = require("./colors/_colors_severity_hcm");
10
11
  /*
@@ -22,11 +23,15 @@ var overrides = exports.overrides = {
22
23
  plainLight: _primitive_colors.PRIMITIVE_COLORS.white,
23
24
  DARK: {
24
25
  textInk: _primitive_colors.PRIMITIVE_COLORS.black,
25
- textGhost: _primitive_colors.PRIMITIVE_COLORS.white
26
+ textGhost: _primitive_colors.PRIMITIVE_COLORS.white,
27
+ text: _semantic_colors.SEMANTIC_COLORS.shade30,
28
+ textParagraph: _semantic_colors.SEMANTIC_COLORS.shade30
26
29
  },
27
30
  LIGHT: {
28
31
  textInk: _primitive_colors.PRIMITIVE_COLORS.black,
29
32
  textGhost: _primitive_colors.PRIMITIVE_COLORS.white,
33
+ text: _semantic_colors.SEMANTIC_COLORS.shade130,
34
+ textParagraph: _semantic_colors.SEMANTIC_COLORS.shade130,
30
35
  vis: _colors_vis_hcm.visColorsLightHighContrast,
31
36
  severity: _colors_severity_hcm.severityColorsLightHighContrast
32
37
  }
package/lib/cjs/variables/_typography.js CHANGED
@@ -72,6 +72,7 @@ var font = exports.font = _objectSpread(_objectSpread({}, fontBase), {}, {
72
72
  weight: 'regular'
73
73
  },
74
74
  title: {
75
- weight: 'bold'
75
+ weight: 'bold',
76
+ letterSpacing: '-0.2px'
76
77
  }
77
78
  });
package/lib/cjs/variables/colors/_colors_dark.js CHANGED
@@ -50,12 +50,12 @@ var dark_brand_text_colors = exports.dark_brand_text_colors = {
50
50
  };
51
51
  var dark_text_colors = exports.dark_text_colors = {
52
52
  /* Legacy colors */
53
- text: _semantic_colors.SEMANTIC_COLORS.shade30,
53
+ text: _semantic_colors.SEMANTIC_COLORS.shade40,
54
54
  title: _semantic_colors.SEMANTIC_COLORS.shade20,
55
55
  subduedText: _semantic_colors.SEMANTIC_COLORS.shade55,
56
56
  link: _semantic_colors.SEMANTIC_COLORS.primary60,
57
57
  /* New colors */
58
- textParagraph: _semantic_colors.SEMANTIC_COLORS.shade30,
58
+ textParagraph: _semantic_colors.SEMANTIC_COLORS.shade40,
59
59
  textHeading: _semantic_colors.SEMANTIC_COLORS.shade20,
60
60
  textSubdued: _semantic_colors.SEMANTIC_COLORS.shade55,
61
61
  textDisabled: _semantic_colors.SEMANTIC_COLORS.shade80,
@@ -64,7 +64,7 @@ var dark_text_colors = exports.dark_text_colors = {
64
64
  textGhost: _semantic_colors.SEMANTIC_COLORS.plainLight
65
65
  };
66
66
  var dark_shades = exports.dark_shades = {
67
- emptyShade: _semantic_colors.SEMANTIC_COLORS.shade145,
67
+ emptyShade: _semantic_colors.SEMANTIC_COLORS.shade140,
68
68
  lightestShade: _semantic_colors.SEMANTIC_COLORS.shade135,
69
69
  lightShade: _semantic_colors.SEMANTIC_COLORS.shade125,
70
70
  mediumShade: _semantic_colors.SEMANTIC_COLORS.shade95,
@@ -82,8 +82,9 @@ var dark_background_colors = exports.dark_background_colors = {
82
82
  backgroundBaseRisk: _semantic_colors.SEMANTIC_COLORS.risk140,
83
83
  backgroundBaseDanger: _semantic_colors.SEMANTIC_COLORS.danger140,
84
84
  backgroundBaseAssistance: _semantic_colors.SEMANTIC_COLORS.assistance140,
85
- backgroundBaseSubdued: _semantic_colors.SEMANTIC_COLORS.plainDark,
86
- backgroundBasePlain: _semantic_colors.SEMANTIC_COLORS.shade145,
85
+ backgroundBaseRecessed: _semantic_colors.SEMANTIC_COLORS.plainDark,
86
+ backgroundBaseSubdued: _semantic_colors.SEMANTIC_COLORS.shade145,
87
+ backgroundBasePlain: _semantic_colors.SEMANTIC_COLORS.shade140,
87
88
  backgroundBaseDisabled: _semantic_colors.SEMANTIC_COLORS.shade130,
88
89
  backgroundBaseHighlighted: _semantic_colors.SEMANTIC_COLORS.shade135,
89
90
  backgroundBaseFormsPrepend: _semantic_colors.SEMANTIC_COLORS.shade125,
package/lib/cjs/variables/colors/_colors_light.js CHANGED
@@ -50,12 +50,12 @@ var brand_text_colors = exports.brand_text_colors = {
50
50
  };
51
51
  var text_colors = exports.text_colors = {
52
52
  /* Legacy colors */
53
- text: _semantic_colors.SEMANTIC_COLORS.shade130,
53
+ text: _semantic_colors.SEMANTIC_COLORS.shade110,
54
54
  title: _semantic_colors.SEMANTIC_COLORS.shade140,
55
55
  subduedText: _semantic_colors.SEMANTIC_COLORS.shade95,
56
56
  link: _semantic_colors.SEMANTIC_COLORS.primary100,
57
57
  /* New colors */
58
- textParagraph: _semantic_colors.SEMANTIC_COLORS.shade130,
58
+ textParagraph: _semantic_colors.SEMANTIC_COLORS.shade110,
59
59
  textHeading: _semantic_colors.SEMANTIC_COLORS.shade140,
60
60
  textSubdued: _semantic_colors.SEMANTIC_COLORS.shade95,
61
61
  textDisabled: _semantic_colors.SEMANTIC_COLORS.shade70,
@@ -82,6 +82,7 @@ var background_colors = exports.background_colors = {
82
82
  backgroundBaseRisk: _semantic_colors.SEMANTIC_COLORS.risk10,
83
83
  backgroundBaseDanger: _semantic_colors.SEMANTIC_COLORS.danger10,
84
84
  backgroundBaseAssistance: _semantic_colors.SEMANTIC_COLORS.assistance10,
85
+ backgroundBaseRecessed: _semantic_colors.SEMANTIC_COLORS.shade10,
85
86
  backgroundBaseSubdued: _semantic_colors.SEMANTIC_COLORS.shade10,
86
87
  backgroundBasePlain: _semantic_colors.SEMANTIC_COLORS.plainLight,
87
88
  backgroundBaseDisabled: _semantic_colors.SEMANTIC_COLORS.shade15,
@@ -167,7 +168,7 @@ var border_colors = exports.border_colors = {
167
168
  borderStrongText: _semantic_colors.SEMANTIC_COLORS.shade90
168
169
  };
169
170
  var special_colors = exports.special_colors = {
170
- body: _semantic_colors.SEMANTIC_COLORS.shade10,
171
+ body: _semantic_colors.SEMANTIC_COLORS.shade15,
171
172
  highlight: _semantic_colors.SEMANTIC_COLORS.primary10,
172
173
  disabled: _semantic_colors.SEMANTIC_COLORS.shade20,
173
174
  disabledText: _semantic_colors.SEMANTIC_COLORS.shade80,
package/lib/esm/variables/_borders.js CHANGED
@@ -15,6 +15,10 @@ export const border = {
15
15
  radius: {
16
16
  medium: computed(sizeToPixel(0.25)),
17
17
  small: computed(sizeToPixel(0.25)),
18
+ inline: computed(sizeToPixel(0.25)),
19
+ control: computed(sizeToPixel(0.5)),
20
+ panel: computed(sizeToPixel(0.75)),
21
+ frame: computed(sizeToPixel(1)),
18
22
  },
19
23
  thin: computed(([width, color]) => `${width.thin} solid ${color}`, ['border.width', 'border.color']),
20
24
  thick: computed(([width, color]) => `${width.thick} solid ${color}`, ['border.width', 'border.color']),
package/lib/esm/variables/_overrides.js CHANGED
@@ -6,6 +6,7 @@
6
6
  * Side Public License, v 1.
7
7
  */
8
8
  import { PRIMITIVE_COLORS } from './colors/_primitive_colors';
9
+ import { SEMANTIC_COLORS } from './colors/_semantic_colors';
9
10
  import { visColorsLightHighContrast } from './colors/_colors_vis_hcm';
10
11
  import { severityColorsLightHighContrast } from './colors/_colors_severity_hcm';
11
12
  export const overrides = {
@@ -16,10 +17,14 @@ export const overrides = {
16
17
  DARK: {
17
18
  textInk: PRIMITIVE_COLORS.black,
18
19
  textGhost: PRIMITIVE_COLORS.white,
20
+ text: SEMANTIC_COLORS.shade30,
21
+ textParagraph: SEMANTIC_COLORS.shade30,
19
22
  },
20
23
  LIGHT: {
21
24
  textInk: PRIMITIVE_COLORS.black,
22
25
  textGhost: PRIMITIVE_COLORS.white,
26
+ text: SEMANTIC_COLORS.shade130,
27
+ textParagraph: SEMANTIC_COLORS.shade130,
23
28
  vis: visColorsLightHighContrast,
24
29
  severity: severityColorsLightHighContrast,
25
30
  },
package/lib/esm/variables/_typography.js CHANGED
@@ -45,5 +45,6 @@ export const font = {
45
45
  },
46
46
  title: {
47
47
  weight: 'bold',
48
+ letterSpacing: '-0.2px',
48
49
  },
49
50
  };
package/lib/esm/variables/colors/_colors_dark.js CHANGED
@@ -38,12 +38,12 @@ export const dark_brand_text_colors = {
38
38
  };
39
39
  export const dark_text_colors = {
40
40
  /* Legacy colors */
41
- text: SEMANTIC_COLORS.shade30,
41
+ text: SEMANTIC_COLORS.shade40,
42
42
  title: SEMANTIC_COLORS.shade20,
43
43
  subduedText: SEMANTIC_COLORS.shade55,
44
44
  link: SEMANTIC_COLORS.primary60,
45
45
  /* New colors */
46
- textParagraph: SEMANTIC_COLORS.shade30,
46
+ textParagraph: SEMANTIC_COLORS.shade40,
47
47
  textHeading: SEMANTIC_COLORS.shade20,
48
48
  textSubdued: SEMANTIC_COLORS.shade55,
49
49
  textDisabled: SEMANTIC_COLORS.shade80,
@@ -52,7 +52,7 @@ export const dark_text_colors = {
52
52
  textGhost: SEMANTIC_COLORS.plainLight,
53
53
  };
54
54
  export const dark_shades = {
55
- emptyShade: SEMANTIC_COLORS.shade145,
55
+ emptyShade: SEMANTIC_COLORS.shade140,
56
56
  lightestShade: SEMANTIC_COLORS.shade135,
57
57
  lightShade: SEMANTIC_COLORS.shade125,
58
58
  mediumShade: SEMANTIC_COLORS.shade95,
@@ -70,8 +70,9 @@ export const dark_background_colors = {
70
70
  backgroundBaseRisk: SEMANTIC_COLORS.risk140,
71
71
  backgroundBaseDanger: SEMANTIC_COLORS.danger140,
72
72
  backgroundBaseAssistance: SEMANTIC_COLORS.assistance140,
73
- backgroundBaseSubdued: SEMANTIC_COLORS.plainDark,
74
- backgroundBasePlain: SEMANTIC_COLORS.shade145,
73
+ backgroundBaseRecessed: SEMANTIC_COLORS.plainDark,
74
+ backgroundBaseSubdued: SEMANTIC_COLORS.shade145,
75
+ backgroundBasePlain: SEMANTIC_COLORS.shade140,
75
76
  backgroundBaseDisabled: SEMANTIC_COLORS.shade130,
76
77
  backgroundBaseHighlighted: SEMANTIC_COLORS.shade135,
77
78
  backgroundBaseFormsPrepend: SEMANTIC_COLORS.shade125,
package/lib/esm/variables/colors/_colors_light.js CHANGED
@@ -38,12 +38,12 @@ export const brand_text_colors = {
38
38
  };
39
39
  export const text_colors = {
40
40
  /* Legacy colors */
41
- text: SEMANTIC_COLORS.shade130,
41
+ text: SEMANTIC_COLORS.shade110,
42
42
  title: SEMANTIC_COLORS.shade140,
43
43
  subduedText: SEMANTIC_COLORS.shade95,
44
44
  link: SEMANTIC_COLORS.primary100,
45
45
  /* New colors */
46
- textParagraph: SEMANTIC_COLORS.shade130,
46
+ textParagraph: SEMANTIC_COLORS.shade110,
47
47
  textHeading: SEMANTIC_COLORS.shade140,
48
48
  textSubdued: SEMANTIC_COLORS.shade95,
49
49
  textDisabled: SEMANTIC_COLORS.shade70,
@@ -70,6 +70,7 @@ export const background_colors = {
70
70
  backgroundBaseRisk: SEMANTIC_COLORS.risk10,
71
71
  backgroundBaseDanger: SEMANTIC_COLORS.danger10,
72
72
  backgroundBaseAssistance: SEMANTIC_COLORS.assistance10,
73
+ backgroundBaseRecessed: SEMANTIC_COLORS.shade10,
73
74
  backgroundBaseSubdued: SEMANTIC_COLORS.shade10,
74
75
  backgroundBasePlain: SEMANTIC_COLORS.plainLight,
75
76
  backgroundBaseDisabled: SEMANTIC_COLORS.shade15,
@@ -154,7 +155,7 @@ export const border_colors = {
154
155
  borderStrongText: SEMANTIC_COLORS.shade90,
155
156
  };
156
157
  export const special_colors = {
157
- body: SEMANTIC_COLORS.shade10,
158
+ body: SEMANTIC_COLORS.shade15,
158
159
  highlight: SEMANTIC_COLORS.primary10,
159
160
  disabled: SEMANTIC_COLORS.shade20,
160
161
  disabledText: SEMANTIC_COLORS.shade80,
package/lib/eui_theme_borealis_dark.json CHANGED
@@ -26,6 +26,10 @@
26
26
  "euiBorderColor": "#2B394F",
27
27
  "euiBorderRadius": "4px",
28
28
  "euiBorderRadiusSmall": "4px",
29
+ "euiBorderRadiusInline": "4px",
30
+ "euiBorderRadiusControl": "8px",
31
+ "euiBorderRadiusPanel": "12px",
32
+ "euiBorderRadiusFrame": "16px",
29
33
  "euiBorderThick": "2px solid #2B394F",
30
34
  "euiBorderThin": "1px solid #2B394F",
31
35
  "euiBorderEditable": "2px dotted #2B394F",
@@ -59,8 +63,8 @@
59
63
  "euiFormControlCompressedHeight": "32px",
60
64
  "euiFormControlPadding": "12px",
61
65
  "euiFormControlCompressedPadding": "8px",
62
- "euiFormControlBorderRadius": "4px",
63
- "euiFormControlCompressedBorderRadius": "4px",
66
+ "euiFormControlBorderRadius": "8px",
67
+ "euiFormControlCompressedBorderRadius": "8px",
64
68
  "euiRadioSize": "16px",
65
69
  "euiCheckBoxSize": "16px",
66
70
  "euiCheckboxBorderRadius": "4px",
@@ -74,7 +78,7 @@
74
78
  "euiSwitchHeightMini": "10px",
75
79
  "euiSwitchWidthMini": "22px",
76
80
  "euiSwitchThumbSizeMini": "10px",
77
- "euiFormBackgroundColor": "#0B1628",
81
+ "euiFormBackgroundColor": "#111C2C",
78
82
  "euiFormBackgroundDisabledColor": "#1D2A3E",
79
83
  "euiFormBackgroundReadOnlyColor": "#1D2A3E",
80
84
  "euiFormBorderOpaqueColor": "#5054af",
@@ -97,9 +101,9 @@
97
101
  },
98
102
  "euiFormControlLayoutGroupInputHeight": "38px",
99
103
  "euiFormControlLayoutGroupInputCompressedHeight": "30px",
100
- "euiFormControlLayoutGroupInputCompressedBorderRadius": "2px",
101
- "euiHeaderBackgroundColor": "#0B1628",
102
- "euiHeaderDarkBackgroundColor": "#0B1628",
104
+ "euiFormControlLayoutGroupInputCompressedBorderRadius": "8px",
105
+ "euiHeaderBackgroundColor": "#111C2C",
106
+ "euiHeaderDarkBackgroundColor": "#111C2C",
103
107
  "euiHeaderBorderColor": "#2B394F",
104
108
  "euiHeaderBreadcrumbColor": "#0D2F5E",
105
109
  "euiHeaderHeight": "48px",
@@ -114,12 +118,12 @@
114
118
  },
115
119
  "euiPanelBorderRadiusModifiers": {
116
120
  "borderRadiusNone": 0,
117
- "borderRadiusMedium": "4px"
121
+ "borderRadiusMedium": "12px"
118
122
  },
119
123
  "euiPanelBackgroundColorModifiers": {
120
124
  "transparent": "rgba(0, 0, 0, 0)",
121
- "plain": "#0B1628",
122
- "subdued": "#07101F",
125
+ "plain": "#111C2C",
126
+ "subdued": "#0B1628",
123
127
  "accent": "#351725",
124
128
  "accentSecondary": "#03282B",
125
129
  "primary": "#0A2342",
@@ -208,32 +212,38 @@
208
212
  "xxxs": {
209
213
  "font-size": "12px",
210
214
  "line-height": "1.1429rem",
211
- "font-weight": 600
215
+ "font-weight": 600,
216
+ "letter-spacing": "-0.2px"
212
217
  },
213
218
  "xxs": {
214
219
  "font-size": "14px",
215
220
  "line-height": "1.4286rem",
216
- "font-weight": 600
221
+ "font-weight": 600,
222
+ "letter-spacing": "-0.2px"
217
223
  },
218
224
  "xs": {
219
225
  "font-size": "16px",
220
226
  "line-height": "1.7143rem",
221
- "font-weight": 600
227
+ "font-weight": 600,
228
+ "letter-spacing": "-0.2px"
222
229
  },
223
230
  "s": {
224
231
  "font-size": "20px",
225
232
  "line-height": "1.7143rem",
226
- "font-weight": 600
233
+ "font-weight": 600,
234
+ "letter-spacing": "-0.2px"
227
235
  },
228
236
  "m": {
229
237
  "font-size": "24px",
230
238
  "line-height": "2rem",
231
- "font-weight": 600
239
+ "font-weight": 600,
240
+ "letter-spacing": "-0.2px"
232
241
  },
233
242
  "l": {
234
243
  "font-size": "30px",
235
244
  "line-height": "2.5714rem",
236
- "font-weight": 600
245
+ "font-weight": 600,
246
+ "letter-spacing": "-0.2px"
237
247
  }
238
248
  },
239
249
  "euiZLevel0": 0,
@@ -360,7 +370,7 @@
360
370
  "euiColorSuccess": "#24C292",
361
371
  "euiColorWarning": "#FACB3D",
362
372
  "euiColorDanger": "#F6726A",
363
- "euiColorEmptyShade": "#0B1628",
373
+ "euiColorEmptyShade": "#111C2C",
364
374
  "euiColorLightestShade": "#172336",
365
375
  "euiColorLightShade": "#243147",
366
376
  "euiColorMediumShade": "#516381",
@@ -369,7 +379,7 @@
369
379
  "euiColorFullShade": "#FFFFFF",
370
380
  "euiPageBackgroundColor": "#07101F",
371
381
  "euiColorHighlight": "#1750BA",
372
- "euiTextColor": "#CAD3E2",
382
+ "euiTextColor": "#B4C1D5",
373
383
  "euiTitleColor": "#E3E8F2",
374
384
  "euiTextSubduedColor": "#98A8C3",
375
385
  "euiColorDisabled": "#1D2A3E",
@@ -391,7 +401,7 @@
391
401
  "euiColorTextRisk": "#FF995E",
392
402
  "euiColorTextDanger": "#F6726A",
393
403
  "euiColorTextAssistance": "#C5A5FA",
394
- "euiColorTextParagraph": "#CAD3E2",
404
+ "euiColorTextParagraph": "#B4C1D5",
395
405
  "euiColorTextHeading": "#E3E8F2",
396
406
  "euiColorTextSubdued": "#98A8C3",
397
407
  "euiColorTextDisabled": "#6A7FA0",
@@ -407,8 +417,9 @@
407
417
  "euiColorBackgroundBaseRisk": "#361D18",
408
418
  "euiColorBackgroundBaseDanger": "#351721",
409
419
  "euiColorBackgroundBaseAssistance": "#2A1E3E",
410
- "euiColorBackgroundBaseSubdued": "#07101F",
411
- "euiColorBackgroundBasePlain": "#0B1628",
420
+ "euiColorBackgroundBaseRecessed": "#07101F",
421
+ "euiColorBackgroundBaseSubdued": "#0B1628",
422
+ "euiColorBackgroundBasePlain": "#111C2C",
412
423
  "euiColorBackgroundBaseDisabled": "#1D2A3E",
413
424
  "euiColorBackgroundBaseHighlighted": "#172336",
414
425
  "euiColorBackgroundBaseFormsPrepend": "#243147",
package/lib/eui_theme_borealis_dark.json.d.ts CHANGED
@@ -27,6 +27,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
27
27
  euiBorderColor: string;
28
28
  euiBorderRadius: string;
29
29
  euiBorderRadiusSmall: string;
30
+ euiBorderRadiusInline: string;
31
+ euiBorderRadiusControl: string;
32
+ euiBorderRadiusPanel: string;
33
+ euiBorderRadiusFrame: string;
30
34
  euiBorderThick: string;
31
35
  euiBorderThin: string;
32
36
  euiBorderEditable: string;
@@ -210,31 +214,37 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
210
214
  'font-size': string;
211
215
  'line-height': string;
212
216
  'font-weight': number;
217
+ 'letter-spacing': string;
213
218
  };
214
219
  xxs: {
215
220
  'font-size': string;
216
221
  'line-height': string;
217
222
  'font-weight': number;
223
+ 'letter-spacing': string;
218
224
  };
219
225
  xs: {
220
226
  'font-size': string;
221
227
  'line-height': string;
222
228
  'font-weight': number;
229
+ 'letter-spacing': string;
223
230
  };
224
231
  s: {
225
232
  'font-size': string;
226
233
  'line-height': string;
227
234
  'font-weight': number;
235
+ 'letter-spacing': string;
228
236
  };
229
237
  m: {
230
238
  'font-size': string;
231
239
  'line-height': string;
232
240
  'font-weight': number;
241
+ 'letter-spacing': string;
233
242
  };
234
243
  l: {
235
244
  'font-size': string;
236
245
  'line-height': string;
237
246
  'font-weight': number;
247
+ 'letter-spacing': string;
238
248
  };
239
249
  };
240
250
  euiZLevel0: number;
@@ -408,6 +418,7 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
408
418
  euiColorBackgroundBaseRisk: string;
409
419
  euiColorBackgroundBaseDanger: string;
410
420
  euiColorBackgroundBaseAssistance: string;
421
+ euiColorBackgroundBaseRecessed: string;
411
422
  euiColorBackgroundBaseSubdued: string;
412
423
  euiColorBackgroundBasePlain: string;
413
424
  euiColorBackgroundBaseDisabled: string;
package/lib/eui_theme_borealis_light.json CHANGED
@@ -26,6 +26,10 @@
26
26
  "euiBorderColor": "#E3E8F2",
27
27
  "euiBorderRadius": "4px",
28
28
  "euiBorderRadiusSmall": "4px",
29
+ "euiBorderRadiusInline": "4px",
30
+ "euiBorderRadiusControl": "8px",
31
+ "euiBorderRadiusPanel": "12px",
32
+ "euiBorderRadiusFrame": "16px",
29
33
  "euiBorderThick": "2px solid #E3E8F2",
30
34
  "euiBorderThin": "1px solid #E3E8F2",
31
35
  "euiBorderEditable": "2px dotted #E3E8F2",
@@ -59,8 +63,8 @@
59
63
  "euiFormControlCompressedHeight": "32px",
60
64
  "euiFormControlPadding": "12px",
61
65
  "euiFormControlCompressedPadding": "8px",
62
- "euiFormControlBorderRadius": "4px",
63
- "euiFormControlCompressedBorderRadius": "4px",
66
+ "euiFormControlBorderRadius": "8px",
67
+ "euiFormControlCompressedBorderRadius": "8px",
64
68
  "euiRadioSize": "16px",
65
69
  "euiCheckBoxSize": "16px",
66
70
  "euiCheckboxBorderRadius": "4px",
@@ -97,9 +101,9 @@
97
101
  },
98
102
  "euiFormControlLayoutGroupInputHeight": "38px",
99
103
  "euiFormControlLayoutGroupInputCompressedHeight": "30px",
100
- "euiFormControlLayoutGroupInputCompressedBorderRadius": "2px",
104
+ "euiFormControlLayoutGroupInputCompressedBorderRadius": "8px",
101
105
  "euiHeaderBackgroundColor": "#FFFFFF",
102
- "euiHeaderDarkBackgroundColor": "#0B1628",
106
+ "euiHeaderDarkBackgroundColor": "#111C2C",
103
107
  "euiHeaderBorderColor": "#E3E8F2",
104
108
  "euiHeaderBreadcrumbColor": "#D9E8FF",
105
109
  "euiHeaderHeight": "48px",
@@ -114,7 +118,7 @@
114
118
  },
115
119
  "euiPanelBorderRadiusModifiers": {
116
120
  "borderRadiusNone": 0,
117
- "borderRadiusMedium": "4px"
121
+ "borderRadiusMedium": "12px"
118
122
  },
119
123
  "euiPanelBackgroundColorModifiers": {
120
124
  "transparent": "rgba(0, 0, 0, 0)",
@@ -208,32 +212,38 @@
208
212
  "xxxs": {
209
213
  "font-size": "12px",
210
214
  "line-height": "1.1429rem",
211
- "font-weight": 600
215
+ "font-weight": 600,
216
+ "letter-spacing": "-0.2px"
212
217
  },
213
218
  "xxs": {
214
219
  "font-size": "14px",
215
220
  "line-height": "1.4286rem",
216
- "font-weight": 600
221
+ "font-weight": 600,
222
+ "letter-spacing": "-0.2px"
217
223
  },
218
224
  "xs": {
219
225
  "font-size": "16px",
220
226
  "line-height": "1.7143rem",
221
- "font-weight": 600
227
+ "font-weight": 600,
228
+ "letter-spacing": "-0.2px"
222
229
  },
223
230
  "s": {
224
231
  "font-size": "20px",
225
232
  "line-height": "1.7143rem",
226
- "font-weight": 600
233
+ "font-weight": 600,
234
+ "letter-spacing": "-0.2px"
227
235
  },
228
236
  "m": {
229
237
  "font-size": "24px",
230
238
  "line-height": "2rem",
231
- "font-weight": 600
239
+ "font-weight": 600,
240
+ "letter-spacing": "-0.2px"
232
241
  },
233
242
  "l": {
234
243
  "font-size": "30px",
235
244
  "line-height": "2.5714rem",
236
- "font-weight": 600
245
+ "font-weight": 600,
246
+ "letter-spacing": "-0.2px"
237
247
  }
238
248
  },
239
249
  "euiZLevel0": 0,
@@ -367,9 +377,9 @@
367
377
  "euiColorDarkShade": "#5A6D8C",
368
378
  "euiColorDarkestShade": "#2B394F",
369
379
  "euiColorFullShade": "#07101F",
370
- "euiPageBackgroundColor": "#F6F9FC",
380
+ "euiPageBackgroundColor": "#ECF1F9",
371
381
  "euiColorHighlight": "#F1F6FF",
372
- "euiTextColor": "#1D2A3E",
382
+ "euiTextColor": "#384861",
373
383
  "euiTitleColor": "#111C2C",
374
384
  "euiTextSubduedColor": "#516381",
375
385
  "euiColorDisabled": "#E3E8F2",
@@ -391,7 +401,7 @@
391
401
  "euiColorTextRisk": "#9E3A16",
392
402
  "euiColorTextDanger": "#A71627",
393
403
  "euiColorTextAssistance": "#6B3C9F",
394
- "euiColorTextParagraph": "#1D2A3E",
404
+ "euiColorTextParagraph": "#384861",
395
405
  "euiColorTextHeading": "#111C2C",
396
406
  "euiColorTextSubdued": "#516381",
397
407
  "euiColorTextDisabled": "#798EAF",
@@ -407,6 +417,7 @@
407
417
  "euiColorBackgroundBaseRisk": "#FFF3E3",
408
418
  "euiColorBackgroundBaseDanger": "#FFF3F1",
409
419
  "euiColorBackgroundBaseAssistance": "#F7F2FF",
420
+ "euiColorBackgroundBaseRecessed": "#F6F9FC",
410
421
  "euiColorBackgroundBaseSubdued": "#F6F9FC",
411
422
  "euiColorBackgroundBasePlain": "#FFFFFF",
412
423
  "euiColorBackgroundBaseDisabled": "#ECF1F9",
package/lib/eui_theme_borealis_light.json.d.ts CHANGED
@@ -27,6 +27,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
27
27
  euiBorderColor: string;
28
28
  euiBorderRadius: string;
29
29
  euiBorderRadiusSmall: string;
30
+ euiBorderRadiusInline: string;
31
+ euiBorderRadiusControl: string;
32
+ euiBorderRadiusPanel: string;
33
+ euiBorderRadiusFrame: string;
30
34
  euiBorderThick: string;
31
35
  euiBorderThin: string;
32
36
  euiBorderEditable: string;
@@ -210,31 +214,37 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
210
214
  'font-size': string;
211
215
  'line-height': string;
212
216
  'font-weight': number;
217
+ 'letter-spacing': string;
213
218
  };
214
219
  xxs: {
215
220
  'font-size': string;
216
221
  'line-height': string;
217
222
  'font-weight': number;
223
+ 'letter-spacing': string;
218
224
  };
219
225
  xs: {
220
226
  'font-size': string;
221
227
  'line-height': string;
222
228
  'font-weight': number;
229
+ 'letter-spacing': string;
223
230
  };
224
231
  s: {
225
232
  'font-size': string;
226
233
  'line-height': string;
227
234
  'font-weight': number;
235
+ 'letter-spacing': string;
228
236
  };
229
237
  m: {
230
238
  'font-size': string;
231
239
  'line-height': string;
232
240
  'font-weight': number;
241
+ 'letter-spacing': string;
233
242
  };
234
243
  l: {
235
244
  'font-size': string;
236
245
  'line-height': string;
237
246
  'font-weight': number;
247
+ 'letter-spacing': string;
238
248
  };
239
249
  };
240
250
  euiZLevel0: number;
@@ -408,6 +418,7 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
408
418
  euiColorBackgroundBaseRisk: string;
409
419
  euiColorBackgroundBaseDanger: string;
410
420
  euiColorBackgroundBaseAssistance: string;
421
+ euiColorBackgroundBaseRecessed: string;
411
422
  euiColorBackgroundBaseSubdued: string;
412
423
  euiColorBackgroundBasePlain: string;
413
424
  euiColorBackgroundBaseDisabled: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elastic/eui-theme-borealis",
3
- "version": "8.0.0",
3
+ "version": "8.1.0",
4
4
  "description": "A visual theme for EUI",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "scripts": {
@@ -27,7 +27,7 @@
27
27
  "directory": "packages/eui-theme-borealis"
28
28
  },
29
29
  "dependencies": {
30
- "@elastic/eui-theme-common": "10.0.0",
30
+ "@elastic/eui-theme-common": "10.1.0",
31
31
  "chroma-js": "^2.4.2"
32
32
  },
33
33
  "devDependencies": {
@@ -36,7 +36,7 @@
36
36
  "@babel/preset-env": "^7.21.5",
37
37
  "@babel/preset-react": "^7.18.6",
38
38
  "@babel/preset-typescript": "^7.21.5",
39
- "@elastic/eui-theme-common": "10.0.0",
39
+ "@elastic/eui-theme-common": "10.1.0",
40
40
  "@types/chroma-js": "^2.4.0",
41
41
  "@types/jest": "^29.5.12",
42
42
  "@types/prettier": "2.7.3",
package/src/variables/_borders.scss CHANGED
@@ -6,6 +6,10 @@ $euiBorderWidthThick: 2px !default;
6
6
  $euiBorderColor: $euiColorBorderBaseSubdued !default;
7
7
  $euiBorderRadius: $euiSizeS * .5 !default;
8
8
  $euiBorderRadiusSmall: $euiSizeS * .5 !default;
9
+ $euiBorderRadiusInline: $euiSizeS * .5 !default;
10
+ $euiBorderRadiusControl: $euiSizeS !default;
11
+ $euiBorderRadiusPanel: $euiSizeS * 1.5 !default;
12
+ $euiBorderRadiusFrame: $euiSize !default;
9
13
  $euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default;
10
14
  $euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default;
11
15
  $euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default;
package/src/variables/_typography.scss CHANGED
@@ -35,30 +35,36 @@ $euiTitles: (
35
35
  'font-size': $euiFontSizeXS,
36
36
  'line-height': lineHeightFromBaseline(2),
37
37
  'font-weight': $euiFontWeightBold,
38
+ 'letter-spacing': -0.2px,
38
39
  ),
39
40
  'xxs': (
40
41
  'font-size': $euiFontSizeS,
41
42
  'line-height': lineHeightFromBaseline(3),
42
43
  'font-weight': $euiFontWeightBold,
44
+ 'letter-spacing': -0.2px,
43
45
  ),
44
46
  'xs': (
45
47
  'font-size': $euiFontSizeM,
46
48
  'line-height': lineHeightFromBaseline(3),
47
49
  'font-weight': $euiFontWeightBold,
50
+ 'letter-spacing': -0.2px,
48
51
  ),
49
52
  's': (
50
53
  'font-size': $euiFontSizeL,
51
54
  'line-height': lineHeightFromBaseline(4),
52
55
  'font-weight': $euiFontWeightBold,
56
+ 'letter-spacing': -0.2px,
53
57
  ),
54
58
  'm': (
55
59
  'font-size': $euiFontSizeXL,
56
60
  'line-height': lineHeightFromBaseline(4),
57
61
  'font-weight': $euiFontWeightBold,
62
+ 'letter-spacing': -0.2px,
58
63
  ),
59
64
  'l': (
60
65
  'font-size': $euiFontSizeXXL,
61
66
  'line-height': lineHeightFromBaseline(5),
62
67
  'font-weight': $euiFontWeightBold,
68
+ 'letter-spacing': -0.2px,
63
69
  ),
64
70
  );
package/src/variables/colors/_colors_dark.scss CHANGED
@@ -14,7 +14,7 @@ $euiColorWarning: $euiColorWarning40 !default;
14
14
  $euiColorDanger: $euiColorDanger60 !default;
15
15
 
16
16
  // Shades
17
- $euiColorEmptyShade: $euiColorPlainDark !default;
17
+ $euiColorEmptyShade: $euiColorShade140 !default;
18
18
  $euiColorLightestShade: $euiColorShade135 !default;
19
19
  $euiColorLightShade: $euiColorShade125 !default;
20
20
  $euiColorMediumShade: $euiColorShade95 !default;
@@ -23,7 +23,7 @@ $euiColorDarkestShade: $euiColorShade30 !default;
23
23
  $euiColorFullShade: $euiColorPlainLight !default;
24
24
 
25
25
  // Backgrounds
26
- $euiPageBackgroundColor: $euiColorBlueBlack !default; // deprecated
26
+ $euiPageBackgroundColor: $euiColorPlainDark !default; // deprecated
27
27
  $euiColorHighlight: $euiColorPrimary100 !default;
28
28
 
29
29
  $euiColorBackgroundBasePrimary: $euiColorPrimary140 !default;
@@ -35,8 +35,9 @@ $euiColorBackgroundBaseWarning: $euiColorWarning140 !default;
35
35
  $euiColorBackgroundBaseRisk: $euiColorRisk140 !default;
36
36
  $euiColorBackgroundBaseDanger: $euiColorDanger140 !default;
37
37
  $euiColorBackgroundBaseAssistance: $euiColorAssistance140 !default;
38
- $euiColorBackgroundBaseSubdued: $euiColorPlainDark !default;
39
- $euiColorBackgroundBasePlain: $euiColorShade145 !default;
38
+ $euiColorBackgroundBaseRecessed: $euiColorPlainDark !default;
39
+ $euiColorBackgroundBaseSubdued: $euiColorShade145 !default;
40
+ $euiColorBackgroundBasePlain: $euiColorShade140 !default;
40
41
  $euiColorBackgroundBaseDisabled: $euiColorShade130 !default;
41
42
  $euiColorBackgroundBaseHighlighted: $euiColorShade135 !default;
42
43
  $euiColorBackgroundBaseFormsPrepend: $euiColorShade125 !default;
@@ -73,7 +74,7 @@ $euiColorBackgroundFilledAssistance: $euiColorAssistance50 !default;
73
74
  $euiColorBackgroundFilledText: $euiColorShade60 !default;
74
75
 
75
76
  // Texts (legacy)
76
- $euiTextColor: $euiColorShade30 !default;
77
+ $euiTextColor: $euiColorShade40 !default;
77
78
  $euiTitleColor: $euiColorShade20 !default;
78
79
  $euiTextSubduedColor: $euiColorShade55 !default;
79
80
  $euiColorDisabled: $euiColorBackgroundBaseDisabled !default;
@@ -81,7 +82,7 @@ $euiColorDisabledText: $euiColorShade80 !default;
81
82
  $euiLinkColor: $euiColorPrimary60 !default;
82
83
 
83
84
  // Texts
84
- $euiColorTextParagraph: $euiColorShade30 !default;
85
+ $euiColorTextParagraph: $euiColorShade40 !default;
85
86
  $euiColorTextHeading: $euiColorShade20 !default;
86
87
  $euiColorTextSubdued: $euiColorShade55 !default;
87
88
  $euiColorTextDisabled: $euiColorShade80 !default;
package/src/variables/colors/_colors_light.scss CHANGED
@@ -23,7 +23,7 @@ $euiColorDarkestShade: $euiColorShade120 !default;
23
23
  $euiColorFullShade: $euiColorPlainDark !default;
24
24
 
25
25
  // Backgrounds
26
- $euiPageBackgroundColor: $euiColorShade10 !default; // deprecated
26
+ $euiPageBackgroundColor: $euiColorShade15 !default; // deprecated
27
27
  $euiColorHighlight: $euiColorPrimary10 !default;
28
28
 
29
29
  $euiColorBackgroundBasePrimary: $euiColorPrimary10 !default;
@@ -35,6 +35,7 @@ $euiColorBackgroundBaseWarning: $euiColorWarning10 !default;
35
35
  $euiColorBackgroundBaseRisk: $euiColorRisk10 !default;
36
36
  $euiColorBackgroundBaseDanger: $euiColorDanger10 !default;
37
37
  $euiColorBackgroundBaseAssistance: $euiColorAssistance10 !default;
38
+ $euiColorBackgroundBaseRecessed: $euiColorShade10 !default;
38
39
  $euiColorBackgroundBaseSubdued: $euiColorShade10 !default;
39
40
  $euiColorBackgroundBasePlain: $euiColorPlainLight !default;
40
41
  $euiColorBackgroundBaseDisabled: $euiColorShade15 !default;
@@ -73,7 +74,7 @@ $euiColorBackgroundFilledAssistance: $euiColorAssistance90 !default;
73
74
  $euiColorBackgroundFilledText: $euiColorShade90 !default;
74
75
 
75
76
  // Texts (legacy)
76
- $euiTextColor: $euiColorShade130 !default;
77
+ $euiTextColor: $euiColorShade110 !default;
77
78
  $euiTitleColor: $euiColorShade140 !default;
78
79
  $euiTextSubduedColor: $euiColorShade95 !default;
79
80
  $euiColorDisabled: $euiColorBackgroundBaseDisabled !default;
@@ -81,7 +82,7 @@ $euiColorDisabledText: $euiColorShade70 !default;
81
82
  $euiLinkColor: $euiColorPrimary100 !default;
82
83
 
83
84
  // Texts
84
- $euiColorTextParagraph: $euiColorShade130 !default;
85
+ $euiColorTextParagraph: $euiColorShade110 !default;
85
86
  $euiColorTextHeading: $euiColorShade140 !default;
86
87
  $euiColorTextSubdued: $euiColorShade95 !default;
87
88
  $euiColorTextDisabled: $euiColorShade70 !default;