@mirohq/design-system-themes 1.3.10 → 1.3.11

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 (8) hide show
  1. package/base.css +24 -33
  2. package/dark.css +26 -35
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js.map +1 -1
  5. package/light.css +24 -33
  6. package/new-dark.css +26 -35
  7. package/new-light.css +26 -39
  8. package/package.json +2 -2
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,9 +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);
45
- --colors-background-interactive-surface-secondary-hover: var(
46
- --colors-gray-150
47
- );
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-150);
48
44
  --colors-background-neutrals: var(--colors-white);
49
45
  --colors-background-neutrals-active: var(--colors-gray-150);
50
46
  --colors-background-neutrals-container: var(--colors-white);
@@ -110,13 +106,13 @@
110
106
  --colors-border-focus-error-inner: var(--colors-white);
111
107
  --colors-border-focus-error-middle: var(--colors-blue-400);
112
108
  --colors-border-focus-error-outer: var(--colors-blue-200);
113
- --colors-border-focus-inner: #ffffff;
109
+ --colors-border-focus-inner: #FFFFFF;
114
110
  --colors-border-focus-middle: var(--colors-blue-400);
115
111
  --colors-border-focus-outer: var(--colors-blue-200);
116
112
  --colors-border-focus-success-inner: var(--colors-white);
117
113
  --colors-border-focus-success-middle: var(--colors-blue-400);
118
114
  --colors-border-focus-success-outer: var(--colors-blue-200);
119
- --colors-focus-keyboard: #2b4df8;
115
+ --colors-focus-keyboard: #2B4DF8;
120
116
  --colors-border-interactive-danger: var(--colors-red-500);
121
117
  --colors-border-interactive-danger-hover: var(--colors-red-550);
122
118
  --colors-border-interactive-danger-pressed: var(--colors-red-600);
@@ -264,9 +260,7 @@
264
260
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-100);
265
261
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-150);
266
262
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
267
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
268
- --colors-gray-250
269
- );
263
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
270
264
  --colors-icon-interactive-primary: var(--colors-blue-500);
271
265
  --colors-icon-interactive-primary-hover: var(--colors-blue-550);
272
266
  --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
@@ -326,9 +320,7 @@
326
320
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-100);
327
321
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-150);
328
322
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-200);
329
- --colors-text-interactive-on-inverted-secondary-pressed: var(
330
- --colors-gray-250
331
- );
323
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-250);
332
324
  --colors-text-interactive-primary: var(--colors-blue-500);
333
325
  --colors-text-interactive-primary-hover: var(--colors-blue-550);
334
326
  --colors-text-interactive-primary-pressed: var(--colors-blue-600);
@@ -388,6 +380,20 @@
388
380
  --colors-text-secondary: var(--colors-gray-500);
389
381
  --colors-text-warning: var(--colors-yellow-800);
390
382
  --colors-text-warning-subtle: var(--colors-yellow-600);
383
+ --radii-panel: var(--radii-150);
384
+ --radii-notification: var(--radii-100);
385
+ --radii-avatar-people: var(--radii-round);
386
+ --radii-avatar-team: var(--radii-50);
387
+ --radii-avatar-group: var(--radii-50);
388
+ --radii-dropdown: var(--radii-100);
389
+ --radii-toolbar: var(--radii-100);
390
+ --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
+ --radii-tooltip: var(--radii-100);
395
+ --radii-checkbox: var(--radii-50);
396
+ --radii-list-item: var(--radii-50);
391
397
  --colors-coal-background: var(--colors-coal-500);
392
398
  --colors-coal-background-mild: var(--colors-coal-350);
393
399
  --colors-coal-background-prominent: var(--colors-coal-700);
@@ -537,7 +543,7 @@
537
543
  --colors-black-sticky-background: #151515;
538
544
  --colors-coral-sticky-background: var(--colors-coral-400);
539
545
  --colors-cyan-sticky-background: var(--colors-cyan-400);
540
- --colors-light-coal-sticky-background: #f3f5f7;
546
+ --colors-light-coal-sticky-background: #F3F5F7;
541
547
  --colors-light-lime-sticky-background: var(--colors-lime-250);
542
548
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
543
549
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -616,25 +622,10 @@
616
622
  --colors-teal-text: var(--colors-teal-900);
617
623
  --colors-teal-text-mild: var(--colors-teal-700);
618
624
  --colors-teal-text-subtle: var(--colors-teal-100);
619
- --radii-panel: var(--radii-150);
620
- --radii-notification: var(--radii-100);
621
- --radii-avatar-people: var(--radii-round);
622
- --radii-avatar-team: var(--radii-50);
623
- --radii-avatar-group: var(--radii-50);
624
- --radii-dropdown: var(--radii-100);
625
- --radii-toolbar: var(--radii-100);
626
- --radii-toolbar-item: var(--radii-50);
627
- --radii-input: var(--radii-50);
628
- --radii-button: var(--radii-50);
629
- --radii-popup: var(--radii-100);
630
- --radii-tooltip: var(--radii-100);
631
- --radii-checkbox: var(--radii-50);
632
- --radii-list-item: var(--radii-50);
633
625
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
634
626
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
635
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
636
- 0 0 0 4px var(--colors-focus-keyboard);
627
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
637
628
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
638
629
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
639
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
630
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
640
631
  }
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,9 +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);
45
- --colors-background-interactive-surface-secondary-hover: var(
46
- --colors-gray-700
47
- );
43
+ --colors-background-interactive-surface-secondary-hover: var(--colors-gray-700);
48
44
  --colors-background-neutrals: var(--colors-gray-950);
