@mirohq/design-system-themes 1.4.0 → 1.4.2

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 (11) hide show
  1. package/base.css +17 -24
  2. package/dark.css +15 -26
  3. package/dist/main.js +6 -2
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +6 -2
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -0
  8. package/light.css +17 -24
  9. package/new-dark.css +16 -27
  10. package/new-light.css +24 -27
  11. package/package.json +2 -2
package/base.css CHANGED
@@ -6,8 +6,10 @@
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(--colors-alpha-black-200);
9
+ --colors-background-alpha-neutrals-overlay: #12193e66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(
11
+ --colors-alpha-black-200
12
+ );
11
13
  --colors-background-alpha-subtle: var(--colors-alpha-gray-50);
12
14
  --colors-background-canvas: var(--colors-gray-50);
13
15
  --colors-background-disabled: var(--colors-gray-150);
@@ -40,7 +42,6 @@
40
42
  --colors-background-interactive-secondary-selected: var(--colors-blue-150);
41
43
  --colors-background-interactive-selected: var(--colors-blue-500);
42
44
  --colors-background-interactive-surface-hover: var(--colors-gray-100);
43
- --colors-background-interactive-surface-secondary-hover: var(--colors-gray-150);
44
45
  --colors-background-interactive-surface-pressed: var(--colors-gray-150);
45
46
  --colors-background-interactive-surface-secondary-hover: var(
46
47
  --colors-gray-150
@@ -113,13 +114,13 @@
113
114
  --colors-border-focus-error-inner: var(--colors-white);
114
115
  --colors-border-focus-error-middle: var(--colors-blue-400);
115
116
  --colors-border-focus-error-outer: var(--colors-blue-200);
116
- --colors-border-focus-inner: #FFFFFF;
117
+ --colors-border-focus-inner: #ffffff;
117
118
  --colors-border-focus-middle: var(--colors-blue-400);
118
119
  --colors-border-focus-outer: var(--colors-blue-200);
119
120
  --colors-border-focus-success-inner: var(--colors-white);
120
121
  --colors-border-focus-success-middle: var(--colors-blue-400);
121
122
  --colors-border-focus-success-outer: var(--colors-blue-200);
122
- --colors-focus-keyboard: #2B4DF8;
123
+ --colors-focus-keyboard: #2b4df8;
123
124
  --colors-border-interactive-danger: var(--colors-red-500);
124
125
  --colors-border-interactive-danger-hover: var(--colors-red-550);
125
126
  --colors-border-interactive-danger-pressed: var(--colors-red-600);
@@ -283,7 +284,9 @@
283
284
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-100);
284
285
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-150);
285
286
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
286
- --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
287
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
288
+ --colors-gray-250
289
+ );
287
290
  --colors-icon-interactive-primary: var(--colors-blue-500);
288
291
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
289
292
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -343,7 +346,9 @@
343
346
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-100);
344
347
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-150);
345
348
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
346
- --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
349
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
350
+ --colors-gray-250
351
+ );
347
352
  --colors-text-interactive-primary: var(--colors-blue-500);
348
353
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
349
354
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
@@ -414,6 +419,7 @@
414
419
  --radii-input: var(--radii-50);
415
420
  --radii-list-item: var(--radii-50);
416
421
  --radii-notification: var(--radii-100);
422
+ --radii-notification-banner: var(--radii-0);
417
423
  --radii-panel: var(--radii-150);
418
424
  --radii-popover: var(--radii-100);
419
425
  --radii-tag: var(--radii-50);
@@ -569,7 +575,7 @@
569
575
  --colors-black-sticky-background: #151515;
570
576
  --colors-coral-sticky-background: var(--colors-coral-400);
571
577
  --colors-cyan-sticky-background: var(--colors-cyan-400);
572
- --colors-light-coal-sticky-background: #F3F5F7;
578
+ --colors-light-coal-sticky-background: #f3f5f7;
573
579
  --colors-light-lime-sticky-background: var(--colors-lime-250);
