@deck-ui/review 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deck-ui/review",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/deliverable-card.tsx

@@ -3,7 +3,7 @@ import ReactMarkdown from "react-markdown";
 
 export function DeliverableCard({ content }: { content: string }) {
   return (
-    <div className="rounded-xl border border-black/[0.06] bg-white p-6 shadow-[0_1px_3px_rgba(0,0,0,0.04)]">
+    <div className="rounded-xl border border-border bg-white p-6 shadow-[0_1px_3px_rgba(0,0,0,0.04)]">
       <div className="prose prose-sm prose-stone max-w-none text-foreground">
         <ReactMarkdown>{content}</ReactMarkdown>
       </div>
@@ -16,7 +16,7 @@ export function UserFeedback({ content }: { content: string }) {
     <div className="flex justify-end">
       <div
         className={cn(
-          "max-w-[70%] rounded-3xl bg-[#f4f4f4] px-5 py-2.5",
+          "max-w-[70%] rounded-3xl bg-muted px-5 py-2.5",
           "text-sm text-foreground",
         )}
       >

package/src/review-detail.tsx

@@ -74,11 +74,11 @@ export function ReviewDetail({
   return (
     <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
       {/* Header */}
-      <div className="shrink-0 px-4 py-3 border-b border-black/[0.06]">
+      <div className="shrink-0 px-4 py-3 border-b border-border">
         <div className="max-w-3xl mx-auto flex items-center gap-3">
           <button
             onClick={onBack}
-            className="flex items-center justify-center size-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-black/[0.05] transition-colors duration-200"
+            className="flex items-center justify-center size-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors duration-200"
             aria-label="Back to Review"
           >
             <ArrowLeft className="size-4" />
@@ -117,7 +117,7 @@ export function ReviewDetail({
       </div>
 
       {/* Footer -- input + approve button */}
-      <div className="shrink-0 px-4 py-3 border-t border-black/[0.06]">
+      <div className="shrink-0 px-4 py-3 border-t border-border">
         <div className="max-w-3xl mx-auto flex items-center gap-2">
           <Input
             value={feedbackText}

package/src/review-item.tsx

@@ -12,17 +12,17 @@ function statusIndicator(status: RunStatus) {
     case "needs_you":
       return (
         <span className="relative flex size-3 shrink-0">
-          <span className="absolute inline-flex size-full rounded-full bg-[#0d0d0d]" />
+          <span className="absolute inline-flex size-full rounded-full bg-foreground" />
         </span>
       );
     case "running":
       return (
-        <Loader2 className="size-3.5 shrink-0 animate-spin text-[#9b9b9b]" />
+        <Loader2 className="size-3.5 shrink-0 animate-spin text-muted-foreground" />
       );
     case "done":
     case "approved":
       return (
-        <span className="flex size-2.5 shrink-0 rounded-full border-[1.5px] border-[#9b9b9b]/40" />
+        <span className="flex size-2.5 shrink-0 rounded-full border-[1.5px] border-muted-foreground/40" />
       );
     case "error":
     case "failed":
@@ -33,7 +33,7 @@ function statusIndicator(status: RunStatus) {
       );
     default:
       return (
-        <span className="flex size-2.5 shrink-0 rounded-full border-[1.5px] border-[#9b9b9b]/30" />
+        <span className="flex size-2.5 shrink-0 rounded-full border-[1.5px] border-muted-foreground/30" />
       );
   }
 }
@@ -81,7 +81,7 @@ export function ReviewItem({ item, onClick }: ReviewItemProps) {
       onClick={onClick}
       className={cn(
         "w-full text-left flex items-center gap-3 px-4 py-3 transition-colors duration-200",
-        "hover:bg-black/[0.03]",
+        "hover:bg-accent/30",
       )}
     >
       {/* Status indicator */}
@@ -95,14 +95,14 @@ export function ReviewItem({ item, onClick }: ReviewItemProps) {
           className={cn(
             "text-sm truncate",
             isUnreviewed
-              ? "font-semibold text-[#0d0d0d]"
-              : "font-normal text-[#0d0d0d]/70",
+              ? "font-semibold text-foreground"
+              : "font-normal text-foreground/70",
             isFailed && "text-red-600",
           )}
         >
           {item.title}
         </p>
-        <p className="text-xs text-[#9b9b9b] truncate mt-0.5">
+        <p className="text-xs text-muted-foreground truncate mt-0.5">
           {displaySubtitle}
           {isRunning && item.title !== item.subtitle && (
             <span className="animate-pulse"> &middot; Running...</span>
@@ -111,13 +111,13 @@ export function ReviewItem({ item, onClick }: ReviewItemProps) {
       </div>
 
       {/* Timestamp */}
-      <span className="text-xs text-[#9b9b9b]/50 shrink-0">
+      <span className="text-xs text-muted-foreground/50 shrink-0">
         {relativeTime(item.createdAt)}
       </span>
 
       {/* Right chevron for actionable items */}
       {isUnreviewed && (
-        <ChevronRight className="size-4 shrink-0 text-[#9b9b9b]" />
+        <ChevronRight className="size-4 shrink-0 text-muted-foreground" />
       )}
     </button>
   );

package/src/review-sidebar.tsx

@@ -33,16 +33,16 @@ export function ReviewSidebar({
   }, [items]);
 
   return (
-    <div className="flex flex-col h-full bg-[#f9f9f9] border-r border-black/5">
+    <div className="flex flex-col h-full bg-secondary border-r border-border">
       <div className="flex-1 overflow-y-auto px-2 py-3">
         {grouped.map((group) => (
           <div key={group.label} className="mb-1">
             <div className="flex items-center justify-between px-3 py-1">
-              <span className="text-[11px] text-[#9b9b9b]">
+              <span className="text-[11px] text-muted-foreground">
                 {group.label}
               </span>
               {group.items.length > 0 && (
-                <span className="text-[11px] text-[#cdcdcd]">
+                <span className="text-[11px] text-muted-foreground/60">
                   {group.items.length}
                 </span>
               )}
@@ -55,15 +55,15 @@ export function ReviewSidebar({
                   className={cn(
                     "w-full text-left px-3 py-1.5 rounded-lg transition-colors duration-100 text-[13px] truncate",
                     item.id === selectedId
-                      ? "bg-[#ececec] text-[#0d0d0d]"
-                      : "text-[#424242] hover:bg-[#ececec]/50",
+                      ? "bg-accent text-foreground"
+                      : "text-accent-foreground hover:bg-accent/50",
                   )}
                 >
                   {item.title}
                 </button>
               ))
             ) : (
-              <p className="px-3 py-1 text-[12px] text-[#cdcdcd] italic">
+              <p className="px-3 py-1 text-[12px] text-muted-foreground/60 italic">
                 None
               </p>
             )}

package/src/review-split.tsx

@@ -48,7 +48,7 @@ export function ReviewSplit({
           <ReviewDetailPanel item={selectedItem} renderChat={renderChat} />
         ) : (
           <div className="flex h-full items-center justify-center bg-white">
-            <p className="text-sm text-[#9b9b9b]">{emptyMessage}</p>
+            <p className="text-sm text-muted-foreground">{emptyMessage}</p>
           </div>
         )}
       </div>