@marianmeres/stuic 3.0.0 → 3.0.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 (156) hide show
  1. package/dist/actions/index.d.ts +1 -0
  2. package/dist/actions/index.js +1 -0
  3. package/dist/actions/typeahead.svelte.d.ts +53 -0
  4. package/dist/actions/typeahead.svelte.js +328 -0
  5. package/dist/base.css +17 -0
  6. package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte +4 -3
  7. package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte.d.ts +4 -3
  8. package/dist/components/AlertConfirmPrompt/Current.svelte +1 -2
  9. package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts +0 -1
  10. package/dist/components/AlertConfirmPrompt/index.css +47 -43
  11. package/dist/components/AssetsPreview/AssetsPreview.svelte +0 -1
  12. package/dist/components/AssetsPreview/AssetsPreview.svelte.d.ts +0 -1
  13. package/dist/components/AssetsPreview/index.css +31 -29
  14. package/dist/components/Avatar/Avatar.svelte +0 -1
  15. package/dist/components/Avatar/Avatar.svelte.d.ts +0 -1
  16. package/dist/components/Avatar/index.css +87 -85
  17. package/dist/components/Backdrop/Backdrop.svelte +0 -1
  18. package/dist/components/Backdrop/Backdrop.svelte.d.ts +0 -1
  19. package/dist/components/Backdrop/index.css +15 -13
  20. package/dist/components/Button/Button.svelte +0 -1
  21. package/dist/components/Button/Button.svelte.d.ts +0 -1
  22. package/dist/components/Button/index.css +431 -429
  23. package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte +0 -1
  24. package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte.d.ts +0 -1
  25. package/dist/components/ButtonGroupRadio/index.css +123 -117
  26. package/dist/components/Collapsible/index.css +17 -15
  27. package/dist/components/CommandMenu/CommandMenu.svelte +7 -4
  28. package/dist/components/CommandMenu/CommandMenu.svelte.d.ts +0 -1
  29. package/dist/components/CommandMenu/index.css +27 -25
  30. package/dist/components/DismissibleMessage/DismissibleMessage.svelte +0 -2
  31. package/dist/components/DismissibleMessage/DismissibleMessage.svelte.d.ts +0 -1
  32. package/dist/components/DismissibleMessage/index.css +116 -110
  33. package/dist/components/DropdownMenu/DropdownMenu.svelte +317 -74
  34. package/dist/components/DropdownMenu/DropdownMenu.svelte.d.ts +19 -1
  35. package/dist/components/DropdownMenu/index.css +236 -170
  36. package/dist/components/DropdownMenu/index.d.ts +1 -1
  37. package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte +3 -1
  38. package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte.d.ts +1 -0
  39. package/dist/components/Input/FieldInput.svelte +8 -0
  40. package/dist/components/Input/FieldInput.svelte.d.ts +2 -0
  41. package/dist/components/Input/FieldOptions.svelte +1 -1
  42. package/dist/components/Input/index.css +411 -398
  43. package/dist/components/KbdShortcut/KbdShortcut.svelte +4 -12
  44. package/dist/components/KbdShortcut/README.md +34 -0
  45. package/dist/components/KbdShortcut/index.css +55 -0
  46. package/dist/components/ListItemButton/ListItemButton.svelte +0 -1
  47. package/dist/components/ListItemButton/ListItemButton.svelte.d.ts +0 -1
  48. package/dist/components/ListItemButton/index.css +118 -116
  49. package/dist/components/Modal/Modal.svelte +0 -1
  50. package/dist/components/Modal/Modal.svelte.d.ts +0 -1
  51. package/dist/components/Modal/index.css +18 -16
  52. package/dist/components/ModalDialog/index.css +29 -27
  53. package/dist/components/Nav/Nav.svelte +732 -0
  54. package/dist/components/Nav/Nav.svelte.d.ts +110 -0
  55. package/dist/components/Nav/README.md +334 -0
  56. package/dist/components/Nav/index.css +318 -0
  57. package/dist/components/Nav/index.d.ts +1 -0
  58. package/dist/components/Nav/index.js +1 -0
  59. package/dist/components/Notifications/Notifications.svelte +2 -3
  60. package/dist/components/Notifications/Notifications.svelte.d.ts +0 -1
  61. package/dist/components/Notifications/index.css +158 -158
  62. package/dist/components/Notifications/notifications-stack.svelte.d.ts +4 -0
  63. package/dist/components/Notifications/notifications-stack.svelte.js +8 -0
  64. package/dist/components/Progress/Progress.svelte +4 -2
  65. package/dist/components/Progress/Progress.svelte.d.ts +1 -0
  66. package/dist/components/Progress/README.md +86 -15
  67. package/dist/components/Progress/_internal/Bar.svelte +4 -15
  68. package/dist/components/Progress/_internal/Bar.svelte.d.ts +1 -1
  69. package/dist/components/Progress/_internal/Circle.svelte +30 -2
  70. package/dist/components/Progress/_internal/Circle.svelte.d.ts +1 -0
  71. package/dist/components/Progress/index.css +47 -1
  72. package/dist/components/Skeleton/README.md +152 -0
  73. package/dist/components/Skeleton/Skeleton.svelte +6 -7
  74. package/dist/components/Skeleton/Skeleton.svelte.d.ts +0 -1
  75. package/dist/components/Skeleton/index.css +73 -43
  76. package/dist/components/Spinner/README.md +149 -37
  77. package/dist/components/Spinner/Spinner.svelte +14 -38
  78. package/dist/components/Spinner/Spinner.svelte.d.ts +2 -1
  79. package/dist/components/Spinner/SpinnerCircle.svelte +6 -34
  80. package/dist/components/Spinner/SpinnerCircle.svelte.d.ts +1 -0
  81. package/dist/components/Spinner/SpinnerCircleOscillate.svelte +10 -5
  82. package/dist/components/Spinner/SpinnerUnicode.svelte +3 -1
  83. package/dist/components/Spinner/SpinnerUnicode.svelte.d.ts +1 -0
  84. package/dist/components/Spinner/index.css +104 -0
  85. package/dist/components/Switch/README.md +34 -18
  86. package/dist/components/Switch/Switch.svelte +24 -46
  87. package/dist/components/Switch/Switch.svelte.d.ts +4 -2
  88. package/dist/components/Switch/index.css +120 -2
  89. package/dist/components/Switch/index.d.ts +1 -2
  90. package/dist/components/Switch/index.js +1 -2
  91. package/dist/components/TabbedMenu/README.md +28 -17
  92. package/dist/components/TabbedMenu/TabbedMenu.svelte +5 -46
  93. package/dist/components/TabbedMenu/TabbedMenu.svelte.d.ts +0 -1
  94. package/dist/components/TabbedMenu/index.css +85 -3
  95. package/dist/components/ThemePreview/ThemePreview.svelte +86 -33
  96. package/dist/components/ThemePreview/ThemePreview.svelte.d.ts +3 -1
  97. package/dist/components/ThemePreview/index.css +24 -8
  98. package/dist/components/TwCheck/README.md +32 -13
  99. package/dist/components/TwCheck/TwCheck.svelte +11 -9
  100. package/dist/components/TwCheck/TwCheck.svelte.d.ts +0 -1
  101. package/dist/components/TwCheck/index.css +14 -0
  102. package/dist/components/TypeaheadInput/TypeaheadInput.svelte +19 -187
  103. package/dist/components/TypeaheadInput/TypeaheadInput.svelte.d.ts +4 -2
  104. package/dist/icons/index.d.ts +1 -0
  105. package/dist/icons/index.js +1 -0
  106. package/dist/index.css +44 -39
  107. package/dist/index.d.ts +1 -0
  108. package/dist/index.js +1 -0
  109. package/dist/themes/blue-orange.css +246 -156
  110. package/dist/themes/blue-orange.js +24 -0
  111. package/dist/themes/cyan-red.css +246 -156
  112. package/dist/themes/cyan-red.js +24 -0
  113. package/dist/themes/cyan-slate.css +246 -156
  114. package/dist/themes/cyan-slate.js +25 -1
  115. package/dist/themes/emerald-pink.css +246 -156
  116. package/dist/themes/emerald-pink.js +25 -1
  117. package/dist/themes/fuchsia-emerald.css +246 -156
  118. package/dist/themes/fuchsia-emerald.js +25 -1
  119. package/dist/themes/gray.css +246 -156
  120. package/dist/themes/gray.js +24 -0
  121. package/dist/themes/indigo-amber.css +246 -156
  122. package/dist/themes/indigo-amber.js +26 -2
  123. package/dist/themes/neutral.css +246 -156
  124. package/dist/themes/neutral.js +24 -0
  125. package/dist/themes/pink-emerald.css +246 -156
  126. package/dist/themes/pink-emerald.js +25 -1
  127. package/dist/themes/pink-teal.css +253 -0
  128. package/dist/themes/pink-teal.d.ts +6 -0
  129. package/dist/themes/pink-teal.js +175 -0
  130. package/dist/themes/purple-yellow.css +246 -156
  131. package/dist/themes/purple-yellow.js +24 -0
  132. package/dist/themes/rainbow.css +246 -156
  133. package/dist/themes/rainbow.js +25 -1
  134. package/dist/themes/red-blue.css +246 -156
  135. package/dist/themes/red-blue.js +24 -0
  136. package/dist/themes/red-cyan.css +246 -156
  137. package/dist/themes/red-cyan.js +24 -0
  138. package/dist/themes/red-sky.css +253 -0
  139. package/dist/themes/red-sky.d.ts +6 -0
  140. package/dist/themes/red-sky.js +175 -0
  141. package/dist/themes/rose-teal.css +246 -156
  142. package/dist/themes/rose-teal.js +24 -0
  143. package/dist/themes/sky-amber.css +246 -156
  144. package/dist/themes/sky-amber.js +26 -2
  145. package/dist/themes/slate-cyan.css +246 -156
  146. package/dist/themes/slate-cyan.js +25 -1
  147. package/dist/themes/teal-rose.css +246 -156
  148. package/dist/themes/teal-rose.js +24 -0
  149. package/dist/themes/violet-lime.css +246 -156
  150. package/dist/themes/violet-lime.js +27 -3
  151. package/dist/utils/design-tokens.d.ts +1 -1
  152. package/dist/utils/design-tokens.js +44 -3
  153. package/dist/utils/storage-abstraction.js +1 -1
  154. package/package.json +11 -28
  155. package/dist/components/Switch/SwitchButton.svelte +0 -134
  156. package/dist/components/Switch/SwitchButton.svelte.d.ts +0 -21
