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