@datum-cloud/datum-ui 0.2.0-alpha.6 → 0.2.0-alpha.8

package/dist/styles/themes/alpha.css

@@ -0,0 +1,568 @@
+/**
+ * Alpha Theme
+ *
+ * Maps Figma design tokens to purpose tokens for component usage.
+ * Purpose tokens are consumed via Tailwind utilities (text-primary, bg-background, etc.).
+ *
+ * @see app/styles/tokens/figma-tokens.css for Figma token definitions
+ */
+
+/* ========================================
+Light-mode tokens on :root, dark-mode tokens on .dark
+======================================== */
+:root {
+  /* ========================================
+   FONT FAMILYS
+   ======================================== */
+  --font-sans:
+    'Alliance No1', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+
+  --font-mono: 'Menlo', 'Consolas', 'Monaco', 'DejaVu Sans Mono', monospace;
+  /* ========================================
+   BASE SHADCN VARIABLES
+   ======================================== */
+  /* Radius - using Figma medium radius as base */
+  --radius: var(--radius-md);
+
+  /* Sidebar */
+  --sidebar-width: 15.875rem; /* 254px */
+  --sidebar-width-icon: 3rem; /* 48px */
+  --sidebar-width-mobile: 18.75rem; /* 300px */
+
+  /* ========================================
+   SHADCN COLOR OVERRIDES - LIGHT MODE
+   ======================================== */
+
+  /* Base colors */
+  --background: var(--glacier-mist-700);
+  --foreground: var(--midnight-fjord);
+
+  /* Card colors */
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(240 10% 3.9%);
+
+  /* Popover colors */
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(240 10% 3.9%);
+
+  /* Primary colors - using Figma tokens */
+  --primary: var(--canyon-clay-links);
+  --primary-foreground: var(--white);
+
+  /* Secondary colors - using Figma tokens */
+  --secondary: var(--app-dark-utility-2);
+  --secondary-foreground: var(--glacier-mist-700);
+
+  /* Tertiary colors - using Figma tokens */
+  --tertiary: var(--pine-forge);
+  --tertiary-foreground: var(--glacier-mist-700);
+
+  /* Quaternary colors - using Figma tokens */
+  --quaternary: var(--app-dark-utility-5);
+  --quaternary-foreground: var(--midnight-fjord);
+
+  /* Muted colors */
+  --muted: hsl(240 4.8% 95.9%);
+  --muted-foreground: hsl(240 3.8% 46.1%);
+
+  /* Accent colors - using Figma tokens */
+  --accent: var(--glacier-mist-700);
+  --accent-foreground: hsl(240 5.9% 10%);
+
+  /* Destructive colors */
+  --destructive: var(--alert-red-light);
+  --destructive-foreground: var(--glacier-mist-700);
+
+  /* UI elements */
+  --border: var(--glacier-mist-900);
+  --input: var(--app-dark-utility-5);
+  --ring: var(--app-dark-utility-4);
+  --dialog-overlay: var(--app-dark-utility-4);
+
+  /* Chart colors */
+  --chart-1: hsl(12 76% 61%);
+  --chart-2: hsl(173 58% 39%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43, 74%, 66%);
+  --chart-5: hsl(27 87% 67%);
+
+  /* Sidebar colors - using Figma tokens */
+  --sidebar: var(--glacier-mist-700);
+  --sidebar-foreground: var(--app-dark-utility-3);
+  --sidebar-primary: var(--midnight-fjord);
+  --sidebar-primary-foreground: var(--glacier-mist-900);
+  --sidebar-accent: var(--glacier-mist-800);
+  --sidebar-accent-foreground: var(--midnight-fjord);
+  --sidebar-border: var(--glacier-mist-900);
+  --sidebar-ring: var(--midnight-fjord);
+
+  /* Status colors */
+  --success-100: hsl(143, 85%, 96%);
+  --success-300: hsl(145, 92%, 87%);
+  --success-500: hsl(140, 100%, 27%);
+
+  --info-100: hsl(208, 100%, 97%);
+  --info-300: hsl(221, 91%, 93%);
+  --info-500: hsl(210, 92%, 45%);
+
+  /* Input */
+  --input-background: var(--glacier-mist-700);
+  --input-foreground: var(--midnight-fjord);
+  --input-border: var(--app-dark-utility-5);
+  --input-placeholder: var(--app-dark-utility-4);
+  --input-focus-border: var(--app-dark-utility-3);
+  --input-focus-shadow: 0px 0px 0px 3px rgba(12, 29, 49, 0.08);
+
+  /* Table */
+  --table-accent: var(--glacier-mist-800);
+  --table-cell: hsl(0 0% 100%);
+  --table-cell-hover: var(--glacier-mist-700);
+
+  /* Badge */
+  --badge-primary: var(--primary);
+  --badge-primary-foreground: var(--primary-foreground);
+  --badge-secondary: var(--secondary);
+  --badge-secondary-foreground: var(--secondary-foreground);
+  --badge-tertiary: var(--tertiary);
+  --badge-tertiary-foreground: var(--tertiary-foreground);
+  --badge-quaternary: var(--app-dark-utility-5);
+  --badge-quaternary-foreground: var(--app-dark-utility-2);
+  --badge-muted: var(--glacier-mist-800);
+  --badge-muted-foreground: var(--midnight-fjord);
+  --badge-success: hsl(112, 14%, 57%);
+  --badge-success-foreground: var(--glacier-mist-700);
+  --badge-info: hsl(202, 34%, 46%);
+  --badge-info-foreground: var(--glacier-mist-700);
+  --badge-danger: var(--destructive);
+  --badge-danger-foreground: var(--destructive-foreground);
+  --badge-warning: hsl(34, 100%, 50%);
+  --badge-warning-foreground: var(--glacier-mist-700);
+
+  --card-warning: #fffbc5;
+  --card-warning-foreground: var(--midnight-fjord);
+  --card-success-border: var(--potted-olive);
+  --card-success: #f4f9f5;
+  --card-success-secondary: #adbab0;
+  --card-border: var(--glacier-mist-900);
+  --card-tertiary: var(--aurora-moss);
+  --card-quaternary: var(--app-dark-utility-5);
+
+  /* Button colors - light mode */
+  /* Neutral surfaces used by "light" and "borderless" variants */
+  --btn-neutral-bg: #e5e7eb; /* gray-200 */
+  --btn-neutral-bg-hover: #d1d5db; /* gray-300 */
+  --btn-neutral-bg-active: #9ca3af; /* gray-400 */
+
+  /* Primary */
+  --btn-primary: rgba(156, 121, 121, 0.9);
+  --btn-primary-hover: var(--primary);
+  --btn-primary-active: color-mix(in srgb, var(--btn-primary-hover) 80%, black 20%);
+  --btn-primary-foreground: var(--primary-foreground);
+  --btn-primary-border: var(--primary);
+
+  /* Secondary */
+  --btn-secondary: rgba(56, 69, 85, 0.9);
+  --btn-secondary-hover: var(--secondary);
+  --btn-secondary-active: color-mix(in srgb, var(--btn-secondary-hover) 80%, black 20%);
+  --btn-secondary-foreground: var(--secondary-foreground);
+  --btn-secondary-border: var(--secondary);
+
+  /* Tertiary */
+  --btn-tertiary: var(--tertiary);
+  --btn-tertiary-hover: color-mix(in srgb, var(--btn-tertiary) 80%, black 20%);
+  --btn-tertiary-active: color-mix(in srgb, var(--btn-tertiary-hover) 80%, black 20%);
+  --btn-tertiary-foreground: var(--tertiary-foreground);
+  --btn-tertiary-border: var(--tertiary);
+
+  /* Quaternary */
+  --btn-quaternary: var(--quaternary);
+  --btn-quaternary-hover: color-mix(in srgb, var(--btn-quaternary) 80%, black 20%);
+  --btn-quaternary-active: color-mix(in srgb, var(--btn-quaternary-hover) 80%, black 20%);
+  --btn-quaternary-foreground: var(--quaternary-foreground);
+  --btn-quaternary-border: var(--app-dark-utility-4);
+
+  /* Warning */
+  --btn-warning: #ca8a04; /* yellow-600 */
+  --btn-warning-hover: #a16207; /* yellow-700 */
+  --btn-warning-active: #854d0e; /* yellow-800 */
+  --btn-warning-foreground: #ffffff;
+  --btn-warning-border: #ca8a04;
+
+  /* Danger */
+  --btn-danger: var(--destructive);
+  --btn-danger-hover: color-mix(in srgb, var(--btn-danger) 80%, black 20%);
+  --btn-danger-active: color-mix(in srgb, var(--btn-danger-hover) 80%, black 20%);
+  --btn-danger-foreground: var(--destructive-foreground);
+  --btn-danger-border: var(--destructive);
+
+  /* Success */
+  --btn-success: #16a34a; /* green-600 */
+  --btn-success-hover: #15803d; /* green-700 */
+  --btn-success-active: #166534; /* green-800 */
+  --btn-success-foreground: #ffffff;
+  --btn-success-border: #16a34a;
+
+  /* Icon Colors */
+  --icon-primary: var(--app-dark-utility-3);
+  --icon-secondary: var(--app-dark-utility-4);
+  --icon-tertiary: var(--app-dark-utility-5);
+  --icon-quaternary: var(--app-dark-utility-2);
+  --icon-quinary: var(--app-dark-utility-1);
+  --icon-header: var(--canyon-clay-links);
+
+  --stepper-line: var(--glacier-mist-800);
+  --stepper-label: var(--app-dark-utility-4);
+
+  /* Toast */
+  --toast-error-background: var(--alert-red-light);
+  --toast-error-foreground: var(--glacier-mist-700);
+  --toast-error-icon: var(--glacier-mist-700);
+  --toast-success-background: var(--pine-forge);
+  --toast-success-foreground: var(--glacier-mist-700);
+  --toast-success-icon: var(--glacier-mist-700);
+}
+
+/* ========================================
+   DARK MODE OVERRIDES
+   ======================================== */
+.dark {
+  /* Base colors - dark mode */
+  --background: var(--midnight-fjord);
+  --foreground: var(--glacier-mist-700);
+
+  /* Card colors - dark mode */
+  --card: var(--app-dark-utility-1);
+  --card-foreground: var(--glacier-mist-700);
+
+  /* Popover colors */
+  --popover: var(--app-dark-utility-1);
+  --popover-foreground: var(--glacier-mist-700);
+
+  /* Primary colors */
+  --primary: var(--aurora-moss);
+  --primary-foreground: var(--midnight-fjord);
+
+  /* Secondary colors */
+  --secondary: var(--aurora-moss);
+  --secondary-foreground: var(--midnight-fjord);
+
+  /* Tertiary colors */
+  --tertiary: var(--aurora-moss);
+  --tertiary-foreground: var(--midnight-fjord);
+
+  /* Quaternary colors */
+  --quaternary: var(--app-dark-utility-2);
+  --quaternary-foreground: var(--glacier-mist-700);
+
+  /* Muted colors */
+  --muted: var(--app-dark-utility-1);
+  --muted-foreground: var(--app-dark-utility-4);
+
+  /* Accent colors */
+  --accent: var(--app-dark-utility-2);
+  --accent-foreground: var(--glacier-mist-700);
+
+  /* Destructive colors */
+  --destructive: var(--alert-red-light);
+  --destructive-foreground: var(--glacier-mist-700);
+
+  /* UI elements */
+  --border: var(--app-dark-utility-2);
+  --input: var(--app-dark-utility-2);
+  --ring: var(--app-dark-utility-3);
+  --dialog-overlay: var(--midnight-fjord);
+
+  --dialog-border: var(--app-dark-utility-2);
+
+  /* Toast */
+  --toast-error-background: var(--alert-red-dark);
+  --toast-error-foreground: var(--midnight-fjord);
+  --toast-error-icon: var(--midnight-fjord);
+  --toast-success-background: var(--primary);
+  --toast-success-foreground: var(--midnight-fjord);
+  --toast-success-icon: var(--midnight-fjord);
+
+  /* Chart colors - dark mode */
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+
+  /* Sidebar colors - dark mode */
+  --sidebar: var(--midnight-fjord);
+  --sidebar-foreground: var(--app-dark-utility-4);
+  --sidebar-primary: var(--glacier-mist-700);
+  --sidebar-primary-foreground: var(--app-dark-utility-2);
+  --sidebar-accent: var(--app-dark-utility-1);
+  --sidebar-accent-foreground: var(--app-dark-utility-4);
+  --sidebar-border: var(--app-dark-utility-1);
+  --sidebar-ring: var(--aurora-moss);
+
+  /* Status colors - dark mode */
+  --success-100: hsl(150, 100%, 6%);
+  --success-300: hsl(147, 100%, 12%);
+  --success-500: hsl(150, 86%, 65%);
+
+  --info-100: hsl(216, 87%, 65%);
+  --info-300: hsl(215, 100%, 6%);
+  --info-500: hsl(223, 43%, 17%);
+
+  /* Input */
+  --input-background: var(--midnight-fjord);
+  --input-foreground: var(--glacier-mist-700);
+  --input-border: var(--app-dark-utility-2);
+  --input-placeholder: var(--app-dark-utility-3);
+  --input-focus-border: var(--aurora-moss);
+  --input-focus-shadow: 0px 0px 0px 3px rgba(236, 249, 192, 0.08);
+
+  --table-accent: var(--app-dark-utility-1);
+  --table-cell: var(--midnight-fjord);
+  --table-cell-hover: var(--app-dark-utility-1);
+
+  /* Badge */
+  --badge-primary: var(--primary);
+  --badge-primary-foreground: var(--primary-foreground);
+  --badge-secondary: var(--secondary);
+  --badge-secondary-foreground: var(--secondary-foreground);
+  --badge-tertiary: var(--tertiary);
+  --badge-tertiary-foreground: var(--tertiary-foreground);
+  --badge-quaternary: var(--quaternary);
+  --badge-quaternary-foreground: var(--quaternary-foreground);
+  --badge-muted: var(--glacier-mist-800);
+  --badge-muted-foreground: var(--accent-foreground);
+  --badge-success: hsl(112, 14%, 57%);
+  --badge-success-foreground: var(--glacier-mist-700);
+  --badge-info: hsl(202, 34%, 46%);
+  --badge-info-foreground: var(--glacier-mist-700);
+  --badge-danger: var(--destructive);
+  --badge-danger-foreground: var(--destructive-foreground);
+  --badge-warning: hsl(34, 100%, 50%);
+  --badge-warning-foreground: var(--glacier-mist-700);
+
+  --card-success-border: var(--potted-olive);
+  --card-success: #f4f9f53f;
+  --card-success-secondary: #adbab0;
+  --card-border: var(--app-dark-utility-2);
+  --card-tertiary: var(--pine-forge);
+  --card-quaternary: var(--app-dark-utility-5);
+
+  /* Button colors - dark mode overrides */
+  --btn-neutral-bg: #374151; /* gray-700 */
+  --btn-neutral-bg-hover: #4b5563; /* gray-600 */
+  --btn-neutral-bg-active: #6b7280; /* gray-500 */
+
+  /* Primary */
+  --btn-primary: rgba(230, 245, 159, 0.9);
+  --btn-primary-hover: var(--aurora-moss);
+  --btn-primary-active: color-mix(in srgb, var(--btn-primary-hover) 80%, black 20%);
+  --btn-primary-foreground: var(--midnight-fjord);
+  --btn-primary-border: var(--aurora-moss);
+
+  /* Secondary */
+  --btn-secondary: rgba(230, 245, 159, 0.9);
+  --btn-secondary-hover: var(--aurora-moss);
+  --btn-secondary-active: color-mix(in srgb, var(--btn-secondary-hover) 80%, black 20%);
+  --btn-secondary-foreground: var(--midnight-fjord);
+  --btn-secondary-border: var(--aurora-moss);
+
+  /* Tertiary */
+  --btn-tertiary: rgba(230, 245, 159, 0.9);
+  --btn-tertiary-hover: var(--aurora-moss);
+  --btn-tertiary-active: color-mix(in srgb, var(--btn-tertiary-hover) 80%, black 20%);
+  --btn-tertiary-foreground: var(--midnight-fjord);
+  --btn-tertiary-border: var(--aurora-moss);
+
+  /* Quaternary */
+  --btn-quaternary: rgba(230, 245, 159, 0.9);
+  --btn-quaternary-hover: var(--aurora-moss);
+  --btn-quaternary-active: color-mix(in srgb, var(--btn-quaternary-hover) 80%, black 20%);
+  --btn-quaternary-foreground: var(--midnight-fjord);
+  --btn-quaternary-border: var(--aurora-moss);
+
+  /* Warning */
+  --btn-warning: #eab308; /* yellow-500 */
+  --btn-warning-hover: #ca8a04; /* yellow-600 */
+  --btn-warning-active: #a16207; /* yellow-700 */
+  --btn-warning-foreground: #111827; /* near gray-900 */
+  --btn-warning-border: #eab308;
+
+  /* Danger */
+  --btn-danger: var(--destructive);
+  --btn-danger-hover: color-mix(in srgb, var(--destructive) 82%, black 18%);
+  --btn-danger-active: color-mix(in srgb, var(--destructive) 70%, black 30%);
+  --btn-danger-foreground: var(--destructive-foreground);
+  --btn-danger-border: var(--destructive);
+
+  /* Success */
+  --btn-success: #22c55e; /* green-500 */
+  --btn-success-hover: #16a34a; /* green-600 */
+  --btn-success-active: #15803d; /* green-700 */
+  --btn-success-foreground: #111827; /* near gray-900 */
+  --btn-success-border: #22c55e;
+
+  /* Icon Colors */
+  --icon-primary: var(--app-dark-utility-4);
+  --icon-secondary: var(--app-dark-utility-4);
+  --icon-tertiary: var(--app-dark-utility-3);
+  --icon-quaternary: var(--app-dark-utility-2);
+  --icon-quinary: var(--app-dark-utility-1);
+  --icon-header: var(--aurora-moss);
+
+  --stepper-line: var(--app-dark-utility-2);
+  --stepper-label: var(--app-dark-utility-3);
+}
+
+/* ========================================
+TAILWIND CUSTOM UTILITIES FOR THEME
+======================================== */
+@theme inline {
+  /* Font Families */
+  --font-mono: var(--font-mono);
+  --font-sans: var(--font-sans);
+
+  /* Custom base shadow */
+  --shadow: 0 2px 4px 2px rgba(12, 29, 49, 0.03);
+  --shadow-tooltip: 0 4px 16px 0 rgba(0, 0, 0, 0.05), 1px 8px 8px 0 rgba(0, 0, 0, 0.02);
+
+  --color-tertiary: var(--tertiary);
+  --color-tertiary-foreground: var(--tertiary-foreground);
+
+  --color-quaternary: var(--quaternary);
+  --color-quaternary-foreground: var(--quaternary-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-input-background: var(--input-background);
+  --color-input-foreground: var(--input-foreground);
+  --color-input-border: var(--input-border);
+  --color-input-placeholder: var(--input-placeholder);
+  --color-input-focus-border: var(--input-focus-border);
+  --color-input-focus-shadow: var(--input-focus-shadow);
+
+  --color-table-accent: var(--table-accent);
+  --color-table-cell: var(--table-cell);
+  --color-table-cell-hover: var(--table-cell-hover);
+
+  --color-dialog-overlay: var(--dialog-overlay);
+  --color-dialog-border: var(--dialog-border);
+
+  /* Icon Colors */
+  --color-icon-primary: var(--icon-primary);
+  --color-icon-secondary: var(--icon-secondary);
+  --color-icon-tertiary: var(--icon-tertiary);
+  --color-icon-quaternary: var(--icon-quaternary);
+  --color-icon-quinary: var(--icon-quinary);
+  --color-icon-header: var(--icon-header);
+
+  /* Toast */
+  --color-toast-error-background: var(--toast-error-background);
+  --color-toast-error-foreground: var(--toast-error-foreground);
+  --color-toast-error-icon: var(--toast-error-icon);
+  --color-toast-success-background: var(--toast-success-background);
+  --color-toast-success-foreground: var(--toast-success-foreground);
+  --color-toast-success-icon: var(--toast-success-icon);
+
+  /* Font Sizes */
+  --text-sm: 14px;
+  --text-xs: 13px;
+  --text-1xs: 12px;
+  --text-2xs: 9px;
+
+  /* Badge */
+  --color-badge-primary: var(--badge-primary);
+  --color-badge-primary-foreground: var(--badge-primary-foreground);
+  --color-badge-secondary: var(--badge-secondary);
+  --color-badge-secondary-foreground: var(--badge-secondary-foreground);
+  --color-badge-tertiary: var(--badge-tertiary);
+  --color-badge-tertiary-foreground: var(--badge-tertiary-foreground);
+  --color-badge-quaternary: var(--badge-quaternary);
+  --color-badge-quaternary-foreground: var(--badge-quaternary-foreground);
+  --color-badge-muted: var(--badge-muted);
+  --color-badge-muted-foreground: var(--badge-muted-foreground);
+  --color-badge-success: var(--badge-success);
+  --color-badge-success-foreground: var(--badge-success-foreground);
+  --color-badge-info: var(--badge-info);
+  --color-badge-info-foreground: var(--badge-info-foreground);
+  --color-badge-danger: var(--badge-danger);
+  --color-badge-danger-foreground: var(--badge-danger-foreground);
+  --color-badge-warning: var(--badge-warning);
+  --color-badge-warning-foreground: var(--badge-warning-foreground);
+
+  --color-card-warning: var(--card-warning);
+  --color-card-warning-foreground: var(--card-warning-foreground);
+  --color-card-success-border: var(--card-success-border);
+  --color-card-success: var(--card-success);
+  --color-card-success-secondary: var(--card-success-secondary);
+  --color-card-border: var(--card-border);
+  --color-card-tertiary: var(--card-tertiary);
+  --color-card-quaternary: var(--card-quaternary);
+
+  /* Button colors */
+  --color-btn-neutral-bg: var(--btn-neutral-bg);
+  --color-btn-neutral-bg-hover: var(--btn-neutral-bg-hover);
+  --color-btn-neutral-bg-active: var(--btn-neutral-bg-active);
+
+  --color-btn-primary: var(--btn-primary);
+  --color-btn-primary-hover: var(--btn-primary-hover);
+  --color-btn-primary-active: var(--btn-primary-active);
+  --color-btn-primary-foreground: var(--btn-primary-foreground);
+  --color-btn-primary-border: var(--btn-primary-border);
+
+  --color-btn-secondary: var(--btn-secondary);
+  --color-btn-secondary-hover: var(--btn-secondary-hover);
+  --color-btn-secondary-active: var(--btn-secondary-active);
+  --color-btn-secondary-foreground: var(--btn-secondary-foreground);
+  --color-btn-secondary-border: var(--btn-secondary-border);
+
+  --color-btn-tertiary: var(--btn-tertiary);
+  --color-btn-tertiary-hover: var(--btn-tertiary-hover);
+  --color-btn-tertiary-active: var(--btn-tertiary-active);
+  --color-btn-tertiary-foreground: var(--btn-tertiary-foreground);
+  --color-btn-tertiary-border: var(--btn-tertiary-border);
+
+  --color-btn-quaternary: var(--btn-quaternary);
+  --color-btn-quaternary-hover: var(--btn-quaternary-hover);
+  --color-btn-quaternary-active: var(--btn-quaternary-active);
+  --color-btn-quaternary-foreground: var(--btn-quaternary-foreground);
+  --color-btn-quaternary-border: var(--btn-quaternary-border);
+
+  --color-btn-warning: var(--btn-warning);
+  --color-btn-warning-hover: var(--btn-warning-hover);
+  --color-btn-warning-active: var(--btn-warning-active);
+  --color-btn-warning-foreground: var(--btn-warning-foreground);
+  --color-btn-warning-border: var(--btn-warning-border);
+
+  --color-btn-danger: var(--btn-danger);
+  --color-btn-danger-hover: var(--btn-danger-hover);
+  --color-btn-danger-active: var(--btn-danger-active);
+  --color-btn-danger-foreground: var(--btn-danger-foreground);
+  --color-btn-danger-border: var(--btn-danger-border);
+
+  --color-btn-success: var(--btn-success);
+  --color-btn-success-hover: var(--btn-success-hover);
+  --color-btn-success-active: var(--btn-success-active);
+  --color-btn-success-foreground: var(--btn-success-foreground);
+  --color-btn-success-border: var(--btn-success-border);
+
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-stepper-line: var(--stepper-line);
+  --color-stepper-label: var(--stepper-label);
+}
+
+/* ========================================
+GLOBAL STYLES FOR ALPHA THEME
+======================================== */
+html,
+body {
+  @apply font-sans antialiased;
+}