@frame-kit/tokens

The default design tokens (CSS custom properties) and dark theme for @frame-kit/ui-ng. Ship the neutral baseline as-is, or override any --fk-* token to rebrand the whole component library.

Install

npm i @frame-kit/tokens

Usage

Load the CSS in angular.json → styles (or any global stylesheet), before your own overrides:

"styles": [
  "node_modules/@frame-kit/tokens/base.css", // default neutral theme
  "node_modules/@frame-kit/tokens/dark.css", // optional — activates on prefers-color-scheme or html.dark
  "src/styles.css" // YOUR overrides last → cascade wins
]

Override tokens anywhere downstream:

:root {
  --fk-color-primary: #7c3aed; /* sweeping brand change */
  --fk-radius-md: 4px;
}

Also available:

• @frame-kit/tokens/scss — the source SCSS (base) for SCSS consumers; @frame-kit/tokens/scss/dark for dark.
• A typed token object: import { tokens } from '@frame-kit/tokens' (Record<FkTokenName, string>).

See the theming guide for the full token contract and override recipes.

License

MIT