@bcc-code/design-tokens

Design tokens for BCC projects with CSS variables, Tailwind v4, and PrimeVue support.

📦 Installation

npm install @bcc-code/design-tokens

🎯 Usage

CSS Variables

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:

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

Tailwind CSS v4

npm install tailwindcss

/* main.css */
@import "@bcc-code/design-tokens/bcc/tailwind";

<div class="bg-surface p-spacing-300 rounded-lg">
  <h2 class="text-heading-lg text-semantic-default">Title</h2>
  <button class="bg-brand hover:bg-brand-hover px-spacing-300 py-spacing-150">
    Button
  </button>
</div>

PrimeVue

npm install primevue @primeuix/themes

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' // or 'system'
        }
    }
});

🌙 Dark Mode

CSS Variables: Automatic via system preference Tailwind: Both automatic and manual via .dark class

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

🎨 Available Tokens

Colors

• --color-bcc-* (100-1000) - Brand colors
• --color-neutral-* (0-1100) - Neutral grays
• --color-text-*, --color-background-*, --color-border-* - Semantic colors

Typography

• --heading-* (xs, sm, md, lg, xl, 2xl, 3xl) - Heading styles
• --body-* (sm, md, lg) - Body text styles
• --font-size-*, --font-weight-* - Individual properties

Spacing & Layout

• --space-* (0, 25, 50...1000) - Spacing scale
• --border-radius-* (none, xs...2xl, full) - Border radius scale

📄 License

MIT © BCC Code

Need help? Check the contributing guide or open an issue.