@actuate-media/cms-admin 0.54.0 → 0.56.2

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)]">

package/src/components/LivePreview.tsx

@@ -155,13 +155,16 @@ export function LivePreview({
 
   if (!previewSrc) {
     return (
-      <div className="flex h-full flex-col items-center justify-center rounded-lg border border-dashed border-gray-300 bg-gray-50 p-8">
-        <p className="text-center text-sm text-gray-500">
+      <div className="border-border bg-muted flex h-full flex-col items-center justify-center rounded-lg border border-dashed p-8">
+        <p className="text-muted-foreground text-center text-sm">
           {!documentId
             ? 'Save the document first to enable preview'
             : 'Configure a preview URL in the collection settings to enable live preview'}
         </p>
-        <button onClick={onClose} className="mt-4 text-xs text-gray-400 hover:text-gray-600">
+        <button
+          onClick={onClose}
+          className="text-muted-foreground hover:text-muted-foreground mt-4 text-xs"
+        >
           Close Preview
         </button>
       </div>
@@ -169,8 +172,8 @@ export function LivePreview({
   }
 
   return (
-    <div className="flex h-full flex-col border-l border-gray-200 bg-white">
-      <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-3 py-2">
+    <div className="border-border bg-card flex h-full flex-col border-l">
+      <div className="border-border bg-muted flex items-center justify-between border-b px-3 py-2">
         <div className="flex items-center gap-1">
           {(
             [
@@ -182,14 +185,14 @@ export function LivePreview({
             <button
               key={vp}
               onClick={() => setViewport(vp)}
-              className={`rounded p-1.5 ${viewport === vp ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
+              className={`rounded p-1.5 ${viewport === vp ? 'bg-card text-primary shadow-sm' : 'text-muted-foreground hover:text-muted-foreground'}`}
               title={vp}
             >
               <Icon className="h-4 w-4" />
             </button>
           ))}
           <span
-            className="ml-2 inline-flex items-center gap-1 rounded-full bg-white px-2 py-0.5 text-[10px] font-medium text-gray-600"
+            className="bg-card text-muted-foreground ml-2 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium"
             title={
               streamStatus === 'connected'
                 ? 'Live preview is streaming updates from the server.'
@@ -202,19 +205,19 @@ export function LivePreview({
           >
             {streamStatus === 'connected' ? (
               <>
-                <Wifi className="h-3 w-3 text-green-600" aria-hidden /> Live
+                <Wifi className="text-success h-3 w-3" aria-hidden /> Live
               </>
             ) : streamStatus === 'connecting' ? (
               <>
-                <Wifi className="h-3 w-3 animate-pulse text-blue-500" aria-hidden /> Connecting
+                <Wifi className="text-info h-3 w-3 animate-pulse" aria-hidden /> Connecting
               </>
             ) : streamStatus === 'offline' ? (
               <>
-                <WifiOff className="h-3 w-3 text-amber-500" aria-hidden /> Reconnecting
+                <WifiOff className="text-warning h-3 w-3" aria-hidden /> Reconnecting
               </>
             ) : (
               <>
-                <WifiOff className="h-3 w-3 text-gray-400" aria-hidden /> Idle
+                <WifiOff className="text-muted-foreground h-3 w-3" aria-hidden /> Idle
               </>
             )}
           </span>
@@ -222,21 +225,21 @@ export function LivePreview({
         <div className="flex items-center gap-1">
           <button
             onClick={handleRefresh}
-            className="rounded p-1.5 text-gray-400 hover:text-gray-600"
+            className="text-muted-foreground hover:text-muted-foreground rounded p-1.5"
             title="Refresh"
           >
             <RefreshCw className="h-4 w-4" />
           </button>
           <button
             onClick={handleOpenExternal}
-            className="rounded p-1.5 text-gray-400 hover:text-gray-600"
+            className="text-muted-foreground hover:text-muted-foreground rounded p-1.5"
             title="Open in new tab"
           >
             <ExternalLink className="h-4 w-4" />
           </button>
           <button
             onClick={onClose}
-            className="rounded p-1.5 text-gray-400 hover:text-gray-600"
+            className="text-muted-foreground hover:text-muted-foreground rounded p-1.5"
             title="Close"
           >
             <X className="h-4 w-4" />
@@ -244,20 +247,20 @@ export function LivePreview({
         </div>
       </div>
 
-      <div className="flex flex-1 justify-center overflow-auto bg-gray-100 p-4">
+      <div className="bg-muted flex flex-1 justify-center overflow-auto p-4">
         <div
           style={{ width: VIEWPORT_WIDTHS[viewport], maxWidth: '100%', transition: 'width 0.3s' }}
           className="relative"
         >
           {loading && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-white/80">
+            <div className="bg-card/80 absolute inset-0 z-10 flex items-center justify-center rounded-lg">
               <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600" />
             </div>
           )}
           <iframe
             ref={iframeRef}
             src={previewSrc}
-            className="h-full w-full rounded-lg border border-gray-200 bg-white shadow-lg"
+            className="border-border bg-card h-full w-full rounded-lg border shadow-lg"
             style={{ minHeight: '600px' }}
             onLoad={() => setLoading(false)}
             title="Page Preview"

package/src/components/LogoPlaceholder.tsx

@@ -25,7 +25,7 @@ export function LogoPlaceholder({ tone, label }: LogoPlaceholderProps) {
         role="img"
         aria-label="Logo placeholder"
         title="Add a logo in Settings → Appearance"
-        className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-lg border border-dashed border-gray-300 text-gray-400"
+        className="border-border text-muted-foreground mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-lg border border-dashed"
       >
         <ImagePlus className="h-6 w-6" aria-hidden="true" />
       </span>

package/src/components/MentionableTextarea.tsx

@@ -283,11 +283,11 @@ export function MentionableTextarea({
           id={pickerId}
           role="listbox"
           aria-label="Mention a teammate"
-          className="absolute top-full left-0 z-30 mt-1 max-h-56 w-64 overflow-y-auto rounded border border-gray-200 bg-white shadow-lg"
+          className="border-border bg-card absolute top-full left-0 z-30 mt-1 max-h-56 w-64 overflow-y-auto rounded border shadow-lg"
           data-testid={testId ? `${testId}-picker` : 'mention-picker'}
         >
           {picker.users.length === 0 ? (
-            <p className="px-3 py-2 text-xs text-gray-500">
+            <p className="text-muted-foreground px-3 py-2 text-xs">
               {picker.query ? 'No matches' : 'Type a name…'}
             </p>
           ) : (
@@ -309,13 +309,13 @@ export function MentionableTextarea({
                     onMouseEnter={() => setPicker((s) => ({ ...s, highlight: idx }))}
                     className={`block w-full px-3 py-1.5 text-left text-xs ${
                       idx === picker.highlight
-                        ? 'bg-blue-50 text-blue-900'
-                        : 'text-gray-800 hover:bg-gray-50'
+                        ? 'bg-info/10 text-foreground'
+                        : 'text-foreground hover:bg-accent'
                     }`}
                     data-testid={testId ? `${testId}-picker-row-${u.id}` : `mention-row-${u.id}`}
                   >
                     <div className="font-medium">{formatLabel(u)}</div>
-                    <div className="text-[10px] text-gray-500">{u.email}</div>
+                    <div className="text-muted-foreground text-[10px]">{u.email}</div>
                   </button>
                 </li>
               ))}

package/src/components/NotificationBell.tsx

@@ -246,7 +246,7 @@ export function NotificationBell({
     <div className={`relative ${className ?? ''}`} data-testid="notification-bell">
       <button
         type="button"
-        className="relative rounded p-1.5 text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+        className="text-muted-foreground hover:bg-accent hover:text-foreground relative rounded p-1.5"
         aria-label="Notifications"
         aria-haspopup="menu"
         aria-expanded={open}
@@ -256,7 +256,7 @@ export function NotificationBell({
         <BellIcon />
         {unread > 0 && (
           <span
-            className="absolute -top-0.5 -right-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-red-600 px-1 text-[10px] font-medium text-white"
+            className="bg-destructive absolute -top-0.5 -right-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium text-white"
             data-testid="bell-badge"
           >
             {unread > 99 ? '99+' : unread}
@@ -266,14 +266,14 @@ export function NotificationBell({
       {open && (
         <div
           role="menu"
-          className="absolute right-0 z-50 mt-1 w-80 rounded border border-gray-200 bg-white shadow-lg"
+          className="border-border bg-card absolute right-0 z-50 mt-1 w-80 rounded border shadow-lg"
           data-testid="bell-dropdown"
         >
           <header className="flex items-center justify-between border-b border-gray-100 px-3 py-2">
-            <span className="text-sm font-medium text-gray-900">Notifications</span>
+            <span className="text-foreground text-sm font-medium">Notifications</span>
             <button
               type="button"
-              className="text-xs text-gray-600 hover:text-gray-900 disabled:opacity-50"
+              className="text-muted-foreground hover:text-foreground text-xs disabled:opacity-50"
               onClick={handleMarkAll}
               disabled={unread === 0}
               data-testid="bell-mark-all"
@@ -283,9 +283,9 @@ export function NotificationBell({
           </header>
           <div className="max-h-80 overflow-y-auto" aria-busy={loading} data-testid="bell-list">
             {loading ? (
-              <p className="px-3 py-2 text-xs text-gray-500">Loading…</p>
+              <p className="text-muted-foreground px-3 py-2 text-xs">Loading…</p>
             ) : items.length === 0 ? (
-              <p className="px-3 py-2 text-xs text-gray-500">All caught up.</p>
+              <p className="text-muted-foreground px-3 py-2 text-xs">All caught up.</p>
             ) : (
               <ul>
                 {items.map((n) => (
@@ -293,15 +293,15 @@ export function NotificationBell({
                     <button
                       type="button"
                       role="menuitem"
-                      className={`block w-full px-3 py-2 text-left text-xs hover:bg-gray-50 ${
-                        n.readAt ? 'text-gray-500' : 'font-medium text-gray-900'
+                      className={`hover:bg-accent block w-full px-3 py-2 text-left text-xs ${
+                        n.readAt ? 'text-muted-foreground' : 'text-foreground font-medium'
                       }`}
                       onClick={() => handleClickRow(n)}
                       data-testid={`bell-row-${n.id}`}
                       data-read={n.readAt ? 'true' : 'false'}
                     >
                       <div>{notificationSummary(n)}</div>
-                      <div className="mt-0.5 text-[10px] text-gray-400">{n.createdAt}</div>
+                      <div className="text-muted-foreground mt-0.5 text-[10px]">{n.createdAt}</div>
                     </button>
                   </li>
                 ))}

package/src/components/OfflineStatus.tsx

@@ -51,17 +51,17 @@ export function OfflineStatus({ connection, offline }: OfflineStatusProps): Reac
 export type OfflineTone = 'good' | 'warn' | 'info' | 'bad'
 
 const TONE_CLASSES: Record<OfflineTone, string> = {
-  good: 'bg-emerald-50 text-emerald-700',
-  warn: 'bg-amber-50 text-amber-800',
-  info: 'bg-blue-50 text-blue-700',
-  bad: 'bg-red-50 text-red-700',
+  good: 'bg-success/10 text-emerald-700',
+  warn: 'bg-warning/10 text-warning',
+  info: 'bg-info/10 text-info',
+  bad: 'bg-destructive/10 text-destructive',
 }
 
 const DOT_CLASSES: Record<OfflineTone, string> = {
-  good: 'bg-emerald-500',
-  warn: 'bg-amber-500',
-  info: 'bg-blue-500',
-  bad: 'bg-red-500',
+  good: 'bg-success',
+  warn: 'bg-warning',
+  info: 'bg-info',
+  bad: 'bg-destructive',
 }
 
 /**

package/src/components/PresenceChips.tsx

@@ -70,7 +70,7 @@ export function PresenceChips({
     >
       {status && <StatusPill status={status} />}
       {shown.length === 0 && status !== 'connecting' && (
-        <span className="text-gray-500" data-testid="presence-empty">
+        <span className="text-muted-foreground" data-testid="presence-empty">
           You're the only one here
         </span>
       )}
@@ -79,7 +79,7 @@ export function PresenceChips({
       ))}
       {overflow > 0 && (
         <span
-          className="rounded-full bg-gray-100 px-2 py-0.5 text-gray-700"
+          className="bg-muted text-foreground rounded-full px-2 py-0.5"
           data-testid="presence-overflow"
         >
           +{overflow}
@@ -91,14 +91,18 @@ export function PresenceChips({
 
 function StatusPill({ status }: { status: CollaborationStatus }) {
   const palette: Record<CollaborationStatus, { dot: string; label: string; text: string }> = {
-    connected: { dot: 'bg-emerald-500', label: 'Live', text: 'text-emerald-700' },
-    connecting: { dot: 'bg-amber-400 animate-pulse', label: 'Connecting', text: 'text-amber-700' },
-    disconnected: { dot: 'bg-gray-300', label: 'Offline', text: 'text-gray-500' },
+    connected: { dot: 'bg-success', label: 'Live', text: 'text-emerald-700' },
+    connecting: { dot: 'bg-amber-400 animate-pulse', label: 'Connecting', text: 'text-warning' },
+    disconnected: {
+      dot: 'bg-muted-foreground/30',
+      label: 'Offline',
+      text: 'text-muted-foreground',
+    },
   }
   const cfg = palette[status]
   return (
     <span
-      className={`inline-flex items-center gap-1 rounded-full bg-gray-50 px-2 py-0.5 ${cfg.text}`}
+      className={`bg-muted inline-flex items-center gap-1 rounded-full px-2 py-0.5 ${cfg.text}`}
       data-testid={`presence-status-${status}`}
     >
       <span className={`h-1.5 w-1.5 rounded-full ${cfg.dot}`} />
@@ -111,7 +115,7 @@ function Chip({ name, color, avatarUrl }: { name: string; color: string; avatarU
   const initials = nameToInitials(name)
   return (
     <span
-      className="inline-flex items-center gap-1 rounded-full bg-white px-1.5 py-0.5 ring-1 ring-gray-200"
+      className="bg-card inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 ring-1 ring-gray-200"
       title={name}
       data-testid="presence-chip"
     >
@@ -131,7 +135,7 @@ function Chip({ name, color, avatarUrl }: { name: string; color: string; avatarU
           {initials}
         </span>
       )}
-      <span className="max-w-[80px] truncate text-gray-700">{name}</span>
+      <span className="text-foreground max-w-[80px] truncate">{name}</span>
     </span>
   )
 }