@mirohq/design-system-themes 1.3.14 → 1.3.15

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 (7) hide show
  1. package/base.css +24 -16
  2. package/dark.css +26 -14
  3. package/dist/types.d.ts +27 -2
  4. package/light.css +24 -16
  5. package/new-dark.css +26 -14
  6. package/new-light.css +26 -22
  7. package/package.json +1 -1
package/base.css CHANGED
@@ -6,10 +6,8 @@
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(
11
- --colors-alpha-black-200
12
- );
9
+ --colors-background-alpha-neutrals-overlay: #12193E66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
13
11
  --colors-background-alpha-subtle: var(--colors-alpha-gray-50);
14
12
  --colors-background-canvas: var(--colors-gray-50);
15
13
  --colors-background-disabled: var(--colors-gray-150);
@@ -42,6 +40,7 @@
42
40
  --colors-background-interactive-secondary-selected: var(--colors-blue-150);
43
41
  --colors-background-interactive-selected: var(--colors-blue-500);
44
42
  --colors-background-interactive-surface-hover: var(--colors-gray-100);
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-150);
45
44
  --colors-background-interactive-surface-pressed: var(--colors-gray-150);
46
45
  --colors-background-interactive-surface-secondary-hover: var(
47
46
  --colors-gray-150
@@ -114,13 +113,13 @@
114
113
  --colors-border-focus-error-inner: var(--colors-white);
115
114
  --colors-border-focus-error-middle: var(--colors-blue-400);
116
115
  --colors-border-focus-error-outer: var(--colors-blue-200);
117
- --colors-border-focus-inner: #ffffff;
116
+ --colors-border-focus-inner: #FFFFFF;
118
117
  --colors-border-focus-middle: var(--colors-blue-400);
119
118
  --colors-border-focus-outer: var(--colors-blue-200);
120
119
  --colors-border-focus-success-inner: var(--colors-white);
121
120
  --colors-border-focus-success-middle: var(--colors-blue-400);
122
121
  --colors-border-focus-success-outer: var(--colors-blue-200);
123
- --colors-focus-keyboard: #2b4df8;
122
+ --colors-focus-keyboard: #2B4DF8;
124
123
  --colors-border-interactive-danger: var(--colors-red-500);
125
124
  --colors-border-interactive-danger-hover: var(--colors-red-550);
126
125
  --colors-border-interactive-danger-pressed: var(--colors-red-600);
@@ -283,9 +282,7 @@
283
282
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-100);
284
283
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-150);
285
284
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
286
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
287
- --colors-gray-250
288
- );
285
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
289
286
  --colors-icon-interactive-primary: var(--colors-blue-500);
290
287
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
291
288
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -345,9 +342,7 @@
345
342
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-100);
346
343
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-150);
347
344
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
348
- --colors-text-interactive-on-inverted-secondary-pressed: var(
349
- --colors-gray-250
350
- );
345
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
351
346
  --colors-text-interactive-primary: var(--colors-blue-500);
352
347
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
353
348
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
@@ -573,7 +568,7 @@
573
568
  --colors-black-sticky-background: #151515;
574
569
  --colors-coral-sticky-background: var(--colors-coral-400);
575
570
  --colors-cyan-sticky-background: var(--colors-cyan-400);
576
- --colors-light-coal-sticky-background: #f3f5f7;
571
+ --colors-light-coal-sticky-background: #F3F5F7;
577
572
  --colors-light-lime-sticky-background: var(--colors-lime-250);
578
573
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
579
574
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -652,11 +647,24 @@
652
647
  --colors-teal-text: var(--colors-teal-900);
653
648
  --colors-teal-text-mild: var(--colors-teal-700);
654
649
  --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);
655
664
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
656
665
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
657
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
658
- 0 0 0 4px var(--colors-focus-keyboard);
666
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
659
667
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
660
668
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
661
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
669
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
662
670
  }
package/dark.css CHANGED
@@ -6,10 +6,8 @@
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(
11
- --colors-alpha-black-200
12
- );
9
+ --colors-background-alpha-neutrals-overlay: #12193E66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
13
11
  --colors-background-alpha-subtle: var(--colors-alpha-black-50);
14
12
  --colors-background-canvas: var(--colors-gray-950);
15
13
  --colors-background-disabled: var(--colors-gray-850);
@@ -42,6 +40,7 @@
42
40
  --colors-background-interactive-secondary-selected: var(--colors-blue-700);
43
41
  --colors-background-interactive-selected: var(--colors-blue-500);
44
42
  --colors-background-interactive-surface-hover: var(--colors-gray-900);
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-700);
45
44
  --colors-background-interactive-surface-pressed: var(--colors-gray-800);
