@blurrow/ui 0.2.0 → 0.2.1

package/dist/registry/Card.tsx

@@ -42,7 +42,7 @@ function MediaPlaceholder({ dark, bg, monogram }: { dark?: boolean; bg?: string;
   return (
     <div
       className={["relative w-full h-full flex items-center justify-center", bg ?? ""].join(" ")}
-      style={bg ? undefined : { background: dark ? "var(--media-well-dark)" : "var(--media-well-light)" }}
+      style={bg ? undefined : { background: dark ? "var(--media-well-dark)" : "var(--media-well)" }}
     >
       {/* A faint dot grid fading out from the centre: a slot, not a hole */}
       <div
@@ -50,11 +50,11 @@ function MediaPlaceholder({ dark, bg, monogram }: { dark?: boolean; bg?: string;
         className="absolute inset-0"
         style={{
           backgroundImage: `radial-gradient(${
-            bg ? "rgba(255,255,255,0.22)" : dark ? "rgba(255,255,255,0.09)" : "rgba(17,17,17,0.09)"
+            bg ? "var(--media-dots-on-colour)" : dark ? "var(--media-dots-dark)" : "var(--media-dots)"
           } 1px, transparent 1px)`,
           backgroundSize: "12px 12px",
-          maskImage: "radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%)",
-          WebkitMaskImage: "radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%)",
+          maskImage: "radial-gradient(70% 70% at 50% 50%, black 0%, transparent 100%)",
+          WebkitMaskImage: "radial-gradient(70% 70% at 50% 50%, black 0%, transparent 100%)",
         }}
       />
       {/* The title's initial, set huge and barely there and cropped by the
@@ -64,7 +64,7 @@ function MediaPlaceholder({ dark, bg, monogram }: { dark?: boolean; bg?: string;
           aria-hidden
           className={[
             "absolute -right-3 -bottom-[0.32em] text-[220px] font-semibold leading-none tracking-[-0.06em] select-none",
-            dark ? "text-white/[0.045]" : "text-neutral-900/[0.045]",
+            dark ? "text-white/[0.045]" : "text-ink/[0.045]",
           ].join(" ")}
         >
           {monogram}
@@ -103,11 +103,11 @@ function IconTile({ dark, children }: { dark: boolean; children: React.ReactNode
       aria-hidden
       className={[
         "w-9 h-9 rounded-[11px] flex items-center justify-center shrink-0",
-        dark ? "text-neutral-100" : "text-neutral-700",
+        dark ? "text-neutral-100" : "text-ink-label",
       ].join(" ")}
       style={{
-        background: dark ? "var(--tile-dark)" : "var(--face-light)",
-        boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-light-shadow)",
+        background: dark ? "var(--tile-dark)" : "var(--tile)",
+        boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)",
       }}
     >
       {children}
@@ -138,7 +138,7 @@ export function Card(props: CardProps) {
         rail={actions}
       >
         {/* Hairline under the media so it reads as set into the face */}
-        <div className="relative h-52 shrink-0 overflow-hidden" style={{ boxShadow: "0 1px 0 rgba(17,17,17,0.07)" }}>
+        <div className="relative h-52 shrink-0 overflow-hidden" style={{ boxShadow: "0 1px 0 var(--divider)" }}>
           <Media image={image} imageSrc={imageSrc} imageAlt={imageAlt} bg={imageBg} />
         </div>
 
@@ -146,20 +146,20 @@ export function Card(props: CardProps) {
           {(title || badge) && (
             <div className="flex items-center gap-2">
               {title && (
-                <h3 className="text-[17px] font-semibold text-neutral-900 tracking-[-0.015em] leading-snug">{title}</h3>
+                <h3 className="text-[17px] font-semibold text-ink tracking-[-0.015em] leading-snug">{title}</h3>
               )}
               {badge}
             </div>
           )}
           {subtitle && (
             // Line breaks in the copy are for centred layouts; let it flow here
-            <p className="mt-1.5 text-[14px] text-neutral-600 leading-[1.55] text-pretty">
+            <p className="mt-1.5 text-[14px] text-ink-body leading-[1.55] text-pretty">
               {subtitle.replace(/\n/g, " ")}
             </p>
           )}
           {children}
           {note && (
-            <p className="mt-auto pt-5 text-[12px] text-neutral-500 leading-relaxed text-pretty">{note}</p>
+            <p className="mt-auto pt-5 text-[12px] text-ink-muted leading-relaxed text-pretty">{note}</p>
           )}
         </div>
       </CardShell>
@@ -198,7 +198,7 @@ export function Card(props: CardProps) {
             className={[
               "text-[34px] font-medium leading-[1.02] tracking-[-0.04em] text-balance max-w-[14ch]",
               icon ? "mt-5" : "",
-              dark ? "text-white" : "text-neutral-900",
+              dark ? "text-white" : "text-ink",
             ].join(" ")}
           >
             {title}
@@ -206,14 +206,14 @@ export function Card(props: CardProps) {
         )}
         <div className="mt-auto pt-8 flex flex-col gap-2">
           {subtitle && (
-            <p className="text-[14px] leading-[1.45] tracking-[-0.005em] text-neutral-500">{subtitle}</p>
+            <p className={["text-[14px] leading-[1.45] tracking-[-0.005em]", dark ? "text-neutral-500" : "text-ink-muted"].join(" ")}>{subtitle}</p>
           )}
           {children}
         </div>
       </div>
       <div
         className="relative w-[40%] shrink-0 overflow-hidden"
-        style={{ boxShadow: dark ? "-1px 0 0 rgba(255,255,255,0.07)" : "-1px 0 0 rgba(17,17,17,0.07)" }}
+        style={{ boxShadow: dark ? "-1px 0 0 var(--divider-dark)" : "-1px 0 0 var(--divider)" }}
       >
         <Media
           image={image}

package/dist/registry/CardShell.tsx

@@ -43,16 +43,16 @@ export function CardShell({
         className,
       ].join(" ")}
       style={{
-        background: dark ? "var(--card-bezel-dark)" : "var(--card-bezel-light)",
-        boxShadow: dark ? "var(--card-dark-shadow)" : "var(--card-light-shadow)",
-        ["--rim" as string]: dark ? "rgba(255,255,255,0.1)" : "rgba(255,255,255,1)",
+        background: dark ? "var(--card-bezel-dark)" : "var(--card-bezel)",
+        boxShadow: dark ? "var(--card-dark-shadow)" : "var(--card-shadow)",
+        ["--rim" as string]: dark ? "var(--card-dark-rim)" : "var(--card-rim)",
       } as React.CSSProperties}
     >
       <div
         className={["relative flex-1 min-h-0 rounded-[18px] overflow-hidden flex flex-col", faceClassName].join(" ")}
         style={{
-          background: dark ? "var(--card-dark)" : "var(--card-light)",
-          boxShadow: dark ? "var(--card-face-dark-shadow)" : "var(--card-face-light-shadow)",
+          background: dark ? "var(--card-dark)" : "var(--card)",
+          boxShadow: dark ? "var(--card-face-dark-shadow)" : "var(--card-face-shadow)",
         }}
       >
         {children}
@@ -66,7 +66,7 @@ export function CardShell({
               // rails come out the same height and line up across a row
               "min-h-10 flex items-center gap-2 text-[12.5px]",
               railKind === "text" ? "pl-[18px] pr-3 gap-2.5" : "",
-              dark ? "text-neutral-400" : "text-neutral-500",
+              dark ? "text-neutral-400" : "text-ink-muted",
             ].join(" ")}
           >
             {rail}

package/dist/registry/Carousel.tsx

@@ -64,8 +64,11 @@ export function Carousel({
   const goNext = () => go((currentIdxRef.current + 1) % items.length, "right");
   const goPrev = () => go((currentIdxRef.current - 1 + items.length) % items.length, "left");
 
+  // Kept current after each render so the autoplay timer never goes stale
   const goNextRef = useRef(goNext);
-  goNextRef.current = goNext;
+  useEffect(() => {
+    goNextRef.current = goNext;
+  });
 
   useEffect(() => {
     if (!autoPlay || paused) return;
@@ -96,7 +99,8 @@ export function Carousel({
     const dy = e.clientY - dragRef.current.y;
     dragRef.current.active = false;
     if (Math.abs(dx) > THRESHOLD && Math.abs(dx) > Math.abs(dy) * 1.5) {
-      dx < 0 ? goNextRef.current() : goPrev();
+      if (dx < 0) goNextRef.current();
+      else goPrev();
     }
   };
 
@@ -138,7 +142,7 @@ export function Carousel({
                   "relative h-1.5 rounded-full overflow-hidden cursor-pointer",
                   "transition-[width,background] duration-300 ease-[var(--ease-out-soft)]",
                   "after:absolute after:-inset-2 after:content-['']",
-                  active ? "w-6 bg-neutral-900/15" : "w-1.5 bg-neutral-900/20 hover:bg-neutral-900/40",
+                  active ? "w-6 bg-ink/15" : "w-1.5 bg-ink/20 hover:bg-ink/40",
                 ].join(" ")}
                 aria-label={`Go to slide ${i + 1}`}
                 aria-current={active ? "true" : undefined}
@@ -149,7 +153,7 @@ export function Carousel({
                     aria-hidden
                     className={["absolute inset-0 rounded-full origin-left", autoPlay ? "carousel-progress" : ""].join(" ")}
                     style={{
-                      background: "var(--face-dark)",
+                      background: "var(--face-inverse)",
                       animationDuration: `${interval}ms`,
                       animationPlayState: paused ? "paused" : "running",
                     }}
@@ -159,9 +163,9 @@ export function Carousel({
             );
           })}
         </div>
-        <span className="text-[12px] font-medium text-neutral-600 tabular-nums">
+        <span className="text-[12px] font-medium text-ink-body tabular-nums">
           {currentIdx + 1}
-          <span className="text-neutral-400"> / {items.length}</span>
+          <span className="text-ink-faint"> / {items.length}</span>
         </span>
       </div>
 
@@ -242,7 +246,7 @@ export function CarouselSlide({ theme = "dark", tint = "#8A8E7A", icon, title, m
     <div
       className="relative w-full h-full flex flex-col justify-end gap-6 p-8 overflow-hidden select-none"
       style={{
-        background: theme === "dark" ? "var(--card-dark)" : theme === "light" ? "var(--card-light)" : tint,
+        background: theme === "dark" ? "var(--card-dark)" : theme === "light" ? "var(--card)" : tint,
       }}
     >
       <div
@@ -250,11 +254,11 @@ export function CarouselSlide({ theme = "dark", tint = "#8A8E7A", icon, title, m
         className="absolute inset-y-0 right-0 w-3/5"
         style={{
           backgroundImage: `radial-gradient(${
-            theme === "tint" ? "rgba(255,255,255,0.22)" : dark ? "rgba(255,255,255,0.09)" : "rgba(17,17,17,0.08)"
+            theme === "tint" ? "var(--media-dots-on-colour)" : dark ? "var(--media-dots-dark)" : "var(--slide-dots)"
           } 1px, transparent 1px)`,
           backgroundSize: "12px 12px",
-          maskImage: "radial-gradient(60% 70% at 70% 50%, #000 0%, transparent 100%)",
-          WebkitMaskImage: "radial-gradient(60% 70% at 70% 50%, #000 0%, transparent 100%)",
+          maskImage: "radial-gradient(60% 70% at 70% 50%, black 0%, transparent 100%)",
+          WebkitMaskImage: "radial-gradient(60% 70% at 70% 50%, black 0%, transparent 100%)",
         }}
       />
       {icon && (
@@ -262,11 +266,11 @@ export function CarouselSlide({ theme = "dark", tint = "#8A8E7A", icon, title, m
           aria-hidden
           className={[
             "relative w-9 h-9 rounded-[11px] flex items-center justify-center mb-auto",
-            dark ? "text-neutral-100" : "text-neutral-700",
+            dark ? "text-neutral-100" : "text-ink-label",
           ].join(" ")}
           style={{
-            background: dark ? "var(--tile-dark)" : "var(--face-light)",
-            boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-light-shadow)",
+            background: dark ? "var(--tile-dark)" : "var(--tile)",
+            boxShadow: dark ? "var(--tile-dark-shadow)" : "var(--tile-shadow)",
           }}
         >
           {icon}
@@ -276,13 +280,13 @@ export function CarouselSlide({ theme = "dark", tint = "#8A8E7A", icon, title, m
         <p
           className={[
             "text-[22px] font-medium leading-[1.2] tracking-[-0.015em] mb-2",
-            dark ? "text-white" : "text-neutral-900",
+            dark ? "text-white" : "text-ink",
           ].join(" ")}
         >
           {title}
         </p>
         {meta && (
-          <p className={["text-[13px]", theme === "tint" ? "text-white/65" : dark ? "text-neutral-400" : "text-neutral-500"].join(" ")}>
+          <p className={["text-[13px]", theme === "tint" ? "text-white/65" : dark ? "text-neutral-400" : "text-ink-muted"].join(" ")}>
             {meta}
           </p>
         )}

package/dist/registry/Checkbox.tsx

@@ -40,7 +40,7 @@ export function Checkbox({
     <div
       className={[
         "flex items-center justify-between gap-4 select-none",
-        disabled ? "opacity-40 pointer-events-none" : "cursor-pointer",
+        disabled ? "opacity-40 pointer-events-none" : "cursor-pointer group/checkbox",
         className,
       ].join(" ")}
       onClick={toggle}
@@ -48,10 +48,10 @@ export function Checkbox({
       {(label || description) && (
         <div className="flex flex-col gap-0.5 min-w-0">
           {label && (
-            <span id={`${uid}-label`} className="text-[13px] font-medium text-neutral-900 leading-snug">{label}</span>
+            <span id={`${uid}-label`} className="text-[13px] font-medium text-ink leading-snug">{label}</span>
           )}
           {description && (
-            <span id={`${uid}-desc`} className="text-[12px] text-neutral-500 leading-relaxed">{description}</span>
+            <span id={`${uid}-desc`} className="text-[12px] text-ink-muted leading-relaxed">{description}</span>
           )}
         </div>
       )}
@@ -65,26 +65,31 @@ export function Checkbox({
         aria-describedby={description ? `${uid}-desc` : undefined}
         disabled={disabled}
         className={[
-          "shrink-0 w-[22px] h-[22px] rounded-[7px] flex items-center justify-center cursor-pointer",
+          "shrink-0 w-[22px] h-[22px] rounded-[7px] flex items-center justify-center cursor-pointer text-ink-inverse",
           "transition-[box-shadow,transform,scale] duration-200 ease-out active:scale-90",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
+          // an empty box answers the pointer like any other field
+          active ? "" : "group-hover/checkbox:[box-shadow:var(--field-shadow-hover)]",
         ].join(" ")}
         style={{
-          background: active ? "var(--face-dark)" : "var(--field)",
-          boxShadow: active ? "var(--face-dark-shadow)" : "var(--field-shadow)",
+          background: active ? "var(--face-inverse)" : "var(--field)",
+          boxShadow: active ? "var(--face-inverse-shadow)" : "var(--field-shadow)",
         }}
       >
         {active && (
           indeterminate ? (
             <span className="animate-checkbox-in">
               <svg width="10" height="2" viewBox="0 0 10 2" fill="none">
-                <rect width="10" height="2" rx="1" fill="white" />
+                <rect width="10" height="2" rx="1" fill="currentColor" />
               </svg>
             </span>
           ) : (
-            <svg width="13" height="10" viewBox="0 0 13 10" fill="none">
+            /* The mark is pressed into the face: it takes the inverse ink, so it
+               reads on the dark face in light mode and the pale one in dark */
+            <svg width="13" height="10" viewBox="0 0 13 10" fill="none" style={{ filter: "drop-shadow(var(--emboss-inverse))" }}>
               <path
                 d="M1.5 5l3.5 3.5L11.5 1"
-                stroke="white"
+                stroke="currentColor"
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"

package/dist/registry/CloseButton.tsx

@@ -38,7 +38,7 @@ export function CloseButton({
         "focus-visible:outline-2 focus-visible:outline-offset-2",
         dark
           ? "text-white/45 hover:text-white focus-visible:outline-white"
-          : "text-neutral-400 hover:text-neutral-900 focus-visible:outline-neutral-900",
+          : "text-ink-faint hover:text-ink focus-visible:outline-ink",
         s.box,
         className,
       ].join(" ")}
@@ -49,7 +49,7 @@ export function CloseButton({
           "absolute inset-0 rounded-[inherit] opacity-0 group-hover/close:opacity-100 transition-opacity duration-150",
           dark
             ? "[background:var(--tile-dark)] [box-shadow:var(--tile-dark-shadow)]"
-            : "[background:var(--face-light)] [box-shadow:var(--face-light-shadow)]",
+            : "[background:var(--face)] [box-shadow:var(--face-shadow)]",
         ].join(" ")}
       />
       <svg

package/dist/registry/CodeBlock.tsx

@@ -25,11 +25,11 @@ const KEYWORDS = new Set([
 const TOKEN_RE = /(\/\/.*$|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`|<\/?\s*[A-Z][a-zA-Z0-9.]*|<\/?\s*[a-z][a-zA-Z0-9-]*|=>|\b\d+(?:\.\d+)?\b|\b[a-zA-Z_$][a-zA-Z0-9_$]*\b)/;
 
 const TOKEN_STYLES: Record<string, string> = {
-  keyword: "text-violet-600",
-  string:  "text-emerald-700",
-  comment: "text-neutral-400 italic",
-  tag:     "text-sky-700",
-  number:  "text-amber-700",
+  keyword: "text-code-keyword",
+  string:  "text-code-string",
+  comment: "text-ink-faint italic",
+  tag:     "text-code-tag",
+  number:  "text-code-number",
 };
 
 function classifyToken(val: string): string {
@@ -101,11 +101,11 @@ export function CodeBlock({
       <figcaption className="flex items-center justify-between gap-3 pl-3 pr-0.5 h-10">
         <div className="flex items-center gap-2 min-w-0">
           {title && (
-            <span className="text-[12px] font-medium text-neutral-700 truncate">{title}</span>
+            <span className="text-[12px] font-medium text-ink-label truncate">{title}</span>
           )}
           {language && (
             <span
-              className="text-[11px] font-semibold text-neutral-500 lowercase px-1.5 py-0.5 rounded-[5px]"
+              className="text-[11px] font-semibold text-ink-muted lowercase px-1.5 py-0.5 rounded-[5px]"
               style={{ background: "var(--well)", boxShadow: "var(--well-shadow)" }}
             >
               {language}
@@ -120,14 +120,14 @@ export function CodeBlock({
           type="button"
           onClick={handleCopy}
           aria-label={copied ? "copied to clipboard" : "copy code"}
-          className="inline-flex items-center h-7 px-2.5 rounded-[8px] text-[11.5px] font-medium cursor-pointer transition-[color,transform,scale] duration-150 active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
+          className="inline-flex items-center h-7 px-2.5 rounded-[8px] text-[11.5px] font-medium cursor-pointer transition-[color,transform,scale] duration-150 active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
           style={{
-            background: "var(--face-light)",
-            boxShadow: "var(--face-light-shadow)",
-            color: copied ? "#047857" : undefined,
+            background: "var(--face)",
+            boxShadow: "var(--face-shadow)",
+            color: copied ? "var(--success-strong)" : undefined,
           }}
         >
-          <span className="grid overflow-hidden text-neutral-600" style={{ color: "inherit" }}>
+          <span className="grid overflow-hidden text-ink-body" style={{ color: "inherit" }}>
             <span
               aria-hidden
               className="[grid-area:1/1] inline-flex items-center justify-center gap-1.5"
@@ -171,15 +171,15 @@ export function CodeBlock({
         <span aria-live="polite" className="sr-only">{copied ? "copied to clipboard" : ""}</span>
       </figcaption>
       <div
-        className="bg-white rounded-[13px] overflow-x-auto scroll-thin"
+        className="bg-panel-face rounded-[13px] overflow-x-auto scroll-thin"
         style={{ boxShadow: "var(--panel-face-shadow)" }}
       >
-        <pre className="py-4 px-4 text-[13px] leading-[1.7] font-mono text-neutral-800">
+        <pre className="py-4 px-4 text-[13px] leading-[1.7] font-mono text-ink-soft">
           <code>
             {lines.map((line, i) => (
               <div key={i} className="flex">
                 {showLineNumbers && (
-                  <span aria-hidden className="select-none w-8 shrink-0 text-right pr-4 text-neutral-300 tabular-nums">
+                  <span aria-hidden className="select-none w-8 shrink-0 text-right pr-4 text-ink-ghost tabular-nums">
                     {i + 1}
                   </span>
                 )}