@bergetai/ui 0.1.80 → 0.1.82

package/dist/styles/index.css

@@ -117,14 +117,14 @@
   /* ── Surfaces ───────────────────────────────────────────────────── */
   --berget-background: var(--berget-brand-granite-950); /* Bedrock · page bg */
   --berget-foreground: var(--berget-brand-sandstone-100); /* warm white · primary text */
-  --berget-foreground-alt: color-mix(in oklch, var(--berget-brand-sandstone-100) 80%, transparent);
-  --berget-body-background: color-mix(in oklch, var(--berget-brand-sandstone-100) 80%, transparent);
+  --berget-foreground-alt: color-mix(in oklch, var(--berget-foreground) 80%, transparent);
+  --berget-body-background: color-mix(in oklch, var(--berget-foreground) 80%, transparent);
   --berget-mid-alt: var(--berget-brand-granite-950);
 
   /* ── Core surface + text aliases ────────────────────────────────── */
   --berget-surface-01: var(--berget-brand-granite-900);
   --berget-surface-02: var(--berget-brand-granite-800);
-  --berget-surface-subtlest: color-mix(in oklch, var(--berget-brand-sandstone-100) 3%, transparent);
+  --berget-surface-subtlest: color-mix(in oklch, var(--berget-foreground) 3%, transparent);
   --berget-text-inverse: var(--berget-brand-granite-950);
 
   /* ── Cards / containers ─────────────────────────────────────────── */
@@ -133,18 +133,14 @@
   --berget-popover: var(--berget-brand-granite-900);
   --berget-popover-foreground: var(--berget-brand-sandstone-100);
   --berget-muted: var(--berget-brand-granite-950);
-  --berget-muted-foreground: color-mix(
-    in oklch,
-    var(--berget-brand-sandstone-100) 80%,
-    transparent
-  );
+  --berget-muted-foreground: color-mix(in oklch, var(--berget-foreground) 80%, transparent);
 
   /* ── Surface semantic aliases ────────────────────────────────────── */
   --berget-primary: var(--berget-brand-sandstone-100); /* primary CTA / action */
-  --berget-primary-foreground: var(--berget-brand-sandstone-100);
+  --berget-primary-foreground: var(--berget-foreground);
   --berget-primary-hover: var(--berget-brand-granite-950);
   --berget-secondary: var(--berget-brand-moss-400); /* moss = action */
-  --berget-secondary-foreground: var(--berget-brand-sandstone-100);
+  --berget-secondary-foreground: var(--berget-foreground);
   --berget-secondary-hover: color-mix(in oklch, var(--berget-brand-moss-400) 40%, transparent);
 
   /* ── Accent ──────────────────────────────────────────────────────── */
@@ -156,12 +152,12 @@
   /* ── Ghost ───────────────────────────────────────────────────────·─ */
   --berget-ghost: color-mix(in oklch, var(--berget-brand-granite-900) 40%, transparent);
   --berget-ghost-hover: color-mix(in oklch, var(--berget-brand-granite-900) 80%, transparent);
-  --berget-ghost-foreground: var(--berget-brand-sandstone-100);
+  --berget-ghost-foreground: var(--berget-foreground);
 
   /* ── Outline ────────────────────────────────────────────────────── */
   --berget-outline: var(--berget-brand-moss-300); /* Lichen */
-  --berget-outline-hover: color-mix(in oklch, var(--berget-brand-sandstone-100) 5%, transparent);
-  --berget-outline-active: color-mix(in oklch, var(--berget-brand-sandstone-100) 15%, transparent);
+  --berget-outline-hover: color-mix(in oklch, var(--berget-foreground) 5%, transparent);
+  --berget-outline-active: color-mix(in oklch, var(--berget-foreground) 15%, transparent);
 
   /* ── Borders / inputs ───────────────────────────────────────────── */
   --berget-border: var(--berget-brand-granite-700);
@@ -176,34 +172,26 @@
 
   /* ── Sidebar ────────────────────────────────────────────────────── */
   --berget-sidebar: color-mix(in oklch, var(--berget-brand-granite-900) 40%, transparent);
