style(web): neutral dots, hover fills, card outlines and off-scale spacing on tokens by Makisuo · Pull Request #1999 · MapleTechLabs/maple

Makisuo · 2026-10-30T23:00:06Z

Third consistency pass, after #1988 and #1992. It moves the spacing, colour and token drift those two left on main onto the existing scales and adds one token.

Changes

Area	Before	After
Neutral status dots (idle, ended, skipped, queued)	8 levels: `bg-muted-foreground/30` to `/75`	`bg-foreground-subtle` (50% and up) or `bg-foreground-faint`
Dashed and outline rings	`border-muted-foreground/30` to `/70`	`border-foreground-subtle` or `border-foreground-faint`
Card hover and selected outlines	`border-foreground/30` and `/40`	new `border-border-strong` (foreground 30%)
Dividers and gridlines	`bg-border/20`, `/40`, `/60`	`bg-border-subtle`
Row and button hover	`accent/50`, `foreground/5`, `/8`, `/[0.06]`, `/[0.02]`	`hover:bg-surface-sunken` (already used in 116 places)
Radii	`rounded-[2px]`, `rounded-[3px]` mixed with `rounded-xs`	`rounded-xs`
Gaps and padding	`gap-[9px]`, `gap-[5px]`, `pt-[22px]`, `px-[5px]`...	`gap-2`, `gap-1.5`, `py-5`, `px-1.5`
Name-column min widths	180, 200, 220, 240, 260px	16px width scale (`min-w-44` ... `min-w-64`)

Left as is on purpose: graded data ramps (latency tones, range histogram, Railway band), chart tracks and skeletons (already consistent), brand colours, white text on filled badges, and pixel offsets that align dots or tree lines.

- idle: "bg-muted-foreground/60",  ended: "bg-muted-foreground/40",
+ idle: "bg-foreground-subtle",    ended: "bg-foreground-faint",
- "hover:bg-foreground/8 data-popup-open:bg-foreground/8"
+ "hover:bg-surface-sunken data-popup-open:bg-surface-sunken"
- "border-border hover:border-foreground/30"
+ "border-border hover:border-border-strong"

Screenshots

From the /lab fixture routes at 1440px, main (35e3b34) on the left and this branch on the right.

Agent tools (/lab/agent-tools): chart header padding 22px to 20px, matching the bottom

Alerts (/lab/alerts): held-rule fill on the shared neutral token

Security (/lab/security): tab icon gap 7px to 8px

Full frames, before and after:

Route	Dark	Light
agent-tools	before / after	before / after
alerts	before / after	before / after
security	before / after	before / after

The hover changes (card outlines, row hovers) only show on pointer-over and are not in these static frames.

Verification

bun run --filter=@maple/web typecheck passes.
oxlint -c .oxlintrc.effect.json on the changed files: no errors.

🤖 Generated with Claude Code

^{Need help on this PR? Tag @codesmith-bot with what you need.}

Summary by CodeRabbit

Style
- Refined colors for neutral indicators, chart elements, dividers, and borders across dashboards, alerts, infrastructure, traces, and other views.
- Updated hover and selected-state backgrounds and outlines for buttons, rows, cards, and navigation items.
- Standardized corner radii, spacing, and column widths across charts, tables, and dialogs for a more consistent interface.

…acing on tokens 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.

maple-review-bot · 2026-10-30T23:00:17Z

Maple review

🟢 Confidence 10/10 · safe to merge. Every token and utility the pass introduces resolves against the shared theme, and no logic, state or data path changes.
_{no findings · tests not needed · risk low}

A visual-only Tailwind pass: neutral fills, dividers, hover fills, radii, gaps and name-column widths move onto the existing scales, plus one new --color-border-strong token (foreground 30%). No logic, markup structure or data path changes, so it is safe to merge.

tokens.css gains --color-border-strong, used for hover and selected card outlines
Status dots and rails collapse onto bg-foreground-subtle / bg-foreground-faint
Dividers use bg-border-subtle; hover fills use bg-surface-sunken / bg-surface-faint
Name-column mins move to the 16px width scale (min-w-44 … min-w-64)

_{bff60c1 · What was checked, coverage and telemetry details are on the Maple / review check. Reply "won't fix" to dismiss a finding, or mention @maple-review-bot to ask about one.}

coderabbitai · 2026-10-30T23:00:42Z