46
45
  --colors-background-interactive-surface-secondary-hover: var(
47
46
  --colors-gray-700
@@ -114,13 +113,13 @@
114
113
  --colors-border-focus-error-inner: var(--colors-gray-950);
115
114
  --colors-border-focus-error-middle: var(--colors-blue-350);
116
115
  --colors-border-focus-error-outer: var(--colors-blue-550);
117
- --colors-border-focus-inner: #1a1b1e;
116
+ --colors-border-focus-inner: #1A1B1E;
118
117
  --colors-border-focus-middle: var(--colors-blue-350);
119
118
  --colors-border-focus-outer: var(--colors-blue-550);
120
119
  --colors-border-focus-success-inner: var(--colors-gray-950);
121
120
  --colors-border-focus-success-middle: var(--colors-blue-350);
122
121
  --colors-border-focus-success-outer: var(--colors-blue-550);
123
- --colors-focus-keyboard: #2b4df8;
122
+ --colors-focus-keyboard: #2B4DF8;
124
123
  --colors-border-interactive-danger: var(--colors-red-500);
125
124
  --colors-border-interactive-danger-hover: var(--colors-red-450);
126
125
  --colors-border-interactive-danger-pressed: var(--colors-red-400);
@@ -283,9 +282,7 @@
283
282
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-800);
284
283
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-700);
285
284
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
286
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
287
- --colors-gray-600
288
- );
285
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-600);
289
286
  --colors-icon-interactive-primary: var(--colors-blue-400);
290
287
  --colors-icon-interactive-primary-hover: var(--colors-blue-350);
291
288
  --colors-icon-interactive-primary-pressed: var(--colors-blue-300);
@@ -345,9 +342,7 @@
345
342
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-800);
346
343
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-700);
347
344
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
348
- --colors-text-interactive-on-inverted-secondary-pressed: var(
349
- --colors-gray-600
350
- );
345
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-600);
351
346
  --colors-text-interactive-primary: var(--colors-blue-400);
352
347
  --colors-text-interactive-primary-hover: var(--colors-blue-350);
353
348
  --colors-text-interactive-primary-pressed: var(--colors-blue-300);
@@ -573,7 +568,7 @@
573
568
  --colors-black-sticky-background: #151515;
574
569
  --colors-coral-sticky-background: var(--colors-coral-400);
575
570
  --colors-cyan-sticky-background: var(--colors-cyan-400);
576
- --colors-light-coal-sticky-background: #f3f5f7;
571
+ --colors-light-coal-sticky-background: #F3F5F7;
577
572
  --colors-light-lime-sticky-background: var(--colors-lime-250);
578
573
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
579
574
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -652,11 +647,28 @@
652
647
  --colors-teal-text: var(--colors-teal-900);
653
648
  --colors-teal-text-mild: var(--colors-teal-700);
654
649
  --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);
655
667
  --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
656
668
  --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
657
669
  --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
658
670
  0 0 0 4px var(--colors-focus-keyboard);
659
671
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
660
672
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
661
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
673
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
662
674
  }
package/dist/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Colors } from '@mirohq/design-tokens';
1
+ import { Colors, Radii } from '@mirohq/design-tokens';
2
2
 
3
3
  /**
4
4
  * DO NOT MODIFY THIS FILE: This file was generated by Style Dictionary
@@ -13,6 +13,31 @@ declare const aliasShadows: {
13
13
  };
14
14
  type AliasShadows = 50 | 100 | keyof typeof aliasShadows;
15
15
 
16
+ /**
17
+ * DO NOT MODIFY THIS FILE: This file was generated by Style Dictionary
18
+ */
19
+ declare const radii: {
20
+ readonly 'avatar-group': "$50";
21
+ readonly 'avatar-people': "$round";
22
+ readonly 'avatar-team': "$50";
23
+ readonly button: "$50";
24
+ readonly calendar: "$100";
25
+ readonly card: "$100";
26
+ readonly checkbox: "$50";
27
+ readonly dropdown: "$100";
28
+ readonly input: "$50";
29
+ readonly 'list-item': "$50";
30
+ readonly notification: "$100";
31
+ readonly panel: "$150";
32
+ readonly popover: "$100";
33
+ readonly tag: "$50";
34
+ readonly toolbar: "$100";
35
+ readonly 'toolbar-item': "$50";
36
+ readonly tooltip: "$100";
37
+ };
38
+
39
+ type AliasRadii = keyof typeof radii;
40
+ type Radius = `$${Radii}` | `$${AliasRadii}` | (string & {});
16
41
  type Color = `$${Colors}` | `$${AliasColors}` | (string & {});
