@bcc-code/design-tokens 2.0.1 → 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/build/bcc/primevue/index.d.ts

@@ -1,279 +1,102 @@
-/**
- * BCC Tailwind-Only PrimeVue Preset Type Definitions
- *
- * This preset uses actual color values from your design tokens instead of CSS variables,
- * ensuring compatibility with Tailwind-only setup while still falling back to Aura for
- * components you haven't customized.
- *
- * @example
- * ```typescript
- * import { definePreset } from '@primevue/themes';
- * import Aura from '@primevue/themes/aura';
- * import "@bcc-code/design-tokens/bcc/tailwind";
- * import BCCPresetConfig from "@bcc-code/design-tokens/bcc/primevue";
- *
- * const BCCPreset = definePreset(Aura, BCCPresetConfig);
- *
- * app.use(PrimeVue, {
- *   theme: {
- *     preset: BCCPreset,
- *     options: {
- *       darkModeSelector: '.dark'
- *     }
- *   }
- * });
- * ```
- */
-
-/**
- * Color palette interface for BCC design tokens
- * Maps to your bcc-100 through bcc-1000 and neutral color scales
- */
 interface BCCColorPalette {
-  50: string; // Lightest tint (bcc-100 / neutral-100)
-  100: string; // bcc-200 / neutral-200
-  200: string; // bcc-300 / neutral-300
-  300: string; // bcc-400 / neutral-400
-  400: string; // bcc-500 / neutral-500
-  500: string; // bcc-600 / neutral-600 (main brand color)
-  600: string; // bcc-700 / neutral-700
-  700: string; // bcc-800 / neutral-800
-  800: string; // bcc-900 / neutral-900
-  900: string; // bcc-1000 / neutral-1000
-  950: string; // Darkest shade (bcc-1000 / neutral-1100)
-}
-
-/**
- * Primary color configuration for both light and dark modes
- */
-interface BCCPrimaryColors {
-  color: string; // Main primary color
-  contrastColor: string; // Text color on primary background
-  hoverColor: string; // Hover state color
-  activeColor: string; // Active/pressed state color
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  950: string;
 }
 
