@bcc-code/design-tokens 3.0.4 → 3.0.6

package/README.md

@@ -1,63 +1,102 @@
-# @bcc-code/design-tokens
-
-Design tokens for BCC projects with CSS, Tailwind v4, and PrimeVue support.
-
-## Installation
-
-```bash
-npm install @bcc-code/design-tokens
-```
-
-## Usage
-
-### CSS Variables
-
-```css
-@import '@bcc-code/design-tokens/css/light';
-/* or */
-@import '@bcc-code/design-tokens/css/dark';
-```
-
-```css
-.card {
-  background: var(--color-elevation-surface-default);
-  color: var(--color-text-default);
-  padding: var(--space-300);
-}
-```
-
-### Tailwind CSS v4
-
-```css
-@import '@bcc-code/design-tokens/tailwind/light';
-/* or */
-@import '@bcc-code/design-tokens/tailwind/dark';
-```
-
-```html
-<div class="bg-elevation-surface-default text-default p-300">
-  Content
-</div>
-```
-
-### PrimeVue
-
-```javascript
-import BCCPreset from "@bcc-code/design-tokens/primevue";
-
-app.use(PrimeVue, {
-  theme: {
-    preset: BCCPreset
-  }
-});
-```
-
-## CDN
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/light.css">
-```
-
-## License
-
+# @bcc-code/design-tokens
+
+BCC Design System tokens with support for CSS variables, Tailwind CSS v4, and PrimeVue themes. Generates consistent design tokens from Figma Token Studio with automatic light/dark mode support.
+
+## Installation
+
+```bash
+npm install @bcc-code/design-tokens
+```
+
+## Usage
+
+### CSS Variables
+
+Import theme-specific CSS variables:
+
+```css
+@import '@bcc-code/design-tokens/css/light';
+@import '@bcc-code/design-tokens/css/dark';
+```
+
+Use semantic tokens in your styles:
+
+```css
+.card {
+  background: var(--color-elevation-surface-default);
+  color: var(--color-text-default);
+  padding: var(--space-300);
+  border-radius: var(--border-radius-md);
+  font-family: var(--font-family-archivo);
+}
+```
+
+### Tailwind CSS v4
+
+Import Tailwind utilities with design tokens:
+
+```css
+@import '@bcc-code/design-tokens/tailwind/light';
+@import '@bcc-code/design-tokens/tailwind/dark';
+```
+
+Use utility classes:
+
+```html
+<div class="bg-surface-default text-default p-300 rounded-md">
+  Content with BCC design tokens
+</div>
+```
+
+### PrimeVue Integration
+
+Configure PrimeVue with BCC theme preset:
+
+```javascript
+import { createApp } from 'vue'
+import PrimeVue from 'primevue/config'
+import BCCPreset from '@bcc-code/design-tokens/primevue'
+
+const app = createApp(App)
+
+app.use(PrimeVue, {
+  theme: {
+    preset: BCCPreset,
+    options: {
+      prefix: 'p',
+      darkModeSelector: '.p-dark',
+      cssLayer: false
+    }
+  }
+})
+```
+
+Enable dark mode by adding the `p-dark` class to your root element:
+
+```javascript
+// Toggle dark mode
+document.documentElement.classList.toggle('p-dark')
+```
+
+## Token Categories
+
+- **Colors**: Semantic color tokens for text, backgrounds, borders, and states
+- **Typography**: Font families, sizes, weights, and line heights
+- **Spacing**: Consistent spacing scale for margins, padding, and gaps
+- **Border Radius**: Border radius values for consistent corner rounding
+- **Elevation**: Surface tokens for different elevation levels
+
+## CDN Usage
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/light.css">
+<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/dark.css">
+```
+
+## Development
+
+A demo application is available in the `demo/` directory to test and showcase the design token integration with PrimeVue components.
+
+## License
+
 MIT © BCC Code