fix(agent-preset): make the preset picker readable in both colour modes - #382
Open
Kunstderfug wants to merge 1 commit into
Open
Kunstderfug wants to merge 1 commit into
Kunstderfug wants to merge 1 commit into
Conversation
The preset chip sat beside the workspace picker with no border at all, so it read as a stray label rather than a control. It now carries a 1px state-business ring, paid for out of the old horizontal padding (8px to 7px) so the chip keeps its width and stays aligned with its neighbours. The "Browse Awesome Presets..." footer was the one row in that menu painted in accent blue, using a fixed #3154df over a translucent accent tint. On the dark-theme menu surface that measures 2.64:1 -- visibly wrong blue-on-dark, and far below the 4.5:1 floor for body text. The row now takes a blue per colour mode: #3a58c4 in light, #679efe in dark (5.10:1), with the hover tints following each. The dark override keys off body[data-ds-dark-theme] rather than light-dark(): the app never declares color-scheme, so light-dark() would silently resolve to its light branch while the dark theme is active. The test computes WCAG contrast for both modes, keeps the old #3154df as an explicit failing floor, and pins the ring plus the absence of light-dark().
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
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
Two colour-mode problems in the agent-preset picker.
1. The preset chip had no border at all (
border:none), so sitting beside the workspace picker it read as a stray label rather than a control. It now carries a 1px--dsw-alias-state-business-primaryring, with the horizontal padding trimmed from 8px to 7px so the ring is paid for out of the existing box: the chip neither grows nor shifts against its neighbours. The label stays--dsw-alias-label-primaryin both modes, so the mode is carried by the ring rather than by coloured type.2. The "Browse Awesome Presets…" footer was the one row in that menu painted accent blue, and it used a fixed, dark-mode-blind
#3154dfover a translucent accent tint. Contrast against the row's own painted background:#3154df)rgb(30,33,45)#e6e6e62.50:1 is well under the 4.5:1 AA floor for body text and reads exactly as the "blue text on dark background" bug. The row now resolves per colour mode (
#3a58c4light,#679efedark) with the hover tint following each.Disclosure: the replacement light blue is marginally lighter than the old one, so the light-theme cases lose a little margin (4.60 → 4.50 on the
#e6e6e6menu, i.e. exactly on the floor). Dark mode goes from broken to comfortable. Darkening the light value is a one-value change if you want margin there.Why
body[data-ds-dark-theme]and notlight-dark()I reached for
light-dark()first. It is supported in the bundled Chromium, but the app never declarescolor-scheme(computed valuenormal), solight-dark()silently resolves to its light branch while the dark theme is active — a fix that changes nothing on screen. The override therefore keys offbody[data-ds-dark-theme], the mechanism the rest of the app already uses. The test asserts both that the attribute selector is present and thatlight-dark(is absent.Verification
border: 1px solid rgb(103, 158, 254)withpadding: 0px 7px, and the injected stylesheet carries the newbody[data-ds-dark-theme] .YgMYBq_awesomerules.client.jsbyte-for-byte (f2a3279e…).npx vitest run test/agent-preset-chip.test.ts— 8 passed on this branch alone. It does real WCAG relative-luminance and compositing math for both modes, and keeps the old#3154dfas an explicit failing floor rather than a passing number.npm test— 810 passed / 95 files.npm run typecheckclean.