fix(website): give arch-flow console badges an on-dark palette - #1060
Merged
Conversation
The developer-console panel in ArchFlowDiagram paints a hardcoded #1a1b26 ground. It is not a [data-ui="section"][data-surface="dark"] scope, so it never inherits that scope's re-pointed --color-* values and the light-surface tokens landed on it unchanged. All four source badges failed contrast against the composited badge ground: angular 2.95:1, transport 2.01:1, signal 4.03:1, and langgraph 1.13:1 — the ATC retheme pointed that one at --color-accent, which resolves to scope navy #15253E at :root, so it rendered near-black on near-black. Scoping the panel as a dark section was not an option: that scope carries section padding, a navy gradient background and a ::before accent seam, and its surfaces are neutral greys rather than #1a1b26. Instead the panel now declares a local on-dark palette and the badges read from it, keeping each hue identity as a light ink over a 0.14-alpha tint of the same hue. Ratios measured on the rendered page via getComputedStyle, compositing every background layer up to the first opaque ancestor (not against white): angular 8.14:1, transport 7.40:1, langgraph 7.03:1, signal 8.57:1. Aviation yellow carries text at 7.03:1 on this ground, where on white it is a fill only at 1.84:1. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
blove
enabled auto-merge (squash)
September 8, 2026 14:46
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
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.
What
The developer-console panel in
ArchFlowDiagrampaints a hardcoded#1a1b26ground. It is not a[data-ui="section"][data-surface="dark"]scope, so it never inherits that scope's re-pointed--color-*values — the light-surface tokens landed on it unchanged. All four.arch-flow-log-sourcebadges failed contrast against it.Measured against the composited badge ground (tint over
#1a1b26), before this change:langgraphvar(--color-accent)→#15253Etransport#5e35b1angular#c62828signal#059669Most of this predates the ATC retheme, but
langgraphdoes not: the retheme pointed it at--color-accent, which resolves to scope navy#15253Eat:root, so that badge renders near-black on near-black.Approach
Section-scoping the panel was a non-starter —
[data-surface="dark"]carries section padding, a navy gradient background and a::beforeaccent seam, and its surfaces are neutral greys rather than#1a1b26. Instead the panel declares a local on-dark palette in its own rule block and the badges read from it. Each keeps its hue identity (Angular red, transport purple, aviation yellow, render green) as a light ink over a 0.14-alpha tint of the same hue.Verification
Ratios read off the rendered page via
getComputedStyle, compositing every background layer up to the first opaque ancestor — not against white:angular#ff9e9ergb(53, 23, 40)transport#c3b0ffrgb(42, 40, 65)langgraph#FFAF00rgb(58, 48, 33)signal#5fe3b0rgb(25, 49, 51)All clear 4.5:1 with margin, which the 8px/600 type needs. Aviation yellow works as ink here — 9.27:1 bare, 7.03:1 once its own tint lightens the ground — where on white it is a fill only at 1.84:1.
Also verified: all four variants render legibly and stay distinguishable by hue;
style-contracts.spec.ts+font-vars.spec.tspass (97 tests); no console errors; no test or guard asserted the old hexes.Not included
.arch-flow-console-titleand.arch-flow-log-timeuse#4A527Aon the same panel at 2.26:1 — same defect class, same component, but outside the scope of this fix. Worth a follow-up.🤖 Generated with Claude Code