feat(ui): Linear dark shell — palette + density pass (re-traced from #302)#353
Merged
Conversation
Swap the GitHub-dark theme for a Linear-style dark palette (teal accent, near-black lifted off pure black to kill halation, slightly softened body text), plus a quiet body gradient and teal selection highlight. Re-traced by hand rather than merging #302 (62 commits stale; its behavioral changes — landing-route rewrite, mock composer, demo-banner gating — collide with / regress functional master). This commit is the isolated, zero-logic visual layer only. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Re-trace the worthwhile visual layer of #302 onto current master (the PR itself is 62 commits stale and its behavioral changes regress functional master — see the palette commit for the full rationale): - ActivityBar: 216px rail (down from the PR's 276 — info density doesn't justify the width), round logo w/ teal glow, tighter row rhythm, inset active highlight, quieter hover. Unread badge stays red (no downgrade). - Sidebar / TabStrip / App: border opacity + hover tints tuned for the dark palette. TabStrip keeps the Linear-style active chip (the product is deliberately Linear-left / VS-Code-right); the PR's rounded floating card around the editor was dropped — VS Code editor panes are flush. - ChatLandingPage: full-bleed, responsive-only backdrop (gradient wash + faint grid) behind the real composer. The #302 mock's %-positioned circle / diagonal bars were dropped — they drift on portrait. The pixel-art image in the PR screenshots was never committed to the PR. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Design influence (#302) — palette + navigation density re-traced into the app. Code not merged per the in-house-only policy; recognized per the CONTRIBUTORS convention. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
luokerenx4
pushed a commit
that referenced
this pull request
Jun 16, 2026
…toggle The shell was dark-only (the #353 Linear palette). Add a real adaptive color mode so the all-black structure isn't the only option. Two palettes, one identity — alice-blue (her dress, from the character card) is the brand accent in BOTH modes: - Daybreak (light): cream paper + engraved-navy ink + alice-blue + gold. - Midnight (dark): TradingView-ward trading terminal — charcoal canvas, layered panels, brightened alice-blue, teal up / coral down (the #353 contributor's teal is reused as the up/positive color). How it works: - index.css `@theme` holds Daybreak (light) as the DEFAULT; a `:root[data-theme="dark"]` block + a `@media (prefers-color-scheme:dark)` block flip the same `--color-*` token names, so every bg-bg / text-accent / border-border utility follows the active theme with zero component changes. `auto` follows the OS. - theme store (ui/src/theme, mirrors the locale store): light|dark|auto, persisted; side-effect module applies `<html data-theme>`. An inline script in index.html mirrors the persisted value pre-paint (no flash). - ThemeToggle in the ActivityBar footer cycles auto → light → dark. De-hardcoded the chrome that assumed a dark bg: ActivityBar / TabStrip hover + active overlays and the ChatLanding backdrop now use two theme-aware overlay tokens (--color-overlay / -strong); the avatar / empty-editor / form-focus accent glows now use --color-accent-dim instead of stale GitHub-blue rgba literals. Deferred (ANG-110): the Workspaces surface keeps its own local dark palette (its ~40 semantic chips would wash out illegibly on cream without a dedicated pass), and a few data-viz colors (chart, react-flow, session status). A dark terminal-ish surface in a light app is acceptable interim. Living color card kept as a dev artifact: ui/design/theme-study.html. Test plan: - cd ui && npx tsc -b clean; vite build clean (overlay utilities + data-theme/prefers-color-scheme blocks emitted) - ui vitest project green (42) - Verified live (demo): light applies cream/navy/alice-blue, dark applies the TradingView set, toggle cycles auto→light→dark and persists 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
4 tasks
luokerenx4
pushed a commit
that referenced
this pull request
Jun 16, 2026
The TradingView-ward dark (#131722 navy-charcoal panels) read as "too blue" once the full shell — activity rail + sidebar + tabs — was on screen: a large navy-tinted surface is fatiguing. Revert the dark backgrounds / panels / border / text to the #353 neutral-black palette (#0b0c0e / #0e0f12 / #1a1b21 / #24262c / #dfe1e6 / #8f929b), which stays calm at shell scale. Alice-blue survives ONLY as small brand highlights — the accent (active tab / nav indicator / buttons) and the user's own message bubble — so the large-area blue tint is gone while the brand stays consistent with Daybreak. Green/red/purple semantics also revert to the #353 values. Daybreak (light) is unchanged. Color card (ui/design/theme-study.html) synced to match. Verified: vite build emits --color-bg:#0b0c0e under [data-theme=dark], --color-accent stays #3b82f6.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Test plan
cd ui && npx tsc -bcleannpx tsc --noEmitfrom root (Alice src/ — untouched, but run as canonical gate)pnpm testBoundary touch
None — UI-only, no trading / auth / broker credentials / migrations.
🤖 Generated with Claude Code