Package Exports
- @bcc-code/design-tokens
Readme
@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.