fix(words): table accent tone softer, hover cells, stronger header divider (F4.2)

Before:
- tone='accent' painted at 14% solid + full accent-text recolor — the
  cell read as "broken / special-cased random" rather than emphasised.
- striped used 70%-transparent overlay on toolbar-bg ≈ invisible
  against the editor bg.
- no hover state on cells — users had no signal that cells are
  interactive (clickable to edit).
- header row used the same single-width border as body cells, so the
  divider got lost when striped or accent kicked in.

After:
- tone='accent' at 8% solid, text color inherited from default — the
  cell still draws the eye without shouting.
- striped uses solid toolbar-bg (no transparency) — actual zebra.
- subtle hover (5% accent overlay) on every non-header cell, with a
  120ms ease transition.
- header row gets a 2× bottom border so the head/body divider is
  unambiguous regardless of striping/accent.

CSS-only change in words.css, no markup or logic touched.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 3cc171f747
commit c09f7b0d87

@ -994,9 +994,12 @@
background: var(--words-bg);
}
/* Striped rows — bumped from a faint 70%-transparent overlay to a
solid toolbar-bg tint so the zebra is actually discernible against
the editor background. */
[data-words-content] :where(table[data-words-table-striped] tr:nth-child(even) td),
[data-words-content] :where(table[data-words-table-striped] tr:nth-child(even) th) {
background: color-mix(in srgb, var(--words-toolbar-bg) 70%, transparent);
background: var(--words-toolbar-bg);
}
[data-words-content] :where(table[data-words-table-compact] td),
@ -1011,6 +1014,13 @@
padding-inline: var(--words-command-px);
border: var(--words-border-width) solid var(--words-toolbar-border);
vertical-align: top;
transition: background-color 120ms ease;
}
/* Subtle hover for every body cell — lets the user know cells are
interactive (clickable to edit). Header rows opt out below. */
[data-words-content] :where(table) tr:hover td:not([data-words-cell-header]) {
background: color-mix(in srgb, var(--_words-accent-solid) 5%, transparent);
}
[data-words-content] :where(th),
@ -1018,15 +1028,21 @@
background: color-mix(in srgb, var(--_words-accent-solid) 12%, var(--words-bg));
color: var(--words-heading-color);
font-weight: var(--words-strong-font-weight);
/* Stronger bottom border under the header row so the divider with
the body is unambiguous regardless of striping. */
border-block-end-width: calc(var(--words-border-width) * 2);
}
[data-words-content] [data-words-cell-tone='muted'] {
background: color-mix(in srgb, var(--words-toolbar-bg) 82%, transparent);
}
/* Accent tone — was 14% solid with full accent-text recolor, which
read as "this cell is broken / special-cased random". Toned down to
8% background and kept the inherited text color so the cell still
draws the eye without shouting. */
[data-words-content] [data-words-cell-tone='accent'] {
background: color-mix(in srgb, var(--_words-accent-solid) 14%, var(--words-bg));
color: var(--_words-accent-text);
background: color-mix(in srgb, var(--_words-accent-solid) 8%, var(--words-bg));
}
[data-words-content] [data-words-cell-vertical='middle'] {

Loading…
Cancel
Save

Powered by TurnKey Linux.