@kyro-cms/admin 0.1.6 → 0.1.7

package/src/pages/audit/index.astro

@@ -1,110 +1,8 @@
 ---
 import AdminLayout from '../../layouts/AdminLayout.astro';
-
-let auditLogs: any[] = [];
-let totalLogs = 0;
-
-try {
-  const response = await fetch(`${Astro.url.origin}/api/audit_logs?page=1&limit=50`);
-  if (response.ok) {
-    const data = await response.json();
-    auditLogs = data.docs || [];
-    totalLogs = data.totalDocs || 0;
-  }
-} catch (error) {
-  console.error('Failed to fetch audit logs:', error);
-}
-
-const actionColors: Record<string, string> = {
-  login: 'bg-green-50 text-green-600',
-  logout: 'bg-gray-50 text-gray-600',
-  login_failed: 'bg-red-50 text-red-600',
-  register: 'bg-blue-50 text-blue-600',
-  password_change: 'bg-yellow-50 text-yellow-600',
-  password_reset: 'bg-purple-50 text-purple-600',
-  user_create: 'bg-green-50 text-green-600',
-  user_update: 'bg-blue-50 text-blue-600',
-  user_delete: 'bg-red-50 text-red-600',
-  user_lockout: 'bg-orange-50 text-orange-600',
-};
+import { AuditLogsPage } from '../../components/AuditLogsPage';
 ---
 
 <AdminLayout title="Audit Logs">
