@mirohq/design-system-themes 1.3.11 → 1.3.12

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 +33 -18
  2. package/dark.css +35 -20
  3. package/dist/main.js +52 -36
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +52 -36
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +33 -18
  9. package/metadata.json +6 -0
  10. package/new-dark.css +35 -20
  11. package/new-light.css +39 -20
  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,13 @@
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);
45
+ --colors-background-interactive-surface-pressed: var(--colors-gray-150);
46
+ --colors-background-interactive-surface-secondary-hover: var(
47
+ --colors-gray-150
48
+ );
49
+ --colors-background-interactive-surface-secondary-pressed: var(
50
+ --colors-gray-200
51
+ );
44
52
  --colors-background-neutrals: var(--colors-white);
45
53
  --colors-background-neutrals-active: var(--colors-gray-150);
46
54
  --colors-background-neutrals-container: var(--colors-white);
@@ -106,13 +114,13 @@
106
114
  --colors-border-focus-error-inner: var(--colors-white);
107
115
  --colors-border-focus-error-middle: var(--colors-blue-400);
108
116
  --colors-border-focus-error-outer: var(--colors-blue-200);
109
- --colors-border-focus-inner: #FFFFFF;
117
+ --colors-border-focus-inner: #ffffff;
110
118
  --colors-border-focus-middle: var(--colors-blue-400);
111
119
  --colors-border-focus-outer: var(--colors-blue-200);
112
120
  --colors-border-focus-success-inner: var(--colors-white);
113
121
  --colors-border-focus-success-middle: var(--colors-blue-400);
114
122
  --colors-border-focus-success-outer: var(--colors-blue-200);
115
- --colors-focus-keyboard: #2B4DF8;
123
+ --colors-focus-keyboard: #2b4df8;
116
124
  --colors-border-interactive-danger: var(--colors-red-500);
117
125
  --colors-border-interactive-danger-hover: var(--colors-red-550);
118
126
  --colors-border-interactive-danger-pressed: var(--colors-red-600);
@@ -260,7 +268,9 @@
260
268
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-100);
261
269
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-150);
262
270
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
263
- --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
271
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
272
+ --colors-gray-250
273
+ );
264
274
  --colors-icon-interactive-primary: var(--colors-blue-500);
265
275
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
266
276
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -320,7 +330,9 @@
320
330
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-100);
321
331
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-150);
322
332
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
323
- --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
333
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
334
+ --colors-gray-250
335
+ );
324
336
  --colors-text-interactive-primary: var(--colors-blue-500);
325
337
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
326
338
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
@@ -380,20 +392,22 @@
380
392
  --colors-text-secondary: var(--colors-gray-500);
381
393
  --colors-text-warning: var(--colors-yellow-800);
382
394
  --colors-text-warning-subtle: var(--colors-yellow-600);
383
- --radii-panel: var(--radii-150);
384
- --radii-notification: var(--radii-100);
395
+ --radii-avatar-group: var(--radii-50);
385
396
  --radii-avatar-people: var(--radii-round);
386
397
  --radii-avatar-team: var(--radii-50);
387
- --radii-avatar-group: var(--radii-50);
398
+ --radii-button: var(--radii-50);
399
+ --radii-calendar: var(--radii-100);
400
+ --radii-checkbox: var(--radii-50);
388
401
  --radii-dropdown: var(--radii-100);
389
- --radii-toolbar: var(--radii-100);
390
- --radii-toolbar-item: var(--radii-50);
391
402
  --radii-input: var(--radii-50);
392
- --radii-button: var(--radii-50);
403
+ --radii-list-item: var(--radii-50);
404
+ --radii-notification: var(--radii-100);
405
+ --radii-panel: var(--radii-150);
393
406
  --radii-popup: var(--radii-100);
407
+ --radii-tag: var(--radii-50);
408
+ --radii-toolbar: var(--radii-100);
409
+ --radii-toolbar-item: var(--radii-50);
394
410
  --radii-tooltip: var(--radii-100);
395
- --radii-checkbox: var(--radii-50);
396
- --radii-list-item: var(--radii-50);
397
411
  --colors-coal-background: var(--colors-coal-500);
398
412
  --colors-coal-background-mild: var(--colors-coal-350);
399
413
  --colors-coal-background-prominent: var(--colors-coal-700);