-  --berget-sidebar-foreground: color-mix(
-    in oklch,
-    var(--berget-brand-sandstone-100) 80%,
-    transparent
-  );
+  --berget-sidebar-foreground: color-mix(in oklch, var(--berget-foreground) 80%, transparent);
   --berget-sidebar-accent: var(--berget-brand-moss-400);
   --berget-sidebar-accent-foreground: var(--berget-brand-sandstone-100);
-  --berget-sidebar-border: color-mix(in oklch, var(--berget-brand-sandstone-100) 5%, transparent);
+  --berget-sidebar-border: color-mix(in oklch, var(--berget-foreground) 5%, transparent);
   --berget-sidebar-ring: var(--berget-brand-moss-300);
 
   /* ── Utility ──────────────────────────────────────────────────────── */
-  --berget-backdrop: color-mix(in oklch, var(--berget-brand-granite-900) 80%, transparent);
+  --berget-backdrop: color-mix(in oklch, var(--berget-surface-01) 80%, transparent);
 
   /* ── Interactive surface tints ──────────────────────────────────── */
-  --berget-surface-hover: color-mix(in oklch, var(--berget-brand-sandstone-100) 2%, transparent);
-  --berget-surface-subtle: color-mix(in oklch, var(--berget-brand-sandstone-100) 5%, transparent);
-  --berget-surface-raised: color-mix(in oklch, var(--berget-brand-sandstone-100) 10%, transparent);
+  --berget-surface-hover: color-mix(in oklch, var(--berget-foreground) 2%, transparent);
+  --berget-surface-subtle: color-mix(in oklch, var(--berget-foreground) 5%, transparent);
+  --berget-surface-raised: color-mix(in oklch, var(--berget-foreground) 10%, transparent);
 
   /* ── Subtle borders ──────────────────────────────────────────────── */
-  --berget-border-subtle: color-mix(in oklch, var(--berget-brand-sandstone-100) 10%, transparent);
-  --berget-border-interactive: color-mix(
-    in oklch,
-    var(--berget-brand-sandstone-100) 20%,
-    transparent
-  );
+  --berget-border-subtle: color-mix(in oklch, var(--berget-foreground) 10%, transparent);
+  --berget-border-interactive: color-mix(in oklch, var(--berget-foreground) 20%, transparent);
   --berget-border-interactive-elevated: color-mix(
     in oklch,
-    var(--berget-brand-sandstone-100) 30%,
+    var(--berget-foreground) 30%,
     transparent
   );
 
@@ -216,16 +204,12 @@
   --berget-form-focus-border: color-mix(in oklch, var(--berget-brand-moss-400) 40%, transparent);
 
   /* ── Dark surface hover (for elements on dark backgrounds) ───────── */
-  --berget-surface-hover-dark: color-mix(
-    in oklch,
-    var(--berget-brand-granite-900) 20%,
-    transparent
-  );
+  --berget-surface-hover-dark: color-mix(in oklch, var(--berget-surface-01) 20%, transparent);
 
   /* ── Separator / icon tint ──────────────────────────────────────── */
-  --berget-separator: color-mix(in oklch, var(--berget-brand-sandstone-100) 10%, transparent);
-  --berget-separator-subtle: color-mix(in oklch, var(--berget-brand-sandstone-100) 5%, transparent);
-  --berget-icon-muted: color-mix(in oklch, var(--berget-brand-sandstone-100) 60%, transparent);
+  --berget-separator: color-mix(in oklch, var(--berget-foreground) 10%, transparent);
+  --berget-separator-subtle: color-mix(in oklch, var(--berget-foreground) 5%, transparent);
+  --berget-icon-muted: color-mix(in oklch, var(--berget-foreground) 60%, transparent);
 
   /* ── Status ─────────────────────────────────────────────────────── */
   --berget-info: color-mix(in oklch, var(--berget-brand-fjord-400) 20%, transparent);
@@ -332,6 +316,187 @@
   --berget-font-mono: 'DM Mono', monospace;
 }
 
