[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
bump version, update philosophy
+2
-30
+1
-1
package.json
+1
-1
package.json
+1
-29
src/routes/docs/philosophy/Philosophy.md
+1
-29
src/routes/docs/philosophy/Philosophy.md
···
22
22
- base color (usually one of the 5 tailwind gray tones)
23
23
- accent color (usually one of the not-gray tailwind colors)
24
24
25
-
Set those colors in your `app.css` file like so:
26
-
27
-
```css
28
-
@theme {
29
-
--color-base-50: var(--color-gray-50);
30
-
--color-base-100: var(--color-gray-100);
31
-
--color-base-200: var(--color-gray-200);
32
-
--color-base-300: var(--color-gray-300);
33
-
--color-base-400: var(--color-gray-400);
34
-
--color-base-500: var(--color-gray-500);
35
-
--color-base-600: var(--color-gray-600);
36
-
--color-base-700: var(--color-gray-700);
37
-
--color-base-800: var(--color-gray-800);
38
-
--color-base-900: var(--color-gray-900);
39
-
--color-base-950: var(--color-gray-950);
40
-
41
-
--color-accent-50: var(--color-blue-50);
42
-
--color-accent-100: var(--color-blue-100);
43
-
--color-accent-200: var(--color-blue-200);
44
-
--color-accent-300: var(--color-blue-300);
45
-
--color-accent-400: var(--color-blue-400);
46
-
--color-accent-500: var(--color-blue-500);
47
-
--color-accent-600: var(--color-blue-600);
48
-
--color-accent-700: var(--color-blue-700);
49
-
--color-accent-800: var(--color-blue-800);
50
-
--color-accent-900: var(--color-blue-900);
51
-
--color-accent-950: var(--color-blue-950);
52
-
}
53
-
```
25
+
You can try it out by setting the current theme colors in the navbar.