@marianmeres/stuic 2.66.0 → 3.0.1

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