@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 (Recommended)

Import auto-switching CSS variables with light/dark mode support:

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

This automatically provides light theme by default and switches to dark theme when prefers-color-scheme: dark is detected.

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);
}

Alternative theme-specific imports (optional):

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

Tailwind CSS v4 (Recommended)

Import Tailwind utilities with auto-switching themes and .dark class support:

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

This provides light theme by default and dark theme when using the .dark class on any parent element.

Use utility classes:

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

<!-- Dark mode with .dark class -->
<div class="dark">
  <div class="bg-elevation-surface-default text-default p-300 radius-md">
    Content in dark mode
  </div>
</div>

Alternative theme-specific imports (optional):

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

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: '.dark',
      cssLayer: false
    }
  }
})

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

// Toggle dark mode
document.documentElement.classList.toggle('.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

<!-- Auto-switching CSS variables (recommended) -->
<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/auto.css">

<!-- Or Tailwind utilities with .dark class support -->
<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/tailwind-auto.css">

Contributing

We welcome contributions! Here's how to get started:

Development Setup

1. Clone and install dependencies:

   git clone https://github.com/bcc-code/design-tokens.git
   cd design-tokens
   npm install

2. Build tokens:

   npm run build

3. Test with demo application:

   cd demo
   npm install
   npm run dev

Token Structure

• Source tokens are located in tokens/ directory, synced from Figma Token Studio
• Build configuration is in export-tokens/build.js using Style Dictionary
• Output files are generated in build/bcc/ with organized folders for css/ and js/

Making Changes

1. Token updates: Modify files in tokens/ directory or sync from Figma Token Studio
2. Build system changes: Update export-tokens/build.js for new formats or transformations
3. PrimeVue preset: Modify config/primevue.config.js for theme mapping changes

Pull Requests

• Ensure npm run build runs successfully
• Test changes with the demo application
• Update documentation if adding new features
• Follow conventional commit messages

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