@mirohq/design-system-themes 1.3.13 → 1.3.14

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 +18 -3
  2. package/dark.css +18 -3
  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 +1 -1
  8. package/light.css +18 -3
  9. package/metadata.json +50 -5
  10. package/new-dark.css +19 -4
  11. package/new-light.css +28 -13
  12. package/package.json +2 -2
package/base.css CHANGED
@@ -231,9 +231,24 @@
231
231
  --colors-input-border-focused: var(--colors-blue-550);
232
232
  --colors-input-border-hover: var(--colors-blue-550);
233
233
  --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);
234
+ --colors-notification-background-announcement: var(--colors-blue-200);
235
+ --colors-notification-background-danger: var(--colors-red-500);
236
+ --colors-notification-background-info: var(--colors-blue-500);
237
+ --colors-notification-background-inverted: var(--colors-gray-850);
238
+ --colors-notification-background-static: var(--colors-gray-850);
239
+ --colors-notification-background-warning: var(--colors-yellow-500);
240
+ --colors-notification-border-inverted: var(--colors-gray-450);
241
+ --colors-notification-border-inverted-subtle: var(--colors-gray-750);
242
+ --colors-notification-border-static: var(--colors-gray-450);
243
+ --colors-notification-border-static-subtle: var(--colors-gray-750);
244
+ --colors-notification-icon-on-announcement: var(--colors-blue-800);
245
+ --colors-notification-icon-on-danger: var(--colors-white);
246
+ --colors-notification-icon-on-info: var(--colors-white);
247
+ --colors-notification-icon-on-warning: var(--colors-yellow-800);
248
+ --colors-notification-text-on-announcement: var(--colors-blue-800);
249
+ --colors-notification-text-on-danger: var(--colors-white);
250
+ --colors-notification-text-on-info: var(--colors-white);
251
+ --colors-notification-text-on-warning: var(--colors-yellow-800);
237
252
  --colors-popover-background: var(--colors-gray-900);
238
253
  --colors-popover-border: var(--colors-gray-450);
239
254
  --colors-scrollbar-background: var(--colors-gray-300);
package/dark.css CHANGED
@@ -231,9 +231,24 @@
231
231
  --colors-input-border-focused: var(--colors-blue-350);
232
232
  --colors-input-border-hover: var(--colors-blue-350);
233
233
  --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);
234
+ --colors-notification-background-announcement: var(--colors-blue-200);
235
+ --colors-notification-background-danger: var(--colors-red-500);
236
+ --colors-notification-background-info: var(--colors-blue-500);
237
+ --colors-notification-background-inverted: var(--colors-gray-50);
238
+ --colors-notification-background-static: var(--colors-gray-850);
239
+ --colors-notification-background-warning: var(--colors-yellow-500);
240
+ --colors-notification-border-inverted: var(--colors-gray-450);
241
+ --colors-notification-border-inverted-subtle: var(--colors-gray-300);
242
+ --colors-notification-border-static: var(--colors-gray-450);
243
+ --colors-notification-border-static-subtle: var(--colors-gray-750);
244
+ --colors-notification-icon-on-announcement: var(--colors-blue-800);
245
+ --colors-notification-icon-on-danger: var(--colors-white);
246
+ --colors-notification-icon-on-info: var(--colors-white);
247
+ --colors-notification-icon-on-warning: var(--colors-yellow-800);
248
+ --colors-notification-text-on-announcement: var(--colors-blue-800);
249
+ --colors-notification-text-on-danger: var(--colors-white);
250
+ --colors-notification-text-on-info: var(--colors-white);
251
+ --colors-notification-text-on-warning: var(--colors-yellow-800);
237
252
  --colors-popover-background: var(--colors-gray-800);
238
253
  --colors-popover-border: var(--colors-gray-450);
239
254
  --colors-scrollbar-background: var(--colors-gray-700);
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",