@actuate-media/cms-admin 0.56.0 → 0.56.2

package/src/views/Login.tsx

@@ -65,22 +65,22 @@ const OAUTH_LABELS: Record<string, string> = {
 
 const OAUTH_COLORS: Record<string, { border: string; bg: string; text: string; hover: string }> = {
   google: {
-    border: 'border-gray-300',
-    bg: 'bg-white',
-    text: 'text-gray-700',
-    hover: 'hover:bg-gray-50',
+    border: 'border-border',
+    bg: 'bg-card',
+    text: 'text-foreground',
+    hover: 'hover:bg-accent',
   },
   github: {
-    border: 'border-gray-800',
-    bg: 'bg-gray-900',
-    text: 'text-white',
-    hover: 'hover:bg-gray-800',
+    border: 'border-border',
+    bg: 'bg-foreground',
+    text: 'text-background',
+    hover: 'hover:bg-foreground/90',
   },
   microsoft: {
-    border: 'border-blue-500',
-    bg: 'bg-white',
-    text: 'text-gray-700',
-    hover: 'hover:bg-blue-50',
+    border: 'border-info',
+    bg: 'bg-card',
+    text: 'text-foreground',
+    hover: 'hover:bg-info/10',
   },
 }
 
@@ -377,7 +377,7 @@ export function Login({
     Boolean(branding?.name) || hasInitials(adminBrand.initials) || hasInitials(publicInitials)
 
   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">
           {showLogo &&
@@ -393,18 +393,18 @@ export function Login({
             ) : (
               <ActuateBrandLogo className="mx-auto mb-4 h-14 w-auto" />
             ))}
-          <h1 className="text-2xl font-medium text-gray-900">{brandName}</h1>
-          <p className="mt-2 text-gray-600">{brandTagline}</p>
+          <h1 className="text-foreground text-2xl font-medium">{brandName}</h1>
+          <p className="text-muted-foreground mt-2">{brandTagline}</p>
         </div>
 
         {mfaPendingToken ? (
           <form
             onSubmit={handleVerifyTotp}
-            className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm"
+            className="border-border bg-card space-y-5 rounded-xl border p-6 shadow-sm"
           >
             <div>
-              <h2 className="text-lg font-medium text-gray-900">Two-factor authentication</h2>
-              <p className="mt-1 text-sm text-gray-600">
+              <h2 className="text-foreground text-lg font-medium">Two-factor authentication</h2>
+              <p className="text-muted-foreground mt-1 text-sm">
                 {useBackupCode
                   ? 'Enter one of your one-time backup codes.'
                   : 'Enter the 6-digit code from your authenticator app.'}
@@ -412,14 +412,17 @@ export function Login({
             </div>
 
             {totpError && (
-              <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">{totpError}</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">{totpError}</p>
               </div>
             )}
 
             <div>
-              <label htmlFor="totp-code" className="mb-1.5 block text-sm font-medium text-gray-700">
+              <label
+                htmlFor="totp-code"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
                 {useBackupCode ? 'Backup code' : 'Authentication code'}
               </label>
               <input
@@ -436,7 +439,7 @@ export function Login({
                   )
                 }
                 placeholder={useBackupCode ? 'abcd1234' : '123456'}
-                className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-center font-mono text-lg tracking-[0.3em] focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                className="border-border bg-input-background text-foreground focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2.5 text-center font-mono text-lg tracking-[0.3em] focus-visible:ring-2 focus-visible:outline-none"
                 autoFocus
                 required
               />
@@ -445,7 +448,7 @@ export function Login({
             <button
               type="submit"
               disabled={!totpCode.trim() || verifying}
-              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"
             >
               {verifying ? (
                 <>
@@ -465,14 +468,14 @@ export function Login({
                   setTotpCode('')
                   setTotpError('')
                 }}
-                className="font-medium text-blue-600 hover:text-blue-700"
+                className="text-primary hover:text-primary/80 font-medium"
               >
                 {useBackupCode ? 'Use authenticator app instead' : 'Use a backup code'}
               </button>
               <button
                 type="button"
                 onClick={resetToPasswordStep}
-                className="font-medium text-gray-500 hover:text-gray-700"
+                className="text-muted-foreground hover:text-foreground font-medium"
               >
                 Back to sign in
               </button>
@@ -481,19 +484,19 @@ export function Login({
         ) : (
           <form
             onSubmit={handleSubmit}
-            className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm"
+            className="border-border bg-card space-y-5 rounded-xl border p-6 shadow-sm"
           >
             {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="login-email"
-                className="mb-1.5 block text-sm font-medium text-gray-700"
+                className="text-foreground mb-1.5 block text-sm font-medium"
               >
                 Email Address
               </label>
@@ -503,7 +506,7 @@ export function Login({
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 placeholder="admin@example.com"
-                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="border-border bg-input-background text-foreground focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2.5 text-sm focus-visible:ring-2 focus-visible:outline-none"
                 required
                 autoFocus
                 autoComplete="email"
@@ -512,14 +515,17 @@ export function Login({
 
             <div>
               <div className="mb-1.5 flex items-center justify-between">
-                <label htmlFor="login-password" className="block text-sm font-medium text-gray-700">
+                <label
+                  htmlFor="login-password"
+                  className="text-foreground block text-sm font-medium"
+                >
                   Password
                 </label>
                 {onNavigate && (
                   <button
                     type="button"
                     onClick={() => onNavigate('/forgot-password')}
-                    className="text-xs font-medium text-blue-600 hover:text-blue-700"
+                    className="text-primary hover:text-primary/80 text-xs font-medium"
                   >
                     Forgot Password?
                   </button>
@@ -532,14 +538,14 @@ export function Login({
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                   placeholder="Enter your 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="border-border bg-input-background text-foreground focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-lg border px-3 py-2.5 pr-10 text-sm focus-visible:ring-2 focus-visible:outline-none"
                   required
                   autoComplete="current-password"
                 />
                 <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" />}
@@ -550,7 +556,7 @@ export function Login({
             <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 ? (
                 <>
@@ -566,10 +572,10 @@ export function Login({
               <>
                 <div className="relative">
                   <div className="absolute inset-0 flex items-center">
-                    <div className="w-full border-t border-gray-200" />
+                    <div className="border-border w-full border-t" />
                   </div>
                   <div className="relative flex justify-center text-sm">
-                    <span className="bg-white px-3 text-gray-500">Or continue with</span>
+                    <span className="bg-card text-muted-foreground px-3">Or continue with</span>
                   </div>
                 </div>
 

package/src/views/PageEditor.tsx

@@ -82,31 +82,31 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
   if (!isNew && loading) {
     return (
       <div className="flex h-full items-center justify-center">
-        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
+        <Loader2 className="text-primary h-6 w-6 animate-spin" />
       </div>
     )
   }
 
   return (
-    <div className="flex h-full flex-col bg-white">
+    <div className="bg-card flex h-full flex-col">
       {error && (
-        <div className="mx-4 mt-3 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 mx-4 mt-3 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>
         </div>
       )}
 
-      <div className="border-b border-gray-200 px-4 py-3">
+      <div className="border-border border-b px-4 py-3">
         <div className="flex items-center justify-between">
           <button
             onClick={() => onNavigate?.('/pages')}
-            className="inline-flex items-center gap-2 text-sm text-gray-600 transition-colors hover:text-gray-900"
+            className="text-muted-foreground hover:text-foreground inline-flex items-center gap-2 text-sm transition-colors"
           >
             <ArrowLeft className="h-4 w-4" />
             Back to Pages
           </button>
           <div className="flex items-center gap-3">
-            <button className="flex items-center gap-2 rounded-lg border border-gray-300 px-3 py-1.5 text-sm transition-colors hover:bg-gray-50">
+            <button className="border-border hover:bg-muted flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm transition-colors">
               <Eye className="h-4 w-4" />
               Preview
             </button>
@@ -122,41 +122,45 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
               value={title}
               onChange={(e) => setTitle(e.target.value)}
               placeholder="Page title"
-              className="mb-4 w-full border-none px-0 text-2xl font-medium placeholder:text-gray-300 focus:ring-0 focus:outline-none sm:text-3xl"
+              className="placeholder:text-muted-foreground mb-4 w-full border-none px-0 text-2xl font-medium focus:ring-0 focus:outline-none sm:text-3xl"
             />
 
             <div className="mb-4">
-              <label className="mb-1 block text-xs font-medium text-gray-600">URL Slug</label>
+              <label className="text-muted-foreground mb-1 block text-xs font-medium">
+                URL Slug
+              </label>
               <input
                 type="text"
                 value={slug}
                 onChange={(e) => setSlug(e.target.value)}
                 placeholder="url-slug"
-                className="w-full rounded-lg border border-gray-300 px-3 py-1.5 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 px-3 py-1.5 text-sm focus:ring-2 focus:outline-none"
               />
             </div>
 
-            <div className="rounded-lg border-2 border-dashed border-gray-300 p-8 text-center">
-              <p className="mb-2 text-gray-500">No blocks added yet</p>
-              <p className="text-sm text-gray-400">Click "Add Block" to start building your page</p>
-              <button className="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700">
+            <div className="border-border rounded-lg border-2 border-dashed p-8 text-center">
+              <p className="text-muted-foreground mb-2">No blocks added yet</p>
+              <p className="text-muted-foreground text-sm">
+                Click "Add Block" to start building your page
+              </p>
+              <button className="bg-primary text-primary-foreground hover:bg-primary/90 mt-4 rounded-lg px-4 py-2 text-sm transition-colors">
                 Add Block
               </button>
             </div>
           </div>
         </div>
 
-        <div className="w-[30%] overflow-y-auto border-l border-gray-200 bg-gray-50">
+        <div className="border-border bg-muted w-[30%] overflow-y-auto border-l">
           <div className="space-y-4 p-4">
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <h3 className="mb-3 text-sm font-medium text-gray-900">Publish</h3>
+            <div className="border-border bg-card rounded-lg border p-4">
+              <h3 className="text-foreground mb-3 text-sm font-medium">Publish</h3>
               <div className="space-y-3">
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-700">Status</label>
+                  <label className="text-foreground mb-1 block text-xs font-medium">Status</label>
                   <select
                     value={status}
                     onChange={(e) => setStatus(e.target.value as 'draft' | 'published')}
-                    className="w-full rounded-lg border border-gray-300 px-3 py-1.5 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 px-3 py-1.5 text-sm focus:ring-2 focus:outline-none"
                   >
                     <option value="draft">Draft</option>
                     <option value="published">Published</option>
@@ -165,7 +169,7 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
                 <button
                   onClick={savePage}
                   disabled={saving}
-                  className="w-full rounded-lg bg-blue-600 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+                  className="bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-lg py-2 text-sm font-medium transition-colors disabled:opacity-50"
                 >
                   {saving ? 'Saving...' : 'Save Page'}
                 </button>
@@ -173,7 +177,7 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
                   <button
                     onClick={publishPage}
                     disabled={saving}
-                    className="w-full rounded-lg bg-green-600 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-50"
+                    className="bg-success text-success-foreground hover:bg-success/90 w-full rounded-lg py-2 text-sm font-medium transition-colors disabled:opacity-50"
                   >
                     {saving ? 'Publishing...' : 'Publish'}
                   </button>

package/src/views/Pages/PagesListView.tsx

@@ -652,12 +652,12 @@ function GroupBlock({
 
 function dotFor(color: string): string {
   const map: 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',
   }
   return map[color] ?? 'bg-muted-foreground'
 }