-
Notifications
You must be signed in to change notification settings - Fork 1
Description
Summary
The Redwoods theme is a dark theme with deep auburn-brown surfaces. While not broken, it lacks a clear visual identity — it reads as "generic dark brown" and doesn't evoke its namesake's character. It also sits uncomfortably close to Namib in feel and is worth rethinking to give each theme a distinct personality.
Problem Statement
Redwoods uses surfaces (#1A1210 canvas, #120C0A sidebar, #1E1512 panel) that are very dark auburn-brown, nearly indistinguishable from Namib's surfaces at a glance. The design intent is presumably inspired by California's coastal redwood forests: deep shadow, rich reddish-brown bark, filtered green light. But the current tokens don't deliver that picture:
- The surface-to-sidebar contrast is minimal (
#1A1210vs#120C0A) — both are so dark that the sidebar barely separates from the canvas. text-primary(#D4C5B8) is a warm off-white that works but reads as "dusty beige" rather than giving the cool filtered-light-under-canopy feel the theme could have.- Terminal colors are muted and unsaturated:
terminal-green(#6D7A4D) is an olive-grey,terminal-red(#A65142) is a dull clay. This is coherent for a low-contrast aesthetic but makes the terminal feel dim and tired. syntax-comment(#4E6A59) is a dark muted green — nearly invisible at typical terminal contrast levels.- The accent
#3F9366(Canopy green) is fine but has no relationship to the other hues in the palette. There's no "narrative" — the warm bark tones and the cool green accent don't dialogue. - The theme is too similar to Namib in overall impression: both are dark warm-brown themes. They need differentiation.
Relevant code:
shared/theme/themes.ts#L684-L746— current Redwoods token definitionsshared/theme/themes.ts#L20-L112—createCanopyTokensderivation context
Desired Behavior
Redwoods should feel like standing inside a coastal redwood grove: deep shadow with rich reddish-brown and russet tones, shafts of cool grey-green light filtering through the canopy. It should be:
- Distinguishable at a glance from Namib (arid/sandy) and Highlands (warm Scottish moorland).
- Rich in the russet-to-auburn surface range — more textured and saturated than Namib's sandy approach.
- Terminal colors that lean into filtered forest light: muted greens, deep browns, and sharp accent yellows for warnings.
- Sidebar and panel separation should be clear — the deep shadow vs. slightly lighter surfaces should read as meaningful depth.
Verification Workflow
- Apply the theme in E2E:
await setAppTheme(window, "redwoods"). - Capture a full-page screenshot.
- Measure: sidebar vs. canvas contrast, panel vs. grid, toolbar text readability.
- AI visual evaluation: does the theme evoke redwood forest? Is it distinct from Namib and Highlands? Are surfaces differentiated?
- Iterate token values; confirm the paired terminal scheme (from PR feat(terminal): match terminal color scheme to app theme automatically #3345) still reads cohesively.
npm run check— zero new errors.
Acceptance Criteria
- Sidebar and canvas surfaces are visually distinct — the sidebar clearly recedes or separates from the main canvas.
- The theme's character (russet bark, forest shadow, cool green light) is recognizable and distinct from Namib and Highlands in a side-by-side screenshot comparison.
- Terminal colors meet minimum legibility contrast on the Redwoods canvas background.
-
syntax-commentis legible — contrast ratio against canvas ≥ 3:1. - All E2E tests pass; no regressions in dark theme contrast checks.
Edge Cases & Risks
border-defaultis set to#2B1D19which is identical tosurface-panel-elevated— this means borders and elevated panels have the same token value, making them visually indistinguishable. The redesign should address this.- The terminal palette matching from PR feat(terminal): match terminal color scheme to app theme automatically #3345 maps Redwoods to a specific scheme — check pairing cohesion after any significant token changes.