Repository navigation
style(web): one scale for type, icons, radii, hover, borders and timeline colours - #1988
Merged
Merged
Conversation
…line colours Pixel text sizes use the type tokens, icons sit on 12/14/16, bordered surfaces are rounded-md, row hovers are muted/50 with selected rows at muted/60, borders are border or border/60. The trace timeline bars and the service-map namespace labels mix their hue into the theme background, so light mode no longer gets near-black bars with unreadable labels.
|
Important Review skippedToo many files! This PR contains 181 files, which is 31 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. This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry.
 |
This comment has been minimized.
This comment has been minimized.
This was referenced Oct 30, 2026
Makisuo
added
the
preview:web
This comment has been minimized.
This comment has been minimized.
Contributor
🍁 Maple PR previewNote Preview resources were removed when the preview label came off. Final commit |
…oken Mixing in oklch against a background with a declared hue rotated every bar toward it, so blue services painted pink. 2xx used chart-3, which is amber in light mode beside the amber 4xx; it now uses severity-info.
Collaborator
Author
Preview test (app-pr-1988, signed in as the preview reviewer, dark and light)A separate agent drove the preview headlessly through traces, errors, alerts, investigations, anomalies, services (API tab, endpoint peek), dashboards, settings, code review, integrations, security, infra, service map and logs, in both themes. Every page title rendered at the same size and weight, and tab strips were aligned and unclipped. There were no Caused by this stack, fixed in 650e71a:
Already on main, not in this stack's diff (follow-ups):
Not checkable on this preview: live sync returned 503, so the alert inbox and rules, the dashboards list, the uptime stats and the error issues showed empty or "sync unavailable" states. The uptime, Supabase and PlanetScale toolbar readouts are covered by scene tests. |
Maple review🟢 Confidence 10/10 · safe to merge. The five files changed since 47cc281 are class and colour-token swaps; every token they name is defined and resolved by the page's theme Mount. Re-review of the five files changed since the last pass: 2xx moves to
Production impactOpen errors in the changed files (1)
After this merges, Maple checks whether they stop.
|
Collaborator
Author
|
Re-tested on the redeployed preview (650e71a), light and dark: timeline bars carry their service tint (blue services are blue, no pink fills) and 2xx is green across the API tab chart, legend, table bars and endpoint peek, distinct from amber 4xx. No page errors. |
Makisuo
removed
the
preview:web
Maple: after this shipped✅ Shipped clean. Nothing this change touches got worse in the hour after it deployed. Deployed to Errors in the changed files:
Maple looks once, an hour after the first deploy that carries the merge. |
Makisuo
added a commit
that referenced
this pull request
Oct 30, 2026
…s colours (#1992) 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 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.
Stack: #1985 tokens and primitives → #1986 kit pieces → #1987 migrations → #1988 scale cleanup
Fourth PR in the UI consistency stack (on #1987). It puts sizes and steps on one scale, and fixes the dark-only colours that broke light mode.
Changes
Light-mode trace timeline. Bar fills were hardcoded dark (
oklch(0.22 …)), so light mode drew near-black bars with dark labels on them. Fills are now the bar's own colour washed into--background, borders use the hue or--severity-error. The service-map namespace labels get the same treatment.One scale, applied across apps/web (about 180 files, class swaps only):
text-[9|10|11|13|15px]move to thetext-4xs/3xs/2xs/ui/titletokens.rounded-md(about 50rounded-lg/xl/2xlboxes, mostly onboarding, connect flows, investigations canvas, error callouts). Controls stayrounded-lg.hover:bg-muted/50(about 70 from /20, /30, /40 and /60). Selected rows go frommuted/40tomuted/60, inrowSelectedClassand five tables, so a hovered row is never darker than the selected one.border-borderorborder-border/60(about 90 from /40, /50 and /70).text-foreground/85→/80,/75→/70,text-muted-foreground/72→/70.Left for later on purpose:
text-[22px]andtext-[30px](no token yet), the 23 distinct arbitrary table column widths, the.5spacing steps, andHTTP_METHOD_HEX(documented as the mobile app's source).Verification
apps/webandpackages/uitypecheck pass. oxlint, both configs, has 0 errors on the changed files.src/page,src/ui,src/components,src/service-map,src/shell,src/labandsrc/charts./lab/*routes before (refactor(web): migrate hand-rolled toolbars, dots, empty lines and helpers to shared primitives #1987 state) and after, dark and light; 52 crops on the assets branch.🤖 Generated with Claude Code
Need help on this PR? Tag
@codesmith-botwith what you need.