17
42
  type Theme = {
18
43
  colors: {
@@ -31,4 +56,4 @@ declare const newDark: Theme;
31
56
  declare const base: Theme;
32
57
 
33
58
  export { base, dark, light, newDark, newLight };
34
- export type { AliasColors, AliasShadows, Color, Theme };
59
+ export type { AliasColors, AliasRadii, AliasShadows, Color, Radius, Theme };
package/light.css CHANGED
@@ -6,10 +6,8 @@
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(
11
- --colors-alpha-black-200
12
- );
9
+ --colors-background-alpha-neutrals-overlay: #12193E66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
13
11
  --colors-background-alpha-subtle: var(--colors-alpha-gray-50);
14
12
  --colors-background-canvas: var(--colors-gray-50);
15
13
  --colors-background-disabled: var(--colors-gray-150);
@@ -42,6 +40,7 @@
42
40
  --colors-background-interactive-secondary-selected: var(--colors-blue-150);
43
41
  --colors-background-interactive-selected: var(--colors-blue-500);
44
42
  --colors-background-interactive-surface-hover: var(--colors-gray-100);
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-150);
45
44
  --colors-background-interactive-surface-pressed: var(--colors-gray-150);
46
45
  --colors-background-interactive-surface-secondary-hover: var(
47
46
  --colors-gray-150
@@ -114,13 +113,13 @@
114
113
  --colors-border-focus-error-inner: var(--colors-white);
115
114
  --colors-border-focus-error-middle: var(--colors-blue-400);
116
115
  --colors-border-focus-error-outer: var(--colors-blue-200);
117
- --colors-border-focus-inner: #ffffff;
116
+ --colors-border-focus-inner: #FFFFFF;
118
117
  --colors-border-focus-middle: var(--colors-blue-400);
119
118
  --colors-border-focus-outer: var(--colors-blue-200);
120
119
  --colors-border-focus-success-inner: var(--colors-white);
121
120
  --colors-border-focus-success-middle: var(--colors-blue-400);
122
121
  --colors-border-focus-success-outer: var(--colors-blue-200);
123
- --colors-focus-keyboard: #2b4df8;
122
+ --colors-focus-keyboard: #2B4DF8;
124
123
  --colors-border-interactive-danger: var(--colors-red-500);
125
124
  --colors-border-interactive-danger-hover: var(--colors-red-550);
126
125
  --colors-border-interactive-danger-pressed: var(--colors-red-600);
@@ -283,9 +282,7 @@
283
282
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-100);
284
283
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-150);
285
284
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
286
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
287
- --colors-gray-250
288
- );
285
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
289
286
  --colors-icon-interactive-primary: var(--colors-blue-500);
290
287
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
291
288
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -345,9 +342,7 @@
345
342
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-100);
346
343
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-150);
347
344
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
348
- --colors-text-interactive-on-inverted-secondary-pressed: var(
349
- --colors-gray-250
350
- );
345
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
351
346
  --colors-text-interactive-primary: var(--colors-blue-500);
352
347
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
353
348
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
@@ -573,7 +568,7 @@
573
568
  --colors-black-sticky-background: #151515;
574
569
  --colors-coral-sticky-background: var(--colors-coral-400);
575
570
  --colors-cyan-sticky-background: var(--colors-cyan-400);
576
- --colors-light-coal-sticky-background: #f3f5f7;
571
+ --colors-light-coal-sticky-background: #F3F5F7;
577
572
  --colors-light-lime-sticky-background: var(--colors-lime-250);
578
573
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
579
574
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -652,11 +647,24 @@
652
647
  --colors-teal-text: var(--colors-teal-900);
653
648
  --colors-teal-text-mild: var(--colors-teal-700);
654
649
  --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);
655
664
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
656
665
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
657
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
658
- 0 0 0 4px var(--colors-focus-keyboard);
666
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
659
667
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
660
668
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
661
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
669
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
662
670
  }
package/new-dark.css CHANGED
@@ -6,10 +6,8 @@
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(
11
- --colors-alpha-black-200
12
- );
9
+ --colors-background-alpha-neutrals-overlay: #12193E66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
13
11
  --colors-background-alpha-subtle: var(--colors-alpha-black-50);
14
12
  --colors-background-canvas: var(--colors-gray-900);
15
13
  --colors-background-disabled: var(--colors-ink-650);
@@ -42,6 +40,7 @@
42
40
  --colors-background-interactive-secondary-selected: var(--colors-blue-700);
43
41
  --colors-background-interactive-selected: var(--colors-blue-500);
