@mirohq/design-system-themes 1.3.12 → 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 +21 -5
  2. package/dark.css +20 -4
  3. package/dist/main.js +98 -34
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +98 -34
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +21 -5
  9. package/metadata.json +50 -5
  10. package/new-dark.css +24 -8
  11. package/new-light.css +33 -17
  12. package/package.json +2 -2
package/base.css CHANGED
@@ -220,7 +220,7 @@
220
220
  --colors-format-icon-timeline: var(--colors-moss-600);
221
221
  --colors-input-background-alt-default: var(--colors-gray-100);
222
222
  --colors-input-background-alt-focused: var(--colors-gray-100);
223
- --colors-input-background-alt-hover: var(--colors-gray-100);
223
+ --colors-input-background-alt-hover: var(--colors-gray-150);
224
224
  --colors-input-background-default: var(--colors-white);
225
225
  --colors-input-background-disabled: var(--colors-gray-150);
226
226
  --colors-input-background-focused: var(--colors-white);
@@ -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);
@@ -397,13 +412,14 @@
397
412
  --radii-avatar-team: var(--radii-50);
398
413
  --radii-button: var(--radii-50);
399
414
  --radii-calendar: var(--radii-100);
415
+ --radii-card: var(--radii-100);
400
416
  --radii-checkbox: var(--radii-50);
401
417
  --radii-dropdown: var(--radii-100);
402
418
  --radii-input: var(--radii-50);
403
419
  --radii-list-item: var(--radii-50);
404
420
  --radii-notification: var(--radii-100);
405
421
  --radii-panel: var(--radii-150);
406
- --radii-popup: var(--radii-100);
422
+ --radii-popover: var(--radii-100);
407
423
  --radii-tag: var(--radii-50);
408
424
  --radii-toolbar: var(--radii-100);
409
425
  --radii-toolbar-item: var(--radii-50);
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);
@@ -397,13 +412,14 @@
397
412
  --radii-avatar-team: var(--radii-50);
398
413
  --radii-button: var(--radii-50);
399
414
  --radii-calendar: var(--radii-100);
415
+ --radii-card: var(--radii-100);
400
416
  --radii-checkbox: var(--radii-50);
401
417
  --radii-dropdown: var(--radii-100);
402
418
  --radii-input: var(--radii-50);
403
419
  --radii-list-item: var(--radii-50);
404
420
  --radii-notification: var(--radii-100);
405
421
  --radii-panel: var(--radii-150);
406
- --radii-popup: var(--radii-100);
422
+ --radii-popover: var(--radii-100);
407
423
  --radii-tag: var(--radii-50);
408
424
  --radii-toolbar: var(--radii-100);
409
425
  --radii-toolbar-item: var(--radii-50);
