@mirohq/design-system-themes 1.3.13 → 1.3.15

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 (12) hide show
  1. package/base.css +42 -19
  2. package/dark.css +44 -17
  3. package/dist/main.js +83 -23
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +83 -23
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +28 -3
  8. package/light.css +42 -19
  9. package/metadata.json +50 -5
  10. package/new-dark.css +45 -18
  11. package/new-light.css +54 -35
  12. package/package.json +2 -2
package/base.css CHANGED
@@ -6,10 +6,8 @@
6
6
  --colors-background-alpha: var(--colors-alpha-gray-100);
7
7
  --colors-background-alpha-active: var(--colors-alpha-gray-50);
8
8
  --colors-background-alpha-hover: var(--colors-alpha-gray-100);
9
- --colors-background-alpha-neutrals-overlay: #12193e66;
10
- --colors-background-alpha-neutrals-overlay-subtle: var(
11
- --colors-alpha-black-200
12
- );
9
+ --colors-background-alpha-neutrals-overlay: #12193E66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
13
11
  --colors-background-alpha-subtle: var(--colors-alpha-gray-50);
14
12
  --colors-background-canvas: var(--colors-gray-50);
15
13
  --colors-background-disabled: var(--colors-gray-150);
@@ -42,6 +40,7 @@
42
40
  --colors-background-interactive-secondary-selected: var(--colors-blue-150);
43
41
  --colors-background-interactive-selected: var(--colors-blue-500);
44
42
  --colors-background-interactive-surface-hover: var(--colors-gray-100);
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-150);
45
44
  --colors-background-interactive-surface-pressed: var(--colors-gray-150);
46
45
  --colors-background-interactive-surface-secondary-hover: var(
47
46
  --colors-gray-150
@@ -114,13 +113,13 @@
114
113
  --colors-border-focus-error-inner: var(--colors-white);
115
114
  --colors-border-focus-error-middle: var(--colors-blue-400);
116
115
  --colors-border-focus-error-outer: var(--colors-blue-200);
117
- --colors-border-focus-inner: #ffffff;
116
+ --colors-border-focus-inner: #FFFFFF;
118
117
  --colors-border-focus-middle: var(--colors-blue-400);
119
118
  --colors-border-focus-outer: var(--colors-blue-200);
120
119
  --colors-border-focus-success-inner: var(--colors-white);
121
120
  --colors-border-focus-success-middle: var(--colors-blue-400);
122
121
  --colors-border-focus-success-outer: var(--colors-blue-200);
123
- --colors-focus-keyboard: #2b4df8;
122
+ --colors-focus-keyboard: #2B4DF8;
124
123
  --colors-border-interactive-danger: var(--colors-red-500);
125
124
  --colors-border-interactive-danger-hover: var(--colors-red-550);
126
125
  --colors-border-interactive-danger-pressed: var(--colors-red-600);
@@ -231,9 +230,24 @@
231
230
  --colors-input-border-focused: var(--colors-blue-550);
232
231
  --colors-input-border-hover: var(--colors-blue-550);
233
232
  --colors-input-border-success: var(--colors-green-500);
234
- --colors-notification-background: var(--colors-gray-850);
235
- --colors-notification-border: var(--colors-gray-450);
236
- --colors-notification-border-subtle: var(--colors-gray-750);
233
+ --colors-notification-background-announcement: var(--colors-blue-200);
234
+ --colors-notification-background-danger: var(--colors-red-500);
235
+ --colors-notification-background-info: var(--colors-blue-500);
236
+ --colors-notification-background-inverted: var(--colors-gray-850);
237
+ --colors-notification-background-static: var(--colors-gray-850);
238
+ --colors-notification-background-warning: var(--colors-yellow-500);
239
+ --colors-notification-border-inverted: var(--colors-gray-450);
240
+ --colors-notification-border-inverted-subtle: var(--colors-gray-750);
241
+ --colors-notification-border-static: var(--colors-gray-450);
242
+ --colors-notification-border-static-subtle: var(--colors-gray-750);
243
+ --colors-notification-icon-on-announcement: var(--colors-blue-800);
244
+ --colors-notification-icon-on-danger: var(--colors-white);
245
+ --colors-notification-icon-on-info: var(--colors-white);
246
+ --colors-notification-icon-on-warning: var(--colors-yellow-800);
247
+ --colors-notification-text-on-announcement: var(--colors-blue-800);
248
+ --colors-notification-text-on-danger: var(--colors-white);
249
+ --colors-notification-text-on-info: var(--colors-white);
250
+ --colors-notification-text-on-warning: var(--colors-yellow-800);
237
251
  --colors-popover-background: var(--colors-gray-900);
238
252
  --colors-popover-border: var(--colors-gray-450);
239
253
  --colors-scrollbar-background: var(--colors-gray-300);
@@ -268,9 +282,7 @@
268
282
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-100);
269
283
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-150);
270
284
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
271
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
272
- --colors-gray-250
273
- );
285
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
274
286
  --colors-icon-interactive-primary: var(--colors-blue-500);