574
580
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
575
581
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -648,24 +654,11 @@
648
654
  --colors-teal-text: var(--colors-teal-900);
649
655
  --colors-teal-text-mild: var(--colors-teal-700);
650
656
  --colors-teal-text-subtle: var(--colors-teal-100);
651
- --radii-avatar-people: var(--radii-round);
652
- --radii-avatar-team: var(--radii-50);
653
- --radii-avatar-group: var(--radii-50);
654
- --radii-dropdown: var(--radii-100);
655
- --radii-toolbar: var(--radii-100);
656
- --radii-toolbar-item: var(--radii-50);
657
- --radii-input: var(--radii-50);
658
- --radii-button: var(--radii-50);
659
- --radii-popup: var(--radii-100);
660
- --radii-tooltip: var(--radii-100);
661
- --radii-checkbox: var(--radii-50);
662
- --radii-list-item: var(--radii-50);
663
- --radii-calendar: var(--radii-50);
664
- --radii-tag: var(--radii-50);
665
657
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
666
658
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
667
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
659
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
660
+ 0 0 0 4px var(--colors-focus-keyboard);
668
661
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
669
662
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
670
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
663
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
671
664
  }
package/dark.css CHANGED
@@ -6,8 +6,10 @@
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(--colors-alpha-black-200);
9
+ --colors-background-alpha-neutrals-overlay: #12193e66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(
11
+ --colors-alpha-black-200
12
+ );
11
13
  --colors-background-alpha-subtle: var(--colors-alpha-black-50);
12
14
  --colors-background-canvas: var(--colors-gray-950);
13
15
  --colors-background-disabled: var(--colors-gray-850);
@@ -40,7 +42,6 @@
40
42
  --colors-background-interactive-secondary-selected: var(--colors-blue-700);
41
43
  --colors-background-interactive-selected: var(--colors-blue-500);
42
44
  --colors-background-interactive-surface-hover: var(--colors-gray-900);
43
- --colors-background-interactive-surface-secondary-hover: var(--colors-gray-700);
44
45
  --colors-background-interactive-surface-pressed: var(--colors-gray-800);
45
46
  --colors-background-interactive-surface-secondary-hover: var(
46
47
  --colors-gray-700
@@ -113,13 +114,13 @@
113
114
  --colors-border-focus-error-inner: var(--colors-gray-950);
114
115
  --colors-border-focus-error-middle: var(--colors-blue-350);
115
116
  --colors-border-focus-error-outer: var(--colors-blue-550);
116
- --colors-border-focus-inner: #1A1B1E;
117
+ --colors-border-focus-inner: #1a1b1e;
117
118
  --colors-border-focus-middle: var(--colors-blue-350);
118
119
  --colors-border-focus-outer: var(--colors-blue-550);
119
120
  --colors-border-focus-success-inner: var(--colors-gray-950);
120
121
  --colors-border-focus-success-middle: var(--colors-blue-350);
121
122
  --colors-border-focus-success-outer: var(--colors-blue-550);
122
- --colors-focus-keyboard: #2B4DF8;
123
+ --colors-focus-keyboard: #2b4df8;
123
124
  --colors-border-interactive-danger: var(--colors-red-500);
124
125
  --colors-border-interactive-danger-hover: var(--colors-red-450);
125
126
  --colors-border-interactive-danger-pressed: var(--colors-red-400);
@@ -283,7 +284,9 @@
283
284
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-800);
284
285
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-700);
285
286
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
286
- --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-600);
287
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
288
+ --colors-gray-600
289
+ );
287
290
  --colors-icon-interactive-primary: var(--colors-blue-400);
288
291
  --colors-icon-interactive-primary-hover: var(--colors-blue-350);
289
292
  --colors-icon-interactive-primary-pressed: var(--colors-blue-300);
@@ -343,7 +346,9 @@
343
346
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-800);
344
347
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-700);
345
348
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
346
- --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-600);
349
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
350
+ --colors-gray-600
351
+ );
347
352
  --colors-text-interactive-primary: var(--colors-blue-400);