package/dist/themes/gray.css CHANGED
@@ -1,163 +1,253 @@
1
1
  /* prettier-ignore */
2
2
  :root {
3
- --stuic-color-primary: var(--color-gray-800);
4
- --stuic-color-primary-hover: var(--color-gray-900);
5
- --stuic-color-primary-active: var(--color-gray-950);
6
- --stuic-color-primary-foreground: var(--color-white);
7
- --stuic-color-primary-foreground-hover: var(--color-white);
8
- --stuic-color-primary-foreground-active: var(--color-white);
9
-
10
- --stuic-color-accent: var(--color-gray-500);
11
- --stuic-color-accent-hover: var(--color-gray-600);
12
- --stuic-color-accent-active: var(--color-gray-700);
13
- --stuic-color-accent-foreground: var(--color-white);
14
- --stuic-color-accent-foreground-hover: var(--color-white);
15
- --stuic-color-accent-foreground-active: var(--color-white);
16
-
17
- --stuic-color-destructive: var(--color-gray-500);
18
- --stuic-color-destructive-hover: var(--color-gray-600);
19
- --stuic-color-destructive-active: var(--color-gray-700);
20
- --stuic-color-destructive-foreground: var(--color-white);
21
- --stuic-color-destructive-foreground-hover: var(--color-white);
22
- --stuic-color-destructive-foreground-active: var(--color-white);
23
-
24
- --stuic-color-warning: var(--color-gray-400);
25
- --stuic-color-warning-hover: var(--color-gray-500);
26
- --stuic-color-warning-active: var(--color-gray-600);
27
- --stuic-color-warning-foreground: var(--color-black);
28
- --stuic-color-warning-foreground-hover: var(--color-black);
29
- --stuic-color-warning-foreground-active: var(--color-black);
30
-
31
- --stuic-color-success: var(--color-gray-500);
32
- --stuic-color-success-hover: var(--color-gray-600);
33
- --stuic-color-success-active: var(--color-gray-700);
34
- --stuic-color-success-foreground: var(--color-white);
35
- --stuic-color-success-foreground-hover: var(--color-white);
36
- --stuic-color-success-foreground-active: var(--color-white);
37
-
38
- --stuic-color-info: var(--color-gray-500);
39
- --stuic-color-info-hover: var(--color-gray-600);
40
- --stuic-color-info-active: var(--color-gray-700);
41
- --stuic-color-info-foreground: var(--color-white);
42
- --stuic-color-info-foreground-hover: var(--color-white);
43
- --stuic-color-info-foreground-active: var(--color-white);
44
-
45
- --stuic-color-background: var(--color-gray-50);
46
- --stuic-color-background-hover: var(--color-gray-50);
47
- --stuic-color-background-active: var(--color-gray-50);
48
- --stuic-color-background-foreground: var(--color-gray-900);
49
- --stuic-color-background-foreground-hover: var(--color-gray-900);
50
- --stuic-color-background-foreground-active: var(--color-gray-900);
51
-
52
- --stuic-color-surface: var(--color-gray-100);
53
- --stuic-color-surface-hover: var(--color-gray-200);
54
- --stuic-color-surface-active: var(--color-gray-300);
55
- --stuic-color-surface-foreground: var(--color-gray-900);
56
- --stuic-color-surface-foreground-hover: var(--color-gray-900);
57
- --stuic-color-surface-foreground-active: var(--color-gray-900);
58
-
59
- --stuic-color-muted: var(--color-gray-200);
60
- --stuic-color-muted-hover: var(--color-gray-300);
61
- --stuic-color-muted-active: var(--color-gray-400);
62
- --stuic-color-muted-foreground: var(--color-gray-500);
63
- --stuic-color-muted-foreground-hover: var(--color-gray-500);
64
- --stuic-color-muted-foreground-active: var(--color-gray-500);
65
-
66
- --stuic-color-foreground: var(--color-gray-900);
67
- --stuic-color-foreground-hover: var(--color-gray-900);
68
- --stuic-color-foreground-active: var(--color-gray-900);
69
-
70
- --stuic-color-border: var(--color-gray-300);
71
- --stuic-color-border-hover: var(--color-gray-400);
72
- --stuic-color-border-active: var(--color-gray-500);
73
-
74
- --stuic-color-input: var(--color-gray-50);
75
- --stuic-color-input-hover: var(--color-gray-100);
76
- --stuic-color-input-active: var(--color-gray-50);
77
-
78
- --stuic-color-ring: color-mix(in srgb, var(--color-gray-800) 20%, transparent);
79
- --stuic-color-ring-hover: color-mix(in srgb, var(--color-gray-800) 20%, transparent);
80
- --stuic-color-ring-active: color-mix(in srgb, var(--color-gray-800) 20%, transparent);
3
+ --stuic-color-primary: var(--color-gray-800, #737373);
4
+
5
+ --stuic-color-primary-hover: var(--color-gray-900, #737373);
6
+ --stuic-color-primary-active: var(--color-gray-950, #737373);
7
+ --stuic-color-primary-foreground: var(--color-white, #ffffff);
8
+ --stuic-color-primary-foreground-hover: var(--color-white, #ffffff);
9
+ --stuic-color-primary-foreground-active: var(--color-white, #ffffff);
10
+
11
+ --stuic-color-accent: var(--color-gray-500, #737373);
12
+
13
+ --stuic-color-accent-hover: var(--color-gray-600, #737373);
14
+ --stuic-color-accent-active: var(--color-gray-700, #737373);
15
+ --stuic-color-accent-foreground: var(--color-white, #ffffff);
16
+ --stuic-color-accent-foreground-hover: var(--color-white, #ffffff);
17
+ --stuic-color-accent-foreground-active: var(--color-white, #ffffff);
18
+
19
+ --stuic-color-destructive: var(--color-gray-500, #737373);
20
+
21
+ --stuic-color-destructive-hover: var(--color-gray-600, #737373);
22
+ --stuic-color-destructive-active: var(--color-gray-700, #737373);
23
+ --stuic-color-destructive-foreground: var(--color-white, #ffffff);
24
+ --stuic-color-destructive-foreground-hover: var(--color-white, #ffffff);
25
+ --stuic-color-destructive-foreground-active: var(--color-white, #ffffff);
26
+
27
+ --stuic-color-warning: var(--color-gray-400, #737373);
28
+
29
+ --stuic-color-warning-hover: var(--color-gray-500, #737373);
30
+ --stuic-color-warning-active: var(--color-gray-600, #737373);
31
+ --stuic-color-warning-foreground: var(--color-black, #000000);
32
+ --stuic-color-warning-foreground-hover: var(--color-black, #000000);
33
+ --stuic-color-warning-foreground-active: var(--color-black, #000000);
34
+
35
+ --stuic-color-success: var(--color-gray-500, #737373);
36
+
37
+ --stuic-color-success-hover: var(--color-gray-600, #737373);
38
+ --stuic-color-success-active: var(--color-gray-700, #737373);
39
+ --stuic-color-success-foreground: var(--color-white, #ffffff);
40
+ --stuic-color-success-foreground-hover: var(--color-white, #ffffff);
41
+ --stuic-color-success-foreground-active: var(--color-white, #ffffff);
42
+
43
+ --stuic-color-info: var(--color-gray-500, #737373);
44
+
45
+ --stuic-color-info-hover: var(--color-gray-600, #737373);
46
+ --stuic-color-info-active: var(--color-gray-700, #737373);
47
+ --stuic-color-info-foreground: var(--color-white, #ffffff);
48
+ --stuic-color-info-foreground-hover: var(--color-white, #ffffff);
49
+ --stuic-color-info-foreground-active: var(--color-white, #ffffff);
50
+
51
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
52
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 10%);
53
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
54
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
55
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), black 10%);
56
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
57
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
58
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 10%);
59
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
60
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
61
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), black 10%);
62
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
63
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
64
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 10%);
65
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
66
+ --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
67
+ --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), black 10%);
68
+ --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
69
+ --stuic-color-surface-hover: var(--color-gray-200, #737373);
70
+ --stuic-color-surface-active: var(--color-gray-300, #737373);
71
+ --stuic-color-surface-foreground: var(--color-gray-900, #737373);
72
+ --stuic-color-surface-foreground-hover: var(--color-gray-900, #737373);
73
+ --stuic-color-surface-foreground-active: var(--color-gray-900, #737373);
74
+
75
+ --stuic-color-background: var(--color-gray-50, #737373);
76
+
77
+ --stuic-color-background-hover: var(--color-gray-50, #737373);
78
+ --stuic-color-background-active: var(--color-gray-50, #737373);
79
+ --stuic-color-background-foreground: var(--color-gray-900, #737373);
80
+ --stuic-color-background-foreground-hover: var(--color-gray-900, #737373);
81
+ --stuic-color-background-foreground-active: var(--color-gray-900, #737373);
82
+
83
+ --stuic-color-surface: var(--color-gray-100, #737373);
84
+
85
+ --stuic-color-surface-1: var(--color-gray-200, #737373);
86
+ --stuic-color-surface-1-hover: var(--color-gray-300, #737373);
87
+ --stuic-color-surface-1-active: var(--color-gray-400, #737373);
88
+ --stuic-color-surface-1-foreground: var(--color-gray-900, #737373);
89
+ --stuic-color-surface-1-foreground-hover: var(--color-gray-900, #737373);
90
+ --stuic-color-surface-1-foreground-active: var(--color-gray-900, #737373);
91
+
92
+ --stuic-color-surface-2: var(--color-gray-300, #737373);
93
+ --stuic-color-surface-2-hover: var(--color-gray-400, #737373);
94
+ --stuic-color-surface-2-active: var(--color-gray-500, #737373);
95
+ --stuic-color-surface-2-foreground: var(--color-gray-900, #737373);
96
+ --stuic-color-surface-2-foreground-hover: var(--color-gray-900, #737373);
97
+ --stuic-color-surface-2-foreground-active: var(--color-gray-900, #737373);
98
+
99
+ --stuic-color-muted: var(--color-gray-200, #737373);
100
+
101
+ --stuic-color-muted-hover: var(--color-gray-300, #737373);
102
+ --stuic-color-muted-active: var(--color-gray-400, #737373);
103
+ --stuic-color-muted-foreground: var(--color-gray-500, #737373);
104
+ --stuic-color-muted-foreground-hover: var(--color-gray-500, #737373);
105
+ --stuic-color-muted-foreground-active: var(--color-gray-500, #737373);
106
+
107
+ --stuic-color-foreground: var(--color-gray-900, #737373);
108
+
109
+ --stuic-color-foreground-hover: var(--color-gray-900, #737373);
110
+ --stuic-color-foreground-active: var(--color-gray-900, #737373);
111
+
112
+ --stuic-color-border: var(--color-gray-300, #737373);
113
+
114
+ --stuic-color-border-hover: var(--color-gray-400, #737373);
115
+ --stuic-color-border-active: var(--color-gray-500, #737373);
116
+
117
+ --stuic-color-input: var(--color-gray-50, #737373);
118
+
119
+ --stuic-color-input-hover: var(--color-gray-100, #737373);
120
+ --stuic-color-input-active: var(--color-gray-50, #737373);
121
+
122
+ --stuic-color-ring: color-mix(in srgb, var(--color-gray-800) 20%, transparent);
123
+
124
+ --stuic-color-ring-hover: color-mix(in srgb, var(--color-gray-800) 20%, transparent);
125
+ --stuic-color-ring-active: color-mix(in srgb, var(--color-gray-800) 20%, transparent);
81
126
  }
82
127
 
83
128
  /* prettier-ignore */
84
129
  :root.dark {
85
- --stuic-color-primary: var(--color-gray-200);
86
- --stuic-color-primary-hover: var(--color-gray-100);
87
- --stuic-color-primary-active: var(--color-gray-50);
88
- --stuic-color-primary-foreground: var(--color-black);
89
- --stuic-color-primary-foreground-hover: var(--color-black);
90
- --stuic-color-primary-foreground-active: var(--color-black);
91
-
92
- --stuic-color-accent: var(--color-gray-500);
93
- --stuic-color-accent-hover: var(--color-gray-400);
94
- --stuic-color-accent-active: var(--color-gray-300);
95
- --stuic-color-accent-foreground: var(--color-white);
96
- --stuic-color-accent-foreground-hover: var(--color-white);
97
- --stuic-color-accent-foreground-active: var(--color-white);
98
-
99
- --stuic-color-destructive: var(--color-gray-500);
100
- --stuic-color-destructive-hover: var(--color-gray-400);
101
- --stuic-color-destructive-active: var(--color-gray-300);
102
- --stuic-color-destructive-foreground: var(--color-white);
103
- --stuic-color-destructive-foreground-hover: var(--color-white);
104
- --stuic-color-destructive-foreground-active: var(--color-white);
105
-
106
- --stuic-color-warning: var(--color-gray-400);
107
- --stuic-color-warning-hover: var(--color-gray-300);
108
- --stuic-color-warning-active: var(--color-gray-200);
109
- --stuic-color-warning-foreground: var(--color-black);
110
- --stuic-color-warning-foreground-hover: var(--color-black);
111
- --stuic-color-warning-foreground-active: var(--color-black);
112
-
113
- --stuic-color-success: var(--color-gray-500);
114
- --stuic-color-success-hover: var(--color-gray-400);
115
- --stuic-color-success-active: var(--color-gray-300);
116
- --stuic-color-success-foreground: var(--color-white);
117
- --stuic-color-success-foreground-hover: var(--color-white);
118
- --stuic-color-success-foreground-active: var(--color-white);
119
-
120
- --stuic-color-info: var(--color-gray-500);
121
- --stuic-color-info-hover: var(--color-gray-400);
122
- --stuic-color-info-active: var(--color-gray-300);
123
- --stuic-color-info-foreground: var(--color-white);
124
- --stuic-color-info-foreground-hover: var(--color-white);
125
- --stuic-color-info-foreground-active: var(--color-white);
126
-
127
- --stuic-color-background: var(--color-gray-900);
128
- --stuic-color-background-hover: var(--color-gray-900);
129
- --stuic-color-background-active: var(--color-gray-900);
130
- --stuic-color-background-foreground: var(--color-gray-50);
131
- --stuic-color-background-foreground-hover: var(--color-gray-50);
132
- --stuic-color-background-foreground-active: var(--color-gray-50);
133
-
134
- --stuic-color-surface: var(--color-gray-800);
135
- --stuic-color-surface-hover: var(--color-gray-700);
136
- --stuic-color-surface-active: var(--color-gray-600);
137
- --stuic-color-surface-foreground: var(--color-gray-100);
138
- --stuic-color-surface-foreground-hover: var(--color-gray-100);
139
- --stuic-color-surface-foreground-active: var(--color-gray-100);
140
-
141
- --stuic-color-muted: var(--color-gray-700);
142
- --stuic-color-muted-hover: var(--color-gray-600);
143
- --stuic-color-muted-active: var(--color-gray-500);
144
- --stuic-color-muted-foreground: var(--color-gray-400);
145
- --stuic-color-muted-foreground-hover: var(--color-gray-400);
146
- --stuic-color-muted-foreground-active: var(--color-gray-400);
147
-
148
- --stuic-color-foreground: var(--color-gray-50);
149
- --stuic-color-foreground-hover: var(--color-gray-50);
150
- --stuic-color-foreground-active: var(--color-gray-50);
151
-
152
- --stuic-color-border: var(--color-gray-700);
153
- --stuic-color-border-hover: var(--color-gray-600);
154
- --stuic-color-border-active: var(--color-gray-500);
155
-
156
- --stuic-color-input: var(--color-gray-800);
157
- --stuic-color-input-hover: var(--color-gray-700);
158
- --stuic-color-input-active: var(--color-gray-800);
159
-
160
- --stuic-color-ring: color-mix(in srgb, var(--color-gray-200) 25%, transparent);
161
- --stuic-color-ring-hover: color-mix(in srgb, var(--color-gray-200) 25%, transparent);
162
- --stuic-color-ring-active: color-mix(in srgb, var(--color-gray-200) 25%, transparent);
130
+ --stuic-color-primary: var(--color-gray-200, #737373);
131
+
132
+ --stuic-color-primary-hover: var(--color-gray-100, #737373);
133
+ --stuic-color-primary-active: var(--color-gray-50, #737373);
134
+ --stuic-color-primary-foreground: var(--color-black, #000000);
135
+ --stuic-color-primary-foreground-hover: var(--color-black, #000000);
136
+ --stuic-color-primary-foreground-active: var(--color-black, #000000);
137
+
138
+ --stuic-color-accent: var(--color-gray-500, #737373);
139
+
140
+ --stuic-color-accent-hover: var(--color-gray-400, #737373);
141
+ --stuic-color-accent-active: var(--color-gray-300, #737373);
142
+ --stuic-color-accent-foreground: var(--color-white, #ffffff);
143
+ --stuic-color-accent-foreground-hover: var(--color-white, #ffffff);
144
+ --stuic-color-accent-foreground-active: var(--color-white, #ffffff);
145
+
146
+ --stuic-color-destructive: var(--color-gray-500, #737373);
147
+
148
+ --stuic-color-destructive-hover: var(--color-gray-400, #737373);
149
+ --stuic-color-destructive-active: var(--color-gray-300, #737373);
150
+ --stuic-color-destructive-foreground: var(--color-white, #ffffff);
151
+ --stuic-color-destructive-foreground-hover: var(--color-white, #ffffff);
152
+ --stuic-color-destructive-foreground-active: var(--color-white, #ffffff);
153
+
154
+ --stuic-color-warning: var(--color-gray-400, #737373);
155
+
156
+ --stuic-color-warning-hover: var(--color-gray-300, #737373);
157
+ --stuic-color-warning-active: var(--color-gray-200, #737373);
158
+ --stuic-color-warning-foreground: var(--color-black, #000000);
159
+ --stuic-color-warning-foreground-hover: var(--color-black, #000000);
160
+ --stuic-color-warning-foreground-active: var(--color-black, #000000);
161
+
162
+ --stuic-color-success: var(--color-gray-500, #737373);
163
+
164
+ --stuic-color-success-hover: var(--color-gray-400, #737373);
165
+ --stuic-color-success-active: var(--color-gray-300, #737373);
166
+ --stuic-color-success-foreground: var(--color-white, #ffffff);
167
+ --stuic-color-success-foreground-hover: var(--color-white, #ffffff);
168
+ --stuic-color-success-foreground-active: var(--color-white, #ffffff);
169
+
170
+ --stuic-color-info: var(--color-gray-500, #737373);
171
+
172
+ --stuic-color-info-hover: var(--color-gray-400, #737373);
173
+ --stuic-color-info-active: var(--color-gray-300, #737373);
174
+ --stuic-color-info-foreground: var(--color-white, #ffffff);
175
+ --stuic-color-info-foreground-hover: var(--color-white, #ffffff);
176
+ --stuic-color-info-foreground-active: var(--color-white, #ffffff);
177
+
178
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
179
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 10%);
180
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
181
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
182
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 10%);
183
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
184
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
185
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 10%);
186
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
187
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
188
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 10%);
189
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
190
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
191
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
192
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
193
+ --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
194
+ --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), white 10%);
195
+ --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
196
+ --stuic-color-surface-hover: var(--color-gray-700, #737373);
197
+ --stuic-color-surface-active: var(--color-gray-600, #737373);
198
+ --stuic-color-surface-foreground: var(--color-gray-100, #737373);
199
+ --stuic-color-surface-foreground-hover: var(--color-gray-100, #737373);
200
+ --stuic-color-surface-foreground-active: var(--color-gray-100, #737373);
201
+
202
+ --stuic-color-background: var(--color-gray-900, #737373);
203
+
204
+ --stuic-color-background-hover: var(--color-gray-900, #737373);
205
+ --stuic-color-background-active: var(--color-gray-900, #737373);
206
+ --stuic-color-background-foreground: var(--color-gray-50, #737373);
207
+ --stuic-color-background-foreground-hover: var(--color-gray-50, #737373);
208
+ --stuic-color-background-foreground-active: var(--color-gray-50, #737373);
209
+
210
+ --stuic-color-surface: var(--color-gray-800, #737373);
211
+
212
+ --stuic-color-surface-1: var(--color-gray-700, #737373);
213
+ --stuic-color-surface-1-hover: var(--color-gray-600, #737373);
214
+ --stuic-color-surface-1-active: var(--color-gray-500, #737373);
215
+ --stuic-color-surface-1-foreground: var(--color-gray-100, #737373);
216
+ --stuic-color-surface-1-foreground-hover: var(--color-gray-100, #737373);
217
+ --stuic-color-surface-1-foreground-active: var(--color-gray-100, #737373);
218
+
219
+ --stuic-color-surface-2: var(--color-gray-600, #737373);
220
+ --stuic-color-surface-2-hover: var(--color-gray-500, #737373);
221
+ --stuic-color-surface-2-active: var(--color-gray-400, #737373);
222
+ --stuic-color-surface-2-foreground: var(--color-gray-100, #737373);
223
+ --stuic-color-surface-2-foreground-hover: var(--color-gray-100, #737373);
224
+ --stuic-color-surface-2-foreground-active: var(--color-gray-100, #737373);
225
+
226
+ --stuic-color-muted: var(--color-gray-700, #737373);
227
+
228
+ --stuic-color-muted-hover: var(--color-gray-600, #737373);
229
+ --stuic-color-muted-active: var(--color-gray-500, #737373);
230
+ --stuic-color-muted-foreground: var(--color-gray-400, #737373);
231
+ --stuic-color-muted-foreground-hover: var(--color-gray-400, #737373);
232
+ --stuic-color-muted-foreground-active: var(--color-gray-400, #737373);
233
+
234
+ --stuic-color-foreground: var(--color-gray-50, #737373);
235
+
236
+ --stuic-color-foreground-hover: var(--color-gray-50, #737373);
237
+ --stuic-color-foreground-active: var(--color-gray-50, #737373);
238
+
239
+ --stuic-color-border: var(--color-gray-700, #737373);
240
+
241
+ --stuic-color-border-hover: var(--color-gray-600, #737373);
242
+ --stuic-color-border-active: var(--color-gray-500, #737373);
243
+
244
+ --stuic-color-input: var(--color-gray-800, #737373);
245
+
246
+ --stuic-color-input-hover: var(--color-gray-700, #737373);
247
+ --stuic-color-input-active: var(--color-gray-800, #737373);
248
+
249
+ --stuic-color-ring: color-mix(in srgb, var(--color-gray-200) 25%, transparent);
250
+
251
+ --stuic-color-ring-hover: color-mix(in srgb, var(--color-gray-200) 25%, transparent);
252
+ --stuic-color-ring-active: color-mix(in srgb, var(--color-gray-200) 25%, transparent);
163
253
  }
package/dist/themes/gray.js CHANGED
@@ -50,6 +50,18 @@ const light = {
50
50
  hover: "var(--color-gray-200)",
51
51
  active: "var(--color-gray-300)",
52
52
  },
53
+ "surface-1": {
54
+ DEFAULT: "var(--color-gray-200)",
55
+ foreground: "var(--color-gray-900)",
56
+ hover: "var(--color-gray-300)",
57
+ active: "var(--color-gray-400)",
58
+ },
59
+ "surface-2": {
60
+ DEFAULT: "var(--color-gray-300)",
61
+ foreground: "var(--color-gray-900)",
62
+ hover: "var(--color-gray-400)",
63
+ active: "var(--color-gray-500)",
64
+ },
53
65
  muted: {
54
66
  DEFAULT: "var(--color-gray-200)",
55
67
  foreground: "var(--color-gray-500)",
@@ -125,6 +137,18 @@ const dark = {
125
137
  hover: "var(--color-gray-700)",
126
138
  active: "var(--color-gray-600)",
127
139
  },
140
+ "surface-1": {
141
+ DEFAULT: "var(--color-gray-700)",
142
+ foreground: "var(--color-gray-100)",
143
+ hover: "var(--color-gray-600)",
144
+ active: "var(--color-gray-500)",
145
+ },
146
+ "surface-2": {
147
+ DEFAULT: "var(--color-gray-600)",
148
+ foreground: "var(--color-gray-100)",
149
+ hover: "var(--color-gray-500)",
150
+ active: "var(--color-gray-400)",
151
+ },
128
152
  muted: {
129
153
  DEFAULT: "var(--color-gray-700)",
130
154
  foreground: "var(--color-gray-400)",