@marianmeres/stuic 3.5.2 → 3.6.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.
- package/dist/components/Button/index.css +32 -92
- package/dist/components/Input/FieldAssets.svelte +1 -1
- package/dist/components/Input/FieldKeyValues.svelte +9 -9
- package/dist/components/Input/Fieldset.svelte +1 -1
- package/dist/components/Notifications/index.css +2 -2
- package/dist/components/ThemePreview/ThemePreview.svelte +10 -19
- package/dist/components/ThemePreview/index.css +14 -23
- package/dist/icons/index.d.ts +1 -0
- package/dist/icons/index.js +1 -0
- package/dist/themes/blue-orange.js +11 -47
- package/dist/themes/css/blue-orange.css +26 -26
- package/dist/themes/css/cyan-red.css +26 -26
- package/dist/themes/css/cyan-slate.css +26 -26
- package/dist/themes/css/emerald-amber-forest.css +30 -30
- package/dist/themes/css/emerald-pink.css +26 -26
- package/dist/themes/css/fuchsia-emerald.css +26 -26
- package/dist/themes/css/gray.css +27 -27
- package/dist/themes/css/indigo-amber.css +26 -26
- package/dist/themes/css/lime-fuchsia-neon.css +32 -32
- package/dist/themes/css/orange-pink-sunset.css +26 -26
- package/dist/themes/css/pink-emerald.css +26 -26
- package/dist/themes/css/pink-teal.css +26 -26
- package/dist/themes/css/purple-yellow.css +26 -26
- package/dist/themes/css/rainbow.css +26 -26
- package/dist/themes/css/red-blue.css +26 -26
- package/dist/themes/css/red-cyan.css +26 -26
- package/dist/themes/css/red-sky.css +26 -26
- package/dist/themes/css/rose-teal.css +26 -26
- package/dist/themes/css/sky-amber.css +26 -26
- package/dist/themes/css/slate-cyan.css +26 -26
- package/dist/themes/css/slate-teal-ocean.css +26 -26
- package/dist/themes/css/stone-orange-earth.css +33 -33
- package/dist/themes/css/stone.css +27 -27
- package/dist/themes/css/teal-rose.css +26 -26
- package/dist/themes/css/violet-lime.css +26 -26
- package/dist/themes/css/violet-rose-dusk.css +26 -26
- package/dist/themes/cyan-red.js +11 -47
- package/dist/themes/cyan-slate.js +11 -47
- package/dist/themes/emerald-amber-forest.js +13 -49
- package/dist/themes/emerald-pink.js +11 -47
- package/dist/themes/fuchsia-emerald.js +11 -47
- package/dist/themes/gray.js +11 -47
- package/dist/themes/indigo-amber.js +11 -47
- package/dist/themes/lime-fuchsia-neon.js +13 -49
- package/dist/themes/orange-pink-sunset.js +11 -47
- package/dist/themes/pink-emerald.js +11 -47
- package/dist/themes/pink-teal.js +11 -47
- package/dist/themes/purple-yellow.js +11 -47
- package/dist/themes/rainbow.js +11 -47
- package/dist/themes/red-blue.js +11 -47
- package/dist/themes/red-cyan.js +11 -47
- package/dist/themes/red-sky.js +11 -47
- package/dist/themes/rose-teal.js +11 -47
- package/dist/themes/sky-amber.js +11 -47
- package/dist/themes/slate-cyan.js +11 -47
- package/dist/themes/slate-teal-ocean.js +11 -47
- package/dist/themes/stone-orange-earth.js +13 -49
- package/dist/themes/stone.js +11 -47
- package/dist/themes/teal-rose.js +11 -47
- package/dist/themes/violet-lime.js +11 -47
- package/dist/themes/violet-rose-dusk.js +11 -47
- package/dist/utils/design-tokens.d.ts +1 -3
- package/dist/utils/design-tokens.js +57 -12
- package/package.json +1 -1
|
@@ -69,6 +69,14 @@
|
|
|
69
69
|
--stuic-color-background-foreground-hover: var(--color-stone-900, #737373);
|
|
70
70
|
--stuic-color-background-foreground-active: var(--color-stone-900, #737373);
|
|
71
71
|
|
|
72
|
+
--stuic-color-muted: var(--color-stone-100, #737373);
|
|
73
|
+
|
|
74
|
+
--stuic-color-muted-hover: var(--color-stone-200, #737373);
|
|
75
|
+
--stuic-color-muted-active: var(--color-stone-300, #737373);
|
|
76
|
+
--stuic-color-muted-foreground: var(--color-stone-500, #737373);
|
|
77
|
+
--stuic-color-muted-foreground-hover: var(--color-stone-500, #737373);
|
|
78
|
+
--stuic-color-muted-foreground-active: var(--color-stone-500, #737373);
|
|
79
|
+
|
|
72
80
|
--stuic-color-surface: var(--color-stone-200, #737373);
|
|
73
81
|
|
|
74
82
|
--stuic-color-surface-1: var(--color-stone-300, #737373);
|
|
@@ -78,14 +86,6 @@
|
|
|
78
86
|
--stuic-color-surface-1-foreground-hover: var(--color-stone-900, #737373);
|
|
79
87
|
--stuic-color-surface-1-foreground-active: var(--color-stone-900, #737373);
|
|
80
88
|
|
|
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
89
|
--stuic-color-foreground: var(--color-stone-900, #737373);
|
|
90
90
|
|
|
91
91
|
--stuic-color-foreground-hover: var(--color-stone-900, #737373);
|
|
@@ -164,11 +164,11 @@
|
|
|
164
164
|
--stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
|
|
165
165
|
--stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
|
|
166
166
|
--stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
|
|
167
|
-
--stuic-color-surface-hover: var(--color-stone-
|
|
168
|
-
--stuic-color-surface-active: var(--color-stone-
|
|
169
|
-
--stuic-color-surface-foreground: var(--color-stone-
|
|
170
|
-
--stuic-color-surface-foreground-hover: var(--color-stone-
|
|
171
|
-
--stuic-color-surface-foreground-active: var(--color-stone-
|
|
167
|
+
--stuic-color-surface-hover: var(--color-stone-600, #737373);
|
|
168
|
+
--stuic-color-surface-active: var(--color-stone-500, #737373);
|
|
169
|
+
--stuic-color-surface-foreground: var(--color-stone-300, #737373);
|
|
170
|
+
--stuic-color-surface-foreground-hover: var(--color-stone-300, #737373);
|
|
171
|
+
--stuic-color-surface-foreground-active: var(--color-stone-300, #737373);
|
|
172
172
|
|
|
173
173
|
--stuic-color-background: var(--color-stone-900, #737373);
|
|
174
174
|
|
|
@@ -178,23 +178,23 @@
|
|
|
178
178
|
--stuic-color-background-foreground-hover: var(--color-stone-50, #737373);
|
|
179
179
|
--stuic-color-background-foreground-active: var(--color-stone-50, #737373);
|
|
180
180
|
|
|
181
|
-
--stuic-color-
|
|
181
|
+
--stuic-color-muted: var(--color-stone-800, #737373);
|
|
182
182
|
|
|
183
|
-
--stuic-color-
|
|
184
|
-
--stuic-color-
|
|
185
|
-
--stuic-color-surface-1-active: var(--color-stone-500, #737373);
|
|
186
|
-
--stuic-color-surface-1-foreground: var(--color-stone-100, #737373);
|
|
187
|
-
--stuic-color-surface-1-foreground-hover: var(--color-stone-100, #737373);
|
|
188
|
-
--stuic-color-surface-1-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);
|
|
183
|
+
--stuic-color-muted-hover: var(--color-stone-700, #737373);
|
|
184
|
+
--stuic-color-muted-active: var(--color-stone-600, #737373);
|
|
194
185
|
--stuic-color-muted-foreground: var(--color-stone-400, #737373);
|
|
195
186
|
--stuic-color-muted-foreground-hover: var(--color-stone-400, #737373);
|
|
196
187
|
--stuic-color-muted-foreground-active: var(--color-stone-400, #737373);
|
|
197
188
|
|
|
189
|
+
--stuic-color-surface: var(--color-stone-700, #737373);
|
|
190
|
+
|
|
191
|
+
--stuic-color-surface-1: var(--color-stone-600, #737373);
|
|
192
|
+
--stuic-color-surface-1-hover: var(--color-stone-500, #737373);
|
|
193
|
+
--stuic-color-surface-1-active: var(--color-stone-400, #737373);
|
|
194
|
+
--stuic-color-surface-1-foreground: var(--color-stone-200, #737373);
|
|
195
|
+
--stuic-color-surface-1-foreground-hover: var(--color-stone-200, #737373);
|
|
196
|
+
--stuic-color-surface-1-foreground-active: var(--color-stone-200, #737373);
|
|
197
|
+
|
|
198
198
|
--stuic-color-foreground: var(--color-stone-50, #737373);
|
|
199
199
|
|
|
200
200
|
--stuic-color-foreground-hover: var(--color-stone-50, #737373);
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
--stuic-color-input: var(--color-stone-800, #737373);
|
|
209
209
|
|
|
210
210
|
--stuic-color-input-hover: var(--color-stone-700, #737373);
|
|
211
|
-
--stuic-color-input-active: var(--color-stone-
|
|
211
|
+
--stuic-color-input-active: var(--color-stone-600, #737373);
|
|
212
212
|
|
|
213
213
|
--stuic-color-ring: color-mix(in srgb, var(--color-cyan-400) 25%, transparent);
|
|
214
214
|
|
|
@@ -69,6 +69,14 @@
|
|
|
69
69
|
--stuic-color-background-foreground-hover: var(--color-neutral-900, #737373);
|
|
70
70
|
--stuic-color-background-foreground-active: var(--color-neutral-900, #737373);
|
|
71
71
|
|
|
72
|
+
--stuic-color-muted: var(--color-neutral-100, #737373);
|
|
73
|
+
|
|
74
|
+
--stuic-color-muted-hover: var(--color-neutral-200, #737373);
|
|
75
|
+
--stuic-color-muted-active: var(--color-neutral-300, #737373);
|
|
76
|
+
--stuic-color-muted-foreground: var(--color-neutral-500, #737373);
|
|
77
|
+
--stuic-color-muted-foreground-hover: var(--color-neutral-500, #737373);
|
|
78
|
+
--stuic-color-muted-foreground-active: var(--color-neutral-500, #737373);
|
|
79
|
+
|
|
72
80
|
--stuic-color-surface: var(--color-neutral-200, #737373);
|
|
73
81
|
|
|
74
82
|
--stuic-color-surface-1: var(--color-neutral-300, #737373);
|
|
@@ -78,14 +86,6 @@
|
|
|
78
86
|
--stuic-color-surface-1-foreground-hover: var(--color-neutral-900, #737373);
|
|
79
87
|
--stuic-color-surface-1-foreground-active: var(--color-neutral-900, #737373);
|
|
80
88
|
|
|
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
89
|
--stuic-color-foreground: var(--color-neutral-900, #737373);
|
|
90
90
|
|
|
91
91
|
--stuic-color-foreground-hover: var(--color-neutral-900, #737373);
|
|
@@ -164,11 +164,11 @@
|
|
|
164
164
|
--stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
|
|
165
165
|
--stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
|
|
166
166
|
--stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
|
|
167
|
-
--stuic-color-surface-hover: var(--color-neutral-
|
|
168
|
-
--stuic-color-surface-active: var(--color-neutral-
|
|
169
|
-
--stuic-color-surface-foreground: var(--color-neutral-
|
|
170
|
-
--stuic-color-surface-foreground-hover: var(--color-neutral-
|
|
171
|
-
--stuic-color-surface-foreground-active: var(--color-neutral-
|
|
167
|
+
--stuic-color-surface-hover: var(--color-neutral-600, #737373);
|
|
168
|
+
--stuic-color-surface-active: var(--color-neutral-500, #737373);
|
|
169
|
+
--stuic-color-surface-foreground: var(--color-neutral-300, #737373);
|
|
170
|
+
--stuic-color-surface-foreground-hover: var(--color-neutral-300, #737373);
|
|
171
|
+
--stuic-color-surface-foreground-active: var(--color-neutral-300, #737373);
|
|
172
172
|
|
|
173
173
|
--stuic-color-background: var(--color-neutral-900, #737373);
|
|
174
174
|
|
|
@@ -178,23 +178,23 @@
|
|
|
178
178
|
--stuic-color-background-foreground-hover: var(--color-neutral-50, #737373);
|
|
179
179
|
--stuic-color-background-foreground-active: var(--color-neutral-50, #737373);
|
|
180
180
|
|
|
181
|
-
--stuic-color-
|
|
181
|
+
--stuic-color-muted: var(--color-neutral-800, #737373);
|
|
182
182
|
|
|
183
|
-
--stuic-color-
|
|
184
|
-
--stuic-color-
|
|
185
|
-
--stuic-color-surface-1-active: var(--color-neutral-500, #737373);
|
|
186
|
-
--stuic-color-surface-1-foreground: var(--color-neutral-100, #737373);
|
|
187
|
-
--stuic-color-surface-1-foreground-hover: var(--color-neutral-100, #737373);
|
|
188
|
-
--stuic-color-surface-1-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);
|
|
183
|
+
--stuic-color-muted-hover: var(--color-neutral-700, #737373);
|
|
184
|
+
--stuic-color-muted-active: var(--color-neutral-600, #737373);
|
|
194
185
|
--stuic-color-muted-foreground: var(--color-neutral-400, #737373);
|
|
195
186
|
--stuic-color-muted-foreground-hover: var(--color-neutral-400, #737373);
|
|
196
187
|
--stuic-color-muted-foreground-active: var(--color-neutral-400, #737373);
|
|
197
188
|
|
|
189
|
+
--stuic-color-surface: var(--color-neutral-700, #737373);
|
|
190
|
+
|
|
191
|
+
--stuic-color-surface-1: var(--color-neutral-600, #737373);
|
|
192
|
+
--stuic-color-surface-1-hover: var(--color-neutral-500, #737373);
|
|
193
|
+
--stuic-color-surface-1-active: var(--color-neutral-400, #737373);
|
|
194
|
+
--stuic-color-surface-1-foreground: var(--color-neutral-200, #737373);
|
|
195
|
+
--stuic-color-surface-1-foreground-hover: var(--color-neutral-200, #737373);
|
|
196
|
+
--stuic-color-surface-1-foreground-active: var(--color-neutral-200, #737373);
|
|
197
|
+
|
|
198
198
|
--stuic-color-foreground: var(--color-neutral-50, #737373);
|
|
199
199
|
|
|
200
200
|
--stuic-color-foreground-hover: var(--color-neutral-50, #737373);
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
--stuic-color-input: var(--color-neutral-800, #737373);
|
|
209
209
|
|
|
210
210
|
--stuic-color-input-hover: var(--color-neutral-700, #737373);
|
|
211
|
-
--stuic-color-input-active: var(--color-neutral-
|
|
211
|
+
--stuic-color-input-active: var(--color-neutral-600, #737373);
|
|
212
212
|
|
|
213
213
|
--stuic-color-ring: color-mix(in srgb, var(--color-cyan-400) 25%, transparent);
|
|
214
214
|
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
--stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
|
|
56
56
|
--stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 10%);
|
|
57
57
|
--stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
|
|
58
|
-
--stuic-color-surface-hover: var(--color-amber-
|
|
59
|
-
--stuic-color-surface-active: var(--color-amber-
|
|
58
|
+
--stuic-color-surface-hover: var(--color-amber-300, #737373);
|
|
59
|
+
--stuic-color-surface-active: var(--color-amber-400, #737373);
|
|
60
60
|
--stuic-color-surface-foreground: var(--color-amber-900, #737373);
|
|
61
61
|
--stuic-color-surface-foreground-hover: var(--color-amber-900, #737373);
|
|
62
62
|
--stuic-color-surface-foreground-active: var(--color-amber-900, #737373);
|
|
@@ -69,15 +69,6 @@
|
|
|
69
69
|
--stuic-color-background-foreground-hover: var(--color-stone-900, #737373);
|
|
70
70
|
--stuic-color-background-foreground-active: var(--color-stone-900, #737373);
|
|
71
71
|
|
|
72
|
-
--stuic-color-surface: var(--color-amber-100, #737373);
|
|
73
|
-
|
|
74
|
-
--stuic-color-surface-1: var(--color-amber-200, #737373);
|
|
75
|
-
--stuic-color-surface-1-hover: var(--color-amber-300, #737373);
|
|
76
|
-
--stuic-color-surface-1-active: var(--color-amber-400, #737373);
|
|
77
|
-
--stuic-color-surface-1-foreground: var(--color-amber-900, #737373);
|
|
78
|
-
--stuic-color-surface-1-foreground-hover: var(--color-amber-900, #737373);
|
|
79
|
-
--stuic-color-surface-1-foreground-active: var(--color-amber-900, #737373);
|
|
80
|
-
|
|
81
72
|
--stuic-color-muted: var(--color-amber-100, #737373);
|
|
82
73
|
|
|
83
74
|
--stuic-color-muted-hover: var(--color-amber-200, #737373);
|
|
@@ -86,6 +77,15 @@
|
|
|
86
77
|
--stuic-color-muted-foreground-hover: var(--color-amber-500, #737373);
|
|
87
78
|
--stuic-color-muted-foreground-active: var(--color-amber-500, #737373);
|
|
88
79
|
|
|
80
|
+
--stuic-color-surface: var(--color-amber-200, #737373);
|
|
81
|
+
|
|
82
|
+
--stuic-color-surface-1: var(--color-amber-300, #737373);
|
|
83
|
+
--stuic-color-surface-1-hover: var(--color-amber-400, #737373);
|
|
84
|
+
--stuic-color-surface-1-active: var(--color-amber-500, #737373);
|
|
85
|
+
--stuic-color-surface-1-foreground: var(--color-amber-900, #737373);
|
|
86
|
+
--stuic-color-surface-1-foreground-hover: var(--color-amber-900, #737373);
|
|
87
|
+
--stuic-color-surface-1-foreground-active: var(--color-amber-900, #737373);
|
|
88
|
+
|
|
89
89
|
--stuic-color-foreground: var(--color-stone-900, #737373);
|
|
90
90
|
|
|
91
91
|
--stuic-color-foreground-hover: var(--color-stone-900, #737373);
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
--stuic-color-input: var(--color-amber-50, #737373);
|
|
100
100
|
|
|
101
101
|
--stuic-color-input-hover: var(--color-stone-100, #737373);
|
|
102
|
-
--stuic-color-input-active: var(--color-amber-
|
|
102
|
+
--stuic-color-input-active: var(--color-amber-200, #737373);
|
|
103
103
|
|
|
104
104
|
--stuic-color-ring: color-mix(in srgb, var(--color-emerald-700) 20%, transparent);
|
|
105
105
|
|
|
@@ -164,11 +164,11 @@
|
|
|
164
164
|
--stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
|
|
165
165
|
--stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
|
|
166
166
|
--stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
|
|
167
|
-
--stuic-color-surface-hover: var(--color-stone-
|
|
168
|
-
--stuic-color-surface-active: var(--color-stone-
|
|
169
|
-
--stuic-color-surface-foreground: var(--color-stone-
|
|
170
|
-
--stuic-color-surface-foreground-hover: var(--color-stone-
|
|
171
|
-
--stuic-color-surface-foreground-active: var(--color-stone-
|
|
167
|
+
--stuic-color-surface-hover: var(--color-stone-600, #737373);
|
|
168
|
+
--stuic-color-surface-active: var(--color-stone-500, #737373);
|
|
169
|
+
--stuic-color-surface-foreground: var(--color-stone-300, #737373);
|
|
170
|
+
--stuic-color-surface-foreground-hover: var(--color-stone-300, #737373);
|
|
171
|
+
--stuic-color-surface-foreground-active: var(--color-stone-300, #737373);
|
|
172
172
|
|
|
173
173
|
--stuic-color-background: var(--color-stone-900, #737373);
|
|
174
174
|
|
|
@@ -178,23 +178,23 @@
|
|
|
178
178
|
--stuic-color-background-foreground-hover: var(--color-stone-50, #737373);
|
|
179
179
|
--stuic-color-background-foreground-active: var(--color-stone-50, #737373);
|
|
180
180
|
|
|
181
|
-
--stuic-color-
|
|
182
|
-
|
|
183
|
-
--stuic-color-surface-1: var(--color-stone-700, #737373);
|
|
184
|
-
--stuic-color-surface-1-hover: var(--color-stone-600, #737373);
|
|
185
|
-
--stuic-color-surface-1-active: var(--color-stone-500, #737373);
|
|
186
|
-
--stuic-color-surface-1-foreground: var(--color-stone-100, #737373);
|
|
187
|
-
--stuic-color-surface-1-foreground-hover: var(--color-stone-100, #737373);
|
|
188
|
-
--stuic-color-surface-1-foreground-active: var(--color-stone-100, #737373);
|
|
181
|
+
--stuic-color-muted: var(--color-stone-800, #737373);
|
|
189
182
|
|
|
190
|
-
--stuic-color-muted:
|
|
191
|
-
|
|
192
|
-
--stuic-color-muted-hover: var(--color-stone-600, #737373);
|
|
193
|
-
--stuic-color-muted-active: var(--color-stone-500, #737373);
|
|
183
|
+
--stuic-color-muted-hover: var(--color-stone-700, #737373);
|
|
184
|
+
--stuic-color-muted-active: var(--color-stone-600, #737373);
|
|
194
185
|
--stuic-color-muted-foreground: var(--color-stone-400, #737373);
|
|
195
186
|
--stuic-color-muted-foreground-hover: var(--color-stone-400, #737373);
|
|
196
187
|
--stuic-color-muted-foreground-active: var(--color-stone-400, #737373);
|
|
197
188
|
|
|
189
|
+
--stuic-color-surface: var(--color-stone-700, #737373);
|
|
190
|
+
|
|
191
|
+
--stuic-color-surface-1: var(--color-stone-600, #737373);
|
|
192
|
+
--stuic-color-surface-1-hover: var(--color-stone-500, #737373);
|
|
193
|
+
--stuic-color-surface-1-active: var(--color-stone-400, #737373);
|
|
194
|
+
--stuic-color-surface-1-foreground: var(--color-stone-200, #737373);
|
|
195
|
+
--stuic-color-surface-1-foreground-hover: var(--color-stone-200, #737373);
|
|
196
|
+
--stuic-color-surface-1-foreground-active: var(--color-stone-200, #737373);
|
|
197
|
+
|
|
198
198
|
--stuic-color-foreground: var(--color-stone-50, #737373);
|
|
199
199
|
|
|
200
200
|
--stuic-color-foreground-hover: var(--color-stone-50, #737373);
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
--stuic-color-input: var(--color-stone-800, #737373);
|
|
209
209
|
|
|
210
210
|
--stuic-color-input-hover: var(--color-stone-700, #737373);
|
|
211
|
-
--stuic-color-input-active: var(--color-stone-
|
|
211
|
+
--stuic-color-input-active: var(--color-stone-600, #737373);
|
|
212
212
|
|
|
213
213
|
--stuic-color-ring: color-mix(in srgb, var(--color-emerald-500) 25%, transparent);
|
|
214
214
|
|
|
@@ -69,6 +69,14 @@
|
|
|
69
69
|
--stuic-color-background-foreground-hover: var(--color-stone-900, #737373);
|
|
70
70
|
--stuic-color-background-foreground-active: var(--color-stone-900, #737373);
|
|
71
71
|
|
|
72
|
+
--stuic-color-muted: var(--color-stone-100, #737373);
|
|
73
|
+
|
|
74
|
+
--stuic-color-muted-hover: var(--color-stone-200, #737373);
|
|
75
|
+
--stuic-color-muted-active: var(--color-stone-300, #737373);
|
|
76
|
+
--stuic-color-muted-foreground: var(--color-stone-500, #737373);
|
|
77
|
+
--stuic-color-muted-foreground-hover: var(--color-stone-500, #737373);
|
|
78
|
+
--stuic-color-muted-foreground-active: var(--color-stone-500, #737373);
|
|
79
|
+
|
|
72
80
|
--stuic-color-surface: var(--color-stone-200, #737373);
|
|
73
81
|
|
|
74
82
|
--stuic-color-surface-1: var(--color-stone-300, #737373);
|
|
@@ -78,14 +86,6 @@
|
|
|
78
86
|
--stuic-color-surface-1-foreground-hover: var(--color-stone-900, #737373);
|
|
79
87
|
--stuic-color-surface-1-foreground-active: var(--color-stone-900, #737373);
|
|
80
88
|
|
|
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
89
|
--stuic-color-foreground: var(--color-stone-900, #737373);
|
|
90
90
|
|
|
91
91
|
--stuic-color-foreground-hover: var(--color-stone-900, #737373);
|
|
@@ -164,11 +164,11 @@
|
|
|
164
164
|
--stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
|
|
165
165
|
--stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
|
|
166
166
|
--stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
|
|
167
|
-
--stuic-color-surface-hover: var(--color-stone-
|
|
168
|
-
--stuic-color-surface-active: var(--color-stone-
|
|
169
|
-
--stuic-color-surface-foreground: var(--color-stone-
|
|
170
|
-
--stuic-color-surface-foreground-hover: var(--color-stone-
|
|
171
|
-
--stuic-color-surface-foreground-active: var(--color-stone-
|
|
167
|
+
--stuic-color-surface-hover: var(--color-stone-600, #737373);
|
|
168
|
+
--stuic-color-surface-active: var(--color-stone-500, #737373);
|
|
169
|
+
--stuic-color-surface-foreground: var(--color-stone-300, #737373);
|
|
170
|
+
--stuic-color-surface-foreground-hover: var(--color-stone-300, #737373);
|
|
171
|
+
--stuic-color-surface-foreground-active: var(--color-stone-300, #737373);
|
|
172
172
|
|
|
173
173
|
--stuic-color-background: var(--color-stone-900, #737373);
|
|
174
174
|
|
|
@@ -178,23 +178,23 @@
|
|
|
178
178
|
--stuic-color-background-foreground-hover: var(--color-stone-50, #737373);
|
|
179
179
|
--stuic-color-background-foreground-active: var(--color-stone-50, #737373);
|
|
180
180
|
|
|
181
|
-
--stuic-color-
|
|
181
|
+
--stuic-color-muted: var(--color-stone-800, #737373);
|
|
182
182
|
|
|
183
|
-
--stuic-color-
|
|
184
|
-
--stuic-color-
|
|
185
|
-
--stuic-color-surface-1-active: var(--color-stone-500, #737373);
|
|
186
|
-
--stuic-color-surface-1-foreground: var(--color-stone-100, #737373);
|
|
187
|
-
--stuic-color-surface-1-foreground-hover: var(--color-stone-100, #737373);
|
|
188
|
-
--stuic-color-surface-1-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);
|
|
183
|
+
--stuic-color-muted-hover: var(--color-stone-700, #737373);
|
|
184
|
+
--stuic-color-muted-active: var(--color-stone-600, #737373);
|
|
194
185
|
--stuic-color-muted-foreground: var(--color-stone-400, #737373);
|
|
195
186
|
--stuic-color-muted-foreground-hover: var(--color-stone-400, #737373);
|
|
196
187
|
--stuic-color-muted-foreground-active: var(--color-stone-400, #737373);
|
|
197
188
|
|
|
189
|
+
--stuic-color-surface: var(--color-stone-700, #737373);
|
|
190
|
+
|
|
191
|
+
--stuic-color-surface-1: var(--color-stone-600, #737373);
|
|
192
|
+
--stuic-color-surface-1-hover: var(--color-stone-500, #737373);
|
|
193
|
+
--stuic-color-surface-1-active: var(--color-stone-400, #737373);
|
|
194
|
+
--stuic-color-surface-1-foreground: var(--color-stone-200, #737373);
|
|
195
|
+
--stuic-color-surface-1-foreground-hover: var(--color-stone-200, #737373);
|
|
196
|
+
--stuic-color-surface-1-foreground-active: var(--color-stone-200, #737373);
|
|
197
|
+
|
|
198
198
|
--stuic-color-foreground: var(--color-stone-50, #737373);
|
|
199
199
|
|
|
200
200
|
--stuic-color-foreground-hover: var(--color-stone-50, #737373);
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
--stuic-color-input: var(--color-stone-800, #737373);
|
|
209
209
|
|
|
210
210
|
--stuic-color-input-hover: var(--color-stone-700, #737373);
|
|
211
|
-
--stuic-color-input-active: var(--color-stone-
|
|
211
|
+
--stuic-color-input-active: var(--color-stone-600, #737373);
|
|
212
212
|
|
|
213
213
|
--stuic-color-ring: color-mix(in srgb, var(--color-emerald-400) 25%, transparent);
|
|
214
214
|
|
|
@@ -69,6 +69,14 @@
|
|
|
69
69
|
--stuic-color-background-foreground-hover: var(--color-neutral-900, #737373);
|
|
70
70
|
--stuic-color-background-foreground-active: var(--color-neutral-900, #737373);
|
|
71
71
|
|
|
72
|
+
--stuic-color-muted: var(--color-neutral-100, #737373);
|
|
73
|
+
|
|
74
|
+
--stuic-color-muted-hover: var(--color-neutral-200, #737373);
|
|
75
|
+
--stuic-color-muted-active: var(--color-neutral-300, #737373);
|
|
76
|
+
--stuic-color-muted-foreground: var(--color-neutral-500, #737373);
|
|
77
|
+
--stuic-color-muted-foreground-hover: var(--color-neutral-500, #737373);
|
|
78
|
+
--stuic-color-muted-foreground-active: var(--color-neutral-500, #737373);
|
|
79
|
+
|
|
72
80
|
--stuic-color-surface: var(--color-neutral-200, #737373);
|
|
73
81
|
|
|
74
82
|
--stuic-color-surface-1: var(--color-neutral-300, #737373);
|
|
@@ -78,14 +86,6 @@
|
|
|
78
86
|
--stuic-color-surface-1-foreground-hover: var(--color-neutral-900, #737373);
|
|
79
87
|
--stuic-color-surface-1-foreground-active: var(--color-neutral-900, #737373);
|
|
80
88
|
|
|
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
89
|
--stuic-color-foreground: var(--color-neutral-900, #737373);
|
|
90
90
|
|
|
91
91
|
--stuic-color-foreground-hover: var(--color-neutral-900, #737373);
|
|
@@ -164,11 +164,11 @@
|
|
|
164
164
|
--stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
|
|
165
165
|
--stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
|
|
166
166
|
--stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
|
|
167
|
-
--stuic-color-surface-hover: var(--color-neutral-
|
|
168
|
-
--stuic-color-surface-active: var(--color-neutral-
|
|
169
|
-
--stuic-color-surface-foreground: var(--color-neutral-
|
|
170
|
-
--stuic-color-surface-foreground-hover: var(--color-neutral-
|
|
171
|
-
--stuic-color-surface-foreground-active: var(--color-neutral-
|
|
167
|
+
--stuic-color-surface-hover: var(--color-neutral-600, #737373);
|
|
168
|
+
--stuic-color-surface-active: var(--color-neutral-500, #737373);
|
|
169
|
+
--stuic-color-surface-foreground: var(--color-neutral-300, #737373);
|
|
170
|
+
--stuic-color-surface-foreground-hover: var(--color-neutral-300, #737373);
|
|
171
|
+
--stuic-color-surface-foreground-active: var(--color-neutral-300, #737373);
|
|
172
172
|
|
|
173
173
|
--stuic-color-background: var(--color-neutral-900, #737373);
|
|
174
174
|
|
|
@@ -178,23 +178,23 @@
|
|
|
178
178
|
--stuic-color-background-foreground-hover: var(--color-neutral-50, #737373);
|
|
179
179
|
--stuic-color-background-foreground-active: var(--color-neutral-50, #737373);
|
|
180
180
|
|
|
181
|
-
--stuic-color-
|
|
181
|
+
--stuic-color-muted: var(--color-neutral-800, #737373);
|
|
182
182
|
|
|
183
|
-
--stuic-color-
|
|
184
|
-
--stuic-color-
|
|
185
|
-
--stuic-color-surface-1-active: var(--color-neutral-500, #737373);
|
|
186
|
-
--stuic-color-surface-1-foreground: var(--color-neutral-100, #737373);
|
|
187
|
-
--stuic-color-surface-1-foreground-hover: var(--color-neutral-100, #737373);
|
|
188
|
-
--stuic-color-surface-1-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);
|
|
183
|
+
--stuic-color-muted-hover: var(--color-neutral-700, #737373);
|
|
184
|
+
--stuic-color-muted-active: var(--color-neutral-600, #737373);
|
|
194
185
|
--stuic-color-muted-foreground: var(--color-neutral-400, #737373);
|
|
195
186
|
--stuic-color-muted-foreground-hover: var(--color-neutral-400, #737373);
|
|
196
187
|
--stuic-color-muted-foreground-active: var(--color-neutral-400, #737373);
|
|
197
188
|
|
|
189
|
+
--stuic-color-surface: var(--color-neutral-700, #737373);
|
|
190
|
+
|
|
191
|
+
--stuic-color-surface-1: var(--color-neutral-600, #737373);
|
|
192
|
+
--stuic-color-surface-1-hover: var(--color-neutral-500, #737373);
|
|
193
|
+
--stuic-color-surface-1-active: var(--color-neutral-400, #737373);
|
|
194
|
+
--stuic-color-surface-1-foreground: var(--color-neutral-200, #737373);
|
|
195
|
+
--stuic-color-surface-1-foreground-hover: var(--color-neutral-200, #737373);
|
|
196
|
+
--stuic-color-surface-1-foreground-active: var(--color-neutral-200, #737373);
|
|
197
|
+
|
|
198
198
|
--stuic-color-foreground: var(--color-neutral-50, #737373);
|
|
199
199
|
|
|
200
200
|
--stuic-color-foreground-hover: var(--color-neutral-50, #737373);
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
--stuic-color-input: var(--color-neutral-800, #737373);
|
|
209
209
|
|
|
210
210
|
--stuic-color-input-hover: var(--color-neutral-700, #737373);
|
|
211
|
-
--stuic-color-input-active: var(--color-neutral-
|
|
211
|
+
--stuic-color-input-active: var(--color-neutral-600, #737373);
|
|
212
212
|
|
|
213
213
|
--stuic-color-ring: color-mix(in srgb, var(--color-fuchsia-400) 25%, transparent);
|
|
214
214
|
|
package/dist/themes/css/gray.css
CHANGED
|
@@ -69,6 +69,14 @@
|
|
|
69
69
|
--stuic-color-background-foreground-hover: var(--color-gray-900, #737373);
|
|
70
70
|
--stuic-color-background-foreground-active: var(--color-gray-900, #737373);
|
|
71
71
|
|
|
72
|
+
--stuic-color-muted: var(--color-gray-100, #737373);
|
|
73
|
+
|
|
74
|
+
--stuic-color-muted-hover: var(--color-gray-200, #737373);
|
|
75
|
+
--stuic-color-muted-active: var(--color-gray-300, #737373);
|
|
76
|
+
--stuic-color-muted-foreground: var(--color-gray-500, #737373);
|
|
77
|
+
--stuic-color-muted-foreground-hover: var(--color-gray-500, #737373);
|
|
78
|
+
--stuic-color-muted-foreground-active: var(--color-gray-500, #737373);
|
|
79
|
+
|
|
72
80
|
--stuic-color-surface: var(--color-gray-200, #737373);
|
|
73
81
|
|
|
74
82
|
--stuic-color-surface-1: var(--color-gray-300, #737373);
|
|
@@ -78,14 +86,6 @@
|
|
|
78
86
|
--stuic-color-surface-1-foreground-hover: var(--color-gray-900, #737373);
|
|
79
87
|
--stuic-color-surface-1-foreground-active: var(--color-gray-900, #737373);
|
|
80
88
|
|
|
81
|
-
--stuic-color-muted: var(--color-gray-200, #737373);
|
|
82
|
-
|
|
83
|
-
--stuic-color-muted-hover: var(--color-gray-300, #737373);
|
|
84
|
-
--stuic-color-muted-active: var(--color-gray-400, #737373);
|
|
85
|
-
--stuic-color-muted-foreground: var(--color-gray-500, #737373);
|
|
86
|
-
--stuic-color-muted-foreground-hover: var(--color-gray-500, #737373);
|
|
87
|
-
--stuic-color-muted-foreground-active: var(--color-gray-500, #737373);
|
|
88
|
-
|
|
89
89
|
--stuic-color-foreground: var(--color-gray-900, #737373);
|
|
90
90
|
|
|
91
91
|
--stuic-color-foreground-hover: var(--color-gray-900, #737373);
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
--stuic-color-input: var(--color-gray-50, #737373);
|
|
100
100
|
|
|
101
101
|
--stuic-color-input-hover: var(--color-gray-100, #737373);
|
|
102
|
-
--stuic-color-input-active: var(--color-gray-
|
|
102
|
+
--stuic-color-input-active: var(--color-gray-200, #737373);
|
|
103
103
|
|
|
104
104
|
--stuic-color-ring: color-mix(in srgb, var(--color-gray-800) 20%, transparent);
|
|
105
105
|
|
|
@@ -164,11 +164,11 @@
|
|
|
164
164
|
--stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
|
|
165
165
|
--stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
|
|
166
166
|
--stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
|
|
167
|
-
--stuic-color-surface-hover: var(--color-gray-
|
|
168
|
-
--stuic-color-surface-active: var(--color-gray-
|
|
169
|
-
--stuic-color-surface-foreground: var(--color-gray-
|
|
170
|
-
--stuic-color-surface-foreground-hover: var(--color-gray-
|
|
171
|
-
--stuic-color-surface-foreground-active: var(--color-gray-
|
|
167
|
+
--stuic-color-surface-hover: var(--color-gray-600, #737373);
|
|
168
|
+
--stuic-color-surface-active: var(--color-gray-500, #737373);
|
|
169
|
+
--stuic-color-surface-foreground: var(--color-gray-300, #737373);
|
|
170
|
+
--stuic-color-surface-foreground-hover: var(--color-gray-300, #737373);
|
|
171
|
+
--stuic-color-surface-foreground-active: var(--color-gray-300, #737373);
|
|
172
172
|
|
|
173
173
|
--stuic-color-background: var(--color-gray-900, #737373);
|
|
174
174
|
|
|
@@ -178,23 +178,23 @@
|
|
|
178
178
|
--stuic-color-background-foreground-hover: var(--color-gray-50, #737373);
|
|
179
179
|
--stuic-color-background-foreground-active: var(--color-gray-50, #737373);
|
|
180
180
|
|
|
181
|
-
--stuic-color-
|
|
182
|
-
|
|
183
|
-
--stuic-color-surface-1: var(--color-gray-700, #737373);
|
|
184
|
-
--stuic-color-surface-1-hover: var(--color-gray-600, #737373);
|
|
185
|
-
--stuic-color-surface-1-active: var(--color-gray-500, #737373);
|
|
186
|
-
--stuic-color-surface-1-foreground: var(--color-gray-100, #737373);
|
|
187
|
-
--stuic-color-surface-1-foreground-hover: var(--color-gray-100, #737373);
|
|
188
|
-
--stuic-color-surface-1-foreground-active: var(--color-gray-100, #737373);
|
|
181
|
+
--stuic-color-muted: var(--color-gray-800, #737373);
|
|
189
182
|
|
|
190
|
-
--stuic-color-muted:
|
|
191
|
-
|
|
192
|
-
--stuic-color-muted-hover: var(--color-gray-600, #737373);
|
|
193
|
-
--stuic-color-muted-active: var(--color-gray-500, #737373);
|
|
183
|
+
--stuic-color-muted-hover: var(--color-gray-700, #737373);
|
|
184
|
+
--stuic-color-muted-active: var(--color-gray-600, #737373);
|
|
194
185
|
--stuic-color-muted-foreground: var(--color-gray-400, #737373);
|
|
195
186
|
--stuic-color-muted-foreground-hover: var(--color-gray-400, #737373);
|
|
196
187
|
--stuic-color-muted-foreground-active: var(--color-gray-400, #737373);
|
|
197
188
|
|
|
189
|
+
--stuic-color-surface: var(--color-gray-700, #737373);
|
|
190
|
+
|
|
191
|
+
--stuic-color-surface-1: var(--color-gray-600, #737373);
|
|
192
|
+
--stuic-color-surface-1-hover: var(--color-gray-500, #737373);
|
|
193
|
+
--stuic-color-surface-1-active: var(--color-gray-400, #737373);
|
|
194
|
+
--stuic-color-surface-1-foreground: var(--color-gray-200, #737373);
|
|
195
|
+
--stuic-color-surface-1-foreground-hover: var(--color-gray-200, #737373);
|
|
196
|
+
--stuic-color-surface-1-foreground-active: var(--color-gray-200, #737373);
|
|
197
|
+
|
|
198
198
|
--stuic-color-foreground: var(--color-gray-50, #737373);
|
|
199
199
|
|
|
200
200
|
--stuic-color-foreground-hover: var(--color-gray-50, #737373);
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
--stuic-color-input: var(--color-gray-800, #737373);
|
|
209
209
|
|
|
210
210
|
--stuic-color-input-hover: var(--color-gray-700, #737373);
|
|
211
|
-
--stuic-color-input-active: var(--color-gray-
|
|
211
|
+
--stuic-color-input-active: var(--color-gray-600, #737373);
|
|
212
212
|
|
|
213
213
|
--stuic-color-ring: color-mix(in srgb, var(--color-gray-200) 25%, transparent);
|
|
214
214
|
|