@bcc-code/design-tokens 3.0.6 → 3.0.8

package/README.md

@@ -10,15 +10,16 @@ npm install @bcc-code/design-tokens
 
 ## Usage
 
-### CSS Variables
+### CSS Variables (Recommended)
 
-Import theme-specific CSS variables:
+Import auto-switching CSS variables with light/dark mode support:
 
 ```css
-@import '@bcc-code/design-tokens/css/light';
-@import '@bcc-code/design-tokens/css/dark';
+@import '@bcc-code/design-tokens/css';
 ```
 
+This automatically provides light theme by default and switches to dark theme when `prefers-color-scheme: dark` is detected.
+
 Use semantic tokens in your styles:
 
 ```css
@@ -31,21 +32,41 @@ Use semantic tokens in your styles:
 }
 ```
 
-### Tailwind CSS v4
+**Alternative theme-specific imports (optional):**
+```css
+@import '@bcc-code/design-tokens/css/light';
+@import '@bcc-code/design-tokens/css/dark';
+```
+
+### Tailwind CSS v4 (Recommended)
 
-Import Tailwind utilities with design tokens:
+Import Tailwind utilities with auto-switching themes and `.dark` class support:
 
 ```css
-@import '@bcc-code/design-tokens/tailwind/light';
-@import '@bcc-code/design-tokens/tailwind/dark';
+@import '@bcc-code/design-tokens/tailwind';
 ```
 
+This provides light theme by default and dark theme when using the `.dark` class on any parent element.
+
 Use utility classes:
 
 ```html
-<div class="bg-surface-default text-default p-300 rounded-md">
+<div class="bg-elevation-surface-default text-default p-300 radius-md">
   Content with BCC design tokens
 </div>
+
+<!-- Dark mode with .dark class -->
+<div class="dark">
+  <div class="bg-elevation-surface-default text-default p-300 radius-md">
+    Content in dark mode
+  </div>
+</div>
+```
+
+**Alternative theme-specific imports (optional):**
+```css
+@import '@bcc-code/design-tokens/tailwind/light';
+@import '@bcc-code/design-tokens/tailwind/dark';
 ```
 
 ### PrimeVue Integration
@@ -64,18 +85,18 @@ app.use(PrimeVue, {
     preset: BCCPreset,
     options: {
       prefix: 'p',
-      darkModeSelector: '.p-dark',
+      darkModeSelector: '.dark',
       cssLayer: false
     }
   }
 })
 ```
 
-Enable dark mode by adding the `p-dark` class to your root element:
+Enable dark mode by adding the `dark` class to your root element:
 
 ```javascript
 // Toggle dark mode
-document.documentElement.classList.toggle('p-dark')
+document.documentElement.classList.toggle('.dark')
 ```
 
 ## Token Categories
@@ -89,10 +110,57 @@ document.documentElement.classList.toggle('p-dark')
 ## 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">
+<!-- Auto-switching CSS variables (recommended) -->
+<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/auto.css">
+
+<!-- Or Tailwind utilities with .dark class support -->
+<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/tailwind-auto.css">
 ```
 
+## Contributing
+
+We welcome contributions! Here's how to get started:
+
+### Development Setup
+
+1. **Clone and install dependencies:**
+   ```bash
+   git clone https://github.com/bcc-code/design-tokens.git
+   cd design-tokens
+   npm install
+   ```
+
+2. **Build tokens:**
+   ```bash
+   npm run build
+   ```
+
+3. **Test with demo application:**
+   ```bash
+   cd demo
+   npm install
+   npm run dev
+   ```
+
+### Token Structure
+
+- **Source tokens** are located in `tokens/` directory, synced from Figma Token Studio
+- **Build configuration** is in `export-tokens/build.js` using Style Dictionary
+- **Output files** are generated in `build/bcc/` with organized folders for `css/` and `js/`
+
+### Making Changes
+
+1. **Token updates:** Modify files in `tokens/` directory or sync from Figma Token Studio
+2. **Build system changes:** Update `export-tokens/build.js` for new formats or transformations
+3. **PrimeVue preset:** Modify `config/primevue.config.js` for theme mapping changes
+
+### Pull Requests
+
+- Ensure `npm run build` runs successfully
+- Test changes with the demo application
+- Update documentation if adding new features
+- Follow conventional commit messages
+
 ## Development
 
 A demo application is available in the `demo/` directory to test and showcase the design token integration with PrimeVue components.