@actioneer/ads 0.5.0 → 0.5.1

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "importPath": "@actioneer/ads",
   "styleImport": "@import \"@actioneer/ads/styles.css\";",
   "families": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [

package/styles.css

@@ -296,16 +296,28 @@
   --color-overlay: var(--overlay);
 
   /*
-   * shadcn-compat aliases — consumed ONLY by the vendored chat components
-   * (src/components/ui, src/components/assistant-ui). ADS UI never uses
-   * these; they map shadcn's expected roles onto ADS tokens.
+   * shadcn-compat aliases — map shadcn's expected color roles onto ADS tokens.
+   * ADS's own UI never uses these; they exist for the vendored chat components
+   * (src/components/ui, src/components/assistant-ui) AND for downstream shadcn
+   * consumers, so a shadcn Sidebar/Popover picks up the ADS palette instead of
+   * shadcn's grey/black defaults. The raw --sidebar-*/--popover values live in
+   * :root below.
    */
   --color-primary-foreground: var(--brand-foreground);
   --color-secondary-foreground: #ffffff;
   --color-destructive: var(--color-danger-600);
   --color-destructive-foreground: #ffffff;
-  --color-popover: var(--elevated);
-  --color-popover-foreground: var(--foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 }
 
 /* ---- Theme (light only) ---- */
@@ -345,6 +357,22 @@
   --input: #c7c6be;
   --ring: rgb(63 122 52 / 0.5);
   --overlay: rgb(26 26 23 / 0.5);
+
+  /* shadcn-compat raw surfaces — so a downstream shadcn Sidebar / Popover
+     (or an inline `var(--sidebar)` / `var(--popover)`) resolves to the ADS
+     palette instead of shadcn's grey/black defaults. The sidebar reads as the
+     warm greige canvas; its active item takes Sage. A consumer that had
+     hard-coded these can now delete its overrides and inherit from here. */
+  --sidebar: var(--surface);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--brand);
+  --sidebar-primary-foreground: var(--brand-foreground);
+  --sidebar-accent: var(--muted);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --popover: var(--elevated);
+  --popover-foreground: var(--foreground);
 }
 /* ---- Base, keyframes & component helpers ---- */
 /* Hide scrollbars app-wide but keep scrollability. The demo UI is filled

package/theme.css

@@ -269,16 +269,28 @@
   --color-overlay: var(--overlay);
 
   /*
-   * shadcn-compat aliases — consumed ONLY by the vendored chat components
-   * (src/components/ui, src/components/assistant-ui). ADS UI never uses
-   * these; they map shadcn's expected roles onto ADS tokens.
+   * shadcn-compat aliases — map shadcn's expected color roles onto ADS tokens.
+   * ADS's own UI never uses these; they exist for the vendored chat components
+   * (src/components/ui, src/components/assistant-ui) AND for downstream shadcn
+   * consumers, so a shadcn Sidebar/Popover picks up the ADS palette instead of
+   * shadcn's grey/black defaults. The raw --sidebar-*/--popover values live in
+   * :root below.
    */
   --color-primary-foreground: var(--brand-foreground);
   --color-secondary-foreground: #ffffff;
   --color-destructive: var(--color-danger-600);
   --color-destructive-foreground: #ffffff;
-  --color-popover: var(--elevated);
-  --color-popover-foreground: var(--foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 }
 
 /* ---- Theme (light only) ---- */
@@ -318,4 +330,20 @@
   --input: #c7c6be;
   --ring: rgb(63 122 52 / 0.5);
   --overlay: rgb(26 26 23 / 0.5);
+
+  /* shadcn-compat raw surfaces — so a downstream shadcn Sidebar / Popover
+     (or an inline `var(--sidebar)` / `var(--popover)`) resolves to the ADS
+     palette instead of shadcn's grey/black defaults. The sidebar reads as the
+     warm greige canvas; its active item takes Sage. A consumer that had
+     hard-coded these can now delete its overrides and inherit from here. */
+  --sidebar: var(--surface);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--brand);
+  --sidebar-primary-foreground: var(--brand-foreground);
+  --sidebar-accent: var(--muted);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --popover: var(--elevated);
+  --popover-foreground: var(--foreground);
 }