@basemorph/tokens

Brand-neutral design tokens with two independent switches driven entirely by CSS custom properties:

• theme — [data-theme="light" | "dark"]
• morph — [data-style="flat" | "neo-brutalism" | "neumorphic"]

TypeScript is the source of truth; CSS and a DTCG (Figma-importable) JSON are generated outputs.

Install

npm install @basemorph/tokens

Usage

Ship the stylesheet, then set the two data attributes on <html> (or any scope):

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

<html data-theme="dark" data-style="neo-brutalism">

Everything downstream reads the resulting CSS variables (--color-accent, --space-*, --radius-*, --shadow-*, …). Read the same values in TS when you need them in logic:

import { color, space, tokens, resolveToken } from "@basemorph/tokens";

Subpath exports

| import | what | | --- | --- | | @basemorph/tokens | typed token objects (color, space, radius, motion, shadow, tokens, …) | | @basemorph/tokens/tokens.css | the runtime stylesheet | | @basemorph/tokens/tokens.dtcg.json | DTCG export for Figma / design tools | | @basemorph/tokens/toCss, /toDtcg | the generators, if you build your own outputs |

Color pairs are contrast-checked against WCAG at build time.

License

MIT © Evan C. Navarro