@busiverse/ui 0.2.9 → 0.2.10

package/README.md

@@ -272,3 +272,8 @@ npm install @busiverse/ui@0.2.9 --save-exact
 ```
 
 The frontend should not duplicate BUSIVERSE brand assets in `public/`; brand assets remain owned by `@busiverse/ui`.
+
+
+## Theme contract
+
+`@busiverse/ui@0.2.10` owns the shared BUSIVERSE light/dark CSS contract. Apps should place `light` or `dark` on `document.documentElement`; `system` mode should resolve to one of those classes. Do not hard-code `className="dark ..."` on page wrappers, because it prevents light mode from working.

package/dist/styles.css

@@ -1,5 +1,6 @@
 /* Font loading is intentionally app-owned. Self-host or load Space Grotesk, Inter, and JetBrains Mono in each frontend. */
-:root {
+:root,
+.light {
   --color-brand-blue: #3B82F6;
   --color-brand-violet: #8B5CF6;
   --color-brand-cyan: #06B6D4;
@@ -9,23 +10,54 @@
   --color-action-violet-hover: #6D28D9;
   --color-action-cyan: #0E7490;
   --color-action-cyan-hover: #155E75;
-  --color-bg-primary: #020617;
-  --color-bg-secondary: #0F172A;
-  --color-bg-tertiary: #1E293B;
-  --color-bg-brand-dark: #172554;
+
+  /* BUSIVERSE light theme defaults */
+  --color-bg-primary: #F8FAFC;
+  --color-bg-secondary: #FFFFFF;
+  --color-bg-tertiary: #F1F5F9;
+  --color-bg-brand-dark: #DBEAFE;
   --color-bg-light-primary: #FFFFFF;
   --color-bg-light-secondary: #F8FAFC;
   --color-bg-light-tertiary: #F1F5F9;
-  --color-text-primary-dark: #FFFFFF;
-  --color-text-secondary-dark: #CBD5E1;
-  --color-text-muted-dark: #94A3B8;
-  --color-text-disabled-dark: #64748B;
+  --color-text-primary-dark: #020617;
+  --color-text-secondary-dark: #334155;
+  --color-text-muted-dark: #64748B;
+  --color-text-disabled-dark: #94A3B8;
   --color-text-primary-light: #020617;
   --color-text-secondary-light: #334155;
   --color-text-muted-light: #64748B;
-  --color-border-dark-subtle: rgba(255,255,255,.10);
-  --color-border-dark-medium: rgba(255,255,255,.20);
-  --color-border-dark-strong: rgba(255,255,255,.32);
+  --color-border-dark-subtle: rgba(15,23,42,.12);
+  --color-border-dark-medium: rgba(15,23,42,.20);
+  --color-border-dark-strong: rgba(15,23,42,.32);
+
+  /* shadcn/Tailwind token bridge used by separately deployed frontends */
+  --background: 210 40% 98%;
+  --foreground: 222 47% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  --primary: 217 91% 60%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 33% 96%;
+  --secondary-foreground: 222 47% 11%;
+  --muted: 210 33% 96%;
+  --muted-foreground: 215 14% 42%;
+  --accent: 217 91% 60%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 217 91% 60%;
+  --base-bg: 210 40% 98%;
+  --surface-bg: 0 0% 100%;
+  --surface-elevated: 210 33% 96%;
+  --text-heading: 222 47% 11%;
+  --text-body: 215 16% 28%;
+  --text-muted: 215 14% 42%;
+  --text-disabled: 215 10% 60%;
+
   --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
   --font-body: "Inter", system-ui, sans-serif;
   --font-code: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
@@ -39,6 +71,41 @@
   --motion-default: 200ms;
   --motion-slow: 300ms;
   --ease-standard: cubic-bezier(0.16,1,0.3,1);
+  color-scheme: light;
+}
+
+.dark {
+  --color-bg-primary: #020617;
+  --color-bg-secondary: #0F172A;
+  --color-bg-tertiary: #1E293B;
+  --color-bg-brand-dark: #172554;
+  --color-text-primary-dark: #FFFFFF;
+  --color-text-secondary-dark: #CBD5E1;
+  --color-text-muted-dark: #94A3B8;
+  --color-text-disabled-dark: #64748B;
+  --color-border-dark-subtle: rgba(255,255,255,.10);
+  --color-border-dark-medium: rgba(255,255,255,.20);
+  --color-border-dark-strong: rgba(255,255,255,.32);
+
+  --background: 222 47% 4%;
+  --foreground: 0 0% 100%;
+  --card: 222 47% 7%;
+  --card-foreground: 0 0% 100%;
+  --popover: 222 47% 11%;
+  --popover-foreground: 0 0% 100%;
+  --secondary: 215 25% 17%;
+  --secondary-foreground: 0 0% 100%;
+  --muted: 215 25% 17%;
+  --muted-foreground: 214 16% 65%;
+  --border: 0 0% 100% / 0.1;
+  --input: 0 0% 100% / 0.1;
+  --base-bg: 222 83% 4%;
+  --surface-bg: 222 47% 11%;
+  --surface-elevated: 217 33% 17%;
+  --text-heading: 0 0% 100%;
+  --text-body: 214 32% 91%;
+  --text-muted: 215 20% 65%;
+  --text-disabled: 215 16% 47%;
   color-scheme: dark;
 }
 
@@ -47,12 +114,15 @@ html { scroll-behavior: smooth; }
 body {
   margin: 0;
   font-family: var(--font-body);
-  background: var(--color-bg-primary);
-  color: var(--color-text-primary-dark);
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
 }
 
+html.dark body {
+  background: linear-gradient(135deg,#020617 0%,#172554 45%,#0F172A 100%);
+}
 button, input, textarea, select { font: inherit; }
 a { color: inherit; text-decoration: none; }
 img, svg { max-width: 100%; display: block; }
@@ -254,18 +324,12 @@ img, svg { max-width: 100%; display: block; }
   .busiverse-pricing-controls > input { max-width: none; }
 }
 
-/* Legacy-compatible BUSIVERSE design variables for separately deployed frontends. */
-:root {
-  --base-bg: 222 83% 4%;
-  --surface-bg: 222 47% 11%;
-  --surface-elevated: 217 33% 17%;
+/* Legacy-compatible BUSIVERSE design aliases for separately deployed frontends. */
+:root,
+.light {
   --primary-blue: 217 91% 60%;
   --primary-violet: 258 90% 66%;
   --primary-cyan: 188 94% 43%;
-  --text-heading: 0 0% 100%;
-  --text-body: 214 32% 91%;
-  --text-muted: 215 20% 65%;
-  --text-disabled: 215 16% 47%;
 }
 .font-heading { font-family: var(--font-display); }
 .bg-gradient-primary { background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%); }
@@ -310,3 +374,116 @@ img, svg { max-width: 100%; display: block; }
 .busiverse-marketing-price-action { margin-top: auto; }
 @media (max-width: 980px) { .busiverse-marketing-grid, .busiverse-marketing-grid.two { grid-template-columns: 1fr; } }
 @media (max-width: 760px) { .busiverse-marketing-section { padding: 72px 20px; } }
+
+
+/* Theme-aware compatibility overrides for legacy dark-first BUSIVERSE frontends. */
+.light .busiverse-glass,
+.light .glass-card,
+.light .registry-glass,
+.light .registry-card,
+.light .busiverse-card,
+.light .busiverse-marketing-card,
+.light .busiverse-marketing-pricing-card,
+.light .busiverse-table-wrap,
+.light .busiverse-table-state {
+  background: rgba(255, 255, 255, 0.86);
+  border-color: rgba(15, 23, 42, 0.12);
+  color: hsl(var(--foreground));
+  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.08);
+}
+
+.light .busiverse-card-description,
+.light .busiverse-card-content,
+.light .busiverse-state p,
+.light .busiverse-page-header p,
+.light .busiverse-hero p,
+.light .busiverse-marketing-section-header p:not(.busiverse-eyebrow),
+.light .busiverse-marketing-card p,
+.light .busiverse-marketing-pricing-card p,
+.light .busiverse-marketing-pricing-card ul,
+.light .busiverse-pricing-header p,
+.light .busiverse-pricing-table-heading p,
+.light .busiverse-pricing-card p,
+.light .busiverse-table th,
+.light .busiverse-table td,
+.light .busiverse-topbar,
+.light .busiverse-sidebar-link,
+.light .busiverse-sidebar-service-link {
+  color: hsl(var(--text-body));
+}
+
+.light .busiverse-card-title,
+.light .busiverse-page-header h1,
+.light .busiverse-hero h1,
+.light .busiverse-marketing-section-header h2,
+.light .busiverse-marketing-card h3,
+.light .busiverse-marketing-pricing-card h3,
+.light .busiverse-marketing-price-line strong,
+.light .busiverse-stat-card strong,
+.light .busiverse-pricing-card h3,
+.light .busiverse-pricing-card-price strong,
+.light .busiverse-pricing-table-heading h3 {
+  color: hsl(var(--foreground));
+}
+
+.light .busiverse-app-shell,
+.light .busiverse-hero,
+.light .busiverse-marketing-section,
+.light .busiverse-pricing-explorer,
+.light .bg-gradient-hero,
+.light .bg-gradient-section {
+  background: radial-gradient(circle at 12% 0%, rgba(59,130,246,.13), transparent 34rem), linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 48%, #FFFFFF 100%);
+}
+
+.light .busiverse-sidebar,
+.light .busiverse-topbar {
+  background: rgba(255, 255, 255, 0.78);
+  border-color: rgba(15, 23, 42, 0.10);
+  color: hsl(var(--foreground));
+}
+
+.light .busiverse-btn-secondary,
+.light .busiverse-btn-ghost {
+  color: hsl(var(--foreground));
+  background: rgba(15,23,42,.04);
+  border-color: rgba(15,23,42,.12);
+}
+.light .busiverse-btn-secondary:hover:not(:disabled),
+.light .busiverse-btn-ghost:hover:not(:disabled) {
+  background: rgba(15,23,42,.08);
+  color: hsl(var(--foreground));
+}
+
+.light .busiverse-input,
+.light .busiverse-region-selector select {
+  background: rgba(255,255,255,.88);
+  color: hsl(var(--foreground));
+  border-color: rgba(15,23,42,.14);
+}
+.light .busiverse-field label { color: hsl(var(--foreground)); }
+.light .busiverse-field-hint,
+.light .busiverse-pricing-card-footer,
+.light .busiverse-pricing-code,
+.light .busiverse-stat-card span,
+.light .busiverse-marketing-price-line span { color: hsl(var(--text-muted)); }
+.light .busiverse-table th { background: rgba(15,23,42,.04); }
+.light .busiverse-table th,
+.light .busiverse-table td { border-color: rgba(15,23,42,.08); }
+
+/* Common dark-first Tailwind utility compatibility. Keep this narrow and BUSIVERSE-scoped. */
+.light .text-white { color: hsl(var(--foreground)) !important; }
+.light .text-slate-100,
+.light .text-slate-200,
+.light .text-slate-300,
+.light .text-gray-100,
+.light .text-gray-200,
+.light .text-gray-300 { color: hsl(var(--text-body)) !important; }
+.light .text-slate-400,
+.light .text-gray-400 { color: hsl(var(--text-muted)) !important; }
+.light .border-white\/10 { border-color: rgba(15,23,42,.10) !important; }
+.light .border-white\/20 { border-color: rgba(15,23,42,.20) !important; }
+.light .bg-white\/5 { background-color: rgba(15,23,42,.04) !important; }
+.light .bg-white\/10 { background-color: rgba(15,23,42,.08) !important; }
+.light .bg-slate-950,
+.light .bg-slate-900,
+.light .bg-\[hsl\(var\(--base-bg\)\)\] { background-color: hsl(var(--background)) !important; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@busiverse/ui",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "author": "Joel Julius Okoromi <okmarq@gmail.com> (https://busiversehq.com)",
   "description": "BUSIVERSE shared React UI, design tokens, pricing, i18n, auth helpers, and product shell. Network-neutral core; Gateway transport is app-injected.",
   "type": "module",