@marianmeres/stuic 2.66.0 → 3.0.0

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 (171) hide show
  1. package/README.md +292 -4
  2. package/dist/README.md +41 -18
  3. package/dist/actions/popover/README.md +19 -0
  4. package/dist/actions/popover/index.css +6 -9
  5. package/dist/actions/popover/popover.svelte.js +2 -2
  6. package/dist/actions/tooltip/README.md +18 -0
  7. package/dist/actions/tooltip/index.css +5 -8
  8. package/dist/actions/tooltip/tooltip.svelte.js +1 -1
  9. package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte +9 -10
  10. package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte.d.ts +3 -3
  11. package/dist/components/AlertConfirmPrompt/Current.svelte +15 -17
  12. package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts +5 -3
  13. package/dist/components/AlertConfirmPrompt/acp-icons.js +5 -4
  14. package/dist/components/AlertConfirmPrompt/index.css +62 -0
  15. package/dist/components/AssetsPreview/AssetsPreview.svelte +92 -73
  16. package/dist/components/AssetsPreview/AssetsPreview.svelte.d.ts +1 -0
  17. package/dist/components/AssetsPreview/index.css +59 -0
  18. package/dist/components/Avatar/Avatar.svelte +32 -18
  19. package/dist/components/Avatar/Avatar.svelte.d.ts +1 -0
  20. package/dist/components/Avatar/README.md +166 -0
  21. package/dist/components/Avatar/index.css +128 -0
  22. package/dist/components/Backdrop/Backdrop.svelte +8 -2
  23. package/dist/components/Backdrop/Backdrop.svelte.d.ts +1 -0
  24. package/dist/components/Backdrop/README.md +71 -6
  25. package/dist/components/Backdrop/index.css +29 -0
  26. package/dist/components/Button/Button.svelte +117 -124
  27. package/dist/components/Button/Button.svelte.d.ts +35 -23
  28. package/dist/components/Button/README.md +87 -21
  29. package/dist/components/Button/index.css +473 -9
  30. package/dist/components/Button/index.d.ts +1 -1
  31. package/dist/components/Button/index.js +1 -1
  32. package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte +7 -38
  33. package/dist/components/ButtonGroupRadio/README.md +82 -4
  34. package/dist/components/ButtonGroupRadio/index.css +152 -14
  35. package/dist/components/Collapsible/Collapsible.svelte +7 -7
  36. package/dist/components/Collapsible/Collapsible.svelte.d.ts +2 -2
  37. package/dist/components/Collapsible/README.md +34 -2
  38. package/dist/components/Collapsible/index.css +38 -0
  39. package/dist/components/CommandMenu/CommandMenu.svelte +13 -24
  40. package/dist/components/CommandMenu/README.md +39 -0
  41. package/dist/components/CommandMenu/index.css +45 -2
  42. package/dist/components/DismissibleMessage/DismissibleMessage.svelte +53 -50
  43. package/dist/components/DismissibleMessage/DismissibleMessage.svelte.d.ts +6 -5
  44. package/dist/components/DismissibleMessage/README.md +93 -11
  45. package/dist/components/DismissibleMessage/index.css +122 -8
  46. package/dist/components/DismissibleMessage/index.d.ts +1 -1
  47. package/dist/components/DropdownMenu/DropdownMenu.svelte +14 -50
  48. package/dist/components/DropdownMenu/DropdownMenu.svelte.d.ts +6 -6
  49. package/dist/components/DropdownMenu/README.md +132 -0
  50. package/dist/components/DropdownMenu/index.css +231 -27
  51. package/dist/components/Input/FieldAssets.svelte +8 -5
  52. package/dist/components/Input/FieldCheckbox.svelte +7 -44
  53. package/dist/components/Input/FieldFile.svelte +1 -6
  54. package/dist/components/Input/FieldInput.svelte +1 -1
  55. package/dist/components/Input/FieldOptions.svelte +41 -38
  56. package/dist/components/Input/FieldRadios.svelte +7 -16
  57. package/dist/components/Input/FieldSelect.svelte +1 -1
  58. package/dist/components/Input/FieldSwitch.svelte +1 -5
  59. package/dist/components/Input/FieldTextarea.svelte +1 -1
  60. package/dist/components/Input/README.md +194 -0
  61. package/dist/components/Input/_internal/FieldRadioInternal.svelte +2 -40
  62. package/dist/components/Input/_internal/InputWrap.svelte +8 -48
  63. package/dist/components/Input/index.css +522 -127
  64. package/dist/components/ListItemButton/ListItemButton.svelte +37 -73
  65. package/dist/components/ListItemButton/ListItemButton.svelte.d.ts +1 -9
  66. package/dist/components/ListItemButton/README.md +100 -45
  67. package/dist/components/ListItemButton/index.css +175 -56
  68. package/dist/components/ListItemButton/index.d.ts +1 -1
  69. package/dist/components/ListItemButton/index.js +1 -1
  70. package/dist/components/Modal/Modal.svelte +2 -8
  71. package/dist/components/Modal/Modal.svelte.d.ts +1 -0
  72. package/dist/components/Modal/README.md +29 -0
  73. package/dist/components/Modal/index.css +36 -0
  74. package/dist/components/ModalDialog/ModalDialog.svelte +2 -21
  75. package/dist/components/ModalDialog/README.md +35 -0
  76. package/dist/components/ModalDialog/index.css +57 -0
  77. package/dist/components/Notifications/Notifications.svelte +44 -128
  78. package/dist/components/Notifications/Notifications.svelte.d.ts +9 -17
  79. package/dist/components/Notifications/README.md +186 -70
  80. package/dist/components/Notifications/index.css +212 -15
  81. package/dist/components/Progress/README.md +15 -0
  82. package/dist/components/Progress/_internal/Bar.svelte +2 -2
  83. package/dist/components/Progress/index.css +4 -4
  84. package/dist/components/Skeleton/Skeleton.svelte +3 -2
  85. package/dist/components/Skeleton/index.css +11 -14
  86. package/dist/components/Spinner/Spinner.svelte +2 -2
  87. package/dist/components/Spinner/SpinnerCircle.svelte +1 -1
  88. package/dist/components/Switch/README.md +15 -0
  89. package/dist/components/Switch/Switch.svelte +4 -7
  90. package/dist/components/Switch/Switch.svelte.d.ts +1 -1
  91. package/dist/components/Switch/SwitchButton.svelte +4 -5
  92. package/dist/components/Switch/index.css +3 -4
  93. package/dist/components/TabbedMenu/README.md +26 -21
  94. package/dist/components/TabbedMenu/TabbedMenu.svelte +5 -5
  95. package/dist/components/TabbedMenu/index.css +7 -22
  96. package/dist/components/ThemePreview/README.md +289 -0
  97. package/dist/components/ThemePreview/ThemePreview.svelte +341 -0
  98. package/dist/components/ThemePreview/ThemePreview.svelte.d.ts +33 -0
  99. package/dist/components/ThemePreview/index.css +493 -0
  100. package/dist/components/ThemePreview/index.d.ts +1 -0
  101. package/dist/components/ThemePreview/index.js +1 -0
  102. package/dist/components/TwCheck/TwCheck.svelte +4 -4
  103. package/dist/components/TwCheck/index.css +3 -2
  104. package/dist/components/TypeaheadInput/TypeaheadInput.svelte +1 -1
  105. package/dist/components/X/X.svelte +12 -5
  106. package/dist/components/X/X.svelte.d.ts +1 -0
  107. package/dist/icons/index.d.ts +1 -0
  108. package/dist/icons/index.js +1 -0
  109. package/dist/index.css +31 -16
  110. package/dist/index.d.ts +1 -0
  111. package/dist/index.js +1 -0
  112. package/dist/themes/blue-orange.css +163 -0
  113. package/dist/themes/blue-orange.d.ts +6 -0
  114. package/dist/themes/blue-orange.js +151 -0
  115. package/dist/themes/cyan-red.css +163 -0
  116. package/dist/themes/cyan-red.d.ts +6 -0
  117. package/dist/themes/cyan-red.js +151 -0
  118. package/dist/themes/cyan-slate.css +163 -0
  119. package/dist/themes/cyan-slate.d.ts +6 -0
  120. package/dist/themes/cyan-slate.js +151 -0
  121. package/dist/themes/emerald-pink.css +163 -0
  122. package/dist/themes/emerald-pink.d.ts +6 -0
  123. package/dist/themes/emerald-pink.js +151 -0
  124. package/dist/themes/fuchsia-emerald.css +163 -0
  125. package/dist/themes/fuchsia-emerald.d.ts +6 -0
  126. package/dist/themes/fuchsia-emerald.js +151 -0
  127. package/dist/themes/gray.css +163 -0
  128. package/dist/themes/gray.d.ts +6 -0
  129. package/dist/themes/gray.js +151 -0
  130. package/dist/themes/indigo-amber.css +163 -0
  131. package/dist/themes/indigo-amber.d.ts +6 -0
  132. package/dist/themes/indigo-amber.js +151 -0
  133. package/dist/themes/neutral.css +163 -0
  134. package/dist/themes/neutral.d.ts +6 -0
  135. package/dist/themes/neutral.js +151 -0
  136. package/dist/themes/pink-emerald.css +163 -0
  137. package/dist/themes/pink-emerald.d.ts +6 -0
  138. package/dist/themes/pink-emerald.js +151 -0
  139. package/dist/themes/purple-yellow.css +163 -0
  140. package/dist/themes/purple-yellow.d.ts +6 -0
  141. package/dist/themes/purple-yellow.js +151 -0
  142. package/dist/themes/rainbow.css +163 -0
  143. package/dist/themes/rainbow.d.ts +6 -0
  144. package/dist/themes/rainbow.js +156 -0
  145. package/dist/themes/red-blue.css +163 -0
  146. package/dist/themes/red-blue.d.ts +6 -0
  147. package/dist/themes/red-blue.js +151 -0
  148. package/dist/themes/red-cyan.css +163 -0
  149. package/dist/themes/red-cyan.d.ts +6 -0
  150. package/dist/themes/red-cyan.js +151 -0
  151. package/dist/themes/rose-teal.css +163 -0
  152. package/dist/themes/rose-teal.d.ts +6 -0
  153. package/dist/themes/rose-teal.js +151 -0
  154. package/dist/themes/sky-amber.css +163 -0
  155. package/dist/themes/sky-amber.d.ts +6 -0
  156. package/dist/themes/sky-amber.js +151 -0
  157. package/dist/themes/slate-cyan.css +163 -0
  158. package/dist/themes/slate-cyan.d.ts +6 -0
  159. package/dist/themes/slate-cyan.js +151 -0
  160. package/dist/themes/tailwind-color-pairs.md +31 -0
  161. package/dist/themes/teal-rose.css +163 -0
  162. package/dist/themes/teal-rose.d.ts +6 -0
  163. package/dist/themes/teal-rose.js +151 -0
  164. package/dist/themes/violet-lime.css +163 -0
  165. package/dist/themes/violet-lime.d.ts +6 -0
  166. package/dist/themes/violet-lime.js +151 -0
  167. package/dist/utils/design-tokens.d.ts +43 -0
  168. package/dist/utils/design-tokens.js +100 -0
  169. package/dist/utils/index.d.ts +1 -0
  170. package/dist/utils/index.js +1 -0
  171. package/package.json +22 -2
