tera-system-ui 0.1.64 → 0.1.66

package/dist/themes/tera-ui-base.css

@@ -14,64 +14,14 @@ body:has(dialog[open]) {
     overflow: hidden
 }
 
-/* AntD-style Wave Animation for Buttons */
-.btn-wave {
-    position: relative;
-}
-
-.btn-wave::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    opacity: 0;
-    pointer-events: none;
-    box-shadow: 0 0 0 0 var(--wave-color, var(--color-primary-600));
-}
-
-.btn-wave.wave-active::after {
-    animation: ant-wave 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
-}
-
-/* Wave color based on button variant */
-.btn-wave[data-variant="primary"]::after {
-    --wave-color: var(--color-primary-600);
-}
-
-.btn-wave[data-variant="default"]::after,
-.btn-wave[data-variant="dashed"]::after {
-    --wave-color: var(--color-primary-600);
-}
-
-.btn-wave[data-variant="text"]::after,
-.btn-wave[data-variant="link"]::after {
-    --wave-color: transparent;
-}
-
-/* Danger wave color */
-.btn-wave[data-danger="true"]::after {
-    --wave-color: var(--color-error-500);
-}
-
-@keyframes ant-wave {
-    0% {
-        box-shadow: 0 0 0 0 var(--wave-color);
-        opacity: 0.4;
-    }
-    100% {
-        box-shadow: 0 0 0 6px var(--wave-color);
-        opacity: 0;
-    }
-}
-
 body {
     background: var(--color-neutral-token-1);
     color: var(--color-neutral-token-13);
 }
 
 :root {
-    --font-sans: "Open Sans Variable", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: "Roboto Mono Variable", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New";
+    --font-sans: "Inter Variable", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: "Geist Mono", "Roboto Mono Variable", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New";
 }
 
 
