@blurrow/ui 0.2.0 → 0.2.1

package/dist/registry/Accordion.tsx

@@ -53,7 +53,7 @@ export function Accordion({ items, allowMultiple = false, className }: Accordion
       style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
     >
       <div
-        className="bg-white rounded-[13px] overflow-hidden p-1"
+        className="bg-panel-face rounded-[13px] overflow-hidden p-1"
         style={{ boxShadow: "var(--panel-face-shadow)" }}
       >
         {items.map((item, index) => {
@@ -69,7 +69,7 @@ export function Accordion({ items, allowMultiple = false, className }: Accordion
                 "relative",
                 // Hairline between rows, inset so it doesn't touch the rounded corners
                 !isLast &&
-                  "after:absolute after:left-3 after:right-3 after:bottom-0 after:h-px after:bg-neutral-100",
+                  "after:absolute after:left-3 after:right-3 after:bottom-0 after:h-px after:bg-line",
               ]
                 .filter(Boolean)
                 .join(" ")}
@@ -84,15 +84,15 @@ export function Accordion({ items, allowMultiple = false, className }: Accordion
                   className={[
                     "group/acc w-full flex items-center justify-between gap-3 py-3 px-3 text-left text-[13.5px] font-medium cursor-pointer rounded-[10px]",
                     "transition-colors duration-150",
-                    isOpen ? "text-neutral-900" : "text-neutral-700 hover:text-neutral-900 hover:bg-neutral-50",
+                    isOpen ? "text-ink" : "text-ink-label hover:text-ink hover:bg-surface-hover",
                   ].join(" ")}
                 >
                   <span>{item.title}</span>
                   {/* Plus that turns into a minus: says "more inside", not "navigate" */}
                   <span
                     aria-hidden
-                    className="relative shrink-0 w-6 h-6 rounded-[7px] flex items-center justify-center text-neutral-500 group-hover/acc:text-neutral-900 transition-colors"
-                    style={{ background: "var(--face-light)", boxShadow: "var(--face-light-shadow)" }}
+                    className="relative shrink-0 w-6 h-6 rounded-[7px] flex items-center justify-center text-ink-muted group-hover/acc:text-ink transition-colors"
+                    style={{ background: "var(--face)", boxShadow: "var(--face-shadow)" }}
                   >
                     <span className="absolute w-2.5 h-[1.5px] rounded-full bg-current" />
                     <span
@@ -120,7 +120,7 @@ export function Accordion({ items, allowMultiple = false, className }: Accordion
               >
                 <div className="overflow-hidden">
                   <div
-                    className="px-3 pb-4 pt-0.5 text-[13px] text-neutral-600 leading-relaxed"
+                    className="px-3 pb-4 pt-0.5 text-[13px] text-ink-body leading-relaxed"
                     style={{
                       opacity: isOpen ? 1 : 0,
                       transform: isOpen ? "translateY(0)" : "translateY(-4px)",

package/dist/registry/Alert.tsx

@@ -18,7 +18,7 @@ const variantConfig: Record<AlertVariant, {
   icon: React.ReactNode;
 }> = {
   default: {
-    tile: "var(--face-dark)",
+    tile: "var(--face-inverse)",
     icon: (
       <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.75" viewBox="0 0 24 24">
         <circle cx="12" cy="12" r="10" />
@@ -27,7 +27,7 @@ const variantConfig: Record<AlertVariant, {
     ),
   },
   success: {
-    tile: "linear-gradient(180deg, #10b981 0%, #059669 100%)",
+    tile: "var(--tile-success)",
     icon: (
       <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
@@ -35,7 +35,7 @@ const variantConfig: Record<AlertVariant, {
     ),
   },
   warning: {
-    tile: "linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%)",
+    tile: "var(--tile-warning)",
     icon: (
       <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.75" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
@@ -43,7 +43,7 @@ const variantConfig: Record<AlertVariant, {
     ),
   },
   error: {
-    tile: "linear-gradient(180deg, #f87171 0%, #dc2626 100%)",
+    tile: "var(--tile-error)",
     icon: (
       <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -63,25 +63,28 @@ export function Alert({ variant = "default", title, description, onDismiss, clas
       style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
     >
       <div
-        className="bg-white rounded-[13px] pl-3 pr-2 py-3 flex items-start gap-3"
+        className="bg-panel-face rounded-[13px] pl-3 pr-2 py-3 flex items-start gap-3"
         style={{ boxShadow: "var(--panel-face-shadow)" }}
       >
         <div
           aria-hidden
-          className="shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center text-white"
+          className={[
+              "shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center",
+              // the default tile is the inverse face; status tiles stay white-on-colour
+              tile === "var(--face-inverse)" ? "text-ink-inverse" : "text-white",
+            ].join(" ")}
           style={{
             background: tile,
-            boxShadow:
-              "0 0 3px rgba(0,0,0,0.212), 0 1px 2px rgba(0,0,0,0.15), inset 0 2px 3px -2px rgba(255,255,255,0.188)",
+            boxShadow: "var(--tile-status-shadow)",
           }}
         >
           {icon}
         </div>
 
         <div className="flex-1 min-w-0 pt-[5px]">
-          <p className="text-[13px] font-semibold text-neutral-900 leading-tight tracking-[-0.01em]">{title}</p>
+          <p className="text-[13px] font-semibold text-ink leading-tight tracking-[-0.01em]">{title}</p>
           {description && (
-            <p className="text-[12.5px] text-neutral-500 mt-1 leading-relaxed">{description}</p>
+            <p className="text-[12.5px] text-ink-muted mt-1 leading-relaxed">{description}</p>
           )}
         </div>
 

package/dist/registry/AuthorCard.tsx

@@ -25,17 +25,17 @@ export function AuthorCard({
       ]
         .filter(Boolean)
         .join(" ")}
-      style={{ background: "var(--panel-bezel)", boxShadow: "var(--card-light-shadow)" }}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--card-shadow)" }}
     >
-      <div className="relative bg-white rounded-[17px] overflow-hidden" style={{ boxShadow: "var(--panel-face-shadow)" }}>
+      <div className="relative bg-panel-face rounded-[17px] overflow-hidden" style={{ boxShadow: "var(--panel-face-shadow)" }}>
         {/* Cover: a sunken well, so the avatar visibly sits on top of it */}
         <div
           aria-hidden
           className="h-20 relative overflow-hidden"
           style={{
             background:
-              "radial-gradient(130% 90% at 25% 0%, rgba(255,255,255,0.7), transparent 60%), linear-gradient(180deg, #ececeb 0%, #f4f4f3 100%)",
-            boxShadow: "inset 0 1px 3px rgba(17,17,17,0.06), inset 0 -2px 3px -2px rgba(17,17,17,0.05)",
+              "var(--cover)",
+            boxShadow: "var(--cover-shadow)",
           }}
         />
         <div className="px-6 pb-6">
@@ -44,14 +44,14 @@ export function AuthorCard({
               src={avatarSrc}
               name={name}
               size="lg"
-              className="ring-[3.5px] ring-white shadow-[0_3px_12px_-2px_rgba(0,0,0,0.15),0_0_0_1px_rgba(0,0,0,0.05)]"
+              className="ring-[3.5px] ring-panel-face shadow-[var(--avatar-lift)]"
             />
           </div>
           <div className="flex items-start justify-between gap-4">
             <div className="flex-1 min-w-0">
-              <p className="text-[15px] font-semibold text-neutral-900 leading-snug truncate tracking-[-0.01em]">{name}</p>
+              <p className="text-[15px] font-semibold text-ink leading-snug truncate tracking-[-0.01em]">{name}</p>
               {bio && (
-                <p className="text-[13px] text-neutral-500 leading-relaxed mt-1 line-clamp-2">{bio}</p>
+                <p className="text-[13px] text-ink-muted leading-relaxed mt-1 line-clamp-2">{bio}</p>
               )}
             </div>
             {onFollow && (

package/dist/registry/Avatar.tsx

@@ -37,13 +37,13 @@ export function Avatar({
   return (
     <div
       className={[
-        "relative shrink-0 rounded-full overflow-hidden flex items-center justify-center font-semibold text-neutral-600 select-none",
+        "relative shrink-0 rounded-full overflow-hidden flex items-center justify-center font-semibold text-ink-body select-none",
         sizeStyles[size],
         className,
       ]
         .filter(Boolean)
         .join(" ")}
-      style={{ background: "var(--face-light)" }}
+      style={{ background: "var(--face)" }}
     >
       {src ? (
         // eslint-disable-next-line @next/next/no-img-element
@@ -55,7 +55,7 @@ export function Avatar({
         aria-hidden
         className="pointer-events-none absolute inset-0 rounded-full"
         style={{
-          boxShadow: "inset 0 2px 3px -2px rgba(255,255,255,0.45), inset 0 0 2px rgba(17,17,17,0.12), inset 0 -2px 3px -2px rgba(17,17,17,0.04)",
+          boxShadow: "var(--avatar-rim)",
         }}
       />
     </div>
@@ -91,7 +91,7 @@ export function AvatarGroup({
         <div
           key={i}
           className={[
-            "ring-2 ring-white rounded-full",
+            "ring-2 ring-panel-face rounded-full",
             i > 0 ? overlapStyles[size] : "",
           ].join(" ")}
         >
@@ -101,7 +101,7 @@ export function AvatarGroup({
       {overflow > 0 && (
         <div
           className={[
-            "ring-2 ring-white rounded-full flex items-center justify-center font-semibold text-neutral-600 select-none",
+            "ring-2 ring-panel-face rounded-full flex items-center justify-center font-semibold text-ink-body select-none",
             overlapStyles[size],
             sizeStyles[size],
           ].join(" ")}

package/dist/registry/Badge.tsx

@@ -9,30 +9,27 @@ interface BadgeProps {
 }
 
 const variantStyles: Record<BadgeVariant, string> = {
-  default: "text-white",
-  muted: "text-neutral-600",
-  accent: "text-violet-700",
+  default: "text-ink-inverse",
+  muted: "text-ink-body",
+  accent: "text-accent",
 };
 
 /* Badges are small raised faces, lit from the same top edge as buttons. */
 const variantSurfaces: Record<BadgeVariant, React.CSSProperties> = {
   default: {
-    background: "var(--face-dark)",
-    boxShadow:
-      "0 0 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.2), inset 0 2px 3px -2px rgba(255,255,255,0.105)",
-    textShadow: "0 -1px 0 rgba(0,0,0,0.4)",
+    background: "var(--face-inverse)",
+    boxShadow: "var(--badge-inverse-shadow)",
+    textShadow: "var(--emboss-inverse)",
   },
   muted: {
-    background: "linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%)",
-    boxShadow:
-      "0 0 3px rgba(17,17,17,0.119), 0 1px 1.5px rgba(17,17,17,0.07), inset 0 2px 3px -2px rgba(255,255,255,1)",
-    textShadow: "0 1px 0 rgba(255,255,255,0.9)",
+    background: "var(--badge)",
+    boxShadow: "var(--badge-shadow)",
+    textShadow: "var(--emboss)",
   },
   accent: {
-    background: "linear-gradient(180deg, #f5f0ff 0%, #ebe1ff 100%)",
-    boxShadow:
-      "0 0 3px rgba(124,58,237,0.255), 0 1px 1.5px rgba(124,58,237,0.12), inset 0 2px 3px -2px rgba(255,255,255,0.637)",
-    textShadow: "0 1px 0 rgba(255,255,255,0.7)",
+    background: "var(--badge-accent)",
+    boxShadow: "var(--badge-accent-shadow)",
+    textShadow: "var(--emboss-soft)",
   },
 };
 

package/dist/registry/Banner.tsx

@@ -6,37 +6,34 @@ import { CloseButton } from "./CloseButton";
 type BannerVariant = "default" | "accent" | "warning";
 
 /* A banner is a dark bezel holding a dark face — the same build as the
-   primary button, stretched to full width.                            */
+   primary button, stretched to full width. On a dark page it stays a
+   dark strip (the mid material) rather than a full-width pale bar.    */
 const variantStyles: Record<
   BannerVariant,
   { bezel: string; bezelShadow: string; face: string; faceShadow: string; text: string; tone: "light" | "dark" }
 > = {
   default: {
-    bezel: "var(--bezel-dark)",
-    bezelShadow: "var(--bezel-dark-shadow)",
-    face: "var(--face-dark)",
-    faceShadow: "var(--face-dark-shadow)",
+    bezel: "var(--banner-bezel)",
+    bezelShadow: "var(--banner-bezel-shadow)",
+    face: "var(--banner-face)",
+    faceShadow: "var(--banner-face-shadow)",
     text: "text-white",
     tone: "dark",
   },
   accent: {
-    bezel: "linear-gradient(180deg, #4c2a99 0%, #2e1065 100%)",
-    bezelShadow:
-      "0 0 0 0.5px rgba(46,16,101,0.36), 0 4px 12px -4px rgba(76,29,149,0.45), inset 0 2px 3px -2px rgba(255,255,255,0.09)",
-    face: "linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%)",
-    faceShadow:
-      "0 0 3px rgba(46,16,101,0.35), 0 1px 2px rgba(46,16,101,0.4), inset 0 2px 3px -2px rgba(255,255,255,0.165)",
+    bezel: "var(--bezel-violet)",
+    bezelShadow: "var(--bezel-violet-shadow)",
+    face: "var(--face-violet)",
+    faceShadow: "var(--face-violet-shadow)",
     text: "text-white",
     tone: "dark",
   },
   warning: {
-    bezel: "linear-gradient(180deg, #fde68a 0%, #f5c84b 100%)",
-    bezelShadow:
-      "0 0 0 0.5px rgba(180,83,9,0.15), 0 4px 12px -4px rgba(217,119,6,0.3), inset 0 2px 3px -2px rgba(255,255,255,0.45)",
-    face: "linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%)",
-    faceShadow:
-      "0 0 3px rgba(180,83,9,0.255), 0 1px 2px rgba(180,83,9,0.12), inset 0 2px 3px -2px rgba(255,255,255,1)",
-    text: "text-amber-900",
+    bezel: "var(--bezel-warning)",
+    bezelShadow: "var(--bezel-warning-shadow)",
+    face: "var(--face-warning)",
+    faceShadow: "var(--face-warning-shadow)",
+    text: "text-warning-ink",
     tone: "light",
   },
 };

package/dist/registry/Breadcrumb.tsx

@@ -28,7 +28,7 @@ export function Breadcrumb({ items, className = "" }: BreadcrumbProps) {
                   stroke="currentColor"
                   strokeWidth="2"
                   viewBox="0 0 24 24"
-                  className="text-neutral-300 shrink-0"
+                  className="text-ink-ghost shrink-0"
                 >
                   <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                 </svg>
@@ -38,7 +38,7 @@ export function Breadcrumb({ items, className = "" }: BreadcrumbProps) {
                   aria-current={isLast ? "page" : undefined}
                   className={[
                     "text-[12.5px] px-1.5 py-0.5 truncate",
-                    isLast ? "font-medium text-neutral-900" : "text-neutral-500",
+                    isLast ? "font-medium text-ink" : "text-ink-muted",
                   ].join(" ")}
                 >
                   {item.label}
@@ -46,7 +46,7 @@ export function Breadcrumb({ items, className = "" }: BreadcrumbProps) {
               ) : (
                 <a
                   href={item.href}
-                  className="text-[12.5px] text-neutral-500 hover:text-neutral-900 px-1.5 py-0.5 rounded-[6px] hover:bg-neutral-900/[0.05] transition-colors truncate"
+                  className="text-[12.5px] text-ink-muted hover:text-ink px-1.5 py-0.5 rounded-[6px] hover:bg-ink/[0.05] transition-colors truncate"
                 >
                   {item.label}
                 </a>

package/dist/registry/Button.tsx

@@ -34,59 +34,52 @@ const shellConfig: Record<
   }
 > = {
   primary: {
-    bezel: "var(--bezel-dark)",
-    bezelShadow: "var(--bezel-dark-shadow)",
-    face: "var(--face-dark)",
-    faceShadow: "var(--face-dark-shadow)",
-    faceHoverShadow:
-      "0 0 3px rgba(0,0,0,0.35), 0 2px 3px rgba(0,0,0,0.45), 0 4px 8px -2px rgba(0,0,0,0.35), inset 0 2px 3px -2px rgba(255,255,255,0.135), inset 0 -2px 3px -2px rgba(0,0,0,0.25)",
-    facePressedShadow: "var(--face-dark-pressed)",
-    text: "text-white",
-    textShadow: "0 -1px 0 rgba(0,0,0,0.45)",
-    fill: "bg-white/[0.05]",
+    bezel: "var(--bezel-inverse)",
+    bezelShadow: "var(--bezel-inverse-shadow)",
+    face: "var(--face-inverse)",
+    faceShadow: "var(--face-inverse-shadow)",
+    faceHoverShadow: "var(--face-inverse-shadow-hover)",
+    facePressedShadow: "var(--face-inverse-pressed)",
+    text: "text-ink-inverse",
+    textShadow: "var(--emboss-inverse-deep)",
+    fill: "bg-ink-inverse/[0.05]",
   },
   secondary: {
-    bezel: "var(--bezel-light)",
-    bezelShadow: "var(--bezel-light-shadow)",
-    face: "var(--face-light)",
-    faceShadow: "var(--face-light-shadow)",
-    faceHoverShadow:
-      "0 0 3px rgba(17,17,17,0.136), 0 2px 3px rgba(17,17,17,0.1), 0 4px 8px -2px rgba(17,17,17,0.08), inset 0 2px 3px -2px rgba(255,255,255,1), inset 0 -2px 3px -2px rgba(17,17,17,0.035)",
-    facePressedShadow: "var(--face-light-pressed)",
-    text: "text-neutral-800",
-    textShadow: "0 1px 0 rgba(255,255,255,0.9)",
-    fill: "bg-neutral-900/[0.025]",
+    bezel: "var(--bezel)",
+    bezelShadow: "var(--bezel-shadow)",
+    face: "var(--face)",
+    faceShadow: "var(--face-shadow)",
+    faceHoverShadow: "var(--face-shadow-hover)",
+    facePressedShadow: "var(--face-pressed)",
+    text: "text-ink-soft",
+    textShadow: "var(--emboss)",
+    fill: "bg-ink/[0.025]",
   },
   outline: {
-    bezel: "linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(17,17,17,0.04) 100%)",
-    bezelShadow:
-      "0 0 0 0.5px rgba(17,17,17,0.048), inset 0 2px 3px -2px rgba(255,255,255,0.45)",
-    face: "var(--face-light)",
-    faceShadow:
-      "0 0 3px rgba(17,17,17,0.102), 0 1px 1px rgba(17,17,17,0.06), inset 0 2px 3px -2px rgba(255,255,255,1)",
-    faceHoverShadow:
-      "0 0 3px rgba(17,17,17,0.136), 0 1px 2px rgba(17,17,17,0.08), 0 3px 6px -2px rgba(17,17,17,0.06), inset 0 2px 3px -2px rgba(255,255,255,1)",
-    facePressedShadow: "var(--face-light-pressed)",
-    text: "text-neutral-700",
-    textShadow: "0 1px 0 rgba(255,255,255,0.9)",
-    fill: "bg-neutral-900/[0.025]",
+    bezel: "var(--outline-bezel)",
+    bezelShadow: "var(--outline-bezel-shadow)",
+    face: "var(--face)",
+    faceShadow: "var(--outline-face-shadow)",
+    faceHoverShadow: "var(--outline-face-shadow-hover)",
+    facePressedShadow: "var(--face-pressed)",
+    text: "text-ink-label",
+    textShadow: "var(--emboss)",
+    fill: "bg-ink/[0.025]",
   },
 };
 
 /* Secondary on a dark surface: a raised face a few steps lighter than the
-   card — present, but in the same family of tones.                       */
+   card — present, but in the same family of tones. It's the mid material,
+   the same one secondary keys wear everywhere in the dark theme.        */
 const darkSecondary = {
-  bezel: "linear-gradient(180deg, #2a2a2a 0%, #161616 100%)",
-  bezelShadow:
-    "0 0 0 0.5px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.35), inset 0 2px 3px -2px rgba(255,255,255,0.053)",
-  face: "linear-gradient(180deg, #353535 0%, #2a2a2a 55%, #242424 100%)",
-  faceShadow:
-    "0 0 3px rgba(0,0,0,0.35), 0 1px 1.5px rgba(0,0,0,0.4), inset 0 2px 3px -2px rgba(255,255,255,0.09), inset 0 -2px 3px -2px rgba(0,0,0,0.2)",
-  faceHoverShadow:
-    "0 0 3px rgba(0,0,0,0.35), 0 2px 3px rgba(0,0,0,0.45), 0 4px 8px -2px rgba(0,0,0,0.35), inset 0 2px 3px -2px rgba(255,255,255,0.12), inset 0 -2px 3px -2px rgba(0,0,0,0.2)",
+  bezel: "var(--bezel-mid)",
+  bezelShadow: "var(--bezel-mid-shadow)",
+  face: "var(--face-mid)",
+  faceShadow: "var(--face-mid-shadow)",
+  faceHoverShadow: "var(--face-mid-shadow-hover)",
   facePressedShadow: "var(--face-dark-pressed)",
   text: "text-neutral-100",
-  textShadow: "0 -1px 0 rgba(0,0,0,0.4)",
+  textShadow: "var(--emboss-inverse)",
   fill: "bg-white/[0.04]",
 };
 
@@ -103,38 +96,34 @@ const flatConfig: Record<
   }
 > = {
   primary: {
-    bg: "text-white",
-    background: "var(--face-dark)",
-    fill: "bg-white/[0.08]",
-    shadow: "var(--face-dark-shadow)",
-    hoverShadow:
-      "0 0 3px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.4), 0 6px 14px -4px rgba(0,0,0,0.35), inset 0 2px 3px -2px rgba(255,255,255,0.135)",
-    pressedShadow: "var(--face-dark-pressed)",
+    bg: "text-ink-inverse",
+    background: "var(--face-inverse)",
+    fill: "bg-ink-inverse/[0.08]",
+    shadow: "var(--face-inverse-shadow)",
+    hoverShadow: "var(--face-inverse-float-shadow)",
+    pressedShadow: "var(--face-inverse-pressed)",
   },
   secondary: {
-    bg: "text-neutral-800",
-    background: "var(--face-light)",
-    fill: "bg-neutral-900/[0.035]",
-    shadow: "var(--face-light-shadow)",
-    hoverShadow:
-      "0 0 3px rgba(17,17,17,0.136), 0 2px 4px rgba(17,17,17,0.08), 0 6px 14px -4px rgba(17,17,17,0.1), inset 0 2px 3px -2px rgba(255,255,255,1)",
-    pressedShadow: "var(--face-light-pressed)",
+    bg: "text-ink-soft",
+    background: "var(--face)",
+    fill: "bg-ink/[0.035]",
+    shadow: "var(--face-shadow)",
+    hoverShadow: "var(--face-float-shadow)",
+    pressedShadow: "var(--face-pressed)",
   },
   ghost: {
-    bg: "bg-transparent text-neutral-500 hover:text-neutral-800",
-    fill: "bg-neutral-900/[0.05]",
+    bg: "bg-transparent text-ink-muted hover:text-ink-soft",
+    fill: "bg-ink/[0.05]",
     shadow: "none",
-    hoverShadow: "inset 0 0 2px rgba(17,17,17,0.09)",
-    pressedShadow: "inset 0 1px 2px rgba(17,17,17,0.08)",
+    hoverShadow: "var(--ghost-shadow-hover)",
+    pressedShadow: "var(--ghost-shadow-pressed)",
   },
   outline: {
-    bg: "bg-transparent text-neutral-700",
-    fill: "bg-neutral-900/[0.035]",
-    shadow: "inset 0 0 2px rgba(17,17,17,0.15)",
-    hoverShadow:
-      "inset 0 0 2px rgba(17,17,17,0.24), 0 1px 2px rgba(17,17,17,0.05)",
-    pressedShadow:
-      "inset 0 0 2px rgba(17,17,17,0.24), inset 0 1px 2px rgba(17,17,17,0.06)",
+    bg: "bg-transparent text-ink-label",
+    fill: "bg-ink/[0.035]",
+    shadow: "var(--outline-shadow)",
+    hoverShadow: "var(--outline-shadow-hover)",
+    pressedShadow: "var(--outline-shadow-pressed)",
   },
 };
 
@@ -264,7 +253,7 @@ export function Button({
         className={[
           "group/btn relative inline-flex cursor-pointer select-none whitespace-nowrap",
           shellRadius[size],
-          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
           "disabled:opacity-40 disabled:pointer-events-none",
           fullWidth ? "w-full" : "",
           className,
@@ -331,7 +320,7 @@ export function Button({
       className={[
         "btn-face group/btn relative overflow-hidden inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer select-none whitespace-nowrap",
         "transition-colors duration-200 ease-out",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
         "disabled:opacity-40 disabled:pointer-events-none",
         cfg.bg,
         flatSizeStyles[size],

package/dist/registry/ButtonGroup.tsx

@@ -24,26 +24,26 @@ export function ButtonGroup({ items, label, className = "" }: ButtonGroupProps)
       role="group"
       aria-label={label}
       className={["inline-flex w-fit rounded-[12px] p-[3px]", className].join(" ")}
-      style={{ background: "var(--bezel-light)", boxShadow: "var(--bezel-light-shadow)" }}
+      style={{ background: "var(--bezel)", boxShadow: "var(--bezel-shadow)" }}
     >
       <div
         className="flex rounded-[9px] overflow-hidden"
-        style={{ background: "var(--face-light)", boxShadow: "var(--face-light-shadow)" }}
+        style={{ background: "var(--face)", boxShadow: "var(--face-shadow)" }}
       >
         {items.map((item, i) => {
           const keyClass = [
             "group/key relative h-9 inline-flex items-center justify-center gap-1.5 cursor-pointer",
-            "text-[13px] font-medium text-neutral-800 outline-none",
+            "text-[13px] font-medium text-ink-soft outline-none",
             "transition-[box-shadow,background] duration-150",
-            "active:bg-neutral-900/[0.04] active:[box-shadow:inset_0_1px_2px_rgba(17,17,17,0.08)]",
-            "focus-visible:[box-shadow:inset_0_0_0_2px_rgba(17,17,17,0.85)]",
+            "active:bg-ink/[0.04] active:[box-shadow:var(--ghost-shadow-pressed)]",
+            "focus-visible:[box-shadow:var(--focus-ring-inset)]",
             item.wide ? "px-4" : "w-10",
           ].join(" ");
           const inner = (
             <>
               <span
                 aria-hidden
-                className="pointer-events-none absolute inset-0 origin-bottom scale-y-0 bg-neutral-900/[0.025] transition-transform duration-300 ease-out group-hover/key:scale-y-100"
+                className="pointer-events-none absolute inset-0 origin-bottom scale-y-0 bg-ink/[0.025] transition-transform duration-300 ease-out group-hover/key:scale-y-100"
               />
               <span className="relative inline-flex items-center gap-1.5">{item.content}</span>
             </>
@@ -52,7 +52,7 @@ export function ButtonGroup({ items, label, className = "" }: ButtonGroupProps)
             "aria-label": item.label,
             title: item.wide ? undefined : item.label,
             className: keyClass,
-            style: { textShadow: "0 1px 0 rgba(255,255,255,0.9)" },
+            style: { textShadow: "var(--emboss)" },
           };
 
           return (
@@ -60,8 +60,8 @@ export function ButtonGroup({ items, label, className = "" }: ButtonGroupProps)
               {i > 0 && (
                 <span
                   aria-hidden
-                  className="w-px self-stretch my-2 bg-neutral-900/[0.08]"
-                  style={{ boxShadow: "1px 0 0 rgba(255,255,255,0.9)" }}
+                  className="w-px self-stretch my-2 bg-groove"
+                  style={{ boxShadow: "var(--groove-lip)" }}
                 />
               )}
               {item.href ? (