-/**
- * Text color configuration
- */
-interface BCCTextColors {
-  color: string; // Default text color
-  hoverColor: string; // Text color on hover
-  mutedColor: string; // Subtle/secondary text color
-  highlightColor: string; // Highlighted/selected text color
+interface BCCPrimaryColorScheme {
+  color: string;
+  contrastColor: string;
+  hoverColor: string;
+  activeColor: string;
 }
 
-/**
- * Content area color configuration
- */
-interface BCCContentColors {
-  background: string; // Default background
-  hoverBackground: string; // Background on hover
-  borderColor: string; // Border color
-  color: string; // Text color
-  hoverColor: string; // Text color on hover
-}
-
-/**
- * Color scheme for light and dark modes
- */
-interface BCCColorScheme {
-  primary: BCCPrimaryColors;
-  surface: BCCColorPalette;
-  text: BCCTextColors;
-  content: BCCContentColors;
+interface BCCSurfaceColorScheme {
+  0: string;
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  950: string;
 }
 
-/**
- * Spacing configuration using rem values from BCC spacing scale
- */
-interface BCCSpacing {
-  x: string; // Horizontal spacing
-  y: string; // Vertical spacing
+interface BCCTextColorScheme {
+  color: string;
+  hoverColor: string;
+  mutedColor: string;
+  highlightColor: string;
 }
 
-/**
- * Button component configuration
- */
-interface BCCButtonConfig {
-  borderRadius: string; // border-radius-md (0.5rem / 8px)
-  padding: BCCSpacing; // Default padding (space-300/150)
-  sm: {
-    fontSize: string; // font-size-sm (0.875rem)
-    padding: BCCSpacing; // Small button padding (space-200/100)
-  };
-  lg: {
-    fontSize: string; // font-size-lg (1.25rem)
-    padding: BCCSpacing; // Large button padding (space-400/200)
-  };
+interface BCCContentColorScheme {
+  background: string;
+  hoverBackground: string;
+  borderColor: string;
+  color: string;
+  hoverColor: string;
 }
 
-/**
- * Card component configuration
- */
-interface BCCCardConfig {
-  borderRadius: string; // border-radius-lg (1rem / 16px)
-  body: {
-    padding: string; // space-300 (1.5rem / 24px)
-    gap: string; // space-200 (1rem / 16px)
-  };
-  header: {
-    padding: string; // space-300 (1.5rem / 24px)
-  };
-  footer: {
-    padding: string; // space-300 (1.5rem / 24px)
-  };
+interface BCCModeColorScheme {
+  primary: BCCPrimaryColorScheme;
+  surface: BCCSurfaceColorScheme;
+  text: BCCTextColorScheme;
+  content: BCCContentColorScheme;
 }
 
-/**
- * Panel component configuration
- */
-interface BCCPanelConfig {
-  borderRadius: string; // border-radius-lg (1rem / 16px)
-  header: {
-    padding: string; // space-300 (1.5rem / 24px)
-    borderRadius: string; // Rounded top corners only
-  };
-}
-
-/**
- * Input component configuration
- */
-interface BCCInputConfig {
-  borderRadius: string; // border-radius-md (0.5rem / 8px)
-  padding: BCCSpacing; // space-200/150 (1rem/0.75rem)
-}
-
-/**
- * Dialog component configuration
- */
-interface BCCDialogConfig {
-  borderRadius: string; // border-radius-xl (2rem / 24px)
-  header: {
-    padding: string; // space-400 (2rem / 32px)
-  };
-  content: {
-    padding: string; // space-400 (2rem / 32px)
-  };
-  footer: {
-    padding: string; // space-400 (2rem / 32px)
-  };
+interface BCCColorScheme {
+  light: BCCModeColorScheme;
+  dark: BCCModeColorScheme;
 }
 
-/**
- * DataTable component configuration
- */
-interface BCCDataTableConfig {
-  header: {
-    cell: {
-      padding: string; // space-200 (1rem / 16px)
-    };
-  };
-  body: {
-    cell: {
-      padding: string; // space-200 (1rem / 16px)
-    };
-  };
+interface BCCGlobalConfig {
+  css?: string;
 }
 
-/**
- * Complete BCC component configuration
- */
-interface BCCComponents {
-  button: BCCButtonConfig;
-  card: BCCCardConfig;
-  panel: BCCPanelConfig;
-  inputtext: BCCInputConfig;
-  dropdown: BCCInputConfig;
-  dialog: BCCDialogConfig;
-  datatable: BCCDataTableConfig;
+interface BCCComponentOverrides {
+  global?: BCCGlobalConfig;
+  [componentName: string]: any;
 }
 
-/**
- * Main BCC Tailwind Preset configuration interface
- */
-interface BCCTailwindPresetConfig {
-  semantic: {
-    primary: BCCColorPalette;
-    surface: BCCColorPalette;
-    colorScheme: {
-      light: BCCColorScheme;
-      dark: BCCColorScheme;
-    };
-  };
-  components: BCCComponents;
+interface BCCSemantic {
+  primary: BCCColorPalette;
+  surface: BCCColorPalette;
+  success: BCCColorPalette;
+  warn: BCCColorPalette;
+  danger: BCCColorPalette;
+  info: BCCColorPalette;
+  colorScheme: BCCColorScheme;
 }
 
-/**
- * BCC Tailwind-Only PrimeVue Preset
- *
- * A comprehensive preset that uses actual color values from your BCC design tokens
- * instead of CSS variables, ensuring compatibility with Tailwind-only setup while
- * still falling back to Aura for components you haven't customized.
- *
- * @example Basic Usage
- * ```typescript
- * import { createApp } from 'vue';
- * import PrimeVue from 'primevue/config';
- * import { definePreset } from '@primevue/themes';
- * import Aura from '@primevue/themes/aura';
- *
- * // Import Tailwind integration only (no CDN to avoid conflicts)
- * import '@bcc-code/design-tokens/bcc/tailwind';
- *
- * import BCCTailwindPreset from './BCCTailwindPreset';
- *
- * const app = createApp(App);
- * const BCCPreset = definePreset(Aura, BCCTailwindPreset);
- *
- * app.use(PrimeVue, {
- *   theme: {
- *     preset: BCCPreset,
- *     options: {
- *       darkModeSelector: '.dark'
- *     }
- *   }
- * });
- * ```
- *
- * @example Available Colors
- * Your BCC colors are available as:
- * - Primary: `{primary.50}` through `{primary.950}`
- * - Surface: `{surface.0}` through `{surface.950}`
- * - Light mode: Automatically uses your light theme colors
- * - Dark mode: Automatically switches when `.dark` class is present
- *
- * @example Spacing Values
- * All spacing uses your BCC spacing scale:
- * - Button padding: 1.5rem × 0.75rem (space-300 × space-150)
- * - Card padding: 1.5rem (space-300)
- * - Input padding: 1rem × 0.75rem (space-200 × space-150)
- * - Dialog padding: 2rem (space-400)
- *
- * @example Border Radius
- * Border radius values from your design tokens:
- * - Small: 0.5rem (border-radius-md, 8px)
- * - Large: 1rem (border-radius-lg, 16px)
- * - Extra Large: 2rem (border-radius-xl, 24px)
- */
-declare const BCCTailwindPreset: BCCTailwindPresetConfig;
+interface BCCAuraOverrideConfig {
+  semantic: BCCSemantic;
+  components?: BCCComponentOverrides;
+}declare const BCCAuraOverride: BCCAuraOverrideConfig;
 
-export default BCCTailwindPreset;
+export default BCCAuraOverride;
 
-// Export types for external use
 export type {
-  BCCTailwindPresetConfig,
+  BCCAuraOverrideConfig,
+  BCCSemantic,
+  BCCComponentOverrides,
   BCCColorPalette,
-  BCCPrimaryColors,
-  BCCTextColors,
-  BCCContentColors,
+  BCCPrimaryColorScheme,
+  BCCSurfaceColorScheme,
+  BCCTextColorScheme,
+  BCCContentColorScheme,
+  BCCModeColorScheme,
   BCCColorScheme,
-  BCCSpacing,
-  BCCButtonConfig,
-  BCCCardConfig,
-  BCCPanelConfig,
-  BCCInputConfig,
-  BCCDialogConfig,
-  BCCDataTableConfig,
-  BCCComponents,
-};
+  BCCGlobalConfig
+};

package/build/bcc/primevue/index.js

@@ -1,207 +1,180 @@
-/**
- * BCC Tailwind-Only PrimeVue Preset
- * 
- * This preset uses actual color values from your design tokens instead of CSS variables,
- * ensuring compatibility with Tailwind-only setup while still falling back to Aura for
- * components you haven't customized.
- */
-
-const BCCPresetConfig = {
+const BCCAuraOverride = {
   semantic: {
-    // PRIMARY: Use actual BCC brand color values
     primary: {
-      50: '#e6f2f1',   // bcc-100
-      100: '#d0e3e1',  // bcc-200  
-      200: '#accbc8',  // bcc-300
-      300: '#73b2ac',  // bcc-400
-      400: '#2e9087',  // bcc-500
-      500: '#187b73',  // bcc-600 (main brand)
-      600: '#0e6962',  // bcc-700
-      700: '#004e48',  // bcc-800
-      800: '#003d39',  // bcc-900
-      900: '#002320',  // bcc-1000
-      950: '#002320',  // darkest
+      50: 'var(--color-bcc-100)',
+      100: 'var(--color-bcc-200)', 
+      200: 'var(--color-bcc-300)',
+      300: 'var(--color-bcc-400)',
+      400: 'var(--color-bcc-500)',
+      500: 'var(--color-bcc-600)',
+      600: 'var(--color-bcc-700)',
+      700: 'var(--color-bcc-800)',
+      800: 'var(--color-bcc-900)',
+      900: 'var(--color-bcc-1000)',
+      950: 'var(--color-bcc-1000)',
     },
 
-    // SURFACE: Use actual neutral color values
     surface: {
-      0: '#ffffff',    // neutral-0 (light) / dark-neutral-100 (dark)
-      50: '#f7f8f9',   // neutral-100
-      100: '#f1f2f4',  // neutral-200  
-      200: '#dcdfe4',  // neutral-300
-      300: '#b3b9c4',  // neutral-400
-      400: '#8590a2',  // neutral-500
-      500: '#758195',  // neutral-600
-      600: '#626f86',  // neutral-700
-      700: '#4b5668',  // neutral-800
-      800: '#374152',  // neutral-900
-      900: '#282f3c',  // neutral-1000
-      950: '#1e242d',  // neutral-1100
+      0: 'var(--color-neutral-0)',
+      50: 'var(--color-neutral-100)',
+      100: 'var(--color-neutral-200)',
+      200: 'var(--color-neutral-300)',
+      300: 'var(--color-neutral-400)',
+      400: 'var(--color-neutral-500)',
+      500: 'var(--color-neutral-600)',
+      600: 'var(--color-neutral-700)',
+      700: 'var(--color-neutral-800)',
+      800: 'var(--color-neutral-900)',
+      900: 'var(--color-neutral-1000)',
+      950: 'var(--color-neutral-1100)',
+    },
+
+    success: {
+      50: 'var(--color-green-100)',
+      100: 'var(--color-green-200)',
+      200: 'var(--color-green-300)',
+      300: 'var(--color-green-400)',
+      400: 'var(--color-green-500)',
+      500: 'var(--color-green-600)',
+      600: 'var(--color-green-700)',
+      700: 'var(--color-green-800)',
+      800: 'var(--color-green-900)',
+      900: 'var(--color-green-1000)',
+      950: 'var(--color-green-1000)',
+    },
+
+    warn: {
+      50: 'var(--color-orange-100)',
+      100: 'var(--color-orange-200)',
+      200: 'var(--color-orange-300)',
+      300: 'var(--color-orange-400)',
+      400: 'var(--color-orange-500)',
+      500: 'var(--color-orange-600)',
+      600: 'var(--color-orange-700)',
+      700: 'var(--color-orange-800)',
+      800: 'var(--color-orange-900)',
+      900: 'var(--color-orange-1000)',
+      950: 'var(--color-orange-1000)',
+    },
+
+    danger: {
+      50: 'var(--color-red-100)',
+      100: 'var(--color-red-200)',
+      200: 'var(--color-red-300)',
+      300: 'var(--color-red-400)',
+      400: 'var(--color-red-500)',
+      500: 'var(--color-red-600)',
+      600: 'var(--color-red-700)',
+      700: 'var(--color-red-800)',
+      800: 'var(--color-red-900)',
+      900: 'var(--color-red-1000)',
+      950: 'var(--color-red-1000)',
+    },
+
+    info: {
+      50: 'var(--color-blue-100)',
+      100: 'var(--color-blue-200)',
+      200: 'var(--color-blue-300)',
+      300: 'var(--color-blue-400)',
+      400: 'var(--color-blue-500)',
+      500: 'var(--color-blue-600)',
+      600: 'var(--color-blue-700)',
+      700: 'var(--color-blue-800)',
+      800: 'var(--color-blue-900)',
+      900: 'var(--color-blue-1000)',
+      950: 'var(--color-blue-1000)',
     },
 
-    // COLOR SCHEME: Define light and dark mode colors
     colorScheme: {
       light: {
         primary: {
-          color: '{primary.500}',      // Maps to #187b73
-          contrastColor: '#ffffff',
-          hoverColor: '{primary.600}', // Maps to #0e6962
-          activeColor: '{primary.700}', // Maps to #004e48
+          color: 'var(--color-background-brand-default)',
+          contrastColor: 'var(--color-text-inverse)',
+          hoverColor: 'var(--color-background-brand-hover)',
+          activeColor: 'var(--color-background-brand-pressed)',
         },
+
         surface: {
-          0: '#ffffff',
-          50: '#f7f8f9',
-          100: '#f1f2f4',
-          200: '#dcdfe4',
-          300: '#b3b9c4',
-          400: '#8590a2',
-          500: '#758195',
-          600: '#626f86',
-          700: '#4b5668',
-          800: '#374152',
-          900: '#282f3c',
-          950: '#1e242d',
+          0: 'var(--color-elevation-surface-default)',
+          50: 'var(--color-elevation-surface-raised-default)',
+          100: 'var(--color-elevation-surface-overlay-default)',
+          200: 'var(--color-neutral-200)',
+          300: 'var(--color-neutral-300)',
+          400: 'var(--color-neutral-400)',
+          500: 'var(--color-neutral-500)',
+          600: 'var(--color-neutral-600)',
+          700: 'var(--color-neutral-700)',
+          800: 'var(--color-neutral-800)',
+          900: 'var(--color-neutral-900)',
+          950: 'var(--color-neutral-1100)',
         },
+
         text: {
-          color: '#1e242d',        // neutral-1100 for light mode
-          hoverColor: '#1e242d',
-          mutedColor: '#758195',   // neutral-600
-          highlightColor: '#0e6962', // bcc-700
+          color: 'var(--color-text-default)',
+          hoverColor: 'var(--color-text-default)',
+          mutedColor: 'var(--color-text-subtle)',
+          highlightColor: 'var(--color-text-selected)',
         },
+
         content: {
-          background: '#ffffff',
-          hoverBackground: '#f1f2f4',
-          borderColor: '#f7f8f9',
-          color: '#1e242d',
-          hoverColor: '#1e242d',
+          background: 'var(--color-elevation-surface-default)',
+          hoverBackground: 'var(--color-elevation-surface-hovered)',
+          borderColor: 'var(--color-border-default)',
+          color: 'var(--color-text-default)',
+          hoverColor: 'var(--color-text-default)',
         },
       },
+
       dark: {
         primary: {
-          color: '{primary.400}',      // Lighter brand for dark mode
-          contrastColor: '#161a1d',
-          hoverColor: '{primary.300}',
-          activeColor: '{primary.200}',
+          color: 'var(--color-background-brand-default)',
+          contrastColor: 'var(--color-text-inverse)',
+          hoverColor: 'var(--color-background-brand-hover)',
+          activeColor: 'var(--color-background-brand-pressed)',
         },
+
         surface: {
-          0: '#161a1d',    // dark-neutral-0
-          50: '#1d2125',   // dark-neutral-100
-          100: '#22272b',  // dark-neutral-200
-          200: '#2c333a',  // dark-neutral-300
-          300: '#454f59',  // dark-neutral-400
-          400: '#596773',  // dark-neutral-500
-          500: '#738496',  // dark-neutral-600
-          600: '#8c9bab',  // dark-neutral-700
-          700: '#9fadbc',  // dark-neutral-800
-          800: '#b6c2cf',  // dark-neutral-900
-          900: '#c7d1db',  // dark-neutral-1000
-          950: '#dee4ea',  // dark-neutral-1100
+          0: 'var(--color-elevation-surface-default)',
+          50: 'var(--color-elevation-surface-raised-default)',
+          100: 'var(--color-elevation-surface-overlay-default)',
+          200: 'var(--color-neutral-200)',
+          300: 'var(--color-neutral-300)',
+          400: 'var(--color-neutral-400)',
+          500: 'var(--color-neutral-500)',
+          600: 'var(--color-neutral-600)',
+          700: 'var(--color-neutral-700)',
+          800: 'var(--color-neutral-800)',
+          900: 'var(--color-neutral-900)',
+          950: 'var(--color-neutral-1100)',
         },
+
         text: {
-          color: '#dee4ea',        // dark-neutral-1100
-          hoverColor: '#dee4ea',
-          mutedColor: '#738496',   // dark-neutral-600
-          highlightColor: '#73b2ac', // bcc-400 for dark mode
+          color: 'var(--color-text-default)',
+          hoverColor: 'var(--color-text-default)',
+          mutedColor: 'var(--color-text-subtle)',
+          highlightColor: 'var(--color-text-selected)',
         },
+
         content: {
-          background: '#1d2125',
-          hoverBackground: '#22272b',
-          borderColor: '#2c333a',
-          color: '#dee4ea',
-          hoverColor: '#dee4ea',
+          background: 'var(--color-elevation-surface-default)',
+          hoverBackground: 'var(--color-elevation-surface-hovered)',
+          borderColor: 'var(--color-border-default)',
+          color: 'var(--color-text-default)',
+          hoverColor: 'var(--color-text-default)',
         },
       },
     },
   },
 
-  // COMPONENT CUSTOMIZATIONS: Use rem values from your spacing scale
   components: {
-    button: {
-      borderRadius: '0.5rem',    // border-radius-md = 8px
-      padding: {
-        x: '1.5rem',             // space-300 = 24px
-        y: '0.75rem',            // space-150 = 12px
-      },
-      sm: {
-        fontSize: '0.875rem',    // font-size-sm
-        padding: {
-          x: '1rem',             // space-200 = 16px
-          y: '0.5rem',           // space-100 = 8px
-        },
-      },
-      lg: {
-        fontSize: '1.25rem',     // font-size-lg
-        padding: {
-          x: '2rem',             // space-400 = 32px
-          y: '1rem',             // space-200 = 16px
-        },
-      },
+    global: {
+      css: `
+        .p-component {
+          font-family: var(--font-archivo), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+      `
     },
-
-    card: {
-      borderRadius: '1rem',      // border-radius-lg = 16px
-      body: {
-        padding: '1.5rem',       // space-300 = 24px
-        gap: '1rem',             // space-200 = 16px
-      },
-      header: {
-        padding: '1.5rem',       // space-300 = 24px
-      },
-      footer: {
-        padding: '1.5rem',       // space-300 = 24px
-      },
-    },
-
-    panel: {
-      borderRadius: '1rem',      // border-radius-lg = 16px
-      header: {
-        padding: '1.5rem',       // space-300 = 24px
-        borderRadius: '1rem 1rem 0 0',
-      },
-    },
-
-    inputtext: {
-      borderRadius: '0.5rem',    // border-radius-md = 8px
-      padding: {
-        x: '1rem',               // space-200 = 16px
-        y: '0.75rem',            // space-150 = 12px
-      },
-    },
-
-    dropdown: {
-      borderRadius: '0.5rem',    // border-radius-md = 8px
-      padding: {
-        x: '1rem',               // space-200 = 16px
-        y: '0.75rem',            // space-150 = 12px
-      },
-    },
-
-    dialog: {
-      borderRadius: '2rem',      // border-radius-xl = 24px
-      header: {
-        padding: '2rem',         // space-400 = 32px
-      },
-      content: {
-        padding: '2rem',         // space-400 = 32px
-      },
-      footer: {
-        padding: '2rem',         // space-400 = 32px
-      },
-    },
-
-    datatable: {
-      header: {
-        cell: {
-          padding: '1rem',       // space-200 = 16px
-        },
-      },
-      body: {
-        cell: {
-          padding: '1rem',       // space-200 = 16px
-        },
-      },
-    },
-  },
+  }
 };
 
-export default BCCPresetConfig;
+export default BCCAuraOverride;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcc-code/design-tokens",
-  "version": "2.0.1",
+  "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",