Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4 flo-bit.dev/ui-kit
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513@import '@fontsource-variable/geist';@import '@fontsource-variable/geist-mono';
@source "../../";@source "@foxui/social";@source "@foxui/colors";@source "@foxui/text";@source "@foxui/time";@source "@foxui/visual";@source "@foxui/3d";
@theme inline { --color-base-50: var(--base-50); --color-base-100: var(--base-100); --color-base-200: var(--base-200); --color-base-300: var(--base-300); --color-base-400: var(--base-400); --color-base-500: var(--base-500); --color-base-600: var(--base-600); --color-base-700: var(--base-700); --color-base-800: var(--base-800); --color-base-900: var(--base-900); --color-base-950: var(--base-950);
--color-accent-50: var(--accent-50); --color-accent-100: var(--accent-100); --color-accent-200: var(--accent-200); --color-accent-300: var(--accent-300); --color-accent-400: var(--accent-400); --color-accent-500: var(--accent-500); --color-accent-600: var(--accent-600); --color-accent-700: var(--accent-700); --color-accent-800: var(--accent-800); --color-accent-900: var(--accent-900); --color-accent-950: var(--accent-950);
--radius-ui: var(--ui-radius); --radius-ui-lg: var(--ui-radius-lg); --radius-ui-sm: var(--ui-radius-sm);
--font-sans: var(--ui-font-sans); --font-mono: var(--ui-font-mono);}
@layer base { body { @apply bg-base-100 text-base-950 dark:bg-base-900 dark:text-base-50 font-sans; }
:root { --accent-50: var(--color-pink-50); --accent-100: var(--color-pink-100); --accent-200: var(--color-pink-200); --accent-300: var(--color-pink-300); --accent-400: var(--color-pink-400); --accent-500: var(--color-pink-500); --accent-600: var(--color-pink-600); --accent-700: var(--color-pink-700); --accent-800: var(--color-pink-800); --accent-900: var(--color-pink-900); --accent-950: var(--color-pink-950);
--base-50: var(--color-stone-50); --base-100: var(--color-stone-100); --base-200: var(--color-stone-200); --base-300: var(--color-stone-300); --base-400: var(--color-stone-400); --base-500: var(--color-stone-500); --base-600: var(--color-stone-600); --base-700: var(--color-stone-700); --base-800: var(--color-stone-800); --base-900: var(--color-stone-900); --base-950: var(--color-stone-950);
--ui-radius: 1rem; --ui-radius-lg: 1.25rem; --ui-radius-sm: 0.75rem;
--ui-font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --ui-font-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.red { --accent-50: var(--color-red-50); --accent-100: var(--color-red-100); --accent-200: var(--color-red-200); --accent-300: var(--color-red-300); --accent-400: var(--color-red-400); --accent-500: var(--color-red-500); --accent-600: var(--color-red-600); --accent-700: var(--color-red-700); --accent-800: var(--color-red-800); --accent-900: var(--color-red-900); --accent-950: var(--color-red-950); }
.orange { --accent-50: var(--color-orange-50); --accent-100: var(--color-orange-100); --accent-200: var(--color-orange-200); --accent-300: var(--color-orange-300); --accent-400: var(--color-orange-400); --accent-500: var(--color-orange-500); --accent-600: var(--color-orange-600); --accent-700: var(--color-orange-700); --accent-800: var(--color-orange-800); --accent-900: var(--color-orange-900); --accent-950: var(--color-orange-950); }
.amber { --accent-50: var(--color-amber-50); --accent-100: var(--color-amber-100); --accent-200: var(--color-amber-200); --accent-300: var(--color-amber-300); --accent-400: var(--color-amber-400); --accent-500: var(--color-amber-500); --accent-600: var(--color-amber-600); --accent-700: var(--color-amber-700); --accent-800: var(--color-amber-800); --accent-900: var(--color-amber-900); --accent-950: var(--color-amber-950); }
.yellow { --accent-50: var(--color-yellow-50); --accent-100: var(--color-yellow-100); --accent-200: var(--color-yellow-200); --accent-300: var(--color-yellow-300); --accent-400: var(--color-yellow-400); --accent-500: var(--color-yellow-500); --accent-600: var(--color-yellow-600); --accent-700: var(--color-yellow-700); --accent-800: var(--color-yellow-800); --accent-900: var(--color-yellow-900); --accent-950: var(--color-yellow-950); }
.lime { --accent-50: var(--color-lime-50); --accent-100: var(--color-lime-100); --accent-200: var(--color-lime-200); --accent-300: var(--color-lime-300); --accent-400: var(--color-lime-400); --accent-500: var(--color-lime-500); --accent-600: var(--color-lime-600); --accent-700: var(--color-lime-700); --accent-800: var(--color-lime-800); --accent-900: var(--color-lime-900); --accent-950: var(--color-lime-950); }
.green { --accent-50: var(--color-green-50); --accent-100: var(--color-green-100); --accent-200: var(--color-green-200); --accent-300: var(--color-green-300); --accent-400: var(--color-green-400); --accent-500: var(--color-green-500); --accent-600: var(--color-green-600); --accent-700: var(--color-green-700); --accent-800: var(--color-green-800); --accent-900: var(--color-green-900); --accent-950: var(--color-green-950); }
.emerald { --accent-50: var(--color-emerald-50); --accent-100: var(--color-emerald-100); --accent-200: var(--color-emerald-200); --accent-300: var(--color-emerald-300); --accent-400: var(--color-emerald-400); --accent-500: var(--color-emerald-500); --accent-600: var(--color-emerald-600); --accent-700: var(--color-emerald-700); --accent-800: var(--color-emerald-800); --accent-900: var(--color-emerald-900); --accent-950: var(--color-emerald-950); }
.teal { --accent-50: var(--color-teal-50); --accent-100: var(--color-teal-100); --accent-200: var(--color-teal-200); --accent-300: var(--color-teal-300); --accent-400: var(--color-teal-400); --accent-500: var(--color-teal-500); --accent-600: var(--color-teal-600); --accent-700: var(--color-teal-700); --accent-800: var(--color-teal-800); --accent-900: var(--color-teal-900); --accent-950: var(--color-teal-950); }
.cyan { --accent-50: var(--color-cyan-50); --accent-100: var(--color-cyan-100); --accent-200: var(--color-cyan-200); --accent-300: var(--color-cyan-300); --accent-400: var(--color-cyan-400); --accent-500: var(--color-cyan-500); --accent-600: var(--color-cyan-600); --accent-700: var(--color-cyan-700); --accent-800: var(--color-cyan-800); --accent-900: var(--color-cyan-900); --accent-950: var(--color-cyan-950); }
.sky { --accent-50: var(--color-sky-50); --accent-100: var(--color-sky-100); --accent-200: var(--color-sky-200); --accent-300: var(--color-sky-300); --accent-400: var(--color-sky-400); --accent-500: var(--color-sky-500); --accent-600: var(--color-sky-600); --accent-700: var(--color-sky-700); --accent-800: var(--color-sky-800); --accent-900: var(--color-sky-900); --accent-950: var(--color-sky-950); }
.blue { --accent-50: var(--color-blue-50); --accent-100: var(--color-blue-100); --accent-200: var(--color-blue-200); --accent-300: var(--color-blue-300); --accent-400: var(--color-blue-400); --accent-500: var(--color-blue-500); --accent-600: var(--color-blue-600); --accent-700: var(--color-blue-700); --accent-800: var(--color-blue-800); --accent-900: var(--color-blue-900); --accent-950: var(--color-blue-950); }
.indigo { --accent-50: var(--color-indigo-50); --accent-100: var(--color-indigo-100); --accent-200: var(--color-indigo-200); --accent-300: var(--color-indigo-300); --accent-400: var(--color-indigo-400); --accent-500: var(--color-indigo-500); --accent-600: var(--color-indigo-600); --accent-700: var(--color-indigo-700); --accent-800: var(--color-indigo-800); --accent-900: var(--color-indigo-900); --accent-950: var(--color-indigo-950); }
.violet { --accent-50: var(--color-violet-50); --accent-100: var(--color-violet-100); --accent-200: var(--color-violet-200); --accent-300: var(--color-violet-300); --accent-400: var(--color-violet-400); --accent-500: var(--color-violet-500); --accent-600: var(--color-violet-600); --accent-700: var(--color-violet-700); --accent-800: var(--color-violet-800); --accent-900: var(--color-violet-900); --accent-950: var(--color-violet-950); }
.purple { --accent-50: var(--color-purple-50); --accent-100: var(--color-purple-100); --accent-200: var(--color-purple-200); --accent-300: var(--color-purple-300); --accent-400: var(--color-purple-400); --accent-500: var(--color-purple-500); --accent-600: var(--color-purple-600); --accent-700: var(--color-purple-700); --accent-800: var(--color-purple-800); --accent-900: var(--color-purple-900); --accent-950: var(--color-purple-950); }
.fuchsia { --accent-50: var(--color-fuchsia-50); --accent-100: var(--color-fuchsia-100); --accent-200: var(--color-fuchsia-200); --accent-300: var(--color-fuchsia-300); --accent-400: var(--color-fuchsia-400); --accent-500: var(--color-fuchsia-500); --accent-600: var(--color-fuchsia-600); --accent-700: var(--color-fuchsia-700); --accent-800: var(--color-fuchsia-800); --accent-900: var(--color-fuchsia-900); --accent-950: var(--color-fuchsia-950); }
.pink { --accent-50: var(--color-pink-50); --accent-100: var(--color-pink-100); --accent-200: var(--color-pink-200); --accent-300: var(--color-pink-300); --accent-400: var(--color-pink-400); --accent-500: var(--color-pink-500); --accent-600: var(--color-pink-600); --accent-700: var(--color-pink-700); --accent-800: var(--color-pink-800); --accent-900: var(--color-pink-900); --accent-950: var(--color-pink-950); }
.rose { --accent-50: var(--color-rose-50); --accent-100: var(--color-rose-100); --accent-200: var(--color-rose-200); --accent-300: var(--color-rose-300); --accent-400: var(--color-rose-400); --accent-500: var(--color-rose-500); --accent-600: var(--color-rose-600); --accent-700: var(--color-rose-700); --accent-800: var(--color-rose-800); --accent-900: var(--color-rose-900); --accent-950: var(--color-rose-950); }
.gray { --base-50: var(--color-gray-50); --base-100: var(--color-gray-100); --base-200: var(--color-gray-200); --base-300: var(--color-gray-300); --base-400: var(--color-gray-400); --base-500: var(--color-gray-500); --base-600: var(--color-gray-600); --base-700: var(--color-gray-700); --base-800: var(--color-gray-800); --base-900: var(--color-gray-900); --base-950: var(--color-gray-950); }
.zinc { --base-50: var(--color-zinc-50); --base-100: var(--color-zinc-100); --base-200: var(--color-zinc-200); --base-300: var(--color-zinc-300); --base-400: var(--color-zinc-400); --base-500: var(--color-zinc-500); --base-600: var(--color-zinc-600); --base-700: var(--color-zinc-700); --base-800: var(--color-zinc-800); --base-900: var(--color-zinc-900); --base-950: var(--color-zinc-950); }
.neutral { --base-50: var(--color-neutral-50); --base-100: var(--color-neutral-100); --base-200: var(--color-neutral-200); --base-300: var(--color-neutral-300); --base-400: var(--color-neutral-400); --base-500: var(--color-neutral-500); --base-600: var(--color-neutral-600); --base-700: var(--color-neutral-700); --base-800: var(--color-neutral-800); --base-900: var(--color-neutral-900); --base-950: var(--color-neutral-950); }
.stone { --base-50: var(--color-stone-50); --base-100: var(--color-stone-100); --base-200: var(--color-stone-200); --base-300: var(--color-stone-300); --base-400: var(--color-stone-400); --base-500: var(--color-stone-500); --base-600: var(--color-stone-600); --base-700: var(--color-stone-700); --base-800: var(--color-stone-800); --base-900: var(--color-stone-900); --base-950: var(--color-stone-950); }
.slate { --base-50: var(--color-slate-50); --base-100: var(--color-slate-100); --base-200: var(--color-slate-200); --base-300: var(--color-slate-300); --base-400: var(--color-slate-400); --base-500: var(--color-slate-500); --base-600: var(--color-slate-600); --base-700: var(--color-slate-700); --base-800: var(--color-slate-800); --base-900: var(--color-slate-900); --base-950: var(--color-slate-950); }
.taupe { --base-50: var(--color-taupe-50); --base-100: var(--color-taupe-100); --base-200: var(--color-taupe-200); --base-300: var(--color-taupe-300); --base-400: var(--color-taupe-400); --base-500: var(--color-taupe-500); --base-600: var(--color-taupe-600); --base-700: var(--color-taupe-700); --base-800: var(--color-taupe-800); --base-900: var(--color-taupe-900); --base-950: var(--color-taupe-950); }
.mist { --base-50: var(--color-mist-50); --base-100: var(--color-mist-100); --base-200: var(--color-mist-200); --base-300: var(--color-mist-300); --base-400: var(--color-mist-400); --base-500: var(--color-mist-500); --base-600: var(--color-mist-600); --base-700: var(--color-mist-700); --base-800: var(--color-mist-800); --base-900: var(--color-mist-900); --base-950: var(--color-mist-950); }
.olive { --base-50: var(--color-olive-50); --base-100: var(--color-olive-100); --base-200: var(--color-olive-200); --base-300: var(--color-olive-300); --base-400: var(--color-olive-400); --base-500: var(--color-olive-500); --base-600: var(--color-olive-600); --base-700: var(--color-olive-700); --base-800: var(--color-olive-800); --base-900: var(--color-olive-900); --base-950: var(--color-olive-950); }
.mauve { --base-50: var(--color-mauve-50); --base-100: var(--color-mauve-100); --base-200: var(--color-mauve-200); --base-300: var(--color-mauve-300); --base-400: var(--color-mauve-400); --base-500: var(--color-mauve-500); --base-600: var(--color-mauve-600); --base-700: var(--color-mauve-700); --base-800: var(--color-mauve-800); --base-900: var(--color-mauve-900); --base-950: var(--color-mauve-950); }
.sharp { --ui-radius: 0.375rem; --ui-radius-lg: 0.5rem; --ui-radius-sm: 0.25rem; }
.pill { --ui-radius: 9999px; --ui-radius-lg: 9999px; --ui-radius-sm: 9999px; }
.geist { --ui-font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --ui-font-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.system-font { --ui-font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.serif-font { --ui-font-sans: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; }
.mono-font { --ui-font-sans: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }}
@utility prose-base-color { --tw-prose-body: var(--color-base-800); --tw-prose-headings: var(--color-base-900); --tw-prose-lead: var(--color-base-700); --tw-prose-links: var(--color-base-900); --tw-prose-bold: var(--color-base-900); --tw-prose-counters: var(--color-base-600); --tw-prose-bullets: var(--color-base-400); --tw-prose-hr: var(--color-base-300); --tw-prose-quotes: var(--color-base-900); --tw-prose-quote-borders: var(--color-base-300); --tw-prose-captions: var(--color-base-700); --tw-prose-code: var(--color-base-900); --tw-prose-pre-code: var(--color-base-100); --tw-prose-pre-bg: var(--color-base-900); --tw-prose-th-borders: var(--color-base-300); --tw-prose-td-borders: var(--color-base-200);
--tw-prose-invert-body: var(--color-base-200); --tw-prose-invert-headings: var(--color-white); --tw-prose-invert-lead: var(--color-base-300); --tw-prose-invert-links: var(--color-white); --tw-prose-invert-bold: var(--color-white); --tw-prose-invert-counters: var(--color-base-400); --tw-prose-invert-bullets: var(--color-base-600); --tw-prose-invert-hr: var(--color-base-700); --tw-prose-invert-quotes: var(--color-base-100); --tw-prose-invert-quote-borders: var(--color-base-700); --tw-prose-invert-captions: var(--color-base-400); --tw-prose-invert-code: var(--color-white); --tw-prose-invert-pre-code: var(--color-base-300); --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-invert-th-borders: var(--color-base-600); --tw-prose-invert-td-borders: var(--color-base-700);}