From 8afe2728bbea1f9dc89784bc2c2a8a311b4621d1 Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 29 May 2026 14:45:01 +0200 Subject: [PATCH] feat(words): comfortable reading scale for the content surface MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The editor used UI-cramped metrics (14px / 1.25 line-height / 8px block gap) which read as a form field, not a document. Give the CONTENT (not the chrome) a reading scale: body 14→16px, line-height 1.25→1.6, block gap space-2→space-3 (headings derive 1.5x for top margin). Chrome keeps its smaller --_words-font-size. Co-Authored-By: Claude Opus 4.7 --- src/uix/eidos/components/words/words.css | 6 ++++++ src/uix/eidos/generated/base.css | 2 +- src/uix/eidos/lib/recipes/base.ts | 5 ++++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index 60dd82b84..ca0285875 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -1765,6 +1765,12 @@ padding-inline-start: var(--_words-gutter-size); padding-inline-end: var(--_words-content-px); color: var(--words-content-color); + /* Comfortable reading scale for the writing surface — a touch larger + * and noticeably airier than the UI chrome (which keeps the smaller + * --_words-font-size + tight line-height). This is what turns the + * surface from "cramped form field" into "document". */ + font-size: calc(var(--_words-font-size) + 2px); + line-height: 1.6; /* Thin silver band (rail-width) with a 1px slightly-stronger right * edge, then transparent through the gap to the text. Background * only — does not disturb the contenteditable text/selection. */ diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index aaf033406..f20050389 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -2285,7 +2285,7 @@ --words-rail-bg: #f5f5f5; --words-rail-border: #e3e3e3; --words-selection-color: var(--color-content-primary); - --words-block-gap: var(--space-2); + --words-block-gap: var(--space-3); --words-heading-color: var(--color-content-primary); --words-heading-font-size: var(--font-size-lg); --words-heading-h1-font-size: var(--font-size-xl); diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index 7dabd85c8..ff95aa256 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -2726,7 +2726,10 @@ export const THEME_BASE_RECIPE_TOKENS = { 'rail-bg': '#f5f5f5', 'rail-border': '#e3e3e3', 'selection-color': 'var(--color-content-primary)', - 'block-gap': 'var(--space-2)', + // Document rhythm: airier than the default UI gap so blocks read + // as paragraphs in a document, not stacked form rows. Headings + // derive 1.5x of this for their top margin. + 'block-gap': 'var(--space-3)', 'heading-color': 'var(--color-content-primary)', 'heading-font-size': 'var(--font-size-lg)', 'heading-h1-font-size': 'var(--font-size-xl)',