44
42
  --colors-background-interactive-surface-hover: var(--colors-ink-750);
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-ink-650);
45
44
  --colors-background-interactive-surface-pressed: var(--colors-ink-700);
46
45
  --colors-background-interactive-surface-secondary-hover: var(
47
46
  --colors-ink-650
@@ -114,13 +113,13 @@
114
113
  --colors-border-focus-error-inner: var(--colors-gray-950);
115
114
  --colors-border-focus-error-middle: var(--colors-blue-350);
116
115
  --colors-border-focus-error-outer: var(--colors-blue-550);
117
- --colors-border-focus-inner: #1a1b1e;
116
+ --colors-border-focus-inner: #1A1B1E;
118
117
  --colors-border-focus-middle: var(--colors-blue-350);
119
118
  --colors-border-focus-outer: var(--colors-blue-550);
120
119
  --colors-border-focus-success-inner: var(--colors-gray-950);
121
120
  --colors-border-focus-success-middle: var(--colors-blue-350);
122
121
  --colors-border-focus-success-outer: var(--colors-blue-550);
123
- --colors-focus-keyboard: #2b4df8;
122
+ --colors-focus-keyboard: #2B4DF8;
124
123
  --colors-border-interactive-danger: var(--colors-red-500);
125
124
  --colors-border-interactive-danger-hover: var(--colors-red-450);
126
125
  --colors-border-interactive-danger-pressed: var(--colors-red-400);
@@ -283,9 +282,7 @@
283
282
  --colors-icon-interactive-on-inverted-pressed: var(--colors-ink-800);
284
283
  --colors-icon-interactive-on-inverted-secondary: var(--colors-ink-700);
285
284
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-ink-650);
286
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
287
- --colors-ink-600
288
- );
285
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-ink-600);
289
286
  --colors-icon-interactive-primary: var(--colors-blue-500);
290
287
  --colors-icon-interactive-primary-hover: var(--colors-blue-450);
291
288
  --colors-icon-interactive-primary-pressed: var(--colors-blue-400);
@@ -345,9 +342,7 @@
345
342
  --colors-text-interactive-on-inverted-pressed: var(--colors-ink-800);
346
343
  --colors-text-interactive-on-inverted-secondary: var(--colors-ink-750);
347
344
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-ink-650);
348
- --colors-text-interactive-on-inverted-secondary-pressed: var(
349
- --colors-ink-600
350
- );
345
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-ink-600);
351
346
  --colors-text-interactive-primary: var(--colors-blue-500);
352
347
  --colors-text-interactive-primary-hover: var(--colors-blue-450);
353
348
  --colors-text-interactive-primary-pressed: var(--colors-blue-400);
@@ -573,7 +568,7 @@
573
568
  --colors-black-sticky-background: #151515;
574
569
  --colors-coral-sticky-background: var(--colors-coral-400);
575
570
  --colors-cyan-sticky-background: var(--colors-cyan-400);
576
- --colors-light-coal-sticky-background: #f3f5f7;
571
+ --colors-light-coal-sticky-background: #F3F5F7;
577
572
  --colors-light-lime-sticky-background: var(--colors-lime-250);
578
573
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
579
574
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -652,11 +647,28 @@
652
647
  --colors-teal-text: var(--colors-teal-900);
653
648
  --colors-teal-text-mild: var(--colors-teal-700);
654
649
  --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-250);
654
+ --radii-toolbar: var(--radii-200);
655
+ --radii-toolbar-item: var(--radii-150);
656
+ --radii-input: var(--radii-150);
657
+ --radii-button: var(--radii-100);
658
+ --radii-popup: var(--radii-100);
659
+ --radii-tooltip: var(--radii-100);
660
+ --radii-checkbox: var(--radii-75);
661
+ --radii-list-item: var(--radii-150);
662
+ --radii-tag: var(--radii-round);
663
+ --radii-calendar: var(--radii-250);
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);
655
667
  --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
656
668
  --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
657
669
  --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
658
670
  0 0 0 4px var(--colors-focus-keyboard);
659
671
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
660
672
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
661
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
673
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
662
674
  }
package/new-light.css CHANGED
@@ -6,10 +6,8 @@
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(
11
- --colors-alpha-black-200
12
- );
9
+ --colors-background-alpha-neutrals-overlay: #12193E66;
10
+ --colors-background-alpha-neutrals-overlay-subtle: var(--colors-alpha-black-200);
13
11
  --colors-background-alpha-subtle: var(--colors-alpha-gray-50);
14
12
  --colors-background-canvas: var(--colors-gray-50);
15
13
  --colors-background-disabled: var(--colors-cloud-150);
