@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 syncing DESIGN.md front matter in ad-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);