@adea-ai/ui 0.18.2 → 0.18.4

package/dist/components/workspace-logo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** The canonical Adea mark used by web, desktop, and dialogs. */
 export function WorkspaceLogo(props) {
-    return (_jsxs("svg", { viewBox: "0 0 64 64", role: "img", "aria-label": "Adea", ...props, children: [_jsx("rect", { width: "64", height: "64", rx: "16", fill: "#111827" }), _jsx("path", { d: "M10 16h7v13h9V16h7v32h-7V36h-9v12h-7z", fill: "#f8fafc" }), _jsx("path", { d: "M45 16c-7.18 0-13 6-13 16s5.82 16 13 16c7.18 0 13-6 13-16s-5.82-16-13-16Zm0 7c3.42 0 6 3.46 6 9s-2.58 9-6 9-6-3.46-6-9 2.58-9 6-9Z", fill: "#f8fafc", fillRule: "evenodd" }), _jsx("path", { d: "m45 35 11 11-4 4-11-11z", fill: "#f8fafc" })] }));
+    return (_jsxs("svg", { viewBox: "0 0 64 64", role: "img", "aria-label": "Adea", ...props, children: [_jsx("rect", { width: "64", height: "64", rx: "16", className: "fill-[var(--workspace-logo-surface)]" }), _jsx("path", { d: "M10 16h7v13h9V16h7v32h-7V36h-9v12h-7z", className: "fill-[var(--workspace-logo-foreground)]" }), _jsx("path", { d: "M45 16c-7.18 0-13 6-13 16s5.82 16 13 16c7.18 0 13-6 13-16s-5.82-16-13-16Zm0 7c3.42 0 6 3.46 6 9s-2.58 9-6 9-6-3.46-6-9 2.58-9 6-9Z", fillRule: "evenodd", className: "fill-[var(--workspace-logo-foreground)]" }), _jsx("path", { d: "m45 35 11 11-4 4-11-11z", className: "fill-[var(--workspace-logo-foreground)]" })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.18.2",
+  "version": "0.18.4",
   "description": "Shared UI kit for Adea: Base UI-backed shadcn primitives, workspace shells, and theme styles.",
   "keywords": [
     "base-ui",

package/src/components/workspace-logo.tsx

@@ -4,14 +4,17 @@ import type { SVGProps } from 'react'
 export function WorkspaceLogo(props: SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 64 64" role="img" aria-label="Adea" {...props}>
-      <rect width="64" height="64" rx="16" fill="#111827" />
-      <path d="M10 16h7v13h9V16h7v32h-7V36h-9v12h-7z" fill="#f8fafc" />
+      <rect width="64" height="64" rx="16" className="fill-[var(--workspace-logo-surface)]" />
+      <path
+        d="M10 16h7v13h9V16h7v32h-7V36h-9v12h-7z"
+        className="fill-[var(--workspace-logo-foreground)]"
+      />
       <path
         d="M45 16c-7.18 0-13 6-13 16s5.82 16 13 16c7.18 0 13-6 13-16s-5.82-16-13-16Zm0 7c3.42 0 6 3.46 6 9s-2.58 9-6 9-6-3.46-6-9 2.58-9 6-9Z"
-        fill="#f8fafc"
         fillRule="evenodd"
+        className="fill-[var(--workspace-logo-foreground)]"
       />
-      <path d="m45 35 11 11-4 4-11-11z" fill="#f8fafc" />
+      <path d="m45 35 11 11-4 4-11-11z" className="fill-[var(--workspace-logo-foreground)]" />
     </svg>
   )
 }

package/src/styles/conventional-workspace.css

@@ -60,7 +60,7 @@
   border-radius: 0.65rem;
   background: var(--popover);
   color: var(--popover-foreground);
-  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 0.18);
+  box-shadow: var(--hq-shell-shadow-popover);
 }
 
 .global-rail__workspace-menu > button {
@@ -183,6 +183,22 @@
   --cw-accent-contrast: var(--primary-foreground);
   --cw-danger: var(--destructive);
   --cw-focus: var(--ring);
+  /* Notice, priority, and status colors, plus elevation. These were literals
+     scattered through the rules below; a theme restates them here. The `-tint`
+     token feeds the mixed background so it keeps the light hue in both themes,
+     while the text token flips. */
+  --cw-notice: #d97706;
+  --cw-priority-high-tint: #a34f00;
+  --cw-priority-high: #a34f00;
+  --cw-warning-border: #b7791f;
+  --cw-warning-foreground: #8a4b08;
+  --cw-warning-surface: #fff4d6;
+  --cw-shadow-subtle: 0 0.15rem 0.4rem rgb(0 0 0 / 0.04);
+  --cw-shadow-raised: 0 0.35rem 1.2rem rgb(0 0 0 / 0.07);
+  --cw-shadow-floating: 0 12px 30px rgb(0 0 0 / 0.18);
+  --cw-shadow-modal: 0 24px 70px rgb(0 0 0 / 0.28);
+  --cw-shadow-drawer: 12px 0 38px rgb(0 0 0 / 0.25);
+  --cw-scrim: rgb(0 0 0 / 0.58);
 }
 
 .conventional-workspace {
@@ -644,15 +660,15 @@
   gap: 0.65rem;
   flex: none;
   padding: 0.65rem 1rem;
-  border-bottom: 1px solid color-mix(in srgb, #d97706 45%, transparent);
-  background: color-mix(in srgb, #d97706 12%, var(--cw-main));
+  border-bottom: 1px solid color-mix(in srgb, var(--cw-notice) 45%, transparent);
+  background: color-mix(in srgb, var(--cw-notice) 12%, var(--cw-main));
   color: var(--cw-text);
 }
 .conventional-session-notice > svg {
   width: 1.1rem;
   height: 1.1rem;
   margin-top: 0.15rem;
-  color: #d97706;
+  color: var(--cw-notice);
   flex: none;
 }
 .conventional-session-notice h2 {
@@ -676,7 +692,7 @@
   cursor: pointer;
 }
 .conventional-session-notice button:hover {
-  background: color-mix(in srgb, #d97706 18%, transparent);
+  background: color-mix(in srgb, var(--cw-notice) 18%, transparent);
   color: var(--cw-text);
 }
 .conventional-session-notice button svg {
@@ -942,7 +958,7 @@
   border: 1px solid var(--cw-border);
   border-radius: 0.2rem 1rem 1rem 1rem;
   background: var(--cw-surface);
-  box-shadow: 0 0.15rem 0.4rem rgb(0 0 0 / 0.04);
+  box-shadow: var(--cw-shadow-subtle);
 }
 .conventional-message--user .conventional-message__bubble {
   margin-left: auto;
@@ -1109,7 +1125,7 @@
   border: 1px solid var(--cw-border);
   border-radius: 1.35rem;
   background: var(--cw-surface);
-  box-shadow: 0 0.35rem 1.2rem rgb(0 0 0 / 0.07);
+  box-shadow: var(--cw-shadow-raised);
 }
 .conventional-composer__context {
   padding: 0.45rem 0.9rem;
@@ -1262,7 +1278,7 @@
   border: 1px solid var(--cw-border);
   border-radius: 0.5rem;
   background: var(--cw-surface);
-  box-shadow: 0 12px 30px rgb(0 0 0 / 0.18);
+  box-shadow: var(--cw-shadow-floating);
 }
 .conventional-mention-menu button {
   display: flex;
@@ -1670,16 +1686,16 @@
   color: var(--cw-danger);
 }
 .conventional-priority--high {
-  background: color-mix(in srgb, #a34f00 12%, transparent);
-  color: #a34f00;
+  background: color-mix(in srgb, var(--cw-priority-high-tint) 12%, transparent);
+  color: var(--cw-priority-high);
 }
 /* Dark mode recesses the conversation surface below the elevated sidebars. */
 .dark .conventional-workspace,
 .dark .conventional-dialog {
   --cw-main: oklch(0.145 0 0);
-}
-.dark .conventional-priority--high {
-  color: #ffb86b;
+  --cw-priority-high: #ffb86b;
+  --cw-warning-foreground: #ffd28a;
+  --cw-warning-surface: #3a2b14;
 }
 
 .conventional-detail-panel {
@@ -1893,7 +1909,7 @@
   border-radius: 0.7rem;
   background: var(--cw-surface);
   color: var(--cw-text);
-  box-shadow: 0 24px 70px rgb(0 0 0 / 0.28);
+  box-shadow: var(--cw-shadow-modal);
 }
 .conventional-dialog > .conventional-dialog__header {
   display: flex;
@@ -2519,13 +2535,9 @@
   background: var(--cw-accent-soft);
 }
 .conventional-status-chip--warning {
-  border-color: #b7791f;
-  color: #8a4b08;
-  background: #fff4d6;
-}
-.dark .conventional-status-chip--warning {
-  color: #ffd28a;
-  background: #3a2b14;
+  border-color: var(--cw-warning-border);
+  color: var(--cw-warning-foreground);
+  background: var(--cw-warning-surface);
 }
 .conventional-agent-customization {
   max-width: 52rem;
@@ -2757,7 +2769,7 @@
     width: min(19rem, calc(100% - 7rem));
     transform: translateX(-105%);
     transition: transform 0.18s ease;
-    box-shadow: 12px 0 38px rgb(0 0 0 / 0.25);
+    box-shadow: var(--cw-shadow-drawer);
     grid-template-rows: auto auto minmax(0, 1fr);
   }
   .conventional-sidebar__resize {
@@ -2772,7 +2784,7 @@
     inset: 0 0 0 4rem;
     display: block;
     border: 0;
-    background: rgb(0 0 0 / 0.58);
+    background: var(--cw-scrim);
   }
   .conventional-main {
     grid-column: 1;

package/src/styles/theme.css

@@ -53,6 +53,10 @@
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
+  /* The Adea mark keeps its own pairing in both themes; these are the two
+     values the logo used to hardcode. */
+  --workspace-logo-surface: #111827;
+  --workspace-logo-foreground: #f8fafc;
 }
 
 .dark {

package/src/styles/workspace-shell.css

@@ -12,6 +12,9 @@
   --hq-shell-accent-foreground: #fafafa;
   --hq-shell-focus: #a3a3a3;
   --hq-shell-active: #525252;
+  /* Elevation for chrome that lives outside the conventional workspace's own
+     token scope, such as the global rail's workspace menu. */
+  --hq-shell-shadow-popover: 0 0.8rem 2rem rgb(0 0 0 / 0.18);
 }
 
 .dark {