@bcc-code/design-tokens

Design tokens for the BCC Design System. Provides colors, typography, spacing, and component theming for CSS, Tailwind v4, and PrimeVue with light/dark mode support.

Installation

npm install @bcc-code/design-tokens

Documentation

For usage instructions, component guidelines, and examples, see the full documentation:

developer.bcc.no/bcc-design

Quick Links

• Get Started - Installation and setup
• Foundations - Tokens, colors, typography, spacing
• Components - PrimeVue component styling

Adding Component Tokens

When designers add or update PrimeVue component tokens via Figma:

1. Export from Figma — Component tokens land in tokens/aura/component.json
2. Add theme overrides (recommended) — For light/dark differentiation, add the component to both tokens/aura/component/light.json and tokens/aura/component/dark.json. Without these, the component will use the same tokens in both themes.
3. Run the build — node run build
4. Check warnings — The build will warn about components missing theme overrides

Component tokens are automatically picked up from component.json — no manual list to maintain.

For BCC-specific layout/sizing overrides (not from Figma), add them to MANUAL_COMPONENT_OVERRIDES in export-tokens/constants.js.

Repository Structure

Generated folders

• tokens/ is generated from Figma token exports (source of truth from design).
• build/ is generated by running the build script (npm run build / node export-tokens/build.js).
• Do not hand-edit files in build/; regenerate instead.

config/

• config/config-reference.json
  PrimeVue reference config used by the generator to understand PrimeVue's expected token structure and keys when creating build/primevue/config.js.
  • Can edit? Usually leave alone. Edit only when intentionally updating PrimeVue mapping/reference behavior (for example after PrimeVue config structure changes).

export-tokens/

• export-tokens/build.js
  Main build orchestrator. Runs validation, builds token outputs, combines theme files, generates types, and generates PrimeVue config.

  • Can edit? Yes, when changing build flow or adding new outputs.

• export-tokens/constants.js
  Central configuration for paths, token group lists, Tailwind mappings/utilities, known exceptions, and manual component overrides.

  • Can edit? Yes. This is the primary file to update when adding token groups, mappings, or BCC manual overrides.

• export-tokens/sd-formats.js
  Registers custom Style Dictionary transforms/formats (JS with refs, CSS variables, Tailwind utilities).

  • Can edit? Yes, if you need to change output format behavior.

• export-tokens/primevue-config.js
  Generates build/primevue/config.js from built tokens + config/config-reference.json and applies override logic/validation.

  • Can edit? Yes, for PrimeVue mapping/resolution logic changes.

• export-tokens/validation.js
  Validates light/dark token symmetry and warns about missing component theme overrides.

  • Can edit? Yes, when adjusting validation rules.

• export-tokens/bcc-build.js
  Creates combined auto.css and tailwind-auto.css from generated light/dark outputs.

  • Can edit? Yes, if combined output strategy needs to change.

• export-tokens/type-gen.js
  Generates .d.ts files for built JS/CSS outputs.

  • Can edit? Yes, when changing published type declarations.

License

MIT