@bcc-code/design-tokens 3.0.13 → 3.0.17

package/README.md

@@ -1,6 +1,6 @@
 # @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.
+BCC Design System tokens for CSS, Tailwind v4, and PrimeVue with light/dark mode support.
 
 ## Installation
 
@@ -10,17 +10,13 @@ npm install @bcc-code/design-tokens
 
 ## Usage
 
-### CSS Variables (Recommended)
-
-Import auto-switching CSS variables with light/dark mode support:
+### CSS Variables
 
 ```css
 @import '@bcc-code/design-tokens/css';
 ```
 
-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:
+Provides light theme by default, dark theme with `.dark` class:
 
 ```css
 .card {
@@ -28,65 +24,51 @@ Use semantic tokens in your styles:
   color: var(--color-text-default);
   padding: var(--space-300);
   border-radius: var(--border-radius-md);
-  font-family: var(--font-family-archivo);
 }
 ```
 
-**Manual theme switching:**
+Toggle dark mode:
+
 ```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';
-@import '@bcc-code/design-tokens/css/dark';
 ```
 
-### Tailwind CSS v4 (Recommended)
-
-Import Tailwind utilities with auto-switching themes and `.dark` class support:
+### Tailwind CSS v4
 
 ```css
 @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-elevation-surface-default text-default p-300 radius-md">
-  Content with BCC design tokens
+  Content
 </div>
 
-<!-- Dark mode with .dark class -->
+<!-- Dark mode -->
 <div class="dark">
-  <div class="bg-elevation-surface-default text-default p-300 radius-md">
-    Content in dark mode
+  <div class="bg-elevation-surface-default text-default">
+    Dark content
   </div>
 </div>
 ```
 
-**Alternative theme-specific imports (optional):**
-```css
-@import '@bcc-code/design-tokens/tailwind/light';
-@import '@bcc-code/design-tokens/tailwind/dark';
-```
+### PrimeVue
 
-### PrimeVue Integration
+Install the required peer dependencies:
 
-Configure PrimeVue with BCC theme preset:
+```bash
+npm install primevue @primeuix/themes
+```
+
+Import the preset and overrides:
 
 ```javascript
 import { createApp } from 'vue'
 import PrimeVue from 'primevue/config'
 import BCCPreset from '@bcc-code/design-tokens/primevue'
+import '@bcc-code/design-tokens/primevue/overrides'
 
 const app = createApp(App)
 
@@ -94,158 +76,131 @@ app.use(PrimeVue, {
   theme: {
     preset: BCCPreset,
     options: {
-      prefix: 'p',
       darkModeSelector: '.dark',
-      cssLayer: false
+      cssLayer: {
+        name: 'primevue',
+        order: 'theme, base, primevue, custom'
+      }
     }
   }
 })
 ```
 
-Enable dark mode by adding the `dark` class to your root element:
+Toggle dark mode:
 
 ```javascript
-// Toggle dark mode
 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';
-}
 ```
 
+**What's Included:**
+- `@bcc-code/design-tokens/primevue` - PrimeVue Aura preset with BCC tokens
+- `@bcc-code/design-tokens/primevue/overrides` - CSS overrides for component styling
+
+## Available Exports
+
+### CSS
+- `@bcc-code/design-tokens/css` - Auto-switching theme (prefers-color-scheme)
+- `@bcc-code/design-tokens/css/light` - Light theme only
+- `@bcc-code/design-tokens/css/dark` - Dark theme only
+
+### Tailwind CSS
+- `@bcc-code/design-tokens/tailwind` - Auto-switching utilities
+- `@bcc-code/design-tokens/tailwind/light` - Light utilities only
+- `@bcc-code/design-tokens/tailwind/dark` - Dark utilities only
+
+### JavaScript
+- `@bcc-code/design-tokens/js/light` - Light theme tokens as JS objects
+- `@bcc-code/design-tokens/js/dark` - Dark theme tokens as JS objects
+
+### PrimeVue
+- `@bcc-code/design-tokens/primevue` - Aura preset configuration
+- `@bcc-code/design-tokens/primevue/overrides` - Component CSS overrides
+
 ## 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
