[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
improve css stuff, refactor social stuff, update tailwind (+ add new colors)
+2825
-1891
+1
-1
pnpm-lock.yaml
+1
-1
pnpm-lock.yaml
+7
.changeset/loose-eagles-serve.md
+7
.changeset/loose-eagles-serve.md
+8
.claude/settings.local.json
+8
.claude/settings.local.json
+1
-1
apps/docs/package.json
+1
-1
apps/docs/package.json
+4
-2
packages/core/package.json
+4
-2
packages/core/package.json
···
25
25
".": {
26
26
"types": "./src/lib/index.ts",
27
27
"svelte": "./src/lib/index.ts"
28
-
}
28
+
},
29
+
"./theme.css": "./src/lib/theme.css"
29
30
},
30
31
"types": "./src/lib/index.ts",
31
32
"svelte": "./src/lib/index.ts",
···
38
39
".": {
39
40
"types": "./dist/types.d.ts",
40
41
"svelte": "./dist/index.js"
41
-
}
42
+
},
43
+
"./theme.css": "./dist/theme.css"
42
44
},
43
45
"types": "./dist/types.d.ts"
44
46
},
+2
-362
apps/docs/src/app.css
+2
-362
apps/docs/src/app.css
···
3
3
@plugin '@tailwindcss/typography';
4
4
@import 'tw-animate-css';
5
5
6
-
@source '../../../packages';
7
-
8
6
@custom-variant dark (&:is(.dark *));
9
7
10
-
@theme inline {
11
-
--color-base-50: var(--base-50);
12
-
--color-base-100: var(--base-100);
13
-
--color-base-200: var(--base-200);
14
-
--color-base-300: var(--base-300);
15
-
--color-base-400: var(--base-400);
16
-
--color-base-500: var(--base-500);
17
-
--color-base-600: var(--base-600);
18
-
--color-base-700: var(--base-700);
19
-
--color-base-800: var(--base-800);
20
-
--color-base-900: var(--base-900);
21
-
--color-base-950: var(--base-950);
22
-
23
-
--color-accent-50: var(--accent-50);
24
-
--color-accent-100: var(--accent-100);
25
-
--color-accent-200: var(--accent-200);
26
-
--color-accent-300: var(--accent-300);
27
-
--color-accent-400: var(--accent-400);
28
-
--color-accent-500: var(--accent-500);
29
-
--color-accent-600: var(--accent-600);
30
-
--color-accent-700: var(--accent-700);
31
-
--color-accent-800: var(--accent-800);
32
-
--color-accent-900: var(--accent-900);
33
-
--color-accent-950: var(--accent-950);
34
-
}
35
-
36
-
@layer base {
37
-
:root {
38
-
--accent-50: var(--color-pink-50);
39
-
--accent-100: var(--color-pink-100);
40
-
--accent-200: var(--color-pink-200);
41
-
--accent-300: var(--color-pink-300);
42
-
--accent-400: var(--color-pink-400);
43
-
--accent-500: var(--color-pink-500);
44
-
--accent-600: var(--color-pink-600);
45
-
--accent-700: var(--color-pink-700);
46
-
--accent-800: var(--color-pink-800);
47
-
--accent-900: var(--color-pink-900);
48
-
--accent-950: var(--color-pink-950);
49
-
50
-
--base-50: var(--color-stone-50);
51
-
--base-100: var(--color-stone-100);
52
-
--base-200: var(--color-stone-200);
53
-
--base-300: var(--color-stone-300);
54
-
--base-400: var(--color-stone-400);
55
-
--base-500: var(--color-stone-500);
56
-
--base-600: var(--color-stone-600);
57
-
--base-700: var(--color-stone-700);
58
-
--base-800: var(--color-stone-800);
59
-
--base-900: var(--color-stone-900);
60
-
--base-950: var(--color-stone-950);
61
-
}
62
-
63
-
.red {
64
-
--accent-50: var(--color-red-50);
65
-
--accent-100: var(--color-red-100);
66
-
--accent-200: var(--color-red-200);
67
-
--accent-300: var(--color-red-300);
68
-
--accent-400: var(--color-red-400);
69
-
--accent-500: var(--color-red-500);
70
-
--accent-600: var(--color-red-600);
71
-
--accent-700: var(--color-red-700);
72
-
--accent-800: var(--color-red-800);
73
-
--accent-900: var(--color-red-900);
74
-
--accent-950: var(--color-red-950);
75
-
}
76
-
77
-
.orange {
78
-
--accent-50: var(--color-orange-50);
79
-
--accent-100: var(--color-orange-100);
80
-
--accent-200: var(--color-orange-200);
81
-
--accent-300: var(--color-orange-300);
82
-
--accent-400: var(--color-orange-400);
83
-
--accent-500: var(--color-orange-500);
84
-
--accent-600: var(--color-orange-600);
85
-
--accent-700: var(--color-orange-700);
86
-
--accent-800: var(--color-orange-800);
87
-
--accent-900: var(--color-orange-900);
88
-
--accent-950: var(--color-orange-950);
89
-
}
90
-
91
-
.amber {
92
-
--accent-50: var(--color-amber-50);
93
-
--accent-100: var(--color-amber-100);
94
-
--accent-200: var(--color-amber-200);
95
-
--accent-300: var(--color-amber-300);
96
-
--accent-400: var(--color-amber-400);
97
-
--accent-500: var(--color-amber-500);
98
-
--accent-600: var(--color-amber-600);
99
-
--accent-700: var(--color-amber-700);
100
-
--accent-800: var(--color-amber-800);
101
-
--accent-900: var(--color-amber-900);
102
-
--accent-950: var(--color-amber-950);
103
-
}
104
-
105
-
.yellow {
106
-
--accent-50: var(--color-yellow-50);
107
-
--accent-100: var(--color-yellow-100);
108
-
--accent-200: var(--color-yellow-200);
109
-
--accent-300: var(--color-yellow-300);
110
-
--accent-400: var(--color-yellow-400);
111
-
--accent-500: var(--color-yellow-500);
112
-
--accent-600: var(--color-yellow-600);
113
-
--accent-700: var(--color-yellow-700);
114
-
--accent-800: var(--color-yellow-800);
115
-
--accent-900: var(--color-yellow-900);
116
-
--accent-950: var(--color-yellow-950);
117
-
}
118
-
119
-
.lime {
120
-
--accent-50: var(--color-lime-50);
121
-
--accent-100: var(--color-lime-100);
122
-
--accent-200: var(--color-lime-200);
123
-
--accent-300: var(--color-lime-300);
124
-
--accent-400: var(--color-lime-400);
125
-
--accent-500: var(--color-lime-500);
126
-
--accent-600: var(--color-lime-600);
127
-
--accent-700: var(--color-lime-700);
128
-
--accent-800: var(--color-lime-800);
129
-
--accent-900: var(--color-lime-900);
130
-
--accent-950: var(--color-lime-950);
131
-
}
132
-
133
-
.green {
134
-
--accent-50: var(--color-green-50);
135
-
--accent-100: var(--color-green-100);
136
-
--accent-200: var(--color-green-200);
137
-
--accent-300: var(--color-green-300);
138
-
--accent-400: var(--color-green-400);
139
-
--accent-500: var(--color-green-500);
140
-
--accent-600: var(--color-green-600);
141
-
--accent-700: var(--color-green-700);
142
-
--accent-800: var(--color-green-800);
143
-
--accent-900: var(--color-green-900);
144
-
--accent-950: var(--color-green-950);
145
-
}
146
-
147
-
.emerald {
148
-
--accent-50: var(--color-emerald-50);
149
-
--accent-100: var(--color-emerald-100);
150
-
--accent-200: var(--color-emerald-200);
151
-
--accent-300: var(--color-emerald-300);
152
-
--accent-400: var(--color-emerald-400);
153
-
--accent-500: var(--color-emerald-500);
154
-
--accent-600: var(--color-emerald-600);
155
-
--accent-700: var(--color-emerald-700);
156
-
--accent-800: var(--color-emerald-800);
157
-
--accent-900: var(--color-emerald-900);
158
-
--accent-950: var(--color-emerald-950);
159
-
}
160
-
161
-
.teal {
162
-
--accent-50: var(--color-teal-50);
163
-
--accent-100: var(--color-teal-100);
164
-
--accent-200: var(--color-teal-200);
165
-
--accent-300: var(--color-teal-300);
166
-
--accent-400: var(--color-teal-400);
167
-
--accent-500: var(--color-teal-500);
168
-
--accent-600: var(--color-teal-600);
169
-
--accent-700: var(--color-teal-700);
170
-
--accent-800: var(--color-teal-800);
171
-
--accent-900: var(--color-teal-900);
172
-
--accent-950: var(--color-teal-950);
173
-
}
174
-
175
-
.cyan {
176
-
--accent-50: var(--color-cyan-50);
177
-
--accent-100: var(--color-cyan-100);
178
-
--accent-200: var(--color-cyan-200);
179
-
--accent-300: var(--color-cyan-300);
180
-
--accent-400: var(--color-cyan-400);
181
-
--accent-500: var(--color-cyan-500);
182
-
--accent-600: var(--color-cyan-600);
183
-
--accent-700: var(--color-cyan-700);
184
-
--accent-800: var(--color-cyan-800);
185
-
--accent-900: var(--color-cyan-900);
186
-
--accent-950: var(--color-cyan-950);
187
-
}
188
-
189
-
.sky {
190
-
--accent-50: var(--color-sky-50);
191
-
--accent-100: var(--color-sky-100);
192
-
--accent-200: var(--color-sky-200);
193
-
--accent-300: var(--color-sky-300);
194
-
--accent-400: var(--color-sky-400);
195
-
--accent-500: var(--color-sky-500);
196
-
--accent-600: var(--color-sky-600);
197
-
--accent-700: var(--color-sky-700);
198
-
--accent-800: var(--color-sky-800);
199
-
--accent-900: var(--color-sky-900);
200
-
--accent-950: var(--color-sky-950);
201
-
}
202
-
.blue {
203
-
--accent-50: var(--color-blue-50);
204
-
--accent-100: var(--color-blue-100);
205
-
--accent-200: var(--color-blue-200);
206
-
--accent-300: var(--color-blue-300);
207
-
--accent-400: var(--color-blue-400);
208
-
--accent-500: var(--color-blue-500);
209
-
--accent-600: var(--color-blue-600);
210
-
--accent-700: var(--color-blue-700);
211
-
--accent-800: var(--color-blue-800);
212
-
--accent-900: var(--color-blue-900);
213
-
--accent-950: var(--color-blue-950);
214
-
}
215
-
216
-
.indigo {
217
-
--accent-50: var(--color-indigo-50);
218
-
--accent-100: var(--color-indigo-100);
219
-
--accent-200: var(--color-indigo-200);
220
-
--accent-300: var(--color-indigo-300);
221
-
--accent-400: var(--color-indigo-400);
222
-
--accent-500: var(--color-indigo-500);
223
-
--accent-600: var(--color-indigo-600);
224
-
--accent-700: var(--color-indigo-700);
225
-
--accent-800: var(--color-indigo-800);
226
-
--accent-900: var(--color-indigo-900);
227
-
--accent-950: var(--color-indigo-950);
228
-
}
229
-
230
-
.violet {
231
-
--accent-50: var(--color-violet-50);
232
-
--accent-100: var(--color-violet-100);
233
-
--accent-200: var(--color-violet-200);
234
-
--accent-300: var(--color-violet-300);
235
-
--accent-400: var(--color-violet-400);
236
-
--accent-500: var(--color-violet-500);
237
-
--accent-600: var(--color-violet-600);
238
-
--accent-700: var(--color-violet-700);
239
-
--accent-800: var(--color-violet-800);
240
-
--accent-900: var(--color-violet-900);
241
-
--accent-950: var(--color-violet-950);
242
-
}
243
-
244
-
.purple {
245
-
--accent-50: var(--color-purple-50);
246
-
--accent-100: var(--color-purple-100);
247
-
--accent-200: var(--color-purple-200);
248
-
--accent-300: var(--color-purple-300);
249
-
--accent-400: var(--color-purple-400);
250
-
--accent-500: var(--color-purple-500);
251
-
--accent-600: var(--color-purple-600);
252
-
--accent-700: var(--color-purple-700);
253
-
--accent-800: var(--color-purple-800);
254
-
--accent-900: var(--color-purple-900);
255
-
--accent-950: var(--color-purple-950);
256
-
}
257
-
258
-
.fuchsia {
259
-
--accent-50: var(--color-fuchsia-50);
260
-
--accent-100: var(--color-fuchsia-100);
261
-
--accent-200: var(--color-fuchsia-200);
262
-
--accent-300: var(--color-fuchsia-300);
263
-
--accent-400: var(--color-fuchsia-400);
264
-
--accent-500: var(--color-fuchsia-500);
265
-
--accent-600: var(--color-fuchsia-600);
266
-
--accent-700: var(--color-fuchsia-700);
267
-
--accent-800: var(--color-fuchsia-800);
268
-
--accent-900: var(--color-fuchsia-900);
269
-
--accent-950: var(--color-fuchsia-950);
270
-
}
271
-
272
-
.pink {
273
-
--accent-50: var(--color-pink-50);
274
-
--accent-100: var(--color-pink-100);
275
-
--accent-200: var(--color-pink-200);
276
-
--accent-300: var(--color-pink-300);
277
-
--accent-400: var(--color-pink-400);
278
-
--accent-500: var(--color-pink-500);
279
-
--accent-600: var(--color-pink-600);
280
-
--accent-700: var(--color-pink-700);
281
-
--accent-800: var(--color-pink-800);
282
-
--accent-900: var(--color-pink-900);
283
-
--accent-950: var(--color-pink-950);
284
-
}
285
-
286
-
.rose {
287
-
--accent-50: var(--color-rose-50);
288
-
--accent-100: var(--color-rose-100);
289
-
--accent-200: var(--color-rose-200);
290
-
--accent-300: var(--color-rose-300);
291
-
--accent-400: var(--color-rose-400);
292
-
--accent-500: var(--color-rose-500);
293
-
--accent-600: var(--color-rose-600);
294
-
--accent-700: var(--color-rose-700);
295
-
--accent-800: var(--color-rose-800);
296
-
--accent-900: var(--color-rose-900);
297
-
--accent-950: var(--color-rose-950);
298
-
}
299
-
300
-
.gray {
301
-
--base-50: var(--color-gray-50);
302
-
--base-100: var(--color-gray-100);
303
-
--base-200: var(--color-gray-200);
304
-
--base-300: var(--color-gray-300);
305
-
--base-400: var(--color-gray-400);
306
-
--base-500: var(--color-gray-500);
307
-
--base-600: var(--color-gray-600);
308
-
--base-700: var(--color-gray-700);
309
-
--base-800: var(--color-gray-800);
310
-
--base-900: var(--color-gray-900);
311
-
--base-950: var(--color-gray-950);
312
-
}
313
-
314
-
.zinc {
315
-
--base-50: var(--color-zinc-50);
316
-
--base-100: var(--color-zinc-100);
317
-
--base-200: var(--color-zinc-200);
318
-
--base-300: var(--color-zinc-300);
319
-
--base-400: var(--color-zinc-400);
320
-
--base-500: var(--color-zinc-500);
321
-
--base-600: var(--color-zinc-600);
322
-
--base-700: var(--color-zinc-700);
323
-
--base-800: var(--color-zinc-800);
324
-
--base-900: var(--color-zinc-900);
325
-
--base-950: var(--color-zinc-950);
326
-
}
327
-
328
-
.neutral {
329
-
--base-50: var(--color-neutral-50);
330
-
--base-100: var(--color-neutral-100);
331
-
--base-200: var(--color-neutral-200);
332
-
--base-300: var(--color-neutral-300);
333
-
--base-400: var(--color-neutral-400);
334
-
--base-500: var(--color-neutral-500);
335
-
--base-600: var(--color-neutral-600);
336
-
--base-700: var(--color-neutral-700);
337
-
--base-800: var(--color-neutral-800);
338
-
--base-900: var(--color-neutral-900);
339
-
--base-950: var(--color-neutral-950);
340
-
}
341
-
342
-
.stone {
343
-
--base-50: var(--color-stone-50);
344
-
--base-100: var(--color-stone-100);
345
-
--base-200: var(--color-stone-200);
346
-
--base-300: var(--color-stone-300);
347
-
--base-400: var(--color-stone-400);
348
-
--base-500: var(--color-stone-500);
349
-
--base-600: var(--color-stone-600);
350
-
--base-700: var(--color-stone-700);
351
-
--base-800: var(--color-stone-800);
352
-
--base-900: var(--color-stone-900);
353
-
--base-950: var(--color-stone-950);
354
-
}
355
-
356
-
.slate {
357
-
--base-50: var(--color-slate-50);
358
-
--base-100: var(--color-slate-100);
359
-
--base-200: var(--color-slate-200);
360
-
--base-300: var(--color-slate-300);
361
-
--base-400: var(--color-slate-400);
362
-
--base-500: var(--color-slate-500);
363
-
--base-600: var(--color-slate-600);
364
-
--base-700: var(--color-slate-700);
365
-
--base-800: var(--color-slate-800);
366
-
--base-900: var(--color-slate-900);
367
-
--base-950: var(--color-slate-950);
368
-
}
369
-
}
8
+
@source '../../../packages';
9
+
@import '../../../packages/core/src/lib/theme.css';
+1
-25
packages/colors/src/app.css
+1
-25
packages/colors/src/app.css
···
2
2
@plugin '@tailwindcss/forms';
3
3
@plugin '@tailwindcss/typography';
4
4
5
-
@theme {
6
-
--color-base-50: var(--color-zinc-50);
7
-
--color-base-100: var(--color-zinc-100);
8
-
--color-base-200: var(--color-zinc-200);
9
-
--color-base-300: var(--color-zinc-300);
10
-
--color-base-400: var(--color-zinc-400);
11
-
--color-base-500: var(--color-zinc-500);
12
-
--color-base-600: var(--color-zinc-600);
13
-
--color-base-700: var(--color-zinc-700);
14
-
--color-base-800: var(--color-zinc-800);
15
-
--color-base-900: var(--color-zinc-900);
16
-
--color-base-950: var(--color-zinc-950);
17
-
18
-
--color-accent-50: var(--color-pink-50);
19
-
--color-accent-100: var(--color-pink-100);
20
-
--color-accent-200: var(--color-pink-200);
21
-
--color-accent-300: var(--color-pink-300);
22
-
--color-accent-400: var(--color-pink-400);
23
-
--color-accent-500: var(--color-pink-500);
24
-
--color-accent-600: var(--color-pink-600);
25
-
--color-accent-700: var(--color-pink-700);
26
-
--color-accent-800: var(--color-pink-800);
27
-
--color-accent-900: var(--color-pink-900);
28
-
--color-accent-950: var(--color-pink-950);
29
-
}
5
+
@import '../../core/src/lib/theme.css';
+1
-25
packages/core/src/app.css
+1
-25
packages/core/src/app.css
···
2
2
@plugin '@tailwindcss/forms';
3
3
@plugin '@tailwindcss/typography';
4
4
5
-
@theme {
6
-
--color-base-50: var(--color-zinc-50);
7
-
--color-base-100: var(--color-zinc-100);
8
-
--color-base-200: var(--color-zinc-200);
9
-
--color-base-300: var(--color-zinc-300);
10
-
--color-base-400: var(--color-zinc-400);
11
-
--color-base-500: var(--color-zinc-500);
12
-
--color-base-600: var(--color-zinc-600);
13
-
--color-base-700: var(--color-zinc-700);
14
-
--color-base-800: var(--color-zinc-800);
15
-
--color-base-900: var(--color-zinc-900);
16
-
--color-base-950: var(--color-zinc-950);
17
-
18
-
--color-accent-50: var(--color-pink-50);
19
-
--color-accent-100: var(--color-pink-100);
20
-
--color-accent-200: var(--color-pink-200);
21
-
--color-accent-300: var(--color-pink-300);
22
-
--color-accent-400: var(--color-pink-400);
23
-
--color-accent-500: var(--color-pink-500);
24
-
--color-accent-600: var(--color-pink-600);
25
-
--color-accent-700: var(--color-pink-700);
26
-
--color-accent-800: var(--color-pink-800);
27
-
--color-accent-900: var(--color-pink-900);
28
-
--color-accent-950: var(--color-pink-950);
29
-
}
5
+
@import './lib/theme.css';
+461
packages/core/src/lib/theme.css
+461
packages/core/src/lib/theme.css
···
1
+
@source "../../";
2
+
@source "@foxui/social";
3
+
@source "@foxui/colors";
4
+
@source "@foxui/text";
5
+
@source "@foxui/time";
6
+
@source "@foxui/visual";
7
+
@source "@foxui/3d";
8
+
9
+
@theme inline {
10
+
--color-base-50: var(--base-50);
11
+
--color-base-100: var(--base-100);
12
+
--color-base-200: var(--base-200);
13
+
--color-base-300: var(--base-300);
14
+
--color-base-400: var(--base-400);
15
+
--color-base-500: var(--base-500);
16
+
--color-base-600: var(--base-600);
17
+
--color-base-700: var(--base-700);
18
+
--color-base-800: var(--base-800);
19
+
--color-base-900: var(--base-900);
20
+
--color-base-950: var(--base-950);
21
+
22
+
--color-accent-50: var(--accent-50);
23
+
--color-accent-100: var(--accent-100);
24
+
--color-accent-200: var(--accent-200);
25
+
--color-accent-300: var(--accent-300);
26
+
--color-accent-400: var(--accent-400);
27
+
--color-accent-500: var(--accent-500);
28
+
--color-accent-600: var(--accent-600);
29
+
--color-accent-700: var(--accent-700);
30
+
--color-accent-800: var(--accent-800);
31
+
--color-accent-900: var(--accent-900);
32
+
--color-accent-950: var(--accent-950);
33
+
}
34
+
35
+
@layer base {
36
+
:root {
37
+
--accent-50: var(--color-pink-50);
38
+
--accent-100: var(--color-pink-100);
39
+
--accent-200: var(--color-pink-200);
40
+
--accent-300: var(--color-pink-300);
41
+
--accent-400: var(--color-pink-400);
42
+
--accent-500: var(--color-pink-500);
43
+
--accent-600: var(--color-pink-600);
44
+
--accent-700: var(--color-pink-700);
45
+
--accent-800: var(--color-pink-800);
46
+
--accent-900: var(--color-pink-900);
47
+
--accent-950: var(--color-pink-950);
48
+
49
+
--base-50: var(--color-stone-50);
50
+
--base-100: var(--color-stone-100);
51
+
--base-200: var(--color-stone-200);
52
+
--base-300: var(--color-stone-300);
53
+
--base-400: var(--color-stone-400);
54
+
--base-500: var(--color-stone-500);
55
+
--base-600: var(--color-stone-600);
56
+
--base-700: var(--color-stone-700);
57
+
--base-800: var(--color-stone-800);
58
+
--base-900: var(--color-stone-900);
59
+
--base-950: var(--color-stone-950);
60
+
}
61
+
62
+
.red {
63
+
--accent-50: var(--color-red-50);
64
+
--accent-100: var(--color-red-100);
65
+
--accent-200: var(--color-red-200);
66
+
--accent-300: var(--color-red-300);
67
+
--accent-400: var(--color-red-400);
68
+
--accent-500: var(--color-red-500);
69
+
--accent-600: var(--color-red-600);
70
+
--accent-700: var(--color-red-700);
71
+
--accent-800: var(--color-red-800);
72
+
--accent-900: var(--color-red-900);
73
+
--accent-950: var(--color-red-950);
74
+
}
75
+
76
+
.orange {
77
+
--accent-50: var(--color-orange-50);
78
+
--accent-100: var(--color-orange-100);
79
+
--accent-200: var(--color-orange-200);
80
+
--accent-300: var(--color-orange-300);
81
+
--accent-400: var(--color-orange-400);
82
+
--accent-500: var(--color-orange-500);
83
+
--accent-600: var(--color-orange-600);
84
+
--accent-700: var(--color-orange-700);
85
+
--accent-800: var(--color-orange-800);
86
+
--accent-900: var(--color-orange-900);
87
+
--accent-950: var(--color-orange-950);
88
+
}
89
+
90
+
.amber {
91
+
--accent-50: var(--color-amber-50);
92
+
--accent-100: var(--color-amber-100);
93
+
--accent-200: var(--color-amber-200);
94
+
--accent-300: var(--color-amber-300);
95
+
--accent-400: var(--color-amber-400);
96
+
--accent-500: var(--color-amber-500);
97
+
--accent-600: var(--color-amber-600);
98
+
--accent-700: var(--color-amber-700);
99
+
--accent-800: var(--color-amber-800);
100
+
--accent-900: var(--color-amber-900);
101
+
--accent-950: var(--color-amber-950);
102
+
}
103
+
104
+
.yellow {
105
+
--accent-50: var(--color-yellow-50);
106
+
--accent-100: var(--color-yellow-100);
107
+
--accent-200: var(--color-yellow-200);
108
+
--accent-300: var(--color-yellow-300);
109
+
--accent-400: var(--color-yellow-400);
110
+
--accent-500: var(--color-yellow-500);
111
+
--accent-600: var(--color-yellow-600);
112
+
--accent-700: var(--color-yellow-700);
113
+
--accent-800: var(--color-yellow-800);
114
+
--accent-900: var(--color-yellow-900);
115
+
--accent-950: var(--color-yellow-950);
116
+
}
117
+
118
+
.lime {
119
+
--accent-50: var(--color-lime-50);
120
+
--accent-100: var(--color-lime-100);
121
+
--accent-200: var(--color-lime-200);
122
+
--accent-300: var(--color-lime-300);
123
+
--accent-400: var(--color-lime-400);
124
+
--accent-500: var(--color-lime-500);
125
+
--accent-600: var(--color-lime-600);
126
+
--accent-700: var(--color-lime-700);
127
+
--accent-800: var(--color-lime-800);
128
+
--accent-900: var(--color-lime-900);
129
+
--accent-950: var(--color-lime-950);
130
+
}
131
+
132
+
.green {
133
+
--accent-50: var(--color-green-50);
134
+
--accent-100: var(--color-green-100);
135
+
--accent-200: var(--color-green-200);
136
+
--accent-300: var(--color-green-300);
137
+
--accent-400: var(--color-green-400);
138
+
--accent-500: var(--color-green-500);
139
+
--accent-600: var(--color-green-600);
140
+
--accent-700: var(--color-green-700);
141
+
--accent-800: var(--color-green-800);
142
+
--accent-900: var(--color-green-900);
143
+
--accent-950: var(--color-green-950);
144
+
}
145
+
146
+
.emerald {
147
+
--accent-50: var(--color-emerald-50);
148
+
--accent-100: var(--color-emerald-100);
149
+
--accent-200: var(--color-emerald-200);
150
+
--accent-300: var(--color-emerald-300);
151
+
--accent-400: var(--color-emerald-400);
152
+
--accent-500: var(--color-emerald-500);
153
+
--accent-600: var(--color-emerald-600);
154
+
--accent-700: var(--color-emerald-700);
155
+
--accent-800: var(--color-emerald-800);
156
+
--accent-900: var(--color-emerald-900);
157
+
--accent-950: var(--color-emerald-950);
158
+
}
159
+
160
+
.teal {
161
+
--accent-50: var(--color-teal-50);
162
+
--accent-100: var(--color-teal-100);
163
+
--accent-200: var(--color-teal-200);
164
+
--accent-300: var(--color-teal-300);
165
+
--accent-400: var(--color-teal-400);
166
+
--accent-500: var(--color-teal-500);
167
+
--accent-600: var(--color-teal-600);
168
+
--accent-700: var(--color-teal-700);
169
+
--accent-800: var(--color-teal-800);
170
+
--accent-900: var(--color-teal-900);
171
+
--accent-950: var(--color-teal-950);
172
+
}
173
+
174
+
.cyan {
175
+
--accent-50: var(--color-cyan-50);
176
+
--accent-100: var(--color-cyan-100);
177
+
--accent-200: var(--color-cyan-200);
178
+
--accent-300: var(--color-cyan-300);
179
+
--accent-400: var(--color-cyan-400);
180
+
--accent-500: var(--color-cyan-500);
181
+
--accent-600: var(--color-cyan-600);
182
+
--accent-700: var(--color-cyan-700);
183
+
--accent-800: var(--color-cyan-800);
184
+
--accent-900: var(--color-cyan-900);
185
+
--accent-950: var(--color-cyan-950);
186
+
}
187
+
188
+
.sky {
189
+
--accent-50: var(--color-sky-50);
190
+
--accent-100: var(--color-sky-100);
191
+
--accent-200: var(--color-sky-200);
192
+
--accent-300: var(--color-sky-300);
193
+
--accent-400: var(--color-sky-400);
194
+
--accent-500: var(--color-sky-500);
195
+
--accent-600: var(--color-sky-600);
196
+
--accent-700: var(--color-sky-700);
197
+
--accent-800: var(--color-sky-800);
198
+
--accent-900: var(--color-sky-900);
199
+
--accent-950: var(--color-sky-950);
200
+
}
201
+
202
+
.blue {
203
+
--accent-50: var(--color-blue-50);
204
+
--accent-100: var(--color-blue-100);
205
+
--accent-200: var(--color-blue-200);
206
+
--accent-300: var(--color-blue-300);
207
+
--accent-400: var(--color-blue-400);
208
+
--accent-500: var(--color-blue-500);
209
+
--accent-600: var(--color-blue-600);
210
+
--accent-700: var(--color-blue-700);
211
+
--accent-800: var(--color-blue-800);
212
+
--accent-900: var(--color-blue-900);
213
+
--accent-950: var(--color-blue-950);
214
+
}
215
+
216
+
.indigo {
217
+
--accent-50: var(--color-indigo-50);
218
+
--accent-100: var(--color-indigo-100);
219
+
--accent-200: var(--color-indigo-200);
220
+
--accent-300: var(--color-indigo-300);
221
+
--accent-400: var(--color-indigo-400);
222
+
--accent-500: var(--color-indigo-500);
223
+
--accent-600: var(--color-indigo-600);
224
+
--accent-700: var(--color-indigo-700);
225
+
--accent-800: var(--color-indigo-800);
226
+
--accent-900: var(--color-indigo-900);
227
+
--accent-950: var(--color-indigo-950);
228
+
}
229
+
230
+
.violet {
231
+
--accent-50: var(--color-violet-50);
232
+
--accent-100: var(--color-violet-100);
233
+
--accent-200: var(--color-violet-200);
234
+
--accent-300: var(--color-violet-300);
235
+
--accent-400: var(--color-violet-400);
236
+
--accent-500: var(--color-violet-500);
237
+
--accent-600: var(--color-violet-600);
238
+
--accent-700: var(--color-violet-700);
239
+
--accent-800: var(--color-violet-800);
240
+
--accent-900: var(--color-violet-900);
241
+
--accent-950: var(--color-violet-950);
242
+
}
243
+
244
+
.purple {
245
+
--accent-50: var(--color-purple-50);
246
+
--accent-100: var(--color-purple-100);
247
+
--accent-200: var(--color-purple-200);
248
+
--accent-300: var(--color-purple-300);
249
+
--accent-400: var(--color-purple-400);
250
+
--accent-500: var(--color-purple-500);
251
+
--accent-600: var(--color-purple-600);
252
+
--accent-700: var(--color-purple-700);
253
+
--accent-800: var(--color-purple-800);
254
+
--accent-900: var(--color-purple-900);
255
+
--accent-950: var(--color-purple-950);
256
+
}
257
+
258
+
.fuchsia {
259
+
--accent-50: var(--color-fuchsia-50);
260
+
--accent-100: var(--color-fuchsia-100);
261
+
--accent-200: var(--color-fuchsia-200);
262
+
--accent-300: var(--color-fuchsia-300);
263
+
--accent-400: var(--color-fuchsia-400);
264
+
--accent-500: var(--color-fuchsia-500);
265
+
--accent-600: var(--color-fuchsia-600);
266
+
--accent-700: var(--color-fuchsia-700);
267
+
--accent-800: var(--color-fuchsia-800);
268
+
--accent-900: var(--color-fuchsia-900);
269
+
--accent-950: var(--color-fuchsia-950);
270
+
}
271
+
272
+
.pink {
273
+
--accent-50: var(--color-pink-50);
274
+
--accent-100: var(--color-pink-100);
275
+
--accent-200: var(--color-pink-200);
276
+
--accent-300: var(--color-pink-300);
277
+
--accent-400: var(--color-pink-400);
278
+
--accent-500: var(--color-pink-500);
279
+
--accent-600: var(--color-pink-600);
280
+
--accent-700: var(--color-pink-700);
281
+
--accent-800: var(--color-pink-800);
282
+
--accent-900: var(--color-pink-900);
283
+
--accent-950: var(--color-pink-950);
284
+
}
285
+
286
+
.rose {
287
+
--accent-50: var(--color-rose-50);
288
+
--accent-100: var(--color-rose-100);
289
+
--accent-200: var(--color-rose-200);
290
+
--accent-300: var(--color-rose-300);
291
+
--accent-400: var(--color-rose-400);
292
+
--accent-500: var(--color-rose-500);
293
+
--accent-600: var(--color-rose-600);
294
+
--accent-700: var(--color-rose-700);
295
+
--accent-800: var(--color-rose-800);
296
+
--accent-900: var(--color-rose-900);
297
+
--accent-950: var(--color-rose-950);
298
+
}
299
+
300
+
.gray {
301
+
--base-50: var(--color-gray-50);
302
+
--base-100: var(--color-gray-100);
303
+
--base-200: var(--color-gray-200);
304
+
--base-300: var(--color-gray-300);
305
+
--base-400: var(--color-gray-400);
306
+
--base-500: var(--color-gray-500);
307
+
--base-600: var(--color-gray-600);
308
+
--base-700: var(--color-gray-700);
309
+
--base-800: var(--color-gray-800);
310
+
--base-900: var(--color-gray-900);
311
+
--base-950: var(--color-gray-950);
312
+
}
313
+
314
+
.zinc {
315
+
--base-50: var(--color-zinc-50);
316
+
--base-100: var(--color-zinc-100);
317
+
--base-200: var(--color-zinc-200);
318
+
--base-300: var(--color-zinc-300);
319
+
--base-400: var(--color-zinc-400);
320
+
--base-500: var(--color-zinc-500);
321
+
--base-600: var(--color-zinc-600);
322
+
--base-700: var(--color-zinc-700);
323
+
--base-800: var(--color-zinc-800);
324
+
--base-900: var(--color-zinc-900);
325
+
--base-950: var(--color-zinc-950);
326
+
}
327
+
328
+
.neutral {
329
+
--base-50: var(--color-neutral-50);
330
+
--base-100: var(--color-neutral-100);
331
+
--base-200: var(--color-neutral-200);
332
+
--base-300: var(--color-neutral-300);
333
+
--base-400: var(--color-neutral-400);
334
+
--base-500: var(--color-neutral-500);
335
+
--base-600: var(--color-neutral-600);
336
+
--base-700: var(--color-neutral-700);
337
+
--base-800: var(--color-neutral-800);
338
+
--base-900: var(--color-neutral-900);
339
+
--base-950: var(--color-neutral-950);
340
+
}
341
+
342
+
.stone {
343
+
--base-50: var(--color-stone-50);
344
+
--base-100: var(--color-stone-100);
345
+
--base-200: var(--color-stone-200);
346
+
--base-300: var(--color-stone-300);
347
+
--base-400: var(--color-stone-400);
348
+
--base-500: var(--color-stone-500);
349
+
--base-600: var(--color-stone-600);
350
+
--base-700: var(--color-stone-700);
351
+
--base-800: var(--color-stone-800);
352
+
--base-900: var(--color-stone-900);
353
+
--base-950: var(--color-stone-950);
354
+
}
355
+
356
+
.slate {
357
+
--base-50: var(--color-slate-50);
358
+
--base-100: var(--color-slate-100);
359
+
--base-200: var(--color-slate-200);
360
+
--base-300: var(--color-slate-300);
361
+
--base-400: var(--color-slate-400);
362
+
--base-500: var(--color-slate-500);
363
+
--base-600: var(--color-slate-600);
364
+
--base-700: var(--color-slate-700);
365
+
--base-800: var(--color-slate-800);
366
+
--base-900: var(--color-slate-900);
367
+
--base-950: var(--color-slate-950);
368
+
}
369
+
370
+
.taupe {
371
+
--base-50: var(--color-taupe-50);
372
+
--base-100: var(--color-taupe-100);
373
+
--base-200: var(--color-taupe-200);
374
+
--base-300: var(--color-taupe-300);
375
+
--base-400: var(--color-taupe-400);
376
+
--base-500: var(--color-taupe-500);
377
+
--base-600: var(--color-taupe-600);
378
+
--base-700: var(--color-taupe-700);
379
+
--base-800: var(--color-taupe-800);
380
+
--base-900: var(--color-taupe-900);
381
+
--base-950: var(--color-taupe-950);
382
+
}
383
+
384
+
.mist {
385
+
--base-50: var(--color-mist-50);
386
+
--base-100: var(--color-mist-100);
387
+
--base-200: var(--color-mist-200);
388
+
--base-300: var(--color-mist-300);
389
+
--base-400: var(--color-mist-400);
390
+
--base-500: var(--color-mist-500);
391
+
--base-600: var(--color-mist-600);
392
+
--base-700: var(--color-mist-700);
393
+
--base-800: var(--color-mist-800);
394
+
--base-900: var(--color-mist-900);
395
+
--base-950: var(--color-mist-950);
396
+
}
397
+
398
+
.olive {
399
+
--base-50: var(--color-olive-50);
400
+
--base-100: var(--color-olive-100);
401
+
--base-200: var(--color-olive-200);
402
+
--base-300: var(--color-olive-300);
403
+
--base-400: var(--color-olive-400);
404
+
--base-500: var(--color-olive-500);
405
+
--base-600: var(--color-olive-600);
406
+
--base-700: var(--color-olive-700);
407
+
--base-800: var(--color-olive-800);
408
+
--base-900: var(--color-olive-900);
409
+
--base-950: var(--color-olive-950);
410
+
}
411
+
412
+
.mauve {
413
+
--base-50: var(--color-mauve-50);
414
+
--base-100: var(--color-mauve-100);
415
+
--base-200: var(--color-mauve-200);
416
+
--base-300: var(--color-mauve-300);
417
+
--base-400: var(--color-mauve-400);
418
+
--base-500: var(--color-mauve-500);
419
+
--base-600: var(--color-mauve-600);
420
+
--base-700: var(--color-mauve-700);
421
+
--base-800: var(--color-mauve-800);
422
+
--base-900: var(--color-mauve-900);
423
+
--base-950: var(--color-mauve-950);
424
+
}
425
+
}
426
+
427
+
@utility prose-base-color {
428
+
--tw-prose-body: var(--color-base-800);
429
+
--tw-prose-headings: var(--color-base-900);
430
+
--tw-prose-lead: var(--color-base-700);
431
+
--tw-prose-links: var(--color-base-900);
432
+
--tw-prose-bold: var(--color-base-900);
433
+
--tw-prose-counters: var(--color-base-600);
434
+
--tw-prose-bullets: var(--color-base-400);
435
+
--tw-prose-hr: var(--color-base-300);
436
+
--tw-prose-quotes: var(--color-base-900);
437
+
--tw-prose-quote-borders: var(--color-base-300);
438
+
--tw-prose-captions: var(--color-base-700);
439
+
--tw-prose-code: var(--color-base-900);
440
+
--tw-prose-pre-code: var(--color-base-100);
441
+
--tw-prose-pre-bg: var(--color-base-900);
442
+
--tw-prose-th-borders: var(--color-base-300);
443
+
--tw-prose-td-borders: var(--color-base-200);
444
+
445
+
--tw-prose-invert-body: var(--color-base-200);
446
+
--tw-prose-invert-headings: var(--color-white);
447
+
--tw-prose-invert-lead: var(--color-base-300);
448
+
--tw-prose-invert-links: var(--color-white);
449
+
--tw-prose-invert-bold: var(--color-white);
450
+
--tw-prose-invert-counters: var(--color-base-400);
451
+
--tw-prose-invert-bullets: var(--color-base-600);
452
+
--tw-prose-invert-hr: var(--color-base-700);
453
+
--tw-prose-invert-quotes: var(--color-base-100);
454
+
--tw-prose-invert-quote-borders: var(--color-base-700);
455
+
--tw-prose-invert-captions: var(--color-base-400);
456
+
--tw-prose-invert-code: var(--color-white);
457
+
--tw-prose-invert-pre-code: var(--color-base-300);
458
+
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
459
+
--tw-prose-invert-th-borders: var(--color-base-600);
460
+
--tw-prose-invert-td-borders: var(--color-base-700);
461
+
}
+7
-1
packages/colors/src/lib/components/select-theme/SelectTheme.svelte
+7
-1
packages/colors/src/lib/components/select-theme/SelectTheme.svelte
···
40
40
{ class: 'text-stone-500', label: 'stone' },
41
41
{ class: 'text-zinc-500', label: 'zinc' },
42
42
{ class: 'text-neutral-500', label: 'neutral' },
43
-
{ class: 'text-slate-500', label: 'slate' }
43
+
{ class: 'text-slate-500', label: 'slate' },
44
+
{ class: 'text-olive-500', label: 'olive' },
45
+
{ class: 'text-mauve-500', label: 'mauve' },
46
+
{ class: 'text-mist-500', label: 'mist' },
47
+
{ class: 'text-taupe-500', label: 'taupe' }
44
48
];
45
49
46
50
let {
···
120
124
121
125
onchanged?.(color.label, previous.label);
122
126
}}
127
+
128
+
class="w-64"
123
129
/>
124
130
{/if}
+1
-1
packages/core/src/lib/components/modal/Modal.svelte
+1
-1
packages/core/src/lib/components/modal/Modal.svelte
+2
-67
packages/core/src/lib/components/prose/Prose.svelte
+2
-67
packages/core/src/lib/components/prose/Prose.svelte
···
37
37
}: ProseProps = $props();
38
38
</script>
39
39
40
-
<div bind:this={ref} class={cn(proseVariants({ size }), className)} {...restProps}>
40
+
<div bind:this={ref} class={cn("prose-base-color", proseVariants({ size }), className)} {...restProps}>
41
41
{@render children?.()}
42
-
</div>
43
-
44
-
<!-- TODO: this is not actually used right now, we have to fix that -->
45
-
<style>
46
-
.prose-base-colors {
47
-
--tw-prose-body: var(--color-base-700);
48
-
--tw-prose-headings: var(--color-base-900);
49
-
--tw-prose-lead: var(--color-base-600);
50
-
--tw-prose-links: var(--color-base-900);
51
-
--tw-prose-bold: var(--color-base-900);
52
-
--tw-prose-counters: var(--color-base-500);
53
-
--tw-prose-bullets: var(--color-base-300);
54
-
--tw-prose-hr: var(--color-base-200);
55
-
--tw-prose-quotes: var(--color-base-900);
56
-
--tw-prose-quote-borders: var(--color-base-200);
57
-
--tw-prose-captions: var(--color-base-500);
58
-
--tw-prose-kbd: var(--color-base-900);
59
-
--tw-prose-kbd-shadows: var(--color-base-900);
60
-
--tw-prose-code: var(--color-base-900);
61
-
--tw-prose-pre-code: var(--color-base-200);
62
-
--tw-prose-pre-bg: var(--color-base-800);
63
-
--tw-prose-th-borders: var(--color-base-300);
64
-
--tw-prose-td-borders: var(--color-base-200);
65
-
66
-
67
-
--tw-prose-invert-body: var(--color-base-300);
68
-
--tw-prose-invert-headings: var(--color-white);
69
-
--tw-prose-invert-lead: var(--color-base-400);
70
-
--tw-prose-invert-links: var(--color-white);
71
-
--tw-prose-invert-bold: var(--color-white);
72
-
--tw-prose-invert-counters: var(--color-base-400);
73
-
--tw-prose-invert-bullets: var(--color-base-600);
74
-
--tw-prose-invert-hr: var(--color-base-700);
75
-
--tw-prose-invert-quotes: var(--color-base-100);
76
-
--tw-prose-invert-quote-borders: var(--color-base-700);
77
-
--tw-prose-invert-captions: var(--color-base-400);
78
-
--tw-prose-invert-kbd: var(--color-white);
79
-
--tw-prose-invert-kbd-shadows: var(--color-white);
80
-
--tw-prose-invert-code: var(--color-white);
81
-
--tw-prose-invert-pre-code: var(--color-base-300);
82
-
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
83
-
--tw-prose-invert-th-borders: var(--color-base-600);
84
-
--tw-prose-invert-td-borders: var(--color-base-700);
85
-
}
86
-
87
-
.prose-base-colors-dark {
88
-
--tw-prose-invert-body: var(--color-base-300);
89
-
--tw-prose-invert-headings: var(--color-white);
90
-
--tw-prose-invert-lead: var(--color-base-400);
91
-
--tw-prose-invert-links: var(--color-white);
92
-
--tw-prose-invert-bold: var(--color-white);
93
-
--tw-prose-invert-counters: var(--color-base-400);
94
-
--tw-prose-invert-bullets: var(--color-base-600);
95
-
--tw-prose-invert-hr: var(--color-base-700);
96
-
--tw-prose-invert-quotes: var(--color-base-100);
97
-
--tw-prose-invert-quote-borders: var(--color-base-700);
98
-
--tw-prose-invert-captions: var(--color-base-400);
99
-
--tw-prose-invert-kbd: var(--color-white);
100
-
--tw-prose-invert-kbd-shadows: var(--color-white);
101
-
--tw-prose-invert-code: var(--color-white);
102
-
--tw-prose-invert-pre-code: var(--color-base-300);
103
-
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
104
-
--tw-prose-invert-th-borders: var(--color-base-600);
105
-
--tw-prose-invert-td-borders: var(--color-base-700);
106
-
}
107
-
</style>
42
+
</div>
+2
-1
packages/core/src/lib/components/toggle/toggle.svelte
+2
-1
packages/core/src/lib/components/toggle/toggle.svelte
···
8
8
default: 'bg-base-200/20 dark:bg-base-800/20'
9
9
},
10
10
size: {
11
-
default: 'h-10 min-w-10 px-3 [&_svg]:size-4',
11
+
xs: 'h-7 min-w-7 px-1.5 [&_svg]:size-3 text-xs rounded-xl',
12
12
sm: 'h-9 min-w-9 px-2.5 [&_svg]:size-3.5',
13
+
default: 'h-10 min-w-10 px-3 [&_svg]:size-4',
13
14
lg: 'h-11 min-w-11 px-4 [&_svg]:size-5',
14
15
}
15
16
},
+2
-2
apps/docs/src/lib/docs/core/toggle-group/api.ts
+2
-2
apps/docs/src/lib/docs/core/toggle-group/api.ts
···
25
25
default: "'default'"
26
26
},
27
27
size: {
28
-
type: { type: 'enum', definition: "'default' | 'sm' | 'lg'" },
28
+
type: { type: 'enum', definition: "'xs' | 'default' | 'sm' | 'lg'" },
29
29
description: 'The size of the toggle group items.',
30
30
default: "'default'"
31
31
},
···
75
75
description: 'Override the visual variant for this specific item. Falls back to the parent ToggleGroup variant.'
76
76
},
77
77
size: {
78
-
type: { type: 'enum', definition: "'default' | 'sm' | 'lg'" },
78
+
type: { type: 'enum', definition: "'xs' | 'default' | 'sm' | 'lg'" },
79
79
description: 'Override the size for this specific item. Falls back to the parent ToggleGroup size.'
80
80
},
81
81
disabled: {
+13
apps/docs/src/lib/docs/core/toggle/Example.svelte
+13
apps/docs/src/lib/docs/core/toggle/Example.svelte
···
18
18
/>
19
19
</svg>
20
20
</Toggle>
21
+
<Toggle size="xs"
22
+
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
23
+
<path
24
+
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
25
+
/>
26
+
<path
27
+
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
28
+
/>
29
+
<path
30
+
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
31
+
/>
32
+
</svg>
33
+
</Toggle>
21
34
<Toggle size="sm"
22
35
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
23
36
<path
+1
-1
apps/docs/src/lib/docs/core/toggle/api.ts
+1
-1
apps/docs/src/lib/docs/core/toggle/api.ts
+3
-29
apps/docs/src/routes/(main)/docs/quick-start/QuickStart.md
+3
-29
apps/docs/src/routes/(main)/docs/quick-start/QuickStart.md
···
20
20
npm install @foxui/core
21
21
```
22
22
23
-
## 3. Set theme variables in your `app.css`
23
+
## 3. Set up your `app.css`
24
24
25
-
You can change the colors to your liking.
25
+
Add the following to your `app.css` to import the theme (which includes the base/accent color system and all color classes):
26
26
27
27
```css
28
-
@source "../node_modules/@foxui";
29
-
30
28
@custom-variant dark (&:is(.dark *));
31
29
32
-
@theme {
33
-
--color-base-50: var(--color-zinc-50);
34
-
--color-base-100: var(--color-zinc-100);
35
-
--color-base-200: var(--color-zinc-200);
36
-
--color-base-300: var(--color-zinc-300);
37
-
--color-base-400: var(--color-zinc-400);
38
-
--color-base-500: var(--color-zinc-500);
39
-
--color-base-600: var(--color-zinc-600);
40
-
--color-base-700: var(--color-zinc-700);
41
-
--color-base-800: var(--color-zinc-800);
42
-
--color-base-900: var(--color-zinc-900);
43
-
--color-base-950: var(--color-zinc-950);
44
-
45
-
--color-accent-50: var(--color-emerald-50);
46
-
--color-accent-100: var(--color-emerald-100);
47
-
--color-accent-200: var(--color-emerald-200);
48
-
--color-accent-300: var(--color-emerald-300);
49
-
--color-accent-400: var(--color-emerald-400);
50
-
--color-accent-500: var(--color-emerald-500);
51
-
--color-accent-600: var(--color-emerald-600);
52
-
--color-accent-700: var(--color-emerald-700);
53
-
--color-accent-800: var(--color-emerald-800);
54
-
--color-accent-900: var(--color-emerald-900);
55
-
--color-accent-950: var(--color-emerald-950);
56
-
}
30
+
@import '@foxui/core/theme.css';
57
31
```
58
32
59
33
## 4. Use a component