@bergetai/ui 0.7.0 → 0.8.0

package/dist/styles/index.css

@@ -26,10 +26,10 @@
 
   /* ────────────────────────────
      SANDSTONE — warm stone
-     100 = primary text warmth
+     Mid-warmth accent. Not a semantic foreground.
      ──────────────────────────── */
   --berget-brand-sandstone-50: oklch(96% 0.005 68); /* #F4F1EE */
-  --berget-brand-sandstone-100: oklch(91% 0.011 68); /* #E7E0D9 · primary text */
+  --berget-brand-sandstone-100: oklch(91% 0.011 68); /* #E7E0D9 · Cloud */
   --berget-brand-sandstone-200: oklch(85% 0.022 68); /* #D8CBBF */
   --berget-brand-sandstone-300: oklch(76% 0.033 68); /* #C0AE9B */
   --berget-brand-sandstone-400: oklch(66% 0.043 68); /* #A48E76 */
@@ -75,6 +75,7 @@
   /* ────────────────────────────
      MUSCARIA — red (forest floor)
      500 = brand red #D1392E (pinned)
+     Destructive / error only — never a brand accent.
      ──────────────────────────── */
   --berget-brand-muscaria-50: oklch(96% 0.02 29); /* #FFEDEA */
   --berget-brand-muscaria-100: oklch(91% 0.044 29); /* #FED7D1 */
@@ -116,10 +117,9 @@
 :root {
   /* ── Surfaces ───────────────────────────────────────────────────── */
   --berget-background: var(--berget-brand-granite-950); /* Bedrock · page bg */
-  --berget-foreground: var(--berget-brand-sandstone-100); /* warm white · primary text */
+  --berget-foreground: var(--berget-brand-granite-50); /* Peak · primary text */
   --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);
@@ -129,19 +129,20 @@
 
   /* ── Cards / containers ─────────────────────────────────────────── */
   --berget-card: color-mix(in oklch, var(--berget-brand-granite-900) 40%, transparent);
-  --berget-card-foreground: var(--berget-brand-sandstone-100);
+  --berget-card-foreground: var(--berget-brand-granite-50);
   --berget-popover: var(--berget-brand-granite-900);
-  --berget-popover-foreground: var(--berget-brand-sandstone-100);
+  --berget-popover-foreground: var(--berget-brand-granite-50);
   --berget-muted: var(--berget-brand-granite-950);
   --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-foreground);
-  --berget-primary-hover: var(--berget-brand-granite-950);
-  --berget-secondary: var(--berget-brand-moss-400); /* moss = action */
+  /* Primary action = Moss. Neutral solid = the theme's foreground extreme. */
+  --berget-primary: var(--berget-brand-moss-400); /* primary CTA / action */
+  --berget-primary-foreground: var(--berget-brand-granite-950);
+  --berget-primary-hover: var(--berget-brand-moss-500);
+  --berget-secondary: var(--berget-brand-granite-800); /* neutral solid secondary */
   --berget-secondary-foreground: var(--berget-foreground);
-  --berget-secondary-hover: color-mix(in oklch, var(--berget-brand-moss-400) 40%, transparent);
+  --berget-secondary-hover: color-mix(in oklch, var(--berget-brand-granite-800) 80%, transparent);
 
   /* ── Accent ──────────────────────────────────────────────────────── */
   --berget-accent: var(--berget-brand-moss-300); /* lichen · tertiary accent */
