@elastic/eui 101.4.0 → 102.0.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 (88) hide show
  1. package/dist/eui_theme_amsterdam_dark.json +20 -15
  2. package/dist/eui_theme_amsterdam_dark.json.d.ts +20 -15
  3. package/dist/eui_theme_amsterdam_light.json +20 -15
  4. package/dist/eui_theme_amsterdam_light.json.d.ts +20 -15
  5. package/dist/eui_theme_borealis_dark.json +20 -15
  6. package/dist/eui_theme_borealis_dark.json.d.ts +20 -15
  7. package/dist/eui_theme_borealis_light.json +20 -15
  8. package/dist/eui_theme_borealis_light.json.d.ts +20 -15
  9. package/es/components/badge/badge.js +1 -1
  10. package/es/components/badge/badge.styles.js +3 -1
  11. package/es/components/badge/color_utils.js +2 -0
  12. package/es/components/datagrid/body/header/column_sorting.js +10 -9
  13. package/es/components/datagrid/body/header/data_grid_header_cell.js +1 -2
  14. package/es/components/empty_prompt/empty_prompt.styles.js +3 -1
  15. package/es/components/form/form_control_layout/form_control_layout_icons.styles.js +4 -2
  16. package/es/components/icon/icon.styles.js +5 -3
  17. package/es/components/icon/named_colors.js +1 -1
  18. package/es/global_styling/mixins/_button.js +2 -2
  19. package/es/global_styling/mixins/_color.js +1 -1
  20. package/es/themes/amsterdam/global_styling/variables/_buttons.js +189 -142
  21. package/es/themes/amsterdam/global_styling/variables/_colors.js +218 -176
  22. package/es/themes/amsterdam/global_styling/variables/_colors_severity.js +20 -0
  23. package/es/themes/amsterdam/global_styling/variables/_colors_vis.js +0 -15
  24. package/eui.d.ts +58 -20
  25. package/lib/components/badge/badge.js +1 -1
  26. package/lib/components/badge/badge.styles.js +3 -1
  27. package/lib/components/badge/color_utils.js +2 -0
  28. package/lib/components/datagrid/body/header/column_sorting.js +10 -9
  29. package/lib/components/datagrid/body/header/data_grid_header_cell.js +1 -2
  30. package/lib/components/empty_prompt/empty_prompt.styles.js +3 -1
  31. package/lib/components/form/form_control_layout/form_control_layout_icons.styles.js +4 -2
  32. package/lib/components/icon/icon.styles.js +5 -3
  33. package/lib/components/icon/named_colors.js +1 -1
  34. package/lib/global_styling/mixins/_button.js +2 -2
  35. package/lib/global_styling/mixins/_color.js +1 -1
  36. package/lib/themes/amsterdam/global_styling/variables/_buttons.js +189 -142
  37. package/lib/themes/amsterdam/global_styling/variables/_colors.js +218 -176
  38. package/lib/themes/amsterdam/global_styling/variables/_colors_severity.js +26 -0
  39. package/lib/themes/amsterdam/global_styling/variables/_colors_vis.js +0 -15
  40. package/optimize/es/components/badge/badge.js +1 -1
  41. package/optimize/es/components/badge/badge.styles.js +3 -1
  42. package/optimize/es/components/badge/color_utils.js +2 -0
  43. package/optimize/es/components/datagrid/body/header/column_sorting.js +10 -9
  44. package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js +1 -2
  45. package/optimize/es/components/empty_prompt/empty_prompt.styles.js +3 -1
  46. package/optimize/es/components/form/form_control_layout/form_control_layout_icons.styles.js +4 -2
  47. package/optimize/es/components/icon/icon.styles.js +5 -3
  48. package/optimize/es/components/icon/named_colors.js +1 -1
  49. package/optimize/es/global_styling/mixins/_button.js +2 -2
  50. package/optimize/es/global_styling/mixins/_color.js +1 -1
  51. package/optimize/es/themes/amsterdam/global_styling/variables/_buttons.js +189 -142
  52. package/optimize/es/themes/amsterdam/global_styling/variables/_colors.js +218 -176
  53. package/optimize/es/themes/amsterdam/global_styling/variables/_colors_severity.js +20 -0
  54. package/optimize/es/themes/amsterdam/global_styling/variables/_colors_vis.js +0 -15
  55. package/optimize/lib/components/badge/badge.js +1 -1
  56. package/optimize/lib/components/badge/badge.styles.js +3 -1
  57. package/optimize/lib/components/badge/color_utils.js +2 -0
  58. package/optimize/lib/components/datagrid/body/header/column_sorting.js +10 -9
  59. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js +1 -2
  60. package/optimize/lib/components/empty_prompt/empty_prompt.styles.js +3 -1
  61. package/optimize/lib/components/form/form_control_layout/form_control_layout_icons.styles.js +4 -2
  62. package/optimize/lib/components/icon/icon.styles.js +5 -3
  63. package/optimize/lib/components/icon/named_colors.js +1 -1
  64. package/optimize/lib/global_styling/mixins/_button.js +2 -2
  65. package/optimize/lib/global_styling/mixins/_color.js +1 -1
  66. package/optimize/lib/themes/amsterdam/global_styling/variables/_buttons.js +189 -142
  67. package/optimize/lib/themes/amsterdam/global_styling/variables/_colors.js +218 -176
  68. package/optimize/lib/themes/amsterdam/global_styling/variables/_colors_severity.js +26 -0
  69. package/optimize/lib/themes/amsterdam/global_styling/variables/_colors_vis.js +0 -15
  70. package/package.json +4 -4
  71. package/src/themes/amsterdam/_colors_dark.scss +13 -0
  72. package/src/themes/amsterdam/_colors_light.scss +13 -0
  73. package/src/themes/amsterdam/global_styling/variables/_colors_severity.scss +9 -0
  74. package/test-env/components/badge/badge.js +1 -1
  75. package/test-env/components/badge/badge.styles.js +3 -1
  76. package/test-env/components/badge/color_utils.js +2 -0
  77. package/test-env/components/datagrid/body/header/column_sorting.js +10 -9
  78. package/test-env/components/datagrid/body/header/data_grid_header_cell.js +1 -2
  79. package/test-env/components/empty_prompt/empty_prompt.styles.js +3 -1
  80. package/test-env/components/form/form_control_layout/form_control_layout_icons.styles.js +4 -2
  81. package/test-env/components/icon/icon.styles.js +5 -3
  82. package/test-env/components/icon/named_colors.js +1 -1
  83. package/test-env/global_styling/mixins/_button.js +2 -2
  84. package/test-env/global_styling/mixins/_color.js +1 -1
  85. package/test-env/themes/amsterdam/global_styling/variables/_buttons.js +189 -142
  86. package/test-env/themes/amsterdam/global_styling/variables/_colors.js +218 -176
  87. package/test-env/themes/amsterdam/global_styling/variables/_colors_severity.js +26 -0
  88. package/test-env/themes/amsterdam/global_styling/variables/_colors_vis.js +0 -15
