@mirohq/design-system-themes 1.3.16 → 1.4.1

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 -24
  2. package/dark.css +16 -26
  3. package/dist/main.js +10 -2
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +10 -2
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +2 -1
  8. package/light.css +18 -24
  9. package/metadata.json +3 -0
  10. package/new-dark.css +17 -27
  11. package/new-light.css +25 -27
  12. 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);
@@ -258,6 +259,7 @@
258
259
  --colors-switch-background-default: var(--colors-gray-450);
259
260
  --colors-switch-background-hover: var(--colors-gray-350);
260
261
  --colors-switch-control-background: var(--colors-white);
262
+ --colors-tab-background-selected: var(--colors-blue-150);
261
263
  --colors-tooltip-background: var(--colors-gray-950);
262
264
  --colors-tooltip-background-inset: var(--colors-gray-650);
263
265
  --colors-icon-danger: var(--colors-red-500);
@@ -282,7 +284,9 @@
282
284
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-100);
283
285
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-150);
284
286
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
285
- --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
+ );
286
290
  --colors-icon-interactive-primary: var(--colors-blue-500);
287
291
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
288
292
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -342,7 +346,9 @@
342
346
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-100);
343
347
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-150);
344
348
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
345
- --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
+ );
346
352
  --colors-text-interactive-primary: var(--colors-blue-500);
347
353
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
348
354
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
@@ -413,6 +419,7 @@
413
419
  --radii-input: var(--radii-50);
414
420
  --radii-list-item: var(--radii-50);
415
421
  --radii-notification: var(--radii-100);
422
+ --radii-notification-banner: var(--radii-0);
416
423
  --radii-panel: var(--radii-150);
417
424
  --radii-popover: var(--radii-100);
418
425
  --radii-tag: var(--radii-50);
@@ -568,7 +575,7 @@
568
575
  --colors-black-sticky-background: #151515;
569
576
  --colors-coral-sticky-background: var(--colors-coral-400);
570
577
  --colors-cyan-sticky-background: var(--colors-cyan-400);
571
- --colors-light-coal-sticky-background: #F3F5F7;
578
+ --colors-light-coal-sticky-background: #f3f5f7;
572
579
  --colors-light-lime-sticky-background: var(--colors-lime-250);
573
580
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
574
581
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -647,24 +654,11 @@
647
654
  --colors-teal-text: var(--colors-teal-900);
648
655
  --colors-teal-text-mild: var(--colors-teal-700);
649
656
  --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);
664
657
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
665
658
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
666
- --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);
667
661
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
668
662
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
669
- --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;
670
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);
@@ -258,6 +259,7 @@
258
259
  --colors-switch-background-default: var(--colors-gray-700);
259
260
  --colors-switch-background-hover: var(--colors-gray-650);
260
261
  --colors-switch-control-background: var(--colors-gray-950);
262
+ --colors-tab-background-selected: var(--colors-blue-700);
261
263
  --colors-tooltip-background: var(--colors-gray-650);
262
264
  --colors-tooltip-background-inset: var(--colors-gray-650);
263
265
  --colors-icon-danger: var(--colors-red-400);
@@ -282,7 +284,9 @@
282
284
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-800);
283
285
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-700);
284
286
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
285
- --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
+ );
286
290
  --colors-icon-interactive-primary: var(--colors-blue-400);
287
291
  --colors-icon-interactive-primary-hover: var(--colors-blue-350);
288
292
  --colors-icon-interactive-primary-pressed: var(--colors-blue-300);
@@ -342,7 +346,9 @@
342
346
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-800);
343
347
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-700);
344
348
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
345
- --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
+ );
346
352
  --colors-text-interactive-primary: var(--colors-blue-400);
347
353
  --colors-text-interactive-primary-hover: var(--colors-blue-350);
348
354
  --colors-text-interactive-primary-pressed: var(--colors-blue-300);
@@ -413,6 +419,7 @@
413
419
  --radii-input: var(--radii-50);
414
420
  --radii-list-item: var(--radii-50);
415
421
  --radii-notification: var(--radii-100);
422
+ --radii-notification-banner: var(--radii-0);
416
423
  --radii-panel: var(--radii-150);
417
424
  --radii-popover: var(--radii-100);
418
425
  --radii-tag: var(--radii-50);