@@ -174,7 +175,7 @@
   --berget-sidebar: color-mix(in oklch, var(--berget-brand-granite-900) 40%, 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-accent-foreground: var(--berget-brand-granite-950);
   --berget-sidebar-border: color-mix(in oklch, var(--berget-foreground) 5%, transparent);
   --berget-sidebar-ring: var(--berget-brand-moss-300);
 
@@ -235,27 +236,27 @@
   --berget-dialog-border: var(--berget-border);
 
   /* ── Shiki syntax-highlighting tokens ─────────────────────────────── */
-  --berget-shiki-foreground: var(--berget-brand-sandstone-100);
+  --berget-shiki-foreground: var(--berget-brand-granite-50);
   --berget-shiki-background: var(--berget-brand-granite-800);
   --berget-shiki-token-comment: var(--berget-brand-granite-300);
   --berget-shiki-token-keyword: var(--berget-brand-moss-400);
   --berget-shiki-token-string: var(--berget-brand-moss-300);
   --berget-shiki-token-constant: var(--berget-brand-moss-300);
   --berget-shiki-token-function: var(--berget-brand-fjord-400);
-  --berget-shiki-token-parameter: var(--berget-brand-sandstone-100);
+  --berget-shiki-token-parameter: var(--berget-brand-granite-50);
   --berget-shiki-token-string-expression: var(--berget-brand-moss-300);
-  --berget-shiki-token-punctuation: var(--berget-brand-sandstone-100);
+  --berget-shiki-token-punctuation: var(--berget-brand-granite-50);
 
   /* ── Badge component-scoped tokens ──────────────────────────────── */
   --berget-badge-default-bg: var(--berget-brand-moss-600);
   --berget-badge-default-fg: var(--berget-foreground);
   --berget-badge-active-bg: var(--berget-brand-moss-600);
   --berget-badge-active-fg: var(--berget-foreground);
-  --berget-badge-tag-default-bg: var(--berget-primary);
+  --berget-badge-tag-default-bg: var(--berget-brand-granite-50);
   --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-bg: color-mix(in oklch, var(--berget-brand-granite-50) 30%, transparent);
   --berget-badge-tag-ghost-fg: var(--berget-foreground);
 
   /* ── Switch component-scoped tokens ─────────────────────────────── */
@@ -267,19 +268,21 @@
   --berget-feature-card-badge-fg: var(--berget-foreground);
 
   /* ── Logo tokens ──────────────────────────────────────────────── */
-  --berget-logo-light: var(--berget-brand-sandstone-100);
+  /* The mark is pure white — brighter than body text on purpose. */
+  --berget-logo-light: #ffffff;
   --berget-logo-dark: var(--berget-brand-granite-950);
 
   /* ── Section component-scoped tokens ────────────────────────────── */
   --berget-section-muted-bg: var(--berget-surface-subtlest);
 
   /* ── Button component-scoped tokens ─────────────────────────────── */
-  /* default (sandstone-100 bg, granite-900 text) */
-  --berget-button-default-bg: var(--berget-brand-sandstone-100);
-  --berget-button-default-fg: var(--berget-brand-granite-900);
+  /* default (granite-50 bg, granite-950 text) */
+  --berget-button-default-bg: var(--berget-brand-granite-50);
+  --berget-button-default-fg: var(--berget-brand-granite-950);
   /* primary (moss-400 bg, granite-950 text) */
   --berget-button-primary-bg: var(--berget-brand-moss-400);
   --berget-button-primary-fg: var(--berget-brand-granite-950);
+  --berget-button-primary-hover: var(--berget-brand-moss-500);
 
   /* destructive (muscaria-400 bg, granite-950 text) */
   --berget-button-destructive-bg: var(--berget-brand-muscaria-400);
@@ -349,8 +352,8 @@
 
   /* ── Chart ──────────────────────────────────────────────────────── */
   --berget-chart-1: var(--berget-brand-chanterelle-300);
-  --berget-chart-2: var(--berget-brand-moss-400);
-  --berget-chart-3: var(--berget-brand-moss-400);
+  --berget-chart-2: var(--berget-brand-fjord-400);
+  --berget-chart-3: var(--berget-brand-moss-300);
   --berget-chart-4: var(--berget-brand-moss-600);
   --berget-chart-5: var(--berget-brand-fjord-700);
 
@@ -381,29 +384,28 @@
   --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);
+  --berget-text-inverse: var(--berget-brand-granite-50);
 
   /* ── 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: var(--berget-brand-granite-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);
+  --berget-primary: var(--berget-brand-moss-400); /* primary CTA / action */
+  --berget-primary-foreground: var(--berget-brand-granite-950);
+  --berget-primary-hover: var(--berget-brand-moss-500);
+  --berget-secondary: var(--berget-brand-granite-200); /* neutral solid secondary */
+  --berget-secondary-foreground: var(--berget-brand-granite-950);
+  --berget-secondary-hover: color-mix(in oklch, var(--berget-brand-granite-200) 80%, transparent);
 
   /* ── Accent ──────────────────────────────────────────────────────── */
   --berget-accent: var(--berget-brand-moss-300);
@@ -440,7 +442,7 @@
     transparent
   );
   --berget-sidebar-accent: var(--berget-brand-moss-400);
