# @loma-portal/design-tokens

Builds W3C-format design tokens into three consumable artifacts:

| Artifact                      | Used by                                                    |
| ----------------------------- | ---------------------------------------------------------- |
| `dist/css/{theme}.{mode}.css` | Imported once in app root; provides `--ds-*` CSS variables |
| `dist/tailwind/index.js`      | Imported by each app's `tailwind.config.*` as a preset     |
| `dist/ts/index.js`            | Typed runtime access (`tokens.color.primary[500]`)         |

## Source of truth

Tokens live at `tokens/themes/<theme>/*.json` and follow the [W3C Design Tokens Community Group format](https://design-tokens.github.io/community-group/format/). The active theme is selected by `project.config.json#ui.style`.

## Build

```bash
pnpm --filter @loma-portal/design-tokens build
```

The build is a small custom script (`src/build.mjs`) — no Style Dictionary dependency required. Phase 8 can promote to Style Dictionary if the design system grows.

## Adding a new theme

1. Drop a folder under `tokens/themes/<name>/` with the same 8 files as `tokens/themes/premium/`.
2. Run `pnpm --filter @loma-portal/design-tokens build`.
3. List the new theme in `presets/themes/` so spawned projects can select it.