275
287
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
276
288
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -330,9 +342,7 @@
330
342
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-100);
331
343
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-150);
332
344
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
333
- --colors-text-interactive-on-inverted-secondary-pressed: var(
334
- --colors-gray-250
335
- );
345
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
336
346
  --colors-text-interactive-primary: var(--colors-blue-500);
337
347
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
338
348
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
@@ -558,7 +568,7 @@
558
568
  --colors-black-sticky-background: #151515;
559
569
  --colors-coral-sticky-background: var(--colors-coral-400);
560
570
  --colors-cyan-sticky-background: var(--colors-cyan-400);
561
- --colors-light-coal-sticky-background: #f3f5f7;
571
+ --colors-light-coal-sticky-background: #F3F5F7;
562
572
  --colors-light-lime-sticky-background: var(--colors-lime-250);
563
573
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
564
574
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -637,11 +647,24 @@
637
647
  --colors-teal-text: var(--colors-teal-900);
638
648
  --colors-teal-text-mild: var(--colors-teal-700);
639
649
  --colors-teal-text-subtle: var(--colors-teal-100);
650
+ --radii-avatar-people: var(--radii-round);
651
+ --radii-avatar-team: var(--radii-50);
652
+ --radii-avatar-group: var(--radii-50);
653
+ --radii-dropdown: var(--radii-100);
654
+ --radii-toolbar: var(--radii-100);
655
+ --radii-toolbar-item: var(--radii-50);
656
+ --radii-input: var(--radii-50);
657
+ --radii-button: var(--radii-50);
658
+ --radii-popup: var(--radii-100);
659
+ --radii-tooltip: var(--radii-100);
660
+ --radii-checkbox: var(--radii-50);
661
+ --radii-list-item: var(--radii-50);
662
+ --radii-calendar: var(--radii-50);
663
+ --radii-tag: var(--radii-50);
640
664
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
641
665
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
642
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
643
- 0 0 0 4px var(--colors-focus-keyboard);
666
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
644
667
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
645
668
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
646
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
669
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
647
670
  }
package/dark.css CHANGED
@@ -6,10 +6,8 @@
6
6
  --colors-background-alpha: var(--colors-alpha-black-100);
7
7
  --colors-background-alpha-active: var(--colors-alpha-black-50);
8
8
  --colors-background-alpha-hover: var(--colors-alpha-black-100);
9
- --colors-background-alpha-neutrals-overlay: #12193e66;
10
- --colors-background-alpha-neutrals-overlay-subtle: var(
11
- --colors-alpha-black-200
12
- );
9
+ --colors-background-alpha-neutrals-overlay: #12193E66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
13
11
  --colors-background-alpha-subtle: var(--colors-alpha-black-50);
14
12
  --colors-background-canvas: var(--colors-gray-950);
15
13
  --colors-background-disabled: var(--colors-gray-850);
@@ -42,6 +40,7 @@
42
40
  --colors-background-interactive-secondary-selected: var(--colors-blue-700);
43
41
  --colors-background-interactive-selected: var(--colors-blue-500);
