@actuate-media/cms-admin 0.56.0 → 0.56.2

package/src/views/page-editor/sections/RelatedPostsSection.tsx

@@ -32,19 +32,19 @@ export function RelatedPostsSection({
   return (
     <div className="mx-auto max-w-5xl px-6">
       {heading && (
-        <h2 className="mb-6 text-2xl font-semibold tracking-tight text-zinc-900">{heading}</h2>
+        <h2 className="text-foreground mb-6 text-2xl font-semibold tracking-tight">{heading}</h2>
       )}
       <div className={`grid grid-cols-1 gap-4 ${cols}`}>
         {cards.map((post, i) => (
           <div
             key={i}
-            className="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm"
+            className="border-border bg-card overflow-hidden rounded-xl border shadow-sm"
           >
-            <div className="aspect-[16/9] bg-zinc-100" aria-hidden />
+            <div className="bg-muted aspect-[16/9]" aria-hidden />
             <div className="p-4">
-              <p className="text-base font-medium text-zinc-900">{post.title}</p>
+              <p className="text-foreground text-base font-medium">{post.title}</p>
               {post.excerpt && (
-                <p className="mt-1 line-clamp-2 text-sm text-zinc-500">{post.excerpt}</p>
+                <p className="text-muted-foreground mt-1 line-clamp-2 text-sm">{post.excerpt}</p>
               )}
             </div>
           </div>

package/src/views/page-editor/sections/SectionRenderer.tsx

@@ -165,12 +165,12 @@ export function SectionRenderer({
       aria-label={editable ? `${section.name} section` : undefined}
     >
       {editable && selected && (
-        <span className="pointer-events-none absolute top-0 left-0 z-10 rounded-br-md bg-violet-600 px-2 py-0.5 text-xs font-medium text-white">
+        <span className="bg-brand pointer-events-none absolute top-0 left-0 z-10 rounded-br-md px-2 py-0.5 text-xs font-medium text-white">
           {section.name}
         </span>
       )}
       {editable && hidden && (
-        <span className="pointer-events-none absolute top-0 right-0 z-10 rounded-bl-md bg-zinc-700 px-2 py-0.5 text-xs font-medium text-white">
+        <span className="bg-foreground pointer-events-none absolute top-0 right-0 z-10 rounded-bl-md px-2 py-0.5 text-xs font-medium text-white">
           Hidden
         </span>
       )}

package/src/views/page-editor/sections/parts.tsx

@@ -67,12 +67,12 @@ export function backgroundClass(settings: SectionSettings): string {
     return 'bg-gradient-to-br from-violet-600 to-violet-700 text-white'
   }
   if (settings.backgroundType === 'solid' && settings.backgroundColor === 'purple') {
-    return 'bg-violet-600 text-white'
+    return 'bg-brand text-white'
   }
   if (settings.backgroundType === 'solid' && settings.backgroundColor === 'muted') {
-    return 'bg-zinc-50 text-zinc-900'
+    return 'bg-muted text-foreground'
   }
-  return 'bg-white text-zinc-900'
+  return 'bg-card text-foreground'
 }
 
 /**
@@ -94,10 +94,10 @@ export function PreviewButton({
     'inline-flex items-center justify-center rounded-lg px-5 py-2.5 text-sm font-medium transition-colors'
   const toneClass =
     tone === 'onDark'
-      ? 'bg-white text-violet-700 hover:bg-violet-50'
+      ? 'bg-card text-brand hover:bg-brand/10'
       : tone === 'ghost'
-        ? 'border border-zinc-300 text-zinc-700 hover:bg-zinc-50'
-        : 'bg-violet-600 text-white hover:bg-violet-700'
+        ? 'border border-border text-foreground hover:bg-muted'
+        : 'bg-brand text-white hover:bg-brand'
   // Editor preview: links are inert (preventDefault) so clicking content
   // selects the section instead of navigating away.
   return (

package/src/views/post-editor/PostEditorCanvas.tsx

@@ -81,7 +81,7 @@ export function PostEditorCanvas({
       >
         <div
           ref={surfaceRef}
-          className="border-border origin-top overflow-hidden rounded-xl border bg-white shadow-sm"
+          className="border-border bg-card origin-top overflow-hidden rounded-xl border shadow-sm"
           style={{ width: vp.width, transform: `scale(${scale})`, transformOrigin: 'top left' }}
         >
           <PostHeader config={header} context={context} />
@@ -115,10 +115,10 @@ function EmptyBody({ onAddSection }: { onAddSection: () => void }) {
   // which carries a guaranteed-contrast foreground in both modes.
   return (
     <div className="flex flex-col items-center justify-center gap-3 border-t border-zinc-100 px-6 py-16 text-center">
-      <span className="flex h-12 w-12 items-center justify-center rounded-full bg-zinc-100">
-        <FileText className="h-5 w-5 text-zinc-400" aria-hidden />
+      <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-full">
+        <FileText className="text-muted-foreground h-5 w-5" aria-hidden />
       </span>
-      <p className="text-sm text-zinc-500">
+      <p className="text-muted-foreground text-sm">
         The header is set by the template. Add body sections to build out this post.
       </p>
       <button

package/src/views/post-editor/PostHeader.tsx

@@ -31,10 +31,10 @@ export function PostHeader({ config, context }: PostHeaderProps) {
     <div
       className={`mt-4 flex flex-wrap gap-x-3 gap-y-1 text-sm ${
         config.layout === 'centered' ? 'justify-center' : ''
-      } ${overlay ? 'text-white/80' : 'text-zinc-500'}`}
+      } ${overlay ? 'text-white/80' : 'text-muted-foreground'}`}
     >
       {config.showCategory && context.category && (
-        <span className="font-medium text-violet-500">{context.category}</span>
+        <span className="text-brand font-medium">{context.category}</span>
       )}
       {config.showAuthor && <span>{context.author?.name || 'Author name'}</span>}
       {date && <span>{date}</span>}
@@ -61,13 +61,13 @@ export function PostHeader({ config, context }: PostHeaderProps) {
   }
 
   return (
-    <header className="bg-white px-6 pt-12 pb-2">
+    <header className="bg-card px-6 pt-12 pb-2">
       <div
         className={`flex max-w-3xl flex-col ${align} ${config.layout === 'centered' ? 'mx-auto' : ''}`}
       >
-        <h1 className="text-3xl font-medium tracking-tight text-zinc-900 sm:text-4xl">{title}</h1>
+        <h1 className="text-foreground text-3xl font-medium tracking-tight sm:text-4xl">{title}</h1>
         {config.showExcerpt && context.excerpt && (
-          <p className="mt-3 max-w-2xl text-lg text-zinc-600">{context.excerpt}</p>
+          <p className="text-muted-foreground mt-3 max-w-2xl text-lg">{context.excerpt}</p>
         )}
         {meta}
       </div>

package/src/views/post-editor/PostHeaderPanel.tsx

@@ -92,7 +92,7 @@ export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHead
                   }`}
                 >
                   <span
-                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    className={`bg-card inline-block h-4 w-4 transform rounded-full transition-transform ${
                       value ? 'translate-x-4' : 'translate-x-0.5'
                     }`}
                   />

package/src/views/post-editor/PostPreview.tsx

@@ -114,7 +114,7 @@ export function PostPreview({ postType, documentId, session, onNavigate }: PostP
         </button>
       </div>
 
-      <div className="flex-1 overflow-auto bg-white">
+      <div className="bg-card flex-1 overflow-auto">
         <PostHeader config={header} context={context} />
         {visible.map((section) => (
           <SectionRenderer key={section.id} section={section} context={context} />

package/src/views/profile/AccountSecurity.tsx

@@ -294,7 +294,7 @@ export function AccountSecurity() {
           <ol className="text-foreground list-decimal space-y-4 pl-5 text-sm">
             <li>
               <p className="font-medium">Scan this QR code with your authenticator app.</p>
-              <div className="border-border mt-2 inline-flex rounded-lg border bg-white p-3">
+              <div className="border-border bg-card mt-2 inline-flex rounded-lg border p-3">
                 <QRCodeSVG
                   value={mfa.enrollment.uri}
                   size={160}

package/src/views/settings/components.tsx

@@ -188,7 +188,7 @@ export function SettingsToggleRow({
         }`}
       >
         <span
-          className={`absolute top-0.5 block h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${
+          className={`bg-card absolute top-0.5 block h-5 w-5 rounded-full shadow-sm transition-transform ${
             checked ? 'translate-x-[22px]' : 'translate-x-0.5'
           }`}
         />