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)',