Skip to content

style(theme): rework light palette to neutral zinc, lift chrome and c… #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
u8array merged 3 commits into from
May 9, 2026
Merged

style(theme): rework light palette to neutral zinc, lift chrome and c… #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
45ce9f3
style(theme): rework light palette to neutral zinc, lift chrome and c…
u8array May 9, 2026
afc9bb5
fix(theme): align canvas/ruler colors and chrome button hovers with n…
u8array May 9, 2026
baafb16
fix(theme): make light canvas dots subtler than grid sub-lines
u8array May 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/components/AppShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Comment thread
u8array marked this conversation as resolved.
<div className="flex items-center gap-3">
<button
onClick={() => selectObject(null)}
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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" />
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Comment thread
u8array marked this conversation as resolved.
style={{ height: outputPanel.collapsed ? "auto" : outputPanel.height }}
>
<div
Expand Down
4 changes: 2 additions & 2 deletions src/components/Output/ZPLOutput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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} />
Expand Down
14 changes: 7 additions & 7 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Comment thread
u8array marked this conversation as resolved.
--color-accent: #d97706;
--color-accent-dim:#fef3c7;
}
Expand Down
20 changes: 10 additions & 10 deletions src/lib/useColorScheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '#dcdce0',
gridLine: '#a1a1aa',
gridSub: '#d4d4d8',
rulerBg: '#f4f4f5',
rulerCorner: '#e4e4e7',
rulerMajorTick: '#3f3f46',
rulerMinorTick: '#71717a',
rulerLabel: '#27272a',
rulerSeparator: '#d4d4d8',
};

export function useColorScheme(): CanvasColors {
Expand Down