@actuate-media/cms-admin 0.69.0 → 0.69.1

package/src/views/Pages/PagesListView.tsx

@@ -412,8 +412,8 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
           the design's `.page-hdr` / `.hdr-r` layout. */}
       <div className="flex flex-wrap items-start justify-between gap-3">
         <div className="flex flex-col gap-1">
-          <h1 className="text-foreground">Pages</h1>
-          <p className="text-muted-foreground text-sm">
+          <h1 className="text-[var(--txt)]">Pages</h1>
+          <p className="text-sm text-[var(--sub)]">
             {treeMode
               ? `${grandTotal} page${grandTotal === 1 ? '' : 's'} total`
               : `${grandTotal} page${grandTotal === 1 ? '' : 's'} · organized by tags`}
@@ -422,7 +422,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
         <button
           type="button"
           onClick={() => onNavigate('/pages/new')}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
+          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
         >
           <Plus className="h-3.5 w-3.5" aria-hidden />
           New page
@@ -433,7 +433,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
       <div className="flex flex-wrap items-center gap-2">
         <div className="relative max-w-sm flex-1">
           <Search
-            className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+            className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--sub)]"
             aria-hidden
           />
           <input
@@ -442,7 +442,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
             onChange={(e) => setSearch(e.target.value)}
             aria-label="Search pages"
             placeholder="Search pages…"
-            className="border-border bg-card text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-primary/30 w-full rounded-lg border py-2 pr-3 pl-9 text-sm shadow-sm focus:ring-2 focus:outline-none"
+            className="focus:border-primary focus:ring-primary/30 w-full rounded-lg border border-[var(--bdr)] bg-[var(--card)] py-2 pr-3 pl-9 text-sm text-[var(--txt)] shadow-sm placeholder:text-[var(--sub)] focus:ring-2 focus:outline-none"
           />
         </div>
 
@@ -479,7 +479,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
 
         <ViewModeToggle mode={viewMode} onChange={changeViewMode} />
 
