UI: warm two-tone (Codex-style) theme refresh + chat/sidebar polish#8
Merged
Conversation
Decouple --sidebar from --background-muted so the sidebar reads as a distinct, slightly deeper warm-beige surface against the lighter main canvas — a Codex-style two-tone layering kept low-contrast and warm so it never looks glaring. Add dedicated --sidebar-hover/--sidebar-active tokens (light + dark) and point the sidebar nav item + running-chat hover/active states at them, so deepening the surface doesn't invert the hover/active feedback. Main canvas, cards, and the coral accent are unchanged.
…text-subtle - Drop the elevation box-shadow on list-row and settings-row hover/focus so rows indicate state with background only (surfaces-over-elevation policy). - Replace the sidebar shell's heavy right-edge drop shadow with a 1px hairline in the sidebar-border token — the new two-tone surface already separates it. - Define the previously-undefined --text-subtle / --color-text-subtle token (light + dark) so de-emphasized metadata (Scheduler/Applications/Workflows 'Created/Updated/model' rows) renders muted instead of full-dark.
Add the missing flat page-header bottom border; replace inline rgba box-shadows on the graph panel, toolbar buttons, ingest/paste boxes, model picker and KB selector with border-border-subtle; reduce coral overuse on the dropzone drag-active state to a neutral fill + subtle 1px accent border. Graph canvas color scale left untouched (canvas can't consume CSS tokens).
Add the mandated header bottom-border divider and description; align section labels (Models/Chat/App tabs) from text-xs to the text-[11px] token size.
Neutralize off-policy card/row box-shadows to borders across the list views and their modals; keep behavior and hover-reveal logic unchanged.
Remove app-grid card hover elevation (border-only); apply the metric type scale (text-3xl font-mono font-light) to the Home Sessions/Tokens totals; flatten FoldedCard's inline shadow to a token border.
…nsions highlight Constrain the Skills header divider to the ReadableContent inset so it no longer overshoots; give the onboarding model selects a focus affordance + subtle border; swap the extensions deep-link highlight's hard-coded blue shadow for a soft coral ring.
Point the floating composer at var(--shadow-default) instead of hard-coded rgba; give Diagnostics semantic text/bg tokens instead of neutral-*/black; align dropdown submenu radius/padding with the parent menu.
The composer had a transparent border and the very-light --shadow-default, so its edge nearly vanished against the white canvas. Give it a warm hairline border-border-subtle and a dedicated --shadow-composer token (a hair more lift than --shadow-default, warm-tinted) so the chat box reads as a distinct, gently raised surface — kept deliberately subtle. New token, not a change to the shared --shadow-default (which the base Card also uses).
…idebar The inset-variant main content carried rounded-xl + shadow-sm; with the flush, full-height square sidebar that left a rounded notch where the two met. Drop the corner radius and floating shadow so the content butts cleanly against the sidebar.
BaseChat's coherent-mode chat panel, sticky header, and composer bar hard-coded bg-background-default (pure white) while every other view renders on bg-background-muted (#faf8f3) via MainPanelLayout — so the chat read as a stark white slab. Point them at bg-background-muted so the chat is the same elegant off-white; the bordered white composer input now reads as a raised surface on top. Warm the three remaining full-screen white pages (provider gate, permission page, schedule detail) for the same consistency.
When the sidebar retracts, the chat goes full-width and the session-name pill slid to x~16 — directly over the macOS traffic lights (x20-85) and crowding the floating top controls (which end at x172). Add a collapsed-state left offset to the pill (pl-[184px] on macOS to clear traffic lights + controls, pl-[104px] elsewhere) via the already-available useSidebar() state, so the top strip reads cleanly: traffic-lights -> controls -> session name. Expanded layout is unchanged (pl-4).
… chat The chat's session-name pill wrapper is a full-width -webkit-app-region: drag surface (so the header strip drags the window). When the sidebar collapsed, the chat went full-width and that drag surface covered the floating top controls (sidebar toggle / new-window / dashboard). -webkit-app-region is resolved by the compositor in paint order, not z-index, so the drag surface swallowed the controls' real mouse clicks even though they are higher-z no-drag buttons — the buttons looked active but did nothing. Shrink the pill wrapper to w-fit and offset it past the controls with a margin when collapsed so it no longer overlaps them; only the standard base .titlebar-drag-region (which every other screen's controls already sit over) remains. Expanded layout is unchanged.
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
A warm, Codex-inspired refresh of the desktop GUI — a subtly two-tone canvas (a distinct warm-beige sidebar against a lighter content area), flattened surfaces, and a handful of polish fixes — while preserving BioRouter's warm cream identity. The change is token-centric (
ui/desktop/src/styles/main.css), so it cascades across every view and mirrors automatically in dark mode.What changed
Two-tone canvas
--sidebarfrom--background-mutedinto its own warm-beige surface (#f3ede1), with dedicated--sidebar-hover/--sidebar-activetokens (light + dark) so hover/active feedback doesn't invert when the surface deepens.Flat / minimal harmonization (every screen + popups)
--text-subtle/--color-text-subtletoken so de-emphasized metadata (Scheduler/Applications/Workflows) renders muted instead of full-dark.Chat + composer polish
bg-background-mutedoff-white every other view uses (viaMainPanelLayout); the bordered white composer now reads as a raised surface on top.--shadow-composerlift.Layout fixes
rounded-xl+shadow-smthat left a corner notch).-webkit-app-region: dragwrapper so it no longer swallows the controls' clicks (app-region is resolved by compositor paint order, not z-index).Verification
Driven live against the running dev app across all 11 screens + key popups, light and dark mode; zero renderer console errors;
prettier+eslintclean on all touched files.Follow-up (not in this PR)
An accessibility/correctness audit surfaced 41 verified findings (e.g. the Home
<h1>greeting split into per-character spans with noaria-label; the Skills enable/disableSwitchlacking an accessible name; hover-only row actions with no keyboard focus fallback; session-list rows not keyboard-openable). These were deliberately kept out of this theme PR and are tracked for a dedicated a11y pass.