@@ -543,7 +557,7 @@
543
557
  --colors-black-sticky-background: #151515;
544
558
  --colors-coral-sticky-background: var(--colors-coral-400);
545
559
  --colors-cyan-sticky-background: var(--colors-cyan-400);
546
- --colors-light-coal-sticky-background: #F3F5F7;
560
+ --colors-light-coal-sticky-background: #f3f5f7;
547
561
  --colors-light-lime-sticky-background: var(--colors-lime-250);
548
562
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
549
563
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -624,8 +638,9 @@
624
638
  --colors-teal-text-subtle: var(--colors-teal-100);
625
639
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
626
640
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
627
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
641
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
642
+ 0 0 0 4px var(--colors-focus-keyboard);
628
643
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
629
644
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
630
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
645
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
631
646
  }
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,13 @@
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);
45
+ --colors-background-interactive-surface-pressed: var(--colors-gray-800);
46
+ --colors-background-interactive-surface-secondary-hover: var(
47
+ --colors-gray-700
48
+ );
49
+ --colors-background-interactive-surface-secondary-pressed: var(
50
+ --colors-gray-650
51
+ );
44
52
  --colors-background-neutrals: var(--colors-gray-950);
45
53
  --colors-background-neutrals-active: var(--colors-gray-850);
46
54
  --colors-background-neutrals-container: var(--colors-gray-850);
@@ -106,13 +114,13 @@
106
114
  --colors-border-focus-error-inner: var(--colors-gray-950);
107
115
  --colors-border-focus-error-middle: var(--colors-blue-350);
108
116
  --colors-border-focus-error-outer: var(--colors-blue-550);
109
- --colors-border-focus-inner: #1A1B1E;
117
+ --colors-border-focus-inner: #1a1b1e;
110
118
  --colors-border-focus-middle: var(--colors-blue-350);
111
119
  --colors-border-focus-outer: var(--colors-blue-550);
112
120
  --colors-border-focus-success-inner: var(--colors-gray-950);
113
121
  --colors-border-focus-success-middle: var(--colors-blue-350);
114
122
  --colors-border-focus-success-outer: var(--colors-blue-550);
115
- --colors-focus-keyboard: #2B4DF8;
123
+ --colors-focus-keyboard: #2b4df8;
116
124
  --colors-border-interactive-danger: var(--colors-red-500);
117
125
  --colors-border-interactive-danger-hover: var(--colors-red-450);
118
126
  --colors-border-interactive-danger-pressed: var(--colors-red-400);
@@ -260,7 +268,9 @@
260
268
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-800);
261
269
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-700);
262
270
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
263
- --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-600);
271
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
272
+ --colors-gray-600
273
+ );
264
274
  --colors-icon-interactive-primary: var(--colors-blue-400);
265
275
  --colors-icon-interactive-primary-hover: var(--colors-blue-350);
266
276
  --colors-icon-interactive-primary-pressed: var(--colors-blue-300);
@@ -320,7 +330,9 @@
320
330
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-800);
321
331
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-700);
322
332
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
323
- --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-600);
333
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
334
+ --colors-gray-600
335
+ );
324
336
  --colors-text-interactive-primary: var(--colors-blue-400);
325
337
  --colors-text-interactive-primary-hover: var(--colors-blue-350);
326
338
  --colors-text-interactive-primary-pressed: var(--colors-blue-300);
@@ -380,20 +392,22 @@
380
392
  --colors-text-secondary: var(--colors-gray-300);
381
393
  --colors-text-warning: var(--colors-yellow-200);
382
394
  --colors-text-warning-subtle: var(--colors-yellow-300);
383
- --radii-panel: var(--radii-150);
384
- --radii-notification: var(--radii-100);
395
+ --radii-avatar-group: var(--radii-50);
385
396
  --radii-avatar-people: var(--radii-round);
386
397
  --radii-avatar-team: var(--radii-50);
387
- --radii-avatar-group: var(--radii-50);
398
+ --radii-button: var(--radii-50);
399
+ --radii-calendar: var(--radii-100);
400
+ --radii-checkbox: var(--radii-50);
388
401
  --radii-dropdown: var(--radii-100);
389
- --radii-toolbar: var(--radii-100);
390
- --radii-toolbar-item: var(--radii-50);
391
402
  --radii-input: var(--radii-50);
