@bcc-code/design-tokens – Light & Dark Theme

version

A scoped design token package with light and dark themes, usable across PrimeVue, WordPress, and plain HTML/JS projects. Built with Style Dictionary.

✨ Features

✅ Light and dark theme support
✅ Zero-config CSS variables (primitives + semantic)
✅ Available via NPM and CDN
✅ Built-in PrimeVue aura-compatible preset
✅ Works in WordPress, Vue, and vanilla HTML
✅ Scalable architecture for future token sets and themes

📦 Installation & Usage

▶️ Install via NPM (for Vue/PrimeVue)

npm install @bcc-code/design-tokens@latest

In your main.js:

import "@bcc-code/design-tokens/variables.css"; // Injects all CSS variables
import { BCCPrimeVuePreset } from "@bcc-code/design-tokens/primevue-preset";

app.use(PrimeVue, {
  theme: {
    preset: BCCPrimeVuePreset,
    options: {
      darkModeSelector: ".dark-mode", // You toggle this class manually or via script
    },
  },
});

🌐 Use via CDN (WordPress / HTML / No Build Tools)

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

To enable dark mode, add this to your HTML:

<html class="dark-mode"></html>

Optional: Use a script with prefers-color-scheme to toggle .dark-mode dynamically.

📁 Project Structure

tokens/                 # Source tokens (JSON)
export-tokens/          # Style Dictionary config + custom generators
build/                  # Intermediate Style Dictionary outputs
dist/                   # Final NPM/CDN-ready files
  ├── variables.css     # Combined light + dark + primitives CSS variables
  └── primevue-preset.js # PrimeVue theme preset (Aura-compatible)

⚙ How It Works (Build System)

Tokens are defined in tokens/ (primitives, semantic, themes)
Style Dictionary transforms them using custom scripts
Output files are:
- variables.css: all CSS variables under :root and .dark-mode
- primevue-preset.js: an override object usable in PrimeVue

Run the build:

npm run build

🧱 Token Structure

primitives: base values (e.g. --color-neutral-100)
semantic: tokens with purpose-based names (--color-surface-primary)
light / dark: theme-specific values using the same semantic names
variables.css: combines all and respects CSS variable cascade rules

📄 License

MIT

Note: All CDN and NPM imports use the @bcc-code/design-tokens scope. If you fork this project or publish your own, replace all references accordingly.