style(theme): rework light palette to neutral zinc, lift chrome and c…#37
Conversation
…ode 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
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the light theme to a neutral Zinc color palette and adjusts the background colors for the header and output panel. While the visual refresh is clear, several issues need to be addressed: hardcoded color constants in src/lib/useColorScheme.ts must be updated to match the new CSS variables to prevent visual inconsistencies between the UI and the canvas. Additionally, changing the header and output panel backgrounds to bg-surface-2 has caused a UI regression where button hover states are no longer visible, requiring updates to the hover utility classes for interactive elements in those sections.
…ew palette 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.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request updates the light theme color palette to a Zinc-based scheme, modifying CSS variables, component background classes, and canvas color constants. Feedback suggests adjusting the canvasDot color in the light theme to ensure it remains more subtle than the secondary grid lines, maintaining a proper visual hierarchy.
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.
1 participant
…ode 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.