44
42
  --colors-background-interactive-surface-hover: var(--colors-gray-900);
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-700);
45
44
  --colors-background-interactive-surface-pressed: var(--colors-gray-800);
46
45
  --colors-background-interactive-surface-secondary-hover: var(
47
46
  --colors-gray-700
@@ -114,13 +113,13 @@
114
113
  --colors-border-focus-error-inner: var(--colors-gray-950);
115
114
  --colors-border-focus-error-middle: var(--colors-blue-350);
116
115
  --colors-border-focus-error-outer: var(--colors-blue-550);
117
- --colors-border-focus-inner: #1a1b1e;
116
+ --colors-border-focus-inner: #1A1B1E;
118
117
  --colors-border-focus-middle: var(--colors-blue-350);
119
118
  --colors-border-focus-outer: var(--colors-blue-550);
120
119
  --colors-border-focus-success-inner: var(--colors-gray-950);
121
120
  --colors-border-focus-success-middle: var(--colors-blue-350);
122
121
  --colors-border-focus-success-outer: var(--colors-blue-550);
123
- --colors-focus-keyboard: #2b4df8;
122
+ --colors-focus-keyboard: #2B4DF8;
124
123
  --colors-border-interactive-danger: var(--colors-red-500);
125
124
  --colors-border-interactive-danger-hover: var(--colors-red-450);
126
125
  --colors-border-interactive-danger-pressed: var(--colors-red-400);
@@ -231,9 +230,24 @@
231
230
  --colors-input-border-focused: var(--colors-blue-350);
232
231
  --colors-input-border-hover: var(--colors-blue-350);
233
232
  --colors-input-border-success: var(--colors-green-400);
234
- --colors-notification-background: var(--colors-gray-50);
235
- --colors-notification-border: var(--colors-gray-450);
236
- --colors-notification-border-subtle: var(--colors-gray-300);
233
+ --colors-notification-background-announcement: var(--colors-blue-200);
234
+ --colors-notification-background-danger: var(--colors-red-500);
235
+ --colors-notification-background-info: var(--colors-blue-500);
236
+ --colors-notification-background-inverted: var(--colors-gray-50);
237
+ --colors-notification-background-static: var(--colors-gray-850);
238
+ --colors-notification-background-warning: var(--colors-yellow-500);
239
+ --colors-notification-border-inverted: var(--colors-gray-450);
240
+ --colors-notification-border-inverted-subtle: var(--colors-gray-300);
241
+ --colors-notification-border-static: var(--colors-gray-450);
242
+ --colors-notification-border-static-subtle: var(--colors-gray-750);
243
+ --colors-notification-icon-on-announcement: var(--colors-blue-800);
244
+ --colors-notification-icon-on-danger: var(--colors-white);
245
+ --colors-notification-icon-on-info: var(--colors-white);
246
+ --colors-notification-icon-on-warning: var(--colors-yellow-800);
247
+ --colors-notification-text-on-announcement: var(--colors-blue-800);
248
+ --colors-notification-text-on-danger: var(--colors-white);
249
+ --colors-notification-text-on-info: var(--colors-white);
250
+ --colors-notification-text-on-warning: var(--colors-yellow-800);
237
251
  --colors-popover-background: var(--colors-gray-800);
238
252
  --colors-popover-border: var(--colors-gray-450);
239
253
  --colors-scrollbar-background: var(--colors-gray-700);
@@ -268,9 +282,7 @@
268
282
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-800);
269
283
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-700);
270
284
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
271
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
272
- --colors-gray-600
273
- );
285
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-600);
274
286
  --colors-icon-interactive-primary: var(--colors-blue-400);
275
287
  --colors-icon-interactive-primary-hover: var(--colors-blue-350);
276
288
  --colors-icon-interactive-primary-pressed: var(--colors-blue-300);
@@ -330,9 +342,7 @@
330
342
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-800);
331
343
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-700);
332
344
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
333
- --colors-text-interactive-on-inverted-secondary-pressed: var(
334
- --colors-gray-600
335
- );
345
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-600);
336
346
  --colors-text-interactive-primary: var(--colors-blue-400);
