@bcc-code/design-tokens 1.0.21 → 2.0.1

package/build/bcc/primevue/index.d.ts

@@ -0,0 +1,279 @@
+/**
+ * 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
+}
+
+/**
+ * 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
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Spacing configuration using rem values from BCC spacing scale
+ */
+interface BCCSpacing {
+  x: string; // Horizontal spacing
+  y: string; // Vertical spacing
+}
+
+/**
+ * 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)
+  };
+}
+
+/**
+ * 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)
+  };
+}
+
+/**
+ * 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)
+  };
+}
+
+/**
+ * DataTable component configuration
+ */
+interface BCCDataTableConfig {
+  header: {
+    cell: {
+      padding: string; // space-200 (1rem / 16px)
+    };
+  };
+  body: {
+    cell: {
+      padding: string; // space-200 (1rem / 16px)
+    };
+  };
+}
+
+/**
+ * Complete BCC component configuration
+ */
+interface BCCComponents {
+  button: BCCButtonConfig;
+  card: BCCCardConfig;
+  panel: BCCPanelConfig;
+  inputtext: BCCInputConfig;
+  dropdown: BCCInputConfig;
+  dialog: BCCDialogConfig;
+  datatable: BCCDataTableConfig;
+}
+
+/**
+ * Main BCC Tailwind Preset configuration interface
+ */
+interface BCCTailwindPresetConfig {
+  semantic: {
+    primary: BCCColorPalette;
+    surface: BCCColorPalette;
+    colorScheme: {
+      light: BCCColorScheme;
+      dark: BCCColorScheme;
+    };
+  };
+  components: BCCComponents;
+}
+
+/**
+ * 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;
+
+export default BCCTailwindPreset;
+
+// Export types for external use
+export type {
+  BCCTailwindPresetConfig,
+  BCCColorPalette,
+  BCCPrimaryColors,
+  BCCTextColors,
+  BCCContentColors,
+  BCCColorScheme,
+  BCCSpacing,
+  BCCButtonConfig,
+  BCCCardConfig,
+  BCCPanelConfig,
+  BCCInputConfig,
+  BCCDialogConfig,
+  BCCDataTableConfig,
+  BCCComponents,
+};

package/build/bcc/primevue/index.js

@@ -0,0 +1,207 @@
+/**
+ * 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 = {
+  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
+    },
+
+    // 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
+    },
+
+    // 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
+        },
+        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',
+        },
+        text: {
+          color: '#1e242d',        // neutral-1100 for light mode
+          hoverColor: '#1e242d',
+          mutedColor: '#758195',   // neutral-600
+          highlightColor: '#0e6962', // bcc-700
+        },
+        content: {
+          background: '#ffffff',
+          hoverBackground: '#f1f2f4',
+          borderColor: '#f7f8f9',
+          color: '#1e242d',
+          hoverColor: '#1e242d',
+        },
+      },
+      dark: {
+        primary: {
+          color: '{primary.400}',      // Lighter brand for dark mode
+          contrastColor: '#161a1d',
+          hoverColor: '{primary.300}',
+          activeColor: '{primary.200}',
+        },
+        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
+        },
+        text: {
+          color: '#dee4ea',        // dark-neutral-1100
+          hoverColor: '#dee4ea',
+          mutedColor: '#738496',   // dark-neutral-600
+          highlightColor: '#73b2ac', // bcc-400 for dark mode
+        },
+        content: {
+          background: '#1d2125',
+          hoverBackground: '#22272b',
+          borderColor: '#2c333a',
+          color: '#dee4ea',
+          hoverColor: '#dee4ea',
+        },
+      },
+    },
+  },
+
+  // 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
+        },
+      },
+    },
+
+    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;

package/build/bcc/tailwind/dark.css

@@ -0,0 +1,165 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@layer base {
+  @variant dark {
+
+    /* COLOR: TEXT */
+      --color-text-default: var(--color-dark-neutral-1100);
+      --color-text-subtle: var(--color-dark-neutral-600);
+      --color-text-subtler: var(--color-dark-neutral-400);
+      --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
+      --color-text-selected: var(--color-bcc-400);
+      --color-text-inverse: var(--color-dark-neutral-0);
+      --color-text-brand: var(--color-bcc-400);
+      --color-text-success: var(--color-green-500);
+      --color-text-warning: var(--color-red-500);
+      --color-text-information: var(--color-neutral-0);
+      --color-text-danger: var(--color-neutral-0);
+      --color-text-accent-orange-default: var(--color-orange-400);
+      --color-text-accent-orange-bold: var(--color-orange-300);
+      --color-text-accent-yellow-default: var(--color-red-400);
+      --color-text-accent-yellow-bold: var(--color-red-300);
+      --color-text-accent-green-default: var(--color-green-400);
+      --color-text-accent-green-bold: var(--color-green-300);
+      --color-text-accent-teal-default: var(--color-teal-400);
+      --color-text-accent-teal-bold: var(--color-teal-300);
+      --color-text-accent-brown-default: var(--color-brown-400);
+      --color-text-accent-brown-bold: var(--color-brown-300);
+      --color-text-accent-blue-default: var(--color-blue-400);
+      --color-text-accent-blue-bold: var(--color-blue-300);
+      --color-text-accent-purple-default: var(--color-purple-400);
+      --color-text-accent-purple-bold: var(--color-purple-300);
+      --color-text-accent-magenta-default: var(--color-magenta-400);
+      --color-text-accent-magenta-bold: var(--color-magenta-300);
+
+    /* COLOR: LINK */
+      --color-link-default: var(--color-blue-500);
+      --color-link-hover: var(--color-blue-400);
+      --color-link-visited-default: var(--color-blue-200);
+      --color-link-visited-hover: var(--color-blue-200);
+
+    /* COLOR: BACKGROUND */
+      --color-background-brand-default: var(--color-bcc-500);
+      --color-background-brand-hover: var(--color-bcc-400);
+      --color-background-brand-pressed: var(--color-bcc-300);
+      --color-background-brand-subtler-default: var(--color-bcc-200);
+      --color-background-brand-subtler-hover: var(--color-bcc-300);
+      --color-background-brand-subtler-pressed: var(--color-bcc-400);
+      --color-background-brand-subtle-default: var(--color-bcc-400);
+      --color-background-brand-subtle-hover: var(--color-bcc-500);
+      --color-background-brand-subtle-pressed: var(--color-bcc-500);
+      --color-background-brand-bold-default: var(--color-bcc-300);
+      --color-background-brand-bold-hover: var(--color-bcc-200);
+      --color-background-brand-bold-pressed: var(--color-bcc-1000);
+      --color-background-accent-red-default: var(--color-red-500);
+      --color-background-accent-red-hover: var(--color-red-400);
+      --color-background-accent-red-pressed: var(--color-red-300);
+      --color-background-accent-red-subtler-default: var(--color-red-200);
+      --color-background-accent-red-subtler-hover: var(--color-red-300);
+      --color-background-accent-red-subtler-pressed: var(--color-red-400);
+      --color-background-accent-red-subtle-default: var(--color-red-400);
+      --color-background-accent-red-subtle-hover: var(--color-red-500);
+      --color-background-accent-red-subtle-pressed: var(--color-red-500);
+      --color-background-accent-red-bold-default: var(--color-red-300);
+      --color-background-accent-red-bold-hover: var(--color-red-400);
+      --color-background-accent-red-bold-pressed: var(--color-red-500);
+      --color-background-accent-orange-default: var(--color-orange-500);
+      --color-background-accent-orange-hover: var(--color-orange-400);
+      --color-background-accent-orange-pressed: var(--color-orange-300);
+      --color-background-accent-orange-subtler-default: var(--color-orange-200);
+      --color-background-accent-orange-subtler-hover: var(--color-orange-300);
+      --color-background-accent-orange-subtler-pressed: var(--color-orange-400);
+      --color-background-accent-orange-subtle-default: var(--color-orange-400);
+      --color-background-accent-orange-subtle-hover: var(--color-orange-500);
+      --color-background-accent-orange-subtle-pressed: var(--color-orange-500);
+      --color-background-accent-orange-bold-default: var(--color-orange-300);
+      --color-background-accent-orange-bold-hover: var(--color-orange-400);
+      --color-background-accent-orange-bold-pressed: var(--color-orange-500);
+      --color-background-accent-green-default: var(--color-green-500);
+      --color-background-accent-green-hover: var(--color-green-500);
+      --color-background-accent-green-pressed: var(--color-green-400);
+      --color-background-accent-green-subtler-default: var(--color-green-200);
+      --color-background-accent-green-subtler-hover: var(--color-green-300);
+      --color-background-accent-green-subtler-pressed: var(--color-green-400);
+      --color-background-accent-green-subtle-default: var(--color-green-400);
+      --color-background-accent-green-subtle-hover: var(--color-green-500);
+      --color-background-accent-green-subtle-pressed: var(--color-green-500);
+      --color-background-accent-green-bold-default: var(--color-green-300);
+      --color-background-accent-green-bold-hover: var(--color-green-400);
+      --color-background-accent-green-bold-pressed: var(--color-green-500);
+      --color-background-accent-teal-default: var(--color-teal-500);
+      --color-background-accent-teal-hover: var(--color-teal-400);
+      --color-background-accent-teal-pressed: var(--color-teal-300);
+      --color-background-accent-teal-subtler-default: var(--color-teal-200);
+      --color-background-accent-teal-subtler-hover: var(--color-teal-300);
+      --color-background-accent-teal-subtle-default: var(--color-teal-400);
+      --color-background-accent-teal-bold-default: var(--color-teal-300);
+      --color-background-accent-sand-default: var(--color-brown-500);
+      --color-background-accent-sand-subtler-default: var(--color-brown-200);
+      --color-background-accent-sand-subtler-hover: var(--color-brown-300);
+      --color-background-accent-sand-subtle-default: var(--color-brown-400);
+      --color-background-accent-sand-bold-default: var(--color-brown-300);
+      --color-background-accent-blue-default: var(--color-blue-500);
+      --color-background-accent-blue-subtler-default: var(--color-blue-200);
+      --color-background-accent-blue-subtle-default: var(--color-blue-400);
+      --color-background-accent-blue-bold-default: var(--color-blue-300);
+      --color-background-accent-purple-default: var(--color-purple-500);
+      --color-background-accent-purple-subtler-default: var(--color-purple-200);
+      --color-background-accent-purple-subtle-default: var(--color-purple-400);
+      --color-background-accent-purple-bold-default: var(--color-purple-300);
+      --color-background-accent-magenta-default: var(--color-magenta-500);
+      --color-background-accent-magenta-subtler-default: var(--color-magenta-200);
+      --color-background-accent-magenta-subtle-default: var(--color-magenta-400);
+      --color-background-accent-magenta-bold-default: var(--color-magenta-300);
+      --color-background-neutral-default: var(--color-neutral-alpha-300-a);
+      --color-background-neutral-hover: var(--color-neutral-alpha-400-a);
+      --color-background-neutral-pressed: var(--color-neutral-alpha-500-a);
+      --color-background-neutral-subtle-pressed: var(--color-neutral-alpha-200-a);
+      --color-background-neutral-subtle-default: var(--color-dark-neutral-alpha-100-a);
+      --color-background-neutral-subtle-hover: var(--color-neutral-alpha-200-a);
+      --color-background-neutral-bold-hover: var(--color-neutral-alpha-100-a);
+      --color-background-neutral-bold-pressed: var(--color-neutral-alpha-200-a);
+
+    /* COLOR: BORDER */
+      --color-border-default: var(--color-neutral-100);
+      --color-border-bold: var(--color-neutral-200);
+      --color-border-disabled: var(--color-neutral-100);
+      --color-border-selected: var(--color-bcc-500);
+      --color-border-accent-red: var(--color-red-500);
+      --color-border-accent-orange: var(--color-orange-500);
+      --color-border-accent-green: var(--color-green-500);
+      --color-border-accent-teal: var(--color-teal-500);
+      --color-border-accent-sand: var(--color-brown-500);
+      --color-border-accent-blue: var(--color-blue-500);
+      --color-border-accent-purple: var(--color-purple-500);
+      --color-border-accent-magenta: var(--color-magenta-500);
+
+    /* COLOR: ICON */
+      --color-icon-default: var(--color-neutral-100);
+      --color-icon-bold: var(--color-neutral-200);
+      --color-icon-disabled: var(--color-neutral-100);
+      --color-icon-selected: var(--color-bcc-500);
+      --color-icon-accent-red: var(--color-red-500);
+      --color-icon-accent-orage: var(--color-orange-500);
+      --color-icon-accent-green: var(--color-green-500);
+      --color-icon-accent-teal: var(--color-teal-500);
+      --color-icon-accent-sand: var(--color-brown-500);
+      --color-icon-accent-blue: var(--color-blue-500);
+      --color-icon-accent-purple: var(--color-purple-500);
+      --color-icon-accent-magenta: var(--color-magenta-500);
+
+    /* COLOR: ELEVATION */
+      --color-elevation-surface-default: var(--color-dark-neutral-100);
+      --color-elevation-surface-hovered: var(--color-dark-neutral-200);
+      --color-elevation-surface-pressed: var(--color-dark-neutral-300);
+      --color-elevation-surface-overlay-default: var(--color-dark-neutral-200);
+      --color-elevation-surface-overlay-hovered: var(--color-dark-neutral-300);
+      --color-elevation-surface-overlay-pressed: var(--color-dark-neutral-400);
+      --color-elevation-surface-raised-default: var(--color-dark-neutral-200);
+      --color-elevation-surface-raised-hovered: var(--color-dark-neutral-300);
+      --color-elevation-surface-raised-pressed: var(--color-dark-neutral-400);
+      --color-elevation-surface-sunken-default: var(--color-dark-neutral-0);
+  }
+}

package/build/bcc/tailwind/index.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * 
+ * Complete Tailwind CSS integration for bcc design tokens.
+ * Import this file to get everything you need:
+ * - Base Tailwind CSS
+ * - Light theme tokens
+ * - Dark theme with automatic switching
+ * - Utility classes
+ */
+
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@import "./light.css";
+@import "./dark.css";
+@import "./utilities.css";