@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/dist/module.js CHANGED
@@ -221,9 +221,24 @@ const colors$3 = {
221
221
  "input-border-focused": "$blue-550",
222
222
  "input-border-hover": "$blue-550",
223
223
  "input-border-success": "$green-500",
224
- "notification-background": "$gray-850",
225
- "notification-border": "$gray-450",
226
- "notification-border-subtle": "$gray-750",
224
+ "notification-background-announcement": "$blue-200",
225
+ "notification-background-danger": "$red-500",
226
+ "notification-background-info": "$blue-500",
227
+ "notification-background-inverted": "$gray-850",
228
+ "notification-background-static": "$gray-850",
229
+ "notification-background-warning": "$yellow-500",
230
+ "notification-border-inverted": "$gray-450",
231
+ "notification-border-inverted-subtle": "$gray-750",
232
+ "notification-border-static": "$gray-450",
233
+ "notification-border-static-subtle": "$gray-750",
234
+ "notification-icon-on-announcement": "$blue-800",
235
+ "notification-icon-on-danger": "$white",
236
+ "notification-icon-on-info": "$white",
237
+ "notification-icon-on-warning": "$yellow-800",
238
+ "notification-text-on-announcement": "$blue-800",
239
+ "notification-text-on-danger": "$white",
240
+ "notification-text-on-info": "$white",
241
+ "notification-text-on-warning": "$yellow-800",
227
242
  "popover-background": "$gray-900",
228
243
  "popover-border": "$gray-450",
229
244
  "scrollbar-background": "$gray-300",
@@ -831,9 +846,24 @@ const colors$2 = {
831
846
  "input-border-focused": "$blue-350",
832
847
  "input-border-hover": "$blue-350",
833
848
  "input-border-success": "$green-400",
834
- "notification-background": "$gray-50",
835
- "notification-border": "$gray-450",
836
- "notification-border-subtle": "$gray-300",
849
+ "notification-background-announcement": "$blue-200",
850
+ "notification-background-danger": "$red-500",
851
+ "notification-background-info": "$blue-500",
852
+ "notification-background-inverted": "$gray-50",
853
+ "notification-background-static": "$gray-850",
854
+ "notification-background-warning": "$yellow-500",
855
+ "notification-border-inverted": "$gray-450",
856
+ "notification-border-inverted-subtle": "$gray-300",
857
+ "notification-border-static": "$gray-450",
858
+ "notification-border-static-subtle": "$gray-750",
859
+ "notification-icon-on-announcement": "$blue-800",
860
+ "notification-icon-on-danger": "$white",
861
+ "notification-icon-on-info": "$white",
862
+ "notification-icon-on-warning": "$yellow-800",
863
+ "notification-text-on-announcement": "$blue-800",
864
+ "notification-text-on-danger": "$white",
865
+ "notification-text-on-info": "$white",
866
+ "notification-text-on-warning": "$yellow-800",
837
867
  "popover-background": "$gray-800",
838
868
  "popover-border": "$gray-450",
839
869
  "scrollbar-background": "$gray-700",
@@ -1441,9 +1471,24 @@ const colors$1 = {
1441
1471
  "input-border-focused": "$blue-550",
1442
1472
  "input-border-hover": "$cloud-400",
1443
1473
  "input-border-success": "$green-500",
1444
- "notification-background": "$cloud-850",
1445
- "notification-border": "$cloud-450",
1446
- "notification-border-subtle": "$cloud-750",
1474
+ "notification-background-announcement": "$blue-200",
1475
+ "notification-background-danger": "$red-500",
1476
+ "notification-background-info": "$blue-500",
1477
+ "notification-background-inverted": "$ink-850",
1478
+ "notification-background-static": "$ink-850",
1479
+ "notification-background-warning": "$yellow-500",
1480
+ "notification-border-inverted": "$ink-500",
1481
+ "notification-border-inverted-subtle": "$ink-700",
1482
+ "notification-border-static": "$ink-500",
1483
+ "notification-border-static-subtle": "$ink-700",
1484
+ "notification-icon-on-announcement": "$blue-800",
1485
+ "notification-icon-on-danger": "$white",
1486
+ "notification-icon-on-info": "$white",
1487
+ "notification-icon-on-warning": "$yellow-800",
1488
+ "notification-text-on-announcement": "$blue-800",
1489
+ "notification-text-on-danger": "$white",
1490
+ "notification-text-on-info": "$white",
1491
+ "notification-text-on-warning": "$yellow-800",
1447
1492
  "popover-background": "$cloud-900",
1448
1493
  "popover-border": "$cloud-500",
1449
1494
  "scrollbar-background": "$cloud-300",
@@ -1467,8 +1512,8 @@ const colors$1 = {
1467
1512
  "icon-inverted-secondary": "$cloud-300",
1468
1513
  "icon-muted": "$cloud-400",
1469
1514
  "icon-on-disabled": "$cloud-350",
1470
- "icon-on-static-dark": "$gray-50",
1471
- "icon-on-static-dark-subtle": "$gray-300",
1515
+ "icon-on-static-dark": "$cloud-50",
1516
+ "icon-on-static-dark-subtle": "$cloud-300",
1472
1517
  "icon-on-static-light": "$cloud-900",
1473
1518
  "icon-on-static-light-subtle": "$cloud-700",
1474
1519
  "icon-placeholder": "$cloud-475",
@@ -1493,19 +1538,19 @@ const colors$1 = {
1493
1538
  "icon-neutrals": "$cloud-900",
1494
1539
  "icon-neutrals-disabled": "$cloud-300",
1495
1540
  "icon-neutrals-hover": "$cloud-950",
1496
- "icon-neutrals-inactive": "$gray-450",
1497
- "icon-neutrals-inactive-hover": "$gray-500",
1541
+ "icon-neutrals-inactive": "$cloud-450",
1542
+ "icon-neutrals-inactive-hover": "$cloud-500",
1498
1543
  "icon-neutrals-inverted": "$cloud-100",
1499
1544
  "icon-neutrals-inverted-hover": "$cloud-50",
1500
- "icon-neutrals-inverted-subtle": "$gray-100",
1501
- "icon-neutrals-inverted-subtle-hover": "$gray-150",
1502
- "icon-neutrals-placeholder": "$gray-350",
1545
+ "icon-neutrals-inverted-subtle": "$cloud-100",
1546
+ "icon-neutrals-inverted-subtle-hover": "$cloud-150",
1547
+ "icon-neutrals-placeholder": "$cloud-350",
1503
1548
  "icon-neutrals-pressed": "$cloud-950",
1504
- "icon-neutrals-search": "$gray-500",
1549
+ "icon-neutrals-search": "$cloud-500",
1505
1550
  "icon-neutrals-subtle": "$cloud-700",
1506
1551
  "icon-neutrals-subtle-hover": "$cloud-750",
1507
1552
  "icon-neutrals-subtle-pressed": "$cloud-750",
1508
- "icon-neutrals-text": "$gray-700",
1553
+ "icon-neutrals-text": "$cloud-700",
1509
1554
  "icon-primary": "$blue-500",
1510
1555
  "icon-primary-active": "$blue-600",
1511
1556
  "icon-primary-hover": "$blue-550",
@@ -1590,7 +1635,7 @@ const colors$1 = {
1590
1635
  "text-inverted-secondary": "$cloud-300",
1591
1636
  "text-muted": "$cloud-400",
1592
1637
  "text-on-disabled": "$cloud-350",
1593
- "text-on-static-dark": "$cloud-50",
1638
+ "text-on-static-dark": "$white",
1594
1639
  "text-on-static-dark-subtle": "$cloud-300",
1595
1640
  "text-on-static-light": "$cloud-900",
1596
1641
  "text-on-static-light-subtle": "$cloud-700",
@@ -2051,9 +2096,24 @@ const colors = {
2051
2096
  "input-border-focused": "$blue-450",
2052
2097
  "input-border-hover": "$ink-400",
2053
2098
  "input-border-success": "$green-400",
2054
- "notification-background": "$ink-50",
2055
- "notification-border": "$ink-500",
2056
- "notification-border-subtle": "$ink-200",
2099
+ "notification-background-announcement": "$blue-200",
2100
+ "notification-background-danger": "$red-500",
2101
+ "notification-background-info": "$blue-500",
2102
+ "notification-background-inverted": "$ink-50",
2103
+ "notification-background-static": "$ink-850",
2104
+ "notification-background-warning": "$yellow-500",
2105
+ "notification-border-inverted": "$ink-500",
2106
+ "notification-border-inverted-subtle": "$ink-200",
2107
+ "notification-border-static": "$ink-500",
2108
+ "notification-border-static-subtle": "$ink-700",
2109
+ "notification-icon-on-announcement": "$blue-800",
2110
+ "notification-icon-on-danger": "$white",
2111
+ "notification-icon-on-info": "$white",
2112
+ "notification-icon-on-warning": "$yellow-800",
2113
+ "notification-text-on-announcement": "$blue-800",
2114
+ "notification-text-on-danger": "$white",
2115
+ "notification-text-on-info": "$white",
2116
+ "notification-text-on-warning": "$yellow-800",
2057
2117
  "popover-background": "$cloud-800",
2058
2118
  "popover-border": "$cloud-600",
2059
2119
  "scrollbar-background": "$ink-700",
@@ -2200,7 +2260,7 @@ const colors = {
2200
2260
  "text-inverted-secondary": "$ink-700",
2201
2261
  "text-muted": "$ink-400",
2202
2262
  "text-on-disabled": "$ink-500",
2203
- "text-on-static-dark": "$ink-50",
2263
+ "text-on-static-dark": "$white",
2204
2264
  "text-on-static-dark-subtle": "$ink-300",
2205
2265
  "text-on-static-light": "$ink-900",
2206
2266
  "text-on-static-light-subtle": "$ink-700",