-  --berget-sidebar-accent-foreground: var(--berget-brand-sandstone-100);
+  --berget-sidebar-accent-foreground: var(--berget-brand-granite-950);
   --berget-sidebar-border: color-mix(in oklch, var(--berget-brand-granite-950) 5%, transparent);
   --berget-sidebar-ring: var(--berget-brand-moss-300);
 
@@ -525,11 +527,15 @@
   --berget-badge-default-fg: var(--berget-foreground);
   --berget-badge-active-bg: var(--berget-brand-moss-500);
   --berget-badge-active-fg: var(--berget-foreground);
-  --berget-badge-tag-default-bg: var(--berget-primary);
+  --berget-badge-tag-default-bg: var(--berget-brand-granite-950);
   --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-bg: color-mix(
+    in oklch,
+    var(--berget-brand-granite-950) 30%,
+    transparent
+  );
   --berget-badge-tag-ghost-fg: var(--berget-foreground);
 
   /* ── Switch component-scoped tokens ─────────────────────────────── */
@@ -542,16 +548,17 @@
 
   /* ── Logo tokens ──────────────────────────────────────────────── */
   --berget-logo-light: var(--berget-brand-granite-950);
-  --berget-logo-dark: var(--berget-brand-sandstone-100);
+  --berget-logo-dark: #ffffff;
 
   /* ── 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-default-bg: var(--berget-brand-granite-950);
+  --berget-button-default-fg: var(--berget-brand-granite-50);
   --berget-button-primary-bg: var(--berget-brand-moss-400);
   --berget-button-primary-fg: var(--berget-brand-granite-950);
+  --berget-button-primary-hover: var(--berget-brand-moss-500);
 
   --berget-button-destructive-bg: var(--berget-brand-muscaria-400);
   --berget-button-destructive-fg: var(--berget-brand-granite-950);
@@ -645,37 +652,37 @@
 @layer base {
   :root {
     --background: var(--berget-brand-granite-950); /* Bedrock */
-    --foreground: var(--berget-brand-sandstone-100); /* warm primary text */
-    --primary: var(--berget-brand-sandstone-100); /* warm text (surfaces) */
+    --foreground: var(--berget-brand-granite-50); /* Peak · primary text */
+    --primary: var(--berget-brand-moss-400); /* Moss · primary action */
     --primary-foreground: var(--berget-brand-granite-950);
-    --secondary: var(--berget-brand-moss-400); /* moss action */
-    --secondary-foreground: var(--berget-brand-sandstone-100);
+    --secondary: var(--berget-brand-granite-800); /* neutral solid */
+    --secondary-foreground: var(--berget-brand-granite-50);
     --accent: var(--berget-brand-moss-300); /* lichen */
     --accent-foreground: var(--berget-brand-granite-900);
     --muted: var(--berget-brand-granite-950);
-    --muted-foreground: var(--berget-brand-sandstone-100);
+    --muted-foreground: var(--berget-brand-granite-50);
     --card: var(--berget-brand-granite-900); /* Slate */
-    --card-foreground: var(--berget-brand-sandstone-100);
+    --card-foreground: var(--berget-brand-granite-50);
     --popover: var(--berget-brand-granite-900);
-    --popover-foreground: var(--berget-brand-sandstone-100);
+    --popover-foreground: var(--berget-brand-granite-50);
     --input: var(--berget-brand-granite-700);
     --border: var(--berget-brand-granite-700);
     --ring: var(--berget-brand-moss-300); /* Lichen */
     --destructive: var(--berget-brand-muscaria-400);
-    --destructive-foreground: var(--berget-brand-sandstone-100);
+    --destructive-foreground: var(--berget-brand-granite-50);
     --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);
+    --primary: var(--berget-brand-moss-400); /* Moss · primary action */
+    --primary-foreground: var(--berget-brand-granite-950);
+    --secondary: var(--berget-brand-granite-200); /* neutral solid */
+    --secondary-foreground: var(--berget-brand-granite-950);
     --accent: var(--berget-brand-moss-300);
     --accent-foreground: var(--berget-brand-granite-900);
-    --muted: var(--berget-brand-sandstone-100);
+    --muted: var(--berget-brand-granite-100);
     --muted-foreground: var(--berget-brand-granite-950);
     --card: var(--berget-brand-granite-100);
     --card-foreground: var(--berget-brand-granite-950);
@@ -685,7 +692,7 @@
     --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);
