@actuate-media/cms-admin 0.56.0 → 0.56.2

package/src/components/CoauthorResultPopover.tsx

@@ -81,20 +81,23 @@ export function CoauthorResultPopover({
         aria-label={`AI ${coauthorActionLabel(action)} result`}
         tabIndex={-1}
         onClick={(e) => e.stopPropagation()}
-        className="w-full max-w-2xl rounded-lg bg-white shadow-2xl outline-none"
+        className="bg-card w-full max-w-2xl rounded-lg shadow-2xl outline-none"
       >
-        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
-          <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
-            <Sparkles className="h-4 w-4 text-blue-600" aria-hidden />
+        <div className="border-border flex items-center justify-between border-b px-4 py-3">
+          <div className="text-foreground flex items-center gap-2 text-sm font-medium">
+            <Sparkles className="text-primary h-4 w-4" aria-hidden />
             <span>AI {coauthorActionLabel(action)}</span>
             {loading && (
-              <Loader2 className="ml-1 h-4 w-4 animate-spin text-gray-400" aria-label="Loading" />
+              <Loader2
+                className="text-muted-foreground ml-1 h-4 w-4 animate-spin"
+                aria-label="Loading"
+              />
             )}
           </div>
           <button
             type="button"
             onClick={onDiscard}
-            className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+            className="text-muted-foreground hover:bg-accent hover:text-muted-foreground rounded p-1"
             aria-label="Close"
           >
             <X className="h-4 w-4" />
@@ -105,34 +108,34 @@ export function CoauthorResultPopover({
           <section aria-labelledby="coauthor-before">
             <h3
               id="coauthor-before"
-              className="mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase"
+              className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase"
             >
               Before
             </h3>
-            <pre className="max-h-72 overflow-auto rounded border border-gray-200 bg-gray-50 p-3 text-sm whitespace-pre-wrap text-gray-700">
+            <pre className="border-border bg-muted text-foreground max-h-72 overflow-auto rounded border p-3 text-sm whitespace-pre-wrap">
               {before}
             </pre>
           </section>
           <section aria-labelledby="coauthor-after">
             <h3
               id="coauthor-after"
-              className="mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase"
+              className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase"
             >
               After
             </h3>
             {loading ? (
               <div
-                className="flex h-72 items-center justify-center rounded border border-dashed border-gray-200 bg-gray-50 text-sm text-gray-400"
+                className="border-border bg-muted text-muted-foreground flex h-72 items-center justify-center rounded border border-dashed text-sm"
                 role="status"
               >
                 Thinking…
               </div>
             ) : error ? (
-              <div className="flex h-72 items-center justify-center rounded border border-dashed border-red-200 bg-red-50 p-3 text-sm text-red-600">
+              <div className="border-destructive/30 bg-destructive/10 text-destructive flex h-72 items-center justify-center rounded border border-dashed p-3 text-sm">
                 {error}
               </div>
             ) : (
-              <pre className="max-h-72 overflow-auto rounded border border-blue-200 bg-blue-50 p-3 text-sm whitespace-pre-wrap text-gray-900">
+              <pre className="border-info/30 bg-info/10 text-foreground max-h-72 overflow-auto rounded border p-3 text-sm whitespace-pre-wrap">
                 {after}
               </pre>
             )}
@@ -140,18 +143,18 @@ export function CoauthorResultPopover({
         </div>
 
         {changes && changes.length > 0 && !loading && !error && (
-          <div className="border-t border-gray-200 px-4 py-3">
-            <h3 className="mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase">
+          <div className="border-border border-t px-4 py-3">
+            <h3 className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">
               Changes ({changes.length})
             </h3>
             <ul className="max-h-32 space-y-1 overflow-auto text-xs">
               {changes.map((change, i) => (
-                <li key={i} className="flex items-start gap-2 rounded bg-gray-50 px-2 py-1">
-                  <span className="text-red-600 line-through">{change.original}</span>
-                  <span className="text-gray-400">→</span>
-                  <span className="text-green-700">{change.corrected}</span>
+                <li key={i} className="bg-muted flex items-start gap-2 rounded px-2 py-1">
+                  <span className="text-destructive line-through">{change.original}</span>
+                  <span className="text-muted-foreground">→</span>
+                  <span className="text-success">{change.corrected}</span>
                   {change.reason && (
-                    <span className="ml-auto text-gray-500 italic">{change.reason}</span>
+                    <span className="text-muted-foreground ml-auto italic">{change.reason}</span>
                   )}
                 </li>
               ))}
@@ -159,11 +162,11 @@ export function CoauthorResultPopover({
           </div>
         )}
 
-        <div className="flex items-center justify-end gap-2 border-t border-gray-200 bg-gray-50 px-4 py-3">
+        <div className="border-border bg-muted flex items-center justify-end gap-2 border-t px-4 py-3">
           <button
             type="button"
             onClick={onDiscard}
-            className="rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
+            className="border-border bg-card text-foreground hover:bg-accent rounded-md border px-3 py-1.5 text-sm"
           >
             <X className="mr-1.5 inline h-3.5 w-3.5" aria-hidden />
             Discard
@@ -172,7 +175,7 @@ export function CoauthorResultPopover({
             type="button"
             onClick={onCopy}
             disabled={copyDisabled}
-            className="rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+            className="border-border bg-card text-foreground hover:bg-accent rounded-md border px-3 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50"
           >
             <Copy className="mr-1.5 inline h-3.5 w-3.5" aria-hidden />
             Copy
@@ -181,7 +184,7 @@ export function CoauthorResultPopover({
             type="button"
             onClick={onApply}
             disabled={applyDisabled}
-            className="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+            className="bg-primary hover:bg-primary/90 rounded-md px-3 py-1.5 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
           >
             <Check className="mr-1.5 inline h-3.5 w-3.5" aria-hidden />
             {applyLabel ?? 'Apply'}

package/src/components/CommandPalette.tsx

@@ -340,7 +340,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
           onClick={(e) => e.stopPropagation()}
         >
           <Command
-            className="w-full overflow-hidden rounded-lg bg-white shadow-2xl"
+            className="bg-card w-full overflow-hidden rounded-lg shadow-2xl"
             onKeyDown={(e) => {
               if (e.key === 'Escape') {
                 onOpenChange(false)
@@ -349,30 +349,30 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
             }}
             shouldFilter={!hasQuery}
           >
-            <div className="flex items-center border-b border-gray-200 px-4">
-              <Search className="mr-3 h-5 w-5 shrink-0 text-gray-400" />
+            <div className="border-border flex items-center border-b px-4">
+              <Search className="text-muted-foreground mr-3 h-5 w-5 shrink-0" />
               <Command.Input
                 value={search}
                 onValueChange={setSearch}
                 placeholder="Search, jump to, or type /ai to use the AI co-author…"
-                className="w-full bg-transparent py-4 text-base placeholder:text-gray-400 focus:outline-none"
+                className="placeholder:text-muted-foreground w-full bg-transparent py-4 text-base focus:outline-none"
               />
               {loading && (
-                <div className="mr-2 h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-gray-300 border-t-gray-600" />
+                <div className="border-border mr-2 h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-t-gray-600" />
               )}
-              <kbd className="hidden shrink-0 rounded bg-gray-100 px-2 py-1 font-mono text-xs text-gray-600 sm:inline-block">
+              <kbd className="bg-muted text-muted-foreground hidden shrink-0 rounded px-2 py-1 font-mono text-xs sm:inline-block">
                 ESC
               </kbd>
             </div>
 
             <Command.List className="max-h-[400px] overflow-y-auto p-2">
-              <Command.Empty className="py-6 text-center text-sm text-gray-500">
+              <Command.Empty className="text-muted-foreground py-6 text-center text-sm">
                 {loading ? 'Searching...' : 'No results found.'}
               </Command.Empty>
 
               {isAiMode && (
                 <Command.Group heading="AI co-author" className="px-2 py-2">
-                  <div className="mb-2 flex items-center gap-1 text-xs font-medium text-gray-500">
+                  <div className="text-muted-foreground mb-2 flex items-center gap-1 text-xs font-medium">
                     <Sparkles className="h-3 w-3" aria-hidden /> AI CO-AUTHOR
                   </div>
                   {aiActions.map((action) => {
@@ -384,23 +384,23 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                         key={`ai-${action}`}
                         value={`ai ${action}`}
                         onSelect={() => runSlashAction(action, aiPayload)}
-                        className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                        className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                       >
-                        <Icon className="h-4 w-4 text-blue-600" />
+                        <Icon className="text-primary h-4 w-4" />
                         <div className="flex min-w-0 flex-col">
                           <span className="font-medium">
                             {coauthorActionLabel(action)}
                             {previewable && (
-                              <span className="ml-1 font-normal text-gray-500">
+                              <span className="text-muted-foreground ml-1 font-normal">
                                 “{truncatePreview(aiPayload)}”
                               </span>
                             )}
                           </span>
-                          <span className="text-xs text-gray-400">
+                          <span className="text-muted-foreground text-xs">
                             {coauthorActionDescription(action)}
                           </span>
                         </div>
-                        <kbd className="ml-auto rounded bg-gray-100 px-1.5 py-0.5 font-mono text-[10px] text-gray-500">
+                        <kbd className="bg-muted text-muted-foreground ml-auto rounded px-1.5 py-0.5 font-mono text-[10px]">
                           /ai {action}
                         </kbd>
                       </Command.Item>
@@ -411,17 +411,19 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
               {!isAiMode && !hasQuery && recentItems.length > 0 && (
                 <Command.Group heading="Recent" className="px-2 py-2">
-                  <div className="mb-2 text-xs font-medium text-gray-500">RECENT</div>
+                  <div className="text-muted-foreground mb-2 text-xs font-medium">RECENT</div>
                   {recentItems.map((item) => (
                     <Command.Item
                       key={`recent-${item.id}`}
                       value={`recent ${item.label}`}
                       onSelect={() => handleSelect(item.path, item)}
-                      className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                      className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                     >
-                      <Clock className="h-4 w-4 text-gray-400" />
+                      <Clock className="text-muted-foreground h-4 w-4" />
                       <span>{item.label}</span>
-                      <span className="ml-auto text-xs text-gray-400 capitalize">{item.type}</span>
+                      <span className="text-muted-foreground ml-auto text-xs capitalize">
+                        {item.type}
+                      </span>
                     </Command.Item>
                   ))}
                 </Command.Group>
@@ -429,7 +431,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
               {!isAiMode && hasQuery && documents.length > 0 && (
                 <Command.Group heading="Documents" className="px-2 py-2">
-                  <div className="mb-2 text-xs font-medium text-gray-500">DOCUMENTS</div>
+                  <div className="text-muted-foreground mb-2 text-xs font-medium">DOCUMENTS</div>
                   {documents.map((doc) => (
                     <Command.Item
                       key={`doc-${doc.id}`}
@@ -442,12 +444,12 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                           type: 'document',
                         })
                       }
-                      className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                      className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                     >
-                      <FileText className="h-4 w-4 text-gray-500" />
+                      <FileText className="text-muted-foreground h-4 w-4" />
                       <div className="flex min-w-0 flex-col">
                         <span className="truncate">{doc.title ?? doc.slug ?? doc.id}</span>
-                        <span className="text-xs text-gray-400">
+                        <span className="text-muted-foreground text-xs">
                           {doc.collection} &middot; {doc.status}
                         </span>
                       </div>
@@ -458,7 +460,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
               {!isAiMode && hasQuery && media.length > 0 && (
                 <Command.Group heading="Media" className="mt-1 px-2 py-2">
-                  <div className="mb-2 text-xs font-medium text-gray-500">MEDIA</div>
+                  <div className="text-muted-foreground mb-2 text-xs font-medium">MEDIA</div>
                   {media.map((m) => (
                     <Command.Item
                       key={`media-${m.id}`}
@@ -471,12 +473,12 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                           type: 'media',
                         })
                       }
-                      className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                      className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                     >
-                      <Image className="h-4 w-4 text-gray-500" />
+                      <Image className="text-muted-foreground h-4 w-4" />
                       <div className="flex min-w-0 flex-col">
                         <span className="truncate">{m.filename}</span>
-                        <span className="text-xs text-gray-400">{m.mimeType}</span>
+                        <span className="text-muted-foreground text-xs">{m.mimeType}</span>
                       </div>
                     </Command.Item>
                   ))}
@@ -485,7 +487,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
               {!isAiMode && hasQuery && users.length > 0 && (
                 <Command.Group heading="Users" className="mt-1 px-2 py-2">
-                  <div className="mb-2 text-xs font-medium text-gray-500">USERS</div>
+                  <div className="text-muted-foreground mb-2 text-xs font-medium">USERS</div>
                   {users.map((u) => (
                     <Command.Item
                       key={`user-${u.id}`}
@@ -498,12 +500,12 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                           type: 'user',
                         })
                       }
-                      className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                      className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                     >
-                      <Users className="h-4 w-4 text-gray-500" />
+                      <Users className="text-muted-foreground h-4 w-4" />
                       <div className="flex min-w-0 flex-col">
                         <span className="truncate">{u.name}</span>
-                        <span className="text-xs text-gray-400">
+                        <span className="text-muted-foreground text-xs">
                           {u.email} &middot; {u.role}
                         </span>
                       </div>
@@ -514,7 +516,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
               {!isAiMode && (!hasQuery || !hasResults) && (
                 <Command.Group heading="Navigation" className="px-2 py-2">
-                  <div className="mb-2 text-xs font-medium text-gray-500">NAVIGATION</div>
+                  <div className="text-muted-foreground mb-2 text-xs font-medium">NAVIGATION</div>
                   {navigationCommands.map((cmd) => {
                     const Icon = cmd.icon
                     return (
@@ -522,9 +524,9 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                         key={cmd.id}
                         value={cmd.label}
                         onSelect={() => handleSelect(cmd.action)}
-                        className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                        className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                       >
-                        <Icon className="h-4 w-4 text-gray-500" />
+                        <Icon className="text-muted-foreground h-4 w-4" />
                         <span>{cmd.label}</span>
                       </Command.Item>
                     )
@@ -534,7 +536,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
               {!isAiMode && (
                 <Command.Group heading="Actions" className="mt-2 px-2 py-2">
-                  <div className="mb-2 text-xs font-medium text-gray-500">ACTIONS</div>
+                  <div className="text-muted-foreground mb-2 text-xs font-medium">ACTIONS</div>
                   {staticActions.map((cmd) => {
                     const Icon = cmd.icon
                     return (
@@ -549,9 +551,9 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                             type: 'action',
                           })
                         }
-                        className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                        className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                       >
-                        <Icon className="h-4 w-4 text-gray-500" />
+                        <Icon className="text-muted-foreground h-4 w-4" />
                         <span>{cmd.label}</span>
                       </Command.Item>
                     )
@@ -560,19 +562,19 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
               )}
             </Command.List>
 
-            <div className="flex items-center justify-between border-t border-gray-200 bg-gray-50 px-4 py-3 text-xs text-gray-500">
+            <div className="border-border bg-muted text-muted-foreground flex items-center justify-between border-t px-4 py-3 text-xs">
               <div className="flex items-center gap-4">
                 <span className="flex items-center gap-1">
-                  <kbd className="rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px]">
+                  <kbd className="border-border bg-card rounded border px-1.5 py-0.5 text-[10px]">
                     ↑
                   </kbd>
-                  <kbd className="rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px]">
+                  <kbd className="border-border bg-card rounded border px-1.5 py-0.5 text-[10px]">
                     ↓
                   </kbd>
                   to navigate
                 </span>
                 <span className="flex items-center gap-1">
-                  <kbd className="rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px]">
+                  <kbd className="border-border bg-card rounded border px-1.5 py-0.5 text-[10px]">
                     ↵
                   </kbd>
                   to select

package/src/components/CommentSidePanel.tsx

@@ -228,13 +228,13 @@ export function CommentSidePanel({
     [api, onError, refresh, activeCommentId, setActive],
   )
 
-  const wrapperClass = `flex h-full flex-col gap-3 border-l border-gray-200 bg-white p-3 ${className ?? ''}`
+  const wrapperClass = `flex h-full flex-col gap-3 border-l border-border bg-card p-3 ${className ?? ''}`
 
   return (
     <aside className={wrapperClass} data-testid="comment-side-panel">
       <header className="flex items-center justify-between">
-        <h2 className="text-sm font-medium text-gray-900">Comments</h2>
-        <label className="flex cursor-pointer items-center gap-1 text-xs text-gray-600">
+        <h2 className="text-foreground text-sm font-medium">Comments</h2>
+        <label className="text-muted-foreground flex cursor-pointer items-center gap-1 text-xs">
           <input
             type="checkbox"
             checked={includeResolved}
@@ -247,7 +247,7 @@ export function CommentSidePanel({
 
       <section className="flex flex-col gap-1.5">
         <MentionableTextarea
-          className="w-full resize-none rounded border border-gray-300 p-2 text-sm focus:border-blue-500 focus:outline-none"
+          className="border-border focus-visible:border-ring w-full resize-none rounded border p-2 text-sm focus:outline-none"
           rows={3}
           placeholder="Write a comment…  Type @ to mention a teammate."
           value={draft}
@@ -258,7 +258,7 @@ export function CommentSidePanel({
         <div className="flex justify-end">
           <button
             type="button"
-            className="rounded bg-blue-600 px-3 py-1 text-xs font-medium text-white hover:bg-blue-500 disabled:opacity-50"
+            className="bg-primary hover:bg-info rounded px-3 py-1 text-xs font-medium text-white disabled:opacity-50"
             disabled={!draft.trim()}
             onClick={handleCompose}
             data-testid="comment-submit"
@@ -270,9 +270,9 @@ export function CommentSidePanel({
 
       <section className="flex-1 overflow-y-auto" aria-busy={loading} data-testid="comment-list">
         {loading ? (
-          <p className="text-xs text-gray-500">Loading…</p>
+          <p className="text-muted-foreground text-xs">Loading…</p>
         ) : threads.length === 0 ? (
-          <p className="text-xs text-gray-500">No comments yet.</p>
+          <p className="text-muted-foreground text-xs">No comments yet.</p>
         ) : (
           <ul className="flex flex-col gap-2">
             {threads.map((thread) => (
@@ -323,8 +323,8 @@ function CommentThreadView({
   mentionSearch,
 }: CommentThreadViewProps): React.JSX.Element {
   const [replyDraft, setReplyDraft] = useState('')
-  const cardClass = `rounded border bg-gray-50 p-2 ${
-    isActive ? 'border-yellow-400 ring-1 ring-yellow-300' : 'border-gray-200'
+  const cardClass = `rounded border bg-muted p-2 ${
+    isActive ? 'border-yellow-400 ring-1 ring-yellow-300' : 'border-border'
   }`
 
   return (
@@ -344,7 +344,7 @@ function CommentThreadView({
         mentionSearch={mentionSearch}
       />
       {thread.replies.length > 0 && (
-        <ul className="mt-2 flex flex-col gap-1 border-l-2 border-gray-200 pl-2">
+        <ul className="border-border mt-2 flex flex-col gap-1 border-l-2 pl-2">
           {thread.replies.map((reply) => (
             <li key={reply.id}>
               <CommentRow
@@ -365,7 +365,7 @@ function CommentThreadView({
       <div className="mt-2 flex items-start gap-1">
         <div className="flex-1">
           <MentionableTextarea
-            className="w-full resize-none rounded border border-gray-300 px-2 py-1 text-xs focus:border-blue-500 focus:outline-none"
+            className="border-border focus-visible:border-ring w-full resize-none rounded border px-2 py-1 text-xs focus:outline-none"
             placeholder="Reply…  Type @ to mention."
             rows={1}
             value={replyDraft}
@@ -377,7 +377,7 @@ function CommentThreadView({
         </div>
         <button
           type="button"
-          className="rounded bg-gray-700 px-2 py-1 text-xs font-medium text-white hover:bg-gray-600 disabled:opacity-50"
+          className="bg-foreground hover:bg-foreground/90 rounded px-2 py-1 text-xs font-medium text-white disabled:opacity-50"
           disabled={!replyDraft.trim()}
           onClick={(e) => {
             e.stopPropagation()
@@ -420,7 +420,7 @@ function CommentRow({
 
   const canMutate = isAdmin || comment.userId === currentUserId
   const meta = (
-    <div className="text-xs text-gray-500">
+    <div className="text-muted-foreground text-xs">
       {comment.userId ?? 'deleted user'} · {formatRelative(comment.createdAt)}
       {comment.isResolved ? ' · resolved' : null}
     </div>
@@ -432,7 +432,7 @@ function CommentRow({
       {editing ? (
         <>
           <MentionableTextarea
-            className="w-full resize-none rounded border border-gray-300 p-1 text-sm"
+            className="border-border w-full resize-none rounded border p-1 text-sm"
             rows={3}
             value={draft}
             onChange={setDraft}
@@ -443,7 +443,7 @@ function CommentRow({
           <div className="flex gap-1">
             <button
               type="button"
-              className="rounded bg-blue-600 px-2 py-1 text-xs font-medium text-white"
+              className="bg-primary rounded px-2 py-1 text-xs font-medium text-white"
               onClick={async (e) => {
                 e.stopPropagation()
                 const ok = await onEdit(comment.id, draft)
@@ -455,7 +455,7 @@ function CommentRow({
             </button>
             <button
               type="button"
-              className="rounded border border-gray-300 px-2 py-1 text-xs"
+              className="border-border rounded border px-2 py-1 text-xs"
               onClick={(e) => {
                 e.stopPropagation()
                 setDraft(comment.body)
@@ -469,7 +469,7 @@ function CommentRow({
         </>
       ) : (
         <p
-          className="text-sm whitespace-pre-wrap text-gray-900"
+          className="text-foreground text-sm whitespace-pre-wrap"
           data-testid={`comment-body-${comment.id}`}
         >
           {comment.body}
@@ -480,7 +480,7 @@ function CommentRow({
           {canMutate && (
             <button
               type="button"
-              className="text-gray-600 hover:text-gray-900"
+              className="text-muted-foreground hover:text-foreground"
               onClick={(e) => {
                 e.stopPropagation()
                 setEditing(true)
@@ -493,7 +493,7 @@ function CommentRow({
           {onToggleResolve && (
             <button
               type="button"
-              className="text-gray-600 hover:text-gray-900"
+              className="text-muted-foreground hover:text-foreground"
               onClick={(e) => {
                 e.stopPropagation()
                 onToggleResolve()
@@ -506,7 +506,7 @@ function CommentRow({
           {canMutate && (
             <button
               type="button"
-              className="text-red-600 hover:text-red-700"
+              className="text-destructive hover:text-destructive"
               onClick={(e) => {
                 e.stopPropagation()
                 onDelete()

package/src/components/ContentOverviewChart.tsx

@@ -20,7 +20,7 @@ export function ContentOverviewChart({ published, drafts, scheduled }: ContentOv
 
   if (total === 0) {
     return (
-      <div className="flex h-full items-center justify-center text-sm text-gray-400">
+      <div className="text-muted-foreground flex h-full items-center justify-center text-sm">
         No content yet
       </div>
     )
@@ -58,12 +58,12 @@ export function ContentOverviewChart({ published, drafts, scheduled }: ContentOv
                 style={{ backgroundColor: COLORS[idx] }}
               />
               <div className="min-w-0">
-                <span className="text-sm text-gray-700">{entry.name}</span>
+                <span className="text-foreground text-sm">{entry.name}</span>
                 <div className="flex items-baseline gap-2">
-                  <span className="text-lg font-medium text-gray-900">
+                  <span className="text-foreground text-lg font-medium">
                     {entry.value.toLocaleString()}
                   </span>
-                  <span className="text-xs text-gray-400">{pct}%</span>
+                  <span className="text-muted-foreground text-xs">{pct}%</span>
                 </div>
               </div>
             </div>

package/src/components/FocalPointPicker.tsx

@@ -50,10 +50,10 @@ export function FocalPointPicker({ imageUrl, focalX, focalY, onChange }: FocalPo
           draggable={false}
         />
         <div
-          className="pointer-events-none absolute -mt-3 -ml-3 h-6 w-6 rounded-full border-2 border-white bg-blue-500/50 shadow-lg"
+          className="bg-info/50 pointer-events-none absolute -mt-3 -ml-3 h-6 w-6 rounded-full border-2 border-white shadow-lg"
           style={{ left: `${focalX * 100}%`, top: `${focalY * 100}%` }}
         >
-          <div className="absolute inset-1 rounded-full bg-white" />
+          <div className="bg-card absolute inset-1 rounded-full" />
         </div>
       </div>
       <p className="text-xs text-[var(--muted-foreground)]">