@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/dist/types.d.ts CHANGED
@@ -28,6 +28,7 @@ declare const radii: {
28
28
  readonly input: "$50";
29
29
  readonly 'list-item': "$50";
30
30
  readonly notification: "$100";
31
+ readonly 'notification-banner': "$0";
31
32
  readonly panel: "$150";
32
33
  readonly popover: "$100";
33
34
  readonly tag: "$50";
package/light.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/new-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-900);
13
15
  --colors-background-disabled: var(--colors-ink-650);
@@ -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-ink-750);
43
- --colors-background-interactive-surface-secondary-hover: var(--colors-ink-650);
44
45
  --colors-background-interactive-surface-pressed: var(--colors-ink-700);
45
46
  --colors-background-interactive-surface-secondary-hover: var(
46
47
  --colors-ink-650
@@ -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-ink-800);
284
285
  --colors-icon-interactive-on-inverted-secondary: var(--colors-ink-700);
285
286
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-ink-650);
286
- --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-ink-600);
287
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
288
+ --colors-ink-600
289
+ );
287
290
  --colors-icon-interactive-primary: var(--colors-blue-500);
288
291
  --colors-icon-interactive-primary-hover: var(--colors-blue-450);
289
292
  --colors-icon-interactive-primary-pressed: var(--colors-blue-400);
@@ -343,7 +346,9 @@
343
346
  --colors-text-interactive-on-inverted-pressed: var(--colors-ink-800);
344
347
  --colors-text-interactive-on-inverted-secondary: var(--colors-ink-750);
345
348
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-ink-650);
346
- --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-ink-600);
349
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
350
+ --colors-ink-600
351
+ );
347
352
  --colors-text-interactive-primary: var(--colors-blue-500);
348
353
  --colors-text-interactive-primary-hover: var(--colors-blue-450);
349
354
  --colors-text-interactive-primary-pressed: var(--colors-blue-400);
@@ -413,7 +418,8 @@
413
418
  --radii-dropdown: var(--radii-250);
414
419
  --radii-input: var(--radii-150);
415
420
  --radii-list-item: var(--radii-150);
416
- --radii-notification: var(--radii-150);
421
+ --radii-notification: var(--radii-200);
422
+ --radii-notification-banner: var(--radii-round);
417
423
  --radii-panel: var(--radii-150);
418
424
  --radii-popover: var(--radii-150);
419
425
  --radii-tag: var(--radii-round);
@@ -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-250);
655
- --radii-toolbar: var(--radii-200);
656
- --radii-toolbar-item: var(--radii-150);
657
- --radii-input: var(--radii-150);
658
- --radii-button: var(--radii-100);
659
- --radii-popup: var(--radii-100);
660
- --radii-tooltip: var(--radii-100);
661
- --radii-checkbox: var(--radii-75);
662
- --radii-list-item: var(--radii-150);
663
- --radii-tag: var(--radii-round);
664
- --radii-calendar: var(--radii-250);
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/new-light.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-cloud-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-cloud-100);
43
- --colors-background-interactive-surface-secondary-hover: var(--colors-cloud-150);
44
45
  --colors-background-interactive-surface-pressed: var(--colors-cloud-150);
45
46
  --colors-background-interactive-surface-secondary-hover: var(
46
47
  --colors-cloud-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);
@@ -282,8 +283,12 @@
282
283
  --colors-icon-interactive-on-inverted-hover: var(--colors-cloud-50);
283
284
  --colors-icon-interactive-on-inverted-pressed: var(--colors-cloud-100);
284
285
  --colors-icon-interactive-on-inverted-secondary: var(--colors-cloud-300);
285
- --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-cloud-350);
286
- --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-cloud-400);
286
+ --colors-icon-interactive-on-inverted-secondary-hover: var(
287
+ --colors-cloud-350
288
+ );
289
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
290
+ --colors-cloud-400
291
+ );
287
292
  --colors-icon-interactive-primary: var(--colors-blue-500);
288
293
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
289
294
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -342,8 +347,12 @@
342
347
  --colors-text-interactive-on-inverted-hover: var(--colors-cloud-50);
343
348
  --colors-text-interactive-on-inverted-pressed: var(--colors-cloud-100);
344
349
  --colors-text-interactive-on-inverted-secondary: var(--colors-cloud-300);
345
- --colors-text-interactive-on-inverted-secondary-hover: var(--colors-cloud-350);
346
- --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-cloud-400);
350
+ --colors-text-interactive-on-inverted-secondary-hover: var(
351
+ --colors-cloud-350
352
+ );
353
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
354
+ --colors-cloud-400
355
+ );
347
356
  --colors-text-interactive-primary: var(--colors-blue-500);
348
357
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
349
358
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
@@ -413,7 +422,8 @@
413
422
  --radii-dropdown: var(--radii-250);
414
423
  --radii-input: var(--radii-150);
415
424
  --radii-list-item: var(--radii-150);
416
- --radii-notification: var(--radii-150);
425
+ --radii-notification: var(--radii-200);
426
+ --radii-notification-banner: var(--radii-round);
417
427
  --radii-panel: var(--radii-150);
418
428
  --radii-popover: var(--radii-150);
419
429
  --radii-tag: var(--radii-round);
@@ -569,7 +579,7 @@
569
579
  --colors-black-sticky-background: #151515;
570
580
  --colors-coral-sticky-background: var(--colors-coral-400);
571
581
  --colors-cyan-sticky-background: var(--colors-cyan-400);
572
- --colors-light-coal-sticky-background: #F3F5F7;
582
+ --colors-light-coal-sticky-background: #f3f5f7;
573
583
  --colors-light-lime-sticky-background: var(--colors-lime-250);
574
584
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
575
585
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -648,24 +658,11 @@
648
658
  --colors-teal-text: var(--colors-teal-900);
649
659
  --colors-teal-text-mild: var(--colors-teal-700);
650
660
  --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-250);
655
- --radii-toolbar: var(--radii-200);
656
- --radii-toolbar-item: var(--radii-150);
657
- --radii-input: var(--radii-150);
658
- --radii-button: var(--radii-100);
659
- --radii-popup: var(--radii-100);
660
- --radii-tooltip: var(--radii-100);
661
- --radii-checkbox: var(--radii-75);
662
- --radii-list-item: var(--radii-150);
663
- --radii-tag: var(--radii-round);
664
- --radii-calendar: var(--radii-250);
665
661
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
666
662
  --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);
663
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
664
+ 0 0 0 4px var(--colors-focus-keyboard);
668
665
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
669
666
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
670
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
667
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
671
668
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-themes",
3
- "version": "1.4.0",
3
+ "version": "1.4.2",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -34,7 +34,7 @@
34
34
  "access": "public"
35
35
  },
36
36
  "dependencies": {
37
- "@mirohq/design-tokens": "^12.2.0"
37
+ "@mirohq/design-tokens": "^12.3.1"
38
38
  },
39
39
  "devDependencies": {
40
40
  "@types/lodash.kebabcase": "4.1.7",