@bcc-code/design-tokens 2.0.2 → 2.0.3

package/README.md

@@ -7,13 +7,12 @@ A comprehensive design token package with CSS variables, Tailwind v4 integration
 
 ## 🚀 Features
 
-- **CSS Variables**: Ready-to-use CSS custom properties for any project
+- **CSS Variables**: Universal support for any project
 - **Tailwind v4 Integration**: Native support with `@theme` and custom utilities  
-- **PrimeVue Configuration**: Framework-agnostic preset configuration for PrimeVue components
-- **TypeScript Support**: Full type definitions for better developer experience
+- **PrimeVue Integration**: Token override preset extending Aura theme
 - **Dark Mode**: Automatic switching via CSS media queries or class-based control
-- **CDN Support**: Direct CSS imports for WordPress and static sites
-- **Framework Ready**: Extensible architecture for multiple UI libraries
+- **TypeScript**: Full type definitions for all exports
+- **CDN Support**: Direct imports for WordPress and static sites
 
 ## 📦 Installation
 
@@ -21,28 +20,11 @@ A comprehensive design token package with CSS variables, Tailwind v4 integration
 npm install @bcc-code/design-tokens
 ```
 
-## 📁 Package Structure
-
-Understanding the import paths:
-
-```
-@bcc-code/design-tokens/{group}/{format}/{file}
-```
-
-- **`{group}`** - Design system variant (currently `bcc`, future: `events`, `members`)
-- **`{format}`** - Distribution format (`cdn`, `tailwind`, `primevue`)  
-- **`{file}`** - Specific file (`variables.css`, `index.css`, etc.)
-
-**Examples:**
-- `./bcc/cdn/variables.css` - BCC brand CSS variables for CDN/WordPress
-- `./bcc/tailwind/index.css` - BCC brand Tailwind integration
-- `./bcc/primevue` - BCC brand PrimeVue preset configuration
-
 ## 🎯 Usage
 
 ### CSS Variables (WordPress, Static Sites)
 
-**CDN (Recommended):**
+**CDN:**
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bcc-code/design-tokens@latest/build/bcc/cdn/variables.css">
 ```
@@ -97,10 +79,10 @@ npm install tailwindcss
 npm install tailwindcss primevue @primevue/themes
 ```
 
-**2. Import CSS and preset configuration:**
+**2. Import Tailwind CSS and preset configuration:**
 ```javascript
 import '@bcc-code/design-tokens/bcc/tailwind';
-import BCCPresetConfig from '@bcc-code/design-tokens/bcc/primevue';
+import BCCAuraOverride from '@bcc-code/design-tokens/bcc/primevue';
 ```
 
 **3. Configure PrimeVue:**
@@ -110,8 +92,7 @@ import PrimeVue from 'primevue/config';
 import { definePreset } from '@primevue/themes';
 import Aura from '@primevue/themes/aura';
 
-// Create the preset using our configuration
-const BCCPreset = definePreset(Aura, BCCPresetConfig);
+const BCCPreset = definePreset(Aura, BCCAuraOverride);
 
 const app = createApp(App);
 
@@ -119,7 +100,7 @@ app.use(PrimeVue, {
     theme: {
         preset: BCCPreset,
         options: {
-            darkModeSelector: '.dark' // or 'system' for auto-detection
+            darkModeSelector: '.dark'
         }
     }
 });
@@ -141,8 +122,8 @@ app.use(PrimeVue, {
 
 **TypeScript Support:**
 ```typescript
-import type BCCPresetConfig from '@bcc-code/design-tokens/bcc/primevue';
-// Full type safety and autocomplete available
+import BCCAuraOverride from '@bcc-code/design-tokens/bcc/primevue';
+import type { BCCAuraOverrideConfig } from '@bcc-code/design-tokens/bcc/primevue';
 ```
 
 ## 🌙 Dark Mode
@@ -164,34 +145,6 @@ Works out of the box with user's system preferences:
 }
 ```
 
-### Manual (Class-based)
-Control dark mode programmatically:
-
-```javascript
-// Toggle dark mode
-document.documentElement.classList.toggle('dark');
-
-// Enable dark mode
-document.documentElement.classList.add('dark');
-
-// Disable dark mode  
-document.documentElement.classList.remove('dark');
-```
-
-For PrimeVue projects:
-```javascript
-app.use(PrimeVue, {
-    theme: {
-        preset: BCCPreset,
-        options: {
-            darkModeSelector: '.dark' // Class-based
-            // or
-            darkModeSelector: 'system' // Automatic
-        }
-    }
-});
-```
-
 ## 📋 Available Tokens
 
 ### Colors
@@ -217,14 +170,6 @@ app.use(PrimeVue, {
 - **Text Sizes**: `--text-*` (mapped from font-size tokens)  
 - **Radius**: `--radius-*` (mapped from border-radius tokens)
 
-## 🎨 Framework Support
-
-### Current
-- ✅ **CSS Variables** - Universal support
-- ✅ **Tailwind CSS v4** - Native integration
-- ✅ **PrimeVue v4** - Configuration object with TypeScript support
-- ✅ **TypeScript** - Full type definitions for all exports
-
 ## 🛠️ Development
 
 ### Building from Source
@@ -265,4 +210,4 @@ MIT © BCC Code
 
 ---
 
-Made with ❤️ by [BCC Code](https://bcc.media)
+Made with ❤️ by [BCC Code](https://github.com/bcc-code)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcc-code/design-tokens",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Design tokens with CSS variables, Tailwind v4, and framework presets.",
   "type": "module",
   "main": "build/bcc/cdn/variables.css",
@@ -19,8 +19,7 @@
   },
   "files": [
     "build/**/*",
-    "src/presets/**/*",
-    "README.md"
+    "package.json"
   ],
   "scripts": {
     "build": "node build.js",