@burdenoff/fe-libs 2026.510.126

package/src/shared/tokens/build/foundation.css

@@ -0,0 +1,175 @@
+/* Foundation Tokens - Auto-generated */
+:root {
+  /* Color Palette */
+  --palette-gray-50: #F9FAFB;
+  --palette-gray-100: #F3F4F6;
+  --palette-gray-200: #E5E7EB;
+  --palette-gray-300: #D1D5DB;
+  --palette-gray-400: #9CA3AF;
+  --palette-gray-500: #6B7280;
+  --palette-gray-600: #4B5563;
+  --palette-gray-700: #374151;
+  --palette-gray-800: #1F2937;
+  --palette-gray-900: #111827;
+  --palette-gray-950: #030712;
+  --palette-blue-50: #EFF6FF;
+  --palette-blue-100: #DBEAFE;
+  --palette-blue-200: #BFDBFE;
+  --palette-blue-300: #93C5FD;
+  --palette-blue-400: #60A5FA;
+  --palette-blue-500: #3B82F6;
+  --palette-blue-600: #2563EB;
+  --palette-blue-700: #1D4ED8;
+  --palette-blue-800: #1E40AF;
+  --palette-blue-900: #1E3A8A;
+  --palette-blue-950: #172554;
+  --palette-green-50: #F0FDF4;
+  --palette-green-100: #DCFCE7;
+  --palette-green-200: #BBF7D0;
+  --palette-green-300: #86EFAC;
+  --palette-green-400: #4ADE80;
+  --palette-green-500: #22C55E;
+  --palette-green-600: #16A34A;
+  --palette-green-700: #15803D;
+  --palette-green-800: #166534;
+  --palette-green-900: #14532D;
+  --palette-green-950: #052E16;
+  --palette-purple-50: #FAF5FF;
+  --palette-purple-100: #F3E8FF;
+  --palette-purple-200: #E9D5FF;
+  --palette-purple-300: #D8B4FE;
+  --palette-purple-400: #C084FC;
+  --palette-purple-500: #A855F7;
+  --palette-purple-600: #9333EA;
+  --palette-purple-700: #7E22CE;
+  --palette-purple-800: #6B21A8;
+  --palette-purple-900: #581C87;
+  --palette-purple-950: #3B0764;
+  --palette-red-50: #FEF2F2;
+  --palette-red-100: #FEE2E2;
+  --palette-red-200: #FECACA;
+  --palette-red-300: #FCA5A5;
+  --palette-red-400: #F87171;
+  --palette-red-500: #EF4444;
+  --palette-red-600: #DC2626;
+  --palette-red-700: #B91C1C;
+  --palette-red-800: #991B1B;
+  --palette-red-900: #7F1D1D;
+  --palette-red-950: #450A0A;
+  --palette-yellow-50: #FEFCE8;
+  --palette-yellow-100: #FEF9C3;
+  --palette-yellow-200: #FEF08A;
+  --palette-yellow-300: #FDE047;
+  --palette-yellow-400: #FACC15;
+  --palette-yellow-500: #EAB308;
+  --palette-yellow-600: #CA8A04;
+  --palette-yellow-700: #A16207;
+  --palette-yellow-800: #854D0E;
+  --palette-yellow-900: #713F12;
+  --palette-yellow-950: #422006;
+  --palette-emerald-50: #ECFDF5;
+  --palette-emerald-100: #D1FAE5;
+  --palette-emerald-200: #A7F3D0;
+  --palette-emerald-300: #6EE7B7;
+  --palette-emerald-400: #34D399;
+  --palette-emerald-500: #10B981;
+  --palette-emerald-600: #059669;
+  --palette-emerald-700: #047857;
+  --palette-emerald-800: #065F46;
+  --palette-emerald-900: #064E3B;
+  --palette-emerald-950: #022C22;
+  --palette-white: #FFFFFF;
+  --palette-black: #000000;
+
+  /* Alpha Colors */
+  --alpha-black-10: rgba(0, 0, 0, 0.1);
+  --alpha-black-20: rgba(0, 0, 0, 0.2);
+  --alpha-black-30: rgba(0, 0, 0, 0.3);
+  --alpha-black-40: rgba(0, 0, 0, 0.4);
+  --alpha-black-50: rgba(0, 0, 0, 0.5);
+  --alpha-black-60: rgba(0, 0, 0, 0.6);
+  --alpha-black-70: rgba(0, 0, 0, 0.7);
+  --alpha-black-80: rgba(0, 0, 0, 0.8);
+  --alpha-black-90: rgba(0, 0, 0, 0.9);
+  --alpha-white-10: rgba(255, 255, 255, 0.1);
+  --alpha-white-20: rgba(255, 255, 255, 0.2);
+  --alpha-white-30: rgba(255, 255, 255, 0.3);
+  --alpha-white-40: rgba(255, 255, 255, 0.4);
+  --alpha-white-50: rgba(255, 255, 255, 0.5);
+  --alpha-white-60: rgba(255, 255, 255, 0.6);
+  --alpha-white-70: rgba(255, 255, 255, 0.7);
+  --alpha-white-80: rgba(255, 255, 255, 0.8);
+  --alpha-white-90: rgba(255, 255, 255, 0.9);
+
+  /* Spacing */
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+  --spacing-20: 80px;
+  --spacing-24: 96px;
+
+  /* Font Sizes */
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-md: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 30px;
+  --font-size-4xl: 36px;
+
+  /* Font Weights */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Line Heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Font Families */
+  --font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --font-family-mono: 'Fira Code', 'Roboto Mono', 'Courier New', monospace;
+
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-pill: 9999px;
+
+  /* Shadows */
+  --shadow-elevation-0: none;
+  --shadow-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --shadow-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.2);
+
+  /* Motion Durations */
+  --motion-duration-fast: 150ms;
+  --motion-duration-normal: 250ms;
+  --motion-duration-slow: 350ms;
+
+  /* Motion Easings */
+  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Z-Index */
+  --z-base: 0;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-overlay: 1200;
+  --z-modal: 1300;
+  --z-toast: 1400;
+}