392
- --radii-button: var(--radii-50);
403
+ --radii-list-item: var(--radii-50);
404
+ --radii-notification: var(--radii-100);
405
+ --radii-panel: var(--radii-150);
393
406
  --radii-popup: var(--radii-100);
407
+ --radii-tag: var(--radii-50);
408
+ --radii-toolbar: var(--radii-100);
409
+ --radii-toolbar-item: var(--radii-50);
394
410
  --radii-tooltip: var(--radii-100);
395
- --radii-checkbox: var(--radii-50);
396
- --radii-list-item: var(--radii-50);
397
411
  --colors-coal-background: var(--colors-coal-500);
398
412
  --colors-coal-background-mild: var(--colors-coal-350);
399
413
  --colors-coal-background-prominent: var(--colors-coal-700);
@@ -543,7 +557,7 @@
543
557
  --colors-black-sticky-background: #151515;
544
558
  --colors-coral-sticky-background: var(--colors-coral-400);
545
559
  --colors-cyan-sticky-background: var(--colors-cyan-400);
546
- --colors-light-coal-sticky-background: #F3F5F7;
560
+ --colors-light-coal-sticky-background: #f3f5f7;
547
561
  --colors-light-lime-sticky-background: var(--colors-lime-250);
548
562
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
549
563
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -622,10 +636,11 @@
622
636
  --colors-teal-text: var(--colors-teal-900);
623
637
  --colors-teal-text-mild: var(--colors-teal-700);
624
638
  --colors-teal-text-subtle: var(--colors-teal-100);
625
- --shadows-50: 0 0 8px 0 rgba(9,9,9,.65);
626
- --shadows-100: 0 0 16px 0 rgba(9,9,9,.65);
627
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
639
+ --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
640
+ --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
641
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
642
+ 0 0 0 4px var(--colors-focus-keyboard);
628
643
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
629
644
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
630
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
645
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
631
646
  }
