@toolr/ui-design 0.1.1 → 0.1.2

package/components/lib/theme-engine.ts

@@ -0,0 +1,130 @@
+import type { FormColor } from './form-colors.ts'
+
+/* ── Neutral scale types ──────────────────────────────────── */
+
+export const SCALE_KEYS = ['black', '950', '900', '850', '800', '750', '700', '600', '500', '400', '300', '200'] as const
+export type ScaleKey = (typeof SCALE_KEYS)[number]
+
+/* ── Theme definitions ────────────────────────────────────── */
+
+export type ThemeId = 'dark' | 'light'
+
+export const DARK_THEMES: ThemeId[] = ['dark']
+export const LIGHT_THEMES: ThemeId[] = ['light']
+
+export const BASE_THEMES: Record<ThemeId, { label: string; maxSat: number; lightness: Record<ScaleKey, number> }> = {
+  dark:  { label: 'Dark',  maxSat: 22, lightness: { black: 0,  '950': 5,  '900': 10, '850': 12, '800': 15, '750': 18, '700': 22, '600': 30, '500': 46, '400': 64, '300': 83, '200': 90 } },
+  light: { label: 'Light', maxSat: 15, lightness: { black: 98, '950': 96, '900': 93, '850': 91, '800': 88, '750': 85, '700': 82, '600': 65, '500': 50, '400': 38, '300': 22, '200': 12 } },
+}
+
+/* ── Accent definitions ───────────────────────────────────── */
+
+export interface AccentDef {
+  id: FormColor
+  hue: number | null
+  dotColor: string
+}
+
+export const ACCENT_DEFS: AccentDef[] = [
+  { id: 'blue',    hue: 220, dotColor: '#3b82f6' },
+  { id: 'violet',  hue: 260, dotColor: '#8b5cf6' },
+  { id: 'orange',  hue: 25,  dotColor: '#f97316' },
+  { id: 'cyan',    hue: 185, dotColor: '#06b6d4' },
+  { id: 'emerald', hue: 155, dotColor: '#10b981' },
+  { id: 'amber',   hue: 38,  dotColor: '#f59e0b' },
+  { id: 'sky',     hue: 200, dotColor: '#0ea5e9' },
+  { id: 'indigo',  hue: 235, dotColor: '#6366f1' },
+  { id: 'purple',  hue: 275, dotColor: '#a855f7' },
+  { id: 'green',   hue: 142, dotColor: '#22c55e' },
+  { id: 'yellow',  hue: 55,  dotColor: '#eab308' },
+  { id: 'red',     hue: 0,   dotColor: '#ef4444' },
+  { id: 'neutral', hue: null, dotColor: '#737373' },
+]
+
+/* ── Color utilities ──────────────────────────────────────── */
+
+export function satCurve(l: number): number {
+  return Math.min(l / 10, 1) * Math.max(0, 1 - l / 115)
+}
+
+export function hslToHex(h: number, s: number, l: number): string {
+  const a = (s / 100) * Math.min(l / 100, 1 - l / 100)
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12
+    const c = l / 100 - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
+    return Math.round(255 * Math.max(0, Math.min(1, c))).toString(16).padStart(2, '0')
+  }
+  return `#${f(0)}${f(8)}${f(4)}`
+}
+
+function alphaToHex(alpha: number): string {
+  return Math.round(Math.min(alpha, 1) * 255).toString(16).padStart(2, '0')
+}
+
+/* ── Dim (glass surfaces) ────────────────────────────────── */
+
+export const SURFACE_KEYS = ['950', '900', '850', '800', '750'] as const
+export type SurfaceKey = (typeof SURFACE_KEYS)[number]
+
+export const DEFAULT_DIMS: Record<SurfaceKey, number> = { '950': 1, '900': 2, '850': 3, '800': 4, '750': 5 }
+export const DEFAULT_OUTLINE = 30
+
+/* ── Scale generation ─────────────────────────────────────── */
+
+export function generateScale(theme: ThemeId, hue: number | null, maxSat: number, dims: Record<SurfaceKey, number> = DEFAULT_DIMS, outline: number = DEFAULT_OUTLINE): Record<ScaleKey, string> {
+  const lightness = BASE_THEMES[theme].lightness
+  const glassBase = hue !== null ? hslToHex(hue, 80, 50) : null
+  const result = {} as Record<ScaleKey, string>
+
+  for (const key of SCALE_KEYS) {
+    const l = lightness[key]
+
+    // Surface keys: accent-at-opacity (per-key dim)
+    const dimVal = (dims as Partial<Record<ScaleKey, number>>)[key]
+    if (dimVal !== undefined && dimVal > 0 && glassBase) {
+      result[key] = `${glassBase}${alphaToHex(dimVal / 100)}`
+      continue
+    }
+
+    // Border key: accent at outline opacity
+    if (key === '700' && outline > 0 && glassBase) {
+      result[key] = `${glassBase}${alphaToHex(outline / 100)}`
+      continue
+    }
+
+    // Solid color (text, black, fallbacks)
+    if (hue === null || maxSat === 0) {
+      const g = Math.round(255 * l / 100).toString(16).padStart(2, '0')
+      result[key] = `#${g}${g}${g}`
+    } else {
+      result[key] = hslToHex(hue, maxSat * satCurve(l), l)
+    }
+  }
+  return result
+}
+
+/* ── Theme application helpers ────────────────────────────── */
+
+export function isLightTheme(themeId: ThemeId): boolean {
+  return LIGHT_THEMES.includes(themeId)
+}
+
+export function applyTheme(themeId: ThemeId, accentHue: number | null, dims: Record<SurfaceKey, number> = DEFAULT_DIMS, outline: number = DEFAULT_OUTLINE, root: HTMLElement = document.documentElement): void {
+  const scale = generateScale(themeId, accentHue, BASE_THEMES[themeId].maxSat, dims, outline)
+  const light = isLightTheme(themeId)
+
+  for (const key of SCALE_KEYS) {
+    const prop = key === 'black' ? '--color-black' : `--color-neutral-${key}`
+    root.style.setProperty(prop, scale[key])
+  }
+  root.style.setProperty('--color-white', light ? '#0a0a0a' : '#ffffff')
+  root.style.setProperty('--color-neutral-100', light ? '#1a1a1a' : '#f0f0f0')
+  root.style.setProperty('--color-neutral-50', light ? '#0f0f0f' : '#fafafa')
+
+  // Surface hover: accent glass at 10% for visible hover states
+  const glassBase = accentHue !== null ? hslToHex(accentHue, 80, 50) : null
+  if (glassBase) {
+    root.style.setProperty('--surface-hover', `${glassBase}${alphaToHex(10 / 100)}`)
+  }
+
+}

