@actuate-media/cms-admin 0.54.0 → 0.56.2

package/src/views/Pages.tsx

@@ -28,14 +28,11 @@ export interface PagesProps {
 }
 
 const COLOR_PALETTE = [
-  { bg: 'bg-blue-100', text: 'text-blue-700' },
-  { bg: 'bg-green-100', text: 'text-green-700' },
-  { bg: 'bg-purple-100', text: 'text-purple-700' },
-  { bg: 'bg-orange-100', text: 'text-orange-700' },
-  { bg: 'bg-pink-100', text: 'text-pink-700' },
-  { bg: 'bg-teal-100', text: 'text-teal-700' },
-  { bg: 'bg-indigo-100', text: 'text-indigo-700' },
-  { bg: 'bg-rose-100', text: 'text-rose-700' },
+  { bg: 'bg-chart-1/15', text: 'text-chart-1' },
+  { bg: 'bg-chart-2/15', text: 'text-chart-2' },
+  { bg: 'bg-chart-3/15', text: 'text-chart-3' },
+  { bg: 'bg-chart-4/15', text: 'text-chart-4' },
+  { bg: 'bg-chart-5/15', text: 'text-chart-5' },
 ]
 
 function hashString(s: string): number {
@@ -70,11 +67,11 @@ function textValue(value: unknown): string {
 }
 
 function SeoScoreBadge({ score }: { score: number }) {
-  const color = score >= 80 ? 'bg-green-500' : score >= 60 ? 'bg-amber-500' : 'bg-red-500'
+  const color = score >= 80 ? 'bg-success' : score >= 60 ? 'bg-warning' : 'bg-destructive'
   return (
     <div className="flex items-center gap-1.5">
       <span className={`h-2.5 w-2.5 rounded-full ${color}`} />
-      <span className="text-xs text-gray-600">{score}</span>
+      <span className="text-muted-foreground text-xs">{score}</span>
     </div>
   )
 }
@@ -229,7 +226,7 @@ export function Pages({ onNavigate }: PagesProps) {
       <button
         type="button"
         onClick={() => setSortConfig(toggleSort(sortConfig, sortKey))}
-        className="flex items-center gap-1 text-xs font-medium text-gray-700 transition-colors hover:text-gray-900"
+        className="text-foreground hover:text-foreground flex items-center gap-1 text-xs font-medium transition-colors"
       >
         {label}
         {active ? (
@@ -239,7 +236,7 @@ export function Pages({ onNavigate }: PagesProps) {
             <ArrowDown className="h-3 w-3" />
           )
         ) : (
-          <ArrowUpDown className="h-3 w-3 text-gray-400" />
+          <ArrowUpDown className="text-muted-foreground h-3 w-3" />
         )}
       </button>
     )
@@ -248,7 +245,7 @@ export function Pages({ onNavigate }: PagesProps) {
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
-        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
+        <Loader2 className="text-primary h-6 w-6 animate-spin" />
       </div>
     )
   }
