@bcc-code/design-tokens 1.0.20 → 2.0.0

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

@@ -0,0 +1,47 @@
+/**
+ * BCC Design Tokens Preset Configuration for PrimeVue v4
+ *
+ * This preset configuration object extends the Aura theme with BCC design tokens.
+ * It maps your core design tokens to PrimeVue's semantic system while
+ * keeping Aura's component-specific styling as fallback.
+ *
+ * @example
+ * ```typescript
+ * import { definePreset } from '@primevue/themes';
+ * import Aura from '@primevue/themes/aura';
+ * import BCCPresetConfig from '@bcc-code/design-tokens/bcc/primevue';
+ *
+ * const BCCPreset = definePreset(Aura, BCCPresetConfig);
+ *
+ * app.use(PrimeVue, {
+ *   theme: {
+ *     preset: BCCPreset,
+ *     options: {
+ *       darkModeSelector: '.dark'
+ *     }
+ *   }
+ * });
+ * ```
+ *
+ * @example
+ * Make sure to import your CSS tokens first:
+ * ```typescript
+ * import '@bcc-code/design-tokens/bcc/cdn';
+ * ```
+ */
+
+interface BCCPresetConfig {
+  semantic?: {
+    primary?: Record<string, string>;
+    surface?: Record<string, string>;
+    colorScheme?: {
+      light?: Record<string, any>;
+      dark?: Record<string, any>;
+    };
+  };
+  components?: Record<string, any>;
+}
+
+declare const BCCPresetConfig: BCCPresetConfig;
+
+export default BCCPresetConfig;

package/build/bcc/primevue/index.js

