From ab06562abe7410b3da61d39073e6222a1a83e0cb Mon Sep 17 00:00:00 2001 From: dev Date: Wed, 27 May 2026 21:38:48 +0200 Subject: [PATCH] style(words): drawer per-scope accent color + tinted header (COLOR-2) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Each drawer panel category gets a distinct hue so the user reads the panel's *kind* at a glance: - Text scopes (format, block) → primary accent (project violet) - Structure scopes (cell, row, table, list, list-item) → secondary (slate-blue) — the contextual scaffolding around the text - Media scopes (image, code) → fulfill (teal-mint) — opaque blocks - Default (document outline) → neutral toolbar tone Implementation: scope hue resolves into `--_drawer-scope-accent` via `[data-words-drawer-panel][data-mode=...]` selectors. Then: - The left border (already used as depth indicator) inherits the scope accent at decreasing alpha as depth grows (leaf 100%, depth 1 65%, 2 40%, 3 25%). - Open panel headers paint with a 6% tint of the scope accent + the accent color for the title text. - Active action chips inside a panel inherit the scope accent for background + border + text, so the active variant matches the scope's color identity (no more "always-violet" Striped/Plain). Visual cohesion: a user in a table cell with text selected now sees: - FORMAT panel header in violet (text scope) - CELL/ROW/TABLE headers in slate-blue when expanded (structure scope) - IMAGE/CODE panels in teal-mint (media scope) - DEFAULT in neutral CSS-only change; nothing in soma/morfo touched. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/uix/eidos/components/words/words.css | 67 ++++++++++++++++++++---- 1 file changed, 58 insertions(+), 9 deletions(-) diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index 72417324b..339015112 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -291,20 +291,69 @@ color: var(--words-command-color); } -/* Depth indicator — the leaf panel is full-strength; deeper-in-the- - hierarchy panels render slightly muted so the user can read the - precedence visually. */ +/* Per-scope accent — each category of scope gets a distinct hue so + the user can read the panel's *kind* at a glance: + - Text scopes (format, block) → primary (project accent) + - Structure scopes (cell, row, table, list, list-item) → secondary + - Media scopes (image, code) → fulfill (tealish) + - Default (document) → neutral + Variables here resolve from the eidos color tokens, so themes + re-tint everything coherently. */ +[data-words-drawer-panel][data-mode='default'] { + --_drawer-scope-accent: var(--words-toolbar-border); + --_drawer-scope-tint: var(--words-toolbar-bg); +} +[data-words-drawer-panel][data-mode='format'], +[data-words-drawer-panel][data-mode='block'] { + --_drawer-scope-accent: var(--_words-accent-border); + --_drawer-scope-tint: color-mix(in srgb, var(--_words-accent-solid) 6%, transparent); +} +[data-words-drawer-panel][data-mode='cell'], +[data-words-drawer-panel][data-mode='row'], +[data-words-drawer-panel][data-mode='table'], +[data-words-drawer-panel][data-mode='list'], +[data-words-drawer-panel][data-mode='list-item'] { + --_drawer-scope-accent: var(--words-secondary-text); + --_drawer-scope-tint: color-mix(in srgb, var(--words-secondary-text) 6%, transparent); +} +[data-words-drawer-panel][data-mode='image'], +[data-words-drawer-panel][data-mode='code'] { + --_drawer-scope-accent: var(--words-fulfill-text); + --_drawer-scope-tint: color-mix(in srgb, var(--words-fulfill-text) 6%, transparent); +} + +/* Depth indicator — leaf panel is full-strength scope accent; deeper + panels render the same hue at decreasing alpha so the precedence is + readable visually. */ [data-words-drawer-panel][data-depth='0'] { - border-inline-start: 2px solid var(--_words-accent-border); + border-inline-start: 3px solid var(--_drawer-scope-accent); } [data-words-drawer-panel][data-depth='1'] { - border-inline-start: 2px solid - color-mix(in srgb, var(--_words-accent-border) 60%, transparent); + border-inline-start: 3px solid + color-mix(in srgb, var(--_drawer-scope-accent) 65%, transparent); +} +[data-words-drawer-panel][data-depth='2'] { + border-inline-start: 3px solid + color-mix(in srgb, var(--_drawer-scope-accent) 40%, transparent); } -[data-words-drawer-panel][data-depth='2'], [data-words-drawer-panel][data-depth='3'] { - border-inline-start: 2px solid - color-mix(in srgb, var(--_words-accent-border) 30%, transparent); + border-inline-start: 3px solid + color-mix(in srgb, var(--_drawer-scope-accent) 25%, transparent); +} + +/* When the panel is open, paint its header with the scope tint so the + active scope reads at a glance. */ +[data-words-drawer-panel][data-open] [data-words-drawer-panel-header] { + background: var(--_drawer-scope-tint); + color: var(--_drawer-scope-accent); +} + +/* Action chip active state — inherit the scope accent so the + selected variant matches the panel's color identity. */ +[data-words-drawer-panel] [data-words-drawer-action][data-active] { + background: color-mix(in srgb, var(--_drawer-scope-accent, var(--_words-accent-solid)) 20%, var(--words-bg)); + border-color: var(--_drawer-scope-accent, var(--_words-accent-border)); + color: var(--_drawer-scope-accent, var(--_words-accent-text)); } [data-words-drawer-panel-title] {