From c09f7b0d87f250ed6ad37b4f3cf0fabc19b7034e Mon Sep 17 00:00:00 2001 From: dev Date: Wed, 27 May 2026 19:07:38 +0200 Subject: [PATCH] fix(words): table accent tone softer, hover cells, stronger header divider (F4.2) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/uix/eidos/components/words/words.css | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index 5ccf683c1..2a2e774ce 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -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'] {