@mirohq/design-system-themes 1.3.2 → 1.3.4

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 +13 -8
  2. package/dark.css +16 -11
  3. package/dist/main.js +32 -32
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +32 -32
  6. package/dist/module.js.map +1 -1
  7. package/light.css +13 -8
  8. package/metadata.json +1097 -0
  9. package/new-dark.css +27 -23
  10. package/new-light.css +24 -20
  11. package/package.json +6 -4
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);
@@ -38,7 +40,9 @@
38
40
  --colors-background-interactive-primary-pressed: var(--colors-blue-600);
39
41
  --colors-background-interactive-selected: var(--colors-blue-500);
40
42
  --colors-background-interactive-surface-hover: var(--colors-gray-100);
41
- --colors-background-interactive-surface-secondary-hover: var(--colors-gray-150);
43
+ --colors-background-interactive-surface-secondary-hover: var(
44
+ --colors-gray-150
45
+ );
42
46
  --colors-background-neutrals: var(--colors-white);
43
47
  --colors-background-neutrals-active: var(--colors-gray-150);
44
48
  --colors-background-neutrals-container: var(--colors-white);
@@ -101,13 +105,13 @@
101
105
  --colors-border-focus-error-inner: var(--colors-white);
102
106
  --colors-border-focus-error-middle: var(--colors-blue-400);
103
107
  --colors-border-focus-error-outer: var(--colors-blue-200);
104
- --colors-border-focus-inner: #FFFFFF;
108
+ --colors-border-focus-inner: #ffffff;
105
109
  --colors-border-focus-middle: var(--colors-blue-400);
106
110
  --colors-border-focus-outer: var(--colors-blue-200);
107
111
  --colors-border-focus-success-inner: var(--colors-white);
108
112
  --colors-border-focus-success-middle: var(--colors-blue-400);
109
113
  --colors-border-focus-success-outer: var(--colors-blue-200);
110
- --colors-focus-keyboard: #2B4DF8;
114
+ --colors-focus-keyboard: #2b4df8;
111
115
  --colors-border-interactive-danger: var(--colors-red-500);
112
116
  --colors-border-interactive-danger-hover: var(--colors-red-550);
113
117
  --colors-border-interactive-danger-pressed: var(--colors-red-600);
@@ -517,7 +521,7 @@
517
521
  --colors-black-sticky-background: #151515;
518
522
  --colors-coral-sticky-background: var(--colors-coral-400);
519
523
  --colors-cyan-sticky-background: var(--colors-cyan-400);
520
- --colors-light-coal-sticky-background: #F3F5F7;
524
+ --colors-light-coal-sticky-background: #f3f5f7;
521
525
  --colors-light-lime-sticky-background: var(--colors-lime-250);
522
526
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
523
527
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -598,8 +602,9 @@
598
602
  --colors-teal-text-subtle: var(--colors-teal-100);
599
603
  --shadows-50: 0 4px 16px rgba(5, 0, 56, 0.07);
600
604
  --shadows-100: 0 8px 32px rgba(5, 0, 56, 0.03);
601
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
605
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
606
+ 0 0 0 4px var(--colors-focus-keyboard);
602
607
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
603
608
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
604
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
609
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
605
610
  }
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);
@@ -38,7 +40,9 @@
38
40
  --colors-background-interactive-primary-pressed: var(--colors-blue-400);
39
41
  --colors-background-interactive-selected: var(--colors-blue-500);
40
42
  --colors-background-interactive-surface-hover: var(--colors-gray-900);
41
- --colors-background-interactive-surface-secondary-hover: var(--colors-gray-700);
43
+ --colors-background-interactive-surface-secondary-hover: var(
44
+ --colors-gray-700
45
+ );
42
46
  --colors-background-neutrals: var(--colors-gray-950);
43
47
  --colors-background-neutrals-active: var(--colors-gray-850);
44
48
  --colors-background-neutrals-container: var(--colors-gray-850);
@@ -101,13 +105,13 @@
101
105
  --colors-border-focus-error-inner: var(--colors-gray-950);
102
106
  --colors-border-focus-error-middle: var(--colors-blue-350);
103
107
  --colors-border-focus-error-outer: var(--colors-blue-550);
104
- --colors-border-focus-inner: #1A1B1E;
108
+ --colors-border-focus-inner: #1a1b1e;
105
109
  --colors-border-focus-middle: var(--colors-blue-350);
106
110
  --colors-border-focus-outer: var(--colors-blue-550);
107
111
  --colors-border-focus-success-inner: var(--colors-gray-950);
108
112
  --colors-border-focus-success-middle: var(--colors-blue-350);
109
113
  --colors-border-focus-success-outer: var(--colors-blue-550);
110
- --colors-focus-keyboard: #2B4DF8;
114
+ --colors-focus-keyboard: #2b4df8;
111
115
  --colors-border-interactive-danger: var(--colors-red-500);