@@ -256,12 +253,12 @@ export function Pages({ onNavigate }: PagesProps) {
   return (
     <div className="flex h-full flex-col p-3 pr-6 sm:p-4 sm:pr-8">
       {error && (
-        <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
-          <span className="flex-1 text-sm text-red-800">{error}</span>
+        <div className="border-destructive/30 bg-destructive/10 mb-4 flex items-center gap-3 rounded-lg border p-3">
+          <AlertTriangle className="text-destructive h-5 w-5 shrink-0" />
+          <span className="text-destructive flex-1 text-sm">{error}</span>
           <button
             onClick={refetch}
-            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
+            className="border-destructive text-destructive hover:bg-destructive/10 rounded-lg border px-3 py-1 text-sm transition-colors"
           >
             Retry
           </button>
@@ -273,21 +270,21 @@ export function Pages({ onNavigate }: PagesProps) {
           <button
             type="button"
             onClick={() => setSidebarOpen((prev) => !prev)}
-            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
+            className="hover:bg-muted rounded-lg p-1.5 transition-colors"
             title={sidebarOpen ? 'Hide folders' : 'Show folders'}
           >
-            <FolderInput className="h-5 w-5 text-gray-600" />
+            <FolderInput className="text-muted-foreground h-5 w-5" />
           </button>
           <div>
-            <h1 className="text-xl font-medium text-gray-900 sm:text-2xl">Pages</h1>
-            <p className="text-sm text-gray-500">
+            <h1 className="text-foreground text-xl font-medium sm:text-2xl">Pages</h1>
+            <p className="text-muted-foreground text-sm">
               {totalCount} page{totalCount !== 1 ? 's' : ''}
             </p>
           </div>
         </div>
         <button
           onClick={() => onNavigate?.('/pages/new')}
-          className="flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
+          className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm transition-colors"
         >
           <Plus className="h-4 w-4" />
           <span className="hidden sm:inline">New Page</span>
@@ -297,7 +294,7 @@ export function Pages({ onNavigate }: PagesProps) {
 
       <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
         {sidebarOpen && (
-          <div className="flex w-56 shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
+          <div className="border-border bg-card flex w-56 shrink-0 flex-col overflow-hidden rounded-lg border">
             <FolderTree
               scope="pages"
               selected={folderSel}
@@ -313,23 +310,23 @@ export function Pages({ onNavigate }: PagesProps) {
         )}
 
         <div className="flex min-w-0 flex-1 flex-col">
-          <div className="mb-4 rounded-lg border border-gray-200 bg-white">
+          <div className="border-border bg-card mb-4 rounded-lg border">
             <div className="flex flex-col gap-3 p-3">
               <div className="relative">
-                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
                 <input
                   type="text"
                   placeholder="Search pages..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                  className="border-border focus-visible:ring-ring/50 w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
                 />
               </div>
               <div className="flex flex-col gap-2 sm:flex-row">
                 <select
                   value={filterStatus}
                   onChange={(e) => setFilterStatus(e.target.value)}
-                  className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                  className="border-border focus-visible:ring-ring/50 flex-1 rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                 >
                   <option value="all">All Status</option>
                   <option value="published">Published</option>
@@ -338,7 +335,7 @@ export function Pages({ onNavigate }: PagesProps) {
                 <select
                   value={filterTemplate}
                   onChange={(e) => setFilterTemplate(e.target.value)}
-                  className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                  className="border-border focus-visible:ring-ring/50 flex-1 rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                 >
                   <option value="all">All Templates</option>
                   <option value="landing">Landing</option>
@@ -348,7 +345,7 @@ export function Pages({ onNavigate }: PagesProps) {
                 </select>
                 <button
                   type="button"
-                  className="flex items-center justify-center gap-2 rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors hover:bg-gray-50"
+                  className="border-border hover:bg-muted flex items-center justify-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors"
                 >
                   <SlidersHorizontal className="h-4 w-4" />
                   <span className="hidden sm:inline">More Filters</span>
@@ -358,37 +355,37 @@ export function Pages({ onNavigate }: PagesProps) {
           </div>
 
           {selectedPages.length > 0 && (
-            <div className="mb-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
+            <div className="border-info/30 bg-info/10 mb-4 rounded-lg border p-3">
               <div className="flex flex-col justify-between gap-2 sm:flex-row sm:items-center">
-                <span className="text-sm text-blue-900">
+                <span className="text-foreground text-sm">
                   {selectedPages.length} page{selectedPages.length !== 1 ? 's' : ''} selected
                 </span>
                 <div className="flex items-center gap-2">
                   <button
                     type="button"
                     onClick={handleBulkPublish}
-                    className="flex-1 rounded-lg bg-green-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-green-700 sm:flex-none"
+                    className="bg-success text-success-foreground hover:bg-success/90 flex-1 rounded-lg px-3 py-1.5 text-sm transition-colors sm:flex-none"
                   >
                     Publish
                   </button>
                   <button
                     type="button"
                     onClick={handleBulkUnpublish}
-                    className="flex-1 rounded-lg bg-yellow-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-yellow-700 sm:flex-none"
+                    className="bg-warning text-warning-foreground hover:bg-warning/90 flex-1 rounded-lg px-3 py-1.5 text-sm transition-colors sm:flex-none"
                   >
                     Unpublish
                   </button>
                   <button
                     type="button"
                     onClick={handleBulkDelete}
-                    className="flex-1 rounded-lg bg-red-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-red-700 sm:flex-none"
+                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90 flex-1 rounded-lg px-3 py-1.5 text-sm transition-colors sm:flex-none"
                   >
                     Delete
                   </button>
                   <button
                     type="button"
                     onClick={() => setSelectedPages([])}
-                    className="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm transition-colors hover:bg-gray-50 sm:flex-none"
+                    className="border-border bg-card hover:bg-muted flex-1 rounded-lg border px-3 py-1.5 text-sm transition-colors sm:flex-none"
                   >
                     Cancel
                   </button>
@@ -398,8 +395,8 @@ export function Pages({ onNavigate }: PagesProps) {
           )}
 
           {filteredAndSorted.length === 0 && !error ? (
-            <div className="flex flex-1 flex-col items-center justify-center rounded-lg border border-gray-200 bg-white p-8 text-center">
-              <p className="mb-2 text-sm text-gray-500">
+            <div className="border-border bg-card flex flex-1 flex-col items-center justify-center rounded-lg border p-8 text-center">
+              <p className="text-muted-foreground mb-2 text-sm">
                 {folderSel.type === 'smart' && folderSel.smart === 'uncategorized'
                   ? 'No uncategorized pages'
                   : folderSel.type === 'folder'
@@ -408,17 +405,17 @@ export function Pages({ onNavigate }: PagesProps) {
               </p>
               <button
                 onClick={() => onNavigate?.('/pages/new')}
-                className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
+                className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-4 py-2 text-sm transition-colors"
               >
                 Create your first page
               </button>
             </div>
           ) : (
             <>
-              <div className="hidden flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white md:block">
+              <div className="border-border bg-card hidden flex-1 overflow-hidden rounded-lg border md:block">
                 <div className="h-full overflow-x-auto">
                   <table className="w-full">
-                    <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
+                    <thead className="border-border bg-muted sticky top-0 border-b">
                       <tr>
                         <th className="w-8 px-3 py-2 text-left">
                           <input
@@ -428,20 +425,20 @@ export function Pages({ onNavigate }: PagesProps) {
                               filteredAndSorted.length > 0
                             }
                             onChange={(e) => handleSelectAll(e.target.checked)}
-                            className="rounded border-gray-300"
+                            className="border-border rounded"
                           />
                         </th>
                         <th className="w-6 px-1 py-2"></th>
                         <th className="px-3 py-2 text-left">
                           <SortHeader label="Title" sortKey="title" />
                         </th>
-                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">
+                        <th className="text-foreground px-3 py-2 text-left text-xs font-medium">
                           Folder
                         </th>
                         <th className="px-3 py-2 text-left">
                           <SortHeader label="Author" sortKey="author" />
                         </th>
-                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">
+                        <th className="text-foreground px-3 py-2 text-left text-xs font-medium">
                           SEO
                         </th>
                         <th className="px-3 py-2 text-left">
@@ -450,19 +447,19 @@ export function Pages({ onNavigate }: PagesProps) {
                         <th className="px-3 py-2 text-left">
                           <SortHeader label="Date" sortKey="date" />
                         </th>
-                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">
+                        <th className="text-foreground px-3 py-2 text-left text-xs font-medium">
                           Actions
                         </th>
                       </tr>
                     </thead>
-                    <tbody className="divide-y divide-gray-200">
+                    <tbody className="divide-border divide-y">
                       {filteredAndSorted.map((page: any) => {
                         const seoScore = computeSeoScore(page.data)
                         const folderName = page.folder?.name ?? page.folderName
                         return (
                           <tr
                             key={page.id}
-                            className="transition-colors hover:bg-gray-50"
+                            className="hover:bg-muted transition-colors"
                             draggable
                             onDragStart={(e) => handleDragStart(e, page.id)}
                           >
@@ -471,17 +468,17 @@ export function Pages({ onNavigate }: PagesProps) {
                                 type="checkbox"
                                 checked={selectedPages.includes(page.id)}
                                 onChange={() => handleSelectPage(page.id)}
-                                className="rounded border-gray-300"
+                                className="border-border rounded"
                               />
                             </td>
                             <td className="cursor-grab px-1 py-2">
-                              <GripVertical className="h-4 w-4 text-gray-300" />
+                              <GripVertical className="text-muted-foreground h-4 w-4" />
                             </td>
                             <td className="px-3 py-2">
                               <button
                                 type="button"
                                 onClick={() => onNavigate?.(`/pages/${page.id}`)}
-                                className="text-left text-sm font-medium text-gray-900 hover:text-blue-600"
+                                className="text-foreground hover:text-primary text-left text-sm font-medium"
                               >
                                 {page.title}
                               </button>
@@ -490,38 +487,40 @@ export function Pages({ onNavigate }: PagesProps) {
                               {folderName ? (
                                 <FolderBadge name={folderName} />
                               ) : (
-                                <span className="text-xs text-gray-400">—</span>
+                                <span className="text-muted-foreground text-xs">—</span>
                               )}
                             </td>
-                            <td className="px-3 py-2 text-sm text-gray-600">{page.author}</td>
+                            <td className="text-muted-foreground px-3 py-2 text-sm">
+                              {page.author}
+                            </td>
                             <td className="px-3 py-2">
                               <SeoScoreBadge score={seoScore} />
                             </td>
                             <td className="px-3 py-2">
                               <span
-                                className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${page.status === 'Published' || page.status === 'PUBLISHED' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
+                                className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${page.status === 'Published' || page.status === 'PUBLISHED' ? 'bg-success/10 text-success' : 'bg-muted text-foreground'}`}
                               >
                                 {page.status}
                               </span>
                             </td>
-                            <td className="px-3 py-2 text-sm text-gray-600">{page.date}</td>
+                            <td className="text-muted-foreground px-3 py-2 text-sm">{page.date}</td>
                             <td className="px-3 py-2">
                               <div className="flex items-center gap-2">
                                 <button
                                   type="button"
                                   onClick={() => onNavigate?.(`/pages/${page.id}`)}
-                                  className="rounded p-1.5 transition-colors hover:bg-gray-100"
+                                  className="hover:bg-muted rounded p-1.5 transition-colors"
                                   title="Edit"
                                 >
-                                  <Pencil className="h-4 w-4 text-gray-600" />
+                                  <Pencil className="text-muted-foreground h-4 w-4" />
                                 </button>
                                 <button
                                   type="button"
                                   onClick={() => handleDelete(page.id)}
-                                  className="rounded p-1.5 transition-colors hover:bg-gray-100"
+                                  className="hover:bg-muted rounded p-1.5 transition-colors"
                                   title="Delete"
                                 >
-                                  <Trash2 className="h-4 w-4 text-red-600" />
+                                  <Trash2 className="text-destructive h-4 w-4" />
                                 </button>
                               </div>
                             </td>
@@ -533,8 +532,8 @@ export function Pages({ onNavigate }: PagesProps) {
                 </div>
               </div>
 
-              <div className="flex-1 overflow-auto rounded-lg border border-gray-200 bg-white md:hidden">
-                <div className="divide-y divide-gray-200">
+              <div className="border-border bg-card flex-1 overflow-auto rounded-lg border md:hidden">
+                <div className="divide-border divide-y">
                   {filteredAndSorted.map((page: any) => {
                     const seoScore = computeSeoScore(page.data)
                     const folderName = page.folder?.name ?? page.folderName
@@ -550,24 +549,24 @@ export function Pages({ onNavigate }: PagesProps) {
                             type="checkbox"
                             checked={selectedPages.includes(page.id)}
                             onChange={() => handleSelectPage(page.id)}
-                            className="mt-1 rounded border-gray-300"
+                            className="border-border mt-1 rounded"
                           />
                           <div className="min-w-0 flex-1">
                             <button
                               type="button"
                               onClick={() => onNavigate?.(`/pages/${page.id}`)}
-                              className="mb-1 block text-left text-sm font-medium text-gray-900 hover:text-blue-600"
+                              className="text-foreground hover:text-primary mb-1 block text-left text-sm font-medium"
                             >
                               {page.title}
                             </button>
-                            <div className="mb-2 flex flex-wrap items-center gap-2 text-xs text-gray-600">
+                            <div className="text-muted-foreground mb-2 flex flex-wrap items-center gap-2 text-xs">
                               {folderName && <FolderBadge name={folderName} />}
                               <span>{page.author}</span>
                               <span>&middot;</span>
                               <span>{page.date}</span>
                               <SeoScoreBadge score={seoScore} />
                               <span
-                                className={`rounded-full px-2 py-0.5 text-xs font-medium ${page.status === 'Published' || page.status === 'PUBLISHED' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
+                                className={`rounded-full px-2 py-0.5 text-xs font-medium ${page.status === 'Published' || page.status === 'PUBLISHED' ? 'bg-success/10 text-success' : 'bg-muted text-foreground'}`}
                               >
                                 {page.status}
                               </span>
@@ -576,9 +575,9 @@ export function Pages({ onNavigate }: PagesProps) {
                           <button
                             type="button"
                             onClick={() => handleDelete(page.id)}
-                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
+                            className="hover:bg-muted rounded p-1.5 transition-colors"
                           >
-                            <Trash2 className="h-4 w-4 text-red-600" />
+                            <Trash2 className="text-destructive h-4 w-4" />
                           </button>
                         </div>
                       </div>

package/src/views/ResetPassword.tsx

@@ -9,6 +9,9 @@ export interface ResetPasswordProps {
   token: string | null
 }
 
+const fieldClass =
+  'w-full rounded-lg border border-border bg-input-background px-3 py-2.5 text-sm text-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none'
+
 export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
   const [password, setPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')
@@ -19,29 +22,29 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
 
   if (!token) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+      <div className="bg-muted flex min-h-screen items-center justify-center px-4">
         <div className="w-full max-w-md">
           <div className="mb-8 text-center">
-            <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-red-100">
-              <XCircle className="h-7 w-7 text-red-600" />
+            <div className="bg-destructive/10 mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl">
+              <XCircle className="text-destructive h-7 w-7" />
             </div>
-            <h1 className="text-2xl font-medium text-gray-900">Invalid Reset Link</h1>
-            <p className="mt-2 text-gray-600">
+            <h1 className="text-foreground text-2xl font-medium">Invalid Reset Link</h1>
+            <p className="text-muted-foreground mt-2">
               This password reset link is invalid or has expired.
             </p>
           </div>
-          <div className="space-y-4 rounded-xl border border-gray-200 bg-white p-6 text-center shadow-sm">
+          <div className="border-border bg-card space-y-4 rounded-xl border p-6 text-center shadow-sm">
             <button
               type="button"
               onClick={() => onNavigate('/forgot-password')}
-              className="w-full rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700"
+              className="bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-lg py-2.5 font-medium transition-colors"
             >
               Request New Reset Link
             </button>
             <button
               type="button"
               onClick={() => onNavigate('/login')}
-              className="w-full text-sm text-gray-600 transition-colors hover:text-gray-800"
+              className="text-muted-foreground hover:text-foreground w-full text-sm transition-colors"
             >
               Back to Sign In
             </button>
@@ -81,34 +84,34 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+    <div className="bg-muted flex min-h-screen items-center justify-center px-4">
       <div className="w-full max-w-md">
         <div className="mb-8 text-center">
-          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-blue-600">
-            <Shield className="h-7 w-7 text-white" />
+          <div className="bg-primary mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl">
+            <Shield className="text-primary-foreground h-7 w-7" />
           </div>
-          <h1 className="text-2xl font-medium text-gray-900">
+          <h1 className="text-foreground text-2xl font-medium">
             {success ? 'Password Reset' : 'Choose New Password'}
           </h1>
-          <p className="mt-2 text-gray-600">
+          <p className="text-muted-foreground mt-2">
             {success ? 'Your password has been updated' : 'Enter your new password below'}
           </p>
         </div>
 
-        <div className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+        <div className="border-border bg-card space-y-5 rounded-xl border p-6 shadow-sm">
           {success ? (
             <div className="space-y-4 text-center">
-              <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-                <CheckCircle2 className="h-6 w-6 text-green-600" />
+              <div className="bg-success/10 mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+                <CheckCircle2 className="text-success h-6 w-6" />
               </div>
-              <p className="text-sm text-gray-600">
+              <p className="text-muted-foreground text-sm">
                 Your password has been successfully reset. All existing sessions have been revoked
                 for security.
               </p>
               <button
                 type="button"
                 onClick={() => onNavigate('/login')}
-                className="w-full rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700"
+                className="bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-lg py-2.5 font-medium transition-colors"
               >
                 Sign In with New Password
               </button>
@@ -116,16 +119,16 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
           ) : (
             <form onSubmit={handleSubmit} className="space-y-5">
               {error && (
-                <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-                  <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
-                  <p className="text-sm text-red-800">{error}</p>
+                <div className="border-destructive/30 bg-destructive/10 flex items-start gap-3 rounded-lg border p-3">
+                  <AlertTriangle className="text-destructive mt-0.5 h-5 w-5 shrink-0" />
+                  <p className="text-destructive text-sm">{error}</p>
                 </div>
               )}
 
               <div>
                 <label
                   htmlFor="reset-password"
-                  className="mb-1.5 block text-sm font-medium text-gray-700"
+                  className="text-foreground mb-1.5 block text-sm font-medium"
                 >
                   New Password
                 </label>
@@ -136,7 +139,7 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     placeholder="Enter new password"
-                    className="w-full rounded-lg border border-gray-300 px-3 py-2.5 pr-10 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                    className={`${fieldClass} pr-10`}
                     required
                     autoFocus
                     autoComplete="new-password"
@@ -145,14 +148,14 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
                   <button
                     type="button"
                     onClick={() => setShowPassword(!showPassword)}
-                    className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                    className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2"
                     tabIndex={-1}
                   >
                     {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                   </button>
                 </div>
                 {password && !meetsLength && (
-                  <p className="mt-1 text-xs text-red-600">
+                  <p className="text-destructive mt-1 text-xs">
                     Password must be at least 8 characters
                   </p>
                 )}
@@ -161,7 +164,7 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
               <div>
                 <label
                   htmlFor="reset-confirm"
-                  className="mb-1.5 block text-sm font-medium text-gray-700"
+                  className="text-foreground mb-1.5 block text-sm font-medium"
                 >
                   Confirm Password
                 </label>
@@ -171,19 +174,19 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
                   value={confirmPassword}
                   onChange={(e) => setConfirmPassword(e.target.value)}
                   placeholder="Confirm new password"
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                  className={fieldClass}
                   required
                   autoComplete="new-password"
                 />
                 {confirmPassword && !passwordsMatch && (
-                  <p className="mt-1 text-xs text-red-600">Passwords do not match</p>
+                  <p className="text-destructive mt-1 text-xs">Passwords do not match</p>
                 )}
               </div>
 
               <button
                 type="submit"
                 disabled={!canSubmit}
-                className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+                className="bg-primary text-primary-foreground hover:bg-primary/90 flex w-full items-center justify-center gap-2 rounded-lg py-2.5 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
               >
                 {submitting ? (
                   <>

package/src/views/Settings.tsx

@@ -155,7 +155,7 @@ export function Settings({
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
-        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
+        <Loader2 className="text-primary h-6 w-6 animate-spin" />
       </div>
     )
   }
@@ -347,7 +347,7 @@ export function Settings({
             type="button"
             onClick={handleSave}
             disabled={saving}
-            className="rounded-lg bg-blue-600 px-6 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+            className="bg-primary hover:bg-primary/90 rounded-lg px-6 py-2 text-sm text-white transition-colors disabled:opacity-50"
           >
             {saving ? 'Saving...' : 'Save Changes'}
           </button>