@@ -568,7 +575,7 @@
568
575
  --colors-black-sticky-background: #151515;
569
576
  --colors-coral-sticky-background: var(--colors-coral-400);
570
577
  --colors-cyan-sticky-background: var(--colors-cyan-400);
571
- --colors-light-coal-sticky-background: #F3F5F7;
578
+ --colors-light-coal-sticky-background: #f3f5f7;
572
579
  --colors-light-lime-sticky-background: var(--colors-lime-250);
573
580
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
574
581
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -647,28 +654,11 @@
647
654
  --colors-teal-text: var(--colors-teal-900);
648
655
  --colors-teal-text-mild: var(--colors-teal-700);
649
656
  --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);
667
657
  --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
668
658
  --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
669
659
  --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
670
660
  0 0 0 4px var(--colors-focus-keyboard);
671
661
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
672
662
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
673
- --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;
674
664
  }
package/dist/main.js CHANGED
@@ -251,6 +251,7 @@ const colors$3 = {
251
251
  "switch-background-default": "$gray-450",
252
252
  "switch-background-hover": "$gray-350",
253
253
  "switch-control-background": "$white",
254
+ "tab-background-selected": "$blue-150",
254
255
  "tooltip-background": "$gray-950",
255
256
  "tooltip-background-inset": "$gray-650",
256
257
  "icon-danger": "$red-500",
@@ -876,6 +877,7 @@ const colors$2 = {
876
877
  "switch-background-default": "$gray-700",
877
878
  "switch-background-hover": "$gray-650",
878
879
  "switch-control-background": "$gray-950",
880
+ "tab-background-selected": "$blue-700",
879
881
  "tooltip-background": "$gray-650",
880
882
  "tooltip-background-inset": "$gray-650",
881
883
  "icon-danger": "$red-400",
@@ -1501,6 +1503,7 @@ const colors$1 = {
1501
1503
  "switch-background-default": "$cloud-425",
1502
1504
  "switch-background-hover": "$cloud-450",
1503
1505
  "switch-control-background": "$white",
1506
+ "tab-background-selected": "$cloud-150",
1504
1507
  "tooltip-background": "$cloud-950",
1505
1508
  "tooltip-background-inset": "$cloud-650",
1506
1509
  "icon-danger": "$red-500",
@@ -2126,6 +2129,7 @@ const colors = {
2126
2129
  "switch-background-default": "$ink-500",
2127
2130
  "switch-background-hover": "$ink-475",
2128
2131
  "switch-control-background": "$ink-700",
2132
+ "tab-background-selected": "$ink-700",
2129
2133
  "tooltip-background": "$ink-650",
2130
2134
  "tooltip-background-inset": "$ink-800",
2131
2135
  "icon-danger": "$red-400",
@@ -2543,6 +2547,7 @@ const radii$3 = {
2543
2547
  input: "$50",
2544
2548
  "list-item": "$50",
2545
2549
  notification: "$100",
2550
+ "notification-banner": "$0",
2546
2551
  panel: "$150",
2547
2552
  popover: "$100",
2548
2553
  tag: "$50",
@@ -2563,6 +2568,7 @@ const radii$2 = {
2563
2568
  input: "$50",
2564
2569
  "list-item": "$50",
2565
2570
  notification: "$100",
2571
+ "notification-banner": "$0",
2566
2572
  panel: "$150",
2567
2573
  popover: "$100",
2568
2574
  tag: "$50",
@@ -2582,7 +2588,8 @@ const radii$1 = {
2582
2588
  dropdown: "$250",
2583
2589
  input: "$150",
2584
2590
  "list-item": "$150",
2585
- notification: "$150",
2591
+ notification: "$200",
2592
+ "notification-banner": "$round",
2586
2593
  panel: "$150",
2587
2594
  popover: "$150",
2588
2595
  tag: "$round",
@@ -2602,7 +2609,8 @@ const radii = {
2602
2609
  dropdown: "$250",
2603
2610
  input: "$150",
2604
2611
  "list-item": "$150",
2605
- notification: "$150",
2612
+ notification: "$200",
2613
+ "notification-banner": "$round",
2606
2614
  panel: "$150",
2607
2615
  popover: "$150",
2608
2616
  tag: "$round",