@bcc-code/design-tokens 3.0.9 → 3.0.12

package/README.md

@@ -18,7 +18,7 @@ Import auto-switching CSS variables with light/dark mode support:
 @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.
+This automatically provides light theme by default and switches to dark theme when the `.dark` class is applied to any parent element (typically `html` or `body`).
 
 Use semantic tokens in your styles:
 
@@ -32,6 +32,16 @@ Use semantic tokens in your styles:
 }
 ```
 
+**Manual theme switching:**
+```javascript
+// Toggle dark mode
+document.documentElement.classList.toggle('dark');
+
+// Or set theme based on user preference
+const isDark = localStorage.getItem('theme') === 'dark';
+document.documentElement.classList.toggle('dark', isDark);
+```
+
 **Alternative theme-specific imports (optional):**
 ```css
 @import '@bcc-code/design-tokens/css/light';
@@ -96,7 +106,13 @@ Enable dark mode by adding the `dark` class to your root element:
 
 ```javascript
 // Toggle dark mode
-document.documentElement.classList.toggle('.dark')
+document.documentElement.classList.toggle('dark')
+
+// Or with system preference fallback
+function setTheme(isDark) {
+  document.documentElement.classList.toggle('dark', isDark);
+  document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+}
 ```
 
 ## Token Categories
@@ -110,11 +126,31 @@ document.documentElement.classList.toggle('.dark')
 ## CDN Usage
 
 ```html
-<!-- Auto-switching CSS variables (recommended) -->
+<!-- Auto-switching CSS variables with .dark class support (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">
+
+<!-- Then add JavaScript for theme switching -->
+<script>
+  // Basic theme toggle
+  function toggleTheme() {
+    document.documentElement.classList.toggle('dark');
+  }
+  
+  // Theme with system preference detection
+  function initTheme() {
+    const savedTheme = localStorage.getItem('theme');
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const isDark = savedTheme ? savedTheme === 'dark' : systemDark;
+    
+    document.documentElement.classList.toggle('dark', isDark);
+    document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+  }
+  
+  initTheme();
+</script>
 ```
 
 ## Contributing
@@ -141,6 +177,8 @@ We welcome contributions! Here's how to get started:
    npm install
    npm run dev
    ```
+   
+   The demo application showcases all three integration methods (CSS variables, Tailwind utilities, and PrimeVue components) with a comprehensive dashboard featuring theme switching, real-world examples, and live token demonstrations.
 
 ### Token Structure
 
@@ -148,9 +186,44 @@ We welcome contributions! Here's how to get started:
 - **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/`
 
+### GitHub-Figma Workflow
+
+The design token system integrates with Figma through Figma Token Studio, creating a streamlined workflow between design and development:
+
+**1. Design in Figma**
+- Design tokens are created and managed in Figma using the Token Studio plugin
+- Tokens are organized into collections: primitives, semantic (light/dark), typeface, and PrimeVue
+- Designers can make changes directly in Figma and preview them in real-time
+
+**2. Export from Figma Token Studio**
+- Use the Token Studio plugin to export tokens as JSON files
+- Export collections separately or as a complete token set
+- Tokens are exported in the Figma Token Studio format with proper references
+
+**3. Sync to GitHub**
+- Export token files from Figma Token Studio
+- Update the corresponding files in the `tokens/` directory:
+  - `tokens/primitives/` - Base design tokens (colors, dimensions, typography)
+  - `tokens/semantic/light.json` - Light theme semantic tokens
+  - `tokens/semantic/dark.json` - Dark theme semantic tokens
+  - `tokens/typeface/` - Font definitions
+  - `tokens/primevue/aura-primitive.json` - PrimeVue Aura primitive tokens
+- Commit changes to your feature branch
+
+**4. Build and Deploy**
+- Run `npm run build` to transform tokens into CSS, JS, and Tailwind formats
+- The Style Dictionary build system processes tokens with custom transforms
+- Generated files in `build/bcc/` are ready for distribution
+
+**5. Version and Release**
+- Create pull request with token changes
+- Review generated output files and test with demo application
+- Merge to main branch triggers automated release process
+- New package version is published to npm with updated tokens
+
 ### Making Changes
 
-1. **Token updates:** Modify files in `tokens/` directory or sync from Figma Token Studio
+1. **Token updates:** Export from Figma Token Studio and update files in `tokens/` directory
 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
 
@@ -163,7 +236,15 @@ We welcome contributions! Here's how to get started:
 
 ## Development
 
-A demo application is available in the `demo/` directory to test and showcase the design token integration with PrimeVue components.
+A comprehensive demo application is available in the `demo/` directory featuring:
+
+- **CSS Variables showcase**: Custom cards, newsletter forms, and status displays using pure CSS with BCC tokens
+- **Tailwind Utilities showcase**: Project management dashboard with utility-first CSS classes
+- **PrimeVue Components showcase**: User profiles, settings panels, and component galleries
+- **Theme switching**: Manual dark/light mode toggle with system preference detection
+- **Live token demonstrations**: Real-time examples of all token categories in action
+
+Access the demo at `http://localhost:5173` after running `npm run dev` in the `demo/` directory.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcc-code/design-tokens",
-  "version": "3.0.9",
+  "version": "3.0.12",
   "description": "Design tokens build system",
   "type": "module",
   "exports": {
@@ -37,10 +37,13 @@
   },
   "homepage": "https://github.com/bcc-code/bcc-tokens#readme",
   "dependencies": {
-    "@tokens-studio/sd-transforms": "^1.3.0",
-    "style-dictionary": "^5.0.0"
+    "@tokens-studio/sd-transforms": "^2.0.1",
+    "style-dictionary": "^5.0.1"
   },
   "peerDependencies": {
     "@primeuix/themes": "^1.1.1"
+  },
+  "overrides": {
+    "tmp": "^0.2.4"
   }
 }