+/*
+ * B.1 Light mode overrides
+ *
+ * Inverts the semantic palette so the same component code renders
+ * correctly without modification. Brand primitives stay unchanged.
+ * Only semantic tokens are overridden.
+ */
+[data-theme='light'] {
+  /* ── Surfaces ───────────────────────────────────────────────────── */
+  --berget-background: var(--berget-brand-granite-50);
+  --berget-foreground: var(--berget-brand-granite-950);
+  --berget-foreground-alt: color-mix(in oklch, var(--berget-foreground) 80%, transparent);
+  --berget-body-background: color-mix(in oklch, var(--berget-foreground) 80%, transparent);
+  --berget-mid-alt: var(--berget-brand-sandstone-50);
+
+  /* ── Core surface + text aliases ────────────────────────────────── */
+  --berget-surface-01: var(--berget-brand-granite-100);
+  --berget-surface-02: var(--berget-brand-granite-200);
+  --berget-surface-subtlest: color-mix(in oklch, var(--berget-brand-granite-950) 5%, transparent);
+  --berget-text-inverse: var(--berget-brand-sandstone-100);
+
+  /* ── Cards / containers ─────────────────────────────────────────── */
+  --berget-card: color-mix(in oklch, var(--berget-brand-granite-100) 40%, transparent);
+  --berget-card-foreground: var(--berget-brand-granite-950);
+  --berget-popover: var(--berget-brand-granite-100);
+  --berget-popover-foreground: var(--berget-brand-granite-950);
+  --berget-muted: var(--berget-brand-sandstone-100);
+  --berget-muted-foreground: color-mix(in oklch, var(--berget-brand-granite-950) 70%, transparent);
+
+  /* ── Surface semantic aliases ────────────────────────────────────── */
+  --berget-primary: var(--berget-brand-granite-950);
+  --berget-primary-foreground: var(--berget-brand-sandstone-100);
+  --berget-primary-hover: var(--berget-brand-sandstone-50);
+  --berget-secondary: var(--berget-brand-moss-400);
+  --berget-secondary-foreground: var(--berget-brand-sandstone-100);
+  --berget-secondary-hover: color-mix(in oklch, var(--berget-brand-moss-400) 40%, transparent);
+
+  /* ── Accent ──────────────────────────────────────────────────────── */
+  --berget-accent: var(--berget-brand-moss-300);
+  --berget-accent-foreground: var(--berget-brand-granite-900);
+  --berget-accent-2: var(--berget-brand-chanterelle-300);
+  --berget-accent-3: var(--berget-brand-fjord-700);
+
+  /* ── Ghost ───────────────────────────────────────────────────────·─ */
+  --berget-ghost: color-mix(in oklch, var(--berget-brand-granite-900) 10%, transparent);
+  --berget-ghost-hover: color-mix(in oklch, var(--berget-brand-granite-900) 20%, transparent);
+  --berget-ghost-foreground: var(--berget-brand-granite-950);
+
+  /* ── Outline ────────────────────────────────────────────────────── */
+  --berget-outline: var(--berget-brand-moss-500);
+  --berget-outline-hover: color-mix(in oklch, var(--berget-brand-granite-950) 5%, transparent);
+  --berget-outline-active: color-mix(in oklch, var(--berget-brand-granite-950) 15%, transparent);
+
+  /* ── Borders / inputs ───────────────────────────────────────────── */
+  --berget-border: var(--berget-brand-granite-300);
+  --berget-input: var(--berget-brand-granite-300);
+  --berget-ring: var(--berget-brand-moss-300);
+  --berget-ring-error: var(--berget-brand-muscaria-500);
+
+  /* ── Destructive ────────────────────────────────────────────────── */
+  --berget-destructive: color-mix(in oklch, var(--berget-brand-muscaria-500) 20%, transparent);
+  --berget-destructive-border: var(--berget-brand-muscaria-500);
+  --berget-destructive-foreground: var(--berget-brand-muscaria-500);
+
+  /* ── Sidebar ────────────────────────────────────────────────────── */
+  --berget-sidebar: color-mix(in oklch, var(--berget-brand-granite-100) 40%, transparent);
+  --berget-sidebar-foreground: color-mix(
+    in oklch,
+    var(--berget-brand-granite-950) 80%,
+    transparent
+  );
+  --berget-sidebar-accent: var(--berget-brand-moss-400);
+  --berget-sidebar-accent-foreground: var(--berget-brand-sandstone-100);
+  --berget-sidebar-border: color-mix(in oklch, var(--berget-brand-granite-950) 5%, transparent);
+  --berget-sidebar-ring: var(--berget-brand-moss-300);
+
+  /* ── Utility ──────────────────────────────────────────────────────── */
+  --berget-backdrop: color-mix(in oklch, var(--berget-brand-granite-100) 80%, transparent);
+
+  /* ── Interactive surface tints ──────────────────────────────────── */
+  --berget-surface-hover: color-mix(in oklch, var(--berget-brand-granite-950) 2%, transparent);
+  --berget-surface-subtle: color-mix(in oklch, var(--berget-brand-granite-950) 5%, transparent);
+  --berget-surface-raised: color-mix(in oklch, var(--berget-brand-granite-950) 10%, transparent);
+
+  /* ── Subtle borders ──────────────────────────────────────────────── */
+  --berget-border-subtle: color-mix(in oklch, var(--berget-brand-granite-950) 10%, transparent);
+  --berget-border-interactive: color-mix(
+    in oklch,
+    var(--berget-brand-granite-950) 20%,
+    transparent
+  );
+  --berget-border-interactive-elevated: color-mix(
+    in oklch,
+    var(--berget-brand-granite-950) 30%,
+    transparent
+  );
+
+  /* ── Primary tint surfaces (for active/selected/focused states) ───── */
+  --berget-primary-tint: color-mix(in oklch, var(--berget-brand-moss-400) 10%, transparent);
+  --berget-primary-tint-hover: color-mix(in oklch, var(--berget-brand-moss-400) 20%, transparent);
+  --berget-primary-border: color-mix(in oklch, var(--berget-brand-moss-400) 50%, transparent);
+
+  /* ── Focus-visible ring on form controls ───────────────────────── */
+  --berget-form-focus-border: color-mix(in oklch, var(--berget-brand-moss-400) 40%, transparent);
+
+  /* ── Dark surface hover (for elements on dark backgrounds) ───────── */
+  --berget-surface-hover-dark: color-mix(
+    in oklch,
+    var(--berget-brand-granite-100) 20%,
+    transparent
+  );
+
+  /* ── Separator / icon tint ──────────────────────────────────────── */
+  --berget-separator: color-mix(in oklch, var(--berget-brand-granite-950) 10%, transparent);
+  --berget-separator-subtle: color-mix(in oklch, var(--berget-brand-granite-950) 5%, transparent);
+  --berget-icon-muted: color-mix(in oklch, var(--berget-brand-granite-950) 60%, transparent);
+
+  /* ── Status ─────────────────────────────────────────────────────── */
+  --berget-info: color-mix(in oklch, var(--berget-brand-fjord-500) 20%, transparent);
+  --berget-info-foreground: var(--berget-brand-fjord-600);
+  --berget-info-border: var(--berget-brand-fjord-500);
+  --berget-success: color-mix(in oklch, var(--berget-brand-moss-500) 20%, transparent);
+  --berget-success-foreground: var(--berget-brand-moss-600);
+  --berget-success-border: var(--berget-brand-moss-500);
+  --berget-warning: color-mix(in oklch, var(--berget-brand-chanterelle-400) 20%, transparent);
+  --berget-warning-foreground: var(--berget-brand-chanterelle-600);
+  --berget-warning-border: var(--berget-brand-chanterelle-400);
+
+  /* ── Card component-scoped tokens ───────────────────────────────── */
+  --berget-card-filled-bg: var(--berget-surface-01);
+
+  /* ── CodeBlock component-scoped tokens ──────────────────────────── */
+  --berget-codeblock-bg: var(--berget-surface-01);
+  --berget-codeblock-header-bg: color-mix(in oklch, var(--berget-surface-02) 40%, transparent);
+
+  /* ── Badge component-scoped tokens ──────────────────────────────── */
+  --berget-badge-default-bg: var(--berget-brand-moss-500);
+  --berget-badge-default-fg: var(--berget-foreground);
+  --berget-badge-active-bg: var(--berget-brand-moss-500);
+  --berget-badge-active-fg: var(--berget-foreground-alt);
+  --berget-badge-tag-default-bg: var(--berget-primary);
+  --berget-badge-tag-default-fg: color-mix(in oklch, var(--berget-text-inverse) 80%, transparent);
+  --berget-badge-tag-active-bg: var(--berget-surface-01);
+  --berget-badge-tag-active-fg: var(--berget-foreground);
+  --berget-badge-tag-ghost-bg: color-mix(in oklch, var(--berget-primary) 30%, transparent);
+  --berget-badge-tag-ghost-fg: color-mix(in oklch, var(--berget-text-inverse) 60%, transparent);
+
+  /* ── Switch component-scoped tokens ─────────────────────────────── */
+  --berget-switch-primary-checked: var(--berget-brand-moss-400);
+  --berget-switch-subtle-checked: var(--berget-brand-moss-300);
+
+  /* ── FeatureCards component-scoped tokens ─────────────────────── */
+  --berget-feature-card-badge-bg: var(--berget-brand-moss-500);
+  --berget-feature-card-badge-fg: var(--berget-foreground);
+
+  /* ── Logo tokens ──────────────────────────────────────────────── */
+  --berget-logo-light: var(--berget-brand-granite-950);
+  --berget-logo-dark: var(--berget-brand-sandstone-100);
+
+  /* ── Section component-scoped tokens ────────────────────────────── */
+  --berget-section-muted-bg: var(--berget-surface-subtlest);
+
+  /* ── Button component-scoped tokens ─────────────────────────────── */
+  --berget-button-default-bg: var(--berget-brand-granite-900);
+  --berget-button-default-fg: var(--berget-brand-sandstone-100);
+  --berget-button-primary-bg: var(--berget-brand-moss-400);
+  --berget-button-primary-fg: var(--berget-brand-granite-950);
+  --berget-button-secondary-bg: var(--berget-brand-moss-300);
+  --berget-button-secondary-fg: var(--berget-brand-granite-950);
+  --berget-button-destructive-bg: var(--berget-brand-muscaria-500);
+  --berget-button-destructive-fg: var(--berget-brand-sandstone-100);
+  --berget-button-link-fg: var(--berget-brand-moss-500);
+
+  /* ── Shadows ─────────────────────────────────────────────────────·─ */
+  --berget-shadow-sm: 0 4px 4px color-mix(in oklch, var(--berget-brand-granite-300) 5%, transparent);
+  --berget-shadow-md: 0 8px 8px 4px
+    color-mix(in oklch, var(--berget-brand-granite-300) 5%, transparent);
+  --berget-shadow-lg: 0 8px 12px
+    color-mix(in oklch, var(--berget-brand-granite-300) 40%, transparent);
+}
+
 /*
  * B.2 Tint system
  *
@@ -354,6 +519,12 @@
   --berget-tint-hue-error: 29;
 }
 
+[data-theme='light'] {
+  /* Lighter tinted backgrounds for light mode */
+  --berget-tint-l: 92%;
+  --berget-tint-border-l: 84%;
+}
+
 /* one rule for any tinted container, whatever the component */
 .berget-tint {
   background: oklch(var(--berget-tint-l) var(--berget-tint-c) var(--berget-tint-h));
@@ -419,6 +590,28 @@
     --radius: 0.5rem;
   }
 