-        <span className="text-muted-foreground ml-auto text-sm tabular-nums">
+        <span className="ml-auto text-sm text-[var(--sub)] tabular-nums">
           {treeMode
             ? treeFiltersActive
               ? `${treeRows.length} result${treeRows.length === 1 ? '' : 's'}`
@@ -492,7 +492,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
           with the page hierarchy) */}
       {!treeMode && (
         <div className="flex flex-wrap items-center gap-2">
-          <span className="text-muted-foreground text-[10px] font-medium tracking-wider uppercase">
+          <span className="text-[10px] font-medium tracking-wider text-[var(--sub)] uppercase">
             Tags
           </span>
           {tags.map((t) => (
@@ -509,7 +509,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
             <button
               type="button"
               onClick={() => setSelectedTags(new Set())}
-              className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs"
+              className="inline-flex items-center gap-1 text-xs text-[var(--sub)] hover:text-[var(--txt)]"
             >
               <X className="h-3 w-3" aria-hidden />
               Clear tags
@@ -543,7 +543,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
       )}
 
       {/* Table card */}
-      <div className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
+      <div className="overflow-hidden rounded-xl border border-[var(--bdr)] bg-[var(--card)] shadow-sm">
         {treeMode ? (
           <PagesTreeTable
             rows={treeRows}
@@ -579,15 +579,15 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   <col style={{ width: '80px' }} />
                   <col style={{ width: '110px' }} />
                 </colgroup>
-                <thead className="border-border bg-muted/40 border-b">
-                  <tr className="text-muted-foreground text-xs">
+                <thead className="bg-muted/40 border-b border-[var(--bdr)]">
+                  <tr className="text-xs text-[var(--sub)]">
                     <th scope="col" className="px-3 py-2.5 text-left">
                       <input
                         type="checkbox"
                         aria-label="Select all pages on this page"
                         checked={allOnPageSelected}
                         onChange={(e) => toggleAllOnPage(e.target.checked)}
-                        className="border-border accent-primary rounded"
+                        className="accent-primary rounded border-[var(--bdr)]"
                       />
                     </th>
                     <th
@@ -668,7 +668,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   {!loading && error && (
                     <tr>
                       <td colSpan={8} className="px-3 py-12 text-center">
-                        <div className="text-foreground mb-2 text-sm font-medium">{error}</div>
+                        <div className="mb-2 text-sm font-medium text-[var(--txt)]">{error}</div>
                         <button
                           onClick={() => setRefreshToken((t) => t + 1)}
                           className="text-primary text-sm hover:underline"
@@ -779,8 +779,8 @@ function SortHeader({
     <button
       type="button"
       onClick={() => onSort(field)}
-      className={`hover:text-foreground inline-flex items-center gap-1 text-xs font-medium tracking-wider uppercase transition-colors ${
-        active ? 'text-foreground' : 'text-muted-foreground'
+      className={`inline-flex items-center gap-1 text-xs font-medium tracking-wider uppercase transition-colors hover:text-[var(--txt)] ${
+        active ? 'text-[var(--txt)]' : 'text-[var(--sub)]'
       }`}
     >
       <span>{label}</span>
@@ -849,12 +849,12 @@ function FilterSelect({
   options: { value: string; label: string }[]
 }) {
   return (
-    <label className="text-foreground inline-flex items-center gap-1.5 text-sm">
-      <span className="text-muted-foreground">{label}:</span>
+    <label className="inline-flex items-center gap-1.5 text-sm text-[var(--txt)]">
+      <span className="text-[var(--sub)]">{label}:</span>
       <select
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="border-border bg-card text-foreground focus:border-primary focus:ring-primary/30 rounded-lg border px-2.5 py-1.5 text-sm shadow-sm focus:ring-2 focus:outline-none"
+        className="focus:border-primary focus:ring-primary/30 rounded-lg border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1.5 text-sm text-[var(--txt)] shadow-sm focus:ring-2 focus:outline-none"
       >
         {options.map((o) => (
           <option key={o.value} value={o.value}>
@@ -882,12 +882,12 @@ function GroupBlock({
   return (
     <>
       {showHeader && (
-        <tr className="bg-muted/30 border-border border-b">
+        <tr className="bg-muted/30 border-b border-[var(--bdr)]">
           <td colSpan={8} className="px-3 py-2">
-            <span className="text-foreground inline-flex items-center gap-2 text-xs font-medium tracking-wider uppercase">
+            <span className="inline-flex items-center gap-2 text-xs font-medium tracking-wider text-[var(--txt)] uppercase">
               {color && <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(color)}`} />}
               {label}
-              <span className="text-muted-foreground tabular-nums">{count}</span>
+              <span className="text-[var(--sub)] tabular-nums">{count}</span>
             </span>
           </td>
         </tr>
@@ -934,19 +934,19 @@ function BulkActionBar({
 }) {
   return (
     <div className="border-primary/30 bg-primary/5 flex flex-wrap items-center gap-2 rounded-lg border px-4 py-2">
-      <span className="text-foreground text-sm font-medium">{count} selected</span>
+      <span className="text-sm font-medium text-[var(--txt)]">{count} selected</span>
       <div className="bg-border h-4 w-px" aria-hidden />
       <button
         type="button"
         onClick={onPublish}
-        className="text-foreground hover:bg-accent rounded-md px-2 py-1 text-sm transition-colors"
+        className="rounded-md px-2 py-1 text-sm text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)]"
       >
         Publish
       </button>
       <button
         type="button"
         onClick={onDraft}
-        className="text-foreground hover:bg-accent rounded-md px-2 py-1 text-sm transition-colors"
+        className="rounded-md px-2 py-1 text-sm text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)]"
       >
         Move to draft
       </button>
@@ -965,7 +965,7 @@ function BulkActionBar({
       <button
         type="button"
         onClick={onClear}
-        className="text-muted-foreground hover:text-foreground ml-auto inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors"
+        className="ml-auto inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-[var(--sub)] transition-colors hover:text-[var(--txt)]"
       >
         <X className="h-3.5 w-3.5" aria-hidden />
         Clear
@@ -988,7 +988,7 @@ function TagMenu({
       <DropdownMenu.Trigger asChild>
         <button
           type="button"
-          className="text-foreground hover:bg-accent inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors"
+          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)]"
         >
           {label}
           <ChevronDown className="h-3 w-3" aria-hidden />
@@ -998,16 +998,16 @@ function TagMenu({
         <DropdownMenu.Content
           align="start"
           sideOffset={4}
-          className="border-border bg-popover z-50 max-h-64 w-44 overflow-auto rounded-lg border p-1 shadow-md"
+          className="bg-popover z-50 max-h-64 w-44 overflow-auto rounded-lg border border-[var(--bdr)] p-1 shadow-md"
         >
           {tags.length === 0 ? (
-            <div className="text-muted-foreground px-2 py-1.5 text-xs">No tags yet</div>
+            <div className="px-2 py-1.5 text-xs text-[var(--sub)]">No tags yet</div>
           ) : (
             tags.map((t) => (
               <DropdownMenu.Item
                 key={t.slug}
                 onSelect={() => onPick(t.slug)}
-                className="text-foreground focus:bg-accent flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none"
+                className="focus:bg-accent flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-[var(--txt)] outline-none"
               >
                 <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(t.color ?? 'gray')}`} />
                 {t.name}
@@ -1039,8 +1039,8 @@ function PageRow({
 }) {
   return (
     <tr
-      className={`border-border hover:bg-muted/30 group border-b transition-colors last:border-b-0 ${
-        selected ? 'bg-primary/5' : ''
+      className={`group border-b border-[var(--bdr)] transition-colors last:border-b-0 hover:bg-[var(--acc-l)] ${
+        selected ? 'bg-[var(--acc-l)]' : ''
       }`}
     >
       <td className="px-3 py-3" onClick={(e) => e.stopPropagation()}>
@@ -1049,17 +1049,17 @@ function PageRow({
           aria-label={`Select "${page.title}"`}
           checked={selected}
           onChange={onSelect}
-          className="border-border accent-primary rounded"
+          className="accent-primary rounded border-[var(--bdr)]"
         />
       </td>
       <td className="px-3 py-3">
         <button type="button" onClick={onOpen} className="flex w-full items-center gap-3 text-left">
           <span aria-hidden className="bg-muted block h-9 w-9 shrink-0 rounded-md" />
           <span className="min-w-0">
-            <span className="text-foreground group-hover:text-primary block truncate text-sm font-medium">
+            <span className="block truncate text-sm font-medium text-[var(--txt)] group-hover:text-[var(--acc)]">
               {page.title}
             </span>
-            <span className="text-muted-foreground block truncate text-xs">{page.path}</span>
+            <span className="block truncate text-xs text-[var(--sub)]">{page.path}</span>
           </span>
         </button>
       </td>
@@ -1070,17 +1070,17 @@ function PageRow({
         <div className="flex items-center gap-2">
           <span
             aria-hidden
-            className="bg-muted text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-medium"
+            className="bg-muted inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-medium text-[var(--sub)]"
           >
             {page.authorInitials}
           </span>
-          <span className="text-foreground truncate text-sm">{page.authorName}</span>
+          <span className="truncate text-sm text-[var(--txt)]">{page.authorName}</span>
         </div>
       </td>
       <td className="px-3 py-3">
         <PostStatusBadge status={page.status} />
       </td>
-      <td className="text-muted-foreground px-3 py-3 text-sm tabular-nums">
+      <td className="px-3 py-3 text-sm text-[var(--sub)] tabular-nums">
         {formatDateShort(page.lastModified)}
       </td>
       <td className="px-3 py-3">
@@ -1117,7 +1117,7 @@ function LoadingRows() {
   return (
     <>
       {Array.from({ length: 8 }).map((_, i) => (
-        <tr key={i} className="border-border border-b last:border-b-0">
+        <tr key={i} className="border-b border-[var(--bdr)] last:border-b-0">
           {Array.from({ length: 8 }).map((__, j) => (
             <td key={j} className="px-3 py-3">
               <div className="bg-muted h-4 w-full animate-pulse rounded" />
@@ -1141,10 +1141,10 @@ function EmptyRow({
   return (
     <tr>
       <td colSpan={8} className="px-3 py-16 text-center">
-        <div className="text-foreground mb-2 text-sm font-medium">
+        <div className="mb-2 text-sm font-medium text-[var(--txt)]">
           {filtersActive ? 'No pages match your filters' : 'No pages yet'}
         </div>
-        <div className="text-muted-foreground mb-4 text-sm">
+        <div className="mb-4 text-sm text-[var(--sub)]">
           {filtersActive
             ? 'Try clearing the search, tags, or status filter above.'
             : 'Create your first page to get started.'}
@@ -1184,8 +1184,8 @@ function PaginationFooter({
   const start = total === 0 ? 0 : (page - 1) * pageSize + 1
   const end = Math.min(total, page * pageSize)
   return (
-    <div className="border-border flex items-center justify-between border-t px-4 py-3 text-sm">
-      <span className="text-muted-foreground tabular-nums">
+    <div className="flex items-center justify-between border-t border-[var(--bdr)] px-4 py-3 text-sm">
+      <span className="text-[var(--sub)] tabular-nums">
         {start}–{end} of {total} page{total === 1 ? '' : 's'}
       </span>
       <nav className="flex items-center gap-1" aria-label="Pages pagination">
@@ -1194,7 +1194,7 @@ function PaginationFooter({
           onClick={() => onPage(Math.max(1, page - 1))}
           disabled={page === 1}
           aria-label="Previous page"
-          className="border-border bg-background text-foreground hover:bg-accent inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-[var(--bdr)] bg-[var(--bg)] text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)] disabled:cursor-not-allowed disabled:opacity-40"
         >
           <ChevronLeft className="h-4 w-4" aria-hidden />
         </button>
@@ -1203,7 +1203,7 @@ function PaginationFooter({
             <span
               key={`gap-${idx}`}
               aria-hidden
-              className="text-muted-foreground inline-flex h-8 w-8 items-center justify-center text-sm"
+              className="inline-flex h-8 w-8 items-center justify-center text-sm text-[var(--sub)]"
             >
               …
             </span>
@@ -1216,7 +1216,7 @@ function PaginationFooter({
               className={`inline-flex h-8 w-8 items-center justify-center rounded-md text-sm tabular-nums transition-colors ${
                 p === page
                   ? 'bg-primary text-primary-foreground'
-                  : 'border-border bg-background text-foreground hover:bg-accent border'
+                  : 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--txt)] hover:bg-[var(--acc-l)]'
               }`}
             >
               {p}
@@ -1228,7 +1228,7 @@ function PaginationFooter({
           onClick={() => onPage(Math.min(totalPages, page + 1))}
           disabled={page === totalPages}
           aria-label="Next page"
-          className="border-border bg-background text-foreground hover:bg-accent inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-[var(--bdr)] bg-[var(--bg)] text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)] disabled:cursor-not-allowed disabled:opacity-40"
         >
           <ChevronRight className="h-4 w-4" aria-hidden />
         </button>

package/src/views/Pages/PagesTreeTable.tsx

@@ -82,7 +82,7 @@ export function PagesTreeTable({
                 aria-label="Select all visible pages"
                 checked={allSelected}
                 onChange={(e) => onToggleAll(e.target.checked)}
-                className="border-border accent-primary rounded"
+                className="accent-primary rounded border-[var(--bdr)]"
               />
             </th>
             <th scope="col" className={`${TH_CLASS} min-w-[280px]`}>
@@ -113,8 +113,11 @@ export function PagesTreeTable({
           {!loading && error && (
             <tr>
               <td colSpan={8} className="px-3 py-12 text-center">
-                <div className="text-foreground mb-2 text-sm font-medium">{error}</div>
-                <button onClick={onRetry} className="text-primary text-sm hover:underline">
+                <div className="mb-2 text-sm font-medium text-[var(--txt)]">{error}</div>
+                <button
+                  onClick={onRetry}
+                  className="text-primary rounded-sm text-sm hover:underline focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+                >
                   Try again
                 </button>
               </td>
@@ -123,10 +126,10 @@ export function PagesTreeTable({
           {!loading && !error && rows.length === 0 && (
             <tr>
               <td colSpan={8} className="px-3 py-16 text-center">
-                <div className="text-foreground mb-2 text-sm font-medium">
+                <div className="mb-2 text-sm font-medium text-[var(--txt)]">
                   {flattened ? 'No pages match your filters' : 'No pages yet'}
                 </div>
-                <div className="text-muted-foreground mb-4 text-sm">
+                <div className="mb-4 text-sm text-[var(--sub)]">
                   {flattened
                     ? 'Try clearing the search or status filter above.'
                     : 'Create your first page to get started.'}
@@ -135,7 +138,7 @@ export function PagesTreeTable({
                   <button
                     type="button"
                     onClick={onClearFilters}
-                    className="text-primary text-sm hover:underline"
+                    className="text-primary rounded-sm text-sm hover:underline focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
                   >
                     Clear filters
                   </button>
@@ -143,7 +146,7 @@ export function PagesTreeTable({
                   <button
                     type="button"
                     onClick={onNewPage}
-                    className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors"
+                    className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
                   >
                     <Plus className="h-3.5 w-3.5" aria-hidden />
                     New page
@@ -208,7 +211,7 @@ function TreeRow({
           aria-label={`Select "${page.title}"`}
           checked={isSelected}
           onChange={onToggleSelect}
-          className="border-border accent-primary rounded"
+          className="accent-primary rounded border-[var(--bdr)]"
         />
       </td>
       <td className="px-3 align-middle">

package/src/views/ScriptTags.tsx

@@ -139,7 +139,7 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
             <span className="text-destructive flex-1 text-sm">{error}</span>
             <button
               onClick={refetch}
-              className="border-destructive/40 text-destructive hover:bg-destructive/15 rounded-lg border px-3 py-1 text-sm transition-colors"
+              className="border-destructive/40 text-destructive hover:bg-destructive/15 rounded-lg border px-3 py-1 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
             >
               Retry
             </button>
@@ -148,8 +148,8 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
 
         <div className="mb-4 flex items-center justify-between">
           <div>
-            <h1 className="text-foreground mb-1">Script Tags</h1>
-            <p className="text-muted-foreground text-sm">
+            <h1 className="mb-1 text-[var(--txt)]">Script Tags</h1>
+            <p className="text-sm text-[var(--sub)]">
               Manage tracking codes, analytics, and custom scripts injected into your site
             </p>
             {tags.length > 0 && (
@@ -171,7 +171,7 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
           <button
             type="button"
             onClick={() => setSelection({ mode: 'new' })}
-            className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+            className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
           >
             <Plus className="h-4 w-4" />
             New Script
@@ -182,45 +182,35 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
       <SplitPaneLayout>
         <SplitPaneList className="p-3 pt-0 pr-6 sm:p-4 sm:pt-0 sm:pr-8">
           {tags.length === 0 && !error ? (
-            <div className="border-border bg-card rounded-lg border p-12 text-center">
-              <Code2 className="text-muted-foreground mx-auto mb-3 h-10 w-10" />
-              <h3 className="text-foreground text-sm font-medium">No script tags yet</h3>
-              <p className="text-muted-foreground mt-1 text-sm">
+            <div className="rounded-lg border border-[var(--bdr)] bg-[var(--card)] p-12 text-center">
+              <Code2 className="mx-auto mb-3 h-10 w-10 text-[var(--sub)]" />
+              <h3 className="text-sm font-medium text-[var(--txt)]">No script tags yet</h3>
+              <p className="mt-1 text-sm text-[var(--sub)]">
                 Add tracking codes like Google Analytics, Tag Manager, or Facebook Pixel.
               </p>
               <button
                 type="button"
                 onClick={() => setSelection({ mode: 'new' })}
-                className="bg-primary text-primary-foreground hover:bg-primary/90 mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+                className="bg-primary text-primary-foreground hover:bg-primary/90 mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
               >
                 <Plus className="h-4 w-4" />
                 Add Your First Script
               </button>
             </div>
           ) : (
-            <div className="border-border bg-card overflow-hidden rounded-lg border">
+            <div className="overflow-hidden rounded-lg border border-[var(--bdr)] bg-[var(--card)]">
               <table className="w-full text-sm" aria-label="Script tags">
                 <thead>
-                  <tr className="border-border bg-muted border-b">
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
-                      Script
-                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
-                      Location
-                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-center font-medium">
+                  <tr className="bg-muted border-b border-[var(--bdr)]">
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Script</th>
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Location</th>
+                    <th className="px-4 py-3 text-center font-medium text-[var(--sub)]">
                       Priority
                     </th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">Scope</th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
-                      Consent
-                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-center font-medium">
-                      Active
-                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
-                      Updated
-                    </th>
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Scope</th>
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Consent</th>
+                    <th className="px-4 py-3 text-center font-medium text-[var(--sub)]">Active</th>
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Updated</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -229,8 +219,8 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
                     return (
                       <tr
                         key={tag.id}
-                        className={`border-border cursor-pointer border-b transition-colors last:border-0 ${
-                          isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-muted'
+                        className={`cursor-pointer border-b border-[var(--bdr)] transition-colors last:border-0 ${
+                          isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-[var(--acc-l)]'
                         }`}
                         onClick={() => toggleRow(tag)}
                       >
@@ -242,29 +232,29 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
                               toggleRow(tag)
                             }}
                             aria-expanded={isSelected}
-                            className="text-foreground hover:text-primary text-left font-medium"
+                            className="text-left font-medium text-[var(--txt)] hover:text-[var(--acc)]"
                           >
                             {tag.name}
                           </button>
                         </td>
                         <td className="px-4 py-[11px]">
                           <span
-                            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-muted text-foreground'}`}
+                            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-muted text-[var(--txt)]'}`}
                           >
                             {PLACEMENT_LABELS[tag.placement] ?? tag.placement}
                           </span>
                         </td>
-                        <td className="text-muted-foreground px-4 py-[11px] text-center font-mono">
+                        <td className="px-4 py-[11px] text-center font-mono text-[var(--sub)]">
                           {tag.priority}
                         </td>
-                        <td className="text-muted-foreground px-4 py-[11px]">{scopeLabel(tag)}</td>
+                        <td className="px-4 py-[11px] text-[var(--sub)]">{scopeLabel(tag)}</td>
                         <td className="px-4 py-[11px]">
                           {tag.consentCategory && tag.consentCategory !== 'none' ? (
                             <span className="rounded-[5px] border border-[var(--bdr)] bg-[var(--bg)] px-1.5 py-0.5 text-[11px] text-[var(--sub)]">
                               {CONSENT_LABELS[tag.consentCategory] ?? tag.consentCategory}
                             </span>
                           ) : (
-                            <span className="text-muted-foreground text-xs">—</span>
+                            <span className="text-xs text-[var(--sub)]">—</span>
                           )}
                         </td>
                         <td
@@ -278,7 +268,7 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
                             aria-label={`${tag.enabled ? 'Disable' : 'Enable'} ${tag.name}`}
                           />
                         </td>
-                        <td className="text-muted-foreground px-4 py-[11px] text-xs">
+                        <td className="px-4 py-[11px] text-xs text-[var(--sub)]">
                           {formatUpdated(tag.updatedAt)}
                         </td>
                       </tr>

package/src/views/seo/ContentTab.tsx

@@ -32,7 +32,7 @@ const FILTERS: { id: ContentSeoFilter; label: string }[] = [
 ]
 
 const inputCls =
-  'w-full rounded-md border border-border bg-input-background py-2 pl-9 pr-3 text-base text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+  'w-full rounded-md border border-[var(--bdr)] bg-input-background py-2 pl-9 pr-3 text-base text-[var(--txt)] placeholder:text-[var(--sub)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]'
 
 type Selection = { type: string; id: string } | null
 
@@ -64,7 +64,7 @@ export function ContentTab({
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="relative max-w-sm flex-1">
           <Search
-            className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+            className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--sub)]"
             aria-hidden
           />
           <input
@@ -82,10 +82,10 @@ export function ContentTab({
               type="button"
               aria-pressed={filter === f.id}
               onClick={() => setFilter(f.id)}
-              className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+              className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none ${
                 filter === f.id
                   ? 'bg-primary text-primary-foreground'
-                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                  : 'text-[var(--sub)] hover:bg-[var(--acc-l)] hover:text-[var(--txt)]'
               }`}
             >
               {f.label}
@@ -118,14 +118,14 @@ export function ContentTab({
               <div className="overflow-x-auto">
                 <table className="w-full text-sm" aria-label="Content SEO">
                   <thead>
-                    <tr className="text-muted-foreground border-border border-b text-left">
+                    <tr className="border-b border-[var(--bdr)] text-left text-[var(--sub)]">
                       <th className="py-2 pr-4 font-medium">Title</th>
                       <th className="py-2 pr-4 font-medium">Type</th>
                       <th className="py-2 pr-4 font-medium">Meta</th>
                       <th className="py-2 text-right font-medium">Score</th>
                     </tr>
                   </thead>
-                  <tbody className="divide-border divide-y">
+                  <tbody className="divide-y divide-[var(--bdr)]">
                     {rows.map((r) => {
                       const isSelected =
                         selection?.type === r.entityType && selection.id === r.entityId
@@ -133,7 +133,7 @@ export function ContentTab({
                         <tr
                           key={`${r.entityType}-${r.entityId}`}
                           className={`cursor-pointer transition-colors ${
-                            isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-accent/40'
+                            isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-[var(--acc-l)]'
                           }`}
                           onClick={() => toggleRow(r.entityType, r.entityId)}
                         >
@@ -147,12 +147,12 @@ export function ContentTab({
                               aria-expanded={isSelected}
                               className="text-left"
                             >
-                              <span className="text-foreground block font-medium">{r.title}</span>
-                              <span className="text-muted-foreground block truncate">{r.url}</span>
+                              <span className="block font-medium text-[var(--txt)]">{r.title}</span>
+                              <span className="block truncate text-[var(--sub)]">{r.url}</span>
                             </button>
                           </td>
                           <td className="py-2.5 pr-4 capitalize">
-                            <span className="text-muted-foreground">{r.entityType}</span>
+                            <span className="text-[var(--sub)]">{r.entityType}</span>
                           </td>
                           <td className="py-2.5 pr-4">
                             <span className="flex flex-wrap gap-1.5">