package/dist/main.js CHANGED
@@ -38,7 +38,9 @@ const colors$3 = {
38
38
  "background-interactive-secondary-selected": "$blue-150",
39
39
  "background-interactive-selected": "$blue-500",
40
40
  "background-interactive-surface-hover": "$gray-100",
41
+ "background-interactive-surface-pressed": "$gray-150",
41
42
  "background-interactive-surface-secondary-hover": "$gray-150",
43
+ "background-interactive-surface-secondary-pressed": "$gray-200",
42
44
  "background-neutrals": "$white",
43
45
  "background-neutrals-active": "$gray-150",
44
46
  "background-neutrals-container": "$white",
@@ -646,7 +648,9 @@ const colors$2 = {
646
648
  "background-interactive-secondary-selected": "$blue-700",
647
649
  "background-interactive-selected": "$blue-500",
648
650
  "background-interactive-surface-hover": "$gray-900",
651
+ "background-interactive-surface-pressed": "$gray-800",
649
652
  "background-interactive-surface-secondary-hover": "$gray-700",
653
+ "background-interactive-surface-secondary-pressed": "$gray-650",
650
654
  "background-neutrals": "$gray-950",
651
655
  "background-neutrals-active": "$gray-850",
652
656
  "background-neutrals-container": "$gray-850",
@@ -1254,7 +1258,9 @@ const colors$1 = {
1254
1258
  "background-interactive-secondary-selected": "$blue-150",
1255
1259
  "background-interactive-selected": "$blue-500",
1256
1260
  "background-interactive-surface-hover": "$cloud-100",
1261
+ "background-interactive-surface-pressed": "$cloud-150",
1257
1262
  "background-interactive-surface-secondary-hover": "$cloud-150",
1263
+ "background-interactive-surface-secondary-pressed": "$cloud-200",
1258
1264
  "background-neutrals": "$white",
1259
1265
  "background-neutrals-active": "$cloud-150",
1260
1266
  "background-neutrals-container": "$white",
@@ -1862,7 +1868,9 @@ const colors = {
1862
1868
  "background-interactive-secondary-selected": "$blue-700",
1863
1869
  "background-interactive-selected": "$blue-500",
1864
1870
  "background-interactive-surface-hover": "$ink-750",
1871
+ "background-interactive-surface-pressed": "$ink-700",
1865
1872
  "background-interactive-surface-secondary-hover": "$ink-650",
1873
+ "background-interactive-surface-secondary-pressed": "$ink-600",
1866
1874
  "background-neutrals": "$ink-850",
1867
1875
  "background-neutrals-active": "$ink-800",
1868
1876
  "background-neutrals-container": "$ink-850",
@@ -2464,71 +2472,79 @@ const shadows = {
2464
2472
  };
2465
2473
 
2466
2474
  const radii$3 = {
2467
- panel: "$150",
2468
- notification: "$100",
2475
+ "avatar-group": "$50",
2469
2476
  "avatar-people": "$round",
2470
2477
  "avatar-team": "$50",
2471
- "avatar-group": "$50",
2478
+ button: "$50",
2479
+ calendar: "$100",
2480
+ checkbox: "$50",
2472
2481
  dropdown: "$100",
2473
- toolbar: "$100",
2474
- "toolbar-item": "$50",
2475
2482
  input: "$50",
2476
- button: "$50",
2483
+ "list-item": "$50",
2484
+ notification: "$100",
2485
+ panel: "$150",
2477
2486
  popup: "$100",
2478
- tooltip: "$100",
2479
- checkbox: "$50",
2480
- "list-item": "$50"
2487
+ tag: "$50",
2488
+ toolbar: "$100",
2489
+ "toolbar-item": "$50",
2490
+ tooltip: "$100"
2481
2491
  };
2482
2492
 
2483
2493
  const radii$2 = {
2484
- panel: "$150",
2485
- notification: "$100",
2494
+ "avatar-group": "$50",
2486
2495
  "avatar-people": "$round",
2487
2496
  "avatar-team": "$50",
2488
- "avatar-group": "$50",
2497
+ button: "$50",
2498
+ calendar: "$100",
2499
+ checkbox: "$50",
2489
2500
  dropdown: "$100",
2490
- toolbar: "$100",
2491
- "toolbar-item": "$50",
2492
2501
  input: "$50",
2493
- button: "$50",
2502
+ "list-item": "$50",
2503
+ notification: "$100",
2504
+ panel: "$150",
2494
2505
  popup: "$100",
2495
- tooltip: "$100",
2496
- checkbox: "$50",
2497
- "list-item": "$50"
2506
+ tag: "$50",
2507
+ toolbar: "$100",
2508
+ "toolbar-item": "$50",
2509
+ tooltip: "$100"
2498
2510
  };
2499
2511
 
2500
2512
  const radii$1 = {
2501
- panel: "$150",
2502
- notification: "$100",
2513
+ "avatar-group": "$50",
2503
2514
  "avatar-people": "$round",
2504
2515
  "avatar-team": "$50",
2505
- "avatar-group": "$50",
2516
+ button: "$100",
2517
+ calendar: "$250",
2518
+ checkbox: "$75",
2506
2519
  dropdown: "$250",
2507
- toolbar: "$200",
2508
- "toolbar-item": "$150",
2509
2520
  input: "$150",
2510
- button: "$100",
2521
+ "list-item": "$150",
2522
+ notification: "$100",
2523
+ panel: "$150",
2511
2524
  popup: "$100",
2512
- tooltip: "$100",
2513
- checkbox: "$75",
2514
- "list-item": "$150"
2525
+ tag: "$round",
2526
+ toolbar: "$200",
2527
+ "toolbar-item": "$150",
2528
+ tooltip: "$100"
2515
2529
  };
2516
2530
 
2517
2531
  const radii = {
2518
- panel: "$150",
2519
- notification: "$100",
2532
+ "avatar-group": "$50",
2520
2533
  "avatar-people": "$round",
2521
2534
  "avatar-team": "$50",
2522
- "avatar-group": "$50",
2535
+ button: "$100",
2536
+ calendar: "$250",
2537
+ checkbox: "$75",
2523
2538
  dropdown: "$250",
2524
- toolbar: "$200",
2525
- "toolbar-item": "$150",
2526
2539
  input: "$150",
2527
- button: "$100",
2540
+ "list-item": "$150",
2541
+ notification: "$100",
2542
+ panel: "$150",
2528
2543
  popup: "$100",
2529
- tooltip: "$100",
2530
- checkbox: "$75",
2531
- "list-item": "$150"
2544
+ tag: "$round",
2545
+ toolbar: "$200",
2546
+ "toolbar-item": "$150",
2547
+ tooltip: "$100"
2532
2548
  };
2533
2549
 
2534
2550
  const light = Object.freeze({