From 45ce9f3792f835efddd6c2cd5a080372d7f297ec Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Sat, 9 May 2026 12:12:59 +0200
Subject: [PATCH 1/3] style(theme): rework light palette to neutral zinc, lift
 chrome and code area

The light theme had a faint purple cast (B>R+G across bg, surface,
border) and three flat off-white panels surrounded by a barely-visible
canvas frame. Replace with Tailwind's zinc scale: subtly cool but
not blue-tinted, the modern-tool grey used by Linear/Vercel/Stripe.

- Side panels stay near-white (#fafafa)
- Canvas frame deepens to #e4e4e7 so the white label visibly pops
- Header and bottom output wrapper move to bg-surface-2 (#f4f4f5)
  to read as 'tool chrome' separate from the workspace
- ZPL code area inside the output wrapper gets bg-surface so the
  inner header strip stands out from the code body, like an editor
- Borders and muted text picked from zinc-300/400/600 so panel
  separators and secondary text are readable on every surface
---
 src/components/AppShell.tsx         |  4 ++--
 src/components/Output/ZPLOutput.tsx |  2 +-
 src/index.css                       | 14 +++++++-------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index b53b0091..ef98d8ec 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -95,7 +95,7 @@ export function AppShell() {
   return (
     <div className="flex flex-col h-screen overflow-hidden bg-bg text-text font-sans">
       {/* Header */}
-      <header className="h-11 shrink-0 flex items-center justify-between px-4 border-b border-border bg-surface">
+      <header className="h-11 shrink-0 flex items-center justify-between px-4 border-b border-border bg-surface-2">
         <div className="flex items-center gap-3">
           <button
             onClick={() => selectObject(null)}
@@ -329,7 +329,7 @@ export function AppShell() {
 
       {/* Output panel */}
       <div
-        className="shrink-0 border-t border-border flex flex-col bg-surface"
+        className="shrink-0 border-t border-border flex flex-col bg-surface-2"
         style={{ height: outputPanel.collapsed ? "auto" : outputPanel.height }}
       >
         <div
diff --git a/src/components/Output/ZPLOutput.tsx b/src/components/Output/ZPLOutput.tsx
index 13770d2e..ca2d0b97 100644
--- a/src/components/Output/ZPLOutput.tsx
+++ b/src/components/Output/ZPLOutput.tsx
@@ -72,7 +72,7 @@ export function ZPLOutput({ collapsed, onCollapse, onExpand }: Props) {
         </div>
       </div>
 
-      {!collapsed && <pre className="flex-1 overflow-auto p-3 font-mono text-xs leading-relaxed text-text m-0">
+      {!collapsed && <pre className="flex-1 overflow-auto p-3 font-mono text-xs leading-relaxed text-text m-0 bg-surface">
         {zpl
           ? zpl.split('\n').map((line, i) => (
               <ZplLine key={i} line={line} />
diff --git a/src/index.css b/src/index.css
index aa31c616..e3f8e90a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,13 +20,13 @@
    user's explicit choice afterwards, so an OS media-query fallback would
    only fight with the cached preference. */
 :root[data-theme="light"] {
-  --color-bg:        #f4f4f8;
-  --color-surface:   #ffffff;
-  --color-surface-2: #ececf3;
-  --color-border:    #dcdce8;
-  --color-border-2:  #c8c8d8;
-  --color-text:      #1a1a2e;
-  --color-muted:     #8080a8;
+  --color-bg:        #e4e4e7;
+  --color-surface:   #fafafa;
+  --color-surface-2: #f4f4f5;
+  --color-border:    #d4d4d8;
+  --color-border-2:  #a1a1aa;
+  --color-text:      #18181b;
+  --color-muted:     #52525b;
   --color-accent:    #d97706;
   --color-accent-dim:#fef3c7;
 }

From afc9bb5c88afbad1d5fbb9317e727b5a1c9b8a14 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Sat, 9 May 2026 12:29:38 +0200
Subject: [PATCH 2/3] fix(theme): align canvas/ruler colors and chrome button
 hovers with new palette
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two regressions Gemini flagged on the zinc light-theme PR:

- LIGHT_COLORS in useColorScheme.ts still held the old purple-tinted
  hex values, so the Konva canvas, grid dots, and rulers stayed
  lila even though the surrounding UI had shifted to neutral zinc.
  Map every entry onto the corresponding zinc step.

- Header (AppShell) and ZPL output wrapper now use bg-surface-2,
  but their icon buttons hover to bg-surface-2 — same color, no
  visible feedback. Swap those buttons' hover to bg-border, which
  reads as 'one step toward more contrast' in both light and dark
  modes.
---
 src/components/AppShell.tsx         |  8 ++++----
 src/components/Output/ZPLOutput.tsx |  2 +-
 src/lib/useColorScheme.ts           | 20 ++++++++++----------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index ef98d8ec..e0053d8f 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -117,7 +117,7 @@ export function AppShell() {
             disabled={!canUndo}
             title={`${t.app.undo} (${kbd('Z')})`}
             aria-label={t.app.undo}
-            className="p-1.5 rounded text-muted hover:text-text hover:bg-surface-2 disabled:opacity-25 disabled:cursor-not-allowed transition-colors"
+            className="p-1.5 rounded text-muted hover:text-text hover:bg-border disabled:opacity-25 disabled:cursor-not-allowed transition-colors"
           >
             <ArrowUturnLeftIcon className="w-3.5 h-3.5" />
           </button>
@@ -126,7 +126,7 @@ export function AppShell() {
             disabled={!canRedo}
             title={`${t.app.redo} (${kbd('Z', { shift: true })})`}
             aria-label={t.app.redo}
-            className="p-1.5 rounded text-muted hover:text-text hover:bg-surface-2 disabled:opacity-25 disabled:cursor-not-allowed transition-colors"
+            className="p-1.5 rounded text-muted hover:text-text hover:bg-border disabled:opacity-25 disabled:cursor-not-allowed transition-colors"
           >
             <ArrowUturnRightIcon className="w-3.5 h-3.5" />
           </button>
@@ -137,7 +137,7 @@ export function AppShell() {
             onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
             title={theme === "dark" ? t.app.themeLight : t.app.themeDark}
             aria-label={t.app.themeToggle}
-            className="p-1.5 rounded text-muted hover:text-text hover:bg-surface-2 transition-colors"
+            className="p-1.5 rounded text-muted hover:text-text hover:bg-border transition-colors"
           >
             {theme === "dark" ? (
               <SunIcon className="w-3.5 h-3.5" />
@@ -168,7 +168,7 @@ export function AppShell() {
             target="_blank"
             rel="noopener noreferrer"
             title="GitHub"
-            className="p-1.5 rounded text-muted hover:text-text hover:bg-surface-2 transition-colors"
+            className="p-1.5 rounded text-muted hover:text-text hover:bg-border transition-colors"
           >
             <GitHubIcon className="w-3.5 h-3.5" />
           </a>
diff --git a/src/components/Output/ZPLOutput.tsx b/src/components/Output/ZPLOutput.tsx
index ca2d0b97..6ec6568b 100644
--- a/src/components/Output/ZPLOutput.tsx
+++ b/src/components/Output/ZPLOutput.tsx
@@ -38,7 +38,7 @@ export function ZPLOutput({ collapsed, onCollapse, onExpand }: Props) {
       <div className="flex items-center justify-between px-3 py-1.5 border-b border-border shrink-0">
         <div className="flex items-center gap-2">
           <button
-            className="p-0.5 rounded text-muted hover:text-text hover:bg-surface-2 transition-colors"
+            className="p-0.5 rounded text-muted hover:text-text hover:bg-border transition-colors"
             onClick={collapsed ? onExpand : onCollapse}
             title={collapsed ? t.app.expand : t.app.collapse}
             aria-label={collapsed ? t.app.expand : t.app.collapse}
diff --git a/src/lib/useColorScheme.ts b/src/lib/useColorScheme.ts
index 4389211e..63b74658 100644
--- a/src/lib/useColorScheme.ts
+++ b/src/lib/useColorScheme.ts
@@ -27,16 +27,16 @@ export const DARK_COLORS: CanvasColors = {
 };
 
 export const LIGHT_COLORS: CanvasColors = {
-  canvasBg:       '#ededf3',
-  canvasDot:      '#bebecf',
-  gridLine:       '#b0b0c4',
-  gridSub:        '#d0d0de',
-  rulerBg:        '#f0f0f6',
-  rulerCorner:    '#e6e6f0',
-  rulerMajorTick: '#505070',
-  rulerMinorTick: '#9090b0',
-  rulerLabel:     '#303060',
-  rulerSeparator: '#d0d0e0',
+  canvasBg:       '#e4e4e7',
+  canvasDot:      '#c4c4c8',
+  gridLine:       '#a1a1aa',
+  gridSub:        '#d4d4d8',
+  rulerBg:        '#f4f4f5',
+  rulerCorner:    '#e4e4e7',
+  rulerMajorTick: '#3f3f46',
+  rulerMinorTick: '#71717a',
+  rulerLabel:     '#27272a',
+  rulerSeparator: '#d4d4d8',
 };
 
 export function useColorScheme(): CanvasColors {

From baafb16155dcf399bb31d89a58fa3cb79798c4a4 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Sat, 9 May 2026 12:34:18 +0200
Subject: [PATCH 3/3] fix(theme): make light canvas dots subtler than grid
 sub-lines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Gemini flagged that canvasDot (#c4c4c8) was darker than gridSub
(#d4d4d8), inverting the visual hierarchy — dots should be the
quietest workspace element, gridSub a step louder, gridLine the
loudest. Drop canvasDot to #dcdce0 so the order is canvas (#e4e4e7)
→ dot (#dcdce0, ~8 step) → gridSub (#d4d4d8, ~16 step) → gridLine
(#a1a1aa, ~67 step). Matches the relative subtlety of the dark
theme's dots.
---
 src/lib/useColorScheme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/useColorScheme.ts b/src/lib/useColorScheme.ts
index 63b74658..c3d53b4d 100644
--- a/src/lib/useColorScheme.ts
+++ b/src/lib/useColorScheme.ts
@@ -28,7 +28,7 @@ export const DARK_COLORS: CanvasColors = {
 
 export const LIGHT_COLORS: CanvasColors = {
   canvasBg:       '#e4e4e7',
-  canvasDot:      '#c4c4c8',
+  canvasDot:      '#dcdce0',
   gridLine:       '#a1a1aa',
   gridSub:        '#d4d4d8',
   rulerBg:        '#f4f4f5',