Caution

Review failed

The pull request is closed.

Walkthrough

The changes standardize visual styling across charts, agent sessions, alerts, infrastructure views, onboarding, and shared UI components. They update color and border tokens, hover surfaces, dimensions, spacing, and corner-radius utilities. No exported or public declarations changed.

Changes: UI style updates

Layer / File(s)	Summary
Selected outlines and border token `packages/ui/src/styles/tokens.css`, `apps/web/src/page/integrations/...`, `apps/web/src/page/kit/...`, `apps/web/src/page/onboarding/...`, `apps/web/src/page/security/...`, `apps/web/src/service-map/...`	Adds `--color-border-strong` and uses it for selected or hovered outlines on cards, tiles, and service-map nodes.
Hover and open-state surfaces `apps/web/src/lab/...`, `apps/web/src/page/agent-sessions/...`, `apps/web/src/page/alerts/...`, `apps/web/src/page/dashboards/...`, `apps/web/src/page/errors/...`, `apps/web/src/page/infra/kubernetes/...`, `apps/web/src/page/investigations/...`, `apps/web/src/page/replays/...`, `apps/web/src/page/settings/...`, `apps/web/src/shell/...`, `packages/ui/src/components/ui/*`	Updates hover and open-state background classes to use surface-sunken styling.
Neutral indicators and dividers `apps/web/src/charts/...`, `apps/web/src/components/infra/...`, `apps/web/src/page/agent-sessions/...`, `apps/web/src/page/alerts/...`, `apps/web/src/page/errors/...`, `apps/web/src/page/infra-integrations/...`, `apps/web/src/page/infra/...`, `apps/web/src/page/investigations/...`, `apps/web/src/page/replays/...`, `apps/web/src/page/security/...`, `apps/web/src/page/traces/...`, `apps/web/src/service-map/...`, `apps/web/src/shell/...`, `packages/ui/src/components/traces/...`, `packages/ui/src/lib/...`	Replaces muted-foreground and translucent border classes on neutral indicators and dividers with foreground-faint, foreground-subtle, and border-subtle tokens.
Dimensions, spacing, and corner radii `apps/web/src/charts/...`, `apps/web/src/page/agent-sessions/...`, `apps/web/src/page/alerts/...`, `apps/web/src/page/analytics/...`, `apps/web/src/page/dashboards/...`, `apps/web/src/page/infra-integrations/...`, `apps/web/src/page/infra/...`, `apps/web/src/page/kit/...`, `apps/web/src/page/onboarding/...`, `apps/web/src/page/releases/...`, `apps/web/src/page/services/...`, `apps/web/src/page/settings/...`, `apps/web/src/page/traces/...`, `apps/web/src/ui/...`, `packages/ui/src/components/ui/...`	Replaces arbitrary width, padding, gap, and radius classes with standard utility classes.

Estimated code review effort: 2 (Simple) | ~12 minutes

Change: Refactor

Suggested labels: preview:web

Merge Risk: Low · up to bff60

The skipped-check legend can mislead users; align it with the cell color before merging.

Finishing Touches

📝 Generate docstrings

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

Makisuo merged commit bcfcdba into main Oct 30, 2026
33 of 34 checks passed

Makisuo deleted the style/consistency-pass-3 branch October 30, 2026 23:05

coderabbitai Bot mentioned this pull request Oct 31, 2026

fix(web): status pages pass the design lint #2014

Merged

Navigation Menu

Repository navigation

style(web): neutral dots, hover fills, card outlines and off-scale spacing on tokens - #1999

style(web): neutral dots, hover fills, card outlines and off-scale spacing on tokens#1999
Makisuo merged 1 commit into
mainfrom
style/consistency-pass-3

Makisuo commented Oct 30, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

maple-review-bot Bot commented Oct 30, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 30, 2026 •

edited

Loading

Review failed

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Makisuo commented Oct 30, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Screenshots

Verification

Summary by CodeRabbit

Uh oh!

maple-review-bot Bot commented Oct 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Maple review

Uh oh!

coderabbitai Bot commented Oct 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Makisuo commented Oct 30, 2026 •

edited by coderabbitai Bot

Loading

maple-review-bot Bot commented Oct 30, 2026 •

edited

Loading

coderabbitai Bot commented Oct 30, 2026 •

edited

Loading