@mirohq/design-system-themes 1.3.11 → 1.3.13

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 +35 -19
  2. package/dark.css +36 -20
  3. package/dist/main.js +61 -41
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +61 -41
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +35 -19
  9. package/metadata.json +6 -0
  10. package/new-dark.css +38 -22
  11. package/new-light.css +42 -22
  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);
@@ -212,7 +220,7 @@
212
220
  --colors-format-icon-timeline: var(--colors-moss-600);
213
221
  --colors-input-background-alt-default: var(--colors-gray-100);
214
222
  --colors-input-background-alt-focused: var(--colors-gray-100);
215
- --colors-input-background-alt-hover: var(--colors-gray-100);
223
+ --colors-input-background-alt-hover: var(--colors-gray-150);
216
224
  --colors-input-background-default: var(--colors-white);
217
225
  --colors-input-background-disabled: var(--colors-gray-150);
218
226
  --colors-input-background-focused: var(--colors-white);
@@ -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,23 @@
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-card: var(--radii-100);
401
+ --radii-checkbox: var(--radii-50);
388
402
  --radii-dropdown: var(--radii-100);
403
+ --radii-input: var(--radii-50);
404
+ --radii-list-item: var(--radii-50);
405
+ --radii-notification: var(--radii-100);
406
+ --radii-panel: var(--radii-150);
407
+ --radii-popover: var(--radii-100);
408
+ --radii-tag: var(--radii-50);
389
409
  --radii-toolbar: var(--radii-100);
390
410
  --radii-toolbar-item: var(--radii-50);
391
- --radii-input: var(--radii-50);
392
- --radii-button: var(--radii-50);
393
- --radii-popup: var(--radii-100);
394
411
  --radii-tooltip: var(--radii-100);
395
- --radii-checkbox: var(--radii-50);
396
- --radii-list-item: var(--radii-50);
397
412
  --colors-coal-background: var(--colors-coal-500);
398
413
  --colors-coal-background-mild: var(--colors-coal-350);
399
414
  --colors-coal-background-prominent: var(--colors-coal-700);
@@ -543,7 +558,7 @@
543
558
  --colors-black-sticky-background: #151515;
544
559
  --colors-coral-sticky-background: var(--colors-coral-400);
545
560
  --colors-cyan-sticky-background: var(--colors-cyan-400);
546
- --colors-light-coal-sticky-background: #F3F5F7;
561
+ --colors-light-coal-sticky-background: #f3f5f7;
547
562
  --colors-light-lime-sticky-background: var(--colors-lime-250);
548
563
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
549
564
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -624,8 +639,9 @@
624
639
  --colors-teal-text-subtle: var(--colors-teal-100);
625
640
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
626
641
  --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);
642
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
643
+ 0 0 0 4px var(--colors-focus-keyboard);
628
644
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
629
645
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
630
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
646
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
631
647
  }
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,23 @@
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-card: var(--radii-100);
401
+ --radii-checkbox: var(--radii-50);
388
402
  --radii-dropdown: var(--radii-100);
403
+ --radii-input: var(--radii-50);
404
+ --radii-list-item: var(--radii-50);
405
+ --radii-notification: var(--radii-100);
406
+ --radii-panel: var(--radii-150);
407
+ --radii-popover: var(--radii-100);
408
+ --radii-tag: var(--radii-50);
389
409
  --radii-toolbar: var(--radii-100);
390
410
  --radii-toolbar-item: var(--radii-50);
391
- --radii-input: var(--radii-50);
392
- --radii-button: var(--radii-50);
393
- --radii-popup: var(--radii-100);
394
411
  --radii-tooltip: var(--radii-100);
395
- --radii-checkbox: var(--radii-50);
396
- --radii-list-item: var(--radii-50);
397
412
  --colors-coal-background: var(--colors-coal-500);
398
413
  --colors-coal-background-mild: var(--colors-coal-350);
399
414
  --colors-coal-background-prominent: var(--colors-coal-700);
@@ -543,7 +558,7 @@
543
558
  --colors-black-sticky-background: #151515;
544
559
  --colors-coral-sticky-background: var(--colors-coral-400);
545
560
  --colors-cyan-sticky-background: var(--colors-cyan-400);
546
- --colors-light-coal-sticky-background: #F3F5F7;
561
+ --colors-light-coal-sticky-background: #f3f5f7;
547
562
  --colors-light-lime-sticky-background: var(--colors-lime-250);
548
563
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
549
564
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -622,10 +637,11 @@
622
637
  --colors-teal-text: var(--colors-teal-900);
623
638
  --colors-teal-text-mild: var(--colors-teal-700);
624
639
  --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);
