oficina / sheets Public

fix: the selection had a fill and no outline in dark

Reported from the canary: a selected range in dark mode is a navy slab
with one bright white line down its left side and no edge anywhere else.

Every colour in the vendored Jspreadsheet stylesheet is a literal, and
sheets.css restated the ones for the grid, the headers and the range
fill. It stopped there, and the outline is where the rest of them live:

  .highlight-right/-bottom   border: 1px solid #000
  .highlight-top/-left       the same, plus box-shadow: -1px 0 #ccc

In dark that renders backwards. The black borders vanish into a #111418
grid. The two that would not are overwritten by our own
`td { border-top-color: var(--rst-line) }`, which at (0,2,3) outranks
the library's (0,2,0) `.jss_worksheet .highlight-top` — so they resolve
to ordinary grid lines. What survives is the #ccc box-shadow, a shim
that exists only to mask the grid line the border sits on, and it
becomes the only visible edge. Hence the white L.

Four more of the same shape:

  - The selected row's header was #dcdcdc carrying --rst-text-muted
    (#a8b0ba) at 1.60:1. sheets.css DID have an override for it,
    `tbody > tr > td:first-child.selected`, but the library puts
    .selected on the <tr>, not on its first cell, so the rule matched
    nothing and looked like a fix. A CSS rule that matches nothing fails
    exactly like a rule nobody wrote.
  - The fill handle is a black knob ringed in white: inverted in dark.
  - The copy marquee and the fill-handle drag preview are dashed and
    dotted #000, both invisible.
  - jsuites' .jcontextmenu is bound to `contextmenu` whether or not the
    host app configures one, so a right-click on any cell opened a #fff
    card with #555 text on the dark grid — the last unthemed surface on
    this screen.

The fix is one outline colour, --rst-accent, on all four sides of all
three range states, and the #ccc shadow dropped: with an outline that
reads, masking the line beneath it buys nothing and costs the selection
its symmetry. The library gives each state a different border STYLE
(solid, dashed, dotted) and the style survives a colour-only override,
so that is what tells them apart. --rst-accent on --rst-accent-soft
measures 6.59:1 in dark and 4.75:1 in light, both past 1.4.11's 3:1 for
a component boundary.

Every rule is scoped `> tbody > tr > td`, for two reasons and the second
is the one that bites. The grid-line rule above is (0,2,3), so the
library's own specificity loses to it. And sheet.html links the vendored
stylesheets into a head block layout.html renders AFTER sheets.css, so
the library is later in source order and an EQUAL-specificity
restatement loses on order alone. Ours must be strictly higher, never
merely equal — which is also the real reason the vendored #dcdcdc beat
the header rule: both are (0,3,3), and the vendor came last.

One change is not dark-specific and is called out as such.
.highlight-selected — the anchor cell the keyboard is on — is
transparent in the library so it reads out of the fill, and our opaque
.highlight rule took that back. A range had no visible cursor in either
scheme. It is restored, and placed last on purpose: it ties .highlight
and .selection at (0,3,3) and sits inside both mid-drag, so on a tie it
has to be the later rule or the cursor vanishes exactly while you are
aiming with it.

Three guards, and the first one had to be fixed before it was worth
anything. It matched the bare string `.highlight-right` against the
whole of sheets.css — and the paragraph above the rules contains the
line `.highlight-right/-bottom   border: 1px solid #000`. Delete the
real rule and every guard stayed green: the prose describing the bug
matched the test looking for its fix. Comments are now stripped before
matching, and each entry anchors on the full scoped selector so a
restatement written at the vendor's specificity fails too.

  TestVendorPaintIsRestated          24 vendored rules across both
                                     stylesheets, checked in BOTH
                                     directions — that each vendored
                                     selector still exists (v5 renamed
                                     every .jexcel to .jss_* once
                                     already) and that we restate it in
                                     a rule, not in prose. Rules the app
                                     cannot render are named with a
                                     checkable reason.
  TestOurStylesheetHasNoColourLiterals
                                     csstokens_test.go proves every
                                     var(--rst-…) we use is defined, and
                                     says nothing about a declaration
                                     that skips var() altogether.
  TestVendorLinksLoadAfterOurs       pins the load order the specificity
                                     counting depends on.

Proved by mutation rather than by reading. Four reintroductions, each
caught: the .highlight-right rule deleted; the outline written at
`.jss_worksheet .highlight-top`; `border-right-color: #7ba7ff` in place
of the token; the row-header override put back on the td.

Stated limit, written into the test so nobody trusts it further than it
goes: TestVendorPaintIsRestated compares strings, not specificity. If
the grid-line rule ever gains a step of its own, these selectors stay
green and stop winning.

Reviewed by Claude Opus 5 (1M context) — five findings taken, including
the two above that would have blocked a merge, and one overcall recorded
with its measurement: .jss_content's scrollbar rules are dead here,
because .jss_content computes `overflow: visible` with scrollWidth ==
clientWidth and the grid scrolls on our own [data-sheet-grid]. Review
record and the three things deliberately not fixed are in discussion #9.

Verified in Chromium in both schemes on the real binary, before and
after the rebase onto core: outline #7ba7ff dark / #2464e0 light on all
four sides, box-shadow none, row header on --rst-accent-soft with
--rst-text, handle on the accent, marquee dashed and visible, context
menu #1a1f26/#e8eaed dark and white/#1a1d21 light. make test green
including vet, fmt, migrations and race.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UiPVt2xfkKStDgkv4qLCm1