@cosxai/ui 0.4.8 → 0.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/dialogs/Modal.tsx

@@ -72,7 +72,12 @@ export function Modal({
         position: "fixed",
         inset: 0,
         background: "rgba(10, 14, 26, 0.6)",
-        backdropFilter: "blur(2px)",
+        // Pull the page surface noticeably out of focus behind the
+        // modal — agent-dataroom's `backdrop-blur-sm` (4px) reads as
+        // a hint; 8px reads as a clear "the world stopped". The card
+        // sits above the blurred layer, so the content stays crisp.
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -92,8 +97,15 @@ export function Modal({
           maxHeight: "calc(100vh - 32px)",
           background: "var(--ck-bg-surface)",
           border: "1px solid var(--ck-border-subtle)",
-          borderRadius: "var(--ck-radius-md)",
-          boxShadow: "var(--ck-shadow-3)",
+          // Modal cards lift on the `-lg` radius rather than the
+          // page's default `-md` so the corners read as softer than
+          // the cards underneath them — supports the "this took
+          // over" cue alongside the deeper overlay shadow.
+          borderRadius: "var(--ck-radius-lg)",
+          // Overlay shadow > shadow-3. shadow-3 was tuned for cards
+          // sitting on a page; a modal needs to read as physically
+          // lifted off the page, not as another tier of card.
+          boxShadow: "var(--ck-shadow-overlay)",
           display: "flex",
           flexDirection: "column",
           overflow: "hidden",
@@ -124,7 +136,11 @@ export function ModalHeader({ title, subtitle, onClose, titleId }: ModalHeaderPr
   return (
     <header
       style={{
-        padding: "16px 20px",
+        // Editorial-modal breathing room: matches the 24-px gutter
+        // ModalBody / ModalFooter ship so a Modal renders as one
+        // coherent column of 24-px insets rather than three slots
+        // with different paddings.
+        padding: "20px 24px",
         borderBottom: "1px solid var(--ck-border-subtle)",
         display: "flex",
         alignItems: "flex-start",
@@ -191,7 +207,7 @@ export function ModalHeader({ title, subtitle, onClose, titleId }: ModalHeaderPr
 
 export function ModalBody({ children }: { children: ReactNode }) {
   return (
-    <div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: "20px" }}>
+    <div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: "20px 24px 24px" }}>
       {children}
     </div>
   );
@@ -201,7 +217,7 @@ export function ModalFooter({ children }: { children: ReactNode }) {
   return (
     <footer
       style={{
-        padding: "14px 20px",
+        padding: "16px 24px",
         borderTop: "1px solid var(--ck-border-subtle)",
         display: "flex",
         justifyContent: "flex-end",

package/src/styles/tokens.css

@@ -104,6 +104,13 @@
   --ck-shadow-1: 0 1px 2px rgba(10, 14, 26, 0.04);
   --ck-shadow-2: 0 4px 12px rgba(10, 14, 26, 0.06), 0 1px 2px rgba(10, 14, 26, 0.04);
   --ck-shadow-3: 0 16px 48px rgba(10, 14, 26, 0.12), 0 4px 12px rgba(10, 14, 26, 0.06);
+  /* Overlay shadow — for floating surfaces (Modal cards, command
+     palettes) that need to read as "lifted above the page" rather
+     than "card on a page". Roughly 2× the punch of shadow-3 so the
+     hierarchy is unambiguous over a blurred backdrop. */
+  --ck-shadow-overlay:
+    0 32px 80px rgba(10, 14, 26, 0.22),
+    0 8px 24px rgba(10, 14, 26, 0.12);
 
   /* Layout vars — owned by layout primitives. Default 0 so pages
      that don't mount the rails don't reserve space. */
@@ -141,6 +148,9 @@ html[data-ck-theme="dark"] {
   --ck-shadow-1: none;
   --ck-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4);
   --ck-shadow-3: 0 24px 64px rgba(0, 0, 0, 0.5);
+  --ck-shadow-overlay:
+    0 32px 80px rgba(0, 0, 0, 0.65),
+    0 12px 24px rgba(0, 0, 0, 0.45);
   --ck-glow-accent: 0 0 32px color-mix(in srgb, var(--ck-accent) 25%, transparent);
 }
 
@@ -221,6 +231,14 @@ html[data-ck-chrome="editorial"] {
   --ck-shadow-1: none;
   --ck-shadow-2: none;
   --ck-shadow-3: 0 2px 0 rgba(15, 15, 15, 0.04);
+  /* Overlays (Modal) are the one place editorial chrome breaks its
+     hairline rule — a modal needs to read as physically lifted off
+     the page so the user can tell it took over. Stays cool-toned
+     and a touch more diffuse than the default to fit the editorial
+     palette. */
+  --ck-shadow-overlay:
+    0 32px 80px rgba(15, 15, 15, 0.28),
+    0 8px 24px rgba(15, 15, 15, 0.14);
 }
 
 /* Dark editorial — coherent dark mode: charcoal canvas + lifted
@@ -255,6 +273,14 @@ html[data-ck-theme="dark"][data-ck-chrome="editorial"] {
      without going neon. */
   --ck-accent-muted:   color-mix(in oklab, var(--ck-accent) 22%, transparent);
   --ck-accent-border:  color-mix(in oklab, var(--ck-accent) 44%, transparent);
+
+  /* Editorial-light's overlay is paper-coloured shadow; on charcoal
+     it disappears. Override with a darker overlay matched to the
+     dark surface palette. Same specificity as the editorial-light
+     block, so the explicit dark-editorial selector wins. */
+  --ck-shadow-overlay:
+    0 32px 80px rgba(0, 0, 0, 0.7),
+    0 12px 24px rgba(0, 0, 0, 0.5);
 }
 
 /* ---------- Neobrutalism chrome — thick 2 px borders, hard