640
+ --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
641
+ --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
642
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
643
+ 0 0 0 4px var(--colors-focus-keyboard);
628
644
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
629
645
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
630
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
646
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
631
647
  }
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",
@@ -210,7 +212,7 @@ const colors$3 = {
210
212
  "format-icon-timeline": "$moss-600",
211
213
  "input-background-alt-default": "$gray-100",
212
214
  "input-background-alt-focused": "$gray-100",
213
- "input-background-alt-hover": "$gray-100",
215
+ "input-background-alt-hover": "$gray-150",
214
216
  "input-background-default": "$white",
215
217
  "input-background-disabled": "$gray-150",
216
218
  "input-background-focused": "$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",
@@ -1485,7 +1491,7 @@ const colors$1 = {
1485
1491
  "icon-on-interactive-danger": "$white",
1486
1492
  "icon-on-interactive-primary": "$white",
1487
1493
  "icon-on-interactive-secondary": "$cloud-900",
1488
- "icon-on-interactive-selected": "$blue-550",
1494
+ "icon-on-interactive-selected": "$cloud-900",
1489
1495
  "icon-neutrals": "$cloud-900",
1490
1496
  "icon-neutrals-disabled": "$cloud-300",
1491
1497
  "icon-neutrals-hover": "$cloud-950",
@@ -1545,7 +1551,7 @@ const colors$1 = {
1545
1551
  "text-on-interactive-danger": "$white",
1546
1552
  "text-on-interactive-primary": "$white",
1547
1553
  "text-on-interactive-secondary": "$cloud-900",
1548
- "text-on-interactive-selected": "$blue-550",
1554
+ "text-on-interactive-selected": "$cloud-900",
1549
1555
  "text-neutrals": "$cloud-900",
1550
1556
  "text-neutrals-active": "$cloud-950",
1551
1557
  "text-neutrals-disabled": "$cloud-300",
@@ -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",
@@ -2093,7 +2101,7 @@ const colors = {
2093
2101
  "icon-on-interactive-danger": "$white",
2094
2102
  "icon-on-interactive-primary": "$white",
2095
2103
  "icon-on-interactive-secondary": "$white",
2096
- "icon-on-interactive-selected": "$blue-400",
2104
+ "icon-on-interactive-selected": "$ink-50",
2097
2105
  "icon-neutrals": "$ink-50",
2098
2106
  "icon-neutrals-disabled": "$ink-450",
2099
2107
  "icon-neutrals-hover": "$ink-100",
@@ -2153,7 +2161,7 @@ const colors = {
2153
2161
  "text-on-interactive-danger": "$white",
2154
2162
  "text-on-interactive-primary": "$white",
2155
2163
  "text-on-interactive-secondary": "$white",
2156
- "text-on-interactive-selected": "$blue-200",
2164
+ "text-on-interactive-selected": "$ink-50",
2157
2165
  "text-neutrals": "$ink-100",
2158
2166
  "text-neutrals-active": "$ink-50",
2159
2167
  "text-neutrals-disabled": "$ink-400",
@@ -2464,71 +2472,83 @@ 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
+ card: "$100",
2481
+ checkbox: "$50",
2472
2482
  dropdown: "$100",
2483
+ input: "$50",
2484
+ "list-item": "$50",
2485
+ notification: "$100",
2486
+ panel: "$150",
2487
+ popover: "$100",
2488
+ tag: "$50",
2473
2489
  toolbar: "$100",
2474
2490
  "toolbar-item": "$50",
2475
- input: "$50",
2476
- button: "$50",
2477
- popup: "$100",
2478
- tooltip: "$100",
2479
- checkbox: "$50",
2480
- "list-item": "$50"
2491
+ tooltip: "$100"
2481
2492
  };
2482
2493
 
2483
2494
  const radii$2 = {
2484
- panel: "$150",
2485
- notification: "$100",
2495
+ "avatar-group": "$50",
2486
2496
  "avatar-people": "$round",
2487
2497
  "avatar-team": "$50",
2488
- "avatar-group": "$50",
2498
+ button: "$50",
2499
+ calendar: "$100",
2500
+ card: "$100",
2501
+ checkbox: "$50",
2489
2502
  dropdown: "$100",
2503
+ input: "$50",
2504
+ "list-item": "$50",
2505
+ notification: "$100",
2506
+ panel: "$150",
2507
+ popover: "$100",
2508
+ tag: "$50",
2490
2509
  toolbar: "$100",
2491
2510
  "toolbar-item": "$50",
2492
- input: "$50",
2493
- button: "$50",
2494
- popup: "$100",
2495
- tooltip: "$100",
2496
- checkbox: "$50",
2497
- "list-item": "$50"
2511
+ tooltip: "$100"
2498
2512
  };
2499
2513
 
2500
2514
  const radii$1 = {
2501
- panel: "$150",
2502
- notification: "$100",
2515
+ "avatar-group": "$50",
2503
2516
  "avatar-people": "$round",
2504
2517
  "avatar-team": "$50",
2505
- "avatar-group": "$50",
2518
+ button: "$100",
2519
+ calendar: "$250",
2520
+ card: "$250",
2521
+ checkbox: "$75",
2506
2522
  dropdown: "$250",
2523
+ input: "$150",
2524
+ "list-item": "$150",
2525
+ notification: "$150",
2526
+ panel: "$150",
2527
+ popover: "$150",
2528
+ tag: "$round",
2507
2529
  toolbar: "$200",
2508
2530
  "toolbar-item": "$150",
2509
- input: "$150",
2510
- button: "$100",
2511
- popup: "$100",
2512
- tooltip: "$100",
2513
- checkbox: "$75",
2514
- "list-item": "$150"
2531
+ tooltip: "$100"
2515
2532
  };
2516
2533
 
2517
2534
  const radii = {
2518
- panel: "$150",
2519
- notification: "$100",
2535
+ "avatar-group": "$50",
2520
2536
  "avatar-people": "$round",
2521
2537
  "avatar-team": "$50",
2522
- "avatar-group": "$50",
2538
+ button: "$100",
2539
+ calendar: "$250",
2540
+ card: "$250",
2541
+ checkbox: "$75",
2523
2542
  dropdown: "$250",
2543
+ input: "$150",
2544
+ "list-item": "$150",
2545
+ notification: "$150",
2546
+ panel: "$150",
2547
+ popover: "$150",
2548
+ tag: "$round",
2524
2549
  toolbar: "$200",
2525
2550
  "toolbar-item": "$150",
2526
- input: "$150",
2527
- button: "$100",
2528
- popup: "$100",
2529
- tooltip: "$100",
2530
- checkbox: "$75",
2531
- "list-item": "$150"
2551
+ tooltip: "$100"
2532
2552
  };
2533
2553
 
2534
2554
  const light = Object.freeze({