@@ -22,6 +22,7 @@ import { darken, shade, tint, transparentize } from '../../../../services/color/
22
22
  import { computed } from '../../../../services/theme/utils';
23
23
  import { makeHighContrastColor, makeDisabledContrastColor } from '../../../../services/color/contrast';
24
24
  import { colorVis } from './_colors_vis';
25
+ import { severityColors } from './_colors_severity';
25
26
 
26
27
  /*
27
28
  * LIGHT THEME
@@ -45,8 +46,10 @@ export var brand_text_colors = {
45
46
  textPrimary: computed(makeHighContrastColor('colors.primary')),
46
47
  textAccent: computed(makeHighContrastColor('colors.accent')),
47
48
  textAccentSecondary: computed(makeHighContrastColor('colors.success')),
49
+ textNeutral: computed(makeHighContrastColor(severityColors.neutral)),
48
50
  textSuccess: computed(makeHighContrastColor('colors.success')),
49
51
  textWarning: computed(makeHighContrastColor('colors.warning')),
52
+ textRisk: computed(makeHighContrastColor(severityColors.risk)),
50
53
  textDanger: computed(makeHighContrastColor('colors.danger'))
51
54
  };
52
55
  export var shade_colors = {
@@ -127,6 +130,7 @@ export var background_colors = {
127
130
  success = _ref23[0];
128
131
  return tint(success, 0.9);
129
132
  }, ['colors.success']),
133
+ backgroundBaseNeutral: tint(severityColors.neutral, 0.9),
130
134
  backgroundBaseSuccess: computed(function (_ref24) {
131
135
  var _ref25 = _slicedToArray(_ref24, 1),
132
136
  success = _ref25[0];
@@ -137,6 +141,7 @@ export var background_colors = {
137
141
  warning = _ref27[0];
138
142
  return tint(warning, 0.9);
139
143
  }, ['colors.warning']),
144
+ backgroundBaseRisk: tint(severityColors.risk, 0.9),
140
145
  backgroundBaseDanger: computed(function (_ref28) {
141
146
  var _ref29 = _slicedToArray(_ref28, 1),
142
147
  danger = _ref29[0];
@@ -212,6 +217,7 @@ export var background_colors = {
212
217
  success = _ref57[0];
213
218
  return tint(success, 0.8);
214
219
  }, ['colors.success']),
220
+ backgroundLightNeutral: tint(severityColors.neutral, 0.8),
215
221
  backgroundLightSuccess: computed(function (_ref58) {
216
222
  var _ref59 = _slicedToArray(_ref58, 1),
217
223
  success = _ref59[0];
@@ -222,6 +228,7 @@ export var background_colors = {
222
228
  warning = _ref61[0];
223
229
  return tint(warning, 0.8);
224
230
  }, ['colors.warning']),
231
+ backgroundLightRisk: tint(severityColors.risk, 0.8),
225
232
  backgroundLightDanger: computed(function (_ref62) {
226
233
  var _ref63 = _slicedToArray(_ref62, 1),
227
234
  danger = _ref63[0];
@@ -247,6 +254,7 @@ export var background_colors = {
247
254
  success = _ref71[0];
248
255
  return tint(success, 0.3);
249
256
  }, ['colors.success']),
257
+ backgroundFilledNeutral: severityColors.neutral,
250
258
  backgroundFilledSuccess: computed(function (_ref72) {
251
259
  var _ref73 = _slicedToArray(_ref72, 1),
252
260
  success = _ref73[0];
@@ -257,6 +265,7 @@ export var background_colors = {
257
265
  warning = _ref75[0];
258
266
  return warning;
259
267
  }, ['colors.warning']),
268
+ backgroundFilledRisk: severityColors.risk,
260
269
  backgroundFilledDanger: computed(function (_ref76) {
261
270
  var _ref77 = _slicedToArray(_ref76, 1),
262
271
  danger = _ref77[0];
@@ -285,6 +294,7 @@ export var transparent_background_colors = {
285
294
  success = _ref85[0];
286
295
  return transparentize(success, 0.1);
287
296
  }, ['colors.success']),
297
+ backgroundTransparentNeutral: transparentize(severityColors.neutral, 0.1),
288
298
  backgroundTransparentSuccess: computed(function (_ref86) {
289
299
  var _ref87 = _slicedToArray(_ref86, 1),
290
300
  success = _ref87[0];
@@ -295,6 +305,7 @@ export var transparent_background_colors = {
295
305
  warning = _ref89[0];
296
306
  return transparentize(warning, 0.1);
297
307
  }, ['colors.warning']),
308
+ backgroundTransparentRisk: transparentize(severityColors.risk, 0.1),
298
309
  backgroundTransparentDanger: computed(function (_ref90) {
299
310
  var _ref91 = _slicedToArray(_ref90, 1),
300
311
  danger = _ref91[0];
@@ -332,6 +343,7 @@ export var border_colors = {
332
343
  success = _ref103[0];
333
344
  return tint(success, 0.6);
334
345
  }, ['colors.success']),
346
+ borderBaseNeutral: tint(severityColors.neutral, 0.6),
335
347
  borderBaseSuccess: computed(function (_ref104) {
336
348
  var _ref105 = _slicedToArray(_ref104, 1),
337
349
  success = _ref105[0];
@@ -342,6 +354,7 @@ export var border_colors = {
342
354
  warning = _ref107[0];
343
355
  return tint(warning, 0.4);
344
356
  }, ['colors.warning']),
357
+ borderBaseRisk: tint(severityColors.risk, 0.4),
345
358
  borderBaseDanger: computed(function (_ref108) {
346
359
  var _ref109 = _slicedToArray(_ref108, 1),
347
360
  danger = _ref109[0];
@@ -388,19 +401,29 @@ export var border_colors = {
388
401
  borderBaseAccentSecondary = _ref125[0];
389
402
  return borderBaseAccentSecondary;
390
403
  }, ['colors.borderBaseAccentSecondary']),
391
- borderStrongSuccess: computed(function (_ref126) {
404
+ borderStrongNeutral: computed(function (_ref126) {
392
405
  var _ref127 = _slicedToArray(_ref126, 1),
393
- borderBaseSuccess = _ref127[0];
406
+ borderBaseNeutral = _ref127[0];
407
+ return borderBaseNeutral;
408
+ }, ['colors.borderBaseNeutral']),
409
+ borderStrongSuccess: computed(function (_ref128) {
410
+ var _ref129 = _slicedToArray(_ref128, 1),
411
+ borderBaseSuccess = _ref129[0];
394
412
  return borderBaseSuccess;
395
413
  }, ['colors.borderBaseSuccess']),
396
- borderStrongWarning: computed(function (_ref128) {
397
- var _ref129 = _slicedToArray(_ref128, 1),
398
- borderBaseWarning = _ref129[0];
414
+ borderStrongWarning: computed(function (_ref130) {
415
+ var _ref131 = _slicedToArray(_ref130, 1),
416
+ borderBaseWarning = _ref131[0];
399
417
  return borderBaseWarning;
400
418
  }, ['colors.borderBaseWarning']),
401
- borderStrongDanger: computed(function (_ref130) {
402
- var _ref131 = _slicedToArray(_ref130, 1),
403
- borderBaseDanger = _ref131[0];
419
+ borderStrongRisk: computed(function (_ref132) {
420
+ var _ref133 = _slicedToArray(_ref132, 1),
421
+ borderBaseRisk = _ref133[0];
422
+ return borderBaseRisk;
423
+ }, ['colors.borderBaseRisk']),
424
+ borderStrongDanger: computed(function (_ref134) {
425
+ var _ref135 = _slicedToArray(_ref134, 1),
426
+ borderBaseDanger = _ref135[0];
404
427
  return borderBaseDanger;
405
428
  }, ['colors.borderBaseDanger'])
406
429
  };
@@ -420,259 +443,277 @@ export var dark_shades = {
420
443
  fullShade: '#FFFFFF'
421
444
  };
422
445
  export var dark_background_colors = {
423
- backgroundBasePrimary: computed(function (_ref132) {
424
- var _ref133 = _slicedToArray(_ref132, 1),
425
- primary = _ref133[0];
446
+ backgroundBasePrimary: computed(function (_ref136) {
447
+ var _ref137 = _slicedToArray(_ref136, 1),
448
+ primary = _ref137[0];
426
449
  return shade(primary, 0.8);
427
450
  }, ['colors.primary']),
428
- backgroundBaseAccent: computed(function (_ref134) {
429
- var _ref135 = _slicedToArray(_ref134, 1),
430
- accent = _ref135[0];
451
+ backgroundBaseAccent: computed(function (_ref138) {
452
+ var _ref139 = _slicedToArray(_ref138, 1),
453
+ accent = _ref139[0];
431
454
  return shade(accent, 0.8);
432
455
  }, ['colors.accent']),
433
- backgroundBaseAccentSecondary: computed(function (_ref136) {
434
- var _ref137 = _slicedToArray(_ref136, 1),
435
- success = _ref137[0];
456
+ backgroundBaseAccentSecondary: computed(function (_ref140) {
457
+ var _ref141 = _slicedToArray(_ref140, 1),
458
+ success = _ref141[0];
436
459
  return shade(success, 0.8);
437
460
  }, ['colors.success']),
438
- backgroundBaseSuccess: computed(function (_ref138) {
439
- var _ref139 = _slicedToArray(_ref138, 1),
440
- success = _ref139[0];
461
+ backgroundBaseNeutral: shade(severityColors.neutral, 0.8),
462
+ backgroundBaseSuccess: computed(function (_ref142) {
463
+ var _ref143 = _slicedToArray(_ref142, 1),
464
+ success = _ref143[0];
441
465
  return shade(success, 0.8);
442
466
  }, ['colors.success']),
443
- backgroundBaseWarning: computed(function (_ref140) {
444
- var _ref141 = _slicedToArray(_ref140, 1),
445
- warning = _ref141[0];
467
+ backgroundBaseWarning: computed(function (_ref144) {
468
+ var _ref145 = _slicedToArray(_ref144, 1),
469
+ warning = _ref145[0];
446
470
  return shade(warning, 0.8);
447
471
  }, ['colors.warning']),
448
- backgroundBaseDanger: computed(function (_ref142) {
449
- var _ref143 = _slicedToArray(_ref142, 1),
450
- danger = _ref143[0];
472
+ backgroundBaseRisk: shade(severityColors.risk, 0.8),
473
+ backgroundBaseDanger: computed(function (_ref146) {
474
+ var _ref147 = _slicedToArray(_ref146, 1),
475
+ danger = _ref147[0];
451
476
  return shade(danger, 0.8);
452
477
  }, ['colors.danger']),
453
- backgroundBaseSubdued: computed(function (_ref144) {
454
- var _ref145 = _slicedToArray(_ref144, 1),
455
- body = _ref145[0];
478
+ backgroundBaseSubdued: computed(function (_ref148) {
479
+ var _ref149 = _slicedToArray(_ref148, 1),
480
+ body = _ref149[0];
456
481
  return body;
457
482
  }, ['colors.body']),
458
- backgroundBaseDisabled: computed(function (_ref146) {
459
- var _ref147 = _slicedToArray(_ref146, 1),
460
- disabled = _ref147[0];
483
+ backgroundBaseDisabled: computed(function (_ref150) {
484
+ var _ref151 = _slicedToArray(_ref150, 1),
485
+ disabled = _ref151[0];
461
486
  return disabled;
462
487
  }, ['colors.disabled']),
463
- backgroundBaseHighlighted: computed(function (_ref148) {
464
- var _ref149 = _slicedToArray(_ref148, 1),
465
- backgroundBaseSubdued = _ref149[0];
488
+ backgroundBaseHighlighted: computed(function (_ref152) {
489
+ var _ref153 = _slicedToArray(_ref152, 1),
490
+ backgroundBaseSubdued = _ref153[0];
466
491
  return backgroundBaseSubdued;
467
492
  }, ['colors.backgroundBaseSubdued']),
468
- backgroundBasePlain: computed(function (_ref150) {
469
- var _ref151 = _slicedToArray(_ref150, 1),
470
- emptyShade = _ref151[0];
493
+ backgroundBasePlain: computed(function (_ref154) {
494
+ var _ref155 = _slicedToArray(_ref154, 1),
495
+ emptyShade = _ref155[0];
471
496
  return emptyShade;
472
497
  }, ['colors.emptyShade']),
473
- backgroundBaseFormsPrepend: computed(function (_ref152) {
474
- var _ref153 = _slicedToArray(_ref152, 1),
475
- lightShade = _ref153[0];
498
+ backgroundBaseFormsPrepend: computed(function (_ref156) {
499
+ var _ref157 = _slicedToArray(_ref156, 1),
500
+ lightShade = _ref157[0];
476
501
  return shade(lightShade, 0.15);
477
502
  }, ['colors.lightShade']),
478
- backgroundBaseFormsControlDisabled: computed(function (_ref154) {
479
- var _ref155 = _slicedToArray(_ref154, 1),
480
- mediumShade = _ref155[0];
503
+ backgroundBaseFormsControlDisabled: computed(function (_ref158) {
504
+ var _ref159 = _slicedToArray(_ref158, 1),
505
+ mediumShade = _ref159[0];
481
506
  return mediumShade;
482
507
  }, ['colors.mediumShade']),
483
- backgroundBaseInteractiveHover: computed(function (_ref156) {
484
- var _ref157 = _slicedToArray(_ref156, 1),
485
- lightShade = _ref157[0];
508
+ backgroundBaseInteractiveHover: computed(function (_ref160) {
509
+ var _ref161 = _slicedToArray(_ref160, 1),
510
+ lightShade = _ref161[0];
486
511
  return transparentize(lightShade, 0.2);
487
512
  }, ['colors.lightShade']),
488
- backgroundBaseInteractiveSelect: computed(function (_ref158) {
489
- var _ref159 = _slicedToArray(_ref158, 1),
490
- primary = _ref159[0];
513
+ backgroundBaseInteractiveSelect: computed(function (_ref162) {
514
+ var _ref163 = _slicedToArray(_ref162, 1),
515
+ primary = _ref163[0];
491
516
  return shade(primary, 0.7);
492
517
  }, ['colors.primary']),
493
- backgroundBaseInteractiveOverlay: computed(function (_ref160) {
494
- var _ref161 = _slicedToArray(_ref160, 1),
495
- ink = _ref161[0];
518
+ backgroundBaseInteractiveOverlay: computed(function (_ref164) {
519
+ var _ref165 = _slicedToArray(_ref164, 1),
520
+ ink = _ref165[0];
496
521
  return transparentize(ink, 0.5);
497
522
  }, ['colors.ink']),
498
- backgroundBaseSkeletonEdge: computed(function (_ref162) {
499
- var _ref163 = _slicedToArray(_ref162, 1),
500
- lightShade = _ref163[0];
523
+ backgroundBaseSkeletonEdge: computed(function (_ref166) {
524
+ var _ref167 = _slicedToArray(_ref166, 1),
525
+ lightShade = _ref167[0];
501
526
  return shade(lightShade, 0.12);
502
527
  }, ['colors.lightShade']),
503
- backgroundBaseSkeletonMiddle: computed(function (_ref164) {
504
- var _ref165 = _slicedToArray(_ref164, 1),
505
- lightShade = _ref165[0];
528
+ backgroundBaseSkeletonMiddle: computed(function (_ref168) {
529
+ var _ref169 = _slicedToArray(_ref168, 1),
530
+ lightShade = _ref169[0];
506
531
  return shade(lightShade, 0.24);
507
532
  }, ['colors.lightShade']),
508
- backgroundLightPrimary: computed(function (_ref166) {
509
- var _ref167 = _slicedToArray(_ref166, 1),
510
- primary = _ref167[0];
533
+ backgroundLightPrimary: computed(function (_ref170) {
534
+ var _ref171 = _slicedToArray(_ref170, 1),
535
+ primary = _ref171[0];
511
536
  return shade(primary, 0.7);
512
537
  }, ['colors.primary']),
513
- backgroundLightAccent: computed(function (_ref168) {
514
- var _ref169 = _slicedToArray(_ref168, 1),
515
- accent = _ref169[0];
538
+ backgroundLightAccent: computed(function (_ref172) {
539
+ var _ref173 = _slicedToArray(_ref172, 1),
540
+ accent = _ref173[0];
516
541
  return shade(accent, 0.7);
517
542
  }, ['colors.accent']),
518
- backgroundLightAccentSecondary: computed(function (_ref170) {
519
- var _ref171 = _slicedToArray(_ref170, 1),
520
- success = _ref171[0];
543
+ backgroundLightAccentSecondary: computed(function (_ref174) {
544
+ var _ref175 = _slicedToArray(_ref174, 1),
545
+ success = _ref175[0];
521
546
  return shade(success, 0.7);
522
547
  }, ['colors.success']),
523
- backgroundLightSuccess: computed(function (_ref172) {
524
- var _ref173 = _slicedToArray(_ref172, 1),
525
- success = _ref173[0];
548
+ backgroundLightNeutral: shade(severityColors.neutral, 0.7),
549
+ backgroundLightSuccess: computed(function (_ref176) {
550
+ var _ref177 = _slicedToArray(_ref176, 1),
551
+ success = _ref177[0];
526
552
  return shade(success, 0.7);
527
553
  }, ['colors.success']),
528
- backgroundLightWarning: computed(function (_ref174) {
529
- var _ref175 = _slicedToArray(_ref174, 1),
530
- warning = _ref175[0];
554
+ backgroundLightWarning: computed(function (_ref178) {
555
+ var _ref179 = _slicedToArray(_ref178, 1),
556
+ warning = _ref179[0];
531
557
  return shade(warning, 0.7);
532
558
  }, ['colors.warning']),
533
- backgroundLightDanger: computed(function (_ref176) {
534
- var _ref177 = _slicedToArray(_ref176, 1),
535
- danger = _ref177[0];
559
+ backgroundLightRisk: shade(severityColors.risk, 0.7),
560
+ backgroundLightDanger: computed(function (_ref180) {
561
+ var _ref181 = _slicedToArray(_ref180, 1),
562
+ danger = _ref181[0];
536
563
  return shade(danger, 0.7);
537
564
  }, ['colors.danger']),
538
- backgroundLightText: computed(function (_ref178) {
539
- var _ref179 = _slicedToArray(_ref178, 1),
540
- lightShade = _ref179[0];
565
+ backgroundLightText: computed(function (_ref182) {
566
+ var _ref183 = _slicedToArray(_ref182, 1),
567
+ lightShade = _ref183[0];
541
568
  return shade(lightShade, 0.2);
542
569
  }, ['colors.lightShade']),
543
- backgroundFilledPrimary: computed(function (_ref180) {
544
- var _ref181 = _slicedToArray(_ref180, 1),
545
- primary = _ref181[0];
570
+ backgroundFilledPrimary: computed(function (_ref184) {
571
+ var _ref185 = _slicedToArray(_ref184, 1),
572
+ primary = _ref185[0];
546
573
  return primary;
547
574
  }, ['colors.primary']),
548
- backgroundFilledAccent: computed(function (_ref182) {
549
- var _ref183 = _slicedToArray(_ref182, 1),
550
- accent = _ref183[0];
575
+ backgroundFilledAccent: computed(function (_ref186) {
576
+ var _ref187 = _slicedToArray(_ref186, 1),
577
+ accent = _ref187[0];
551
578
  return accent;
552
579
  }, ['colors.accent']),
553
- backgroundFilledAccentSecondary: computed(function (_ref184) {
554
- var _ref185 = _slicedToArray(_ref184, 1),
555
- success = _ref185[0];
580
+ backgroundFilledAccentSecondary: computed(function (_ref188) {
581
+ var _ref189 = _slicedToArray(_ref188, 1),
582
+ success = _ref189[0];
556
583
  return success;
557
584
  }, ['colors.success']),
558
- backgroundFilledSuccess: computed(function (_ref186) {
559
- var _ref187 = _slicedToArray(_ref186, 1),
560
- success = _ref187[0];
585
+ backgroundFilledNeutral: severityColors.neutral,
586
+ backgroundFilledSuccess: computed(function (_ref190) {
587
+ var _ref191 = _slicedToArray(_ref190, 1),
588
+ success = _ref191[0];
561
589
  return success;
562
590
  }, ['colors.success']),
563
- backgroundFilledWarning: computed(function (_ref188) {
564
- var _ref189 = _slicedToArray(_ref188, 1),
565
- warning = _ref189[0];
591
+ backgroundFilledWarning: computed(function (_ref192) {
592
+ var _ref193 = _slicedToArray(_ref192, 1),
593
+ warning = _ref193[0];
566
594
  return warning;
567
595
  }, ['colors.warning']),
568
- backgroundFilledDanger: computed(function (_ref190) {
569
- var _ref191 = _slicedToArray(_ref190, 1),
570
- danger = _ref191[0];
596
+ backgroundFilledRisk: severityColors.risk,
597
+ backgroundFilledDanger: computed(function (_ref194) {
598
+ var _ref195 = _slicedToArray(_ref194, 1),
599
+ danger = _ref195[0];
571
600
  return danger;
572
601
  }, ['colors.danger']),
573
- backgroundFilledText: computed(function (_ref192) {
574
- var _ref193 = _slicedToArray(_ref192, 1),
575
- text = _ref193[0];
602
+ backgroundFilledText: computed(function (_ref196) {
603
+ var _ref197 = _slicedToArray(_ref196, 1),
604
+ text = _ref197[0];
576
605
  return text;
577
606
  }, ['colors.text'])
578
607
  };
579
608
  export var dark_transparent_background_colors = _objectSpread(_objectSpread({}, transparent_background_colors), {}, {
580
- backgroundTransparentSubdued: computed(function (_ref194) {
581
- var _ref195 = _slicedToArray(_ref194, 1),
582
- lightShade = _ref195[0];
609
+ backgroundTransparentSubdued: computed(function (_ref198) {
610
+ var _ref199 = _slicedToArray(_ref198, 1),
611
+ lightShade = _ref199[0];
583
612
  return transparentize(lightShade, 0.4);
584
613
  }, ['colors.lightShade']),
585
- backgroundTransparentHighlighted: computed(function (_ref196) {
586
- var _ref197 = _slicedToArray(_ref196, 1),
587
- backgroundTransparentSubdued = _ref197[0];
614
+ backgroundTransparentHighlighted: computed(function (_ref200) {
615
+ var _ref201 = _slicedToArray(_ref200, 1),
616
+ backgroundTransparentSubdued = _ref201[0];
588
617
  return backgroundTransparentSubdued;
589
618
  }, ['colors.backgroundTransparentSubdued'])
590
619
  });
591
620
  export var dark_border_colors = {
592
- borderBasePrimary: computed(function (_ref198) {
593
- var _ref199 = _slicedToArray(_ref198, 1),
594
- primary = _ref199[0];
621
+ borderBasePrimary: computed(function (_ref202) {
622
+ var _ref203 = _slicedToArray(_ref202, 1),
623
+ primary = _ref203[0];
595
624
  return shade(primary, 0.6);
596
625
  }, ['colors.primary']),
597
- borderBaseAccent: computed(function (_ref200) {
598
- var _ref201 = _slicedToArray(_ref200, 1),
599
- accent = _ref201[0];
626
+ borderBaseAccent: computed(function (_ref204) {
627
+ var _ref205 = _slicedToArray(_ref204, 1),
628
+ accent = _ref205[0];
600
629
  return shade(accent, 0.6);
601
630
  }, ['colors.accent']),
602
- borderBaseAccentSecondary: computed(function (_ref202) {
603
- var _ref203 = _slicedToArray(_ref202, 1),
604
- success = _ref203[0];
631
+ borderBaseAccentSecondary: computed(function (_ref206) {
632
+ var _ref207 = _slicedToArray(_ref206, 1),
633
+ success = _ref207[0];
605
634
  return shade(success, 0.6);
606
635
  }, ['colors.success']),
607
- borderBaseSuccess: computed(function (_ref204) {
608
- var _ref205 = _slicedToArray(_ref204, 1),
609
- success = _ref205[0];
636
+ borderBaseNeutral: shade(severityColors.neutral, 0.6),
637
+ borderBaseSuccess: computed(function (_ref208) {
638
+ var _ref209 = _slicedToArray(_ref208, 1),
639
+ success = _ref209[0];
610
640
  return shade(success, 0.6);
611
641
  }, ['colors.success']),
612
- borderBaseWarning: computed(function (_ref206) {
613
- var _ref207 = _slicedToArray(_ref206, 1),
614
- warning = _ref207[0];
642
+ borderBaseWarning: computed(function (_ref210) {
643
+ var _ref211 = _slicedToArray(_ref210, 1),
644
+ warning = _ref211[0];
615
645
  return shade(warning, 0.4);
616
646
  }, ['colors.warning']),
617
- borderBaseDanger: computed(function (_ref208) {
618
- var _ref209 = _slicedToArray(_ref208, 1),
619
- danger = _ref209[0];
647
+ borderBaseRisk: shade(severityColors.risk, 0.4),
648
+ borderBaseDanger: computed(function (_ref212) {
649
+ var _ref213 = _slicedToArray(_ref212, 1),
650
+ danger = _ref213[0];
620
651
  return shade(danger, 0.6);
621
652
  }, ['colors.danger']),
622
- borderBaseSubdued: computed(function (_ref210) {
623
- var _ref211 = _slicedToArray(_ref210, 1),
624
- lightShade = _ref211[0];
653
+ borderBaseSubdued: computed(function (_ref214) {
654
+ var _ref215 = _slicedToArray(_ref214, 1),
655
+ lightShade = _ref215[0];
625
656
  return lightShade;
626
657
  }, ['colors.lightShade']),
627
- borderBaseDisabled: computed(function (_ref212) {
628
- var _ref213 = _slicedToArray(_ref212, 1),
629
- ghost = _ref213[0];
658
+ borderBaseDisabled: computed(function (_ref216) {
659
+ var _ref217 = _slicedToArray(_ref216, 1),
660
+ ghost = _ref217[0];
630
661
  return transparentize(ghost, 0.1);
631
662
  }, ['colors.ghost']),
632
- borderBasePlain: computed(function (_ref214) {
633
- var _ref215 = _slicedToArray(_ref214, 1),
634
- lightShade = _ref215[0];
663
+ borderBasePlain: computed(function (_ref218) {
664
+ var _ref219 = _slicedToArray(_ref218, 1),
665
+ lightShade = _ref219[0];
635
666
  return lightShade;
636
667
  }, ['colors.lightShade']),
637
668
  borderBaseFloating: 'transparent',
638
- borderBaseFormsColorSwatch: computed(function (_ref216) {
639
- var _ref217 = _slicedToArray(_ref216, 1),
640
- fullShade = _ref217[0];
669
+ borderBaseFormsColorSwatch: computed(function (_ref220) {
670
+ var _ref221 = _slicedToArray(_ref220, 1),
671
+ fullShade = _ref221[0];
641
672
  return transparentize(fullShade, 0.1);
642
673
  }, ['colors.fullShade']),
643
- borderBaseFormsControl: computed(function (_ref218) {
644
- var _ref219 = _slicedToArray(_ref218, 1),
645
- lightestShade = _ref219[0];
674
+ borderBaseFormsControl: computed(function (_ref222) {
675
+ var _ref223 = _slicedToArray(_ref222, 1),
676
+ lightestShade = _ref223[0];
646
677
  return tint(lightestShade, 0.31);
647
678
  }, ['colors.lightestShade']),
648
- borderStrongPrimary: computed(function (_ref220) {
649
- var _ref221 = _slicedToArray(_ref220, 1),
650
- borderBasePrimary = _ref221[0];
679
+ borderStrongPrimary: computed(function (_ref224) {
680
+ var _ref225 = _slicedToArray(_ref224, 1),
681
+ borderBasePrimary = _ref225[0];
651
682
  return borderBasePrimary;
652
683
  }, ['colors.borderBasePrimary']),
653
- borderStrongAccent: computed(function (_ref222) {
654
- var _ref223 = _slicedToArray(_ref222, 1),
655
- borderBaseAccent = _ref223[0];
684
+ borderStrongAccent: computed(function (_ref226) {
685
+ var _ref227 = _slicedToArray(_ref226, 1),
686
+ borderBaseAccent = _ref227[0];
656
687
  return borderBaseAccent;
657
688
  }, ['colors.borderBaseAccent']),
658
- borderStrongAccentSecondary: computed(function (_ref224) {
659
- var _ref225 = _slicedToArray(_ref224, 1),
660
- borderBaseAccentSecondary = _ref225[0];
689
+ borderStrongAccentSecondary: computed(function (_ref228) {
690
+ var _ref229 = _slicedToArray(_ref228, 1),
691
+ borderBaseAccentSecondary = _ref229[0];
661
692
  return borderBaseAccentSecondary;
662
693
  }, ['colors.borderBaseAccentSecondary']),
663
- borderStrongSuccess: computed(function (_ref226) {
664
- var _ref227 = _slicedToArray(_ref226, 1),
665
- borderBaseSuccess = _ref227[0];
694
+ borderStrongNeutral: computed(function (_ref230) {
695
+ var _ref231 = _slicedToArray(_ref230, 1),
696
+ borderBaseNeutral = _ref231[0];
697
+ return borderBaseNeutral;
698
+ }, ['colors.borderBaseNeutral']),
699
+ borderStrongSuccess: computed(function (_ref232) {
700
+ var _ref233 = _slicedToArray(_ref232, 1),
701
+ borderBaseSuccess = _ref233[0];
666
702
  return borderBaseSuccess;
667
703
  }, ['colors.borderBaseSuccess']),
668
- borderStrongWarning: computed(function (_ref228) {
669
- var _ref229 = _slicedToArray(_ref228, 1),
670
- borderBaseWarning = _ref229[0];
704
+ borderStrongWarning: computed(function (_ref234) {
705
+ var _ref235 = _slicedToArray(_ref234, 1),
706
+ borderBaseWarning = _ref235[0];
671
707
  return borderBaseWarning;
672
708
  }, ['colors.borderBaseWarning']),
673
- borderStrongDanger: computed(function (_ref230) {
674
- var _ref231 = _slicedToArray(_ref230, 1),
675
- borderBaseDanger = _ref231[0];
709
+ borderStrongRisk: computed(function (_ref236) {
710
+ var _ref237 = _slicedToArray(_ref236, 1),
711
+ borderBaseRisk = _ref237[0];
712
+ return borderBaseRisk;
713
+ }, ['colors.borderBaseRisk']),
714
+ borderStrongDanger: computed(function (_ref238) {
715
+ var _ref239 = _slicedToArray(_ref238, 1),
716
+ borderBaseDanger = _ref239[0];
676
717
  return borderBaseDanger;
677
718
  }, ['colors.borderBaseDanger'])
678
719
  };
@@ -686,43 +727,43 @@ export var dark_colors_ams = _objectSpread(_objectSpread(_objectSpread(_objectSp
686
727
  danger: '#F86B63'
687
728
  }, dark_shades), {}, {
688
729
  // Special
689
- body: computed(function (_ref232) {
690
- var _ref233 = _slicedToArray(_ref232, 1),
691
- lightestShade = _ref233[0];
730
+ body: computed(function (_ref240) {
731
+ var _ref241 = _slicedToArray(_ref240, 1),
732
+ lightestShade = _ref241[0];
692
733
  return shade(lightestShade, 0.45);
693
734
  }, ['colors.lightestShade']),
694
735
  highlight: '#2E2D25',
695
736
  disabled: '#515761',
696
737
  disabledText: computed(makeDisabledContrastColor('colors.disabled')),
697
- shadow: computed(function (_ref234) {
698
- var colors = _ref234.colors;
738
+ shadow: computed(function (_ref242) {
739
+ var colors = _ref242.colors;
699
740
  return colors.ink;
700
741
  })
701
742
  }, brand_text_colors), {}, {
702
743
  // Text
703
744
  text: '#DFE5EF',
704
- title: computed(function (_ref235) {
705
- var _ref236 = _slicedToArray(_ref235, 1),
706
- text = _ref236[0];
745
+ title: computed(function (_ref243) {
746
+ var _ref244 = _slicedToArray(_ref243, 1),
747
+ text = _ref244[0];
707
748
  return text;
708
749
  }, ['colors.text']),
709
750
  subduedText: computed(makeHighContrastColor('colors.mediumShade')),
710
- link: computed(function (_ref237) {
711
- var _ref238 = _slicedToArray(_ref237, 1),
712
- primaryText = _ref238[0];
751
+ link: computed(function (_ref245) {
752
+ var _ref246 = _slicedToArray(_ref245, 1),
753
+ primaryText = _ref246[0];
713
754
  return primaryText;
714
755
  }, ['colors.primaryText']),
715
756
  textParagraph: '#DFE5EF',
716
- textHeading: computed(function (_ref239) {
717
- var _ref240 = _slicedToArray(_ref239, 1),
718
- text = _ref240[0];
757
+ textHeading: computed(function (_ref247) {
758
+ var _ref248 = _slicedToArray(_ref247, 1),
759
+ text = _ref248[0];
719
760
  return text;
720
761
  }, ['colors.text']),
721
762
  textSubdued: computed(makeHighContrastColor('colors.mediumShade')),
722
763
  textDisabled: computed(makeDisabledContrastColor('colors.disabled')),
723
- textInverse: computed(function (_ref241) {
724
- var _ref242 = _slicedToArray(_ref241, 1),
725
- ink = _ref242[0];
764
+ textInverse: computed(function (_ref249) {
765
+ var _ref250 = _slicedToArray(_ref249, 1),
766
+ ink = _ref250[0];
726
767
  return ink;
727
768
  }, ['colors.ink'])
728
769
  }, dark_background_colors), dark_transparent_background_colors), dark_border_colors);
@@ -738,5 +779,6 @@ export var colors = {
738
779
  plainDark: '#000000',
739
780
  LIGHT: light_colors,
740
781
  DARK: dark_colors_ams,
741
- vis: colorVis
782
+ vis: colorVis,
783
+ severity: severityColors
742
784
  };
@@ -0,0 +1,20 @@
1
+ /*
2
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3
+ * or more contributor license agreements. Licensed under the Elastic License
4
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
5
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
6
+ * Side Public License, v 1.
7
+ */
8
+
9
+ /**
10
+ * These are not actually used, but we map them to ensure token parity.
11
+ * They are mapped to other vis colors
12
+ */
13
+ export var severityColors = {
14
+ unknown: '#D3DAE6',
15
+ neutral: '#BECFE3',
16
+ success: '#54B399',
17
+ warning: '#D6BF57',
18
+ risk: '#DA8B45',
19
+ danger: '#E7664C'
20
+ };