package/src/shared/tokens/build/semantic.css

@@ -0,0 +1,301 @@
+/* Semantic Tokens - Light Mode
+ * Design system tokens for consistent theming across the application.
+ * Includes backward compatibility aliases for legacy token names.
+ */
+:root {
+  --color-bg-canvas: #F9FAFB;
+  --color-bg-surface: #FFFFFF;
+  --color-bg-elevated: #FFFFFF;
+  --color-bg-sunken: #F3F4F6;
+  --color-bg-inverse: #111827;
+  --color-bg-overlay: rgba(0, 0, 0, 0.4);
+  --color-bg-accent: #EFF6FF;
+  --color-bg-accentSubtle: #EFF6FF;
+  --color-bg-disabled: #F3F4F6;
+  --color-text-primary: #111827;
+  --color-text-secondary: #4B5563;
+  --color-text-tertiary: #6B7280;
+  --color-text-muted: #6B7280;
+  --color-text-inverse: #FFFFFF;
+  --color-text-link: #2563EB;
+  --color-text-linkHover: #1D4ED8;
+  --color-text-placeholder: #9CA3AF;
+  --color-text-disabled: #9CA3AF;
+  --color-border-default: #D1D5DB;
+  --color-border-subtle: #E5E7EB;
+  --color-border-strong: #9CA3AF;
+  --color-action-primary-bg: #2563EB;
+  --color-action-primary-bgHover: #1D4ED8;
+  --color-action-primary-bgActive: #1E40AF;
+  --color-action-primary-bgDisabled: #D1D5DB;
+  --color-action-primary-text: #FFFFFF;
+  --color-action-primary-border: #2563EB;
+  --color-action-secondary-bg: #F3F4F6;
+  --color-action-secondary-bgHover: #E5E7EB;
+  --color-action-secondary-bgActive: #D1D5DB;
+  --color-action-secondary-bgDisabled: #F3F4F6;
+  --color-action-secondary-text: #111827;
+  --color-action-secondary-border: #D1D5DB;
+  --color-action-ghost-bgHover: #F3F4F6;
+  --color-action-ghost-bgActive: #E5E7EB;
+  --color-action-ghost-text: #374151;
+  --color-action-danger-bg: #DC2626;
+  --color-action-danger-bgHover: #B91C1C;
+  --color-action-danger-bgActive: #991B1B;
+  --color-action-danger-bgDisabled: #D1D5DB;
+  --color-action-danger-text: #FFFFFF;
+  --color-action-danger-border: #DC2626;
+  --color-status-success-bg: #059669;
+  --color-status-success-bgSubtle: #D1FAE5;
+  --color-status-success-text: #065F46;
+  --color-status-success-border: #6EE7B7;
+  --color-status-warning-bg: #EAB308;
+  --color-status-warning-bgSubtle: #FEF9C3;
+  --color-status-warning-text: #854D0E;
+  --color-status-warning-border: #FDE047;
+  --color-status-error-bg: #DC2626;
+  --color-status-error-bgSubtle: #FEE2E2;
+  --color-status-error-text: #991B1B;
+  --color-status-error-border: #FCA5A5;
+  --color-status-info-bg: #2563EB;
+  --color-status-info-bgSubtle: #DBEAFE;
+  --color-status-info-text: #1E40AF;
+  --color-status-info-border: #93C5FD;
+  --color-overlay-scrim: rgba(0, 0, 0, 0.4);
+  --color-overlay-tooltipBg: #111827;
+  --color-overlay-tooltipText: #FFFFFF;
+  --color-overlay-popoverBg: #FFFFFF;
+  --color-chart-1: #3B82F6;
+  --color-chart-2: #10B981;
+  --color-chart-3: #A855F7;
+  --color-chart-4: #EAB308;
+  --color-chart-5: #EF4444;
+  --color-chart-6: #93C5FD;
+  --color-chart-7: #22C55E;
+  --color-chart-8: #D8B4FE;
+  --color-chart-9: #FDE047;
+  --color-chart-10: #FCA5A5;
+  --color-chart-11: #6EE7B7;
+  --color-chart-12: #1D4ED8;
+  --color-chart-grid: #E5E7EB;
+  --color-chart-axis: #9CA3AF;
+  --color-chart-positive: #059669;
+  --color-chart-negative: #DC2626;
+  --font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --font-family-mono: 'Fira Code', 'Roboto Mono', 'Courier New', monospace;
+  --font-size-body-sm: 14px;
+  --font-size-body-md: 16px;
+  --font-size-body-lg: 18px;
+  --font-size-heading-h1: 36px;
+  --font-size-heading-h2: 30px;
+  --font-size-heading-h3: 24px;
+  --font-size-heading-h4: 20px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-lineHeight-tight: 1.25;
+  --font-lineHeight-normal: 1.5;
+  --font-lineHeight-relaxed: 1.75;
+  --space-pagePadding: 24px;
+  --space-sectionGap: 32px;
+  --space-cardPadding: 16px;
+  --space-formGap: 16px;
+  --space-controlGap: 8px;
+  --space-listGap: 8px;
+  --space-inlineGap: 8px;
+  --space-iconGap: 8px;
+  --size-controlHeight-sm: 36px;
+  --size-controlHeight-md: 40px;
+  --size-controlHeight-lg: 48px;
+  --size-icon-sm: 16px;
+  --size-icon-md: 20px;
+  --size-icon-lg: 24px;
+  --size-icon-xl: 32px;
+  --radius-card: 8px;
+  --radius-button: 6px;
+  --radius-input: 6px;
+  --shadow-elevation-0: none;
+  --shadow-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --shadow-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.2);
+  /* Accent color tokens */
+  --color-accent-blue: #2563EB;
+  --color-accent-blue-hover: #1D4ED8;
+  --color-accent-blue-subtle: #EFF6FF;
+  --color-accent-purple: #9333EA;
+  --color-accent-purple-hover: #7E22CE;
+  --color-accent-purple-subtle: #FAF5FF;
+  --color-accent-teal: #0D9488;
+  --color-accent-teal-hover: #0F766E;
+  --color-accent-teal-subtle: #F0FDFA;
+  --color-accent-indigo: #4F46E5;
+  --color-accent-indigo-hover: #4338CA;
+  --color-accent-indigo-subtle: #EEF2FF;
+  /* Semantic aliases */
+  --color-bg-muted: var(--color-bg-sunken);
+  --color-border-hover: var(--color-border-strong);
+  /* Status hover tokens */
+  --color-status-success-text-hover: #047857;
+  --color-status-warning-text-hover: #713F12;
+  --color-status-error-text-hover: #7F1D1D;
+  /* Backward compatibility aliases */
+  --color-background-base: var(--color-bg-surface);
+  --color-border-primary: var(--color-border-default);
+  --color-accent-primary: var(--color-action-primary-bg);
+  --color-accent-primary-hover: var(--color-action-primary-bgHover);
+  --color-status-success: var(--color-status-success-bg);
+  --color-status-success-subtle: var(--color-status-success-bgSubtle);
+  --color-status-error: var(--color-status-error-bg);
+  --color-status-error-subtle: var(--color-status-error-bgSubtle);
+  --color-status-warning: var(--color-status-warning-bg);
+  --color-status-warning-subtle: var(--color-status-warning-bgSubtle);
+  --color-status-info: var(--color-status-info-bg);
+  --color-status-info-subtle: var(--color-status-info-bgSubtle);
+}
+
+/* Semantic Tokens - Dark Mode - Auto-generated */
+/* Supports both data-theme attribute and Tailwind .dark class */
+[data-theme="dark"],
+.dark,
+:root.dark {
+  --color-bg-canvas: #030712;
+  --color-bg-surface: #111827;
+  --color-bg-elevated: #1F2937;
+  --color-bg-sunken: #030712;
+  --color-bg-inverse: #F9FAFB;
+  --color-bg-overlay: rgba(0, 0, 0, 0.7);
+  --color-bg-accent: #172554;
+  --color-bg-accentSubtle: #1E3A8A;
+  --color-bg-disabled: #1F2937;
+  --color-text-primary: #F9FAFB;
+  --color-text-secondary: #9CA3AF;
+  --color-text-tertiary: #9CA3AF;
+  --color-text-muted: #9CA3AF;
+  --color-text-inverse: #111827;
+  --color-text-link: #60A5FA;
+  --color-text-linkHover: #93C5FD;
+  --color-text-placeholder: #6B7280;
+  --color-text-disabled: #6B7280;
+  --color-border-default: #374151;
+  --color-border-subtle: #1F2937;
+  --color-border-strong: #4B5563;
+  --color-action-primary-bg: #2563EB;
+  --color-action-primary-bgHover: #1D4ED8;
+  --color-action-primary-bgActive: #1E40AF;
+  --color-action-primary-bgDisabled: #374151;
+  --color-action-primary-text: #FFFFFF;
+  --color-action-primary-border: #2563EB;
+  --color-action-secondary-bg: #1F2937;
+  --color-action-secondary-bgHover: #374151;
+  --color-action-secondary-bgActive: #4B5563;
+  --color-action-secondary-bgDisabled: #1F2937;
+  --color-action-secondary-text: #F9FAFB;
+  --color-action-secondary-border: #374151;
+  --color-action-ghost-bgHover: #1F2937;
+  --color-action-ghost-bgActive: #374151;
+  --color-action-ghost-text: #D1D5DB;
+  --color-action-danger-bg: #DC2626;
+  --color-action-danger-bgHover: #B91C1C;
+  --color-action-danger-bgActive: #991B1B;
+  --color-action-danger-bgDisabled: #374151;
+  --color-action-danger-text: #FFFFFF;
+  --color-action-danger-border: #DC2626;
+  --color-status-success-bg: #059669;
+  --color-status-success-bgSubtle: #022C22;
+  --color-status-success-text: #6EE7B7;
+  --color-status-success-border: #047857;
+  --color-status-warning-bg: #CA8A04;
+  --color-status-warning-bgSubtle: #422006;
+  --color-status-warning-text: #FDE047;
+  --color-status-warning-border: #A16207;
+  --color-status-error-bg: #DC2626;
+  --color-status-error-bgSubtle: #450A0A;
+  --color-status-error-text: #FCA5A5;
+  --color-status-error-border: #B91C1C;
+  --color-status-info-bg: #2563EB;
+  --color-status-info-bgSubtle: #172554;
+  --color-status-info-text: #93C5FD;
+  --color-status-info-border: #1D4ED8;
+  --color-overlay-scrim: rgba(0, 0, 0, 0.7);
+  --color-overlay-tooltipBg: #374151;
+  --color-overlay-tooltipText: #FFFFFF;
+  --color-overlay-popoverBg: #1F2937;
+  --color-chart-1: #60A5FA;
+  --color-chart-2: #34D399;
+  --color-chart-3: #C084FC;
+  --color-chart-4: #FACC15;
+  --color-chart-5: #F87171;
+  --color-chart-6: #2563EB;
+  --color-chart-7: #4ADE80;
+  --color-chart-8: #9333EA;
+  --color-chart-9: #CA8A04;
+  --color-chart-10: #DC2626;
+  --color-chart-11: #059669;
+  --color-chart-12: #93C5FD;
+  --color-chart-grid: #1F2937;
+  --color-chart-axis: #4B5563;
+  --color-chart-positive: #34D399;
+  --color-chart-negative: #F87171;
+  /* Accent color tokens - dark mode */
+  --color-accent-blue: #60A5FA;
+  --color-accent-blue-hover: #93C5FD;
+  --color-accent-blue-subtle: #172554;
+  --color-accent-purple: #C084FC;
+  --color-accent-purple-hover: #D8B4FE;
+  --color-accent-purple-subtle: #581C87;
+  --color-accent-teal: #2DD4BF;
+  --color-accent-teal-hover: #5EEAD4;
+  --color-accent-teal-subtle: #042F2E;
+  --color-accent-indigo: #818CF8;
+  --color-accent-indigo-hover: #A5B4FC;
+  --color-accent-indigo-subtle: #312E81;
+  /* Semantic aliases - dark mode */
+  --color-bg-muted: var(--color-bg-sunken);
+  --color-border-hover: var(--color-border-strong);
+  /* Status hover tokens - dark mode */
+  --color-status-success-text-hover: #34D399;
+  --color-status-warning-text-hover: #FDE047;
+  --color-status-error-text-hover: #FCA5A5;
+  /* Backward compatibility aliases */
+  --color-background-base: var(--color-bg-surface);
+  --color-border-primary: var(--color-border-default);
+  --color-accent-primary: var(--color-action-primary-bg);
+  --color-accent-primary-hover: var(--color-action-primary-bgHover);
+  --color-status-success: var(--color-status-success-bg);
+  --color-status-success-subtle: var(--color-status-success-bgSubtle);
+  --color-status-error: var(--color-status-error-bg);
+  --color-status-error-subtle: var(--color-status-error-bgSubtle);
+  --color-status-warning: var(--color-status-warning-bg);
+  --color-status-warning-subtle: var(--color-status-warning-bgSubtle);
+  --color-status-info: var(--color-status-info-bg);
+  --color-status-info-subtle: var(--color-status-info-bgSubtle);
+}
+
+/* Compact Density - Auto-generated */
+[data-density="compact"] {
+  --space-pagePadding: 16px;
+  --space-sectionGap: 24px;
+  --space-cardPadding: 12px;
+  --space-formGap: 12px;
+  --space-controlGap: 4px;
+  --space-listGap: 4px;
+  --space-inlineGap: 4px;
+  --space-iconGap: 4px;
+  --size-controlHeight-sm: 32px;
+  --size-controlHeight-md: 34px;
+  --size-controlHeight-lg: 40px;
+}
+
+/* Large Typography Scale - Auto-generated */
+[data-typography="large"] {
+  --font-size-body-sm: 16px;
+  --font-size-body-md: 18px;
+  --font-size-body-lg: 20px;
+  --font-size-heading-h1: 42px;
+  --font-size-heading-h2: 36px;
+  --font-size-heading-h3: 28px;
+  --font-size-heading-h4: 24px;
+}