348
353
  --colors-text-interactive-primary-hover: var(--colors-blue-350);
349
354
  --colors-text-interactive-primary-pressed: var(--colors-blue-300);
@@ -414,6 +419,7 @@
414
419
  --radii-input: var(--radii-50);
415
420
  --radii-list-item: var(--radii-50);
416
421
  --radii-notification: var(--radii-100);
422
+ --radii-notification-banner: var(--radii-0);
417
423
  --radii-panel: var(--radii-150);
418
424
  --radii-popover: var(--radii-100);
419
425
  --radii-tag: var(--radii-50);
@@ -569,7 +575,7 @@
569
575
  --colors-black-sticky-background: #151515;
570
576
  --colors-coral-sticky-background: var(--colors-coral-400);
571
577
  --colors-cyan-sticky-background: var(--colors-cyan-400);
572
- --colors-light-coal-sticky-background: #F3F5F7;
578
+ --colors-light-coal-sticky-background: #f3f5f7;
573
579
  --colors-light-lime-sticky-background: var(--colors-lime-250);
574
580
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
575
581
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -648,28 +654,11 @@
648
654
  --colors-teal-text: var(--colors-teal-900);
649
655
  --colors-teal-text-mild: var(--colors-teal-700);
650
656
  --colors-teal-text-subtle: var(--colors-teal-100);
651
- --radii-avatar-people: var(--radii-round);
652
- --radii-avatar-team: var(--radii-50);
653
- --radii-avatar-group: var(--radii-50);
654
- --radii-dropdown: var(--radii-100);
655
- --radii-toolbar: var(--radii-100);
656
- --radii-toolbar-item: var(--radii-50);
657
- --radii-input: var(--radii-50);
658
- --radii-button: var(--radii-50);
659
- --radii-popup: var(--radii-100);
660
- --radii-tooltip: var(--radii-100);
661
- --radii-checkbox: var(--radii-50);
662
- --radii-list-item: var(--radii-50);
663
- --radii-tag: var(--radii-50);
664
- --radii-calendar: var(--radii-100);
665
- --shadows-50: 0 0 8px 0 rgba(9,9,9,.65);
666
- --shadows-100: 0 0 16px 0 rgba(9,9,9,.65);
667
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
668
657
  --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
669
658
  --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
670
659
  --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
671
660
  0 0 0 4px var(--colors-focus-keyboard);
672
661
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
673
662
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
674
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
663
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
675
664
  }
package/dist/main.js CHANGED
@@ -2547,6 +2547,7 @@ const radii$3 = {
2547
2547
  input: "$50",
2548
2548
  "list-item": "$50",
2549
2549
  notification: "$100",
2550
+ "notification-banner": "$0",
2550
2551
  panel: "$150",
2551
2552
  popover: "$100",
2552
2553
  tag: "$50",
@@ -2567,6 +2568,7 @@ const radii$2 = {
2567
2568
  input: "$50",
2568
2569
  "list-item": "$50",
2569
2570
  notification: "$100",
2571
+ "notification-banner": "$0",
2570
2572
  panel: "$150",
2571
2573
  popover: "$100",
2572
2574
  tag: "$50",
@@ -2586,7 +2588,8 @@ const radii$1 = {
2586
2588
  dropdown: "$250",
2587
2589
  input: "$150",
2588
2590
  "list-item": "$150",
2589
- notification: "$150",
2591
+ notification: "$200",
2592
+ "notification-banner": "$round",
2590
2593
  panel: "$150",
2591
2594
  popover: "$150",
2592
2595
  tag: "$round",
@@ -2606,7 +2609,8 @@ const radii = {
2606
2609
  dropdown: "$250",
2607
2610
  input: "$150",
2608
2611
  "list-item": "$150",
2609
- notification: "$150",
2612
+ notification: "$200",
2613
+ "notification-banner": "$round",
2610
2614
  panel: "$150",
2611
2615
  popover: "$150",
2612
2616
  tag: "$round",