+- **Colors**: Text, backgrounds, borders, states
+- **Typography**: Font families, sizes, weights, line heights
+- **Spacing**: Margins, padding, gaps (50-1000 scale)
+- **Border Radius**: Corner rounding
+- **Elevation**: Surface levels
 
 ## CDN Usage
 
 ```html
-<!-- Auto-switching CSS variables with .dark class support (recommended) -->
+<!-- CSS variables -->
 <link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/auto.css">
 
-<!-- Or Tailwind utilities with .dark class support -->
+<!-- Tailwind utilities -->
 <link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/tailwind-auto.css">
 
-<!-- Then add JavaScript for theme switching -->
+<!-- Theme toggle -->
 <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();
+  document.documentElement.classList.toggle('dark');
 </script>
 ```
 
-## Contributing
+## Development
 
-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
-   ```
-   
-   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
-
-- **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/`
-
-### 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:** 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
-
-### Pull Requests
-
-- Ensure `npm run build` runs successfully
-- Test changes with the demo application
-- Update documentation if adding new features
-- Follow conventional commit messages
+```bash
+git clone https://github.com/bcc-code/bcc-tokens.git
+cd bcc-tokens
+npm install
+npm run build
+```
 
-## Development
+Run demo:
+
+```bash
+cd demo
+npm install
+npm run dev
+```
+
+Visit `http://localhost:5173`
+
+## Project Structure
+
+```
+tokens/             # Source tokens (Figma Token Studio)
+export-tokens/      # Build system
+config/             # PrimeVue preset
+build/bcc/          # Generated output
+demo/               # Demo application
+```
+
+## Publishing
 
-A comprehensive demo application is available in the `demo/` directory featuring:
+### Stable Release (latest tag)
 
-- **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
+Automated via GitHub Actions when you push a version tag:
+
+```bash
+# Update version
+npm version patch  # or minor/major
+git push
+git push --tags
+```
+
+### Pre-release (next tag)
+
+For testing before stable release:
+
+```bash
+# Create pre-release version
+npm version prerelease --preid=next
+# Example: 3.0.14-next.0
+
+# Publish to next tag
+npm publish --tag next
+
+# Users can install with:
+# npm install @bcc-code/design-tokens@next
+```
+
+## Contributing
 
-Access the demo at `http://localhost:5173` after running `npm run dev` in the `demo/` directory.
+See [CONTRIBUTING.md](CONTRIBUTING.md)
 
 ## License
 
-MIT © BCC Code
+MIT © BCC Code

package/config/primevue-overrides.css

