Theme the scrollbars for light and dark mode

[isuttell]

Summary

App scrollbars (web + apex) fell back to the heavy OS/browser default — an off-theme black-on-white bar against the design system. The repo had no scrollbar styling at all. This themes them so they read as part of the surface ladder and flip with light/dark mode.

Changes

• Add a scrollbar block to the design-system stylesheet, sourced from globalsCss() in packages/brand/src/index.ts and regenerated into packages/ui/src/styles/globals.css (both apps/web and apps/apex import it, so they can't drift).
• Thumb = --subtle ink at rest, --muted on hover (per-theme tokens → light/dark work for free); transparent track; 10px wide; 4px (--radius-md) square-ish corners; 2px transparent inset via background-clip: padding-box.
• Firefox: scrollbar-width: thin + scrollbar-color.

Risk: LOW

• Areas touched: design-system stylesheet (@agent-paste/brand generator + generated @agent-paste/ui snapshot). Presentational CSS only, no logic.
• Security: none.
• Performance: none.
• Breaking: none. Published-artifact documents do not import this stylesheet, so the global * { scrollbar-* } rule cannot reach artifact iframes (unrelated to AP-328 viewer clipping).

Test plan

• pnpm verify (104 tasks, 261 script tests green; includes the ui snapshot generated-artifact check)
• pnpm test:coverage (exit 0, thresholds hold)
• Local ziw-code-review: APPROVE, no findings
• Visually verified the rendered CSS in Chrome in both light and dark mode

Issue: AP-388

@coderabbitai ignore

[cursor]

Risk: simple
Decision: approve

Ticket triage

• Intended change: Theme app scrollbars (web + apex) so they use design-system tokens and look correct in both light and dark mode instead of the OS default.
• Scope match: Yes. Adds scrollbar styling to globalsCss() in @agent-paste/brand and regenerates packages/ui/src/styles/globals.css, which both apps/web and apps/apex import via @agent-paste/ui/styles.css.

Review findings

• Blocking: None.
• Non-blocking: Global * { scrollbar-* } is the usual pattern for cross-browser theming; published artifact iframes remain out of scope per AP-328, as noted in the ticket.

Merge checklist

• Ticket linked: AP-388 linked in PR body and commit.
• Scope matches: Presentational CSS only; matches acceptance criteria (token ladder, square-ish corners, Firefox + WebKit).
• Checks green: Validate, Postgres smoke, Secret scan, CodeQL, CodeRabbit all pass.
• Tests/docs appropriate: packages/ui/test/globals-css.test.ts snapshot guards generator ↔ shipped stylesheet sync.
• No blocking findings: —
• No high-risk areas: No auth, billing, secrets, infra, or migrations touched.
• Merge-safe: Yes.

Final comment

Straightforward design-system CSS with the established generator + snapshot workflow. Token-based thumb/track colors will follow theme switches via --subtle / --muted. Good to merge.

  

_{Sent by Cursor Automation: First Pass PR Reviewer}

[github-actions]

agent-paste PR preview resources were cleaned up. The shared Preview GitHub Environment is retained for future preview deploys.