Integrating tokens.css

tokens.css is a drop-in stylesheet. It declares every primitive, semantic, and component CSS variable for both light and dark modes. Any app that consumes those variables — a component project, a custom component library, or plain HTML — will pick up your tokens by including the file.

What's in it

/* Tostada export — <library-name>
   Generated YYYY-MM-DD HH:mm:ss */

:root {
  /* Primitives */
  --color-blue-500: #1B19FF;
  --radius-md: 0.5rem;
  /* … */

  /* Semantic */
  --bg-accent: var(--color-blue-500);
  --fg-default: var(--color-gray-900);
  /* … */

  /* shadcn */
  --primary: var(--bg-accent);
  --background: var(--bg-base);
  --radius: var(--radius-md);
  /* … */
}

.dark {
  /* Only the variables whose dark value differs from light */
  --bg-base: var(--color-gray-950);
  --primary: var(--bg-accent-dark);
  /* … */
}

Dropping it into a Vite + component project

Save the file as src/styles/tokens.css (or any path you like).

Import it before component's component styles, after Tailwind's base layer:

/* src/index.css */
@import "tailwindcss";
@import "./styles/tokens.css";
/* shadcn imports your components on demand; they consume these vars */

component picks up the variables automatically — every component re-renders with your tokens.

Toggling dark mode

.dark is the convention component uses. Add or remove the class on <html> or <body>:

document.documentElement.classList.toggle('dark')

The same tokens.css covers both modes — no second file to ship.

Refreshing the file

Today: edit tokens in Tostada, download a new tokens.css, replace the file in your repo, commit.

Roadmap: a CLI watcher that writes tokens.css to a configured path on every change. Until then, treat the download as a checkpoint.

Overriding without losing the source of truth

If you need to override one variable in a specific app:

@import "./styles/tokens.css";

/* App-specific override */
:root { --primary: #ff0080; }

A later tokens.css regeneration won't touch your override. But: if the override drifts from the design system, the Library is still the truth — fix it in Tostada and re-export rather than living with the override long-term.

Frameworks other than component

tokens.css is plain CSS custom properties. Any framework that uses CSS variables can consume them. The catch is that frameworks define their own variable names (Material uses --md-sys-color-primary, etc.) — you'd need to map your semantic tokens to that framework's names. Multi-library support is on the roadmap.