@geminilight/mindos 0.5.9 → 0.5.10

package/app/components/Sidebar.tsx

@@ -121,7 +121,7 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
 
       {/* Mobile navbar */}
       <header className="md:hidden fixed top-0 left-0 right-0 z-30 bg-card border-b border-border flex items-center justify-between px-3 py-2" style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}>
-        <button onClick={() => setMobileOpen(true)} className="p-2.5 -ml-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label="Open menu">
+        <button onClick={() => setMobileOpen(true)} className="p-3 -ml-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label="Open menu">
           <Menu size={20} />
         </button>
         <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
@@ -132,15 +132,15 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
           {/* #8 — Mobile sync dot: visible when there's a problem */}
           <button
             onClick={openSyncSettings}
-            className="p-2.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent flex items-center justify-center"
+            className="p-3 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent flex items-center justify-center"
             aria-label="Sync status"
           >
             <MobileSyncDot status={syncStatus} />
           </button>
-          <button onClick={() => setSearchOpen(true)} className="p-2.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.searchTitle}>
+          <button onClick={() => setSearchOpen(true)} className="p-3 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.searchTitle}>
             <Search size={20} />
           </button>
-          <button onClick={() => setSettingsOpen(true)} className="p-2.5 -mr-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.settingsTitle}>
+          <button onClick={() => setSettingsOpen(true)} className="p-3 -mr-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.settingsTitle}>
             <Settings size={20} />
           </button>
         </div>

package/app/components/SidebarLayout.tsx

