@bcc-code/design-tokens

BCC Design System tokens for CSS, Tailwind v4, and PrimeVue with light/dark mode support.

Installation

npm install @bcc-code/design-tokens

Usage

CSS Variables

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

Provides light theme by default, dark theme with .dark class:

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

Toggle dark mode:

document.documentElement.classList.toggle('dark');

Tailwind CSS v4

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

Use utility classes:

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

<!-- Dark mode -->
<div class="dark">
  <div class="bg-elevation-surface-default text-default">
    Dark content
  </div>
</div>

PrimeVue

Install the required peer dependencies:

npm install primevue @primeuix/themes

Import the preset and overrides:

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

const app = createApp(App)

app.use(PrimeVue, {
  theme: {
    preset: BCCPreset,
    options: {
      darkModeSelector: '.dark',
      cssLayer: {
        name: 'primevue',
        order: 'theme, base, primevue, custom'
      }
    }
  }
})

Toggle dark mode:

document.documentElement.classList.toggle('dark')

What's Included:

• @bcc-code/design-tokens/primevue - PrimeVue Aura preset with BCC tokens
• @bcc-code/design-tokens/primevue/overrides - CSS overrides for component styling

Available Exports

CSS

• @bcc-code/design-tokens/css - Auto-switching theme (prefers-color-scheme)
• @bcc-code/design-tokens/css/light - Light theme only
• @bcc-code/design-tokens/css/dark - Dark theme only

Tailwind CSS

• @bcc-code/design-tokens/tailwind - Auto-switching utilities
• @bcc-code/design-tokens/tailwind/light - Light utilities only
• @bcc-code/design-tokens/tailwind/dark - Dark utilities only

JavaScript

• @bcc-code/design-tokens/js/light - Light theme tokens as JS objects
• @bcc-code/design-tokens/js/dark - Dark theme tokens as JS objects

PrimeVue

• @bcc-code/design-tokens/primevue - Aura preset configuration
• @bcc-code/design-tokens/primevue/overrides - Component CSS overrides

Token Categories

• Colors: Text, backgrounds, borders, states
• Typography: Font families, sizes, weights, line heights
• Spacing: Margins, padding, gaps (50-1000 scale)
• Border Radius: Corner rounding
• Elevation: Surface levels

CDN Usage

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

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

<!-- Theme toggle -->
<script>
  document.documentElement.classList.toggle('dark');
</script>

Contributing

Contributions are welcome! See CONTRIBUTING.md for development setup, workflow, and publishing instructions.

License

MIT © BCC Code