@appdirect/ad-design-tokens
AppDirect design tokens for frontend applications.
Install
npm install @appdirect/ad-design-tokens
Available Exports
- Resolved semantic tokens:
@appdirect/ad-design-tokens/semantic/light@appdirect/ad-design-tokens/semantic/dark
- Resolved component tokens:
@appdirect/ad-design-tokens/components/light@appdirect/ad-design-tokens/components/dark
- Resolved token outputs (per layer):
@appdirect/ad-design-tokens/resolved/core.json@appdirect/ad-design-tokens/resolved/open-color.json@appdirect/ad-design-tokens/resolved/derived.json@appdirect/ad-design-tokens/resolved/semantic-light.json@appdirect/ad-design-tokens/resolved/semantic-dark.json@appdirect/ad-design-tokens/resolved/components-light.json@appdirect/ad-design-tokens/resolved/components-dark.json
- Figma / Tokens Studio (DTCG JSON with
{ref}aliases intact):@appdirect/ad-design-tokens/figma/open-color.json@appdirect/ad-design-tokens/figma/core.json@appdirect/ad-design-tokens/figma/derived.json@appdirect/ad-design-tokens/figma/semantic.light.json@appdirect/ad-design-tokens/figma/semantic.dark.json@appdirect/ad-design-tokens/figma/components.light.json@appdirect/ad-design-tokens/figma/components.dark.json@appdirect/ad-design-tokens/figma/$themes.json(Tokens Studio theme manifest)
- CSS variables:
@appdirect/ad-design-tokens/css/foundations.css(semantic tokens only — base for framework adapters)@appdirect/ad-design-tokens/css/mantine.css(Mantine adapter — component selectors referencing--ad-*vars)@appdirect/ad-design-tokens/css/tokens.css(foundations + component tokens — full monolith for vanilla consumers)@appdirect/ad-design-tokens/css/open-color.css(--ad-open-color-*palette)
- Design docs adapter:
@appdirect/ad-design-tokens/design-spec.yaml(resolved YAML payload for syncingDESIGN.mdfront matter inad-design-system)
- JS entrypoint:
@appdirect/ad-design-tokens(full resolved bundle)
Usage
Figma via Tokens Studio
Point Tokens Studio at dist/figma/ in the published package. The $themes.json manifest groups the layer files into two themes (Light, Dark) so Tokens Studio creates the following Figma variable collections on import:
| Collection | Modes |
|---|---|
Tokens / Open-Color | Value |
Tokens / Core | Value |
Tokens / Derived | Value |
Tokens / Semantic | Light, Dark |
Tokens / Semantic Brand | Value |
Tokens / Components | Light, Dark |
Interactive states (hover, active, focus, disabled) are intentionally excluded from the Figma export — they are code-side concerns. Figma binds the default/resting state only.
Resolved JSON imports
import semanticLight from '@appdirect/ad-design-tokens/semantic/light' with { type: 'json' };
import componentsDark from '@appdirect/ad-design-tokens/components/dark' with { type: 'json' };
import resolvedCore from '@appdirect/ad-design-tokens/resolved/core.json' with { type: 'json' };
CSS variables — vanilla consumers
import '@appdirect/ad-design-tokens/css/tokens.css';
CSS variables — palette only
import '@appdirect/ad-design-tokens/css/open-color.css';
CSS variables — Mantine adapter
Import after @mantine/core/styles.css so the adapter's higher-specificity selectors win:
import '@mantine/core/styles.css';
import '@appdirect/ad-design-tokens/css/foundations.css';
import '@appdirect/ad-design-tokens/css/mantine.css';
.button {
background: var(--ad-color-brand-primary);
color: var(--ad-color-brand-on-primary);
}
JS entrypoint
import tokens from '@appdirect/ad-design-tokens';
console.log(tokens.semantic.light.color.bg.default.$value);