@bergetai/ui 0.11.3 → 0.12.0

package/dist/styles/index.css

@@ -173,10 +173,20 @@
 
   /* ── Sidebar ────────────────────────────────────────────────────── */
   --berget-sidebar: color-mix(in oklch, var(--berget-brand-granite-900) 40%, transparent);
+  /* Opaque variant for surfaces that can't rely on the page bg behind them
+     (e.g. the mobile Sheet panel) — the 40% mix baked over the page bg. */
+  --berget-sidebar-solid: color-mix(
+    in oklch,
+    var(--berget-brand-granite-900) 40%,
+    var(--berget-background)
+  );
   --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-granite-950);
-  --berget-sidebar-border: color-mix(in oklch, var(--berget-foreground) 5%, transparent);
+  /* Hover/active surfaces for sidebar menus (menu buttons, group/menu actions,
+     badges) — neutral surface step, matching upstream shadcn's direction where
+     sidebar-accent is lighter than the sidebar fill in dark theme. */
+  --berget-sidebar-accent: var(--berget-surface-02);
+  --berget-sidebar-accent-foreground: var(--berget-foreground);
+  --berget-sidebar-border: var(--berget-border);
   --berget-sidebar-ring: var(--berget-brand-moss-300);
 
   /* ── Utility ──────────────────────────────────────────────────────── */
@@ -315,6 +325,11 @@
      invert correctly in light mode without per-theme overrides. */
   /* Focus ring: moss-300 on dark, moss-600 on light (both ≥3:1 vs bg, WCAG 2.4.7) */
   --berget-button-focus-ring: var(--berget-brand-moss-300);
+  /* Ghost: transparent fill, foreground text; hover adds the stronger fill,
+     press relaxes to the lighter one (10% / 5% of the theme foreground) */
+  --berget-button-ghost-fg: var(--berget-foreground);
+  --berget-button-ghost-hover: color-mix(in oklch, var(--berget-foreground) 10%, transparent);
+  --berget-button-ghost-active: color-mix(in oklch, var(--berget-foreground) 5%, transparent);
   /* Outline border (static across states — hover only gets a subtle fill) */
   --berget-button-outline-border: color-mix(in oklch, var(--berget-foreground) 25%, transparent);
   /* Outline hover fill: slight brightening (5% of the theme foreground) */
@@ -486,14 +501,19 @@
 
   /* ── Sidebar ────────────────────────────────────────────────────── */
   --berget-sidebar: color-mix(in oklch, var(--berget-brand-granite-100) 40%, transparent);
+  --berget-sidebar-solid: color-mix(
+    in oklch,
+    var(--berget-brand-granite-100) 40%,
+    var(--berget-background)
+  );
   --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-granite-950);
-  --berget-sidebar-border: color-mix(in oklch, var(--berget-brand-granite-950) 5%, transparent);
+  --berget-sidebar-accent: var(--berget-surface-02);
+  --berget-sidebar-accent-foreground: var(--berget-foreground);
+  --berget-sidebar-border: var(--berget-border);
   --berget-sidebar-ring: var(--berget-brand-moss-300);
 
   /* ── Utility ──────────────────────────────────────────────────────── */
@@ -637,6 +657,9 @@
      light palette automatically. Focus ring flips to moss-600 (≥3:1 on
      light surfaces). */
   --berget-button-focus-ring: var(--berget-brand-moss-600);
+  --berget-button-ghost-fg: var(--berget-foreground);
+  --berget-button-ghost-hover: color-mix(in oklch, var(--berget-foreground) 10%, transparent);
+  --berget-button-ghost-active: color-mix(in oklch, var(--berget-foreground) 5%, transparent);
   --berget-button-outline-border: color-mix(in oklch, var(--berget-foreground) 25%, transparent);
   --berget-button-outline-hover: color-mix(in oklch, var(--berget-foreground) 5%, transparent);
   --berget-button-outline-fg: var(--berget-foreground);
@@ -857,6 +880,13 @@
   --color-ring: var(--berget-ring);
   --color-background: var(--berget-background);
   --color-foreground: var(--berget-foreground);
+  --color-sidebar: var(--berget-sidebar);
+  --color-sidebar-solid: var(--berget-sidebar-solid);
+  --color-sidebar-foreground: var(--berget-sidebar-foreground);
+  --color-sidebar-accent: var(--berget-sidebar-accent);
+  --color-sidebar-accent-foreground: var(--berget-sidebar-accent-foreground);
+  --color-sidebar-border: var(--berget-sidebar-border);
+  --color-sidebar-ring: var(--berget-sidebar-ring);
 
   /* Feature card tokens */
   --spacing-feature-card-padding-vertical: 48px;
@@ -1039,6 +1069,9 @@
 
   /* Shared button state aliases */
   --color-berget-button-focus-ring: var(--berget-button-focus-ring);
+  --color-berget-button-ghost-fg: var(--berget-button-ghost-fg);
+  --color-berget-button-ghost-hover: var(--berget-button-ghost-hover);
+  --color-berget-button-ghost-active: var(--berget-button-ghost-active);
   --color-berget-button-outline-border: var(--berget-button-outline-border);
   --color-berget-button-outline-hover: var(--berget-button-outline-hover);
   --color-berget-button-outline-fg: var(--berget-button-outline-fg);
@@ -1125,6 +1158,7 @@
 
   /* Sidebar aliases */
   --color-berget-sidebar: var(--berget-sidebar);
+  --color-berget-sidebar-solid: var(--berget-sidebar-solid);
   --color-berget-sidebar-foreground: var(--berget-sidebar-foreground);
   --color-berget-sidebar-accent: var(--berget-sidebar-accent);
   --color-berget-sidebar-accent-foreground: var(--berget-sidebar-accent-foreground);
@@ -1218,7 +1252,7 @@
   /* Caption / overline (DM Sans, Sans) */
   --text-caption: 0.875rem;
   --leading-caption: 1.4;
-  --tracking-caption: 0.22em;
+  --tracking-caption: 0.1em;
   --font-caption: 'DM Sans', sans-serif;
 
   /* Heading 5 (DM Sans, Sans) */
@@ -1265,3 +1299,22 @@
     color-mix(in oklab, var(--color-background) 80%, transparent) 100%
   );
 }
+
+/* Mobile sidebar Sheet panel: opaque surface. The --berget-sidebar token is
+   translucent (designed to sit over the page background); the mobile panel is
+   a Sheet floating over content, so it bakes the mix over the background via
+   --berget-sidebar-solid. Scoped to the primitive's mobile panel so the
+   primitive itself stays unmodified. */
+[data-slot='sidebar'][data-mobile='true'] {
+  background-color: var(--berget-sidebar-solid);
+}
+
+/* Sidebar edge border. The primitive emits bare border-r/-l, which in stock
+   shadcn is colored by the universal `* { border-color: var(--color-border) }`
+   base rule — there --border equals --sidebar-border, so the sidebar edge
+   matches adjacent page borders. Pin it here so the edge stays on the Berget
+   border token even when an app-level stylesheet overrides --border (e.g. the
+   keycloak theme in Storybook). */
+[data-slot='sidebar-container'] {
+  border-color: var(--berget-sidebar-border);
+}

package/package.json

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