WORK-351
ID:WORK-351Status:ready

Theme-aware global chrome: selection, scrollbars, color-scheme

Three pieces of browser chrome currently ignore the theme. Make them token-driven and mode-aware.

Priority:mediumComplexity:simpleMilestone:v0.19.0
claude/v0.19-milestone-planning View source

Criteria completion

Criteria completion: 0 of 4 (0%) checked; tracking started on Jun 4, no incremental history yet0%25%50%75%100%Jun 4Jun 15

Tracking started Jun 4 — check back for trends.

Relationships

Related 1
Branches 3
claude/v0.19-milestone-planning current ready
changeset-release/main doneclaude/v0.19-lumina-polish donemain ready
History 1
  1. fb9139e
    Created (ready)by bjornolofandersson

Acceptance Criteria

  • A branded ::selection rule exists globally (primary-tinted background, legible foreground) — replacing the native/OS blue currently shown on text selection.
  • color-scheme is declared per mode on :root (light / dark) so native chrome — including the main scrollbar — tracks the theme instead of always rendering dark.
  • Scrollbars are styled consistently and theme-aware via tokens (scrollbar-color + a thin ::-webkit-scrollbar treatment), applied globally and to overflow containers (codegroup, datatable, drawer body, nav/sidebar). No hard-coded always-dark scrollbar.
  • All three respect light and dark; verified in both modes.

Approach

Add ::selection and :root { color-scheme } to global.css; define --rf-color-scrollbar*/reuse muted+surface tokens for scrollbar-color; apply a shared scrollbar treatment (custom-property-driven) to the known overflow surfaces. Keep it minimal — color-scheme alone fixes the native main-scroll "always dark"; explicit scrollbar styling refines the overflow containers.

References

  • packages/lumina/styles/global.css; existing per-container scrollbar rules in styles/layouts/{docs,plan}.css
  • Selection state precedent: packages/lumina/styles/dimensions/state.css