112
116
  --colors-border-interactive-danger-hover: var(--colors-red-450);
113
117
  --colors-border-interactive-danger-pressed: var(--colors-red-400);
@@ -156,7 +160,7 @@
156
160
  --colors-border-warning-subtle: var(--colors-yellow-700);
157
161
  --colors-button-background-danger: var(--colors-red-500);
158
162
  --colors-button-background-danger-hover: var(--colors-red-450);
159
- --colors-button-background-danger-pressed: var(--colors-red-400);
163
+ --colors-button-background-danger-pressed: var(--colors-red-450);
160
164
  --colors-button-background-ghost: var(--colors-transparent);
161
165
  --colors-button-background-ghost-hover: var(--colors-gray-800);
162
166
  --colors-button-background-ghost-pressed: var(--colors-gray-750);
@@ -517,7 +521,7 @@
517
521
  --colors-black-sticky-background: #151515;
518
522
  --colors-coral-sticky-background: var(--colors-coral-400);
519
523
  --colors-cyan-sticky-background: var(--colors-cyan-400);
520
- --colors-light-coal-sticky-background: #F3F5F7;
524
+ --colors-light-coal-sticky-background: #f3f5f7;
521
525
  --colors-light-lime-sticky-background: var(--colors-lime-250);
522
526
  --colors-light-ocean-sticky-background: var(--colors-ocean-250);
523
527
  --colors-light-pink-sticky-background: var(--colors-pink-250);
@@ -596,10 +600,11 @@
596
600
  --colors-teal-text: var(--colors-teal-900);
597
601
  --colors-teal-text-mild: var(--colors-teal-700);
598
602
  --colors-teal-text-subtle: var(--colors-teal-100);
599
- --shadows-50: 0 0 8px 0 rgba(9,9,9,.65);
600
- --shadows-100: 0 0 16px 0 rgba(9,9,9,.65);
601
- --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner), 0 0 0 4px var(--colors-focus-keyboard);
603
+ --shadows-50: 0 0 8px 0 rgba(9, 9, 9, 0.65);
604
+ --shadows-100: 0 0 16px 0 rgba(9, 9, 9, 0.65);
605
+ --shadows-focus: 0 0 0 2px var(--colors-border-focus-inner),
606
+ 0 0 0 4px var(--colors-focus-keyboard);
602
607
  --shadows-elevation-0: 0 0 0 1px var(--colors-gray-200);
603
608
  --shadows-elevation-100: 0 2px 4px 0px #22242814;
604
- --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280A;
609
+ --shadows-elevation-200: 0 2px 8px 0 #2224281f, 0 0 12px 0 #2224280a;
605
610
  }