@@ -0,0 +1,299 @@
+/**
+ * BCC Design Tokens Preset for PrimeVue v4
+ *
+ * This preset extends the Aura theme with BCC design tokens.
+ * It maps your core design tokens to PrimeVue's semantic system while
+ * keeping Aura's component-specific styling as fallback.
+ *
+ * Usage:
+ * ```javascript
+ * import PrimeVue from "primevue/config";
+ * import { definePreset } from '@primevue/themes';
+ * import Aura from '@primevue/themes/aura';
+ * import BCCPresetConfig from '@bcc-code/design-tokens/bcc/primevue';
+ *
+ * const BCCPreset = definePreset(Aura, BCCPresetConfig);
+ *
+ * app.use(PrimeVue, {
+ *   theme: {
+ *     preset: BCCPreset,
+ *     options: {
+ *       darkModeSelector: '.dark'
+ *     }
+ *   },
+ * });
+ *
+ * app.mount("#app");
+ * ```
+ *
+ * Make sure to import your CSS tokens first:
+ * ```javascript
+ * import '@bcc-code/design-tokens/bcc/cdn';
+ * ```
+ */
+
+const BCCPresetConfig = {
+  semantic: {
+    // PRIMARY: Map BCC brand colors to PrimeVue primary system
+    primary: {
+      50: "var(--color-bcc-100)", // Lightest tint
+      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)", // Main brand color - primary action color
+      600: "var(--color-bcc-700)",
+      700: "var(--color-bcc-800)",
+      800: "var(--color-bcc-900)",
+      900: "var(--color-bcc-1000)", // Darkest shade
+      950: "var(--color-bcc-1000)", // Extra dark (reuse darkest)
+    },
+
+    // SURFACES: Map your elevation/neutral tokens to PrimeVue surface system
+    surface: {
+      0: "var(--color-elevation-surface-default)", // Main background (white/dark)
+      50: "var(--color-elevation-surface-raised-default)", // Slightly elevated (cards)
+      100: "var(--color-elevation-surface-overlay-default)", // Modals, dropdowns
+      200: "var(--color-neutral-200)", // Subtle contrast
+      300: "var(--color-neutral-300)", // Borders, dividers
+      400: "var(--color-neutral-400)", // Disabled elements
+      500: "var(--color-neutral-500)", // Placeholder text
+      600: "var(--color-neutral-600)", // Secondary text
+      700: "var(--color-neutral-700)", // Body text
+      800: "var(--color-neutral-800)", // Headings
+      900: "var(--color-neutral-900)", // High contrast text
+      950: "var(--color-neutral-1100)", // Highest contrast
+    },
+
+    // COLOR SCHEME: Define how colors behave in light and dark modes
+    colorScheme: {
+      light: {
+        // Primary action colors
+        primary: {
+          color: "var(--color-background-brand-default)",
+          contrastColor: "var(--color-text-inverse)",
+          hoverColor: "var(--color-background-brand-hover)",
+          activeColor: "var(--color-background-brand-pressed)",
+        },
+
+        // Surface colors for light mode
+        surface: {
+          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 colors
+        text: {
+          color: "var(--color-text-default)",
+          hoverColor: "var(--color-text-default)",
+          mutedColor: "var(--color-text-subtle)",
+          highlightColor: "var(--color-text-selected)",
+        },
+
+        // Content areas (forms, panels, etc.)
+        content: {
+          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)",
+        },
+
+        // Navigation (menus, breadcrumbs, etc.)
+        navigation: {
+          list: {
+            padding: "var(--space-150)",
+            gap: "var(--space-50)",
+          },
+          item: {
+            focusBackground: "var(--color-background-neutral-subtle-hover)",
+            activeBackground: "var(--color-background-brand-subtle-default)",
+            color: "var(--color-text-default)",
+            focusColor: "var(--color-text-default)",
+            activeColor: "var(--color-text-selected)",
+            padding: "var(--space-150)",
+            borderRadius: "var(--border-radius-md)",
+            gap: "var(--space-150)",
+            icon: {
+              color: "var(--color-icon-default)",
+              focusColor: "var(--color-icon-default)",
+              activeColor: "var(--color-icon-selected)",
+            },
+          },
+        },
+      },
+
+      dark: {
+        // Primary colors (same as light - your tokens handle the mode switching)
+        primary: {
+          color: "var(--color-background-brand-default)",
+          contrastColor: "var(--color-text-inverse)",
+          hoverColor: "var(--color-background-brand-hover)",
+          activeColor: "var(--color-background-brand-pressed)",
+        },
+
+        // Surface colors for dark mode (your CSS variables handle the switching)
+        surface: {
+          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 colors (your tokens handle light/dark switching)
+        text: {
+          color: "var(--color-text-default)",
+          hoverColor: "var(--color-text-default)",
+          mutedColor: "var(--color-text-subtle)",
+          highlightColor: "var(--color-text-selected)",
+        },
+
+        content: {
+          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)",
+        },
+
+        navigation: {
+          list: {
+            padding: "var(--space-150)",
+            gap: "var(--space-50)",
+          },
+          item: {
+            focusBackground: "var(--color-background-neutral-subtle-hover)",
+            activeBackground: "var(--color-background-brand-subtle-default)",
+            color: "var(--color-text-default)",
+            focusColor: "var(--color-text-default)",
+            activeColor: "var(--color-text-selected)",
+            padding: "var(--space-150)",
+            borderRadius: "var(--border-radius-md)",
+            gap: "var(--space-150)",
+            icon: {
+              color: "var(--color-icon-default)",
+              focusColor: "var(--color-icon-default)",
+              activeColor: "var(--color-icon-selected)",
+            },
+          },
+        },
+      },
+    },
+  },
+
+  // COMPONENT CUSTOMIZATIONS: Apply your spacing and radius tokens to specific components
+  components: {
+    // Buttons
+    button: {
+      borderRadius: "var(--border-radius-md)",
+      padding: {
+        x: "var(--space-300)", // 24px horizontal padding
+        y: "var(--space-150)", // 12px vertical padding
+      },
+      sm: {
+        fontSize: "var(--font-size-sm)",
+        padding: {
+          x: "var(--space-200)", // 16px horizontal
+          y: "var(--space-100)", // 8px vertical
+        },
+      },
+      lg: {
+        fontSize: "var(--font-size-lg)",
+        padding: {
+          x: "var(--space-400)", // 32px horizontal
+          y: "var(--space-200)", // 16px vertical
+        },
+      },
+    },
+
+    // Cards
+    card: {
+      borderRadius: "var(--border-radius-lg)",
+      body: {
+        padding: "var(--space-300)",
+        gap: "var(--space-200)",
+      },
+      header: {
+        padding: "var(--space-300)",
+      },
+      footer: {
+        padding: "var(--space-300)",
+      },
+    },
+
+    // Panels (accordions, fieldsets, etc.)
+    panel: {
+      borderRadius: "var(--border-radius-lg)",
+      header: {
+        padding: "var(--space-300)",
+        borderRadius: "var(--border-radius-lg) var(--border-radius-lg) 0 0",
+      },
+    },
+
+    // Form inputs
+    inputtext: {
+      borderRadius: "var(--border-radius-md)",
+      padding: {
+        x: "var(--space-200)",
+        y: "var(--space-150)",
+      },
+    },
+
+    // Dropdowns and selects
+    dropdown: {
+      borderRadius: "var(--border-radius-md)",
+      padding: {
+        x: "var(--space-200)",
+        y: "var(--space-150)",
+      },
+    },
+
+    // Dialogs and overlays
+    dialog: {
+      borderRadius: "var(--border-radius-xl)",
+      header: {
+        padding: "var(--space-400)",
+      },
+      content: {
+        padding: "var(--space-400)",
+      },
+      footer: {
+        padding: "var(--space-400)",
+      },
+    },
+
+    // Data tables
+    datatable: {
+      header: {
+        cell: {
+          padding: "var(--space-200)",
+        },
+      },
+      body: {
+        cell: {
+          padding: "var(--space-200)",
+        },
+      },
+    },
+  },
+};
+
+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";