@actuate-media/cms-admin 0.56.0 → 0.56.2

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>
   )
 }

package/src/components/SEOConfigPanel.tsx

@@ -192,7 +192,7 @@ export function SEOConfigPanel() {
 
   if (loading) {
     return (
-      <div className="flex items-center gap-2 py-8 text-sm text-gray-600">
+      <div className="text-muted-foreground flex items-center gap-2 py-8 text-sm">
         <Loader2 className="h-4 w-4 animate-spin" /> Loading SEO defaults…
       </div>
     )
@@ -200,12 +200,12 @@ export function SEOConfigPanel() {
 
   if (error) {
     return (
-      <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700">
+      <div className="border-destructive/30 bg-destructive/10 text-destructive rounded-lg border p-4 text-sm">
         <div className="mb-2 font-medium">Failed to load SEO config</div>
         <div className="font-mono text-xs">{error}</div>
         <button
           onClick={() => void load()}
-          className="mt-3 inline-flex items-center gap-1.5 rounded-md border border-red-300 bg-white px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100"
+          className="border-destructive bg-card text-destructive hover:bg-destructive/10 mt-3 inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium"
         >
           <RefreshCw className="h-3.5 w-3.5" /> Retry
         </button>
@@ -217,21 +217,23 @@ export function SEOConfigPanel() {
     <div className="space-y-6">
       <div className="flex items-start justify-between gap-4">
         <div>
-          <p className="text-sm text-gray-600">
+          <p className="text-muted-foreground text-sm">
             Edit the SEO defaults that flow into{' '}
-            <code className="rounded bg-gray-100 px-1 py-0.5 text-[11px]">/sitemap.xml</code>,{' '}
-            <code className="rounded bg-gray-100 px-1 py-0.5 text-[11px]">/robots.txt</code>,{' '}
-            <code className="rounded bg-gray-100 px-1 py-0.5 text-[11px]">/og.png</code>, and the{' '}
-            <code className="rounded bg-gray-100 px-1 py-0.5 text-[11px]">/resolve</code> meta +
+            <code className="bg-muted rounded px-1 py-0.5 text-[11px]">/sitemap.xml</code>,{' '}
+            <code className="bg-muted rounded px-1 py-0.5 text-[11px]">/robots.txt</code>,{' '}
+            <code className="bg-muted rounded px-1 py-0.5 text-[11px]">/og.png</code>, and the{' '}
+            <code className="bg-muted rounded px-1 py-0.5 text-[11px]">/resolve</code> meta +
             JSON-LD response. Empty fields fall back to{' '}
-            <code className="rounded bg-gray-100 px-1 py-0.5 text-[11px]">actuate.config.ts</code>.
+            <code className="bg-muted rounded px-1 py-0.5 text-[11px]">actuate.config.ts</code>.
           </p>
-          {updatedAt && <p className="mt-1 text-xs text-gray-500">Last saved: {updatedAt}</p>}
+          {updatedAt && (
+            <p className="text-muted-foreground mt-1 text-xs">Last saved: {updatedAt}</p>
+          )}
         </div>
         <button
           onClick={handleSave}
           disabled={saving}
-          className="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-blue-700 disabled:opacity-50"
+          className="bg-primary hover:bg-primary/90 inline-flex shrink-0 items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-white shadow-sm disabled:opacity-50"
         >
           {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
           Save SEO defaults
@@ -239,10 +241,10 @@ export function SEOConfigPanel() {
       </div>
 
       {/* Site-wide section */}
-      <section className="rounded-lg border border-gray-200 bg-white">
-        <header className="flex items-center gap-2 border-b border-gray-200 px-4 py-3">
-          <Globe className="h-4 w-4 text-blue-600" />
-          <h3 className="text-sm font-medium text-gray-900">Site-wide defaults</h3>
+      <section className="border-border bg-card rounded-lg border">
+        <header className="border-border flex items-center gap-2 border-b px-4 py-3">
+          <Globe className="text-primary h-4 w-4" />
+          <h3 className="text-foreground text-sm font-medium">Site-wide defaults</h3>
         </header>
         <div className="grid grid-cols-1 gap-4 p-4 md:grid-cols-2">
           <Field
@@ -330,11 +332,11 @@ export function SEOConfigPanel() {
       </section>
 
       {/* Per-collection section */}
-      <section className="rounded-lg border border-gray-200 bg-white">
-        <header className="flex items-center gap-2 border-b border-gray-200 px-4 py-3">
-          <FileText className="h-4 w-4 text-blue-600" />
-          <h3 className="text-sm font-medium text-gray-900">Per-collection defaults</h3>
-          <span className="text-xs text-gray-500">
+      <section className="border-border bg-card rounded-lg border">
+        <header className="border-border flex items-center gap-2 border-b px-4 py-3">
+          <FileText className="text-primary h-4 w-4" />
+          <h3 className="text-foreground text-sm font-medium">Per-collection defaults</h3>
+          <span className="text-muted-foreground text-xs">
             — shown placeholders are the static defaults
           </span>
         </header>
@@ -346,14 +348,14 @@ export function SEOConfigPanel() {
               <div key={col.slug} className="p-4">
                 <div className="mb-3 flex items-baseline justify-between gap-4">
                   <div>
-                    <h4 className="text-sm font-medium text-gray-900">{col.label}</h4>
-                    <p className="text-xs text-gray-500">
-                      <code className="rounded bg-gray-100 px-1 py-0.5">{col.slug}</code>
+                    <h4 className="text-foreground text-sm font-medium">{col.label}</h4>
+                    <p className="text-muted-foreground text-xs">
+                      <code className="bg-muted rounded px-1 py-0.5">{col.slug}</code>
                       {col.urlPrefix !== undefined && (
                         <>
                           {' '}
                           prefix:{' '}
-                          <code className="rounded bg-gray-100 px-1 py-0.5">/{col.urlPrefix}</code>
+                          <code className="bg-muted rounded px-1 py-0.5">/{col.urlPrefix}</code>
                         </>
                       )}{' '}
                       — {col.type}
@@ -414,7 +416,7 @@ export function SEOConfigPanel() {
             )
           })}
           {data?.collections.length === 0 && (
-            <div className="p-4 text-sm text-gray-500">
+            <div className="text-muted-foreground p-4 text-sm">
               No collections configured in <code>actuate.config.ts</code>.
             </div>
           )}
@@ -425,7 +427,7 @@ export function SEOConfigPanel() {
         <button
           onClick={handleSave}
           disabled={saving}
-          className="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 disabled:opacity-50"
+          className="bg-primary hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium text-white shadow-sm disabled:opacity-50"
         >
           {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
           Save SEO defaults
@@ -465,15 +467,15 @@ function Field({
 }) {
   return (
     <div>
-      <label className="mb-1 block text-xs font-medium text-gray-700">{label}</label>
+      <label className="text-foreground mb-1 block text-xs font-medium">{label}</label>
       <input
         type="text"
         value={value}
         placeholder={placeholder}
         onChange={(e) => onChange(e.target.value)}
-        className="w-full rounded-md border border-gray-300 px-2.5 py-1.5 text-sm text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+        className="border-border text-foreground focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-md border px-2.5 py-1.5 text-sm placeholder-gray-400 focus:ring-1 focus:outline-none"
       />
-      {hint && <p className="mt-1 text-[11px] text-gray-500">{hint}</p>}
+      {hint && <p className="text-muted-foreground mt-1 text-[11px]">{hint}</p>}
     </div>
   )
 }
@@ -499,7 +501,7 @@ function NumberField({
 }) {
   return (
     <div>
-      <label className="mb-1 block text-xs font-medium text-gray-700">{label}</label>
+      <label className="text-foreground mb-1 block text-xs font-medium">{label}</label>
       <input
         type="number"
         value={value ?? ''}
@@ -513,9 +515,9 @@ function NumberField({
           const n = Number(raw)
           if (Number.isFinite(n)) onChange(n)
         }}
-        className="w-full rounded-md border border-gray-300 px-2.5 py-1.5 text-sm text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+        className="border-border text-foreground focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-md border px-2.5 py-1.5 text-sm placeholder-gray-400 focus:ring-1 focus:outline-none"
       />
-      {hint && <p className="mt-1 text-[11px] text-gray-500">{hint}</p>}
+      {hint && <p className="text-muted-foreground mt-1 text-[11px]">{hint}</p>}
     </div>
   )
 }
@@ -537,11 +539,11 @@ function Select({
 }) {
   return (
     <div>
-      <label className="mb-1 block text-xs font-medium text-gray-700">{label}</label>
+      <label className="text-foreground mb-1 block text-xs font-medium">{label}</label>
       <select
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="w-full rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+        className="border-border bg-card text-foreground focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-1 focus:outline-none"
       >
         {options.map((opt) => (
           <option key={opt} value={opt}>
@@ -549,7 +551,7 @@ function Select({
           </option>
         ))}
       </select>
-      {hint && <p className="mt-1 text-[11px] text-gray-500">{hint}</p>}
+      {hint && <p className="text-muted-foreground mt-1 text-[11px]">{hint}</p>}
     </div>
   )
 }
@@ -566,16 +568,16 @@ function Toggle({
   hint?: string
 }) {
   return (
-    <label className="flex cursor-pointer items-center gap-2 text-sm text-gray-700">
+    <label className="text-foreground flex cursor-pointer items-center gap-2 text-sm">
       <input
         type="checkbox"
         checked={checked}
         onChange={(e) => onChange(e.target.checked)}
-        className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+        className="border-border text-primary focus-visible:ring-ring/50 h-4 w-4 rounded"
       />
       <span>
         {label}
-        {hint && <span className="ml-1 text-[11px] text-gray-500">— {hint}</span>}
+        {hint && <span className="text-muted-foreground ml-1 text-[11px]">— {hint}</span>}
       </span>
     </label>
   )

package/src/components/SEOPanel.tsx

@@ -387,9 +387,9 @@ function computeOverallScore(checks: SEOCheck[]): number {
 }
 
 function StatusDot({ status }: { status: 'good' | 'ok' | 'bad' }) {
-  if (status === 'good') return <CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />
-  if (status === 'ok') return <AlertCircle className="h-4 w-4 shrink-0 text-amber-500" />
-  return <XCircle className="h-4 w-4 shrink-0 text-red-500" />
+  if (status === 'good') return <CheckCircle2 className="text-success h-4 w-4 shrink-0" />
+  if (status === 'ok') return <AlertCircle className="text-warning h-4 w-4 shrink-0" />
+  return <XCircle className="text-destructive h-4 w-4 shrink-0" />
 }
 
 function ScoreRing({ score }: { score: number }) {
@@ -486,7 +486,7 @@ function ToggleSwitch({
         className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors ${checked ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'}`}
       >
         <span
-          className={`pointer-events-none mt-0.5 block h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${checked ? 'translate-x-[22px]' : 'translate-x-0.5'}`}
+          className={`bg-card pointer-events-none mt-0.5 block h-5 w-5 rounded-full shadow-sm transition-transform ${checked ? 'translate-x-[22px]' : 'translate-x-0.5'}`}
         />
       </button>
     </div>
@@ -616,10 +616,10 @@ export function SEOPanel({
         : 'Very difficult'
   const fleschColor =
     readability.fleschScore >= 60
-      ? 'text-green-500'
+      ? 'text-success'
       : readability.fleschScore >= 30
-        ? 'text-amber-500'
-        : 'text-red-500'
+        ? 'text-warning'
+        : 'text-destructive'
 
   return (
     <div className="rounded-lg border border-[var(--border)] bg-[var(--card)]">
@@ -643,13 +643,13 @@ export function SEOPanel({
         <ScoreRing score={score} />
         <div className="space-y-0.5 text-xs text-[var(--muted-foreground)]">
           <div className="flex items-center gap-1.5">
-            <CheckCircle2 className="h-3 w-3 text-green-500" /> {goodCount} passed
+            <CheckCircle2 className="text-success h-3 w-3" /> {goodCount} passed
           </div>
           <div className="flex items-center gap-1.5">
-            <AlertCircle className="h-3 w-3 text-amber-500" /> {okCount} improvements
+            <AlertCircle className="text-warning h-3 w-3" /> {okCount} improvements
           </div>
           <div className="flex items-center gap-1.5">
-            <XCircle className="h-3 w-3 text-red-500" /> {badCount} issues
+            <XCircle className="text-destructive h-3 w-3" /> {badCount} issues
           </div>
         </div>
       </div>
@@ -723,8 +723,8 @@ export function SEOPanel({
             <span
               className={
                 readability.passiveEstimate > 15
-                  ? 'font-medium text-amber-500'
-                  : 'font-medium text-green-500'
+                  ? 'text-warning font-medium'
+                  : 'text-success font-medium'
               }
             >
               {readability.passiveEstimate}%
@@ -849,10 +849,10 @@ export function SEOPanel({
           onToggle={toggleSection}
         >
           <div className="rounded-lg border border-[var(--border)] bg-[var(--background)] p-3">
-            <div className="line-clamp-1 cursor-pointer text-sm text-blue-600 hover:underline">
+            <div className="text-primary line-clamp-1 cursor-pointer text-sm hover:underline">
               {metaTitle || title || 'Page Title'}
             </div>
-            <div className="mt-1 truncate text-xs text-green-700">
+            <div className="text-success mt-1 truncate text-xs">
               {siteUrl}/{slug}
             </div>
             <div className="mt-1 line-clamp-2 text-sm text-[var(--muted-foreground)]">
@@ -971,7 +971,7 @@ export function SEOPanel({
               onChange={(v) => update({ isCornerstone: v })}
             />
             {seoData.isCornerstone && (
-              <div className="flex items-center gap-1.5 rounded-md bg-amber-50 px-2.5 py-1.5 text-xs text-amber-600">
+              <div className="text-warning bg-warning/10 flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs">
                 <Star className="h-3.5 w-3.5" />
                 Cornerstone content is held to stricter SEO standards
               </div>