@@ -0,0 +1,179 @@
+/* primevue-overrides.css - CSS-level component overrides */
+@layer custom {
+  .p-accordionheader {
+    gap: var(--p-accordion-header-gap);
+  }
+
+  .p-autocomplete-input-multiple {
+    min-height: var(--p-autocomplete-input-multiple-min-height);
+    gap: var(--p-autocomplete-input-multiple-gap);
+  }
+
+  .p-badge-circle {
+    border-radius: var(--p-badge-circle-border-radius);
+  }
+
+  .p-button {
+    min-height: var(--p-button-min-height);
+  }
+
+  .p-button-sm {
+    min-height: var(--p-button-sm-min-height);
+  }
+
+  .p-button-lg {
+    min-height: var(--p-button-lg-min-height);
+  }
+
+  .p-button.p-button-icon-only {
+    min-width: var(--p-button-icon-only-width);
+  }
+
+  .p-button-sm.p-button-icon-only {
+    min-width: var(--p-button-sm-icon-only-width);
+  }
+
+  .p-button-lg.p-button-icon-only {
+    min-width: var(--p-button-lg-icon-only-width);
+  }
+
+  .p-chip {
+    border-radius: var(--p-chip-remove-icon-border-radius);
+  }
+
+  .p-divider {
+    gap: var(--p-divider-content-gap);
+  }
+
+  .p-inputgroupaddon {
+    min-height: var(--p-inputgroup-addon-min-height);
+  }
+
+  .p-inputtext {
+    min-height: var(--p-inputtext-min-height);
+  }
+
+  .p-inputtext-sm {
+    min-height: var(--p-inputtext-sm-min-height);
+  }
+
+  .p-inputtext-lg {
+    min-height: var(--p-inputtext-lg-min-height);
+  }
+
+  .p-message {
+    min-height: var(--p-message-content-min-height);
+  }
+
+  .p-message-sm {
+    min-height: var(--p-message-content-sm-min-height);
+  }
+
+  .p-message-lg {
+    min-height: var(--p-message-content-lg-min-height);
+  }
+
+  .p-multiselect {
+    min-height: var(--p-multiselect-min-height);
+  }
+
+  .p-multiselect-sm {
+    min-height: var(--p-multiselect-sm-min-height);
+  }
+
+  .p-multiselect-lg {
+    min-height: var(--p-multiselect-lg-min-height);
+  }
+
+  .p-multiselect-label-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .p-radiobutton {
+    gap: var(--p-radiobutton-gap);
+    border-radius: var(--p-radiobutton-border-radius);
+  }
+
+  .p-radiobutton-icon {
+    border-radius: var(--p-radiobutton-icon-border-radius);
+  }
+
+  .p-radiobutton-icon-sm {
+    border-radius: var(--p-radiobutton-icon-sm-border-radius);
+  }
+
+  .p-radiobutton-icon-lg {
+    border-radius: var(--p-radiobutton-icon-lg-border-radius);
+  }
+
+  .p-select {
+    min-height: var(--p-select-min-height);
+  }
+
+  .p-select-sm {
+    min-height: var(--p-select-sm-min-height);
+  }
+
+  .p-select-lg {
+    min-height: var(--p-select-lg-min-height);
+  }
+
+  .p-select-label {
+    display: flex;
+    align-items: center;
+  }
+
+  .p-select-option {
+    gap: var(--p-select-option-gap);
+  }
+
+  .p-tag-sm {
+    font-size: var(--p-tag-sm-font-size);
+    padding: var(--p-tag-sm-padding);
+  }
+
+  .p-tag-lg {
+    font-size: var(--p-tag-lg-font-size);
+    padding: var(--p-tag-lg-padding);
+  }
+
+  .p-tag-sm .p-tag-icon {
+    font-size: var(--p-tag-sm-icon-size);
+  }
+
+  .p-tag-lg .p-tag-icon {
+    font-size: var(--p-tag-lg-icon-size);
+  }
+
+  .p-textarea {
+    min-height: var(--p-textarea-min-height);
+  }
+
+  .p-togglebutton {
+    min-height: var(--p-togglebutton-min-height);
+    line-height: var(--p-togglebutton-line-height);
+  }
+
+  .p-togglebutton .p-togglebutton-sm {
+    min-height: var(--p-togglebutton-sm-min-height);
+    border-radius: var(--p-togglebutton-sm-border-radius);
+  }
+
+  .p-togglebutton-lg {
+    min-height: var(--p-togglebutton-lg-min-height);
+  }
+
+  .p-togglebutton .p-togglebutton-content {
+    min-height: var(--p-togglebutton-content-min-height);
+  }
+
+  .p-togglebutton-sm .p-togglebutton-content {
+    min-height: var(--p-togglebutton-content-sm-min-height);
+    border-radius: var(--p-togglebutton-content-sm-border-radius);
+  }
+
+  .p-togglebutton-lg .p-togglebutton-content {
+    min-height: var(--p-togglebutton-content-lg-min-height);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcc-code/design-tokens",
-  "version": "3.0.13",
+  "version": "3.0.17",
   "description": "Design tokens build system",
   "type": "module",
   "exports": {
@@ -16,12 +16,14 @@
       "import": "./config/primevue.config.js",
       "types": "./config/primevue.config.d.ts"
     },
+    "./primevue/overrides": "./config/primevue-overrides.css",
     "./package.json": "./package.json"
   },
   "files": [
     "build/**/*",
     "config/primevue.config.js",
     "config/primevue.config.d.ts",
+    "config/primevue-overrides.css",
     "README.md",
     "package.json"
   ],
@@ -37,13 +39,10 @@
   },
   "homepage": "https://github.com/bcc-code/bcc-tokens#readme",
   "dependencies": {
-    "@tokens-studio/sd-transforms": "^2.0.1",
+    "@tokens-studio/sd-transforms": "^2.0.2",
     "style-dictionary": "^5.0.1"
   },
   "peerDependencies": {
-    "@primeuix/themes": "^1.1.1"
-  },
-  "overrides": {
-    "tmp": "^0.2.4"
+    "@primeuix/themes": "^2.0.0"
   }
 }