2.0.17 • Published 11 months ago

@bcc-code/design-tokens v2.0.17

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

@bcc-code/design-tokens

version jsDelivr

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.

1.0.2

11 months ago

1.0.19

12 months ago

1.0.1

11 months ago

1.0.18

12 months ago

1.0.17

12 months ago

1.0.0

12 months ago

1.0.16

12 months ago

1.0.9

12 months ago

1.0.8

12 months ago

1.0.7

12 months ago

1.0.6

12 months ago

1.0.5

12 months ago

1.0.4

11 months ago

1.0.3

12 months ago

2.0.3

11 months ago

2.0.2

11 months ago

2.0.5

11 months ago

2.0.4

11 months ago

2.0.7

11 months ago

2.0.6

11 months ago

2.0.9

11 months ago

2.0.8

11 months ago

1.0.21

11 months ago

1.0.20

12 months ago

2.0.1

11 months ago

2.0.0

11 months ago

2.0.15

11 months ago

2.0.16

11 months ago

2.0.13

11 months ago

2.0.14

11 months ago

2.0.11

11 months ago

2.0.12

11 months ago

2.0.10

11 months ago

2.0.17

11 months ago

1.0.10

12 months ago

1.0.15

12 months ago

1.0.14

12 months ago

1.0.13

12 months ago

1.0.12

12 months ago

0.5.0

3 years ago

0.4.1

3 years ago

0.4.0

3 years ago

0.3.0

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.0

3 years ago

0.0.0

3 years ago