@mirohq/design-system-themes 1.3.5 → 1.3.7

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 +4 -3
  2. package/dark.css +2 -1
  3. package/dist/main.js +10 -6
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +10 -6
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +4 -3
  9. package/metadata.json +6 -3
  10. package/new-dark.css +2 -1
  11. package/new-light.css +2 -1
  12. package/package.json +2 -2
package/base.css CHANGED
@@ -38,6 +38,7 @@
38
38
  --colors-background-interactive-primary: var(--colors-blue-500);
39
39
  --colors-background-interactive-primary-hover: var(--colors-blue-550);
40
40
  --colors-background-interactive-primary-pressed: var(--colors-blue-600);
41
+ --colors-background-interactive-secondary-selected: var(--colors-blue-150);
41
42
  --colors-background-interactive-selected: var(--colors-blue-500);
42
43
  --colors-background-interactive-surface-hover: var(--colors-gray-100);
43
44
  --colors-background-interactive-surface-secondary-hover: var(
@@ -208,12 +209,12 @@
208
209
  --colors-format-icon-slides: var(--colors-coral-600);
209
210
  --colors-format-icon-table: var(--colors-moss-600);
210
211
  --colors-format-icon-timeline: var(--colors-moss-600);
211
- --colors-input-background-active: var(--colors-white);
212
212
  --colors-input-background-alt-active: var(--colors-gray-100);
213
213
  --colors-input-background-alt-default: var(--colors-gray-100);
214
214
  --colors-input-background-alt-hover: var(--colors-gray-100);
215
215
  --colors-input-background-default: var(--colors-white);
216
216
  --colors-input-background-disabled: var(--colors-gray-150);
217
+ --colors-input-background-focused: var(--colors-white);
217
218
  --colors-input-background-hover: var(--colors-white);
218
219
  --colors-input-border-default: var(--colors-gray-200);
219
220
  --colors-input-border-disabled: var(--colors-transparent);
@@ -231,8 +232,8 @@
231
232
  --colors-slider-background: var(--colors-gray-300);
232
233
  --colors-slider-control-background: var(--colors-white);
233
234
  --colors-slider-notch-background: var(--colors-gray-300);
234
- --colors-switch-background-default: var(--colors-gray-300);
235
- --colors-switch-background-hover: var(--colors-gray-350);
235
+ --colors-switch-background-default: var(--colors-gray-450);
236
+ --colors-switch-background-hover: var(--colors-gray-500);
236
237
  --colors-switch-control-background: var(--colors-white);
237
238
  --colors-tooltip-background: var(--colors-gray-950);
238
239
  --colors-tooltip-background-inset: var(--colors-gray-650);
package/dark.css CHANGED
@@ -38,6 +38,7 @@
38
38
  --colors-background-interactive-primary: var(--colors-blue-500);
39
39
  --colors-background-interactive-primary-hover: var(--colors-blue-450);
40
40
  --colors-background-interactive-primary-pressed: var(--colors-blue-400);
41
+ --colors-background-interactive-secondary-selected: var(--colors-blue-700);
41
42
  --colors-background-interactive-selected: var(--colors-blue-500);
42
43
  --colors-background-interactive-surface-hover: var(--colors-gray-900);
43
44
  --colors-background-interactive-surface-secondary-hover: var(
@@ -208,12 +209,12 @@
208
209
  --colors-format-icon-slides: var(--colors-coral-600);
209
210
  --colors-format-icon-table: var(--colors-moss-600);
210
211
  --colors-format-icon-timeline: var(--colors-moss-600);
211
- --colors-input-background-active: var(--colors-gray-950);
212
212
  --colors-input-background-alt-active: var(--colors-gray-750);
213
213
  --colors-input-background-alt-default: var(--colors-gray-750);
214
214
  --colors-input-background-alt-hover: var(--colors-gray-750);
215
215
  --colors-input-background-default: var(--colors-gray-950);
216
216
  --colors-input-background-disabled: var(--colors-gray-850);
217
+ --colors-input-background-focused: var(--colors-gray-950);
217
218
  --colors-input-background-hover: var(--colors-gray-950);
218
219
  --colors-input-border-default: var(--colors-gray-650);
219
220
  --colors-input-border-disabled: var(--colors-transparent);
package/dist/main.js CHANGED
@@ -34,6 +34,7 @@ const colors$3 = {
34
34
  "background-interactive-primary": "$blue-500",
35
35
  "background-interactive-primary-hover": "$blue-550",
36
36
  "background-interactive-primary-pressed": "$blue-600",
37
+ "background-interactive-secondary-selected": "$blue-150",
37
38
  "background-interactive-selected": "$blue-500",
38
39
  "background-interactive-surface-hover": "$gray-100",
39
40
  "background-interactive-surface-secondary-hover": "$gray-150",
@@ -202,12 +203,12 @@ const colors$3 = {
202
203
  "format-icon-slides": "$coral-600",
203
204
  "format-icon-table": "$moss-600",
204
205
  "format-icon-timeline": "$moss-600",
205
- "input-background-active": "$white",
206
206
  "input-background-alt-active": "$gray-100",
207
207
  "input-background-alt-default": "$gray-100",
208
208
  "input-background-alt-hover": "$gray-100",
209
209
  "input-background-default": "$white",
210
210
  "input-background-disabled": "$gray-150",
211
+ "input-background-focused": "$white",
211
212
  "input-background-hover": "$white",
212
213
  "input-border-default": "$gray-200",
213
214
  "input-border-disabled": "$transparent",
@@ -225,8 +226,8 @@ const colors$3 = {
225
226
  "slider-background": "$gray-300",
226
227
  "slider-control-background": "$white",
227
228
  "slider-notch-background": "$gray-300",
228
- "switch-background-default": "$gray-300",
229
- "switch-background-hover": "$gray-350",
229
+ "switch-background-default": "$gray-450",
230
+ "switch-background-hover": "$gray-500",
230
231
  "switch-control-background": "$white",
231
232
  "tooltip-background": "$gray-950",
232
233
  "tooltip-background-inset": "$gray-650",
@@ -632,6 +633,7 @@ const colors$2 = {
632
633
  "background-interactive-primary": "$blue-500",
633
634
  "background-interactive-primary-hover": "$blue-450",
634
635
  "background-interactive-primary-pressed": "$blue-400",
636
+ "background-interactive-secondary-selected": "$blue-700",
635
637
  "background-interactive-selected": "$blue-500",
636
638
  "background-interactive-surface-hover": "$gray-900",
637
639
  "background-interactive-surface-secondary-hover": "$gray-700",
@@ -800,12 +802,12 @@ const colors$2 = {
800
802
  "format-icon-slides": "$coral-600",
801
803
  "format-icon-table": "$moss-600",
802
804
  "format-icon-timeline": "$moss-600",
803
- "input-background-active": "$gray-950",
804
805
  "input-background-alt-active": "$gray-750",
805
806
  "input-background-alt-default": "$gray-750",
806
807
  "input-background-alt-hover": "$gray-750",
807
808
  "input-background-default": "$gray-950",
808
809
  "input-background-disabled": "$gray-850",
810
+ "input-background-focused": "$gray-950",
809
811
  "input-background-hover": "$gray-950",
810
812
  "input-border-default": "$gray-650",
811
813
  "input-border-disabled": "$transparent",
@@ -1230,6 +1232,7 @@ const colors$1 = {
1230
1232
  "background-interactive-primary": "$blue-500",
1231
1233
  "background-interactive-primary-hover": "$blue-550",
1232
1234
  "background-interactive-primary-pressed": "$blue-600",
1235
+ "background-interactive-secondary-selected": "$blue-150",
1233
1236
  "background-interactive-selected": "$blue-500",
1234
1237
  "background-interactive-surface-hover": "$cloud-100",
1235
1238
  "background-interactive-surface-secondary-hover": "$cloud-150",
@@ -1398,12 +1401,12 @@ const colors$1 = {
1398
1401
  "format-icon-slides": "$coral-600",
1399
1402
  "format-icon-table": "$moss-600",
1400
1403
  "format-icon-timeline": "$moss-600",
1401
- "input-background-active": "$cloud-100",
1402
1404
  "input-background-alt-active": "$cloud-100",
1403
1405
  "input-background-alt-default": "$cloud-100",
1404
1406
  "input-background-alt-hover": "$cloud-100",
1405
1407
  "input-background-default": "$cloud-100",
1406
1408
  "input-background-disabled": "$cloud-150",
1409
+ "input-background-focused": "$cloud-100",
1407
1410
  "input-background-hover": "$cloud-100",
1408
1411
  "input-border-default": "$transparent",
1409
1412
  "input-border-disabled": "$transparent",
@@ -1828,6 +1831,7 @@ const colors = {
1828
1831
  "background-interactive-primary": "$blue-500",
1829
1832
  "background-interactive-primary-hover": "$blue-450",
1830
1833
  "background-interactive-primary-pressed": "$blue-400",
1834
+ "background-interactive-secondary-selected": "$blue-700",
1831
1835
  "background-interactive-selected": "$blue-500",
1832
1836
  "background-interactive-surface-hover": "$cloud-850",
1833
1837
  "background-interactive-surface-secondary-hover": "$cloud-700",
@@ -1996,12 +2000,12 @@ const colors = {
1996
2000
  "format-icon-slides": "$coral-600",
1997
2001
  "format-icon-table": "$moss-600",
1998
2002
  "format-icon-timeline": "$moss-600",
1999
- "input-background-active": "$cloud-850",
2000
2003
  "input-background-alt-active": "$cloud-950",
2001
2004
  "input-background-alt-default": "$cloud-950",
2002
2005
  "input-background-alt-hover": "$cloud-950",
2003
2006
  "input-background-default": "$cloud-850",
2004
2007
  "input-background-disabled": "$cloud-850",
2008
+ "input-background-focused": "$cloud-850",
2005
2009
  "input-background-hover": "$cloud-850",
2006
2010
  "input-border-default": "$transparent",
2007
2011
  "input-border-disabled": "$transparent",