@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
@@ -9,6 +9,7 @@ var _manipulation = require("../../../../services/color/manipulation");
9
9
  var _utils = require("../../../../services/theme/utils");
10
10
  var _contrast = require("../../../../services/color/contrast");
11
11
  var _colors_vis = require("./_colors_vis");
12
+ var _colors_severity = require("./_colors_severity");
12
13
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
13
14
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
14
15
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -48,8 +49,10 @@ var brand_text_colors = exports.brand_text_colors = {
48
49
  textPrimary: (0, _utils.computed)((0, _contrast.makeHighContrastColor)('colors.primary')),
49
50
  textAccent: (0, _utils.computed)((0, _contrast.makeHighContrastColor)('colors.accent')),
50
51
  textAccentSecondary: (0, _utils.computed)((0, _contrast.makeHighContrastColor)('colors.success')),
52
+ textNeutral: (0, _utils.computed)((0, _contrast.makeHighContrastColor)(_colors_severity.severityColors.neutral)),
51
53
  textSuccess: (0, _utils.computed)((0, _contrast.makeHighContrastColor)('colors.success')),
52
54
  textWarning: (0, _utils.computed)((0, _contrast.makeHighContrastColor)('colors.warning')),
55
+ textRisk: (0, _utils.computed)((0, _contrast.makeHighContrastColor)(_colors_severity.severityColors.risk)),
53
56
  textDanger: (0, _utils.computed)((0, _contrast.makeHighContrastColor)('colors.danger'))
54
57
  };
55
58
  var shade_colors = exports.shade_colors = {
@@ -130,6 +133,7 @@ var background_colors = exports.background_colors = {
130
133
  success = _ref23[0];
131
134
  return (0, _manipulation.tint)(success, 0.9);
132
135
  }, ['colors.success']),
