flotilla/src/lib/components/theme.css

43 lines
1.5 KiB
CSS
Raw Normal View History

/* ============================================================================
Design-system entry point (imported once, in src/routes/+layout.svelte).
tailwindcss — framework + our @theme token registration (via base.css)
base.css — theme-independent structure (components, utilities, base)
clay.css — clay theme token values ([data-fl-theme="clay"] + dark)
flat.css — flat theme token values ([data-fl-theme="flat"] + dark)
navy.css — navy theme token values ([data-fl-theme="navy"] + dark)
Every theme is selected the same way, by its own data-fl-theme value — there
is no default, so VITE_THEME (→ FL_THEME, stamped on <body> + the app root)
must be set. Themes are mutually exclusive, so import order doesn't matter.
Add a theme = add a token file + an @import. ============================== */
@import "tailwindcss";
@import "./base.css";
@import "./clay.css";
@import "./flat.css";
@import "./navy.css";
/* per-component styles (one file per component class family) */
@import "./badge.css";
@import "./button.css";
@import "./card.css";
@import "./card-button.css";
@import "./chat.css";
@import "./content-search.css";
@import "./controls.css";
@import "./divider.css";
@import "./input.css";
@import "./join.css";
@import "./link.css";
@import "./menu.css";
@import "./page.css";
@import "./primary-nav.css";
@import "./room.css";
@import "./spinner.css";
@import "./secondary-nav.css";
@import "./space-menu.css";
@import "./tooltip.css";
@config "../../../tailwind.config.js";