@bcc-code/design-tokens

BCC Design System tokens with support for CSS variables, Tailwind CSS v4, and PrimeVue themes. Generates consistent design tokens from Figma Token Studio with automatic light/dark mode support.

Installation

npm install @bcc-code/design-tokens

Usage

CSS Variables

Import theme-specific CSS variables:

@import '@bcc-code/design-tokens/css/light';
@import '@bcc-code/design-tokens/css/dark';

Use semantic tokens in your styles:

.card {
  background: var(--color-elevation-surface-default);
  color: var(--color-text-default);
  padding: var(--space-300);
  border-radius: var(--border-radius-md);
  font-family: var(--font-family-archivo);
}

Tailwind CSS v4

Import Tailwind utilities with design tokens:

@import '@bcc-code/design-tokens/tailwind/light';
@import '@bcc-code/design-tokens/tailwind/dark';

Use utility classes:

<div class="bg-surface-default text-default p-300 rounded-md">
  Content with BCC design tokens
</div>

PrimeVue Integration

Configure PrimeVue with BCC theme preset:

import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import BCCPreset from '@bcc-code/design-tokens/primevue'

const app = createApp(App)

app.use(PrimeVue, {
  theme: {
    preset: BCCPreset,
    options: {
      prefix: 'p',
      darkModeSelector: '.p-dark',
      cssLayer: false
    }
  }
})

Enable dark mode by adding the p-dark class to your root element:

// Toggle dark mode
document.documentElement.classList.toggle('p-dark')

Token Categories

• Colors: Semantic color tokens for text, backgrounds, borders, and states
• Typography: Font families, sizes, weights, and line heights
• Spacing: Consistent spacing scale for margins, padding, and gaps
• Border Radius: Border radius values for consistent corner rounding
• Elevation: Surface tokens for different elevation levels

CDN Usage

<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/light.css">
<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/dark.css">

Development

A demo application is available in the demo/ directory to test and showcase the design token integration with PrimeVue components.

License

MIT © BCC Code