337
347
  --colors-text-interactive-primary-hover: var(--colors-blue-350);
338
348
  --colors-text-interactive-primary-pressed: var(--colors-blue-300);
@@ -558,7 +568,7 @@
558
568
  --colors-black-sticky-background: #151515;
559
569
  --colors-coral-sticky-background: var(--colors-coral-400);
560
570
  --colors-cyan-sticky-background: var(--colors-cyan-400);
561
- --colors-light-coal-sticky-background: #f3f5f7;
571
+ --colors-light-coal-sticky-background: #F3F5F7;
562
572
  --colors-light-lime-sticky-background: var(--colors-lime-250);
563
573
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
564
574
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -637,11 +647,28 @@
637
647
  --colors-teal-text: var(--colors-teal-900);
638
648
  --colors-teal-text-mild: var(--colors-teal-700);
639
649
  --colors-teal-text-subtle: var(--colors-teal-100);
650
+ --radii-avatar-people: var(--radii-round);
651
+ --radii-avatar-team: var(--radii-50);
652
+ --radii-avatar-group: var(--radii-50);
653
+ --radii-dropdown: var(--radii-100);
654
+ --radii-toolbar: var(--radii-100);
655
+ --radii-toolbar-item: var(--radii-50);
656
+ --radii-input: var(--radii-50);
657
+ --radii-button: var(--radii-50);
658
+ --radii-popup: var(--radii-100);
659
+ --radii-tooltip: var(--radii-100);
660
+ --radii-checkbox: var(--radii-50);
661
+ --radii-list-item: var(--radii-50);
662
+ --radii-tag: var(--radii-50);
663
+ --radii-calendar: var(--radii-100);
664
+ --shadows-50: 0 0 8px 0 rgba(9,9,9,.65);
665
+ --shadows-100: 0 0 16px 0 rgba(9,9,9,.65);
666
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
640
667
  --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
641
668
  --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
642
669
  --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
643
670
  0 0 0 4px var(--colors-focus-keyboard);
644
671
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
645
672
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
646
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
673
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
647
674
  }
