@bcc-code/design-tokens

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

🚀 Features

• CSS Variables: Ready-to-use CSS custom properties for any project
• Tailwind v4 Integration: Native support with @theme and custom utilities
• PrimeVue Presets: Seamless integration with PrimeVue components
• Dark Mode: Automatic switching via CSS media queries or class-based control
• CDN Support: Direct CSS imports for WordPress and static sites
• Framework Ready: Extensible architecture for multiple UI libraries

📦 Installation

npm install @bcc-code/design-tokens

📁 Package Structure

Understanding the import paths:

@bcc-code/design-tokens/{group}/{format}/{file}

• {group} - Design system variant (currently bcc, future: events, members)
• {format} - Distribution format (cdn, tailwind, presets)
• {file} - Specific file (variables.css, index.css, etc.)

Examples:

• ./bcc/cdn/variables.css - BCC brand CSS variables for CDN/WordPress
• ./bcc/tailwind/index.css - BCC brand Tailwind integration
• ./bcc/primevue/index.js - BCC brand PrimeVue preset

🎯 Usage

CSS Variables (WordPress, Static Sites)

CDN (Recommended):

<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 primevue @primevue/themes

2. Import CSS and preset:

import '@bcc-code/design-tokens/bcc/cdn';
import BCCPreset from '@bcc-code/design-tokens/bcc/primevue';

3. Configure PrimeVue:

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';

const app = createApp(App);

app.use(PrimeVue, {
    theme: {
        preset: BCCPreset,
        options: {
            darkModeSelector: '.dark' // or 'system' for auto-detection
        }
    }
});

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

Manual (Class-based)

Control dark mode programmatically:

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

// Enable dark mode
document.documentElement.classList.add('dark');

// Disable dark mode  
document.documentElement.classList.remove('dark');

For PrimeVue projects:

app.use(PrimeVue, {
    theme: {
        preset: BCCPreset,
        options: {
            darkModeSelector: '.dark' // Class-based
            // or
            darkModeSelector: 'system' // Automatic
        }
    }
});

📋 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)

🎨 Framework Support

Current

• ✅ CSS Variables - Universal support
• ✅ Tailwind CSS v4 - Native integration
• ✅ PrimeVue v4 - Complete preset

Planned

• 🔄 Coming soon

🛠️ Development

Building from Source

git clone https://github.com/bcc-code/bcc-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
├── 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