@kolkrabbi/kol-theme

Brand-neutral tokens + base CSS for the KOL (Kolkrabbi) design system. The cascade layer every other KOL package and consumer builds on — design tokens, color/opacity scales, typography, and the canonical kol-* component classes.

Install

npm i @kolkrabbi/kol-theme

Use

In a Vite + Tailwind v4 app, import the barrel after Tailwind:

@import "tailwindcss";
@import "@kolkrabbi/kol-theme";            /* everything, domain packs included */
/* or the app tier only — chess · workshop · foundry · dashboards · styleguide
 * are 23 % of the theme, and an app that renders none of them need not ship them:
 * @import "@kolkrabbi/kol-theme/core";
 * @import "@kolkrabbi/kol-theme/kol-components-dashboards.css" layer(components);  ← a pack you do render, after it */

Cascade order is load-bearing — kol-theme must come after Tailwind so its component classes and tokens resolve correctly. Individual files are also reachable (@kolkrabbi/kol-theme/kol-color.css, etc.) if you need finer control.

All KOL rule CSS lives in the components cascade layer, so your Tailwind utility classes always win over KOL chrome (<Input className="hidden sm:block"> behaves as written). Your own unlayered CSS wins over everything KOL ships.

The @source contract — required for every KOL package that ships JSX

Tailwind v4 does not scan node_modules, so layout utilities emitted inside KOL components never generate unless you point the scanner at each package's source. Without these lines components silently degrade — no error, no warning, just missing layout/motion (a frozen ThemeToggle roll, a collapsed AppShell grid). Paste one line per installed KOL package, next to the imports above:

@source "../node_modules/@kolkrabbi/kol-component/src";
@source "../node_modules/@kolkrabbi/kol-framework/src";

(Adjust the relative path to your CSS file's location. Component-load-bearing chrome lives in this package's CSS and needs no @source — the contract covers the remaining per-render utilities.)

Fonts

The typography CSS references the brand fonts at absolute paths (/fonts/right-grotesk/…, /fonts/jetbrains-mono/…). The package does not ship the font files — your app must serve them from /fonts/ (e.g. drop them in your public/ dir). The showcase in this repo does exactly that. Without them, type falls back to system fonts.

Pure CSS — no JS, no dependencies.