@@ -15,6 +15,14 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
 
   return (
     <>
+      {/* Skip to main content — accessibility for keyboard users */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[60] focus:px-4 focus:py-2 focus:rounded-lg focus:text-sm focus:font-medium focus:font-display"
+        style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+      >
+        Skip to main content
+      </a>
       <Sidebar
         fileTree={fileTree}
         collapsed={collapsed}
@@ -22,6 +30,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         onExpand={() => setCollapsed(false)}
       />
       <main
+        id="main-content"
         className={`min-h-screen transition-all duration-300 pt-[52px] md:pt-0 ${
           collapsed ? 'md:pl-0' : 'md:pl-[280px]'
         }`}

package/app/components/SyncStatusBar.tsx

@@ -20,7 +20,7 @@ export function getStatusLevel(status: SyncStatus | null, syncing: boolean): Sta
 }
 
 export const DOT_COLORS: Record<StatusLevel, string> = {
-  synced: 'bg-green-500',
+  synced: 'bg-success',
   unpushed: 'bg-yellow-500',
   conflicts: 'bg-error',       // #6 — conflicts more prominent than unpushed
   error: 'bg-error',
@@ -173,7 +173,7 @@ export default function SyncStatusBar({ collapsed, onOpenSyncSettings }: SyncSta
           className="p-1 rounded hover:bg-muted hover:text-foreground transition-colors shrink-0 ml-2 text-muted-foreground/50 hover:text-muted-foreground"
           title="Dismiss"
         >
-          <span className="text-[10px]">✕</span>
+          <span className="text-2xs">✕</span>
         </button>
       </div>
     );
@@ -231,7 +231,7 @@ export default function SyncStatusBar({ collapsed, onOpenSyncSettings }: SyncSta
       </button>
       <div className="flex items-center gap-1 shrink-0 ml-2">
         {/* #2 — sync result flash */}
-        {(syncResult === 'success' || toast) && <CheckCircle2 size={12} className="text-green-500 animate-in fade-in duration-200" />}
+        {(syncResult === 'success' || toast) && <CheckCircle2 size={12} className="text-success animate-in fade-in duration-200" />}
         {syncResult === 'error' && <XCircle size={12} className="text-error animate-in fade-in duration-200" />}
         <button
           onClick={handleSyncNow}

package/app/components/TableOfContents.tsx

@@ -111,7 +111,7 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
         style={{ background: 'var(--background)' }}
       >
         <p
-          className="text-[10px] font-semibold uppercase tracking-wider px-2 mb-1"
+          className="text-2xs font-semibold uppercase tracking-wider px-2 mb-1"
           style={{ color: 'var(--muted-foreground)', opacity: 0.5 }}
         >
           On this page

package/app/components/UpdateBanner.tsx

@@ -60,7 +60,7 @@ export default function UpdateBanner() {
         </span>
         <span className="text-muted-foreground">
           {updateT?.runUpdate ?? 'Run'}{' '}
-          <code className="px-1 py-0.5 rounded bg-muted font-mono text-[11px]">mindos update</code>
+          <code className="px-1 py-0.5 rounded bg-muted font-mono text-xs">mindos update</code>
           {updateT?.orSee ? (
             <>
               {' '}{updateT.orSee}{' '}

package/app/components/ask/FileChip.tsx

@@ -12,7 +12,7 @@ export default function FileChip({ path, onRemove, variant = 'kb' }: FileChipPro
   const name = path.split('/').pop() ?? path;
   const isCsv = name.endsWith('.csv');
   const Icon = variant === 'upload' ? Paperclip : isCsv ? Table : FileText;
-  const iconClass = variant === 'upload' ? 'text-zinc-400' : isCsv ? 'text-emerald-400' : 'text-zinc-400';
+  const iconClass = variant === 'upload' ? 'text-muted-foreground' : isCsv ? 'text-success' : 'text-muted-foreground';
 
   return (
     <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs border border-border bg-muted text-foreground max-w-[220px]">

package/app/components/ask/MentionPopover.tsx

@@ -31,18 +31,18 @@ export default function MentionPopover({ results, selectedIndex, onSelect }: Men
             }`}
           >
             {isCsv ? (
-              <Table size={13} className="text-emerald-400 shrink-0" />
+              <Table size={13} className="text-success shrink-0" />
             ) : (
-              <FileText size={13} className="text-zinc-400 shrink-0" />
+              <FileText size={13} className="text-muted-foreground shrink-0" />
             )}
             <span className="truncate flex-1">{name}</span>
-            <span className="text-[10px] text-muted-foreground/50 truncate max-w-[140px] shrink-0">
+            <span className="text-2xs text-muted-foreground/50 truncate max-w-[140px] shrink-0">
               {f.split('/').slice(0, -1).join('/')}
             </span>
           </button>
         );
       })}
-      <div className="px-3 py-1.5 border-t border-border flex gap-3 text-[10px] text-muted-foreground/50">
+      <div className="px-3 py-1.5 border-t border-border flex gap-3 text-2xs text-muted-foreground/50">
         <span>↑↓ navigate</span>
         <span>↵ select</span>
         <span>ESC dismiss</span>

package/app/components/ask/MessageList.tsx

@@ -89,7 +89,7 @@ export default function MessageList({
           {m.role === 'user' ? (
             <div
               className="max-w-[85%] px-3 py-2 rounded-xl rounded-br-sm text-sm leading-relaxed whitespace-pre-wrap"
-              style={{ background: 'var(--amber)', color: '#131210' }}
+              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
             >
               {m.content}
             </div>

package/app/components/ask/SessionHistory.tsx

@@ -14,7 +14,7 @@ interface SessionHistoryProps {
 export default function SessionHistory({ sessions, activeSessionId, onLoad, onDelete }: SessionHistoryProps) {
   return (
     <div className="border-b border-border px-4 py-2.5 max-h-[190px] overflow-y-auto">
-      <div className="text-[11px] text-muted-foreground mb-2">Session History</div>
+      <div className="text-xs text-muted-foreground mb-2">Session History</div>
       <div className="flex flex-col gap-1.5">
         {sessions.length === 0 && (
           <div className="text-xs text-muted-foreground/70">No saved sessions.</div>
@@ -31,7 +31,7 @@ export default function SessionHistory({ sessions, activeSessionId, onLoad, onDe
               }`}
             >
               <div className="truncate">{sessionTitle(s)}</div>
-              <div className="text-[10px] opacity-60">{new Date(s.updatedAt).toLocaleString()}</div>
+              <div className="text-2xs opacity-60">{new Date(s.updatedAt).toLocaleString()}</div>
             </button>
             <button
               type="button"

package/app/components/renderers/config/ConfigRenderer.tsx

@@ -144,7 +144,7 @@ export function ConfigRenderer({ content, saveAction }: RendererContext) {
                         className="px-2.5 py-1 rounded-md text-xs font-medium"
                         style={{
                           background: value ? 'var(--amber)' : 'var(--muted)',
-                          color: value ? '#131210' : 'var(--muted-foreground)',
+                          color: value ? 'var(--amber-foreground)' : 'var(--muted-foreground)',
                         }}
                       >
                         {value ? 'ON' : 'OFF'}

package/app/components/renderers/csv/BoardView.tsx

@@ -80,7 +80,7 @@ export function BoardView({ headers, rows, cfg, saveAction }: {
                   {headers.map((h, ci) => {
                     if (ci === groupIdx || ci === titleIdx || ci === descIdx) return null;
                     const v = row[ci]; if (!v) return null;
-                    return <span key={ci} className="text-[10px] px-1.5 py-0.5 rounded font-display"
+                    return <span key={ci} className="text-2xs px-1.5 py-0.5 rounded font-display"
                       style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}
                     >{h}: {v}</span>;
                   })}
@@ -124,7 +124,7 @@ export function BoardView({ headers, rows, cfg, saveAction }: {
                 setShowNewCol(false);
               }}
                 className="text-xs px-2 py-1 rounded font-display"
-                style={{ background: 'var(--amber)', color: '#131210' }}
+                style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
               >Create</button>
               <button onClick={() => { setNewColInput(''); setShowNewCol(false); }}
                 className="text-xs px-2 py-1 rounded font-display"

package/app/components/renderers/csv/ConfigPanel.tsx

@@ -39,7 +39,7 @@ export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
       {view === 'table' && (
         <>
           <div className="h-px" style={{ background: 'var(--border)' }} />
-          <p className="text-[11px] font-semibold uppercase tracking-wider" style={labelStyle}>Sort</p>
+          <p className="text-xs font-semibold uppercase tracking-wider" style={labelStyle}>Sort</p>
           <FieldSelect label="Sort by" value={cfg.table.sortField}
             onChange={v => onChange({ ...cfg, table: { ...cfg.table, sortField: v } })} />
           <div className="flex items-center justify-between gap-2">
@@ -51,7 +51,7 @@ export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
                   style={{
                     fontSize: '0.72rem',
                     background: cfg.table.sortDir === d ? 'var(--amber)' : 'var(--background)',
-                    color: cfg.table.sortDir === d ? '#131210' : 'var(--muted-foreground)',
+                    color: cfg.table.sortDir === d ? 'var(--amber-foreground)' : 'var(--muted-foreground)',
                   }}
                 >{d}</button>
               ))}
@@ -59,12 +59,12 @@ export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
           </div>
 
           <div className="h-px" style={{ background: 'var(--border)' }} />
-          <p className="text-[11px] font-semibold uppercase tracking-wider" style={labelStyle}>Group</p>
+          <p className="text-xs font-semibold uppercase tracking-wider" style={labelStyle}>Group</p>
           <FieldSelect label="Group by" value={cfg.table.groupField}
             onChange={v => onChange({ ...cfg, table: { ...cfg.table, groupField: v } })} />
 
           <div className="h-px" style={{ background: 'var(--border)' }} />
-          <p className="text-[11px] font-semibold uppercase tracking-wider" style={labelStyle}>Columns</p>
+          <p className="text-xs font-semibold uppercase tracking-wider" style={labelStyle}>Columns</p>
           <div className="flex flex-col gap-1.5">
             {headers.map(h => {
               const hidden = cfg.table.hiddenFields.includes(h);
@@ -77,7 +77,7 @@ export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
                       : [...cfg.table.hiddenFields, h];
                     onChange({ ...cfg, table: { ...cfg.table, hiddenFields: next } });
                   }}
-                    className="text-[11px] px-2 py-0.5 rounded transition-colors font-display"
+                    className="text-xs px-2 py-0.5 rounded transition-colors font-display"
                     style={{
                       background: hidden ? 'var(--muted)' : 'var(--amber-dim)',
                       color: hidden ? 'var(--muted-foreground)' : 'var(--amber)',

package/app/components/renderers/csv/GalleryView.tsx

@@ -18,7 +18,7 @@ export function GalleryView({ headers, rows, cfg }: { headers: string[]; rows: s
           <div key={i} className="rounded-xl border p-4 flex flex-col gap-2 hover:bg-muted/50 transition-colors"
             style={{ borderColor: 'var(--border)', background: 'var(--card)' }}
           >
-            {tag && tc && <span className="self-start text-[11px] px-2 py-0.5 rounded-full font-medium"
+            {tag && tc && <span className="self-start text-xs px-2 py-0.5 rounded-full font-medium"
               style={{ background: tc.bg, color: tc.text }}>{tag}</span>}
             <p className="text-sm font-semibold leading-snug" style={{ color: 'var(--foreground)' }}>{title}</p>
             {desc && <p className="text-xs leading-relaxed line-clamp-3" style={{ color: 'var(--muted-foreground)' }}>{desc}</p>}

package/app/components/renderers/graph/GraphRenderer.tsx

@@ -149,7 +149,7 @@ const WikiNode = memo(function WikiNode({ data }: NodeProps) {
         textOverflow: 'ellipsis',
         opacity: isOrphan ? 0.4 : 1,
         background: isCurrent ? 'var(--amber)' : 'var(--card)',
-        color: isCurrent ? '#131210' : 'var(--foreground)',
+        color: isCurrent ? 'var(--amber-foreground)' : 'var(--foreground)',
         border: `1.5px solid ${isCurrent ? 'var(--amber)' : 'var(--border)'}`,
         boxShadow: isCurrent 
           ? '0 0 20px var(--amber-dim), 0 0 0 2px var(--amber-dim)' 

package/app/components/renderers/summary/SummaryRenderer.tsx

@@ -155,7 +155,7 @@ Be specific. Reference actual content from the files. Keep the total response un
             cursor: streaming || recentFiles.length === 0 ? 'not-allowed' : 'pointer',
             border: 'none',
             background: streaming ? 'var(--muted)' : 'var(--amber)',
-            color: streaming ? 'var(--muted-foreground)' : '#131210',
+            color: streaming ? 'var(--muted-foreground)' : 'var(--amber-foreground)',
             opacity: recentFiles.length === 0 ? 0.5 : 1,
             transition: 'opacity .15s',
           }}

package/app/components/renderers/workflow/WorkflowRenderer.tsx

@@ -206,7 +206,7 @@ function StepCard({
                   padding: '3px 10px', borderRadius: 6, fontSize: '0.72rem',
                   cursor: canRun ? 'pointer' : 'not-allowed',
                   border: 'none', background: canRun ? 'var(--amber)' : 'var(--muted)',
-                  color: canRun ? '#131210' : 'var(--muted-foreground)',
+                  color: canRun ? 'var(--amber-foreground)' : 'var(--muted-foreground)',
                   opacity: canRun ? 1 : 0.5,
                 }}
               >
@@ -362,7 +362,7 @@ export function WorkflowRenderer({ filePath, content }: RendererContext) {
                 padding: '4px 12px', borderRadius: 7, fontSize: '0.75rem',
                 cursor: running ? 'not-allowed' : 'pointer',
                 border: 'none', background: running ? 'var(--muted)' : 'var(--amber)',
-                color: running ? 'var(--muted-foreground)' : '#131210',
+                color: running ? 'var(--muted-foreground)' : 'var(--amber-foreground)',
                 opacity: running ? 0.7 : 1,
               }}
             >

package/app/components/settings/KnowledgeTab.tsx

@@ -114,7 +114,7 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
                 className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
                 title={k.authTokenCopy}
               >
-                {copied ? <Check size={13} className="text-green-500" /> : <Copy size={13} />}
+                {copied ? <Check size={13} className="text-success" /> : <Copy size={13} />}
               </button>
             )}
           </div>

package/app/components/settings/McpTab.tsx

@@ -94,8 +94,8 @@ function ServerStatus({ status, t }: { status: McpStatus | null; t: any }) {
       <div className="space-y-1.5 text-sm pl-11">
         <div className="flex items-center gap-2">
           <span className="text-muted-foreground w-20 shrink-0 text-xs">{m?.status ?? 'Status'}</span>
-          <span className={`text-xs flex items-center gap-1 ${status.running ? 'text-green-500' : 'text-muted-foreground'}`}>
-            <span className={`inline-block w-1.5 h-1.5 rounded-full ${status.running ? 'bg-green-500' : 'bg-muted-foreground'}`} />
+          <span className={`text-xs flex items-center gap-1 ${status.running ? 'text-success' : 'text-muted-foreground'}`}>
+            <span className={`inline-block w-1.5 h-1.5 rounded-full ${status.running ? 'bg-success' : 'bg-muted-foreground'}`} />
             {status.running ? (m?.running ?? 'Running') : (m?.stopped ?? 'Stopped')}
           </span>
         </div>
@@ -115,7 +115,7 @@ function ServerStatus({ status, t }: { status: McpStatus | null; t: any }) {
           <span className="text-muted-foreground w-20 shrink-0 text-xs">{m?.auth ?? 'Auth'}</span>
           <span className="text-xs">
             {status.authConfigured
-              ? <span className="text-green-500">{m?.authSet ?? 'Token set'}</span>
+              ? <span className="text-success">{m?.authSet ?? 'Token set'}</span>
               : <span className="text-muted-foreground">{m?.authNotSet ?? 'No token'}</span>}
           </span>
         </div>
@@ -214,22 +214,23 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
               type="checkbox"
               checked={selected.has(agent.key)}
               onChange={() => toggle(agent.key)}
-              className="rounded border-border accent-amber-500"
+              className="rounded border-border"
+              style={{ accentColor: 'var(--amber)' }}
             />
             <span className="w-28 shrink-0 text-xs">{agent.name}</span>
-            <span className="text-[10px] px-1.5 py-0.5 rounded font-mono"
+            <span className="text-2xs px-1.5 py-0.5 rounded font-mono"
               style={{ background: 'rgba(100,100,120,0.08)' }}>
               {getEffectiveTransport(agent)}
             </span>
             {agent.installed ? (
               <>
-                <span className="text-[10px] px-1.5 py-0.5 rounded bg-green-500/15 text-green-500 font-mono">
+                <span className="text-2xs px-1.5 py-0.5 rounded bg-success/15 text-success font-mono">
                   {agent.transport}
                 </span>
-                <span className="text-[10px] text-muted-foreground">{agent.scope}</span>
+                <span className="text-2xs text-muted-foreground">{agent.scope}</span>
               </>
             ) : (
-              <span className="text-[10px] text-muted-foreground">
+              <span className="text-2xs text-muted-foreground">
                 {agent.present ? (m?.detected ?? 'Detected') : (m?.notFound ?? 'Not found')}
               </span>
             )}
@@ -238,7 +239,7 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
               <select
                 value={scopes[agent.key] || 'project'}
                 onChange={e => setScopes({ ...scopes, [agent.key]: e.target.value as 'project' | 'global' })}
-                className="ml-auto text-[10px] px-1.5 py-0.5 rounded border border-border bg-background text-foreground"
+                className="ml-auto text-2xs px-1.5 py-0.5 rounded border border-border bg-background text-foreground"
               >
                 <option value="project">{m?.project ?? 'Project'}</option>
                 <option value="global">{m?.global ?? 'Global'}</option>
@@ -273,7 +274,8 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
             name="transport"
             checked={transport === 'auto'}
             onChange={() => setTransport('auto')}
-            className="accent-amber-500"
+            className=""
+            style={{ accentColor: 'var(--amber)' }}
           />
           {m?.transportAuto ?? 'auto (recommended)'}
         </label>
@@ -283,7 +285,8 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
             name="transport"
             checked={transport === 'stdio'}
             onChange={() => setTransport('stdio')}
-            className="accent-amber-500"
+            className=""
+            style={{ accentColor: 'var(--amber)' }}
           />
           {m?.transportStdio ?? 'stdio'}
         </label>
@@ -293,7 +296,8 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
             name="transport"
             checked={transport === 'http'}
             onChange={() => setTransport('http')}
-            className="accent-amber-500"
+            className=""
+            style={{ accentColor: 'var(--amber)' }}
           />
           {m?.transportHttp ?? 'http'}
         </label>
@@ -329,7 +333,7 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
         onClick={handleInstall}
         disabled={selected.size === 0 || installing}
         className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-        style={{ background: 'var(--amber)', color: '#131210' }}
+        style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
       >
         {installing && <Loader2 size={12} className="animate-spin" />}
         {installing ? (m?.installing ?? 'Installing...') : (m?.installSelected ?? 'Install Selected')}
@@ -339,7 +343,7 @@ function AgentInstall({ agents, t, onRefresh }: { agents: AgentInfo[]; t: any; o
       {message && (
         <div className="flex items-center gap-1.5 text-xs" role="status">
           {message.type === 'success' ? (
-            <><CheckCircle2 size={12} className="text-green-500" /><span className="text-green-500">{message.text}</span></>
+            <><CheckCircle2 size={12} className="text-success" /><span className="text-success">{message.text}</span></>
           ) : (
             <><AlertCircle size={12} className="text-destructive" /><span className="text-destructive">{message.text}</span></>
           )}
@@ -480,7 +484,7 @@ function SkillsSection({ t }: { t: any }) {
           >
             {expanded === skill.name ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
             <span className="text-xs font-medium flex-1">{skill.name}</span>
-            <span className={`text-[10px] px-1.5 py-0.5 rounded ${
+            <span className={`text-2xs px-1.5 py-0.5 rounded ${
               skill.source === 'builtin' ? 'bg-blue-500/15 text-blue-500' : 'bg-purple-500/15 text-purple-500'
             }`}>
               {skill.source === 'builtin' ? (m?.skillBuiltin ?? 'Built-in') : (m?.skillUser ?? 'Custom')}
@@ -489,7 +493,7 @@ function SkillsSection({ t }: { t: any }) {
             <button
               onClick={e => { e.stopPropagation(); handleToggle(skill.name, !skill.enabled); }}
               className={`relative inline-flex h-4 w-7 items-center rounded-full transition-colors ${
-                skill.enabled ? 'bg-green-500' : 'bg-muted-foreground/30'
+                skill.enabled ? 'bg-success' : 'bg-muted-foreground/30'
               }`}
             >
               <span className={`inline-block h-3 w-3 rounded-full bg-white transition-transform ${
@@ -501,11 +505,11 @@ function SkillsSection({ t }: { t: any }) {
           {expanded === skill.name && (
             <div className="px-3 py-2 border-t border-border text-xs space-y-1.5 bg-muted/20">
               <p className="text-muted-foreground">{skill.description || 'No description'}</p>
-              <p className="text-muted-foreground font-mono text-[10px]">{skill.path}</p>
+              <p className="text-muted-foreground font-mono text-2xs">{skill.path}</p>
               {skill.editable && (
                 <button
                   onClick={() => handleDelete(skill.name)}
-                  className="flex items-center gap-1 text-[10px] text-destructive hover:underline"
+                  className="flex items-center gap-1 text-2xs text-destructive hover:underline"
                 >
                   <Trash2 size={10} />
                   {m?.deleteSkill ?? 'Delete'}
@@ -526,7 +530,7 @@ function SkillsSection({ t }: { t: any }) {
             </button>
           </div>
           <div className="space-y-1">
-            <label className="text-[10px] text-muted-foreground">{m?.skillName ?? 'Name'}</label>
+            <label className="text-2xs text-muted-foreground">{m?.skillName ?? 'Name'}</label>
             <input
               type="text"
               value={newName}
@@ -536,7 +540,7 @@ function SkillsSection({ t }: { t: any }) {
             />
           </div>
           <div className="space-y-1">
-            <label className="text-[10px] text-muted-foreground">{m?.skillDesc ?? 'Description'}</label>
+            <label className="text-2xs text-muted-foreground">{m?.skillDesc ?? 'Description'}</label>
             <input
               type="text"
               value={newDesc}
@@ -546,7 +550,7 @@ function SkillsSection({ t }: { t: any }) {
             />
           </div>
           <div className="space-y-1">
-            <label className="text-[10px] text-muted-foreground">{m?.skillContent ?? 'Content'}</label>
+            <label className="text-2xs text-muted-foreground">{m?.skillContent ?? 'Content'}</label>
             <textarea
               value={newContent}
               onChange={e => setNewContent(e.target.value)}
@@ -556,7 +560,7 @@ function SkillsSection({ t }: { t: any }) {
             />
           </div>
           {error && (
-            <p className="text-[10px] text-destructive flex items-center gap-1">
+            <p className="text-2xs text-destructive flex items-center gap-1">
               <AlertCircle size={10} />
               {error}
             </p>
@@ -566,7 +570,7 @@ function SkillsSection({ t }: { t: any }) {
               onClick={handleCreate}
               disabled={!newName.trim() || saving}
               className="flex items-center gap-1 px-2.5 py-1 text-xs rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-              style={{ background: 'var(--amber)', color: '#131210' }}
+              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
             >
               {saving && <Loader2 size={10} className="animate-spin" />}
               {m?.saveSkill ?? 'Save'}

package/app/components/settings/PluginsTab.tsx

@@ -33,25 +33,25 @@ export function PluginsTab({ pluginStates, setPluginStates, t }: PluginsTabProps
                       <div className="flex items-center gap-2 flex-wrap">
                         <span className="text-sm font-medium text-foreground">{renderer.name}</span>
                         {isCore && (
-                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-600/15 text-amber-600 font-mono">
+                          <span className="text-2xs px-1.5 py-0.5 rounded bg-amber-600/15 text-amber-600 font-mono">
                             core
                           </span>
                         )}
                         {renderer.builtin && !isCore && (
-                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-mono">
+                          <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-mono">
                             {t.settings.plugins.builtinBadge}
                           </span>
                         )}
                         <div className="flex gap-1 flex-wrap">
                           {renderer.tags.map(tag => (
-                            <span key={tag} className="text-[10px] px-1.5 py-0.5 rounded bg-muted/60 text-muted-foreground">
+                            <span key={tag} className="text-2xs px-1.5 py-0.5 rounded bg-muted/60 text-muted-foreground">
                               {tag}
                             </span>
                           ))}
                         </div>
                       </div>
                       <p className="text-xs text-muted-foreground mt-1 leading-relaxed">{renderer.description}</p>
-                      <p className="text-[11px] text-muted-foreground/60 mt-1.5 font-mono">
+                      <p className="text-xs text-muted-foreground/60 mt-1.5 font-mono">
                         {t.settings.plugins.matchHint}: <code className="bg-muted px-1 rounded">{renderer.match.toString().match(/\/(.+)\//)?.[1] ?? '—'}</code>
                       </p>
                     </div>

package/app/components/settings/Primitives.tsx

@@ -35,7 +35,7 @@ export function Select({ className = '', ...props }: React.SelectHTMLAttributes<
 export function EnvBadge({ overridden }: { overridden: boolean }) {
   if (!overridden) return null;
   return (
-    <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-500 font-mono ml-1.5">env</span>
+    <span className="text-2xs px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-500 font-mono ml-1.5">env</span>
   );
 }
 

package/app/components/settings/SyncTab.tsx

@@ -111,12 +111,12 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
           }}
         />
         {remoteUrl.trim() && !isValid && (
-          <p className="text-[11px]" style={{ color: 'var(--destructive, red)' }}>
+          <p className="text-xs" style={{ color: 'var(--destructive, red)' }}>
             {syncT?.invalidUrl ?? 'Invalid Git URL — use HTTPS (https://...) or SSH (git@...)'}
           </p>
         )}
         {urlType === 'ssh' && (
-          <p className="text-[11px] text-muted-foreground flex items-center gap-1">
+          <p className="text-xs text-muted-foreground flex items-center gap-1">
             <AlertCircle size={11} className="shrink-0" />
             {syncT?.sshHint ?? 'SSH URLs require SSH key configured on this machine. HTTPS with token recommended.'}
           </p>
@@ -147,7 +147,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
               {showToken ? <EyeOff size={14} /> : <Eye size={14} />}
             </button>
           </div>
-          <p className="text-[11px] text-muted-foreground">
+          <p className="text-xs text-muted-foreground">
             {syncT?.tokenHint ?? 'GitHub: Settings → Developer settings → Personal access tokens → repo scope'}
           </p>
         </div>
@@ -174,7 +174,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
         onClick={handleConnect}
         disabled={!isValid || connecting}
         className="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-        style={{ background: 'var(--amber)', color: '#131210' }}
+        style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
       >
         {connecting && <Loader2 size={14} className="animate-spin" />}
         {connecting
@@ -191,7 +191,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
       )}
 
       {/* Features */}
-      <div className="grid grid-cols-2 gap-2 text-[11px] text-muted-foreground pt-2">
+      <div className="grid grid-cols-2 gap-2 text-xs text-muted-foreground pt-2">
         {[
           syncT?.featureAutoCommit ?? 'Auto-commit on save',
           syncT?.featureAutoPull ?? 'Auto-pull from remote',
@@ -199,7 +199,7 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
           syncT?.featureMultiDevice ?? 'Works across devices',
         ].map((f, i) => (
           <div key={i} className="flex items-center gap-1.5">
-            <CheckCircle2 size={11} className="text-green-500/60 shrink-0" />
+            <CheckCircle2 size={11} className="text-success/60 shrink-0" />
             <span>{f}</span>
           </div>
         ))}
@@ -336,7 +336,7 @@ export function SyncTab({ t }: SyncTabProps) {
           className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
             status.enabled
               ? 'border-border text-muted-foreground hover:text-destructive hover:border-destructive/50'
-              : 'border-green-500/30 text-green-500 hover:bg-green-500/10'
+              : 'border-success/30 text-success hover:bg-success/10'
           }`}
         >
           {status.enabled ? 'Disable Auto-sync' : 'Enable Auto-sync'}
@@ -347,7 +347,7 @@ export function SyncTab({ t }: SyncTabProps) {
       {message && (
         <div className="flex items-center gap-1.5 text-xs" role="status" aria-live="polite">
           {message.type === 'success' ? (
-            <><CheckCircle2 size={13} className="text-green-500" /><span className="text-green-500">{message.text}</span></>
+            <><CheckCircle2 size={13} className="text-success" /><span className="text-success">{message.text}</span></>
           ) : (
             <><AlertCircle size={13} className="text-destructive" /><span className="text-destructive">{message.text}</span></>
           )}