@actuate-media/cms-admin 0.54.0 → 0.56.2

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>

package/src/components/SEOPerformance.tsx

@@ -23,8 +23,8 @@ interface SEOSummary {
 }
 
 function ScoreBadge({ score }: { score: number }) {
-  const color = score >= 80 ? 'text-green-600' : score >= 60 ? 'text-amber-500' : 'text-red-500'
-  const bg = score >= 80 ? 'bg-green-50' : score >= 60 ? 'bg-amber-50' : 'bg-red-50'
+  const color = score >= 80 ? 'text-success' : score >= 60 ? 'text-warning' : 'text-destructive'
+  const bg = score >= 80 ? 'bg-success/10' : score >= 60 ? 'bg-warning/10' : 'bg-destructive/10'
   return (
     <span
       className={`inline-flex h-9 w-9 items-center justify-center rounded-full text-sm font-medium ${color} ${bg}`}
@@ -53,38 +53,40 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
   const visible = topContent.slice(page * perPage, (page + 1) * perPage)
 
   return (
-    <div className="rounded-lg border border-gray-200 bg-white">
-      <div className="flex items-center justify-between border-b border-gray-200 p-4">
+    <div className="border-border bg-card rounded-lg border">
+      <div className="border-border flex items-center justify-between border-b p-4">
         <div className="flex items-center gap-2">
-          <Search className="h-4 w-4 text-gray-500" />
-          <h2 className="text-sm font-medium text-gray-900">SEO Performance</h2>
+          <Search className="text-muted-foreground h-4 w-4" />
+          <h2 className="text-foreground text-sm font-medium">SEO Performance</h2>
         </div>
         {totalIssues > 0 && (
-          <span className="text-xs text-gray-500">
+          <span className="text-muted-foreground text-xs">
             {totalIssues} issue{totalIssues !== 1 ? 's' : ''} found
           </span>
         )}
       </div>
 
-      <div className="grid grid-cols-1 divide-y divide-gray-200 lg:grid-cols-12 lg:divide-x lg:divide-y-0">
+      <div className="divide-border grid grid-cols-1 divide-y lg:grid-cols-12 lg:divide-x lg:divide-y-0">
         <div className="p-4 lg:col-span-7">
-          <h3 className="mb-3 text-sm font-medium text-gray-700">Top Performing Content</h3>
+          <h3 className="text-foreground mb-3 text-sm font-medium">Top Performing Content</h3>
           <div className="space-y-2">
             {visible.map((item) => (
               <div key={item.id} className="flex items-center justify-between py-2">
                 <div className="mr-3 min-w-0 flex-1">
-                  <p className="truncate text-sm font-medium text-gray-900">{item.title}</p>
-                  <p className="text-xs text-gray-500 capitalize">{item.collection}</p>
+                  <p className="text-foreground truncate text-sm font-medium">{item.title}</p>
+                  <p className="text-muted-foreground text-xs capitalize">{item.collection}</p>
                 </div>
                 <ScoreBadge score={item.score} />
               </div>
             ))}
             {visible.length === 0 && (
-              <p className="py-4 text-center text-sm text-gray-400">No published content yet</p>
+              <p className="text-muted-foreground py-4 text-center text-sm">
+                No published content yet
+              </p>
             )}
           </div>
           {topContent.length > perPage && (
-            <div className="mt-3 flex items-center justify-between border-t border-gray-100 pt-3 text-xs text-gray-500">
+            <div className="text-muted-foreground mt-3 flex items-center justify-between border-t border-gray-100 pt-3 text-xs">
               <span>
                 Showing {page * perPage + 1}-{Math.min((page + 1) * perPage, topContent.length)} of{' '}
                 {topContent.length}
@@ -93,7 +95,7 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
                 <button
                   onClick={() => setPage(Math.max(0, page - 1))}
                   disabled={page === 0}
-                  className="rounded p-1 hover:bg-gray-100 disabled:opacity-30"
+                  className="hover:bg-accent rounded p-1 disabled:opacity-30"
                 >
                   <ChevronLeft className="h-3.5 w-3.5" />
                 </button>
@@ -103,7 +105,7 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
                 <button
                   onClick={() => setPage(Math.min(totalPages - 1, page + 1))}
                   disabled={page >= totalPages - 1}
-                  className="rounded p-1 hover:bg-gray-100 disabled:opacity-30"
+                  className="hover:bg-accent rounded p-1 disabled:opacity-30"
                 >
                   <ChevronRight className="h-3.5 w-3.5" />
                 </button>
@@ -113,38 +115,38 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
         </div>
 
         <div className="p-4 lg:col-span-5">
-          <h3 className="mb-3 text-sm font-medium text-gray-700">SEO Issues</h3>
+          <h3 className="text-foreground mb-3 text-sm font-medium">SEO Issues</h3>
           <div className="space-y-3">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <FileWarning className="h-4 w-4 text-red-400" />
-                <span className="text-sm text-gray-700">Missing meta descriptions</span>
+                <span className="text-foreground text-sm">Missing meta descriptions</span>
               </div>
-              <span className="text-sm font-medium text-gray-900">
+              <span className="text-foreground text-sm font-medium">
                 {issues.missingMetaDescriptions}
               </span>
             </div>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <LinkIcon className="h-4 w-4 text-red-400" />
-                <span className="text-sm text-gray-700">Broken internal links</span>
+                <span className="text-foreground text-sm">Broken internal links</span>
               </div>
-              <span className="text-sm font-medium text-gray-900">
+              <span className="text-foreground text-sm font-medium">
                 {issues.brokenInternalLinks}
               </span>
             </div>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <ImageOff className="h-4 w-4 text-red-400" />
-                <span className="text-sm text-gray-700">Missing alt text</span>
+                <span className="text-foreground text-sm">Missing alt text</span>
               </div>
-              <span className="text-sm font-medium text-gray-900">{issues.missingAltText}</span>
+              <span className="text-foreground text-sm font-medium">{issues.missingAltText}</span>
             </div>
           </div>
           {totalIssues > 0 && (
             <button
               onClick={() => onNavigate?.('/seo')}
-              className="mt-4 text-sm font-medium text-blue-600 hover:text-blue-700"
+              className="text-primary hover:text-primary/80 mt-4 text-sm font-medium"
             >
               View All Issues
             </button>

package/src/components/TipTapEditor.tsx

@@ -233,8 +233,8 @@ function ToolbarButton({
       title={title}
       className={`rounded p-1.5 transition-colors ${
         isActive
-          ? 'bg-blue-100 text-blue-700'
-          : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+          ? 'bg-info/10 text-info'
+          : 'text-muted-foreground hover:bg-accent hover:text-foreground'
       } ${disabled ? 'cursor-not-allowed opacity-40' : ''}`}
     >
       {children}
@@ -243,7 +243,7 @@ function ToolbarButton({
 }
 
 function Divider() {
-  return <div className="mx-1 h-6 w-px bg-gray-200" />
+  return <div className="bg-muted mx-1 h-6 w-px" />
 }
 
 function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPicker: () => void }) {
@@ -265,7 +265,7 @@ function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPic
   const isInTable = editor.isActive('table')
 
   return (
-    <div className="sticky top-0 z-10 flex flex-wrap items-center gap-0.5 border-b border-gray-200 bg-gray-50 p-2">
+    <div className="border-border bg-muted sticky top-0 z-10 flex flex-wrap items-center gap-0.5 border-b p-2">
       {/* Group 1: Text formatting */}
       <ToolbarButton
         onClick={() => editor.chain().focus().toggleBold().run()}
@@ -544,7 +544,7 @@ export function TipTapEditor({
       UnderlineExt,
       Link.configure({
         openOnClick: false,
-        HTMLAttributes: { class: 'text-blue-600 underline' },
+        HTMLAttributes: { class: 'text-primary underline' },
       }),
       Image.configure({
         inline: true,
@@ -656,10 +656,10 @@ export function TipTapEditor({
 
   const editorPane = (
     <div
-      className={`flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white ${className ?? ''}`}
+      className={`border-border bg-card flex-1 overflow-hidden rounded-lg border ${className ?? ''}`}
     >
       {collaboration && awareness && (
-        <div className="flex items-center justify-between gap-2 border-b border-gray-100 bg-white px-2 py-1.5">
+        <div className="bg-card flex items-center justify-between gap-2 border-b border-gray-100 px-2 py-1.5">
           <PresenceChips awareness={awareness} status={collabStatus} />
           <OfflineStatus connection={collabStatus} offline={offlineStatus} />
         </div>

package/src/components/pages/tag-badges.tsx

@@ -14,12 +14,12 @@ import { paletteFor } from '../posts/badges.js'
  */
 
 const DOT_COLOR: Record<string, string> = {
-  purple: 'bg-violet-500',
-  green: 'bg-emerald-500',
-  orange: 'bg-amber-500',
-  red: 'bg-red-500',
-  blue: 'bg-blue-500',
-  pink: 'bg-pink-500',
+  purple: 'bg-brand',
+  green: 'bg-success',
+  orange: 'bg-warning',
+  red: 'bg-destructive',
+  blue: 'bg-info',
+  pink: 'bg-chart-4',
   gray: 'bg-muted-foreground',
 }
 

package/src/components/posts/badges.tsx

@@ -5,53 +5,45 @@ import type { PostStatus } from '../../lib/posts-service.js'
 
 /**
  * Shared status / type / SEO indicators for the Posts admin area.
- *
- * Colors are restricted to the theme tokens already used elsewhere in
- * the admin (`success`, `warning`, `destructive`, `primary`, `muted`)
- * plus a small named-color palette (`purple`, `green`, `orange`, ...)
- * that maps to fixed Tailwind utilities. This keeps the badges working
- * in both light and dark mode and avoids leaking `bg-[#...]` arbitrary
- * values into components.
+ * Colors use semantic theme tokens only.
  */
 
-// ─── Named color palette ─────────────────────────────────────────────
-
 const PALETTE: Record<string, { bg: string; text: string; ring: string; border: string }> = {
   purple: {
-    bg: 'bg-violet-50 dark:bg-violet-950/40',
-    text: 'text-violet-700 dark:text-violet-300',
-    ring: 'ring-violet-200 dark:ring-violet-900',
-    border: 'border-violet-500',
+    bg: 'bg-brand/10',
+    text: 'text-brand',
+    ring: 'ring-brand/20',
+    border: 'border-brand',
   },
   green: {
-    bg: 'bg-emerald-50 dark:bg-emerald-950/40',
-    text: 'text-emerald-700 dark:text-emerald-300',
-    ring: 'ring-emerald-200 dark:ring-emerald-900',
-    border: 'border-emerald-500',
+    bg: 'bg-success/10',
+    text: 'text-success',
+    ring: 'ring-success/20',
+    border: 'border-success',
   },
   orange: {
-    bg: 'bg-amber-50 dark:bg-amber-950/40',
-    text: 'text-amber-700 dark:text-amber-300',
-    ring: 'ring-amber-200 dark:ring-amber-900',
-    border: 'border-amber-500',
+    bg: 'bg-warning/10',
+    text: 'text-warning',
+    ring: 'ring-warning/20',
+    border: 'border-warning',
   },
   red: {
-    bg: 'bg-red-50 dark:bg-red-950/40',
-    text: 'text-red-700 dark:text-red-300',
-    ring: 'ring-red-200 dark:ring-red-900',
-    border: 'border-red-500',
+    bg: 'bg-destructive/10',
+    text: 'text-destructive',
+    ring: 'ring-destructive/20',
+    border: 'border-destructive',
   },
   blue: {
-    bg: 'bg-blue-50 dark:bg-blue-950/40',
-    text: 'text-blue-700 dark:text-blue-300',
-    ring: 'ring-blue-200 dark:ring-blue-900',
-    border: 'border-blue-500',
+    bg: 'bg-info/10',
+    text: 'text-info',
+    ring: 'ring-info/20',
+    border: 'border-info',
   },
   pink: {
-    bg: 'bg-pink-50 dark:bg-pink-950/40',
-    text: 'text-pink-700 dark:text-pink-300',
-    ring: 'ring-pink-200 dark:ring-pink-900',
-    border: 'border-pink-500',
+    bg: 'bg-chart-4/15',
+    text: 'text-chart-4',
+    ring: 'ring-chart-4/20',
+    border: 'border-chart-4',
   },
   gray: {
     bg: 'bg-muted',
@@ -66,8 +58,6 @@ export function paletteFor(color: string | null | undefined) {
   return PALETTE[color] ?? PALETTE.gray!
 }
 
-// ─── PostStatusBadge ─────────────────────────────────────────────────
-
 const STATUS_LABEL: Record<PostStatus, string> = {
   PUBLISHED: 'Published',
   DRAFT: 'Draft',
@@ -104,8 +94,6 @@ export function PostStatusBadge({ status }: { status: PostStatus }) {
   )
 }
 
-// ─── PostTypeBadge ───────────────────────────────────────────────────
-
 export function PostTypeBadge({
   label,
   color,
@@ -127,12 +115,6 @@ export function PostTypeBadge({
   return <span className={className}>{label}</span>
 }
 
-// ─── SeoScoreIndicator ───────────────────────────────────────────────
-
-/**
- * Returns the palette key for an SEO score so callers can match the
- * colored dot. 80+ green, 60–79 orange, 1–59 red, missing = gray.
- */
 export function seoScorePalette(score: number | null): string {
   if (score === null || Number.isNaN(score)) return 'gray'
   if (score >= 80) return 'green'
@@ -158,10 +140,10 @@ export function SeoScoreIndicator({ score }: { score: number | null }) {
         aria-hidden
         className={`h-2 w-2 rounded-full ${
           colorKey === 'green'
-            ? 'bg-emerald-500'
+            ? 'bg-success'
             : colorKey === 'orange'
-              ? 'bg-amber-500'
-              : 'bg-red-500'
+              ? 'bg-warning'
+              : 'bg-destructive'
         }`}
       />
       <span className="tabular-nums">{score}</span>

package/src/components/ui/Badge.tsx

@@ -4,11 +4,11 @@ import { cv, type VariantProps } from '../../lib/cv.js'
 const badge = cv('inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', {
   variants: {
     tone: {
-      neutral: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
-      success: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400',
-      warning: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
-      danger: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
-      info: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+      neutral: 'bg-muted text-muted-foreground',
+      success: 'bg-success/10 text-success',
+      warning: 'bg-warning/10 text-warning',
+      danger: 'bg-destructive/10 text-destructive',
+      info: 'bg-info/10 text-info',
       primary: 'bg-[var(--primary)]/15 text-[var(--primary)] dark:bg-[var(--primary)]/25',
     },
     size: {