package/dist/themes/sky-amber.css ADDED
@@ -0,0 +1,163 @@
1
+ /* prettier-ignore */
2
+ :root {
3
+ --stuic-color-primary: var(--color-sky-600);
4
+ --stuic-color-primary-hover: var(--color-sky-700);
5
+ --stuic-color-primary-active: var(--color-sky-800);
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-amber-500);
11
+ --stuic-color-accent-hover: var(--color-amber-600);
12
+ --stuic-color-accent-active: var(--color-amber-700);
13
+ --stuic-color-accent-foreground: var(--color-black);
14
+ --stuic-color-accent-foreground-hover: var(--color-black);
15
+ --stuic-color-accent-foreground-active: var(--color-black);
16
+
17
+ --stuic-color-destructive: var(--color-rose-600);
18
+ --stuic-color-destructive-hover: var(--color-rose-700);
19
+ --stuic-color-destructive-active: var(--color-rose-800);
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-amber-500);
25
+ --stuic-color-warning-hover: var(--color-amber-600);
26
+ --stuic-color-warning-active: var(--color-amber-700);
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-teal-600);
32
+ --stuic-color-success-hover: var(--color-teal-700);
33
+ --stuic-color-success-active: var(--color-teal-800);
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-sky-500);
39
+ --stuic-color-info-hover: var(--color-sky-600);
40
+ --stuic-color-info-active: var(--color-sky-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-white);
46
+ --stuic-color-background-hover: var(--color-white);
47
+ --stuic-color-background-active: var(--color-white);
48
+ --stuic-color-background-foreground: var(--color-stone-900);
49
+ --stuic-color-background-foreground-hover: var(--color-stone-900);
50
+ --stuic-color-background-foreground-active: var(--color-stone-900);
51
+
52
+ --stuic-color-surface: var(--color-stone-50);
53
+ --stuic-color-surface-hover: var(--color-stone-100);
54
+ --stuic-color-surface-active: var(--color-stone-200);
55
+ --stuic-color-surface-foreground: var(--color-stone-900);
56
+ --stuic-color-surface-foreground-hover: var(--color-stone-900);
57
+ --stuic-color-surface-foreground-active: var(--color-stone-900);
58
+
59
+ --stuic-color-muted: var(--color-stone-100);
60
+ --stuic-color-muted-hover: var(--color-stone-200);
61
+ --stuic-color-muted-active: var(--color-stone-300);
62
+ --stuic-color-muted-foreground: var(--color-stone-500);
63
+ --stuic-color-muted-foreground-hover: var(--color-stone-500);
64
+ --stuic-color-muted-foreground-active: var(--color-stone-500);
65
+
66
+ --stuic-color-foreground: var(--color-stone-900);
67
+ --stuic-color-foreground-hover: var(--color-stone-900);
68
+ --stuic-color-foreground-active: var(--color-stone-900);
69
+
70
+ --stuic-color-border: var(--color-stone-200);
71
+ --stuic-color-border-hover: var(--color-stone-300);
72
+ --stuic-color-border-active: var(--color-stone-400);
73
+
74
+ --stuic-color-input: var(--color-white);
75
+ --stuic-color-input-hover: var(--color-stone-50);
76
+ --stuic-color-input-active: var(--color-white);
77
+
78
+ --stuic-color-ring: color-mix(in srgb, var(--color-sky-600) 20%, transparent);
79
+ --stuic-color-ring-hover: color-mix(in srgb, var(--color-sky-600) 20%, transparent);
80
+ --stuic-color-ring-active: color-mix(in srgb, var(--color-sky-600) 20%, transparent);
81
+ }
82
+
83
+ /* prettier-ignore */
84
+ :root.dark {
85
+ --stuic-color-primary: var(--color-sky-500);
86
+ --stuic-color-primary-hover: var(--color-sky-400);
87
+ --stuic-color-primary-active: var(--color-sky-300);
88
+ --stuic-color-primary-foreground: var(--color-white);
89
+ --stuic-color-primary-foreground-hover: var(--color-white);
90
+ --stuic-color-primary-foreground-active: var(--color-white);
91
+
92
+ --stuic-color-accent: var(--color-amber-400);
93
+ --stuic-color-accent-hover: var(--color-amber-300);
94
+ --stuic-color-accent-active: var(--color-amber-200);
95
+ --stuic-color-accent-foreground: var(--color-black);
96
+ --stuic-color-accent-foreground-hover: var(--color-black);
97
+ --stuic-color-accent-foreground-active: var(--color-black);
98
+
99
+ --stuic-color-destructive: var(--color-rose-500);
100
+ --stuic-color-destructive-hover: var(--color-rose-400);
101
+ --stuic-color-destructive-active: var(--color-rose-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-amber-400);
107
+ --stuic-color-warning-hover: var(--color-amber-300);
108
+ --stuic-color-warning-active: var(--color-amber-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-teal-500);
114
+ --stuic-color-success-hover: var(--color-teal-400);
115
+ --stuic-color-success-active: var(--color-teal-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-sky-400);
121
+ --stuic-color-info-hover: var(--color-sky-300);
122
+ --stuic-color-info-active: var(--color-sky-200);
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-stone-900);
128
+ --stuic-color-background-hover: var(--color-stone-900);
129
+ --stuic-color-background-active: var(--color-stone-900);
130
+ --stuic-color-background-foreground: var(--color-stone-50);
131
+ --stuic-color-background-foreground-hover: var(--color-stone-50);
132
+ --stuic-color-background-foreground-active: var(--color-stone-50);
133
+
134
+ --stuic-color-surface: var(--color-stone-800);
135
+ --stuic-color-surface-hover: var(--color-stone-700);
136
+ --stuic-color-surface-active: var(--color-stone-600);
137
+ --stuic-color-surface-foreground: var(--color-stone-100);
138
+ --stuic-color-surface-foreground-hover: var(--color-stone-100);
139
+ --stuic-color-surface-foreground-active: var(--color-stone-100);
140
+
141
+ --stuic-color-muted: var(--color-stone-700);
142
+ --stuic-color-muted-hover: var(--color-stone-600);
143
+ --stuic-color-muted-active: var(--color-stone-500);
144
+ --stuic-color-muted-foreground: var(--color-stone-400);
145
+ --stuic-color-muted-foreground-hover: var(--color-stone-400);
146
+ --stuic-color-muted-foreground-active: var(--color-stone-400);
147
+
148
+ --stuic-color-foreground: var(--color-stone-50);
149
+ --stuic-color-foreground-hover: var(--color-stone-50);
150
+ --stuic-color-foreground-active: var(--color-stone-50);
151
+
152
+ --stuic-color-border: var(--color-stone-700);
153
+ --stuic-color-border-hover: var(--color-stone-600);
154
+ --stuic-color-border-active: var(--color-stone-500);
155
+
156
+ --stuic-color-input: var(--color-stone-800);
157
+ --stuic-color-input-hover: var(--color-stone-700);
158
+ --stuic-color-input-active: var(--color-stone-800);
159
+
160
+ --stuic-color-ring: color-mix(in srgb, var(--color-sky-400) 25%, transparent);
161
+ --stuic-color-ring-hover: color-mix(in srgb, var(--color-sky-400) 25%, transparent);
162
+ --stuic-color-ring-active: color-mix(in srgb, var(--color-sky-400) 25%, transparent);
163
+ }
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,151 @@
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-black)",
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-black)",
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
+ muted: {
54
+ DEFAULT: "var(--color-stone-100)",
55
+ foreground: "var(--color-stone-500)",
56
+ hover: "var(--color-stone-200)",
57
+ active: "var(--color-stone-300)",
58
+ },
59
+ },
60
+ single: {
61
+ foreground: "var(--color-stone-900)",
62
+ border: {
63
+ DEFAULT: "var(--color-stone-200)",
64
+ hover: "var(--color-stone-300)",
65
+ active: "var(--color-stone-400)",
66
+ },
67
+ input: {
68
+ DEFAULT: "var(--color-white)",
69
+ hover: "var(--color-stone-50)",
70
+ },
71
+ ring: "color-mix(in srgb, var(--color-sky-600) 20%, transparent)",
72
+ },
73
+ },
74
+ },
75
+ };
76
+ const dark = {
77
+ colors: {
78
+ intent: {
79
+ primary: {
80
+ DEFAULT: "var(--color-sky-500)",
81
+ foreground: "var(--color-white)",
82
+ hover: "var(--color-sky-400)",
83
+ active: "var(--color-sky-300)",
84
+ },
85
+ accent: {
86
+ DEFAULT: "var(--color-amber-400)",
87
+ foreground: "var(--color-black)",
88
+ hover: "var(--color-amber-300)",
89
+ active: "var(--color-amber-200)",
90
+ },
91
+ destructive: {
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
+ warning: {
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
+ success: {
104
+ DEFAULT: "var(--color-teal-500)",
105
+ foreground: "var(--color-white)",
106
+ hover: "var(--color-teal-400)",
107
+ active: "var(--color-teal-300)",
108
+ },
109
+ info: {
110
+ DEFAULT: "var(--color-sky-400)",
111
+ foreground: "var(--color-white)",
112
+ hover: "var(--color-sky-300)",
113
+ active: "var(--color-sky-200)",
114
+ },
115
+ },
116
+ role: {
117
+ paired: {
118
+ background: {
119
+ DEFAULT: "var(--color-stone-900)",
120
+ foreground: "var(--color-stone-50)",
121
+ },
122
+ surface: {
123
+ DEFAULT: "var(--color-stone-800)",
124
+ foreground: "var(--color-stone-100)",
125
+ hover: "var(--color-stone-700)",
126
+ active: "var(--color-stone-600)",
127
+ },
128
+ muted: {
129
+ DEFAULT: "var(--color-stone-700)",
130
+ foreground: "var(--color-stone-400)",
131
+ hover: "var(--color-stone-600)",
132
+ active: "var(--color-stone-500)",
133
+ },
134
+ },
135
+ single: {
136
+ foreground: "var(--color-stone-50)",
137
+ border: {
138
+ DEFAULT: "var(--color-stone-700)",
139
+ hover: "var(--color-stone-600)",
140
+ active: "var(--color-stone-500)",
141
+ },
142
+ input: {
143
+ DEFAULT: "var(--color-stone-800)",
144
+ hover: "var(--color-stone-700)",
145
+ },
146
+ ring: "color-mix(in srgb, var(--color-sky-400) 25%, transparent)",
147
+ },
148
+ },
149
+ },
150
+ };
151
+ export default { light, dark };
package/dist/themes/slate-cyan.css ADDED
@@ -0,0 +1,163 @@
1
+ /* prettier-ignore */
2
+ :root {
3
+ --stuic-color-primary: var(--color-slate-600);
4
+ --stuic-color-primary-hover: var(--color-slate-700);
5
+ --stuic-color-primary-active: var(--color-slate-800);
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-cyan-500);
11
+ --stuic-color-accent-hover: var(--color-cyan-600);
12
+ --stuic-color-accent-active: var(--color-cyan-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-rose-600);
18
+ --stuic-color-destructive-hover: var(--color-rose-700);
19
+ --stuic-color-destructive-active: var(--color-rose-800);
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-amber-500);
25
+ --stuic-color-warning-hover: var(--color-amber-600);
26
+ --stuic-color-warning-active: var(--color-amber-700);
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-teal-600);
32
+ --stuic-color-success-hover: var(--color-teal-700);
33
+ --stuic-color-success-active: var(--color-teal-800);
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-cyan-500);
39
+ --stuic-color-info-hover: var(--color-cyan-600);
40
+ --stuic-color-info-active: var(--color-cyan-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-white);
46
+ --stuic-color-background-hover: var(--color-white);
47
+ --stuic-color-background-active: var(--color-white);
48
+ --stuic-color-background-foreground: var(--color-neutral-900);
49
+ --stuic-color-background-foreground-hover: var(--color-neutral-900);
50
+ --stuic-color-background-foreground-active: var(--color-neutral-900);
51
+
52
+ --stuic-color-surface: var(--color-neutral-50);
53
+ --stuic-color-surface-hover: var(--color-neutral-100);
54
+ --stuic-color-surface-active: var(--color-neutral-200);
55
+ --stuic-color-surface-foreground: var(--color-neutral-900);
56
+ --stuic-color-surface-foreground-hover: var(--color-neutral-900);
57
+ --stuic-color-surface-foreground-active: var(--color-neutral-900);
58
+
59
+ --stuic-color-muted: var(--color-neutral-100);
60
+ --stuic-color-muted-hover: var(--color-neutral-200);
61
+ --stuic-color-muted-active: var(--color-neutral-300);
62
+ --stuic-color-muted-foreground: var(--color-neutral-500);
63
+ --stuic-color-muted-foreground-hover: var(--color-neutral-500);
64
+ --stuic-color-muted-foreground-active: var(--color-neutral-500);
65
+
66
+ --stuic-color-foreground: var(--color-neutral-900);
67
+ --stuic-color-foreground-hover: var(--color-neutral-900);
68
+ --stuic-color-foreground-active: var(--color-neutral-900);
69
+
70
+ --stuic-color-border: var(--color-neutral-200);
71
+ --stuic-color-border-hover: var(--color-neutral-300);
72
+ --stuic-color-border-active: var(--color-neutral-400);
73
+
74
+ --stuic-color-input: var(--color-white);
75
+ --stuic-color-input-hover: var(--color-neutral-50);
76
+ --stuic-color-input-active: var(--color-white);
77
+
78
+ --stuic-color-ring: color-mix(in srgb, var(--color-cyan-600) 20%, transparent);
79
+ --stuic-color-ring-hover: color-mix(in srgb, var(--color-cyan-600) 20%, transparent);
80
+ --stuic-color-ring-active: color-mix(in srgb, var(--color-cyan-600) 20%, transparent);
81
+ }
82
+
83
+ /* prettier-ignore */
84
+ :root.dark {
85
+ --stuic-color-primary: var(--color-slate-500);
86
+ --stuic-color-primary-hover: var(--color-slate-400);
87
+ --stuic-color-primary-active: var(--color-slate-300);
88
+ --stuic-color-primary-foreground: var(--color-white);
89
+ --stuic-color-primary-foreground-hover: var(--color-white);
90
+ --stuic-color-primary-foreground-active: var(--color-white);
91
+
92
+ --stuic-color-accent: var(--color-cyan-400);
93
+ --stuic-color-accent-hover: var(--color-cyan-300);
94
+ --stuic-color-accent-active: var(--color-cyan-200);
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-rose-500);
100
+ --stuic-color-destructive-hover: var(--color-rose-400);
101
+ --stuic-color-destructive-active: var(--color-rose-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-amber-400);
107
+ --stuic-color-warning-hover: var(--color-amber-300);
108
+ --stuic-color-warning-active: var(--color-amber-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-teal-500);
114
+ --stuic-color-success-hover: var(--color-teal-400);
115
+ --stuic-color-success-active: var(--color-teal-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-cyan-400);
121
+ --stuic-color-info-hover: var(--color-cyan-300);
122
+ --stuic-color-info-active: var(--color-cyan-200);
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-neutral-900);
128
+ --stuic-color-background-hover: var(--color-neutral-900);
129
+ --stuic-color-background-active: var(--color-neutral-900);
130
+ --stuic-color-background-foreground: var(--color-neutral-50);
131
+ --stuic-color-background-foreground-hover: var(--color-neutral-50);
132
+ --stuic-color-background-foreground-active: var(--color-neutral-50);
133
+
134
+ --stuic-color-surface: var(--color-neutral-800);
135
+ --stuic-color-surface-hover: var(--color-neutral-700);
136
+ --stuic-color-surface-active: var(--color-neutral-600);
137
+ --stuic-color-surface-foreground: var(--color-neutral-100);
138
+ --stuic-color-surface-foreground-hover: var(--color-neutral-100);
139
+ --stuic-color-surface-foreground-active: var(--color-neutral-100);
140
+
141
+ --stuic-color-muted: var(--color-neutral-700);
142
+ --stuic-color-muted-hover: var(--color-neutral-600);
143
+ --stuic-color-muted-active: var(--color-neutral-500);
144
+ --stuic-color-muted-foreground: var(--color-neutral-400);
145
+ --stuic-color-muted-foreground-hover: var(--color-neutral-400);
146
+ --stuic-color-muted-foreground-active: var(--color-neutral-400);
147
+
148
+ --stuic-color-foreground: var(--color-neutral-50);
149
+ --stuic-color-foreground-hover: var(--color-neutral-50);
150
+ --stuic-color-foreground-active: var(--color-neutral-50);
151
+
152
+ --stuic-color-border: var(--color-neutral-700);
153
+ --stuic-color-border-hover: var(--color-neutral-600);
154
+ --stuic-color-border-active: var(--color-neutral-500);
155
+
156
+ --stuic-color-input: var(--color-neutral-800);
157
+ --stuic-color-input-hover: var(--color-neutral-700);
158
+ --stuic-color-input-active: var(--color-neutral-800);
159
+
160
+ --stuic-color-ring: color-mix(in srgb, var(--color-cyan-400) 25%, transparent);
161
+ --stuic-color-ring-hover: color-mix(in srgb, var(--color-cyan-400) 25%, transparent);
162
+ --stuic-color-ring-active: color-mix(in srgb, var(--color-cyan-400) 25%, transparent);
163
+ }
package/dist/themes/slate-cyan.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/slate-cyan.js ADDED
@@ -0,0 +1,151 @@
1
+ const light = {
2
+ colors: {
3
+ intent: {
4
+ primary: {
5
+ DEFAULT: "var(--color-slate-600)",
6
+ foreground: "var(--color-white)",
7
+ hover: "var(--color-slate-700)",
8
+ active: "var(--color-slate-800)",
9
+ },
10
+ accent: {
11
+ DEFAULT: "var(--color-cyan-500)",
12
+ foreground: "var(--color-white)",
13
+ hover: "var(--color-cyan-600)",
14
+ active: "var(--color-cyan-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-black)",
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-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
+ muted: {
54
+ DEFAULT: "var(--color-neutral-100)",
55
+ foreground: "var(--color-neutral-500)",
56
+ hover: "var(--color-neutral-200)",
57
+ active: "var(--color-neutral-300)",
58
+ },
59
+ },
60
+ single: {
61
+ foreground: "var(--color-neutral-900)",
62
+ border: {
63
+ DEFAULT: "var(--color-neutral-200)",
64
+ hover: "var(--color-neutral-300)",
65
+ active: "var(--color-neutral-400)",
66
+ },
67
+ input: {
68
+ DEFAULT: "var(--color-white)",
69
+ hover: "var(--color-neutral-50)",
70
+ },
71
+ ring: "color-mix(in srgb, var(--color-cyan-600) 20%, transparent)",
72
+ },
73
+ },
74
+ },
75
+ };
76
+ const dark = {
77
+ colors: {
78
+ intent: {
79
+ primary: {
80
+ DEFAULT: "var(--color-slate-500)",
81
+ foreground: "var(--color-white)",
82
+ hover: "var(--color-slate-400)",
83
+ active: "var(--color-slate-300)",
84
+ },
85
+ accent: {
86
+ DEFAULT: "var(--color-cyan-400)",
87
+ foreground: "var(--color-white)",
88
+ hover: "var(--color-cyan-300)",
89
+ active: "var(--color-cyan-200)",
90
+ },
91
+ destructive: {
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
+ warning: {
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
+ success: {
104
+ DEFAULT: "var(--color-teal-500)",
105
+ foreground: "var(--color-white)",
106
+ hover: "var(--color-teal-400)",
107
+ active: "var(--color-teal-300)",
108
+ },
109
+ info: {
110
+ DEFAULT: "var(--color-cyan-400)",
111
+ foreground: "var(--color-white)",
112
+ hover: "var(--color-cyan-300)",
113
+ active: "var(--color-cyan-200)",
114
+ },
115
+ },
116
+ role: {
117
+ paired: {
118
+ background: {
119
+ DEFAULT: "var(--color-neutral-900)",
120
+ foreground: "var(--color-neutral-50)",
121
+ },
122
+ surface: {
123
+ DEFAULT: "var(--color-neutral-800)",
124
+ foreground: "var(--color-neutral-100)",
125
+ hover: "var(--color-neutral-700)",
126
+ active: "var(--color-neutral-600)",
127
+ },
128
+ muted: {
129
+ DEFAULT: "var(--color-neutral-700)",
130
+ foreground: "var(--color-neutral-400)",
131
+ hover: "var(--color-neutral-600)",
132
+ active: "var(--color-neutral-500)",
133
+ },
134
+ },
135
+ single: {
136
+ foreground: "var(--color-neutral-50)",
137
+ border: {
138
+ DEFAULT: "var(--color-neutral-700)",
139
+ hover: "var(--color-neutral-600)",
140
+ active: "var(--color-neutral-500)",
141
+ },
142
+ input: {
143
+ DEFAULT: "var(--color-neutral-800)",
144
+ hover: "var(--color-neutral-700)",
145
+ },
146
+ ring: "color-mix(in srgb, var(--color-cyan-400) 25%, transparent)",
147
+ },
148
+ },
149
+ },
150
+ };
151
+ export default { light, dark };
package/dist/themes/tailwind-color-pairs.md ADDED
@@ -0,0 +1,31 @@
1
+ # Tailwind Color Pairs
2
+
3
+ Harmonious color combinations based on color theory (complementary, split-complementary, and triadic relationships).
4
+
5
+ | # | Primary | Accent | Color Theory |
6
+ |---|-----------|-----------|-----------------------------------------|
7
+ | 1 | `indigo` | `amber` | Complementary (blue-purple ↔ warm gold) |
8
+ | 2 | `teal` | `rose` | Complementary (cyan-green ↔ pink-red) |
9
+ | 3 | `violet` | `lime` | Complementary (purple ↔ yellow-green) |
10
+ | 4 | `blue` | `orange` | Classic complementary |
11
+ | 5 | `emerald` | `pink` | Split-complementary |
12
+ | 6 | `sky` | `amber` | Complementary (light blue ↔ warm orange)|
13
+ | 7 | `fuchsia` | `emerald` | Complementary (magenta ↔ green) |
14
+ | 8 | `slate` | `cyan` | Neutral + vibrant accent |
15
+ | 9 | `purple` | `yellow` | Classic complementary |
16
+ | 10| `cyan` | `red` | Triadic / high contrast |
17
+
18
+ ## Usage Notes
19
+
20
+ - **1, 6, 8** — Safe for professional/corporate UIs
21
+ - **3, 7** — Bold and modern, great for creative projects
22
+ - **2, 5** — Fresh and friendly, good for lifestyle/wellness apps
23
+ - **4, 9** — Timeless classics
24
+
25
+ ## Example Usage
26
+
27
+ ```html
28
+ <!-- Primary at higher saturation, secondary as accent -->
29
+ <button class="bg-indigo-600 text-white">Primary Action</button>
30
+ <button class="bg-amber-400 text-black">Secondary/Accent Action</button>
31
+ ```