-  <div class="flex-1 overflow-y-auto p-8 pr-12 space-y-8">
-    <!-- Header -->
-    <div class="surface-tile p-6">
-      <h1 class="text-3xl font-black tracking-tighter text-[#0b1222]">Audit Logs</h1>
-      <p class="text-sm text-[#64748b] mt-1 font-medium">
-        Security audit trail
-        <span class="ml-2 text-[#0b1222] font-bold">· {totalLogs} entries</span>
-      </p>
-    </div>
-
-    <!-- Logs Table -->
-    <div class="surface-tile overflow-hidden">
-      {auditLogs.length === 0 ? (
-        <div class="px-8 py-16 text-center">
-          <div class="flex flex-col items-center gap-4">
-            <div class="w-16 h-16 rounded-2xl bg-gray-50 flex items-center justify-center">
-              <svg class="w-8 h-8 text-[#9ca3af]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-              </svg>
-            </div>
-            <p class="font-bold text-[#0b1222] text-base">No audit logs yet</p>
-            <p class="text-sm text-[#64748b]">Logs will appear here as users interact with the system.</p>
-          </div>
-        </div>
-      ) : (
-        <table class="w-full text-left">
-          <thead>
-            <tr class="text-[#64748b] font-bold text-[10px] uppercase tracking-[0.3em] border-b border-gray-100">
-              <th class="px-8 py-6">Action</th>
-              <th class="px-6 py-6">User</th>
-              <th class="px-6 py-6">Resource</th>
-              <th class="px-6 py-6">IP Address</th>
-              <th class="px-6 py-6">Status</th>
-              <th class="px-6 py-6">Timestamp</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-50">
-            {auditLogs.map((log) => (
-              <tr class="group hover:bg-gray-50/50 transition-colors">
-                <td class="px-8 py-4">
-                  <span class={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${actionColors[log.action] || 'bg-gray-50 text-gray-600'}`}>
-                    {log.action.replace(/_/g, ' ')}
-                  </span>
-                </td>
-                <td class="px-6 py-4">
-                  <div class="text-sm font-bold text-[#0b1222]">{log.userEmail || '—'}</div>
-                  {log.role && <div class="text-xs text-[#64748b]">{log.role}</div>}
-                </td>
-                <td class="px-6 py-4 text-sm text-[#64748b]">{log.resource}</td>
-                <td class="px-6 py-4 text-sm text-[#64748b] font-mono">{log.ipAddress || '—'}</td>
-                <td class="px-6 py-4">
-                  {log.success ? (
-                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-green-50 text-green-600">
-                      <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
-                      </svg>
-                      Success
-                    </span>
-                  ) : (
-                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-red-50 text-red-600">
-                      <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
-                      </svg>
-                      Failed
-                    </span>
-                  )}
-                </td>
-                <td class="px-6 py-4 text-sm text-[#64748b]">
-                  {log.timestamp ? new Date(log.timestamp).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : '—'}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </div>
-  </div>
+  <AuditLogsPage client:only="react" />
 </AdminLayout>

package/src/pages/login.astro

@@ -3,36 +3,36 @@ import AuthLayout from '../layouts/AuthLayout.astro';
 ---
 
 <AuthLayout title="Sign In">
-  <div class="surface-tile p-8 w-full max-w-md">
+  <div class="surface-tile p-8 w-full" style="max-width: 420px;">
     <div class="text-center mb-8">
-      <h1 class="text-2xl font-black tracking-tight text-[#0b1222]">Welcome back</h1>
-      <p class="text-sm text-[#64748b] mt-2">Sign in to your account</p>
+      <h1 class="text-2xl font-black tracking-tight text-[var(--kyro-text-primary)]">Welcome back</h1>
+      <p class="text-sm text-[var(--kyro-text-secondary)] mt-2">Sign in to your account</p>
     </div>
 
-    <form id="login-form" class="space-y-4">
+    <form id="login-form" class="space-y-5">
       <div>
-        <label for="email" class="block text-sm font-bold text-[#0b1222] mb-2">Email</label>
+        <label for="email" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2 text-left">Email</label>
         <input type="email" id="email" name="email" required 
-          class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[#0b1222]/20 focus:border-[#0b1222]" 
+          class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]" 
           placeholder="admin@example.com" />
       </div>
 
       <div>
-        <label for="password" class="block text-sm font-bold text-[#0b1222] mb-2">Password</label>
+        <label for="password" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2">Password</label>
         <input type="password" id="password" name="password" required 
-          class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[#0b1222]/20 focus:border-[#0b1222]" 
+          class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]" 
           placeholder="••••••••" />
       </div>
 
       <div id="form-message" class="hidden p-3 rounded-xl text-sm font-bold"></div>
 
-      <button type="submit" class="w-full py-3 bg-[#0b1222] text-white rounded-xl text-sm font-bold hover:bg-[#1a2332] transition-colors">
+      <button type="submit" class="w-full py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-sm font-bold hover:opacity-90 transition-colors shadow-lg">
         Sign In
       </button>
     </form>
 
-    <p class="text-center text-sm text-[#64748b] mt-6">
-      Don't have an account? <a href="/register" class="font-bold text-[#0b1222] hover:underline">Register</a>
+    <p class="text-center text-sm text-[var(--kyro-text-secondary)] mt-6">
+      Don't have an account? <a href="/register" class="font-bold text-[var(--kyro-text-primary)] hover:underline">Register</a>
     </p>
   </div>
 

package/src/pages/media.astro

@@ -0,0 +1,10 @@
+---
+import AdminLayout from '../layouts/AdminLayout.astro';
+import { MediaGallery } from '../components/MediaGallery';
+---
+
+<AdminLayout title="Media Library">
+  <div class="flex-1 overflow-hidden">
+    <MediaGallery client:load />
+  </div>
+</AdminLayout>

package/src/pages/preview/[collection]/[id].astro

@@ -0,0 +1,178 @@
+---
+import AdminLayout from '../../../layouts/AdminLayout.astro';
+import {
+  renderRichText,
+  richTextStyles,
+} from "../../../../../src/fields/richtext.js";
+import { collections } from '@/lib/config';
+
+const { collection, id } = Astro.params;
+
+if (!collection || !collections[collection]) {
+  return Astro.redirect('/');
+}
+
+const config = collections[collection];
+
+let doc = null;
+let error = null;
+
+if (id) {
+  try {
+    const response = await fetch(`${Astro.url.origin}/api/${collection}/${id}`, {
+      headers: Astro.request.headers,
+      credentials: 'include'
+    });
+    if (response.ok) {
+      const result = await response.json();
+      doc = result.data || null;
+    } else {
+      error = `Failed to load document: ${response.status}`;
+    }
+  } catch (e) {
+    error = 'Failed to fetch document';
+  }
+}
+
+const title = doc ? `Preview: ${doc.title || doc.name || doc.slug || id}` : 'Preview';
+---
+
+<AdminLayout title={title}>
+  <Fragment set:html={`<style>${richTextStyles}</style>`} />
+  <div class="flex-1 overflow-y-auto p-8 space-y-6">
+    <div class="surface-tile p-6 flex items-center justify-between">
+      <div class="flex items-center gap-4">
+        <a
+          href={`/${collection}/${id}`}
+          class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path>
+          </svg>
+        </a>
+        <div>
+          <h1 class="text-xl font-black tracking-tighter text-[var(--kyro-text-primary)]">Preview Mode</h1>
+          <p class="text-sm text-[var(--kyro-text-secondary)] mt-0.5">Showing draft content</p>
+        </div>
+      </div>
+      <div class="flex items-center gap-3">
+        <span class="px-3 py-1.5 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] text-xs font-bold rounded-lg border border-[var(--kyro-border)]">
+          {doc?.status || 'draft'}
+        </span>
+        <a
+          href={`/${collection}/${id}`}
+          class="px-5 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-sm hover:opacity-90 transition-colors"
+        >
+          Edit
+        </a>
+      </div>
+    </div>
+
+    {error && (
+      <div class="surface-tile p-6 border border-red-500/30 bg-red-500/10">
+        <p class="text-red-400">{error}</p>
+      </div>
+    )}
+
+    {doc && (
+      <div class="space-y-6">
+        {config.fields.map((field: any) => {
+          const value = doc[field.name];
+          if (value === undefined || value === null) return null;
+
+          return (
+            <div class="surface-tile p-6">
+              <h3 class="text-xs font-bold text-[var(--kyro-text-muted)] uppercase tracking-[0.15em] mb-3">
+                {field.label || field.name}
+              </h3>
+              <div class="text-sm text-[var(--kyro-text-primary)]">
+                {field.type === 'text' && (
+                  <p class="whitespace-pre-wrap">{value}</p>
+                )}
+                {field.type === 'textarea' && (
+                  <p class="whitespace-pre-wrap">{value}</p>
+                )}
+                {field.type === 'richtext' && (
+                  <div set:html={renderRichText(value)} />
+                )}
+                {field.type === 'markdown' && (
+                  <div class="prose prose-sm max-w-none">
+                    <pre class="whitespace-pre-wrap bg-transparent p-0">{value}</pre>
+                  </div>
+                )}
+                {field.type === 'number' && (
+                  <p>{value}</p>
+                )}
+                {field.type === 'boolean' && (
+                  <span class={value ? 'text-green-400' : 'text-red-400'}>{value ? 'Yes' : 'No'}</span>
+                )}
+                {field.type === 'select' && (
+                  <span class="px-2 py-1 bg-[var(--kyro-surface-accent)] rounded text-xs">{value}</span>
+                )}
+                {field.type === 'date' && (
+                  <p>{new Date(value).toLocaleString()}</p>
+                )}
+                {field.type === 'upload' && value.url && (
+                  <div>
+                    {value.url.match(/\.(jpe?g|png|gif|webp|avif|svg)(\?|$)/i) ? (
+                      <img src={value.url} alt={value.filename || 'Image'} class="max-w-md rounded-lg border border-[var(--kyro-border)]" />
+                    ) : (
+                      <a href={value.url} class="text-blue-400 hover:underline">{value.filename || 'Download'}</a>
+                    )}
+                  </div>
+                )}
+                {field.type === 'gallery' && Array.isArray(value) && (
+                  <div class="grid grid-cols-4 gap-3">
+                    {value.map((item: any, idx: number) => (
+                      item?.url ? (
+                        item.url.match(/\.(jpe?g|png|gif|webp|avif|svg)(\?|$)/i) ? (
+                          <img key={idx} src={item.url} alt={item.filename || `Image ${idx + 1}`} class="w-full h-24 object-cover rounded-lg border border-[var(--kyro-border)]" />
+                        ) : (
+                          <div key={idx} class="h-24 flex items-center justify-center bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)] text-xs">
+                            {item.filename || 'File'}
+                          </div>
+                        )
+                      ) : null
+                    ))}
+                  </div>
+                )}
+                {field.type === 'array' && Array.isArray(value) && (
+                  <div class="space-y-2">
+                    {value.map((item: any, idx: number) => (
+                      <div key={idx} class="p-3 bg-[var(--kyro-surface-accent)] rounded border border-[var(--kyro-border)] text-xs">
+                        {Object.entries(item).filter(([k, v]) => v !== undefined).map(([k, v]) => (
+                          <div key={k} class="flex gap-2">
+                            <span class="text-[var(--kyro-text-muted)]">{k}:</span>
+                            <span>{typeof v === 'object' ? JSON.stringify(v) : String(v)}</span>
+                          </div>
+                        ))}
+                      </div>
+                    ))}
+                  </div>
+                )}
+                {field.type === 'relationship' && (
+                  <p class="text-[var(--kyro-text-secondary)]">{value.title || value.name || value.slug || JSON.stringify(value)}</p>
+                )}
+                {field.type === 'json' && (
+                  <pre class="text-xs bg-[var(--kyro-surface-accent)] p-3 rounded overflow-x-auto">{JSON.stringify(value, null, 2)}</pre>
+                )}
+                {field.type === 'code' && (
+                  <pre class="text-xs bg-[var(--kyro-surface-accent)] p-3 rounded overflow-x-auto">{value}</pre>
+                )}
+                {(!field.type || ['text', 'string'].includes(field.type)) && (
+                  <p>{value}</p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    )}
+
+    {!doc && !error && (
+      <div class="surface-tile p-6">
+        <p class="text-[var(--kyro-text-muted)]">Document not found</p>
+      </div>
+    )}
+  </div>
+</AdminLayout>

package/src/pages/register.astro

@@ -3,43 +3,43 @@ import AuthLayout from '../layouts/AuthLayout.astro';
 ---
 
 <AuthLayout title="Create Account">
-  <div class="surface-tile p-8 w-full max-w-md">
+  <div class="surface-tile p-8 w-full" style="max-width: 420px;">
     <div class="text-center mb-8">
-      <h1 class="text-2xl font-black tracking-tight text-[#0b1222]">Create your account</h1>
-      <p class="text-sm text-[#64748b] mt-2">Get started with Kyro CMS</p>
+      <h1 class="text-2xl font-black tracking-tight text-[var(--kyro-text-primary)]">Create your account</h1>
+      <p class="text-sm text-[var(--kyro-text-secondary)] mt-2">Get started with Kyro CMS</p>
     </div>
 
-    <form id="register-form" class="space-y-4">
+    <form id="register-form" class="space-y-5">
       <div>
-        <label for="email" class="block text-sm font-bold text-[#0b1222] mb-2">Email</label>
+        <label for="email" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2">Email</label>
         <input type="email" id="email" name="email" required 
-          class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[#0b1222]/20 focus:border-[#0b1222]" 
+          class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]" 
           placeholder="admin@example.com" />
       </div>
 
       <div>
-        <label for="password" class="block text-sm font-bold text-[#0b1222] mb-2">Password</label>
+        <label for="password" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2">Password</label>
         <input type="password" id="password" name="password" required minlength="8"
-          class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[#0b1222]/20 focus:border-[#0b1222]" 
+          class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]" 
           placeholder="Minimum 8 characters" />
       </div>
 
       <div>
-        <label for="confirmPassword" class="block text-sm font-bold text-[#0b1222] mb-2">Confirm Password</label>
+        <label for="confirmPassword" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2">Confirm Password</label>
         <input type="password" id="confirmPassword" name="confirmPassword" required minlength="8"
-          class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[#0b1222]/20 focus:border-[#0b1222]" 
+          class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]" 
           placeholder="Confirm your password" />
       </div>
 
       <div id="form-message" class="hidden p-3 rounded-xl text-sm font-bold"></div>
 
-      <button type="submit" class="w-full py-3 bg-[#0b1222] text-white rounded-xl text-sm font-bold hover:bg-[#1a2332] transition-colors">
+      <button type="submit" class="w-full py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-sm font-bold hover:opacity-90 transition-colors shadow-lg">
         Create Account
       </button>
     </form>
 
-    <p class="text-center text-sm text-[#64748b] mt-6">
-      Already have an account? <a href="/login" class="font-bold text-[#0b1222] hover:underline">Sign in</a>
+    <p class="text-center text-sm text-[var(--kyro-text-secondary)] mt-6">
+      Already have an account? <a href="/login" class="font-bold text-[var(--kyro-text-primary)] hover:underline">Sign in</a>
     </p>
   </div>
 

package/src/pages/roles/index.astro

@@ -2,12 +2,12 @@
 import AdminLayout from '../../layouts/AdminLayout.astro';
 
 const defaultRoles = [
-  { name: 'super_admin', level: 100, inherits: ['admin'], description: 'Full system access across all tenants', color: 'bg-red-50 text-red-600 border-red-200' },
-  { name: 'admin', level: 90, inherits: ['editor'], description: 'Full tenant access with all content permissions', color: 'bg-purple-50 text-purple-600 border-purple-200' },
-  { name: 'editor', level: 70, inherits: ['author'], description: 'Edit and publish all content', color: 'bg-blue-50 text-blue-600 border-blue-200' },
-  { name: 'author', level: 50, inherits: ['customer'], description: 'Create and edit own content', color: 'bg-green-50 text-green-600 border-green-200' },
-  { name: 'customer', level: 30, inherits: [], description: 'Access own data and make purchases', color: 'bg-gray-50 text-gray-600 border-gray-200' },
-  { name: 'guest', level: 10, inherits: [], description: 'Public read-only access', color: 'bg-yellow-50 text-yellow-600 border-yellow-200' },
+  { name: 'super_admin', level: 100, inherits: ['admin'], description: 'Full system access across all tenants', color: 'bg-red-500/10 text-red-500 border-red-500/20' },
+  { name: 'admin', level: 90, inherits: ['editor'], description: 'Full tenant access with all content permissions', color: 'bg-purple-500/10 text-purple-500 border-purple-500/20' },
+  { name: 'editor', level: 70, inherits: ['author'], description: 'Edit and publish all content', color: 'bg-blue-500/10 text-blue-500 border-blue-500/20' },
+  { name: 'author', level: 50, inherits: ['customer'], description: 'Create and edit own content', color: 'bg-green-500/10 text-green-500 border-green-500/20' },
+  { name: 'customer', level: 30, inherits: [], description: 'Access own data and make purchases', color: 'bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] border-[var(--kyro-border)]' },
+  { name: 'guest', level: 10, inherits: [], description: 'Public read-only access', color: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20' },
 ];
 
 const permissions: Record<string, string[]> = {
@@ -24,8 +24,8 @@ const permissions: Record<string, string[]> = {
   <div class="flex-1 overflow-y-auto p-8 pr-12 space-y-8">
     <!-- Header -->
     <div class="surface-tile p-6">
-      <h1 class="text-3xl font-black tracking-tighter text-[#0b1222]">Roles & Permissions</h1>
-      <p class="text-sm text-[#64748b] mt-1 font-medium">
+      <h1 class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">Roles & Permissions</h1>
+      <p class="text-sm text-[var(--kyro-text-secondary)] mt-1 font-medium italic">
         Role-based access control with hierarchical permissions
       </p>
     </div>
@@ -35,27 +35,27 @@ const permissions: Record<string, string[]> = {
       {defaultRoles.map((role) => (
         <div class={`surface-tile p-6 border-2 ${role.color.split(' ').slice(2).join(' ')} rounded-2xl`}>
           <div class="flex items-center justify-between mb-4">
-            <h3 class="text-xl font-black text-[#0b1222] tracking-tighter">{role.name}</h3>
+            <h3 class="text-xl font-black text-[var(--kyro-text-primary)] tracking-tighter">{role.name}</h3>
             <span class={`px-3 py-1 rounded-lg text-xs font-bold ${role.color.split(' ').slice(0, 2).join(' ')}`}>
               Level {role.level}
             </span>
           </div>
-          <p class="text-sm text-[#64748b] mb-4">{role.description}</p>
+          <p class="text-sm text-[var(--kyro-text-secondary)] mb-4">{role.description}</p>
           {role.inherits.length > 0 && (
             <div class="mb-4">
-              <span class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Inherits:</span>
+              <span class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-[0.1em] opacity-50">Inherits:</span>
               <div class="flex gap-2 mt-2">
                 {role.inherits.map((parent) => (
-                  <span class="px-2 py-1 bg-gray-100 rounded text-xs font-bold text-[#64748b]">{parent}</span>
+                  <span class="px-2 py-1 bg-[var(--kyro-surface-accent)] rounded text-xs font-bold text-[var(--kyro-text-secondary)]">{parent}</span>
                 ))}
               </div>
             </div>
           )}
           <div>
-            <span class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Permissions:</span>
+            <span class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-[0.1em] opacity-50">Permissions:</span>
             <div class="flex flex-wrap gap-1.5 mt-2">
               {(permissions[role.name] || []).map((perm) => (
-                <span class="px-2 py-0.5 bg-gray-50 rounded text-[10px] font-bold text-[#0b1222]">{perm}</span>
+                <span class="px-2 py-0.5 bg-[var(--kyro-surface-accent)] rounded text-[10px] font-bold text-[var(--kyro-text-primary)]">{perm}</span>
               ))}
             </div>
           </div>
@@ -65,19 +65,19 @@ const permissions: Record<string, string[]> = {
 
     <!-- Permission Matrix -->
     <div class="surface-tile overflow-hidden">
-      <div class="p-6 border-b border-gray-100">
-        <h2 class="text-xl font-black text-[#0b1222] tracking-tighter">Permission Matrix</h2>
+      <div class="p-6 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]">
+        <h2 class="text-xl font-black text-[var(--kyro-text-primary)] tracking-tighter">Permission Matrix</h2>
       </div>
       <table class="w-full text-left">
         <thead>
-          <tr class="text-[#64748b] font-bold text-[10px] uppercase tracking-[0.3em] border-b border-gray-100">
+          <tr class="text-[var(--kyro-text-secondary)] font-bold text-[10px] uppercase tracking-[0.3em] border-b border-[var(--kyro-border)]">
             <th class="px-6 py-4">Resource</th>
             {defaultRoles.map((role) => (
               <th class="px-4 py-4 text-center">{role.name}</th>
             ))}
           </tr>
         </thead>
-        <tbody class="divide-y divide-gray-50">
+        <tbody class="divide-y divide-[var(--kyro-border)]">
           {[
             { resource: 'Users', actions: ['create', 'read', 'update', 'delete'] },
             { resource: 'Roles', actions: ['create', 'read', 'update', 'delete'] },
@@ -86,8 +86,8 @@ const permissions: Record<string, string[]> = {
             { resource: 'Settings', actions: ['read', 'update'] },
             { resource: 'Audit Logs', actions: ['read'] },
           ].map((row) => (
-            <tr class="hover:bg-gray-50/50">
-              <td class="px-6 py-4 font-bold text-[#0b1222]">{row.resource}</td>
+            <tr class="hover:bg-[var(--kyro-surface-accent)] transition-colors">
+              <td class="px-6 py-4 font-bold text-[var(--kyro-text-primary)]">{row.resource}</td>
               {defaultRoles.map((role) => {
                 const hasAll = permissions[role.name]?.includes('*');
                 const hasResource = permissions[role.name]?.some(p => p.startsWith(row.resource.toLowerCase() + ':') || p === '*');
@@ -98,7 +98,7 @@ const permissions: Record<string, string[]> = {
                         <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                       </svg>
                     ) : (
-                      <svg class="w-5 h-5 text-gray-200 mx-auto" fill="currentColor" viewBox="0 0 20 20">
+                      <svg class="w-5 h-5 text-[var(--kyro-border)] mx-auto" fill="currentColor" viewBox="0 0 20 20">
                         <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                       </svg>
                     )}