Theming and CSS‑framework interop.

Quick switch

Click a preset to re‑skin the live demo below. The same buttons, inputs, badges, and stat cards — different palette and radius. Each preset is one CSS module load.

Three layers of override

Every kit component participates in a layered cascade. Override at whichever level fits.

1. Global semantic tokens

Set on :root. Cascade through Shadow DOM into every component. This is the layer the four presets configure.

:root { --tc-color-accent: #a16939; --tc-color-accent-hover: #8a572d; --tc-color-ink: #14171f; --tc-color-surface: #ffffff; --tc-color-rule: #ece5d3; --tc-color-success: #207a5b; --tc-color-warning: #a87326; --tc-color-danger: #b3261e; --tc-radius-md: 8px; --tc-font-sans: 'Inter', system-ui, sans-serif; }

2. Per-component tokens

Each component exposes finer-grained hooks like --tc-btn-primary-bg, --tc-input-border, --tc-table-row-hover. They default to the global semantic tokens but can be overridden per‑component:

tc-button { --tc-btn-primary-bg: linear-gradient(135deg, #6366f1, #8b5cf6); }

3. Per-instance overrides

Pass the variable as inline style. Affects only that one element.

<tc-button style="--tc-btn-primary-bg: tomato">Special</tc-button>

Bundled presets

Pick one. They're all idempotent — importing twice is a no‑op.

Preset	Import	What it changes
tokens (default)	@ra9/tan-compose-kit/themes/tokens	Light theme, warm-tan accent. The base every other preset extends.
dark	@ra9/tan-compose-kit/themes/dark	Dark surface + ink, accent brightened for contrast.
bootstrap	@ra9/tan-compose-kit/themes/bootstrap	Bootstrap 5 primary blue, semantic palette, default radius.
tailwind	@ra9/tan-compose-kit/themes/tailwind	Tailwind slate/indigo palette, default radius scale.
material	@ra9/tan-compose-kit/themes/material	Material Design 3 indigo, Roboto, elevation-style shadows.
shadcn	@ra9/tan-compose-kit/themes/shadcn	shadcn/ui zinc neutrals, tighter radii, Inter typography.

Using alongside Bootstrap or Tailwind

Your global Bootstrap or Tailwind classes never reach inside a kit component; the kit's CSS never reaches outside. They coexist by construction. The presets just align the kit's look so a user can't tell which buttons came from where.

Bootstrap

import "bootstrap/dist/css/bootstrap.min.css"; import "@ra9/tan-compose-kit"; import "@ra9/tan-compose-kit/themes/bootstrap"; // kit components now match Bootstrap's primary blue + radius <div class="container"> <tc-input label="Email" name="email"></tc-input> <tc-button variant="primary">Save</tc-button> </div>

Tailwind

import "@ra9/tan-compose-kit"; import "@ra9/tan-compose-kit/themes/tailwind"; // utility classes don't enter the kit's Shadow DOM, // but the kit's tokens align with Tailwind's slate/indigo <div class="grid grid-cols-3 gap-4"> <tc-stat label="MRR" value="42"></tc-stat> <tc-stat label="Churn" value="0.4%"></tc-stat> <tc-stat label="LTV" value="240"></tc-stat> </div>

Other frameworks

Bulma, Bootstrap 4, plain CSS — same shape. Override the handful of --tc-color-* tokens to match the framework's brand color and you're done.

Writing your own preset

Just CSS. Set the tokens you want to change; the rest cascade from the base.

:root { --tc-color-accent: #ff6b00; --tc-color-accent-hover: #cc5500; --tc-color-accent-soft: #ffe5d0; --tc-color-ink: #2a2a2e; --tc-radius-md: 12px; --tc-font-sans: 'Söhne', system-ui, sans-serif; }

Load that file after the kit's base tokens and every component updates.

The full token list

See Docs for the complete catalogue, but the most-used:

• --tc-color-accent / -hover / -soft — primary brand color and its derivatives
• --tc-color-ink / -soft / -muted — three steps of text emphasis
• --tc-color-surface / -alt — background surfaces
• --tc-color-rule / -strong — borders and dividers
• --tc-color-{info,success,warning,danger} + matching -bg and -fg
• --tc-radius-{sm,md,lg,pill}
• --tc-shadow-{sm,md,lg}
• --tc-space-{1..8} — spacing scale used by layout primitives
• --tc-focus-ring — single source of truth for focus outlines
• --tc-font-{sans,mono}