package/dist/main.js CHANGED
@@ -212,7 +212,7 @@ const colors$3 = {
212
212
  "format-icon-timeline": "$moss-600",
213
213
  "input-background-alt-default": "$gray-100",
214
214
  "input-background-alt-focused": "$gray-100",
215
- "input-background-alt-hover": "$gray-100",
215
+ "input-background-alt-hover": "$gray-150",
216
216
  "input-background-default": "$white",
217
217
  "input-background-disabled": "$gray-150",
218
218
  "input-background-focused": "$white",
@@ -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",
@@ -1491,23 +1536,23 @@ const colors$1 = {
1491
1536
  "icon-on-interactive-danger": "$white",
1492
1537
  "icon-on-interactive-primary": "$white",
1493
1538
  "icon-on-interactive-secondary": "$cloud-900",
1494
- "icon-on-interactive-selected": "$blue-550",
1539
+ "icon-on-interactive-selected": "$cloud-900",
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",
@@ -1551,7 +1596,7 @@ const colors$1 = {
1551
1596
  "text-on-interactive-danger": "$white",
1552
1597
  "text-on-interactive-primary": "$white",
1553
1598
  "text-on-interactive-secondary": "$cloud-900",
1554
- "text-on-interactive-selected": "$blue-550",
1599
+ "text-on-interactive-selected": "$cloud-900",
1555
1600
  "text-neutrals": "$cloud-900",
1556
1601
  "text-neutrals-active": "$cloud-950",
1557
1602
  "text-neutrals-disabled": "$cloud-300",
@@ -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",
@@ -2101,7 +2161,7 @@ const colors = {
2101
2161
  "icon-on-interactive-danger": "$white",
2102
2162
  "icon-on-interactive-primary": "$white",
2103
2163
  "icon-on-interactive-secondary": "$white",
2104
- "icon-on-interactive-selected": "$blue-400",
2164
+ "icon-on-interactive-selected": "$ink-50",
2105
2165
  "icon-neutrals": "$ink-50",
2106
2166
  "icon-neutrals-disabled": "$ink-450",
2107
2167
  "icon-neutrals-hover": "$ink-100",
@@ -2161,7 +2221,7 @@ const colors = {
2161
2221
  "text-on-interactive-danger": "$white",
2162
2222
  "text-on-interactive-primary": "$white",
2163
2223
  "text-on-interactive-secondary": "$white",
2164
- "text-on-interactive-selected": "$blue-200",
2224
+ "text-on-interactive-selected": "$ink-50",
2165
2225
  "text-neutrals": "$ink-100",
2166
2226
  "text-neutrals-active": "$ink-50",
2167
2227
  "text-neutrals-disabled": "$ink-400",
@@ -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",
@@ -2477,13 +2537,14 @@ const radii$3 = {
2477
2537
  "avatar-team": "$50",
2478
2538
  button: "$50",
2479
2539
  calendar: "$100",
2540
+ card: "$100",
2480
2541
  checkbox: "$50",
2481
2542
  dropdown: "$100",
2482
2543
  input: "$50",
2483
2544
  "list-item": "$50",
2484
2545
  notification: "$100",
2485
2546
  panel: "$150",
2486
- popup: "$100",
2547
+ popover: "$100",
2487
2548
  tag: "$50",
2488
2549
  toolbar: "$100",
2489
2550
  "toolbar-item": "$50",
@@ -2496,13 +2557,14 @@ const radii$2 = {
2496
2557
  "avatar-team": "$50",
2497
2558
  button: "$50",
2498
2559
  calendar: "$100",
2560
+ card: "$100",
2499
2561
  checkbox: "$50",
2500
2562
  dropdown: "$100",
2501
2563
  input: "$50",
2502
2564
  "list-item": "$50",
2503
2565
  notification: "$100",
2504
2566
  panel: "$150",
2505
- popup: "$100",
2567
+ popover: "$100",
2506
2568
  tag: "$50",
2507
2569
  toolbar: "$100",
2508
2570
  "toolbar-item": "$50",
@@ -2515,13 +2577,14 @@ const radii$1 = {
2515
2577
  "avatar-team": "$50",
2516
2578
  button: "$100",
2517
2579
  calendar: "$250",
2580
+ card: "$250",
2518
2581
  checkbox: "$75",
2519
2582
  dropdown: "$250",
2520
2583
  input: "$150",
2521
2584
  "list-item": "$150",
2522
- notification: "$100",
2585
+ notification: "$150",
2523
2586
  panel: "$150",
2524
- popup: "$100",
2587
+ popover: "$150",
2525
2588
  tag: "$round",
2526
2589
  toolbar: "$200",
2527
2590
  "toolbar-item": "$150",
@@ -2534,13 +2597,14 @@ const radii = {
2534
2597
  "avatar-team": "$50",
2535
2598
  button: "$100",
2536
2599
  calendar: "$250",
2600
+ card: "$250",
2537
2601
  checkbox: "$75",
2538
2602
  dropdown: "$250",
2539
2603
  input: "$150",
2540
2604
  "list-item": "$150",
2541
- notification: "$100",
2605
+ notification: "$150",
2542
2606
  panel: "$150",
2543
- popup: "$100",
2607
+ popover: "$150",
2544
2608
  tag: "$round",
2545
2609
  toolbar: "$200",
2546
2610
  "toolbar-item": "$150",