@@ -199,6 +149,7 @@ html.dark, .dark * {
     --color-success-700: rgb(24, 140, 67);
     --color-success-800: rgb(19, 108, 52);
     --color-success-900: rgb(14, 83, 39);
+    /* primitives — do not use in components */
     --color-neutral-1: rgb(255, 255, 255);
     --color-neutral-2: rgb(252, 252, 252);
     --color-neutral-3: rgb(245, 245, 245);
@@ -222,16 +173,16 @@ html.dark, .dark * {
     --color-warning-700: rgb(177, 82, 16);
     --color-warning-800: rgb(137, 63, 12);
     --color-warning-900: rgb(105, 48, 9);
-    --color-information-50: rgb(235, 243, 254);
-    --color-information-100: rgb(194, 216, 252);
-    --color-information-200: rgb(165, 198, 251);
-    --color-information-300: rgb(124, 171, 249);
-    --color-information-400: rgb(98, 155, 248);
-    --color-information-500: rgb(59, 130, 246);
-    --color-information-600: rgb(54, 118, 224);
-    --color-information-700: rgb(42, 92, 175);
-    --color-information-800: rgb(32, 72, 135);
-    --color-information-900: rgb(25, 55, 103);
+    --color-information-50:  rgb(240, 249, 255);
+    --color-information-100: rgb(186, 230, 253);
+    --color-information-200: rgb(125, 211, 252);
+    --color-information-300: rgb(56,  189, 248);
+    --color-information-400: rgb(14,  165, 233);
+    --color-information-500: rgb(2,   132, 199);  /* sky — distinct from primary */
+    --color-information-600: rgb(3,   105, 161);
+    --color-information-700: rgb(7,   89,  133);
+    --color-information-800: rgb(12,  74,  110);
+    --color-information-900: rgb(8,   47,  73);
     --color-secondary-50: rgb(253, 237, 245);
     --color-secondary-100: rgb(249, 198, 223);
     --color-secondary-200: rgb(246, 171, 208);
@@ -242,8 +193,8 @@ html.dark, .dark * {
     --color-secondary-700: rgb(168, 51, 109);
     --color-secondary-800: rgb(130, 40, 84);
     --color-secondary-900: rgb(99, 30, 64);
-    --color-brand-500: rgb(0, 111, 238);
-    --color-brand-token-5: rgb(0, 111, 238);
+    --color-brand-500: var(--color-primary-500);
+    --color-brand-token-5: var(--color-primary-500);
     --color-neutral-token-1: rgb(255, 255, 255);
     --color-neutral-token-2: rgb(252, 252, 252);
     --color-neutral-token-3: rgb(245, 245, 245);
@@ -273,12 +224,12 @@ html.dark, .dark * {
 
 :root.dark {
     --color-brand-token-5: rgb(0, 111, 238);
-    --color-neutral-token-1: rgb(0, 0, 0);
+    --color-neutral-token-1: rgb(9,  9,  9);   /* near-black — not pure, less harsh */
     --color-neutral-token-2: rgb(20, 20, 20);
-    --color-neutral-token-3: rgb(31, 31, 31);
-    --color-neutral-token-4: rgb(38, 38, 38);
-    --color-neutral-token-5: rgb(69, 69, 69);
-    --color-neutral-token-6: rgb(89, 89, 89);
+    --color-neutral-token-3: rgb(32, 32, 32);
+    --color-neutral-token-4: rgb(48, 48, 48);  /* wider gap — clear hover state */
+    --color-neutral-token-5: rgb(70, 70, 70);  /* visible border */
+    --color-neutral-token-6: rgb(95, 95, 95);
     --color-neutral-token-7: rgb(140, 140, 140);
     --color-neutral-token-8: rgb(191, 191, 191);
     --color-neutral-token-9: rgb(217, 217, 217);
@@ -299,11 +250,118 @@ html.dark, .dark * {
 }
 
 /* ============================================= */
-/* === TeraUI Design System - Ant Design === */
+/* === Semantic Alias Layer (additive) === */
+/* Convention: {role}-{modifier} — role-first, modifier describes prominence or state  */
+/* Naming influenced by: Ant Design 5 (state modifiers), GitHub Primer (subtle/muted   */
+/* scale), shadcn/ui (CSS-var-as-utility, 'default' for resting state).                */
+/* Components use ONLY these tokens — primitives stay as the underlying scale.         */
+/* ============================================= */
+:root {
+    /* ── Surfaces (backgrounds by elevation) ─────────────────── */
+    --color-surface:          var(--color-neutral-token-1);   /* Page / app background */
+    --color-surface-raised:   var(--color-neutral-token-2);   /* Cards, panels */
+    --color-surface-sunken:   var(--color-neutral-token-3);   /* Inputs, disabled areas */
+    --color-surface-hover:    var(--color-neutral-token-4);   /* Hover / pressed neutral bg */
+    --color-surface-control:  var(--color-neutral-token-1);   /* Interactive control bg (button, input, checkbox) */
+
+    /* ── Borders ─────────────────────────────────────────────── */
+    --color-border-default:   var(--color-neutral-token-5);   /* Default border */
+    --color-border-strong:    var(--color-neutral-token-6);   /* Focus ring, separator */
+
+    /* ── Text (prominence scale) ─────────────────────────────── */
+    --color-text-primary:     var(--color-neutral-token-13);  /* Body text, headings */
+    --color-text-secondary:   var(--color-neutral-token-8);   /* Supporting / label text */
+    --color-text-tertiary:    var(--color-neutral-token-7);   /* Placeholder, hints */
+    --color-text-disabled:    var(--color-neutral-token-6);   /* Disabled labels */
+
+    /* ── Interactive (primary action — hover darkens, active darkest) ── */
+    --color-interactive:        var(--color-primary-500);     /* Base link / CTA color */
+    --color-interactive-hover:  var(--color-primary-600);     /* Hover: darker */
+    --color-interactive-active: var(--color-primary-700);     /* Pressed: darkest */
+    --color-interactive-subtle: var(--color-primary-50);      /* Ghost bg, tinted area */
+    --color-interactive-border: var(--color-primary-200);     /* Subtle border on tinted bg */
+    --color-interactive-text:   var(--color-primary-700);     /* Readable text on tinted bg */
+    --color-interactive-on:     #ffffff;                      /* Text/icon ON filled interactive bg */
+    --color-overlay:            rgb(0 0 0 / 0.45);            /* Modal / drawer backdrop scrim */
+
+    /* ── Status: Error ── subtle/muted/border/text adapt in dark mode ── */
+    --color-error-subtle:   var(--color-error-50);    /* Light tint bg */
+    --color-error-muted:    var(--color-error-100);   /* Medium tint / pressed bg */
+    --color-error-border:   var(--color-error-200);   /* Subtle border stroke */
+    --color-error-hover:    var(--color-error-400);   /* Lighter hover (softens) */
+    --color-error-default:  var(--color-error-500);   /* Main error color */
+    --color-error-active:   var(--color-error-600);   /* Pressed / active (stronger) */
+    --color-error-text:     var(--color-error-700);   /* Readable text on light bg */
+
+    /* ── Status: Warning ──────────────────────────────────────── */
+    --color-warning-subtle:   var(--color-warning-50);
+    --color-warning-muted:    var(--color-warning-100);
+    --color-warning-border:   var(--color-warning-200);
+    --color-warning-hover:    var(--color-warning-400);
+    --color-warning-default:  var(--color-warning-500);
+    --color-warning-active:   var(--color-warning-600);
+    --color-warning-text:     var(--color-warning-700);
+
+    /* ── Status: Success ──────────────────────────────────────── */
+    --color-success-subtle:   var(--color-success-50);
+    --color-success-muted:    var(--color-success-100);
+    --color-success-border:   var(--color-success-200);
+    --color-success-hover:    var(--color-success-400);
+    --color-success-default:  var(--color-success-500);
+    --color-success-active:   var(--color-success-600);
+    --color-success-text:     var(--color-success-700);
+
+    /* ── Status: Information ──────────────────────────────────── */
+    --color-information-subtle:   var(--color-information-50);
+    --color-information-muted:    var(--color-information-100);
+    --color-information-border:   var(--color-information-200);
+    --color-information-hover:    var(--color-information-400);
+    --color-information-default:  var(--color-information-500);
+    --color-information-active:   var(--color-information-600);
+    --color-information-text:     var(--color-information-700);
+}
+
+/* Dark mode overrides — only tokens that change value in dark mode */
+/* Scale tops at 900 (no 950 primitives defined) */
+:root.dark {
+    --color-error-subtle:   var(--color-error-900);   /* darkest tint bg */
+    --color-error-muted:    var(--color-error-800);   /* medium tint bg */
+    --color-error-border:   var(--color-error-700);   /* subtle border */
+    --color-error-text:     var(--color-error-400);   /* lighter text for dark bg */
+
+    --color-warning-subtle:   var(--color-warning-900);
+    --color-warning-muted:    var(--color-warning-800);
+    --color-warning-border:   var(--color-warning-700);
+    --color-warning-text:     var(--color-warning-400);
+
+    --color-success-subtle:   var(--color-success-900);
+    --color-success-muted:    var(--color-success-800);
+    --color-success-border:   var(--color-success-700);
+    --color-success-text:     var(--color-success-400);
+
+    --color-information-subtle:   var(--color-information-900);
+    --color-information-muted:    var(--color-information-800);
+    --color-information-border:   var(--color-information-700);
+    --color-information-text:     var(--color-information-400);
+
+    --color-interactive-subtle: var(--color-primary-900);    /* Dark tint bg */
+    --color-interactive-border: var(--color-primary-700);    /* Subtle border on dark tinted bg */
+    --color-interactive-text:   var(--color-primary-300);    /* Readable text on dark tinted bg */
+    --color-overlay: rgb(255 255 255 / 0.12);           /* Darker scrim for dark mode */
+    --color-surface-control:    var(--color-neutral-token-3); /* Controls elevated above surfaces in dark mode */
+
+    /* Elevation shadows — use white glow instead of black drop shadows on dark bg */
+    --shadow-sm:   0 1px 3px rgba(0,0,0,0.4),  0 0 0 1px rgba(255,255,255,0.04);
+    --shadow-md:   0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
+    --shadow-lg:   0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
+}
+
+/* ============================================= */
+/* === TeraUI Design System === */
 /* ============================================= */
 /* Consistent design tokens for all components */
 :root {
-    /* TeraUI Border Radius - Ant Design uses 6px as base */
+    /* TeraUI Border Radius - uses 6px as base */
     --tera-radius-sm: 2px;
     --tera-radius-base: 6px;
     --tera-radius-lg: 8px;
@@ -314,20 +372,45 @@ html.dark, .dark * {
     --tera-control-height-base: 32px;
     --tera-control-height-lg: 40px;
 
-    /* TeraUI Transitions - Ant Design easing */
+    /* TeraUI Transitions - easing */
     --tera-transition-fast: 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
     --tera-transition-base: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
     --tera-transition-slow: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-    /* TeraUI Focus Shadows - subtle glow like Ant Design */
-    --tera-focus-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-    --tera-focus-shadow-error: 0 0 0 2px rgba(239, 68, 68, 0.1);
-    --tera-focus-shadow-warning: 0 0 0 2px rgba(249, 115, 22, 0.1);
-    --tera-focus-shadow-success: 0 0 0 2px rgba(34, 197, 94, 0.1);
+    /* Focus Shadows */
+    --shadow-focus:         0 0 0 3px color-mix(in srgb, var(--color-primary-500)  20%, transparent);
+    --shadow-focus-error:   0 0 0 3px color-mix(in srgb, var(--color-error-500)    20%, transparent);
+    --shadow-focus-warning: 0 0 0 3px color-mix(in srgb, var(--color-warning-500)  20%, transparent);
+    --shadow-focus-success: 0 0 0 3px color-mix(in srgb, var(--color-success-500)  20%, transparent);
+
+    /* Elevation system */
+    --shadow-none: none;
+    --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
+    --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
+    --shadow-lg:   0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
+    --shadow-glow: 0 0 0 1px var(--color-primary-200),
+                   0 4px 16px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
+
+    /* Easing functions */
+    --ease-ui:     cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Extended radius */
+    --tera-radius-xl: 20px;
 }
 
 
 
+/* Reduced-motion guard */
+@media (prefers-reduced-motion: reduce) {
+    *, ::before, ::after {
+        transition-duration: 1ms !important;
+        animation-duration:  1ms !important;
+    }
+}
+
 /* Base responsive variable */
 :root {
     --header-height: 3rem;
@@ -467,4 +550,86 @@ html.dark, .dark * {
     --color-information: var(--color-information-500);
     --color-secondary: var(--color-secondary-500);
     --color-brand: var(--color-brand-500);
+
+    /* ── Semantic surface & text tokens ─────────────────────── */
+    --color-surface:            var(--color-surface);
+    --color-surface-raised:     var(--color-surface-raised);
+    --color-surface-sunken:     var(--color-surface-sunken);
+    --color-surface-hover:      var(--color-surface-hover);
+    --color-surface-control:    var(--color-surface-control);
+    --color-border-default:     var(--color-border-default);
+    --color-border-strong:      var(--color-border-strong);
+    --color-text-primary:       var(--color-text-primary);
+    --color-text-secondary:     var(--color-text-secondary);
+    --color-text-tertiary:      var(--color-text-tertiary);
+    --color-text-disabled:      var(--color-text-disabled);
+    --color-interactive:        var(--color-interactive);
+    --color-interactive-hover:  var(--color-interactive-hover);
+    --color-interactive-active: var(--color-interactive-active);
+    --color-interactive-subtle: var(--color-interactive-subtle);
+    --color-interactive-border: var(--color-interactive-border);
+    --color-interactive-text:   var(--color-interactive-text);
+    --color-interactive-on:     var(--color-interactive-on);
+    --color-overlay:            var(--color-overlay);
+
+    /* ── Semantic status tokens ──────────────────────────────── */
+    --color-error-subtle:   var(--color-error-subtle);
+    --color-error-muted:    var(--color-error-muted);
+    --color-error-border:   var(--color-error-border);
+    --color-error-hover:    var(--color-error-hover);
+    --color-error-default:  var(--color-error-default);
+    --color-error-active:   var(--color-error-active);
+    --color-error-text:     var(--color-error-text);
+
+    --color-warning-subtle:   var(--color-warning-subtle);
+    --color-warning-muted:    var(--color-warning-muted);
+    --color-warning-border:   var(--color-warning-border);
+    --color-warning-hover:    var(--color-warning-hover);
+    --color-warning-default:  var(--color-warning-default);
+    --color-warning-active:   var(--color-warning-active);
+    --color-warning-text:     var(--color-warning-text);
+
+    --color-success-subtle:   var(--color-success-subtle);
+    --color-success-muted:    var(--color-success-muted);
+    --color-success-border:   var(--color-success-border);
+    --color-success-hover:    var(--color-success-hover);
+    --color-success-default:  var(--color-success-default);
+    --color-success-active:   var(--color-success-active);
+    --color-success-text:     var(--color-success-text);
+
+    --color-information-subtle:   var(--color-information-subtle);
+    --color-information-muted:    var(--color-information-muted);
+    --color-information-border:   var(--color-information-border);
+    --color-information-hover:    var(--color-information-hover);
+    --color-information-default:  var(--color-information-default);
+    --color-information-active:   var(--color-information-active);
+    --color-information-text:     var(--color-information-text);
+
+    /* Elevation shadows */
+    --shadow-sm:           var(--shadow-sm);
+    --shadow-md:           var(--shadow-md);
+    --shadow-lg:           var(--shadow-lg);
+    --shadow-glow:         var(--shadow-glow);
+    --shadow-focus:        var(--shadow-focus);
+    --shadow-focus-error:   var(--shadow-focus-error);
+    --shadow-focus-warning: var(--shadow-focus-warning);
+    --shadow-focus-success: var(--shadow-focus-success);
+
+    /* Easing functions */
+    --ease-ui:     var(--ease-ui);
+    --ease-spring: var(--ease-spring);
+
+    /* Accordion animations */
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+}
+
+@keyframes accordion-down {
+    from { height: 0; }
+    to   { height: var(--bits-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+    from { height: var(--bits-accordion-content-height); }
+    to   { height: 0; }
 }

package/dist/themes/theme-ai.css

@@ -0,0 +1,100 @@
+/* ============================================= */
+/* === TeraUI — AI / Innovation Theme === */
+/* Target: AI tools, chat interfaces, interactive labs */
+/* Dark mode is the primary experience */
+/* Load after tera-ui-base.css */
+/* Gradient rule: allowed ONLY on primary button bg, hero headline accent, AI card border */
+/* ============================================= */
+
+[data-theme='ai'] {
+    /* Primary: violet-700 */
+    --color-primary-500: rgb(124, 58,  237);  /* #7C3AED */
+    --color-primary-600: rgb(109, 40,  217);  /* #6D28D9 */
+    --color-primary-700: rgb(91,  33,  182);
+    --color-primary-400: rgb(167, 139, 250);
+    --color-primary-300: rgb(196, 181, 253);
+    --color-primary-200: rgb(221, 214, 254);
+    --color-primary-50:  rgb(245, 243, 255);
+
+    /* Secondary: cyan — authentic AI aesthetic, pairs with violet */
+    --color-secondary-500: rgb(6,   182, 212);
+    --color-secondary-400: rgb(34,  211, 238);
+    --color-secondary-300: rgb(103, 232, 249);
+    --color-secondary-200: rgb(165, 243, 252);
+    --color-secondary-50:  rgb(236, 254, 255);
+
+    /* Light mode: barely perceptible violet surface tint */
+    --color-surface:        rgb(254, 252, 255);
+    --color-surface-raised: rgb(250, 247, 255);
+
+    /* Border radius — rounder = friendlier, more approachable */
+    --border-radius-base:      0.75rem;  /* 12px */
+    --border-radius-container: 1rem;     /* 16px — pillowy cards */
+
+    /* Motion: springier = energetic */
+    --tera-theme-duration: 250ms;
+    --tera-theme-easing:   var(--ease-spring);
+    --tera-transition-base: var(--tera-theme-duration) var(--tera-theme-easing);
+
+    /* Card style: glassmorphism */
+    --tera-card-shadow: var(--shadow-glow);
+    --tera-card-radius: var(--border-radius-container);
+    --tera-card-backdrop: blur(8px);
+
+    /* Gradient: violet → cyan (more dimensional than violet → blue) */
+    --tera-gradient-primary: linear-gradient(135deg, rgb(124, 58, 237) 0%, rgb(6, 182, 212) 100%);
+
+    /* Glow shadow: violet-tinted (not plain black-opacity) */
+    --shadow-glow: 0 0 0 1px rgba(124, 58, 237, 0.25),
+                   0 4px 24px rgba(124, 58, 237, 0.18),
+                   0 1px 4px rgba(124, 58, 237, 0.12);
+
+    /* Focus glow: violet */
+    --shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.28);
+}
+
+/* AI dark mode: zinc-950 with violet temperature + atmospheric shadows */
+[data-theme='ai'].dark,
+[data-theme='ai'] .dark {
+    /* Elevation steps — slight purple temperature throughout */
+    --color-neutral-token-1:  rgb(7,  7,  11);   /* near-black with violet hint */
+    --color-neutral-token-2:  rgb(16, 16, 24);   /* zinc-900 + violet */
+    --color-neutral-token-3:  rgb(28, 28, 40);   /* clear jump */
+    --color-neutral-token-4:  rgb(45, 45, 62);   /* obvious hover state */
+    --color-neutral-token-5:  rgb(72, 72, 95);   /* visible border */
+    --color-neutral-token-13: rgb(250, 250, 252);
+
+    /* Violet-tinted atmospheric shadows */
+    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.5),  0 0 0 1px rgba(124, 58, 237, 0.08);
+    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(124, 58, 237, 0.12);
+    --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.7), 0 4px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(124, 58, 237, 0.14);
+    --shadow-glow: 0 0 0 1px rgba(124, 58, 237, 0.35),
+                   0 4px 24px rgba(124, 58, 237, 0.25),
+                   0 0 48px rgba(124, 58, 237, 0.12);
+
+    /* Interactive: brighter violet — better contrast on dark bg */
+    --color-interactive:        rgb(167, 139, 250);  /* violet-400 */
+    --color-interactive-hover:  rgb(196, 181, 253);  /* violet-300 */
+    --color-interactive-active: rgb(124, 58,  237);  /* violet-600 */
+    --color-interactive-subtle: rgba(124, 58, 237, 0.12);
+    --color-interactive-border: rgba(124, 58, 237, 0.30);
+    --color-interactive-text:   rgb(167, 139, 250);
+
+    /* Focus shadow — softer for dark bg */
+    --shadow-focus: 0 0 0 3px rgba(167, 139, 250, 0.35);
+}
+
+/* AI primary button: gradient fill */
+[data-theme='ai'] .btn-primary,
+[data-theme='ai'] [data-variant='primary'] {
+    background: var(--tera-gradient-primary);
+    border-color: transparent;
+}
+
+/* AI card glassmorphism */
+[data-theme='ai'] .card-glass {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: var(--tera-card-backdrop);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: var(--shadow-glow);
+}

package/dist/themes/theme-marketing.css

@@ -0,0 +1,91 @@
+/* ============================================= */
+/* === TeraUI — Marketing / Editorial Theme === */
+/* Target: Landing pages, product marketing, blog posts */
+/* Load after tera-ui-base.css */
+/* ============================================= */
+
+[data-theme='marketing'] {
+    /* Primary: brand blue — connects to brand identity */
+    --color-primary-500: rgb(0,   111, 238);  /* #006FEE */
+    --color-primary-600: rgb(0,   87,  200);
+    --color-primary-700: rgb(0,   68,  160);
+    --color-primary-400: rgb(51,  147, 255);
+    --color-primary-300: rgb(100, 175, 255);
+    --color-primary-200: rgb(153, 208, 255);
+    --color-primary-50:  rgb(230, 244, 255);
+
+    /* Secondary: rose/coral — editorial pop, distinct from brand blue */
+    --color-secondary-500: rgb(244, 63,  94);
+    --color-secondary-400: rgb(251, 113, 133);
+    --color-secondary-300: rgb(253, 164, 175);
+    --color-secondary-200: rgb(254, 205, 211);
+    --color-secondary-50:  rgb(255, 241, 242);
+
+    /* Border radius — balanced, friendly but not casual */
+    --border-radius-base:      0.625rem; /* 10px */
+    --border-radius-container: 1rem;     /* 16px — modern editorial card feel */
+
+    /* Font: display font for large headlines */
+    --font-display: 'Cal Sans', 'Syne', 'Instrument Serif', 'Georgia', serif;
+
+    /* Motion: cinematic — suits scroll reveals */
+    --tera-theme-duration: 300ms;
+    --tera-theme-easing:   var(--ease-in-out);
+    --tera-transition-base: var(--tera-theme-duration) var(--tera-theme-easing);
+
+    /* CTA button: taller for conversion */
+    --tera-control-height-lg: 52px;
+
+    /* Card style */
+    --tera-card-shadow: var(--shadow-sm);
+    --tera-card-radius: var(--border-radius-container);
+
+    /* No AI gradient — marketing uses flat brand color */
+    --tera-gradient-primary: none;
+
+    /* Section spacing: py-24 minimum */
+    --marketing-section-py: 6rem;
+
+    /* Stronger glow for CTAs — brand blue hue */
+    --shadow-glow: 0 0 0 1px rgba(0, 111, 238, 0.20),
+                   0 8px 32px rgba(0, 111, 238, 0.15);
+}
+
+/* Marketing dark: deep navy-black — editorial premium, not generic gray */
+[data-theme='marketing'].dark,
+[data-theme='marketing'] .dark {
+    /* Elevation steps — navy-blue temperature throughout */
+    --color-neutral-token-1: rgb(8,  10, 18);   /* very deep navy-black */
+    --color-neutral-token-2: rgb(14, 18, 32);   /* visible step */
+    --color-neutral-token-3: rgb(22, 27, 48);   /* mid dark */
+    --color-neutral-token-4: rgb(33, 42, 70);   /* clear hover state */
+    --color-neutral-token-5: rgb(50, 62, 100);  /* blue-tinted border */
+    --color-neutral-token-6: rgb(72, 88, 135);  /* strong border */
+
+    /* Blue-tinted atmospheric shadows */
+    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.5),  0 0 0 1px rgba(0, 111, 238, 0.06);
+    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 111, 238, 0.08);
+    --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.7), 0 4px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 111, 238, 0.10);
+    --shadow-glow: 0 0 0 1px rgba(0, 111, 238, 0.30),
+                   0 4px 24px rgba(0, 111, 238, 0.20),
+                   0 0 48px rgba(0, 111, 238, 0.10);
+
+    /* Interactive: brighter brand blue — better contrast on dark bg */
+    --color-interactive:        rgb(51,  147, 255);  /* primary-400 */
+    --color-interactive-hover:  rgb(100, 175, 255);  /* primary-300 */
+    --color-interactive-active: rgb(0,   111, 238);  /* primary-500 */
+    --color-interactive-subtle: rgba(0, 111, 238, 0.12);
+    --color-interactive-border: rgba(0, 111, 238, 0.30);
+    --color-interactive-text:   rgb(100, 175, 255);
+
+    /* Focus shadow — blue-tinted */
+    --shadow-focus: 0 0 0 3px rgba(51, 147, 255, 0.35);
+}
+
+/* Marketing CTA button: full-sized */
+[data-theme='marketing'] [data-variant='primary'] {
+    height: var(--tera-control-height-lg);
+    padding-left: 2rem;
+    padding-right: 2rem;
+    font-weight: 600;
+}

package/dist/themes/theme-professional.css

@@ -0,0 +1,41 @@
+/* ============================================= */
+/* === TeraUI — Professional Theme === */
+/* Target: SaaS dashboards, calculators, CV builders, education tools */
+/* Load after tera-ui-base.css */
+/* ============================================= */
+
+[data-theme='professional'],
+:root {
+    /* Primary: Tailwind blue-600 — more saturated than blue-500 */
+    --color-primary-500: rgb(37,  99,  235);   /* #2563EB */
+    --color-primary-600: rgb(29,  78,  216);   /* #1D4ED8 */
+    --color-primary-400: rgb(96,  165, 250);
+    --color-primary-200: rgb(191, 219, 254);
+    --color-primary-50:  rgb(239, 246, 255);
+
+    /* Border radius — 2px more modern than AntDesign */
+    --border-radius-base:      0.5rem;   /* 8px */
+    --border-radius-container: 0.625rem; /* 10px — cards, dialogs */
+
+    /* Page background: cool off-white, softer than pure white */
+    --color-neutral-token-1: rgb(248, 250, 252); /* #F8FAFC */
+
+    /* Motion: fast, responsive */
+    --tera-theme-duration: 150ms;
+    --tera-theme-easing:   var(--ease-ui);
+    --tera-transition-base: var(--tera-theme-duration) var(--tera-theme-easing);
+
+    /* Card style: subtle shadow */
+    --tera-card-shadow: var(--shadow-sm);
+    --tera-card-radius: var(--border-radius-container);
+
+    /* No gradients in Professional */
+    --tera-gradient-primary: none;
+}
+
+[data-theme='professional'].dark,
+[data-theme='professional'] .dark {
+    --color-neutral-token-1: rgb(15,  23,  42);  /* slate-900 */
+    --color-neutral-token-2: rgb(30,  41,  59);  /* slate-800 */
+    --color-neutral-token-3: rgb(51,  65,  85);  /* slate-700 */
+}