+  [data-theme='light'] {
+    --background: var(--berget-brand-granite-50);
+    --foreground: var(--berget-brand-granite-950);
+    --primary: var(--berget-brand-granite-950);
+    --primary-foreground: var(--berget-brand-sandstone-100);
+    --secondary: var(--berget-brand-moss-400);
+    --secondary-foreground: var(--berget-brand-sandstone-100);
+    --accent: var(--berget-brand-moss-300);
+    --accent-foreground: var(--berget-brand-granite-900);
+    --muted: var(--berget-brand-sandstone-100);
+    --muted-foreground: var(--berget-brand-granite-950);
+    --card: var(--berget-brand-granite-100);
+    --card-foreground: var(--berget-brand-granite-950);
+    --popover: var(--berget-brand-granite-100);
+    --popover-foreground: var(--berget-brand-granite-950);
+    --input: var(--berget-brand-granite-300);
+    --border: var(--berget-brand-granite-300);
+    --ring: var(--berget-brand-moss-300);
+    --destructive: var(--berget-brand-muscaria-500);
+    --destructive-foreground: var(--berget-brand-sandstone-100);
+  }
+
   body {
     color: var(--foreground);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bergetai/ui",
-  "version": "0.1.80",
+  "version": "0.1.82",
   "description": "Berget Design System - Scandinavian-inspired design system with console aesthetic",
   "type": "module",
   "license": "MIT",