package/components/sections/ai-tools-paths/tools-paths-panel.tsx

@@ -66,7 +66,7 @@ export function ToolsPathsPanel({
     <div className={cn('w-full', className)}>
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
-        <p className="text-xs text-[#6c7086] leading-relaxed max-w-xl">
+        <p className="text-xs text-neutral-500 leading-relaxed max-w-xl">
           Configure CLI paths for AI coding assistants. Specify executable locations
           to enable integration with your development workflow.
         </p>
@@ -92,7 +92,7 @@ export function ToolsPathsPanel({
       </div>
 
       {/* Tool list */}
-      <div className="bg-[#181825] border border-[#313244] rounded-lg divide-y divide-[#313244]">
+      <div className="bg-neutral-900 border border-neutral-700 rounded-lg divide-y divide-neutral-700">
         {tools.map((tool) => {
           const isRefreshing = refreshingTools.has(tool.id)
           const isEnabled = tool.enabled
@@ -111,7 +111,7 @@ export function ToolsPathsPanel({
                   <span
                     className={cn(
                       'font-medium',
-                      tool.detected && !isEnabled ? 'text-[#6c7086]' : 'text-[#cdd6f4]',
+                      tool.detected && !isEnabled ? 'text-neutral-500' : 'text-neutral-300',
                     )}
                   >
                     {tool.name}
@@ -121,7 +121,7 @@ export function ToolsPathsPanel({
                       className="absolute inset-0 flex items-center pointer-events-none"
                       aria-hidden="true"
                     >
-                      <div className="w-full h-0.5 bg-[#f38ba8]/70 rounded-full" />
+                      <div className="w-full h-0.5 bg-red-400/70 rounded-full" />
                     </div>
                   )}
                 </div>
@@ -132,7 +132,7 @@ export function ToolsPathsPanel({
                       Installed
                     </span>
                   ) : (
-                    <span className="flex items-center gap-1 text-xs text-[#6c7086]">
+                    <span className="flex items-center gap-1 text-xs text-neutral-500">
                       <X className="w-3.5 h-3.5" />
                       Not Found
                     </span>
@@ -149,24 +149,24 @@ export function ToolsPathsPanel({
               {/* Path input row */}
               <div className="space-y-1">
                 <div className="flex items-center gap-2">
-                  <Terminal className="w-3 h-3 text-[#6c7086]" />
+                  <Terminal className="w-3 h-3 text-neutral-500" />
                   <div className="flex-1">
                     <Input
                       value={displayPath}
                       onChange={(newPath) => validateAndUpdatePath(tool.id, newPath)}
                       placeholder={`/usr/local/bin/${tool.id}`}
                       size="sm"
-                      className={displayPath ? 'text-white' : 'text-[#a6adc8]'}
+                      className={displayPath ? 'text-white' : 'text-neutral-400'}
                     />
                   </div>
                   <IconButton
                     icon={
                       isRefreshing ? (
-                        <RefreshCw className="w-3 h-3 text-[#cdd6f4] animate-spin" />
+                        <RefreshCw className="w-3 h-3 text-neutral-300 animate-spin" />
                       ) : hasBeenScanned ? (
                         <Check className="w-3 h-3 text-green-400" />
                       ) : (
-                        <RefreshCw className="w-3 h-3 text-[#cdd6f4]" />
+                        <RefreshCw className="w-3 h-3 text-neutral-300" />
                       )
                     }
                     onClick={() => detectTool(tool.id)}
@@ -188,10 +188,10 @@ export function ToolsPathsPanel({
                   </p>
                 )}
                 {tool.detected && !tool.binaryPath && (
-                  <p className="text-xs text-[#6c7086] pl-5">Using auto-detected path</p>
+                  <p className="text-xs text-neutral-500 pl-5">Using auto-detected path</p>
                 )}
                 {!isEnabled && !displayPath?.includes('/') && !tool.detected && (
-                  <p className="text-xs text-[#6c7086] pl-5">
+                  <p className="text-xs text-neutral-500 pl-5">
                     Tool disabled. Enter path to enable.
                   </p>
                 )}

package/components/sections/captured-issues/captured-issues-panel.tsx

@@ -70,18 +70,18 @@ export function CapturedIssuesPanel({
   return (
     <div className={cn('space-y-6', className)}>
       {hasErrors ? (
-        <div className="bg-[#181825] border border-[#313244] rounded-lg p-4 space-y-4">
+        <div className="bg-neutral-900 border border-neutral-700 rounded-lg p-4 space-y-4">
           {/* Error Summary */}
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <AlertTriangle className="w-4 h-4 text-red-400" />
-              <span className="text-sm text-[#cdd6f4]">
+              <span className="text-sm text-neutral-300">
                 {errorCount > 0 && (
                   <span className="text-red-400">
                     {errorCount} error{errorCount !== 1 ? 's' : ''}
                   </span>
                 )}
-                {errorCount > 0 && warnCount > 0 && <span className="text-[#6c7086]">, </span>}
+                {errorCount > 0 && warnCount > 0 && <span className="text-neutral-500">, </span>}
                 {warnCount > 0 && (
                   <span className="text-yellow-400">
                     {warnCount} warning{warnCount !== 1 ? 's' : ''}
@@ -93,14 +93,14 @@ export function CapturedIssuesPanel({
 
           {/* Error List */}
           <div className="space-y-2">
-            <p className="text-sm text-[#a6adc8]">Captured Errors</p>
-            <div className="max-h-48 overflow-y-auto bg-[#11111b] border border-[#313244] rounded-lg p-3 space-y-1">
+            <p className="text-sm text-neutral-400">Captured Errors</p>
+            <div className="max-h-48 overflow-y-auto bg-neutral-950 border border-neutral-700 rounded-lg p-3 space-y-1">
               {errors.map((error) => (
                 <div key={error.fingerprint} className="text-xs font-mono break-words">
                   <span className={cn('mr-2 shrink-0', error.level === 'warning' ? 'text-yellow-400' : 'text-red-400')}>
                     {error.count > 1 ? `\u00d7${error.count}` : '\u2022'}
                   </span>
-                  <span className="text-[#a6adc8] break-all">{error.message}</span>
+                  <span className="text-neutral-400 break-all">{error.message}</span>
                 </div>
               ))}
             </div>
@@ -108,7 +108,7 @@ export function CapturedIssuesPanel({
 
           {/* Optional Details */}
           <div className="space-y-3">
-            <p className="text-sm text-[#a6adc8]">Add context (optional)</p>
+            <p className="text-sm text-neutral-400">Add context (optional)</p>
             <Input
               value={title}
               onChange={setTitle}
@@ -119,7 +119,7 @@ export function CapturedIssuesPanel({
               onChange={(e) => setDescription(e.target.value)}
               placeholder="What were you doing when this happened?"
               rows={3}
-              className="w-full px-3 py-1.5 bg-[#313244] border border-[#45475a] rounded-lg text-[#cdd6f4] placeholder-[#6c7086] focus:outline-none focus:border-blue-500 transition-colors resize-none text-sm"
+              className="w-full px-3 py-1.5 bg-neutral-750 border border-neutral-600 rounded-lg text-neutral-300 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none text-sm"
             />
             <Input
               type="text"
@@ -157,14 +157,14 @@ export function CapturedIssuesPanel({
           </div>
         </div>
       ) : (
-        <div className="bg-[#181825] border border-[#313244] rounded-lg p-6">
+        <div className="bg-neutral-900 border border-neutral-700 rounded-lg p-6">
           <div className="flex items-center gap-4">
             <div className="w-10 h-10 bg-green-500/10 rounded-lg flex items-center justify-center">
               <Check className="w-5 h-5 text-green-400" />
             </div>
             <div>
-              <h3 className="text-[#cdd6f4] font-medium">No Issues Captured</h3>
-              <p className="text-sm text-[#6c7086]">Everything is running smoothly.</p>
+              <h3 className="text-neutral-300 font-medium">No Issues Captured</h3>
+              <p className="text-sm text-neutral-500">Everything is running smoothly.</p>
             </div>
           </div>
         </div>
@@ -172,31 +172,31 @@ export function CapturedIssuesPanel({
 
       {/* Previously Reported */}
       {submittedErrors.length > 0 && (
-        <div className="bg-[#181825] border border-[#313244] rounded-lg overflow-hidden">
+        <div className="bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden">
           <details className="group">
-            <summary className="flex items-center justify-between p-4 cursor-pointer hover:bg-[#1e1e2e] transition-colors">
+            <summary className="flex items-center justify-between p-4 cursor-pointer hover:bg-neutral-850 transition-colors">
               <div className="flex items-center gap-2">
                 <Check className="w-4 h-4 text-green-400" />
-                <span className="text-sm text-[#cdd6f4]">Previously Reported</span>
-                <span className="text-xs text-[#6c7086]">({submittedErrors.length})</span>
+                <span className="text-sm text-neutral-300">Previously Reported</span>
+                <span className="text-xs text-neutral-500">({submittedErrors.length})</span>
               </div>
-              <ChevronDown className="w-4 h-4 text-[#6c7086] transition-transform group-open:rotate-180" />
+              <ChevronDown className="w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180" />
             </summary>
-            <div className="border-t border-[#313244] p-4 space-y-2">
+            <div className="border-t border-neutral-700 p-4 space-y-2">
               {submittedErrors.map((error) => (
                 <div
                   key={error.fingerprint}
-                  className="flex items-start gap-3 p-3 bg-[#11111b] border border-[#313244] rounded-lg"
+                  className="flex items-start gap-3 p-3 bg-neutral-950 border border-neutral-700 rounded-lg"
                 >
                   <Check className="w-4 h-4 text-green-400 mt-0.5 shrink-0" />
                   <div className="flex-1 min-w-0">
                     <p
-                      className="text-sm text-[#cdd6f4] font-mono truncate"
+                      className="text-sm text-neutral-300 font-mono truncate"
                       title={error.message}
                     >
                       {error.message}
                     </p>
-                    <div className="flex items-center gap-3 mt-1 text-xs text-[#6c7086]">
+                    <div className="flex items-center gap-3 mt-1 text-xs text-neutral-500">
                       {error.count > 0 && (
                         <span className="text-yellow-400/80">+{error.count} since</span>
                       )}

package/components/sections/golden-snapshots/file-diff-viewer.tsx

@@ -81,13 +81,13 @@ function DiffFileItem({ file, isSelected, onSelect, onReset, resettingFile, anyR
   return (
     <div
       className={`flex items-center transition-colors ${
-        isSelected ? 'bg-[#313244]' : 'hover:bg-[#1e1e2e]'
+        isSelected ? 'bg-neutral-700' : 'hover:bg-neutral-850'
       }`}
     >
       <button
         onClick={() => onSelect(file)}
         className={`flex-1 flex items-center gap-2 px-3 py-1 text-xs ${
-          isSelected ? 'text-[#cdd6f4]' : 'text-[#a6adc8]'
+          isSelected ? 'text-neutral-300' : 'text-neutral-400'
         }`}
       >
         {icon}
@@ -166,7 +166,7 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
     // Root-level nodes get colored styling, nested folders get muted styling
     const headerClasses = isRoot
       ? `${color.text} ${color.hoverBg} border-l-2 ${color.border} ${color.bg} px-3 py-2 text-sm font-medium`
-      : 'text-[#6c7086] hover:bg-[#1e1e2e] px-3 py-1.5'
+      : 'text-neutral-500 hover:bg-neutral-850 px-3 py-1.5'
 
     const chevronSize = isRoot ? 'w-4 h-4' : 'w-3 h-3'
 
@@ -175,7 +175,7 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
         {fileCount}
       </span>
     ) : (
-      <span className="text-[#585b70] ml-auto">{fileCount}</span>
+      <span className="text-neutral-600 ml-auto">{fileCount}</span>
     )
 
     const containerLineClass = isRoot ? color.line : lineClass
@@ -191,7 +191,7 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
           ) : (
             <ChevronDown className={chevronSize} />
           )}
-          {isRoot ? null : <Folder className="w-3 h-3 text-[#585b70]" />}
+          {isRoot ? null : <Folder className="w-3 h-3 text-neutral-600" />}
           {displayLabel}
           {countElement}
         </button>
@@ -219,9 +219,9 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
   }
 
   return (
-    <div className="w-72 flex-shrink-0 bg-[#181825] rounded-lg border border-[#313244] overflow-hidden flex flex-col">
+    <div className="w-72 flex-shrink-0 bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden flex flex-col">
       {/* Summary Header */}
-      <div className="p-3 border-b border-[#313244] flex-shrink-0">
+      <div className="p-3 border-b border-neutral-700 flex-shrink-0">
         <div className="flex gap-3 text-xs">
           <span className="text-green-400">+{diff!.summary.added}</span>
           <span className="text-red-400">-{diff!.summary.removed}</span>
@@ -231,7 +231,7 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
       </div>
 
       {/* Filter Tabs */}
-      <div className="flex items-center justify-between p-2 border-b border-[#313244] flex-shrink-0">
+      <div className="flex items-center justify-between p-2 border-b border-neutral-700 flex-shrink-0">
         <div className="flex items-center gap-1">
           {(['all', 'modified', 'added', 'removed'] as const).map((filter) => (
             <button
@@ -239,8 +239,8 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
               onClick={() => setDiffFilter(filter)}
               className={`px-2 py-1 rounded text-xs transition-colors cursor-pointer ${
                 diffFilter === filter
-                  ? 'bg-[#313244] text-[#cdd6f4]'
-                  : 'text-[#6c7086] hover:text-[#a6adc8]'
+                  ? 'bg-neutral-700 text-neutral-300'
+                  : 'text-neutral-500 hover:text-neutral-400'
               }`}
             >
               {filter === 'all' ? 'All' : filter.charAt(0).toUpperCase() + filter.slice(1)}
@@ -294,8 +294,8 @@ function DiffEditorPanel({ sync, componentLabels, monacoTheme }: DiffEditorPanel
 
   if (!selectedDiffFile) {
     return (
-      <div className="flex-1 min-w-0 bg-[#181825] rounded-lg border border-[#313244] overflow-hidden flex flex-col">
-        <div className="flex items-center justify-center h-full text-sm text-[#6c7086]">
+      <div className="flex-1 min-w-0 bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden flex flex-col">
+        <div className="flex items-center justify-center h-full text-sm text-neutral-500">
           Select a file from the tree to view differences
         </div>
       </div>
@@ -305,12 +305,12 @@ function DiffEditorPanel({ sync, componentLabels, monacoTheme }: DiffEditorPanel
   const compLabel = componentLabels?.[selectedDiffFile.component] ?? selectedDiffFile.component
 
   return (
-    <div className="flex-1 min-w-0 bg-[#181825] rounded-lg border border-[#313244] overflow-hidden flex flex-col">
+    <div className="flex-1 min-w-0 bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden flex flex-col">
       {/* File Header */}
-      <div className="flex items-center justify-between px-4 py-2 border-b border-[#313244] flex-shrink-0">
+      <div className="flex items-center justify-between px-4 py-2 border-b border-neutral-700 flex-shrink-0">
         <div className="flex items-center gap-2">
           <FileCode className="w-4 h-4 flex-shrink-0 text-blue-400/50" />
-          <span className="text-sm text-[#cdd6f4] font-medium">
+          <span className="text-sm text-neutral-300 font-medium">
             {selectedDiffFile.component}/{selectedDiffFile.path}
           </span>
           {devtools && hasUnsavedChanges && (
@@ -319,7 +319,7 @@ function DiffEditorPanel({ sync, componentLabels, monacoTheme }: DiffEditorPanel
             </span>
           )}
         </div>
-        <span className="text-xs text-[#6c7086]">{compLabel}</span>
+        <span className="text-xs text-neutral-500">{compLabel}</span>
       </div>
 
       {/* Diff Editor */}
@@ -355,7 +355,7 @@ function DiffEditorPanel({ sync, componentLabels, monacoTheme }: DiffEditorPanel
             }}
           />
         ) : (
-          <div className="flex items-center justify-center h-full text-sm text-[#6c7086]">
+          <div className="flex items-center justify-center h-full text-sm text-neutral-500">
             Loading file content...
           </div>
         )}
@@ -404,14 +404,14 @@ export function FileDiffViewer({ sync, componentLabels, monacoTheme, renderFileI
       </div>
 
       {diffLoading ? (
-        <div className="text-sm text-[#6c7086] text-center py-8">Loading diff...</div>
+        <div className="text-sm text-neutral-500 text-center py-8">Loading diff...</div>
       ) : diff ? (
         <div className="flex gap-4 flex-1 min-h-[400px]">
           <DiffFileTreePanel sync={sync} componentLabels={componentLabels} renderFileIcon={renderFileIcon} />
           <DiffEditorPanel sync={sync} componentLabels={componentLabels} monacoTheme={monacoTheme} />
         </div>
       ) : (
-        <div className="text-sm text-[#6c7086] text-center py-8">
+        <div className="text-sm text-neutral-500 text-center py-8">
           No diff data available. Click refresh to load.
         </div>
       )}

package/components/sections/golden-snapshots/golden-sync-panel.tsx

@@ -115,10 +115,10 @@ export function GoldenSyncPanel({
       <div className="flex-shrink-0">
         <div className="flex items-start justify-between mb-4">
           <div className="space-y-1">
-            <h3 className="text-base font-semibold text-[#cdd6f4]">
+            <h3 className="text-base font-semibold text-neutral-300">
               {TAB_DESCRIPTIONS[activeTab].title}
             </h3>
-            <p className="text-sm text-[#a6adc8]">
+            <p className="text-sm text-neutral-400">
               {TAB_DESCRIPTIONS[activeTab].description}
             </p>
           </div>
@@ -174,7 +174,7 @@ export function GoldenSyncPanel({
       {/* Content */}
       <div className={activeTab === 'diff' ? 'flex-1 min-h-0 mt-4' : 'space-y-6 mt-4'}>
         {loading && activeTab === 'status' ? (
-          <div className="text-sm text-[#6c7086] text-center py-8">Loading...</div>
+          <div className="text-sm text-neutral-500 text-center py-8">Loading...</div>
         ) : activeTab === 'status' ? (
           <StatusOverview
             status={status}

package/components/sections/golden-snapshots/snapshot-manager.tsx

@@ -45,18 +45,18 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
   }
 
   if (manifestLoading && !manifest) {
-    return <div className="text-sm text-[#6c7086] text-center py-8">Loading snapshots...</div>
+    return <div className="text-sm text-neutral-500 text-center py-8">Loading snapshots...</div>
   }
 
   return (
     <div className="space-y-4">
       {/* Create Snapshot */}
-      <div className="bg-[#181825] rounded-lg p-4 border border-[#313244]">
+      <div className="bg-neutral-900 rounded-lg p-4 border border-neutral-700">
         <div className="flex items-center gap-3 mb-3">
           <Plus className="w-5 h-5 text-green-400" />
-          <h4 className="text-[#cdd6f4] font-medium">Create Snapshot</h4>
+          <h4 className="text-neutral-300 font-medium">Create Snapshot</h4>
         </div>
-        <p className="text-xs text-[#585b70] mb-3">
+        <p className="text-xs text-neutral-600 mb-3">
           Archives the current live state. If components differ from golden, their patch version is auto-bumped.
         </p>
         <div className="flex gap-2">
@@ -81,12 +81,12 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
       </div>
 
       {/* Snapshots List */}
-      <div className="bg-[#181825] rounded-lg border border-[#313244] overflow-hidden">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-[#313244]">
+      <div className="bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-700">
           <div className="flex items-center gap-2">
-            <Archive className="w-4 h-4 text-[#6c7086]" />
-            <h4 className="text-[#cdd6f4] font-medium">Snapshots</h4>
-            <span className="text-xs text-[#6c7086]">({manifest?.snapshots.length ?? 0})</span>
+            <Archive className="w-4 h-4 text-neutral-500" />
+            <h4 className="text-neutral-300 font-medium">Snapshots</h4>
+            <span className="text-xs text-neutral-500">({manifest?.snapshots.length ?? 0})</span>
           </div>
           <IconButton
             icon={manifestLoading ? <Loader2 className="animate-spin" /> : <RotateCcw />}
@@ -99,9 +99,9 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
         </div>
 
         {!manifest || manifest.snapshots.length === 0 ? (
-          <div className="text-sm text-[#6c7086] text-center py-8">No snapshots yet</div>
+          <div className="text-sm text-neutral-500 text-center py-8">No snapshots yet</div>
         ) : (
-          <div className="divide-y divide-[#313244]">
+          <div className="divide-y divide-neutral-700">
             {[...manifest.snapshots].reverse().map((snap) => (
               <div
                 key={snap.version}
@@ -112,7 +112,7 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
                 {/* Version + info */}
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm font-mono text-[#cdd6f4]">v{snap.version}</span>
+                    <span className="text-sm font-mono text-neutral-300">v{snap.version}</span>
                     {snap.version === manifest.activeVersion && (
                       <span className="px-1.5 py-0.5 bg-green-500/20 text-green-400 text-[10px] rounded font-medium">
                         active
@@ -122,13 +122,13 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
                       <Pin className="w-3 h-3 text-amber-400" />
                     )}
                     {snap.metaVersion && (
-                      <span className="text-xs text-[#585b70] font-mono">{snap.metaVersion}</span>
+                      <span className="text-xs text-neutral-600 font-mono">{snap.metaVersion}</span>
                     )}
                   </div>
                   <div className="flex items-center gap-2 mt-0.5">
-                    <span className="text-xs text-[#585b70]">{formatDate(snap.createdAt)}</span>
+                    <span className="text-xs text-neutral-600">{formatDate(snap.createdAt)}</span>
                     {snap.description && (
-                      <span className="text-xs text-[#6c7086] truncate">{snap.description}</span>
+                      <span className="text-xs text-neutral-500 truncate">{snap.description}</span>
                     )}
                   </div>
                 </div>