package/src/shared/tokens/build/tailwind.preset.js

@@ -0,0 +1,211 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  theme: {
+    extend: {
+      colors: {
+        // Background colors
+        'bg-canvas': 'var(--color-bg-canvas)',
+        'bg-surface': 'var(--color-bg-surface)',
+        'bg-elevated': 'var(--color-bg-elevated)',
+        'bg-sunken': 'var(--color-bg-sunken)',
+        'bg-inverse': 'var(--color-bg-inverse)',
+        'bg-overlay': 'var(--color-bg-overlay)',
+        'bg-accent': 'var(--color-bg-accent)',
+        'bg-accent-subtle': 'var(--color-bg-accentSubtle)',
+        'bg-disabled': 'var(--color-bg-disabled)',
+
+        // Text colors
+        'text-primary': 'var(--color-text-primary)',
+        'text-secondary': 'var(--color-text-secondary)',
+        'text-muted': 'var(--color-text-muted)',
+        'text-inverse': 'var(--color-text-inverse)',
+        'text-link': 'var(--color-text-link)',
+        'text-link-hover': 'var(--color-text-linkHover)',
+        'text-placeholder': 'var(--color-text-placeholder)',
+        'text-disabled': 'var(--color-text-disabled)',
+
+        // Border colors
+        'border-subtle': 'var(--color-border-subtle)',
+        'border-default': 'var(--color-border-default)',
+        'border-strong': 'var(--color-border-strong)',
+        'border-focus': 'var(--color-border-focus)',
+        'border-error': 'var(--color-border-error)',
+
+        // Action colors - Primary
+        'action-primary-bg': 'var(--color-action-primary-bg)',
+        'action-primary-bg-hover': 'var(--color-action-primary-bgHover)',
+        'action-primary-bg-active': 'var(--color-action-primary-bgActive)',
+        'action-primary-bg-disabled': 'var(--color-action-primary-bgDisabled)',
+        'action-primary-text': 'var(--color-action-primary-text)',
+        'action-primary-border': 'var(--color-action-primary-border)',
+
+        // Action colors - Secondary
+        'action-secondary-bg': 'var(--color-action-secondary-bg)',
+        'action-secondary-bg-hover': 'var(--color-action-secondary-bgHover)',
+        'action-secondary-bg-active': 'var(--color-action-secondary-bgActive)',
+        'action-secondary-bg-disabled': 'var(--color-action-secondary-bgDisabled)',
+        'action-secondary-text': 'var(--color-action-secondary-text)',
+        'action-secondary-border': 'var(--color-action-secondary-border)',
+
+        // Action colors - Ghost
+        'action-ghost-bg-hover': 'var(--color-action-ghost-bgHover)',
+        'action-ghost-bg-active': 'var(--color-action-ghost-bgActive)',
+        'action-ghost-text': 'var(--color-action-ghost-text)',
+
+        // Action colors - Danger
+        'action-danger-bg': 'var(--color-action-danger-bg)',
+        'action-danger-bg-hover': 'var(--color-action-danger-bgHover)',
+        'action-danger-bg-active': 'var(--color-action-danger-bgActive)',
+        'action-danger-bg-disabled': 'var(--color-action-danger-bgDisabled)',
+        'action-danger-text': 'var(--color-action-danger-text)',
+        'action-danger-border': 'var(--color-action-danger-border)',
+
+        // Status colors - Success
+        'status-success-bg': 'var(--color-status-success-bg)',
+        'status-success-bg-subtle': 'var(--color-status-success-bgSubtle)',
+        'status-success-text': 'var(--color-status-success-text)',
+        'status-success-border': 'var(--color-status-success-border)',
+
+        // Status colors - Warning
+        'status-warning-bg': 'var(--color-status-warning-bg)',
+        'status-warning-bg-subtle': 'var(--color-status-warning-bgSubtle)',
+        'status-warning-text': 'var(--color-status-warning-text)',
+        'status-warning-border': 'var(--color-status-warning-border)',
+
+        // Status colors - Error
+        'status-error-bg': 'var(--color-status-error-bg)',
+        'status-error-bg-subtle': 'var(--color-status-error-bgSubtle)',
+        'status-error-text': 'var(--color-status-error-text)',
+        'status-error-border': 'var(--color-status-error-border)',
+
+        // Status colors - Info
+        'status-info-bg': 'var(--color-status-info-bg)',
+        'status-info-bg-subtle': 'var(--color-status-info-bgSubtle)',
+        'status-info-text': 'var(--color-status-info-text)',
+        'status-info-border': 'var(--color-status-info-border)',
+
+        // Overlay colors
+        'overlay-scrim': 'var(--color-overlay-scrim)',
+        'overlay-tooltip-bg': 'var(--color-overlay-tooltipBg)',
+        'overlay-tooltip-text': 'var(--color-overlay-tooltipText)',
+        'overlay-popover-bg': 'var(--color-overlay-popoverBg)',
+
+        // Accent colors
+        'accent-blue': 'var(--color-accent-blue)',
+        'accent-blue-hover': 'var(--color-accent-blue-hover)',
+        'accent-blue-subtle': 'var(--color-accent-blue-subtle)',
+        'accent-purple': 'var(--color-accent-purple)',
+        'accent-purple-hover': 'var(--color-accent-purple-hover)',
+        'accent-purple-subtle': 'var(--color-accent-purple-subtle)',
+        'accent-teal': 'var(--color-accent-teal)',
+        'accent-teal-hover': 'var(--color-accent-teal-hover)',
+        'accent-teal-subtle': 'var(--color-accent-teal-subtle)',
+        'accent-indigo': 'var(--color-accent-indigo)',
+        'accent-indigo-hover': 'var(--color-accent-indigo-hover)',
+        'accent-indigo-subtle': 'var(--color-accent-indigo-subtle)',
+
+        // Semantic aliases
+        'bg-muted': 'var(--color-bg-muted)',
+        'border-hover': 'var(--color-border-hover)',
+
+        // Status hover tokens
+        'status-success-text-hover': 'var(--color-status-success-text-hover)',
+        'status-warning-text-hover': 'var(--color-status-warning-text-hover)',
+        'status-error-text-hover': 'var(--color-status-error-text-hover)',
+
+        // Chart colors
+        'chart-1': 'var(--color-chart-1)',
+        'chart-2': 'var(--color-chart-2)',
+        'chart-3': 'var(--color-chart-3)',
+        'chart-4': 'var(--color-chart-4)',
+        'chart-5': 'var(--color-chart-5)',
+        'chart-6': 'var(--color-chart-6)',
+        'chart-7': 'var(--color-chart-7)',
+        'chart-8': 'var(--color-chart-8)',
+        'chart-9': 'var(--color-chart-9)',
+        'chart-10': 'var(--color-chart-10)',
+        'chart-11': 'var(--color-chart-11)',
+        'chart-12': 'var(--color-chart-12)',
+        'chart-grid': 'var(--color-chart-grid)',
+        'chart-axis': 'var(--color-chart-axis)',
+        'chart-positive': 'var(--color-chart-positive)',
+        'chart-negative': 'var(--color-chart-negative)',
+      },
+      spacing: {
+        'page-padding': 'var(--space-pagePadding)',
+        'section-gap': 'var(--space-sectionGap)',
+        'card-padding': 'var(--space-cardPadding)',
+        'form-gap': 'var(--space-formGap)',
+        'control-gap': 'var(--space-controlGap)',
+        'list-gap': 'var(--space-listGap)',
+        'inline-gap': 'var(--space-inlineGap)',
+        'icon-gap': 'var(--space-iconGap)',
+      },
+      fontSize: {
+        'body-sm': 'var(--font-size-body-sm)',
+        'body-md': 'var(--font-size-body-md)',
+        'body-lg': 'var(--font-size-body-lg)',
+        'heading-h1': 'var(--font-size-heading-h1)',
+        'heading-h2': 'var(--font-size-heading-h2)',
+        'heading-h3': 'var(--font-size-heading-h3)',
+        'heading-h4': 'var(--font-size-heading-h4)',
+      },
+      fontFamily: {
+        'body': 'var(--font-family-body)',
+        'heading': 'var(--font-family-heading)',
+        'mono': 'var(--font-family-mono)',
+      },
+      fontWeight: {
+        'regular': 'var(--font-weight-regular)',
+        'medium': 'var(--font-weight-medium)',
+        'semibold': 'var(--font-weight-semibold)',
+        'bold': 'var(--font-weight-bold)',
+      },
+      lineHeight: {
+        'tight': 'var(--font-lineHeight-tight)',
+        'normal': 'var(--font-lineHeight-normal)',
+        'relaxed': 'var(--font-lineHeight-relaxed)',
+      },
+      borderRadius: {
+        'card': 'var(--radius-card)',
+        'button': 'var(--radius-button)',
+        'input': 'var(--radius-input)',
+      },
+      boxShadow: {
+        'elevation-0': 'var(--shadow-elevation-0)',
+        'elevation-1': 'var(--shadow-elevation-1)',
+        'elevation-2': 'var(--shadow-elevation-2)',
+        'elevation-3': 'var(--shadow-elevation-3)',
+        'focus': 'var(--shadow-focus)',
+      },
+      height: {
+        'control-sm': 'var(--size-controlHeight-sm)',
+        'control-md': 'var(--size-controlHeight-md)',
+        'control-lg': 'var(--size-controlHeight-lg)',
+      },
+      width: {
+        'icon-sm': 'var(--size-icon-sm)',
+        'icon-md': 'var(--size-icon-md)',
+        'icon-lg': 'var(--size-icon-lg)',
+        'icon-xl': 'var(--size-icon-xl)',
+      },
+      transitionDuration: {
+        'fast': 'var(--motion-duration-fast)',
+        'normal': 'var(--motion-duration-normal)',
+        'slow': 'var(--motion-duration-slow)',
+      },
+      transitionTimingFunction: {
+        'standard': 'var(--motion-easing-standard)',
+        'emphasized': 'var(--motion-easing-emphasized)',
+      },
+      zIndex: {
+        'base': 'var(--z-base)',
+        'dropdown': 'var(--z-dropdown)',
+        'sticky': 'var(--z-sticky)',
+        'overlay': 'var(--z-overlay)',
+        'modal': 'var(--z-modal)',
+        'toast': 'var(--z-toast)',
+      },
+    },
+  },
+};