fix(desktop): stop the collapsed rail repainting a third tone in dark mode - #2187
Merged
Conversation
… mode The collapsed sidebar rail overrode its column material with --color-background-surface so the traffic lights would sit on one surface. That was written while AppShell's surface was still the content column's material; .astryx-layout-content now paints --agents-layout-bg (== --color-background-body), so both columns already share one material. In light mode the override happens to equal the floating plate's fill and stayed invisible. In dark mode the plate lifts 0.035L off --background, so the rail landed on a third tone (L 0.205 against the canvas's 0.18) and painted a 49px slab running to the window top, past the plate's 4px gutter and under the light cluster. Drop the override; the rail wears its column's material in both states. The sidenav's background-color/border-color ease goes with it — neither property changes across the collapse any more.
The bug this fixes is a state-dependent token mapping, which AGENTS.md says to lock with a computed-style contract rather than a screenshot. Assert the rail's painted material against the column it must match — not against a literal gray — in both collapse states, plus the transparent inline-end edge. Compare painted RGBA bytes, not computed-style strings: Chromium serializes a relative oklch(from …) token as oklab(), so equal paint can read as unequal text. Take two agreeing reads rather than one sample or a poll-until-equal. A re-materialing rule eases into its new color, so right after the toggle the rail still reports the material it is supposed to keep; measured against the pre-fix rule, both cheaper forms passed. Settled, the pre-fix rule fails with rail 255,255,255 against column 247,247,247.
Astro-Han
marked this pull request as ready for review
August 4, 2026 18:49
AidenNovak
pushed a commit
to AidenNovak/maka-agent
that referenced
this pull request
Aug 7, 2026
…c lights The macOS traffic-light cluster is ~54px wide (x 17..71: 14px discs on 20px centres — main-window.ts, apache#2144) but the collapsed rail is 48px, so the yellow disc straddled the rail/plate seam and the green disc sat on the plate's own top-left corner. No position fits the cluster inside a 48px rail, so the seam is removed from under it instead. Collapsed, the rail puts on the plate's material (--agents-content-area-bg) and the plate docks flush under the titlebar (top margin and top corners to zero): one continuous surface where the lights sit. All three properties ease with the existing collapse width animation (--duration-large). Expanded keeps the floating-plate design untouched. This is the deliberate successor to the repaint apache#2187 removed: that one wore --color-background-surface, which light mode happened to share with the plate and dark mode did not — a third tone under the light cluster. Wearing the plate's own token fuses light and dark by construction. The sidebar-geometry material contract moves with the change: expanded still asserts rail == column (the apache#2187 regression lock), collapsed now asserts rail == plate plus flush margin/radius, compared as painted RGBA bytes so palettes and themes survive.
AidenNovak
pushed a commit
to AidenNovak/maka-agent
that referenced
this pull request
Aug 9, 2026
…c lights The macOS traffic-light cluster is ~54px wide (x 17..71: 14px discs on 20px centres — main-window.ts, apache#2144) but the collapsed rail is 48px, so the yellow disc straddled the rail/plate seam and the green disc sat on the plate's own top-left corner. No position fits the cluster inside a 48px rail, so the seam is removed from under it instead. Collapsed, the rail puts on the plate's material (--agents-content-area-bg) and the plate docks flush under the titlebar (top margin and top corners to zero): one continuous surface where the lights sit. All three properties ease with the existing collapse width animation (--duration-large). Expanded keeps the floating-plate design untouched. This is the deliberate successor to the repaint apache#2187 removed: that one wore --color-background-surface, which light mode happened to share with the plate and dark mode did not — a third tone under the light cluster. Wearing the plate's own token fuses light and dark by construction. The sidebar-geometry material contract moves with the change: expanded still asserts rail == column (the apache#2187 regression lock), collapsed now asserts rail == plate plus flush margin/radius, compared as painted RGBA bytes so palettes and themes survive.
M4n5ter
pushed a commit
to AidenNovak/maka-agent
that referenced
this pull request
Aug 26, 2026
…c lights The macOS traffic-light cluster is ~54px wide (x 17..71: 14px discs on 20px centres — main-window.ts, apache#2144) but the collapsed rail is 48px, so the yellow disc straddled the rail/plate seam and the green disc sat on the plate's own top-left corner. No position fits the cluster inside a 48px rail, so the seam is removed from under it instead. Collapsed, the rail puts on the plate's material (--agents-content-area-bg) and the plate docks flush under the titlebar (top margin and top corners to zero): one continuous surface where the lights sit. All three properties ease with the existing collapse width animation (--duration-large). Expanded keeps the floating-plate design untouched. This is the deliberate successor to the repaint apache#2187 removed: that one wore --color-background-surface, which light mode happened to share with the plate and dark mode did not — a third tone under the light cluster. Wearing the plate's own token fuses light and dark by construction. The sidebar-geometry material contract moves with the change: expanded still asserts rail == column (the apache#2187 regression lock), collapsed now asserts rail == plate plus flush margin/radius, compared as painted RGBA bytes so palettes and themes survive.
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
Collapsed, the sidebar rail painted a 49px slab that ran to the window top — past the content plate's 4px gutter and under the traffic-light cluster — in dark mode only.
shell-layout.cssoverrode the collapsed rail's column material with--color-background-surfaceso the lights would sit on one surface instead of straddling a column edge narrower than they are. That was written while AppShell's own surface was still the content column's material..astryx-layout-contentnow paints--agents-layout-bg(== --surface-canvas == --color-background-body), so the two columns already share one material and the override was the only thing breaking the band:--color-background-surfacehappens to equal the floating plate's fill (on darwin--color-bg-containeris--background), so the slab was invisible.0.035Loff--background, so the rail landed on a third tone — measuredL 0.205against the canvas's0.18— and the slab showed.Drop the override. The rail wears its column's material in both collapse states, which is what "one surface" meant in the first place. The
border-inline-end-color: transparenthalf of the old rule was already covered by the unconditional rule below it.The sidenav's
background-color, border-colorease inmakaTheme.tsgoes with it: neither property changes across the collapse any more, so it had nothing left to interpolate.maka.cssregenerated withnpm run astryx:theme.Verification
New computed-style contract in
e2e/sidebar-geometry.spec.ts— the rail's painted material must equal.astryx-layout-content's in both collapse states, with a transparent inline-end edge. Red onmain(collapsed rail255,255,255against the column's247,247,247), green here.Two details the contract had to get right, both measured against the pre-fix rule rather than assumed:
oklch(from …)token asoklab(), so equal paint can read as unequal text.Computed styles read over CDP from the live dev app (darwin, vibrancy shell) for the tone analysis above:
.astryx-app-shell-sidenav.astryx-layout-content.maka-panel-detailoklch(0.205 0.004 286)oklch(0.18 0.004 286)oklch(0.24 0.004 286)oklch(0.18 0.004 286)oklch(0.18 0.004 286)oklch(0.24 0.004 286)oklch(1 0 0)oklch(0.975 0 0)oklch(1 0 0)oklch(0.975 0 0)oklch(0.975 0 0)oklch(1 0 0)oklch(0.18 0.004 286)oklch(0.18 0.004 286)oklch(0.975 0 0)oklch(0.975 0 0)Also ran:
npm run format:check,npm run lint,npm run typecheck --workspace @maka/desktop, and the fullsidebar-geometryspec (3 passed) — all clean.Intended consequences on the other platform/theme combinations
Expanded is unchanged everywhere. Collapsed moves wherever the rail was previously wearing the plate's fill instead of its column's:
1.0 → 0.975, the value its own expanded state already used. The plate's top-left radius now reads against the canvas the same way it does on the other three sides.--backgroundthere, so the rail moves0.205 → 0.18and now contrasts with the plate along its full height, where the two previously matched. This is the same relationship the expanded rail has always had on those platforms.Keeping the rail on the plate's fill is what produced the darwin-dark bug, and preserving it would need a per-platform material fork. Both moves are the same decision: the rail wears its column's material, in every state and on every platform.