+    --destructive-foreground: var(--berget-brand-granite-50);
   }
 
   body {
@@ -770,53 +777,6 @@
   --font-size-feature-description: 16px;
   --line-height-feature-description: 24px;
 
-  /* Float animations for GrainyGradientBackground */
-  --animate-float-slow: float-slow 20s ease-in-out infinite;
-  --animate-float-medium: float-medium 14s ease-in-out infinite;
-  --animate-float-fast: float-fast 8s ease-in-out infinite;
-
-  /* Gradient tokens */
-  --bg-image-gradient-fjord-slate: linear-gradient(
-    to right,
-    var(--berget-brand-fjord-700),
-    var(--berget-brand-granite-900)
-  );
-  --bg-image-gradient-slate-night: linear-gradient(
-    to right,
-    var(--berget-brand-granite-900),
-    var(--berget-brand-granite-950)
-  );
-  --bg-image-gradient-spruce-fjord: linear-gradient(
-    to right,
-    var(--berget-brand-moss-600),
-    var(--berget-brand-fjord-700)
-  );
-  --bg-image-gradient-spruce-slate: linear-gradient(
-    to right,
-    var(--berget-brand-moss-600),
-    var(--berget-brand-granite-900)
-  );
-  --bg-image-gradient-spruce-night: linear-gradient(
-    to right,
-    var(--berget-brand-moss-600),
-    var(--berget-brand-granite-950)
-  );
-  --bg-image-gradient-moss-lichen: linear-gradient(
-    to right,
-    var(--berget-brand-moss-400),
-    var(--berget-brand-moss-300)
-  );
-  --bg-image-gradient-moss-spruce: linear-gradient(
-    to right,
-    var(--berget-brand-moss-400),
-    var(--berget-brand-moss-600)
-  );
-  --bg-image-gradient-lichen-sandstone: linear-gradient(
-    to right,
-    var(--berget-brand-moss-300),
-    var(--berget-brand-sandstone-100)
-  );
-
   /* Full Granite scale (11 step) */
   --color-berget-brand-granite-50: oklch(96% 0.004 70);
   --color-berget-brand-granite-100: oklch(91% 0.005 70);
@@ -902,7 +862,6 @@
   --color-berget-foreground: var(--berget-foreground);
   --color-berget-foreground-alt: var(--berget-foreground-alt);
   --color-berget-body-background: var(--berget-body-background);
-  --color-berget-mid-alt: var(--berget-mid-alt);
   --color-berget-card: var(--berget-card);
   --color-berget-card-foreground: var(--berget-card-foreground);
   --color-berget-popover: var(--berget-popover);
@@ -970,6 +929,7 @@
   --color-berget-button-default-fg: var(--berget-button-default-fg);
   --color-berget-button-primary-bg: var(--berget-button-primary-bg);
   --color-berget-button-primary-fg: var(--berget-button-primary-fg);
+  --color-berget-button-primary-hover: var(--berget-button-primary-hover);
 
   --color-berget-button-destructive-bg: var(--berget-button-destructive-bg);
   --color-berget-button-destructive-fg: var(--berget-button-destructive-fg);
@@ -1164,54 +1124,6 @@
   --spacing-gutter: var(--spacing-fluid-lg);
 }
 
-@keyframes float-slow {
-  0%,
-  100% {
-    transform: translateY(0) translateX(0);
-  }
-  33% {
-    transform: translateY(-8px) translateX(4px);
-  }
-  66% {
-    transform: translateY(4px) translateX(-6px);
-  }
-}
-
-@keyframes float-medium {
-  0%,
-  100% {
-    transform: translateY(0) translateX(0);
-  }
-  25% {
-    transform: translateY(-12px) translateX(6px);
-  }
-  50% {
-    transform: translateY(6px) translateX(-8px);
-  }
-  75% {
-    transform: translateY(-4px) translateX(10px);
-  }
-}
-
-@keyframes float-fast {
-  0%,
-  100% {
-    transform: translateY(0) translateX(0);
-  }
-  20% {
-    transform: translateY(-10px) translateX(8px);
-  }
-  40% {
-    transform: translateY(8px) translateX(-6px);
-  }
-  60% {
-    transform: translateY(-6px) translateX(12px);
-  }
-  80% {
-    transform: translateY(4px) translateX(-10px);
-  }
-}
-
 @keyframes fadeIn {
   from {
     opacity: 0;

package/package.json

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