@bcc-code/design-tokens

A comprehensive design token package with CSS variables, Tailwind v4 integration, and framework presets for BCC projects.

🚀 Features

• CSS Variables: Universal support for any project
• Tailwind v4 Integration: Native support with @theme and custom utilities
• PrimeVue Integration: Token override preset extending Aura theme
• Dark Mode: Automatic switching via CSS media queries or class-based control
• CDN Support: Direct imports for WordPress and static sites

📦 Installation

npm install @bcc-code/design-tokens

🎯 Usage

CSS Variables (WordPress, Static Sites)

CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bcc-code/design-tokens@latest/build/bcc/cdn/variables.css">

NPM:

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

Usage in CSS:

.my-component {
  background-color: var(--color-elevation-surface-default);
  color: var(--color-text-default);
  padding: var(--space-300);
  border-radius: var(--border-radius-lg);
  font: var(--heading-lg);
}

.my-button:hover {
  background-color: var(--color-background-brand-hover);
}

Tailwind CSS v4

1. Install Tailwind CSS:

npm install tailwindcss

2. Import in your main CSS:

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

3. Use in your components:

<div class="bg-surface p-spacing-300 rounded-lg">
  <h2 class="heading-lg text-semantic-default mb-spacing-150">Card Title</h2>
  <p class="body-md text-semantic-subtle">Card content with BCC design tokens.</p>
  <button class="bg-brand hover:bg-brand-hover text-semantic-inverse px-spacing-300 py-spacing-150 rounded-md">
    Action Button
  </button>
</div>

PrimeVue Integration

1. Install dependencies:

npm install tailwindcss primevue @primevue/themes

3. Configure PrimeVue:

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

const app = createApp(App);

app.use(PrimeVue, {
    theme: {
        preset: BCCPreset,
        options: {
            darkModeSelector: '.dark'
        }
    }
});

4. Use PrimeVue components:

<template>
  <Card>
    <template #title>Welcome</template>
    <template #content>
      <p>This card uses BCC design tokens automatically!</p>
      <Button label="Primary Action" />
      <Button label="Secondary" severity="secondary" />
    </template>
  </Card>
</template>

🌙 Dark Mode

Automatic (CSS Media Query)

Works out of the box with user's system preferences:

/* Light mode */
:root {
  --color-text-default: #1e242d;
}

/* Dark mode - automatically applied */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-default: #dee4ea;
  }
}

📋 Available Tokens

Colors

• Brand: --color-bcc-* (100-1000)
• Neutral: --color-neutral-* (0-1100)
• Semantic: --color-text-*, --color-background-*, --color-border-*
• Elevation: --color-elevation-surface-*

Typography

• Headings: --heading-xs through --heading-3xl
• Body: --body-sm, --body-md, --body-lg
• Font Properties: --font-size-*, --font-weight-*, --line-height-*

Spacing

• Scale: --space-* (0, 25, 50, 75, 100, 150, 200, 250, 300, 400, 500, 600, 800, 1000)
• Negative: --space-negative-* for negative margins

Border Radius

• Scale: --border-radius-* (none, xs, sm, md, lg, xl, 2xl, full)

Tailwind-specific

• Spacing: --spacing-* (mapped from space tokens)
• Text Sizes: --text-* (mapped from font-size tokens)
• Radius: --radius-* (mapped from border-radius tokens)

🛠️ Development

Building from Source

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

Project Structure

├── tokens/               # Source design tokens (from Figma Token Studio)
│   ├── primitives/       # Base tokens (colors, typography, spacing)
│   ├── semantic/         # Semantic tokens (light/dark themes)
│   ├── $themes.json      # Theme configuration
│   └── $metadata.json    # Token metadata
├── build/                # Generated CSS, Tailwind, and manual presets
│   └── bcc/              # BCC brand group (future: events/, members/)
│       ├── cdn/          # Generated: CDN-ready CSS files
│       ├── tailwind/     # Generated: Tailwind v4 integration
│       └── primevue/     # Manual: PrimeVue preset configuration
│           ├── index.js      # Configuration object
│           └── index.d.ts    # TypeScript definitions
├── demos/                # Usage examples
└── build.js              # Build system (Style Dictionary)

Build System Flow

1. Figma Token Studio → tokens/ directory (JSON files)
2. Style Dictionary processes tokens via build.js
3. Generated files output to build/bcc/cdn/ and build/bcc/tailwind/
4. Manual presets created in build/bcc/primevue/ (protected from build clean)

📄 License

MIT © BCC Code

Made with ❤️ by BCC Code