@actuate-media/cms-admin 0.56.0 → 0.56.2

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: {

package/src/components/ui/Toast.tsx

@@ -11,11 +11,10 @@ interface Toast {
 }
 
 const typeClasses: Record<ToastType, string> = {
-  success:
-    'border-emerald-500 bg-emerald-50 text-emerald-900 dark:bg-emerald-900/20 dark:text-emerald-300',
-  error: 'border-red-500 bg-red-50 text-red-900 dark:bg-red-900/20 dark:text-red-300',
-  warning: 'border-amber-500 bg-amber-50 text-amber-900 dark:bg-amber-900/20 dark:text-amber-300',
-  info: 'border-blue-500 bg-blue-50 text-blue-900 dark:bg-blue-900/20 dark:text-blue-300',
+  success: 'border-success bg-success/10 text-success',
+  error: 'border-destructive bg-destructive/10 text-destructive',
+  warning: 'border-warning bg-warning/10 text-warning',
+  info: 'border-info bg-info/10 text-info',
 }
 
 export function useToast() {

package/src/fields/ComponentBlockField.tsx

@@ -117,7 +117,7 @@ export function ComponentBlockField({
 
   if (!currentSpec) {
     return (
-      <div className="rounded-md border border-[var(--destructive)] bg-red-50 p-3 text-sm text-[var(--destructive)]">
+      <div className="bg-destructive/10 rounded-md border border-[var(--destructive)] p-3 text-sm text-[var(--destructive)]">
         Component block has no components to choose from.
       </div>
     )
@@ -147,7 +147,7 @@ export function ComponentBlockField({
       ) : null}
 
       {errorMessage ? (
-        <div className="rounded-md border border-[var(--destructive)] bg-red-50 px-3 py-2 text-xs text-[var(--destructive)]">
+        <div className="bg-destructive/10 rounded-md border border-[var(--destructive)] px-3 py-2 text-xs text-[var(--destructive)]">
           {errorMessage}
         </div>
       ) : null}

package/src/fields/FieldRenderer.tsx

@@ -62,7 +62,7 @@ export function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
 
   if (!Component) {
     return (
-      <div className="rounded-md border border-[var(--destructive)] bg-red-50 p-3 text-sm text-[var(--destructive)]">
+      <div className="bg-destructive/10 rounded-md border border-[var(--destructive)] p-3 text-sm text-[var(--destructive)]">
         Unknown field type: <code>{field.type}</code>
       </div>
     )

package/src/fields/PropInput.tsx

@@ -259,7 +259,7 @@ function BooleanInput({
         }`}
       >
         <span
-          className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-sm ring-0 transition-transform ${
+          className={`bg-card pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform ${
             boolVal ? 'translate-x-5' : 'translate-x-0'
           }`}
         />

package/src/fields/RelationshipField.tsx

@@ -26,10 +26,10 @@ interface RelatedDoc {
 }
 
 const STATUS_STYLES: Record<string, string> = {
-  PUBLISHED: 'bg-green-100 text-green-800',
-  DRAFT: 'bg-yellow-100 text-yellow-800',
-  ARCHIVED: 'bg-gray-100 text-gray-600',
-  SCHEDULED: 'bg-blue-100 text-blue-800',
+  PUBLISHED: 'bg-success/10 text-success',
+  DRAFT: 'bg-warning/10 text-warning',
+  ARCHIVED: 'bg-muted text-muted-foreground',
+  SCHEDULED: 'bg-info/10 text-info',
 }
 
 function relativeTime(dateStr: string | undefined): string {
@@ -150,7 +150,7 @@ export function RelationshipField({
   function renderOption(opt: RelatedDoc, isSelected: boolean) {
     const status = opt.status ?? (opt.data as any)?.status
     const collection = opt.collection ?? relationTo
-    const statusClass = STATUS_STYLES[status] ?? 'bg-gray-100 text-gray-600'
+    const statusClass = STATUS_STYLES[status] ?? 'bg-muted text-muted-foreground'
 
     return (
       <button

package/src/fields/ToggleField.tsx

@@ -24,7 +24,7 @@ export function ToggleField({ label, value = false, onChange, helpText }: Toggle
         }`}
       >
         <span
-          className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-sm ring-0 transition-transform ${
+          className={`bg-card pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform ${
             value ? 'translate-x-5' : 'translate-x-0'
           }`}
         />

package/src/views/Dashboard.tsx

@@ -795,7 +795,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                       : contentHealth.tone === 'warn'
                         ? 'text-warning'
                         : contentHealth.tone === 'err'
-                          ? 'text-red-600 dark:text-red-400'
+                          ? 'text-destructive dark:text-red-400'
                           : 'text-muted-foreground'
                   }`}
                 >
@@ -810,7 +810,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                       : contentHealth.tone === 'warn'
                         ? 'bg-warning'
                         : contentHealth.tone === 'err'
-                          ? 'bg-red-500'
+                          ? 'bg-destructive'
                           : 'bg-muted-foreground/40'
                   }`}
                   style={{ width: `${Math.max(0, Math.min(100, contentHealth.score))}%` }}
@@ -833,7 +833,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                       <span
                         className={`h-1.5 w-1.5 shrink-0 rounded-full ${
                           iss.tone === 'err'
-                            ? 'bg-red-500'
+                            ? 'bg-destructive'
                             : iss.tone === 'warn'
                               ? 'bg-warning'
                               : 'bg-muted-foreground'
@@ -846,7 +846,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                       <span
                         className={`shrink-0 text-sm font-medium ${
                           iss.tone === 'err'
-                            ? 'text-red-600 dark:text-red-400'
+                            ? 'text-destructive dark:text-red-400'
                             : iss.tone === 'warn'
                               ? 'text-warning'
                               : 'text-muted-foreground'
@@ -1040,7 +1040,7 @@ function DeliveryTile({
       : tone === 'warn'
         ? 'text-warning'
         : tone === 'err'
-          ? 'text-red-600 dark:text-red-400'
+          ? 'text-destructive dark:text-red-400'
           : 'text-muted-foreground'
   return (
     <div className="px-4 py-3.5">

package/src/views/DocumentEdit.tsx

@@ -292,15 +292,15 @@ export function DocumentEdit({
 
   const statusColor =
     docStatus === 'PUBLISHED'
-      ? 'bg-green-100 text-green-800'
+      ? 'bg-success/10 text-success'
       : docStatus === 'SCHEDULED'
-        ? 'bg-blue-100 text-blue-800'
-        : 'bg-yellow-100 text-yellow-800'
+        ? 'bg-info/10 text-info'
+        : 'bg-warning/10 text-warning'
 
   if (loading) {
     return (
       <div className="flex min-h-[300px] items-center justify-center">
-        <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
+        <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
       </div>
     )
   }
@@ -316,7 +316,7 @@ export function DocumentEdit({
             {docStatus}
           </span>
           {documentId && <PresenceIndicator documentId={documentId} />}
-          {isDirty && <span className="text-xs font-medium text-amber-600">Unsaved changes</span>}
+          {isDirty && <span className="text-warning text-xs font-medium">Unsaved changes</span>}
         </div>
         <div className="flex items-center gap-2">
           <button
@@ -362,13 +362,15 @@ export function DocumentEdit({
         <div className="space-y-6">
           {fields.length === 0 ? (
             <div className="flex flex-col items-center justify-center rounded-lg border border-[var(--border)] py-16 text-center">
-              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
-                <AlertTriangle className="h-6 w-6 text-gray-400" />
+              <div className="bg-muted mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+                <AlertTriangle className="text-muted-foreground h-6 w-6" />
               </div>
-              <h3 className="mb-1 text-sm font-medium text-gray-900">
+              <h3 className="text-foreground mb-1 text-sm font-medium">
                 Collection schema not found
               </h3>
-              <p className="text-sm text-gray-500">No fields are defined for this collection.</p>
+              <p className="text-muted-foreground text-sm">
+                No fields are defined for this collection.
+              </p>
             </div>
           ) : (
             <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
@@ -410,14 +412,14 @@ export function DocumentEdit({
                     {!isNew && (
                       <button
                         onClick={() => setShowSchedule(true)}
-                        className="inline-flex w-full items-center justify-center gap-1.5 rounded-md border border-[var(--border)] bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                        className="border-border bg-card text-foreground hover:bg-accent inline-flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium"
                       >
                         <Calendar className="h-4 w-4" />
                         {scheduledAt || scheduledUnpublishAt ? 'Reschedule' : 'Schedule'}
                       </button>
                     )}
                     {!isNew && (scheduledAt || scheduledUnpublishAt) && (
-                      <div className="space-y-1 rounded-md border border-blue-100 bg-blue-50 px-3 py-2 text-xs text-blue-900">
+                      <div className="border-info/30 bg-info/10 text-foreground space-y-1 rounded-md border px-3 py-2 text-xs">
                         {scheduledAt && (
                           <div className="flex items-center gap-1.5">
                             <Calendar className="h-3.5 w-3.5" />