package/dist/main.js CHANGED
@@ -223,9 +223,24 @@ const colors$3 = {
223
223
  "input-border-focused": "$blue-550",
224
224
  "input-border-hover": "$blue-550",
225
225
  "input-border-success": "$green-500",
226
- "notification-background": "$gray-850",
227
- "notification-border": "$gray-450",
228
- "notification-border-subtle": "$gray-750",
226
+ "notification-background-announcement": "$blue-200",
227
+ "notification-background-danger": "$red-500",
228
+ "notification-background-info": "$blue-500",
229
+ "notification-background-inverted": "$gray-850",
230
+ "notification-background-static": "$gray-850",
231
+ "notification-background-warning": "$yellow-500",
232
+ "notification-border-inverted": "$gray-450",
233
+ "notification-border-inverted-subtle": "$gray-750",
234
+ "notification-border-static": "$gray-450",
235
+ "notification-border-static-subtle": "$gray-750",
236
+ "notification-icon-on-announcement": "$blue-800",
237
+ "notification-icon-on-danger": "$white",
238
+ "notification-icon-on-info": "$white",
239
+ "notification-icon-on-warning": "$yellow-800",
240
+ "notification-text-on-announcement": "$blue-800",
241
+ "notification-text-on-danger": "$white",
242
+ "notification-text-on-info": "$white",
243
+ "notification-text-on-warning": "$yellow-800",
229
244
  "popover-background": "$gray-900",
230
245
  "popover-border": "$gray-450",
231
246
  "scrollbar-background": "$gray-300",
@@ -833,9 +848,24 @@ const colors$2 = {
833
848
  "input-border-focused": "$blue-350",
834
849
  "input-border-hover": "$blue-350",
835
850
  "input-border-success": "$green-400",
836
- "notification-background": "$gray-50",
837
- "notification-border": "$gray-450",
838
- "notification-border-subtle": "$gray-300",
851
+ "notification-background-announcement": "$blue-200",
852
+ "notification-background-danger": "$red-500",
853
+ "notification-background-info": "$blue-500",
854
+ "notification-background-inverted": "$gray-50",
855
+ "notification-background-static": "$gray-850",
856
+ "notification-background-warning": "$yellow-500",
857
+ "notification-border-inverted": "$gray-450",
858
+ "notification-border-inverted-subtle": "$gray-300",
859
+ "notification-border-static": "$gray-450",
860
+ "notification-border-static-subtle": "$gray-750",
861
+ "notification-icon-on-announcement": "$blue-800",
862
+ "notification-icon-on-danger": "$white",
863
+ "notification-icon-on-info": "$white",
864
+ "notification-icon-on-warning": "$yellow-800",
865
+ "notification-text-on-announcement": "$blue-800",
866
+ "notification-text-on-danger": "$white",
867
+ "notification-text-on-info": "$white",
868
+ "notification-text-on-warning": "$yellow-800",
839
869
  "popover-background": "$gray-800",
840
870
  "popover-border": "$gray-450",
841
871
  "scrollbar-background": "$gray-700",
@@ -1443,9 +1473,24 @@ const colors$1 = {
1443
1473
  "input-border-focused": "$blue-550",
1444
1474
  "input-border-hover": "$cloud-400",
1445
1475
  "input-border-success": "$green-500",
1446
- "notification-background": "$cloud-850",
1447
- "notification-border": "$cloud-450",
1448
- "notification-border-subtle": "$cloud-750",
1476
+ "notification-background-announcement": "$blue-200",
1477
+ "notification-background-danger": "$red-500",
1478
+ "notification-background-info": "$blue-500",
1479
+ "notification-background-inverted": "$ink-850",
1480
+ "notification-background-static": "$ink-850",
1481
+ "notification-background-warning": "$yellow-500",
1482
+ "notification-border-inverted": "$ink-500",
1483
+ "notification-border-inverted-subtle": "$ink-700",
1484
+ "notification-border-static": "$ink-500",
1485
+ "notification-border-static-subtle": "$ink-700",
1486
+ "notification-icon-on-announcement": "$blue-800",
1487
+ "notification-icon-on-danger": "$white",
1488
+ "notification-icon-on-info": "$white",
1489
+ "notification-icon-on-warning": "$yellow-800",
1490
+ "notification-text-on-announcement": "$blue-800",
1491
+ "notification-text-on-danger": "$white",
1492
+ "notification-text-on-info": "$white",
1493
+ "notification-text-on-warning": "$yellow-800",
1449
1494
  "popover-background": "$cloud-900",
1450
1495
  "popover-border": "$cloud-500",
1451
1496
  "scrollbar-background": "$cloud-300",
@@ -1469,8 +1514,8 @@ const colors$1 = {
1469
1514
  "icon-inverted-secondary": "$cloud-300",
1470
1515
  "icon-muted": "$cloud-400",
1471
1516
  "icon-on-disabled": "$cloud-350",
1472
- "icon-on-static-dark": "$gray-50",
1473
- "icon-on-static-dark-subtle": "$gray-300",
1517
+ "icon-on-static-dark": "$cloud-50",
1518
+ "icon-on-static-dark-subtle": "$cloud-300",
1474
1519
  "icon-on-static-light": "$cloud-900",
1475
1520
  "icon-on-static-light-subtle": "$cloud-700",
1476
1521
  "icon-placeholder": "$cloud-475",
@@ -1495,19 +1540,19 @@ const colors$1 = {
1495
1540
  "icon-neutrals": "$cloud-900",
1496
1541
  "icon-neutrals-disabled": "$cloud-300",
1497
1542
  "icon-neutrals-hover": "$cloud-950",
1498
- "icon-neutrals-inactive": "$gray-450",
1499
- "icon-neutrals-inactive-hover": "$gray-500",
1543
+ "icon-neutrals-inactive": "$cloud-450",
1544
+ "icon-neutrals-inactive-hover": "$cloud-500",
1500
1545
  "icon-neutrals-inverted": "$cloud-100",
1501
1546
  "icon-neutrals-inverted-hover": "$cloud-50",
1502
- "icon-neutrals-inverted-subtle": "$gray-100",
1503
- "icon-neutrals-inverted-subtle-hover": "$gray-150",
1504
- "icon-neutrals-placeholder": "$gray-350",
1547
+ "icon-neutrals-inverted-subtle": "$cloud-100",
1548
+ "icon-neutrals-inverted-subtle-hover": "$cloud-150",
1549
+ "icon-neutrals-placeholder": "$cloud-350",
1505
1550
  "icon-neutrals-pressed": "$cloud-950",
1506
- "icon-neutrals-search": "$gray-500",
1551
+ "icon-neutrals-search": "$cloud-500",
1507
1552
  "icon-neutrals-subtle": "$cloud-700",
1508
1553
  "icon-neutrals-subtle-hover": "$cloud-750",
1509
1554
  "icon-neutrals-subtle-pressed": "$cloud-750",
1510
- "icon-neutrals-text": "$gray-700",
1555
+ "icon-neutrals-text": "$cloud-700",
1511
1556
  "icon-primary": "$blue-500",
1512
1557
  "icon-primary-active": "$blue-600",
1513
1558
  "icon-primary-hover": "$blue-550",
@@ -1592,7 +1637,7 @@ const colors$1 = {
1592
1637
  "text-inverted-secondary": "$cloud-300",
1593
1638
  "text-muted": "$cloud-400",
1594
1639
  "text-on-disabled": "$cloud-350",
1595
- "text-on-static-dark": "$cloud-50",
1640
+ "text-on-static-dark": "$white",
1596
1641
  "text-on-static-dark-subtle": "$cloud-300",
1597
1642
  "text-on-static-light": "$cloud-900",
1598
1643
  "text-on-static-light-subtle": "$cloud-700",
@@ -2053,9 +2098,24 @@ const colors = {
2053
2098
  "input-border-focused": "$blue-450",
2054
2099
  "input-border-hover": "$ink-400",
2055
2100
  "input-border-success": "$green-400",
2056
- "notification-background": "$ink-50",
2057
- "notification-border": "$ink-500",
2058
- "notification-border-subtle": "$ink-200",
2101
+ "notification-background-announcement": "$blue-200",
2102
+ "notification-background-danger": "$red-500",
2103
+ "notification-background-info": "$blue-500",
2104
+ "notification-background-inverted": "$ink-50",
2105
+ "notification-background-static": "$ink-850",
2106
+ "notification-background-warning": "$yellow-500",
2107
+ "notification-border-inverted": "$ink-500",
2108
+ "notification-border-inverted-subtle": "$ink-200",
2109
+ "notification-border-static": "$ink-500",
2110
+ "notification-border-static-subtle": "$ink-700",
2111
+ "notification-icon-on-announcement": "$blue-800",
2112
+ "notification-icon-on-danger": "$white",
2113
+ "notification-icon-on-info": "$white",
2114
+ "notification-icon-on-warning": "$yellow-800",
2115
+ "notification-text-on-announcement": "$blue-800",
2116
+ "notification-text-on-danger": "$white",
2117
+ "notification-text-on-info": "$white",
2118
+ "notification-text-on-warning": "$yellow-800",
2059
2119
  "popover-background": "$cloud-800",
2060
2120
  "popover-border": "$cloud-600",
2061
2121
  "scrollbar-background": "$ink-700",
@@ -2202,7 +2262,7 @@ const colors = {
2202
2262
  "text-inverted-secondary": "$ink-700",
2203
2263
  "text-muted": "$ink-400",
2204
2264
  "text-on-disabled": "$ink-500",
2205
- "text-on-static-dark": "$ink-50",
2265
+ "text-on-static-dark": "$white",
2206
2266
  "text-on-static-dark-subtle": "$ink-300",
2207
2267
  "text-on-static-light": "$ink-900",
2208
2268
  "text-on-static-light-subtle": "$ink-700",