fix(ai-accounts): make the quota bar green legible instead of neutral - #938
Merged
Conversation
#936 and #937 read the flat green field as too much colour and drained it to slate. That was the wrong diagnosis: the problem was never that the bar was green, it was that the green was a 20%-opacity wash under text-slate-600 labels and text-slate-400 countdowns — nothing on the row had enough contrast to read, and draining the colour only made a dull row duller. Restore the green and spend the contrast where it earns something: - The fill drops the opacity wrapper for a solid but light tint (emerald-100), so text sits on a known colour instead of a wash. - A 2px rule runs down the fill's right edge. That edge is what encodes the percentage, and it locates the value far more precisely than a block boundary — which matters most at 100%, where the fill covers the whole row and had no visible boundary at all. - Label, countdown and percent move onto the tone (emerald-900 / emerald-700 / emerald-900) rather than hardcoded slate, so every element on the row belongs to one colour family. Keeping the tint light is what stops a grid of cards becoming a wall of colour: saturation is spent on the 2px edge, not on the full-width background. Amber and rose follow the same construction, so a bar that changes colour still reads as a change of state. The subscription badge and the >=90% success rate return to emerald as well; both were drained by #936 and neither was the source of the problem. Two assertions move from text-rose-700 to text-rose-900: the depleted state is still rose, one stop darker for legibility. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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.
Panel-only. Corrects the diagnosis behind #936 and #937.
What those two got wrong
They read the flat green field as too much colour and drained it to slate. Wrong call. The bar was never too green — the green was a 20%-opacity wash sitting under
text-slate-600labels andtext-slate-400countdowns. Nothing on the row had enough contrast to read comfortably, and removing the colour just made a dull row duller.The construction
opacity-20wash overbg-emerald-500bg-emerald-100, no opacity wrapperborder-r-2 border-emerald-400down the fill's right edgetext-slate-600text-emerald-900(from the tone)text-slate-400text-emerald-700(from the tone)text-emerald-700text-emerald-900border-slate-200/70 bg-slate-50/60border-emerald-200 bg-white(from the tone)Two ideas carry it:
Saturation goes on the 2px edge, not the full-width background. The fill is the row's own background, so at 100% it covers the entire line — a saturated fill there is a solid band, and a grid of cards becomes a wall of colour that is tiring to scan and, being always on, signals nothing. A light tint plus a hard edge reads the value more precisely, especially at 100% where a block boundary doesn't exist.
Every element on the row belongs to one colour family. The track, label, countdown and percent all come off the tone now instead of hardcoded slate, so amber and rose get the same construction for free.
The subscription badge and the ≥90% success rate return to emerald too — #936 drained both, and neither was ever the problem.
Verified
Rendered with the app's own compiled CSS, light and dark, at 84 / 100 / 62 / 45 / 8%. The edge marks the value at every step; labels stay legible on both the tint and the bare track; dark mode inverts to a deep fill with light text.
design:check✅ ·size:check✅ ·surface:check✅ ·lint0 errors ✅ · 243 tests / 21 files ✅Two assertions move
text-rose-700→text-rose-900: depletion is still rose, one stop darker for legibility.🤖 Generated with Claude Code