Repository navigation
style(web): name the opacity ladders, one width scale, severity status colours - #1992
Merged
Merged
Conversation
…s colours Text, surface and border opacities were 30 ad-hoc `/NN` levels. They are now named tokens: foreground-soft/subtle/faint, surface-faint/sunken/strong (sunken = row hover at 50%, strong = selected at 60%, matching #1988) and border-subtle. Table column widths between 64 and 260px snap to a 16px scale (36 values -> 13). Bordered boxes use Panel's p-3/p-4. `rounded` and `rounded-sm` were both 4px; now one spelling. Status values still on the old success/warning/info tokens use the severity palette; red stays `destructive` only for destructive actions and form errors. Avatar tiles and onboarding region accents move from hard-coded colours to tokens, and replays and error actors use the same warm avatar tiles as settings. SQL query badges get dark text on amber like the primary button.
Makisuo
added
the
preview:web
This comment has been minimized.
This comment has been minimized.
|
Important Review skippedToo many files! This PR contains 396 files, which is 246 over the limit of 150. To get a review, reduce the PR to 150 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. Usage-priced reviews support at most 300 files.
 |
Contributor
🍁 Maple PR previewNote Preview resources were removed when this pull request closed. Final commit |
This was referenced Oct 30, 2026
# Conflicts: # apps/web/src/page/agent-sessions/session/tool-io.ts
Maple review🟢 Confidence 10/10 · safe to merge. The five files the merge re-touched are exact-value token renames, each verified against Names the dashboard's opacity, surface, border and width classes as tokens in
|
Makisuo
added a commit
that referenced
this pull request
Oct 30, 2026
This was referenced Oct 30, 2026
Makisuo
added a commit
that referenced
this pull request
Oct 30, 2026
…acing on tokens (#1999) Third consistency pass after #1988 and #1992. - Neutral status fills and outline rings: bg/border-muted-foreground/30..75 become foreground-subtle (50% and up) or foreground-faint. - Dividers: bg-border/20, /40, /60 become bg-border-subtle. - Card hover and selected outlines: new border-border-strong token (foreground 30%). - Row and button hovers: accent/50, foreground/5, /8, /[0.06] become surface-sunken. - rounded-[2px] and rounded-[3px] become rounded-xs. - Off-scale gaps and padding snap to the spacing scale; name-column min widths use the 16px width scale.
This branch was successfully deployed
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.
Follow-up to #1988. Makes the remaining spacing, colour and token drift consistent across the dashboard (
apps/web) and the sharedpackages/uistyles.Before / after
text-muted-foreground/30…/80,text-foreground/20…/90text-foreground-soft(fg 80%),-subtle(muted 70%),-faint(muted 45%)bg-muted/10…/80bg-surface-faint(20%),-sunken(50%, row hover),-strong(60%, selected)border-border/40,/50,/60,/70border-border-subtle(60%)w-[76px],w-[84px],w-[110px]…)w-16…w-64), ties round uppx-3 py-2.5,px-3.5 py-3,px-4 py-3p-3/p-4roundedandrounded-sm(both 4px)rounded-smtext-success,text-warning-foreground,text-info,text-destructive-foregroundon data valuesseverity-info/-warn/-debug/-errorbg-[oklch(…)]tiles in settings; rainbow gradients in replays and error actorsbg-avatar-1…5, used everywhere#E5485B/#5B7CFFwith hex-alpha suffixesregion-us/region-eutokens, tints viacolor-mixtext-whiteonbg-primary/80text-primary-foreground(matches the primary button)Examples:
Screenshots
Captured from the
/labfixture routes at 1440px,main(c0b5b4c) vs this branch.Logs (
/lab/logs): level column on the width scale, muted text onforeground-subtleErrors (
/lab/errors): assignee avatars on the shared warm tiles, columns on the width scaleGCP infra (
/lab/gcp-infra): columns on the 16px scale; the sub-line now ends in an ellipsis instead of clippingService API tab (
/lab/service-api): columns on the width scale, subtle text tokensRegion accents look the same as before: the new tokens hold the old hex values, and the
color-mixtints match the old hex-alpha tints (40% and 8%). The region step and the replay avatars have no lab fixture, so they are not pictured.Trade-off visible above: the GCP service column is about 26px narrower because the numeric columns rounded up to the scale, so long project names now truncate sooner (with an ellipsis).
Notes
muted/80becomes 70%,bg-muted/30becomes 50%) and some columns widen or narrow by up to 8px. Where a base surface and its hover would land on the same token, the hover steps up one.destructivefor destructive actions (delete, danger zones) and form errors. Only data and status values moved toseverity-error.Verification
packages/uiandapps/webtypecheck clean.oxlint -c .oxlintrc.effect.json: 0 errors on the changed files.bun run check:tokens: OK.🤖 Generated with Claude Code
Need help on this PR? Tag
@codesmith-botwith what you need.