@faulty/tokens

Type-safe token generation system for the GDQ Design design system, managing colors, fonts, and more.

Define your design system's tokens and themes safely in typescript and generate client code for CSS, TypeScript, and more.

Usage

# Install the package
pnpm add @faulty/tokens

If you are fine using the default themes and tokens, just import them from default:

// Font imports _must_ be at the top of your compiled CSS. Import them as early
// as possible to ensure they aren't pushed down by any other accidental imports.
import "@faulty/tokens/default/fontImports.css";
import "@faulty/tokens/default/system.css";
import { Theme, tokens } from "@faulty/tokens/default/Tokens";

To customize the system for your project, generate your own instance of them with:

# Create the token definitions from a default template
pnpm gdq-tokens
# Run the generate script (you'll need a native typescript runner)
pnpm esno ./design/generate.ts

You can edit ./design/tokens.ts to change tokens to match whatever you need. Note that the color tokens defined by default are almost all required for GDQ Design to function and appear as intended.

GDQ Design also provides a validateTokens function that you can add to your generate.ts to validate that all of the required tokens for GDQ Design are present in your token definitions.