open-index/open-npm huggingface dataset:
npm package: @faulty/tokens
Description: Token generation system to support the GDQ Design System
Latest version: 0.12.0

# @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`:

```typescript
// 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.