49
45
  --colors-background-neutrals-active: var(--colors-gray-850);
50
46
  --colors-background-neutrals-container: var(--colors-gray-850);
@@ -110,13 +106,13 @@
110
106
  --colors-border-focus-error-inner: var(--colors-gray-950);
111
107
  --colors-border-focus-error-middle: var(--colors-blue-350);
112
108
  --colors-border-focus-error-outer: var(--colors-blue-550);
113
- --colors-border-focus-inner: #1a1b1e;
109
+ --colors-border-focus-inner: #1A1B1E;
114
110
  --colors-border-focus-middle: var(--colors-blue-350);
115
111
  --colors-border-focus-outer: var(--colors-blue-550);
116
112
  --colors-border-focus-success-inner: var(--colors-gray-950);
117
113
  --colors-border-focus-success-middle: var(--colors-blue-350);
118
114
  --colors-border-focus-success-outer: var(--colors-blue-550);
119
- --colors-focus-keyboard: #2b4df8;
115
+ --colors-focus-keyboard: #2B4DF8;
120
116
  --colors-border-interactive-danger: var(--colors-red-500);
121
117
  --colors-border-interactive-danger-hover: var(--colors-red-450);
122
118
  --colors-border-interactive-danger-pressed: var(--colors-red-400);
@@ -264,9 +260,7 @@
264
260
  --colors-icon-interactive-on-inverted-pressed: var(--colors-gray-800);
265
261
  --colors-icon-interactive-on-inverted-secondary: var(--colors-gray-700);
266
262
  --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
267
- --colors-icon-interactive-on-inverted-secondary-pressed: var(
268
- --colors-gray-600
269
- );
263
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(--colors-gray-600);
270
264
  --colors-icon-interactive-primary: var(--colors-blue-400);
271
265
  --colors-icon-interactive-primary-hover: var(--colors-blue-350);
272
266
  --colors-icon-interactive-primary-pressed: var(--colors-blue-300);
@@ -326,9 +320,7 @@
326
320
  --colors-text-interactive-on-inverted-pressed: var(--colors-gray-800);
327
321
  --colors-text-interactive-on-inverted-secondary: var(--colors-gray-700);
328
322
  --colors-text-interactive-on-inverted-secondary-hover: var(--colors-gray-650);
329
- --colors-text-interactive-on-inverted-secondary-pressed: var(
330
- --colors-gray-600
331
- );
323
+ --colors-text-interactive-on-inverted-secondary-pressed: var(--colors-gray-600);
332
324
  --colors-text-interactive-primary: var(--colors-blue-400);
333
325
  --colors-text-interactive-primary-hover: var(--colors-blue-350);
334
326
  --colors-text-interactive-primary-pressed: var(--colors-blue-300);
@@ -388,6 +380,20 @@
388
380
  --colors-text-secondary: var(--colors-gray-300);
389
381
  --colors-text-warning: var(--colors-yellow-200);
390
382
  --colors-text-warning-subtle: var(--colors-yellow-300);
383
+ --radii-panel: var(--radii-150);
384
+ --radii-notification: var(--radii-100);
385
+ --radii-avatar-people: var(--radii-round);
386
+ --radii-avatar-team: var(--radii-50);
387
+ --radii-avatar-group: var(--radii-50);
388
+ --radii-dropdown: var(--radii-100);
389
+ --radii-toolbar: var(--radii-100);
390
+ --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
+ --radii-tooltip: var(--radii-100);
395
+ --radii-checkbox: var(--radii-50);
396
+ --radii-list-item: var(--radii-50);
391
397
  --colors-coal-background: var(--colors-coal-500);
392
398
  --colors-coal-background-mild: var(--colors-coal-350);
393
399
  --colors-coal-background-prominent: var(--colors-coal-700);
@@ -537,7 +543,7 @@
537
543
  --colors-black-sticky-background: #151515;
538
544
  --colors-coral-sticky-background: var(--colors-coral-400);
539
545
  --colors-cyan-sticky-background: var(--colors-cyan-400);
540
- --colors-light-coal-sticky-background: #f3f5f7;
546
+ --colors-light-coal-sticky-background: #F3F5F7;
541
547
  --colors-light-lime-sticky-background: var(--colors-lime-250);
542
548
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
543
549
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -616,25 +622,10 @@
616
622
  --colors-teal-text: var(--colors-teal-900);
617
623
  --colors-teal-text-mild: var(--colors-teal-700);
618
624
  --colors-teal-text-subtle: var(--colors-teal-100);
619
- --radii-panel: var(--radii-150);
620
- --radii-notification: var(--radii-100);
621
- --radii-avatar-people: var(--radii-round);
622
- --radii-avatar-team: var(--radii-50);
623
- --radii-avatar-group: var(--radii-50);
624
- --radii-dropdown: var(--radii-100);
625
- --radii-toolbar: var(--radii-100);
626
- --radii-toolbar-item: var(--radii-50);
627
- --radii-input: var(--radii-50);
628
- --radii-button: var(--radii-50);
629
- --radii-popup: var(--radii-100);
630
- --radii-tooltip: var(--radii-100);
631
- --radii-checkbox: var(--radii-50);
632
- --radii-list-item: var(--radii-50);
633
- --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
634
- --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
635
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
636
- 0 0 0 4px var(--colors-focus-keyboard);
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);
637
628
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
638
629
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
639
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
630
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
640
631
  }