136
+ backgroundBaseNeutral: (0, _manipulation.tint)(_colors_severity.severityColors.neutral, 0.9),
133
137
  backgroundBaseSuccess: (0, _utils.computed)(function (_ref24) {
134
138
  var _ref25 = _slicedToArray(_ref24, 1),
135
139
  success = _ref25[0];
@@ -140,6 +144,7 @@ var background_colors = exports.background_colors = {
140
144
  warning = _ref27[0];
141
145
  return (0, _manipulation.tint)(warning, 0.9);
142
146
  }, ['colors.warning']),
147
+ backgroundBaseRisk: (0, _manipulation.tint)(_colors_severity.severityColors.risk, 0.9),
143
148
  backgroundBaseDanger: (0, _utils.computed)(function (_ref28) {
144
149
  var _ref29 = _slicedToArray(_ref28, 1),
145
150
  danger = _ref29[0];
@@ -215,6 +220,7 @@ var background_colors = exports.background_colors = {
215
220
  success = _ref57[0];
216
221
  return (0, _manipulation.tint)(success, 0.8);
217
222
  }, ['colors.success']),
223
+ backgroundLightNeutral: (0, _manipulation.tint)(_colors_severity.severityColors.neutral, 0.8),
218
224
  backgroundLightSuccess: (0, _utils.computed)(function (_ref58) {
219
225
  var _ref59 = _slicedToArray(_ref58, 1),
220
226
  success = _ref59[0];
@@ -225,6 +231,7 @@ var background_colors = exports.background_colors = {
225
231
  warning = _ref61[0];
226
232
  return (0, _manipulation.tint)(warning, 0.8);
227
233
  }, ['colors.warning']),
234
+ backgroundLightRisk: (0, _manipulation.tint)(_colors_severity.severityColors.risk, 0.8),
228
235
  backgroundLightDanger: (0, _utils.computed)(function (_ref62) {
229
236
  var _ref63 = _slicedToArray(_ref62, 1),
230
237
  danger = _ref63[0];
@@ -250,6 +257,7 @@ var background_colors = exports.background_colors = {
250
257
  success = _ref71[0];
251
258
  return (0, _manipulation.tint)(success, 0.3);
252
259
  }, ['colors.success']),
260
+ backgroundFilledNeutral: _colors_severity.severityColors.neutral,
253
261
  backgroundFilledSuccess: (0, _utils.computed)(function (_ref72) {
254
262
  var _ref73 = _slicedToArray(_ref72, 1),
255
263
  success = _ref73[0];
@@ -260,6 +268,7 @@ var background_colors = exports.background_colors = {
260
268
  warning = _ref75[0];
261
269
  return warning;
262
270
  }, ['colors.warning']),
271
+ backgroundFilledRisk: _colors_severity.severityColors.risk,
263
272
  backgroundFilledDanger: (0, _utils.computed)(function (_ref76) {
264
273
  var _ref77 = _slicedToArray(_ref76, 1),
265
274
  danger = _ref77[0];
@@ -288,6 +297,7 @@ var transparent_background_colors = exports.transparent_background_colors = {
288
297
  success = _ref85[0];
289
298
  return (0, _manipulation.transparentize)(success, 0.1);
290
299
  }, ['colors.success']),
300
+ backgroundTransparentNeutral: (0, _manipulation.transparentize)(_colors_severity.severityColors.neutral, 0.1),
291
301
  backgroundTransparentSuccess: (0, _utils.computed)(function (_ref86) {
292
302
  var _ref87 = _slicedToArray(_ref86, 1),
293
303
  success = _ref87[0];
@@ -298,6 +308,7 @@ var transparent_background_colors = exports.transparent_background_colors = {
298
308
  warning = _ref89[0];
299
309
  return (0, _manipulation.transparentize)(warning, 0.1);
300
310
  }, ['colors.warning']),
311
+ backgroundTransparentRisk: (0, _manipulation.transparentize)(_colors_severity.severityColors.risk, 0.1),
301
312
  backgroundTransparentDanger: (0, _utils.computed)(function (_ref90) {
302
313
  var _ref91 = _slicedToArray(_ref90, 1),
303
314
  danger = _ref91[0];
@@ -335,6 +346,7 @@ var border_colors = exports.border_colors = {
335
346
  success = _ref103[0];
336
347
  return (0, _manipulation.tint)(success, 0.6);
337
348
  }, ['colors.success']),
349
+ borderBaseNeutral: (0, _manipulation.tint)(_colors_severity.severityColors.neutral, 0.6),
338
350
  borderBaseSuccess: (0, _utils.computed)(function (_ref104) {
339
351
  var _ref105 = _slicedToArray(_ref104, 1),
340
352
  success = _ref105[0];
@@ -345,6 +357,7 @@ var border_colors = exports.border_colors = {
345
357
  warning = _ref107[0];
346
358
  return (0, _manipulation.tint)(warning, 0.4);
347
359
  }, ['colors.warning']),
360
+ borderBaseRisk: (0, _manipulation.tint)(_colors_severity.severityColors.risk, 0.4),
348
361
  borderBaseDanger: (0, _utils.computed)(function (_ref108) {
349
362
  var _ref109 = _slicedToArray(_ref108, 1),
350
363
  danger = _ref109[0];
@@ -391,19 +404,29 @@ var border_colors = exports.border_colors = {
391
404
  borderBaseAccentSecondary = _ref125[0];
392
405
  return borderBaseAccentSecondary;
393
406
  }, ['colors.borderBaseAccentSecondary']),
394
- borderStrongSuccess: (0, _utils.computed)(function (_ref126) {
407
+ borderStrongNeutral: (0, _utils.computed)(function (_ref126) {
395
408
  var _ref127 = _slicedToArray(_ref126, 1),
396
- borderBaseSuccess = _ref127[0];
409
+ borderBaseNeutral = _ref127[0];
410
+ return borderBaseNeutral;
411
+ }, ['colors.borderBaseNeutral']),
412
+ borderStrongSuccess: (0, _utils.computed)(function (_ref128) {
413
+ var _ref129 = _slicedToArray(_ref128, 1),
414
+ borderBaseSuccess = _ref129[0];
397
415
  return borderBaseSuccess;
398
416
  }, ['colors.borderBaseSuccess']),
399
- borderStrongWarning: (0, _utils.computed)(function (_ref128) {
400
- var _ref129 = _slicedToArray(_ref128, 1),
401
- borderBaseWarning = _ref129[0];
417
+ borderStrongWarning: (0, _utils.computed)(function (_ref130) {
418
+ var _ref131 = _slicedToArray(_ref130, 1),
419
+ borderBaseWarning = _ref131[0];
402
420
  return borderBaseWarning;
403
421
  }, ['colors.borderBaseWarning']),
404
- borderStrongDanger: (0, _utils.computed)(function (_ref130) {
405
- var _ref131 = _slicedToArray(_ref130, 1),
406
- borderBaseDanger = _ref131[0];
422
+ borderStrongRisk: (0, _utils.computed)(function (_ref132) {
423
+ var _ref133 = _slicedToArray(_ref132, 1),
424
+ borderBaseRisk = _ref133[0];
425
+ return borderBaseRisk;
426
+ }, ['colors.borderBaseRisk']),
427
+ borderStrongDanger: (0, _utils.computed)(function (_ref134) {
428
+ var _ref135 = _slicedToArray(_ref134, 1),
429
+ borderBaseDanger = _ref135[0];
407
430
  return borderBaseDanger;
408
431
  }, ['colors.borderBaseDanger'])
409
432
  };
@@ -423,259 +446,277 @@ var dark_shades = exports.dark_shades = {
423
446
  fullShade: '#FFFFFF'
424
447
  };
425
448
  var dark_background_colors = exports.dark_background_colors = {
426
- backgroundBasePrimary: (0, _utils.computed)(function (_ref132) {
427
- var _ref133 = _slicedToArray(_ref132, 1),
428
- primary = _ref133[0];
449
+ backgroundBasePrimary: (0, _utils.computed)(function (_ref136) {
450
+ var _ref137 = _slicedToArray(_ref136, 1),
451
+ primary = _ref137[0];
429
452
  return (0, _manipulation.shade)(primary, 0.8);
430
453
  }, ['colors.primary']),
431
- backgroundBaseAccent: (0, _utils.computed)(function (_ref134) {
432
- var _ref135 = _slicedToArray(_ref134, 1),
433
- accent = _ref135[0];
454
+ backgroundBaseAccent: (0, _utils.computed)(function (_ref138) {
455
+ var _ref139 = _slicedToArray(_ref138, 1),
456
+ accent = _ref139[0];
434
457
  return (0, _manipulation.shade)(accent, 0.8);
435
458
  }, ['colors.accent']),
436
- backgroundBaseAccentSecondary: (0, _utils.computed)(function (_ref136) {
437
- var _ref137 = _slicedToArray(_ref136, 1),
438
- success = _ref137[0];
459
+ backgroundBaseAccentSecondary: (0, _utils.computed)(function (_ref140) {
460
+ var _ref141 = _slicedToArray(_ref140, 1),
461
+ success = _ref141[0];
439
462
  return (0, _manipulation.shade)(success, 0.8);
440
463
  }, ['colors.success']),
441
- backgroundBaseSuccess: (0, _utils.computed)(function (_ref138) {
442
- var _ref139 = _slicedToArray(_ref138, 1),
443
- success = _ref139[0];
464
+ backgroundBaseNeutral: (0, _manipulation.shade)(_colors_severity.severityColors.neutral, 0.8),
465
+ backgroundBaseSuccess: (0, _utils.computed)(function (_ref142) {
466
+ var _ref143 = _slicedToArray(_ref142, 1),
467
+ success = _ref143[0];
444
468
  return (0, _manipulation.shade)(success, 0.8);
445
469
  }, ['colors.success']),
446
- backgroundBaseWarning: (0, _utils.computed)(function (_ref140) {
447
- var _ref141 = _slicedToArray(_ref140, 1),
448
- warning = _ref141[0];
470
+ backgroundBaseWarning: (0, _utils.computed)(function (_ref144) {
471
+ var _ref145 = _slicedToArray(_ref144, 1),
472
+ warning = _ref145[0];
449
473
  return (0, _manipulation.shade)(warning, 0.8);
450
474
  }, ['colors.warning']),
451
- backgroundBaseDanger: (0, _utils.computed)(function (_ref142) {
452
- var _ref143 = _slicedToArray(_ref142, 1),
453
- danger = _ref143[0];
475
+ backgroundBaseRisk: (0, _manipulation.shade)(_colors_severity.severityColors.risk, 0.8),
476
+ backgroundBaseDanger: (0, _utils.computed)(function (_ref146) {
477
+ var _ref147 = _slicedToArray(_ref146, 1),
478
+ danger = _ref147[0];
454
479
  return (0, _manipulation.shade)(danger, 0.8);
455
480
  }, ['colors.danger']),
456
- backgroundBaseSubdued: (0, _utils.computed)(function (_ref144) {
457
- var _ref145 = _slicedToArray(_ref144, 1),
458
- body = _ref145[0];
481
+ backgroundBaseSubdued: (0, _utils.computed)(function (_ref148) {
482
+ var _ref149 = _slicedToArray(_ref148, 1),
483
+ body = _ref149[0];
459
484
  return body;
460
485
  }, ['colors.body']),
461
- backgroundBaseDisabled: (0, _utils.computed)(function (_ref146) {
462
- var _ref147 = _slicedToArray(_ref146, 1),
463
- disabled = _ref147[0];
486
+ backgroundBaseDisabled: (0, _utils.computed)(function (_ref150) {
487
+ var _ref151 = _slicedToArray(_ref150, 1),
488
+ disabled = _ref151[0];
464
489
  return disabled;
465
490
  }, ['colors.disabled']),
466
- backgroundBaseHighlighted: (0, _utils.computed)(function (_ref148) {
467
- var _ref149 = _slicedToArray(_ref148, 1),
468
- backgroundBaseSubdued = _ref149[0];
491
+ backgroundBaseHighlighted: (0, _utils.computed)(function (_ref152) {
492
+ var _ref153 = _slicedToArray(_ref152, 1),
493
+ backgroundBaseSubdued = _ref153[0];
469
494
  return backgroundBaseSubdued;
470
495
  }, ['colors.backgroundBaseSubdued']),
471
- backgroundBasePlain: (0, _utils.computed)(function (_ref150) {
472
- var _ref151 = _slicedToArray(_ref150, 1),
473
- emptyShade = _ref151[0];
496
+ backgroundBasePlain: (0, _utils.computed)(function (_ref154) {
497
+ var _ref155 = _slicedToArray(_ref154, 1),
498
+ emptyShade = _ref155[0];
474
499
  return emptyShade;
475
500
  }, ['colors.emptyShade']),
476
- backgroundBaseFormsPrepend: (0, _utils.computed)(function (_ref152) {
477
- var _ref153 = _slicedToArray(_ref152, 1),
478
- lightShade = _ref153[0];
501
+ backgroundBaseFormsPrepend: (0, _utils.computed)(function (_ref156) {
502
+ var _ref157 = _slicedToArray(_ref156, 1),
503
+ lightShade = _ref157[0];
479
504
  return (0, _manipulation.shade)(lightShade, 0.15);
480
505
  }, ['colors.lightShade']),
481
- backgroundBaseFormsControlDisabled: (0, _utils.computed)(function (_ref154) {
482
- var _ref155 = _slicedToArray(_ref154, 1),
483
- mediumShade = _ref155[0];
506
+ backgroundBaseFormsControlDisabled: (0, _utils.computed)(function (_ref158) {
507
+ var _ref159 = _slicedToArray(_ref158, 1),
508
+ mediumShade = _ref159[0];
484
509
  return mediumShade;
485
510
  }, ['colors.mediumShade']),
486
- backgroundBaseInteractiveHover: (0, _utils.computed)(function (_ref156) {
487
- var _ref157 = _slicedToArray(_ref156, 1),
488
- lightShade = _ref157[0];
511
+ backgroundBaseInteractiveHover: (0, _utils.computed)(function (_ref160) {
512
+ var _ref161 = _slicedToArray(_ref160, 1),
513
+ lightShade = _ref161[0];
489
514
  return (0, _manipulation.transparentize)(lightShade, 0.2);
490
515
  }, ['colors.lightShade']),
491
- backgroundBaseInteractiveSelect: (0, _utils.computed)(function (_ref158) {
492
- var _ref159 = _slicedToArray(_ref158, 1),
493
- primary = _ref159[0];
516
+ backgroundBaseInteractiveSelect: (0, _utils.computed)(function (_ref162) {
517
+ var _ref163 = _slicedToArray(_ref162, 1),
518
+ primary = _ref163[0];
494
519
  return (0, _manipulation.shade)(primary, 0.7);
495
520
  }, ['colors.primary']),
496
- backgroundBaseInteractiveOverlay: (0, _utils.computed)(function (_ref160) {
497
- var _ref161 = _slicedToArray(_ref160, 1),
498
- ink = _ref161[0];
521
+ backgroundBaseInteractiveOverlay: (0, _utils.computed)(function (_ref164) {
522
+ var _ref165 = _slicedToArray(_ref164, 1),
523
+ ink = _ref165[0];
499
524
  return (0, _manipulation.transparentize)(ink, 0.5);
500
525
  }, ['colors.ink']),
501
- backgroundBaseSkeletonEdge: (0, _utils.computed)(function (_ref162) {
502
- var _ref163 = _slicedToArray(_ref162, 1),
503
- lightShade = _ref163[0];
526
+ backgroundBaseSkeletonEdge: (0, _utils.computed)(function (_ref166) {
527
+ var _ref167 = _slicedToArray(_ref166, 1),
528
+ lightShade = _ref167[0];
504
529
  return (0, _manipulation.shade)(lightShade, 0.12);
505
530
  }, ['colors.lightShade']),
506
- backgroundBaseSkeletonMiddle: (0, _utils.computed)(function (_ref164) {
507
- var _ref165 = _slicedToArray(_ref164, 1),
508
- lightShade = _ref165[0];
531
+ backgroundBaseSkeletonMiddle: (0, _utils.computed)(function (_ref168) {
532
+ var _ref169 = _slicedToArray(_ref168, 1),
533
+ lightShade = _ref169[0];
509
534
  return (0, _manipulation.shade)(lightShade, 0.24);
510
535
  }, ['colors.lightShade']),
511
- backgroundLightPrimary: (0, _utils.computed)(function (_ref166) {
512
- var _ref167 = _slicedToArray(_ref166, 1),
513
- primary = _ref167[0];
536
+ backgroundLightPrimary: (0, _utils.computed)(function (_ref170) {
537
+ var _ref171 = _slicedToArray(_ref170, 1),
538
+ primary = _ref171[0];
514
539
  return (0, _manipulation.shade)(primary, 0.7);
515
540
  }, ['colors.primary']),
516
- backgroundLightAccent: (0, _utils.computed)(function (_ref168) {
517
- var _ref169 = _slicedToArray(_ref168, 1),
518
- accent = _ref169[0];
541
+ backgroundLightAccent: (0, _utils.computed)(function (_ref172) {
542
+ var _ref173 = _slicedToArray(_ref172, 1),
543
+ accent = _ref173[0];
519
544
  return (0, _manipulation.shade)(accent, 0.7);
520
545
  }, ['colors.accent']),
521
- backgroundLightAccentSecondary: (0, _utils.computed)(function (_ref170) {
522
- var _ref171 = _slicedToArray(_ref170, 1),
523
- success = _ref171[0];
546
+ backgroundLightAccentSecondary: (0, _utils.computed)(function (_ref174) {
547
+ var _ref175 = _slicedToArray(_ref174, 1),
548
+ success = _ref175[0];
524
549
  return (0, _manipulation.shade)(success, 0.7);
525
550
  }, ['colors.success']),
526
- backgroundLightSuccess: (0, _utils.computed)(function (_ref172) {
527
- var _ref173 = _slicedToArray(_ref172, 1),
528
- success = _ref173[0];
551
+ backgroundLightNeutral: (0, _manipulation.shade)(_colors_severity.severityColors.neutral, 0.7),
552
+ backgroundLightSuccess: (0, _utils.computed)(function (_ref176) {
553
+ var _ref177 = _slicedToArray(_ref176, 1),
554
+ success = _ref177[0];
529
555
  return (0, _manipulation.shade)(success, 0.7);
530
556
  }, ['colors.success']),
531
- backgroundLightWarning: (0, _utils.computed)(function (_ref174) {
532
- var _ref175 = _slicedToArray(_ref174, 1),
533
- warning = _ref175[0];
557
+ backgroundLightWarning: (0, _utils.computed)(function (_ref178) {
558
+ var _ref179 = _slicedToArray(_ref178, 1),
559
+ warning = _ref179[0];
534
560
  return (0, _manipulation.shade)(warning, 0.7);
535
561
  }, ['colors.warning']),
536
- backgroundLightDanger: (0, _utils.computed)(function (_ref176) {
537
- var _ref177 = _slicedToArray(_ref176, 1),
538
- danger = _ref177[0];
562
+ backgroundLightRisk: (0, _manipulation.shade)(_colors_severity.severityColors.risk, 0.7),
563
+ backgroundLightDanger: (0, _utils.computed)(function (_ref180) {
564
+ var _ref181 = _slicedToArray(_ref180, 1),
565
+ danger = _ref181[0];
539
566
  return (0, _manipulation.shade)(danger, 0.7);
540
567
  }, ['colors.danger']),
541
- backgroundLightText: (0, _utils.computed)(function (_ref178) {
542
- var _ref179 = _slicedToArray(_ref178, 1),
543
- lightShade = _ref179[0];
568
+ backgroundLightText: (0, _utils.computed)(function (_ref182) {
569
+ var _ref183 = _slicedToArray(_ref182, 1),
570
+ lightShade = _ref183[0];
544
571
  return (0, _manipulation.shade)(lightShade, 0.2);
545
572
  }, ['colors.lightShade']),
546
- backgroundFilledPrimary: (0, _utils.computed)(function (_ref180) {
547
- var _ref181 = _slicedToArray(_ref180, 1),
548
- primary = _ref181[0];
573
+ backgroundFilledPrimary: (0, _utils.computed)(function (_ref184) {
574
+ var _ref185 = _slicedToArray(_ref184, 1),
575
+ primary = _ref185[0];
549
576
  return primary;
550
577
  }, ['colors.primary']),
551
- backgroundFilledAccent: (0, _utils.computed)(function (_ref182) {
552
- var _ref183 = _slicedToArray(_ref182, 1),
553
- accent = _ref183[0];
578
+ backgroundFilledAccent: (0, _utils.computed)(function (_ref186) {
579
+ var _ref187 = _slicedToArray(_ref186, 1),
580
+ accent = _ref187[0];
554
581
  return accent;
555
582
  }, ['colors.accent']),
556
- backgroundFilledAccentSecondary: (0, _utils.computed)(function (_ref184) {
557
- var _ref185 = _slicedToArray(_ref184, 1),
558
- success = _ref185[0];
583
+ backgroundFilledAccentSecondary: (0, _utils.computed)(function (_ref188) {
584
+ var _ref189 = _slicedToArray(_ref188, 1),
585
+ success = _ref189[0];
559
586
  return success;
560
587
  }, ['colors.success']),
561
- backgroundFilledSuccess: (0, _utils.computed)(function (_ref186) {
562
- var _ref187 = _slicedToArray(_ref186, 1),
563
- success = _ref187[0];
588
+ backgroundFilledNeutral: _colors_severity.severityColors.neutral,
589
+ backgroundFilledSuccess: (0, _utils.computed)(function (_ref190) {
590
+ var _ref191 = _slicedToArray(_ref190, 1),
591
+ success = _ref191[0];
564
592
  return success;
565
593
  }, ['colors.success']),
566
- backgroundFilledWarning: (0, _utils.computed)(function (_ref188) {
567
- var _ref189 = _slicedToArray(_ref188, 1),
568
- warning = _ref189[0];
594
+ backgroundFilledWarning: (0, _utils.computed)(function (_ref192) {
595
+ var _ref193 = _slicedToArray(_ref192, 1),
596
+ warning = _ref193[0];
569
597
  return warning;
570
598
  }, ['colors.warning']),
571
- backgroundFilledDanger: (0, _utils.computed)(function (_ref190) {
572
- var _ref191 = _slicedToArray(_ref190, 1),
573
- danger = _ref191[0];
599
+ backgroundFilledRisk: _colors_severity.severityColors.risk,
600
+ backgroundFilledDanger: (0, _utils.computed)(function (_ref194) {
601
+ var _ref195 = _slicedToArray(_ref194, 1),
602
+ danger = _ref195[0];
574
603
  return danger;
575
604
  }, ['colors.danger']),
576
- backgroundFilledText: (0, _utils.computed)(function (_ref192) {
577
- var _ref193 = _slicedToArray(_ref192, 1),
578
- text = _ref193[0];
605
+ backgroundFilledText: (0, _utils.computed)(function (_ref196) {
606
+ var _ref197 = _slicedToArray(_ref196, 1),
607
+ text = _ref197[0];
579
608
  return text;
580
609
  }, ['colors.text'])
581
610
  };
582
611
  var dark_transparent_background_colors = exports.dark_transparent_background_colors = _objectSpread(_objectSpread({}, transparent_background_colors), {}, {
583
- backgroundTransparentSubdued: (0, _utils.computed)(function (_ref194) {
584
- var _ref195 = _slicedToArray(_ref194, 1),
585
- lightShade = _ref195[0];
612
+ backgroundTransparentSubdued: (0, _utils.computed)(function (_ref198) {
613
+ var _ref199 = _slicedToArray(_ref198, 1),
614
+ lightShade = _ref199[0];
586
615
  return (0, _manipulation.transparentize)(lightShade, 0.4);
587
616
  }, ['colors.lightShade']),
588
- backgroundTransparentHighlighted: (0, _utils.computed)(function (_ref196) {
589
- var _ref197 = _slicedToArray(_ref196, 1),
590
- backgroundTransparentSubdued = _ref197[0];
617
+ backgroundTransparentHighlighted: (0, _utils.computed)(function (_ref200) {
618
+ var _ref201 = _slicedToArray(_ref200, 1),
619
+ backgroundTransparentSubdued = _ref201[0];
591
620
  return backgroundTransparentSubdued;
592
621
  }, ['colors.backgroundTransparentSubdued'])
593
622
  });
594
623
  var dark_border_colors = exports.dark_border_colors = {
595
- borderBasePrimary: (0, _utils.computed)(function (_ref198) {
596
- var _ref199 = _slicedToArray(_ref198, 1),
597
- primary = _ref199[0];
624
+ borderBasePrimary: (0, _utils.computed)(function (_ref202) {
625
+ var _ref203 = _slicedToArray(_ref202, 1),
626
+ primary = _ref203[0];
598
627
  return (0, _manipulation.shade)(primary, 0.6);
599
628
  }, ['colors.primary']),
600
- borderBaseAccent: (0, _utils.computed)(function (_ref200) {
601
- var _ref201 = _slicedToArray(_ref200, 1),
602
- accent = _ref201[0];
629
+ borderBaseAccent: (0, _utils.computed)(function (_ref204) {
630
+ var _ref205 = _slicedToArray(_ref204, 1),
631
+ accent = _ref205[0];
603
632
  return (0, _manipulation.shade)(accent, 0.6);
604
633
  }, ['colors.accent']),
605
- borderBaseAccentSecondary: (0, _utils.computed)(function (_ref202) {
606
- var _ref203 = _slicedToArray(_ref202, 1),
607
- success = _ref203[0];
634
+ borderBaseAccentSecondary: (0, _utils.computed)(function (_ref206) {
635
+ var _ref207 = _slicedToArray(_ref206, 1),
636
+ success = _ref207[0];
608
637
  return (0, _manipulation.shade)(success, 0.6);
609
638
  }, ['colors.success']),
610
- borderBaseSuccess: (0, _utils.computed)(function (_ref204) {
611
- var _ref205 = _slicedToArray(_ref204, 1),
612
- success = _ref205[0];
639
+ borderBaseNeutral: (0, _manipulation.shade)(_colors_severity.severityColors.neutral, 0.6),
640
+ borderBaseSuccess: (0, _utils.computed)(function (_ref208) {
641
+ var _ref209 = _slicedToArray(_ref208, 1),
642
+ success = _ref209[0];
613
643
  return (0, _manipulation.shade)(success, 0.6);
614
644
  }, ['colors.success']),
615
- borderBaseWarning: (0, _utils.computed)(function (_ref206) {
616
- var _ref207 = _slicedToArray(_ref206, 1),
617
- warning = _ref207[0];
645
+ borderBaseWarning: (0, _utils.computed)(function (_ref210) {
646
+ var _ref211 = _slicedToArray(_ref210, 1),
647
+ warning = _ref211[0];
618
648
  return (0, _manipulation.shade)(warning, 0.4);
619
649
  }, ['colors.warning']),
620
- borderBaseDanger: (0, _utils.computed)(function (_ref208) {
621
- var _ref209 = _slicedToArray(_ref208, 1),
622
- danger = _ref209[0];
650
+ borderBaseRisk: (0, _manipulation.shade)(_colors_severity.severityColors.risk, 0.4),
651
+ borderBaseDanger: (0, _utils.computed)(function (_ref212) {
652
+ var _ref213 = _slicedToArray(_ref212, 1),
653
+ danger = _ref213[0];
623
654
  return (0, _manipulation.shade)(danger, 0.6);
624
655
  }, ['colors.danger']),
625
- borderBaseSubdued: (0, _utils.computed)(function (_ref210) {
626
- var _ref211 = _slicedToArray(_ref210, 1),
627
- lightShade = _ref211[0];
656
+ borderBaseSubdued: (0, _utils.computed)(function (_ref214) {
657
+ var _ref215 = _slicedToArray(_ref214, 1),
658
+ lightShade = _ref215[0];
628
659
  return lightShade;
629
660
  }, ['colors.lightShade']),
630
- borderBaseDisabled: (0, _utils.computed)(function (_ref212) {
631
- var _ref213 = _slicedToArray(_ref212, 1),
632
- ghost = _ref213[0];
661
+ borderBaseDisabled: (0, _utils.computed)(function (_ref216) {
662
+ var _ref217 = _slicedToArray(_ref216, 1),
663
+ ghost = _ref217[0];
633
664
  return (0, _manipulation.transparentize)(ghost, 0.1);
634
665
  }, ['colors.ghost']),
635
- borderBasePlain: (0, _utils.computed)(function (_ref214) {
636
- var _ref215 = _slicedToArray(_ref214, 1),
637
- lightShade = _ref215[0];
666
+ borderBasePlain: (0, _utils.computed)(function (_ref218) {
667
+ var _ref219 = _slicedToArray(_ref218, 1),
668
+ lightShade = _ref219[0];
638
669
  return lightShade;
639
670
  }, ['colors.lightShade']),
640
671
  borderBaseFloating: 'transparent',
641
- borderBaseFormsColorSwatch: (0, _utils.computed)(function (_ref216) {
642
- var _ref217 = _slicedToArray(_ref216, 1),
643
- fullShade = _ref217[0];
672
+ borderBaseFormsColorSwatch: (0, _utils.computed)(function (_ref220) {
673
+ var _ref221 = _slicedToArray(_ref220, 1),
674
+ fullShade = _ref221[0];
644
675
  return (0, _manipulation.transparentize)(fullShade, 0.1);
645
676
  }, ['colors.fullShade']),
646
- borderBaseFormsControl: (0, _utils.computed)(function (_ref218) {
647
- var _ref219 = _slicedToArray(_ref218, 1),
648
- lightestShade = _ref219[0];
677
+ borderBaseFormsControl: (0, _utils.computed)(function (_ref222) {
678
+ var _ref223 = _slicedToArray(_ref222, 1),
679
+ lightestShade = _ref223[0];
649
680
  return (0, _manipulation.tint)(lightestShade, 0.31);
650
681
  }, ['colors.lightestShade']),
651
- borderStrongPrimary: (0, _utils.computed)(function (_ref220) {
652
- var _ref221 = _slicedToArray(_ref220, 1),
653
- borderBasePrimary = _ref221[0];
682
+ borderStrongPrimary: (0, _utils.computed)(function (_ref224) {
683
+ var _ref225 = _slicedToArray(_ref224, 1),
684
+ borderBasePrimary = _ref225[0];
654
685
  return borderBasePrimary;
655
686
  }, ['colors.borderBasePrimary']),
656
- borderStrongAccent: (0, _utils.computed)(function (_ref222) {
657
- var _ref223 = _slicedToArray(_ref222, 1),
658
- borderBaseAccent = _ref223[0];
687
+ borderStrongAccent: (0, _utils.computed)(function (_ref226) {
688
+ var _ref227 = _slicedToArray(_ref226, 1),
689
+ borderBaseAccent = _ref227[0];
659
690
  return borderBaseAccent;
660
691
  }, ['colors.borderBaseAccent']),
661
- borderStrongAccentSecondary: (0, _utils.computed)(function (_ref224) {
662
- var _ref225 = _slicedToArray(_ref224, 1),
663
- borderBaseAccentSecondary = _ref225[0];
692
+ borderStrongAccentSecondary: (0, _utils.computed)(function (_ref228) {
693
+ var _ref229 = _slicedToArray(_ref228, 1),
694
+ borderBaseAccentSecondary = _ref229[0];
664
695
  return borderBaseAccentSecondary;
665
696
  }, ['colors.borderBaseAccentSecondary']),
666
- borderStrongSuccess: (0, _utils.computed)(function (_ref226) {
667
- var _ref227 = _slicedToArray(_ref226, 1),
668
- borderBaseSuccess = _ref227[0];
697
+ borderStrongNeutral: (0, _utils.computed)(function (_ref230) {
698
+ var _ref231 = _slicedToArray(_ref230, 1),
699
+ borderBaseNeutral = _ref231[0];
700
+ return borderBaseNeutral;
701
+ }, ['colors.borderBaseNeutral']),
702
+ borderStrongSuccess: (0, _utils.computed)(function (_ref232) {
703
+ var _ref233 = _slicedToArray(_ref232, 1),
704
+ borderBaseSuccess = _ref233[0];
669
705
  return borderBaseSuccess;
670
706
  }, ['colors.borderBaseSuccess']),
671
- borderStrongWarning: (0, _utils.computed)(function (_ref228) {
672
- var _ref229 = _slicedToArray(_ref228, 1),
673
- borderBaseWarning = _ref229[0];
707
+ borderStrongWarning: (0, _utils.computed)(function (_ref234) {
708
+ var _ref235 = _slicedToArray(_ref234, 1),
709
+ borderBaseWarning = _ref235[0];
674
710
  return borderBaseWarning;
675
711
  }, ['colors.borderBaseWarning']),
676
- borderStrongDanger: (0, _utils.computed)(function (_ref230) {
677
- var _ref231 = _slicedToArray(_ref230, 1),
678
- borderBaseDanger = _ref231[0];
712
+ borderStrongRisk: (0, _utils.computed)(function (_ref236) {
713
+ var _ref237 = _slicedToArray(_ref236, 1),
714
+ borderBaseRisk = _ref237[0];
715
+ return borderBaseRisk;
716
+ }, ['colors.borderBaseRisk']),
717
+ borderStrongDanger: (0, _utils.computed)(function (_ref238) {
718
+ var _ref239 = _slicedToArray(_ref238, 1),
719
+ borderBaseDanger = _ref239[0];
679
720
  return borderBaseDanger;
680
721
  }, ['colors.borderBaseDanger'])
681
722
  };
@@ -689,43 +730,43 @@ var dark_colors_ams = exports.dark_colors_ams = _objectSpread(_objectSpread(_obj
689
730
  danger: '#F86B63'
690
731
  }, dark_shades), {}, {
691
732
  // Special
692
- body: (0, _utils.computed)(function (_ref232) {
693
- var _ref233 = _slicedToArray(_ref232, 1),
694
- lightestShade = _ref233[0];
733
+ body: (0, _utils.computed)(function (_ref240) {
734
+ var _ref241 = _slicedToArray(_ref240, 1),
735
+ lightestShade = _ref241[0];
695
736
  return (0, _manipulation.shade)(lightestShade, 0.45);
696
737
  }, ['colors.lightestShade']),
697
738
  highlight: '#2E2D25',
698
739
  disabled: '#515761',
699
740
  disabledText: (0, _utils.computed)((0, _contrast.makeDisabledContrastColor)('colors.disabled')),
700
- shadow: (0, _utils.computed)(function (_ref234) {
701
- var colors = _ref234.colors;
741
+ shadow: (0, _utils.computed)(function (_ref242) {
742
+ var colors = _ref242.colors;
702
743
  return colors.ink;
703
744
  })
704
745
  }, brand_text_colors), {}, {
705
746
  // Text
706
747
  text: '#DFE5EF',
707
- title: (0, _utils.computed)(function (_ref235) {
708
- var _ref236 = _slicedToArray(_ref235, 1),
709
- text = _ref236[0];
748
+ title: (0, _utils.computed)(function (_ref243) {
749
+ var _ref244 = _slicedToArray(_ref243, 1),
750
+ text = _ref244[0];
710
751
  return text;
711
752
  }, ['colors.text']),
712
753
  subduedText: (0, _utils.computed)((0, _contrast.makeHighContrastColor)('colors.mediumShade')),
713
- link: (0, _utils.computed)(function (_ref237) {
714
- var _ref238 = _slicedToArray(_ref237, 1),
715
- primaryText = _ref238[0];
754
+ link: (0, _utils.computed)(function (_ref245) {
755
+ var _ref246 = _slicedToArray(_ref245, 1),
756
+ primaryText = _ref246[0];
716
757
  return primaryText;
717
758
  }, ['colors.primaryText']),
718
759
  textParagraph: '#DFE5EF',
719
- textHeading: (0, _utils.computed)(function (_ref239) {
720
- var _ref240 = _slicedToArray(_ref239, 1),
721
- text = _ref240[0];
760
+ textHeading: (0, _utils.computed)(function (_ref247) {
761
+ var _ref248 = _slicedToArray(_ref247, 1),
762
+ text = _ref248[0];
722
763
  return text;
723
764
  }, ['colors.text']),
724
765
  textSubdued: (0, _utils.computed)((0, _contrast.makeHighContrastColor)('colors.mediumShade')),
725
766
  textDisabled: (0, _utils.computed)((0, _contrast.makeDisabledContrastColor)('colors.disabled')),
726
- textInverse: (0, _utils.computed)(function (_ref241) {
727
- var _ref242 = _slicedToArray(_ref241, 1),
728
- ink = _ref242[0];
767
+ textInverse: (0, _utils.computed)(function (_ref249) {
768
+ var _ref250 = _slicedToArray(_ref249, 1),
769
+ ink = _ref250[0];
729
770
  return ink;
730
771
  }, ['colors.ink'])
731
772
  }, dark_background_colors), dark_transparent_background_colors), dark_border_colors);
@@ -741,5 +782,6 @@ var colors = exports.colors = {
741
782
  plainDark: '#000000',
742
783
  LIGHT: light_colors,
743
784
  DARK: dark_colors_ams,
744
- vis: _colors_vis.colorVis
785
+ vis: _colors_vis.colorVis,
786
+ severity: _colors_severity.severityColors
745
787
  };