@@ -42,6 +40,7 @@
42
40
  --colors-background-interactive-secondary-selected: var(--colors-blue-150);
43
41
  --colors-background-interactive-selected: var(--colors-blue-500);
44
42
  --colors-background-interactive-surface-hover: var(--colors-cloud-100);
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-cloud-150);
45
44
  --colors-background-interactive-surface-pressed: var(--colors-cloud-150);
46
45
  --colors-background-interactive-surface-secondary-hover: var(
47
46
  --colors-cloud-150
@@ -114,13 +113,13 @@
114
113
  --colors-border-focus-error-inner: var(--colors-white);
115
114
  --colors-border-focus-error-middle: var(--colors-blue-400);
116
115
  --colors-border-focus-error-outer: var(--colors-blue-200);
117
- --colors-border-focus-inner: #ffffff;
116
+ --colors-border-focus-inner: #FFFFFF;
118
117
  --colors-border-focus-middle: var(--colors-blue-400);
119
118
  --colors-border-focus-outer: var(--colors-blue-200);
120
119
  --colors-border-focus-success-inner: var(--colors-white);
121
120
  --colors-border-focus-success-middle: var(--colors-blue-400);
122
121
  --colors-border-focus-success-outer: var(--colors-blue-200);
123
- --colors-focus-keyboard: #2b4df8;
122
+ --colors-focus-keyboard: #2B4DF8;
124
123
  --colors-border-interactive-danger: var(--colors-red-500);
125
124
  --colors-border-interactive-danger-hover: var(--colors-red-550);
126
125
  --colors-border-interactive-danger-pressed: var(--colors-red-600);
@@ -282,12 +281,8 @@
282
281
  --colors-icon-interactive-on-inverted-hover: var(--colors-cloud-50);
283
282
  --colors-icon-interactive-on-inverted-pressed: var(--colors-cloud-100);
284
283
  --colors-icon-interactive-on-inverted-secondary: var(--colors-cloud-300);
285
- --colors-icon-interactive-on-inverted-secondary-hover: var(
286
- --colors-cloud-350
287
- );
288
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
289
- --colors-cloud-400
290
- );
284
+ --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-cloud-350);
285
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-cloud-400);
291
286
  --colors-icon-interactive-primary: var(--colors-blue-500);
292
287
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
293
288
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -346,12 +341,8 @@
346
341
  --colors-text-interactive-on-inverted-hover: var(--colors-cloud-50);
347
342
  --colors-text-interactive-on-inverted-pressed: var(--colors-cloud-100);
348
343
  --colors-text-interactive-on-inverted-secondary: var(--colors-cloud-300);
349
- --colors-text-interactive-on-inverted-secondary-hover: var(
350
- --colors-cloud-350
351
- );
352
- --colors-text-interactive-on-inverted-secondary-pressed: var(
353
- --colors-cloud-400
354
- );
344
+ --colors-text-interactive-on-inverted-secondary-hover: var(--colors-cloud-350);
345
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-cloud-400);
355
346
  --colors-text-interactive-primary: var(--colors-blue-500);
356
347
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
357
348
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
@@ -577,7 +568,7 @@
577
568
  --colors-black-sticky-background: #151515;
578
569
  --colors-coral-sticky-background: var(--colors-coral-400);
579
570
  --colors-cyan-sticky-background: var(--colors-cyan-400);
580
- --colors-light-coal-sticky-background: #f3f5f7;
571
+ --colors-light-coal-sticky-background: #F3F5F7;
581
572
  --colors-light-lime-sticky-background: var(--colors-lime-250);
582
573
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
583
574
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -656,11 +647,24 @@
656
647
  --colors-teal-text: var(--colors-teal-900);
657
648
  --colors-teal-text-mild: var(--colors-teal-700);
658
649
  --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-250);
654
+ --radii-toolbar: var(--radii-200);
655
+ --radii-toolbar-item: var(--radii-150);
656
+ --radii-input: var(--radii-150);
657
+ --radii-button: var(--radii-100);
658
+ --radii-popup: var(--radii-100);
659
+ --radii-tooltip: var(--radii-100);
660
+ --radii-checkbox: var(--radii-75);
661
+ --radii-list-item: var(--radii-150);
662
+ --radii-tag: var(--radii-round);
663
+ --radii-calendar: var(--radii-250);
659
664
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
660
665
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
661
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
662
- 0 0 0 4px var(--colors-focus-keyboard);
666
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
663
667
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
664
668
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
665
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
669
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
666
670
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-themes",
3
- "version": "1.3.14",
3
+ "version": "1.3.15",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",