package/dist/main.js CHANGED
@@ -750,7 +750,7 @@ const colors$2 = {
750
750
  "border-warning-subtle": "$yellow-700",
751
751
  "button-background-danger": "$red-500",
752
752
  "button-background-danger-hover": "$red-450",
753
- "button-background-danger-pressed": "$red-400",
753
+ "button-background-danger-pressed": "$red-450",
754
754
  "button-background-ghost": "$transparent",
755
755
  "button-background-ghost-hover": "$gray-800",
756
756
  "button-background-ghost-pressed": "$gray-750",
@@ -1350,15 +1350,15 @@ const colors$1 = {
1350
1350
  "button-background-ghost": "$transparent",
1351
1351
  "button-background-ghost-hover": "$cloud-150",
1352
1352
  "button-background-ghost-pressed": "$cloud-200",
1353
- "button-background-primary": "$blue-500",
1354
- "button-background-primary-hover": "$blue-550",
1355
- "button-background-primary-pressed": "$blue-600",
1353
+ "button-background-primary": "$cloud-800",
1354
+ "button-background-primary-hover": "$cloud-900",
1355
+ "button-background-primary-pressed": "$cloud-950",
1356
1356
  "button-background-secondary": "$transparent",
1357
1357
  "button-background-secondary-hover": "$cloud-150",
1358
1358
  "button-background-secondary-pressed": "$cloud-200",
1359
- "button-background-tertiary": "$cloud-900",
1360
- "button-background-tertiary-hover": "$cloud-850",
1361
- "button-background-tertiary-pressed": "$cloud-850",
1359
+ "button-background-tertiary": "$transparent",
1360
+ "button-background-tertiary-hover": "$cloud-150",
1361
+ "button-background-tertiary-pressed": "$cloud-200",
1362
1362
  "button-border-danger": "$red-500",
1363
1363
  "button-border-danger-hover": "$red-550",
1364
1364
  "button-border-danger-pressed": "$red-600",
@@ -1367,20 +1367,20 @@ const colors$1 = {
1367
1367
  "button-border-primary": "$blue-500",
1368
1368
  "button-border-primary-hover": "$blue-550",
1369
1369
  "button-border-primary-pressed": "$blue-600",
1370
- "button-border-secondary": "$cloud-900",
1371
- "button-border-secondary-hover": "$cloud-950",
1372
- "button-border-secondary-pressed": "$cloud-1000",
1373
- "button-border-tertiary": "$transparent",
1374
- "button-border-tertiary-hover": "$cloud-850",
1375
- "button-border-tertiary-pressed": "$cloud-900",
1370
+ "button-border-secondary": "$cloud-700",
1371
+ "button-border-secondary-hover": "$cloud-650",
1372
+ "button-border-secondary-pressed": "$cloud-650",
1373
+ "button-border-tertiary": "$cloud-200",
1374
+ "button-border-tertiary-hover": "$cloud-300",
1375
+ "button-border-tertiary-pressed": "$cloud-350",
1376
1376
  "button-icon-on-danger": "$white",
1377
1377
  "button-icon-on-primary": "$white",
1378
1378
  "button-icon-on-secondary": "$cloud-900",
1379
- "button-icon-on-tertiary": "$white",
1379
+ "button-icon-on-tertiary": "$cloud-900",
1380
1380
  "button-text-on-danger": "$white",
1381
1381
  "button-text-on-primary": "$white",
1382
1382
  "button-text-on-secondary": "$cloud-900",
1383
- "button-text-on-tertiary": "$white",
1383
+ "button-text-on-tertiary": "$cloud-900",
1384
1384
  "chip-background": "$cloud-100",
1385
1385
  "chip-background-hover": "$cloud-150",
1386
1386
  "chip-text": "$cloud-900",
@@ -1942,19 +1942,19 @@ const colors = {
1942
1942
  "border-warning-subtle": "$yellow-700",
1943
1943
  "button-background-danger": "$red-500",
1944
1944
  "button-background-danger-hover": "$red-450",
1945
- "button-background-danger-pressed": "$red-400",
1945
+ "button-background-danger-pressed": "$red-450",
1946
1946
  "button-background-ghost": "$transparent",
1947
- "button-background-ghost-hover": "$cloud-150",
1948
- "button-background-ghost-pressed": "$cloud-100",
1949
- "button-background-primary": "$blue-500",
1950
- "button-background-primary-hover": "$blue-450",
1951
- "button-background-primary-pressed": "$blue-400",
1947
+ "button-background-ghost-hover": "$cloud-750",
1948
+ "button-background-ghost-pressed": "$cloud-700",
1949
+ "button-background-primary": "$white",
1950
+ "button-background-primary-hover": "$cloud-100",
1951
+ "button-background-primary-pressed": "$cloud-150",
1952
1952
  "button-background-secondary": "$transparent",
1953
- "button-background-secondary-hover": "$cloud-800",
1954
- "button-background-secondary-pressed": "$cloud-750",
1955
- "button-background-tertiary": "$cloud-700",
1956
- "button-background-tertiary-hover": "$cloud-650",
1957
- "button-background-tertiary-pressed": "$cloud-600",
1953
+ "button-background-secondary-hover": "$cloud-750",
1954
+ "button-background-secondary-pressed": "$cloud-700",
1955
+ "button-background-tertiary": "$transparent",
1956
+ "button-background-tertiary-hover": "$cloud-750",
1957
+ "button-background-tertiary-pressed": "$cloud-700",
1958
1958
  "button-border-danger": "$red-500",
1959
1959
  "button-border-danger-hover": "$red-450",
1960
1960
  "button-border-danger-pressed": "$red-400",
@@ -1963,18 +1963,18 @@ const colors = {
1963
1963
  "button-border-primary": "$blue-500",
1964
1964
  "button-border-primary-hover": "$blue-450",
1965
1965
  "button-border-primary-pressed": "$blue-400",
1966
- "button-border-secondary": "$cloud-700",
1967
- "button-border-secondary-hover": "$cloud-650",
1968
- "button-border-secondary-pressed": "$cloud-600",
1969
- "button-border-tertiary": "$transparent",
1966
+ "button-border-secondary": "$cloud-100",
1967
+ "button-border-secondary-hover": "$cloud-50",
1968
+ "button-border-secondary-pressed": "$cloud-50",
1969
+ "button-border-tertiary": "$cloud-700",
1970
1970
  "button-border-tertiary-hover": "$cloud-650",
1971
1971
  "button-border-tertiary-pressed": "$cloud-600",
1972
1972
  "button-icon-on-danger": "$white",
1973
- "button-icon-on-primary": "$white",
1973
+ "button-icon-on-primary": "$cloud-900",
1974
1974
  "button-icon-on-secondary": "$white",
1975
1975
  "button-icon-on-tertiary": "$white",
1976
1976
  "button-text-on-danger": "$white",
1977
- "button-text-on-primary": "$white",
1977
+ "button-text-on-primary": "$cloud-900",
1978
1978
  "button-text-on-secondary": "$white",
1979
1979
  "button-text-on-tertiary": "$white",
1980
1980
  "chip-background": "$cloud-750",