feat: improve dark mode contrast and add success/warning tokens (#54)

- Lift background from 13% to 15% lightness (softer than pure black)
- Soften foreground from 95% to 90% (reduces glare)
- Increase surface elevation separation (card 22%, popover 28%)
- Make muted-foreground more readable (65% → 72%)
- Make borders more visible (28% → 35%)
- Add --success and --warning design tokens
- Replace all hardcoded Tailwind colors (green-500, purple-500, yellow-500)
  with design tokens for consistent theming
- Boost annotation highlight opacity in dark mode for better readability

Closes #53

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: backnotprop

packages/editor/App.tsx

@@ -627,8 +627,8 @@ const App: React.FC = () => {
                       isSubmitting
                         ? 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground'
                         : origin === 'claude-code' && annotations.length > 0
-                          ? 'bg-green-600/50 text-white/70 hover:bg-green-600 hover:text-white'
-                          : 'bg-green-600 text-white hover:bg-green-500'
+                          ? 'bg-success/50 text-success-foreground/70 hover:bg-success hover:text-success-foreground'
+                          : 'bg-success text-success-foreground hover:opacity-90'
                     }`}
                   >
                     <span className="md:hidden">{isSubmitting ? '...' : 'OK'}</span>
@@ -769,7 +769,7 @@ const App: React.FC = () => {
             <div className="text-center space-y-6 max-w-md px-8">
               <div className={`mx-auto w-16 h-16 rounded-full flex items-center justify-center ${
                 submitted === 'approved'
-                  ? 'bg-green-500/20 text-green-500'
+                  ? 'bg-success/20 text-success'
                   : 'bg-accent/20 text-accent'
               }`}>
                 {submitted === 'approved' ? (

packages/editor/index.css

@@ -6,25 +6,29 @@
 @source "./*.tsx";
 
 :root {
-  --background: oklch(0.13 0.02 260);
-  --foreground: oklch(0.95 0.01 260);
-  --card: oklch(0.16 0.02 260);
-  --card-foreground: oklch(0.95 0.01 260);
-  --popover: oklch(0.18 0.025 260);
-  --popover-foreground: oklch(0.95 0.01 260);
+  --background: oklch(0.15 0.02 260);
+  --foreground: oklch(0.90 0.01 260);
+  --card: oklch(0.22 0.02 260);
+  --card-foreground: oklch(0.90 0.01 260);
+  --popover: oklch(0.28 0.025 260);
+  --popover-foreground: oklch(0.90 0.01 260);
   --primary: oklch(0.75 0.18 280);
-  --primary-foreground: oklch(0.13 0.02 260);
+  --primary-foreground: oklch(0.15 0.02 260);
   --secondary: oklch(0.65 0.15 180);
-  --secondary-foreground: oklch(0.13 0.02 260);
-  --muted: oklch(0.22 0.02 260);
-  --muted-foreground: oklch(0.65 0.02 260);
+  --secondary-foreground: oklch(0.15 0.02 260);
+  --muted: oklch(0.26 0.02 260);
+  --muted-foreground: oklch(0.72 0.02 260);
   --accent: oklch(0.70 0.20 60);
-  --accent-foreground: oklch(0.13 0.02 260);
-  --destructive: oklch(0.65 0.22 25);
+  --accent-foreground: oklch(0.15 0.02 260);
+  --destructive: oklch(0.65 0.20 25);
   --destructive-foreground: oklch(0.98 0 0);
-  --border: oklch(0.28 0.02 260);
-  --input: oklch(0.22 0.02 260);
+  --border: oklch(0.35 0.02 260);
+  --input: oklch(0.26 0.02 260);
   --ring: oklch(0.75 0.18 280);
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.15 0.02 260);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.20 0.02 260);
 
   --font-sans: 'Inter', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
@@ -51,6 +55,10 @@
   --border: oklch(0.88 0.01 260);
   --input: oklch(0.92 0.01 260);
   --ring: oklch(0.50 0.25 280);
+  --success: oklch(0.45 0.20 150);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.18 0.02 260);
 }
 
 @theme inline {
@@ -70,6 +78,10 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -95,8 +107,8 @@ body {
 /* Subtle grid background */
 .bg-grid {
   background-image:
-    linear-gradient(to right, oklch(0.25 0.02 260 / 0.5) 1px, transparent 1px),
-    linear-gradient(to bottom, oklch(0.25 0.02 260 / 0.5) 1px, transparent 1px);
+    linear-gradient(to right, oklch(0.32 0.02 260 / 0.5) 1px, transparent 1px),
+    linear-gradient(to bottom, oklch(0.32 0.02 260 / 0.5) 1px, transparent 1px);
   background-size: 24px 24px;
 }
 
@@ -201,17 +213,26 @@ pre code.hljs {
 }
 
 .annotation-highlight.deletion {
-  background: oklch(0.65 0.22 25 / 0.25);
+  background: oklch(0.65 0.20 25 / 0.35);
   text-decoration: line-through;
   text-decoration-color: var(--destructive);
   text-decoration-thickness: 2px;
 }
 
 .annotation-highlight.comment {
-  background: oklch(0.70 0.20 60 / 0.2);
+  background: oklch(0.70 0.18 60 / 0.3);
   border-bottom: 2px solid var(--accent);
 }
 
+/* Light mode: softer highlights */
+.light .annotation-highlight.deletion {
+  background: oklch(0.65 0.22 25 / 0.2);
+}
+
+.light .annotation-highlight.comment {
+  background: oklch(0.70 0.20 60 / 0.15);
+}
+
 .annotation-highlight:hover {
   filter: brightness(1.2);
   cursor: pointer;

packages/ui/components/AnnotationPanel.tsx

@@ -172,8 +172,8 @@ const AnnotationCard: React.FC<{
     },
     [AnnotationType.GLOBAL_COMMENT]: {
       label: 'Global',
-      color: 'text-purple-500',
-      bg: 'bg-purple-500/10',
+      color: 'text-secondary',
+      bg: 'bg-secondary/10',
       icon: (
         <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />

packages/ui/components/AnnotationToolbar.tsx

@@ -162,7 +162,7 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
             onClick={handleCopy}
             icon={copied ? <CheckIcon /> : <CopyIcon />}
             label={copied ? "Copied!" : "Copy"}
-            className={copied ? "text-green-500" : "text-muted-foreground hover:bg-muted hover:text-foreground"}
+            className={copied ? "text-success" : "text-muted-foreground hover:bg-muted hover:text-foreground"}
           />
           <div className="w-px h-5 bg-border mx-0.5" />
           <ToolbarButton

packages/ui/components/ConfirmDialog.tsx

@@ -33,12 +33,12 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
 
   const iconColors = {
     info: 'bg-accent/20 text-accent',
-    warning: 'bg-yellow-500/20 text-yellow-500',
+    warning: 'bg-warning/20 text-warning',
   };
 
   const buttonColors = {
     info: 'bg-primary text-primary-foreground hover:opacity-90',
-    warning: 'bg-yellow-600 text-white hover:bg-yellow-500',
+    warning: 'bg-warning text-warning-foreground hover:opacity-90',
   };
 
   const icons = {

packages/ui/components/ImageAnnotator/Toolbar.tsx

@@ -209,7 +209,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         type="button"
         onClick={onSave}
         title="Save (Esc)"
-        className="p-1.5 rounded transition-colors bg-green-600 text-white hover:bg-green-500"
+        className="p-1.5 rounded transition-colors bg-success text-success-foreground hover:opacity-90"
       >
         <CheckIcon />
       </button>

packages/ui/components/Viewer.tsx

@@ -606,7 +606,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
               <button
                 type="submit"
                 disabled={!globalCommentValue.trim()}
-                className="self-start px-2 py-1.5 text-xs font-medium rounded bg-purple-600 text-white hover:bg-purple-500 disabled:opacity-50 transition-all"
+                className="self-start px-2 py-1.5 text-xs font-medium rounded bg-secondary text-secondary-foreground hover:opacity-90 disabled:opacity-50 transition-all"
               >
                 Add
               </button>
@@ -644,7 +644,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
           >
             {copied ? (
               <>
-                <svg className="w-3.5 h-3.5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <svg className="w-3.5 h-3.5 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                   <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                 </svg>
                 <span className="hidden md:inline">Copied!</span>
@@ -872,7 +872,7 @@ const BlockRenderer: React.FC<{ block: Block }> = ({ block }) => {
           <span className="select-none shrink-0 flex items-center">
             {isCheckbox ? (
               block.checked ? (
-                <svg className="w-4 h-4 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+                <svg className="w-4 h-4 text-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
                   <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
@@ -999,7 +999,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ block, onHover, onLeave, isHovere
         title={copied ? 'Copied!' : 'Copy code'}
       >
         {copied ? (
-          <svg className="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <svg className="w-4 h-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
           </svg>
         ) : (