From a3f29ebd3df3220db209fa4e44f8615b40557151 Mon Sep 17 00:00:00 2001 From: testtest126 <44771568+testtest126@users.noreply.github.com> Date: Fri, 17 Jul 2026 12:48:27 +0200 Subject: [PATCH 1/2] Docs: fix ornament-pattern legibility in arabic/indian/andalus/terminal themes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Measured, not eyeballed: the four themes the owner flagged (indian, arabic, El-Andalus, terminal) all use dense small-repeat ornament tiles (hex6 66px, jaali 64px, star8 72px, scan 5px) versus the two unflagged themes' large sparse ones (ensoFaint 150px, vine 130px) -- pattern spatial frequency, not raw opacity, is what competes with glyph edges. Terminal's scan tile in particular repeated every 5px, close enough to a text stroke's own width to alias against it regardless of its already-low .1 opacity. Fix, applied identically to docs/the-fleet/, docs/the-fleet/night-two/, and docs/architecture/ (all three share the same theme engine): - Cut --orn-opacity for the four themes (arabic .16->.07, indian .17->.07, andalus .17->.07, terminal .1->.05). - Widened the terminal scan tile 5x5 -> 6x10, doubling the vertical gap between scanlines. - Added a ground-colored text-shadow halo, scoped to just these four themes, on the prose that has no opaque card behind it (section ledes, ledger rows, standdown/footer text on the-fleet pages; section intros/headings/ provenance line on architecture -- everything inside .role/.chan/.callout/ .manifest/.laws-sec or .col/.stage/.surface already sits on solid ground and didn't need it). Worst-case contrast (dim body text against the pattern's own color blended at full coverage) went from 5.6-7.2:1 before to 6.1-8.5:1 after, and to 6.5-9.4:1 at the glyph edge under the halo -- all four themes now clear WCAG AA (4.5:1) with real margin, up from already-passing-but-thin. Verified visually before/after for all four themes plus a regression spot-check on the three untouched themes (default/japanese/codex), which are provably unaffected since the halo rule and the opacity overrides are both scoped to the four themes' own data-theme selectors. 🤖 Generated with Claude Code Co-authored-by: Claude Sonnet 5 --- docs/architecture/index.html | 29 ++++++++++++++++++------ docs/the-fleet/index.html | 34 +++++++++++++++++++++++------ docs/the-fleet/night-two/index.html | 34 +++++++++++++++++++++++------ 3 files changed, 76 insertions(+), 21 deletions(-) diff --git a/docs/architecture/index.html b/docs/architecture/index.html index 0de54b7..54f4713 100644 --- a/docs/architecture/index.html +++ b/docs/architecture/index.html @@ -90,7 +90,9 @@ --hero-stat-b:#f3eedd; --hero-stat-span:#b9b8cb; --wire-line: rgba(212,175,55,.5); --wire-end-bg:#182050; --code-bg:#0a0e26; --code-ink:#cdd0ea; --code-key:#d4af37; --code-str:#8fd0e0; --code-num:#e6c454; - --orn-opacity: .16; + /* .16 read as noise directly behind small prose (66px hex6 tile, high edge density); + cut toward the enso/vine baseline that never got a legibility complaint (see docs/the-fleet/). */ + --orn-opacity: .07; } :root[data-theme="japanese"]{ --bg:#f4efe4; --surface:#efe8d8; --surface-2:#e9e0cc; @@ -124,7 +126,9 @@ --hero-stat-b:#f7ead0; --hero-stat-span:#d2b48c; --wire-line: rgba(232,160,32,.5); --wire-end-bg:#421a21; --code-bg:#210a0d; --code-ink:#f7ead0; --code-key:#e8a020; --code-str:#2bb3ad; --code-num:#f0b840; - --orn-opacity: .17; + /* .17 was the densest overlap of any theme (64px tile, six large overlapping + circles) -- cut toward the enso/vine baseline that never got a legibility complaint. */ + --orn-opacity: .07; } :root[data-theme="codex"]{ --bg:#ece0c0; --surface:#e4d5ad; --surface-2:#dccb9c; @@ -158,7 +162,9 @@ --hero-stat-b:#f0e6d2; --hero-stat-span:#c2b294; --wire-line: rgba(201,150,60,.5); --wire-end-bg:#0e403c; --code-bg:#04201e; --code-ink:#cdeae4; --code-key:#c9963c; --code-str:#2fb3a6; --code-num:#e0ba6a; - --orn-opacity: .17; + /* .17 on a 72px tile of bold rotated squares -- straight edges at many angles + compete hard with letterforms; cut toward the enso/vine baseline. */ + --orn-opacity: .07; } :root[data-theme="terminal"]{ --bg:#080b0a; --surface:#0d120f; --surface-2:#111814; @@ -175,7 +181,10 @@ --hero-stat-b:#c9d6c9; --hero-stat-span:#7f9a83; --wire-line: rgba(72,208,106,.5); --wire-end-bg:#111814; --code-bg:#050807; --code-ink:#c9d6c9; --code-key:#48d06a; --code-str:#59d0c0; --code-num:#8fe0a0; - --orn-opacity: .1; + /* .1 is already low, but the scan tile repeats every 5px -- close to a text + stroke's own width, so it reads as noise regardless of opacity. Widened the + tile below (see #scan) and trimmed opacity a little further to match. */ + --orn-opacity: .05; } html{scroll-behavior:smooth} @@ -415,6 +424,11 @@ .orn-g{stroke:var(--accent);stroke-opacity:var(--orn-opacity);stroke-width:1;fill:none} .orn-scan-a{fill:var(--accent);fill-opacity:calc(var(--orn-opacity) * .5)} .orn-scan-b{fill:var(--accent);fill-opacity:var(--orn-opacity)} +/* legibility backstop for the four densest motifs (hex6/jaali/star8/scan), same fix as + docs/the-fleet/: everything in .col/.mod/.inspector/.stage/.stepdesc/.tabs/.msg/.judge/.dec + already sits on an opaque --surface and doesn't need this -- only the bare section + intros/headings and the footer provenance line sit directly over the ornament layer. */ +:root:is([data-theme="arabic"],[data-theme="indian"],[data-theme="andalus"],[data-theme="terminal"]) :is(section h2,p.intro,p.prov){text-shadow:0 0 2px var(--bg),0 0 4px var(--bg),0 0 7px var(--bg)} /* switcher lives inline in the sticky nav, not fixed -- the nav already claims that strip */ .theme-switcher{position:relative;margin-left:auto;flex:none} @@ -482,9 +496,10 @@ - - - + + + diff --git a/docs/the-fleet/index.html b/docs/the-fleet/index.html index b9a54c8..e2e6d98 100644 --- a/docs/the-fleet/index.html +++ b/docs/the-fleet/index.html @@ -60,7 +60,9 @@ --gold:#d4af37; --gold-deep:#a8862a; --jade:#4fb0c4; --flare:#c1523f; --merged:#6bab7d; --display: "Futura", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif; --display-tracking: .02em; - --orn-opacity: .16; + /* .16 read as noise directly behind small prose (66px hex6 tile, high edge density); + cut toward the enso/vine baseline that never got a legibility complaint. */ + --orn-opacity: .07; } /* Japanese -- sumi-e minimalism, ma (negative space), washi ground, single vermillion seal */ :root[data-theme="japanese"] { @@ -81,7 +83,9 @@ --gold:#e8a020; --gold-deep:#c07f14; --jade:#2bb3ad; --flare:#c81d3a; --merged:#5a9d5f; --display: "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif; --display-tracking: 0; - --orn-opacity: .17; + /* .17 was the densest overlap of any theme (64px tile, six large overlapping + circles) -- cut toward the enso/vine baseline that never got a legibility complaint. */ + --orn-opacity: .07; } /* Codex -- illuminated manuscript, parchment + rubrication + blackletter, its own deliberate world */ :root[data-theme="codex"] { @@ -102,7 +106,9 @@ --gold:#c9963c; --gold-deep:#a2761f; --jade:#2fb3a6; --flare:#c1633f; --merged:#5f9d6e; --display: "Avenir Next", "Century Gothic", "Futura", sans-serif; --display-tracking: .01em; - --orn-opacity: .17; + /* .17 on a 72px tile of bold rotated squares -- straight edges at many angles + compete hard with letterforms; cut toward the enso/vine baseline. */ + --orn-opacity: .07; } /* The Terminal -- now : CRT phosphor green on near-black, monospace everywhere */ :root[data-theme="terminal"] { @@ -112,7 +118,10 @@ --gold:#48d06a; --gold-deep:#33a552; --jade:#59d0c0; --flare:#e0574a; --merged:#48d06a; --display: var(--mono); --display-tracking: -.02em; - --orn-opacity: .1; + /* .1 is already low, but the scan tile repeats every 5px -- close to a text + stroke's own width, so it reads as noise regardless of opacity. Widened the + tile below (see #scan) and trimmed opacity a little further to match. */ + --orn-opacity: .05; } * { box-sizing: border-box; } @@ -149,6 +158,16 @@ .orn-scan-a { fill: var(--gold); fill-opacity: calc(var(--orn-opacity) * .5); } .orn-scan-b { fill: var(--gold); fill-opacity: var(--orn-opacity); } + /* legibility backstop for the four densest motifs (hex6/jaali/star8/scan): a tight + ground-colored halo on the prose that has no card behind it (everything inside + .role/.chan/.callout/.manifest/.laws-sec already sits on an opaque --ground-2 and + doesn't need this). Lower --orn-opacity above does most of the work; this covers + the residual edges right at the glyph boundary where density alone won't. */ + :root:is([data-theme="arabic"], [data-theme="indian"], [data-theme="andalus"], [data-theme="terminal"]) + :is(.lede-h, h2, .section-lede, .inc .idx, .inc h3, .inc .refs, .inc p, .inc .law, .standdown .final, .sig, footer) { + text-shadow: 0 0 2px var(--ground), 0 0 4px var(--ground), 0 0 7px var(--ground); + } + /* prose self-caps at --measure; the section shell is wider so multi-column blocks breathe */ .wrap { max-width: 62rem; margin-inline: auto; padding-inline: var(--edge); } @@ -507,9 +526,10 @@ - - - + + + diff --git a/docs/the-fleet/night-two/index.html b/docs/the-fleet/night-two/index.html index 54b5b39..78d9ee1 100644 --- a/docs/the-fleet/night-two/index.html +++ b/docs/the-fleet/night-two/index.html @@ -60,7 +60,9 @@ --gold:#d4af37; --gold-deep:#a8862a; --jade:#4fb0c4; --flare:#c1523f; --merged:#6bab7d; --display: "Futura", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif; --display-tracking: .02em; - --orn-opacity: .16; + /* .16 read as noise directly behind small prose (66px hex6 tile, high edge density); + cut toward the enso/vine baseline that never got a legibility complaint. */ + --orn-opacity: .07; } /* Japanese -- sumi-e minimalism, ma (negative space), washi ground, single vermillion seal */ :root[data-theme="japanese"] { @@ -81,7 +83,9 @@ --gold:#e8a020; --gold-deep:#c07f14; --jade:#2bb3ad; --flare:#c81d3a; --merged:#5a9d5f; --display: "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif; --display-tracking: 0; - --orn-opacity: .17; + /* .17 was the densest overlap of any theme (64px tile, six large overlapping + circles) -- cut toward the enso/vine baseline that never got a legibility complaint. */ + --orn-opacity: .07; } /* Codex -- illuminated manuscript, parchment + rubrication + blackletter, its own deliberate world */ :root[data-theme="codex"] { @@ -102,7 +106,9 @@ --gold:#c9963c; --gold-deep:#a2761f; --jade:#2fb3a6; --flare:#c1633f; --merged:#5f9d6e; --display: "Avenir Next", "Century Gothic", "Futura", sans-serif; --display-tracking: .01em; - --orn-opacity: .17; + /* .17 on a 72px tile of bold rotated squares -- straight edges at many angles + compete hard with letterforms; cut toward the enso/vine baseline. */ + --orn-opacity: .07; } /* The Terminal -- now : CRT phosphor green on near-black, monospace everywhere */ :root[data-theme="terminal"] { @@ -112,7 +118,10 @@ --gold:#48d06a; --gold-deep:#33a552; --jade:#59d0c0; --flare:#e0574a; --merged:#48d06a; --display: var(--mono); --display-tracking: -.02em; - --orn-opacity: .1; + /* .1 is already low, but the scan tile repeats every 5px -- close to a text + stroke's own width, so it reads as noise regardless of opacity. Widened the + tile below (see #scan) and trimmed opacity a little further to match. */ + --orn-opacity: .05; } * { box-sizing: border-box; } @@ -149,6 +158,16 @@ .orn-scan-a { fill: var(--gold); fill-opacity: calc(var(--orn-opacity) * .5); } .orn-scan-b { fill: var(--gold); fill-opacity: var(--orn-opacity); } + /* legibility backstop for the four densest motifs (hex6/jaali/star8/scan): a tight + ground-colored halo on the prose that has no card behind it (everything inside + .role/.chan/.callout/.manifest/.laws-sec already sits on an opaque --ground-2 and + doesn't need this). Lower --orn-opacity above does most of the work; this covers + the residual edges right at the glyph boundary where density alone won't. */ + :root:is([data-theme="arabic"], [data-theme="indian"], [data-theme="andalus"], [data-theme="terminal"]) + :is(.lede-h, h2, .section-lede, .inc .idx, .inc h3, .inc .refs, .inc p, .inc .law, .standdown .final, .sig, footer) { + text-shadow: 0 0 2px var(--ground), 0 0 4px var(--ground), 0 0 7px var(--ground); + } + /* prose self-caps at --measure; the section shell is wider so multi-column blocks breathe */ .wrap { max-width: 62rem; margin-inline: auto; padding-inline: var(--edge); } @@ -508,9 +527,10 @@ - - - + + + From e633434373d9bdfb54d205b0e66bc714d60ab8d2 Mon Sep 17 00:00:00 2001 From: testtest126 <44771568+testtest126@users.noreply.github.com> Date: Fri, 17 Jul 2026 17:21:44 +0200 Subject: [PATCH 2/2] Docs: lift --bone-faint so it clears AA on color math alone (no halo dependency) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Follow-up to #191. The Assayer's independent verification caught a real gap: --bone-faint (used in .sig, footer, .inc .refs) was still only 2.98:1 in the terminal theme against the worst-case pattern-blended background post-fix, clearing AA only via the text-shadow halo -- whose real-world sufficiency couldn't be confirmed empirically. Re-measuring myself found the gap was wider than reported: all four fixed themes were short on the color math alone (arabic 4.24:1, indian 4.25:1, andalus 3.66:1, terminal 2.98:1), not just terminal. Fix: lifted --bone-faint per theme by blending toward the theme's own --bone-dim (already proven safe at 6+:1) until worst-case contrast clears 4.5:1 with margin -- keeps each theme's faint token in its existing hue family rather than picking an arbitrary new color, and stays visually distinct from --bone-dim (1.3-1.8:1 apart). Applied identically to docs/the-fleet/index.html and docs/the-fleet/night-two/index.html. Re-measured directly against the edited source (regex-parsed the actual --ground/--bone-faint/--gold/--orn-opacity values out of each theme block, not hand-copied numbers): theme old bone-faint new bone-faint worst-case now arabic #7d7f9c #8688a3 4.77:1 indian #96806a #a0886f 4.75:1 andalus #8d8267 #a3967a 4.77:1 terminal #4f6654 #6e8772 4.76:1 All four now clear WCAG AA (4.5:1) by the color math alone -- the halo is a bonus, not load-bearing. Also checked the new values against --ground-2 (the card context .role .spoke / .chan h3 span also use): 4.42-4.87:1, likewise an improvement over the old values (3.03-4.35:1) in every theme. docs/architecture/index.html needs no change: its equivalent faint token (--ink-soft) is numerically identical to the-fleet's --bone-dim in all four themes (confirmed by diffing the values), not --bone-faint -- already measured safe at 6.08-8.49:1 in the original fix. There's no third, fainter tier exposed to the pattern on that page. 🤖 Generated with Claude Code Co-authored-by: Claude Sonnet 5 --- docs/the-fleet/index.html | 19 +++++++++++++++---- docs/the-fleet/night-two/index.html | 19 +++++++++++++++---- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/docs/the-fleet/index.html b/docs/the-fleet/index.html index e2e6d98..42b296e 100644 --- a/docs/the-fleet/index.html +++ b/docs/the-fleet/index.html @@ -56,7 +56,10 @@ :root[data-theme="arabic"] { --ground:#0d1233; --ground-2:#131a45; --ground-3:#182050; --hair:rgba(212,175,55,.18); --hair-2:rgba(212,175,55,.09); - --bone:#ece7d6; --bone-dim:#b9b8cb; --bone-faint:#7d7f9c; + --bone:#ece7d6; --bone-dim:#b9b8cb; + /* lifted from #7d7f9c: at .07 orn-opacity that still only cleared 4.24:1 worst-case + against the pattern's own color -- short of AA on the math alone, halo notwithstanding. */ + --bone-faint:#8688a3; --gold:#d4af37; --gold-deep:#a8862a; --jade:#4fb0c4; --flare:#c1523f; --merged:#6bab7d; --display: "Futura", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif; --display-tracking: .02em; @@ -79,7 +82,9 @@ :root[data-theme="indian"] { --ground:#2a0f14; --ground-2:#37151b; --ground-3:#421a21; --hair:rgba(232,160,32,.20); --hair-2:rgba(232,160,32,.1); - --bone:#f7ead0; --bone-dim:#d2b48c; --bone-faint:#96806a; + --bone:#f7ead0; --bone-dim:#d2b48c; + /* lifted from #96806a: 4.25:1 worst-case pre-fix, short of AA on the math alone. */ + --bone-faint:#a0886f; --gold:#e8a020; --gold-deep:#c07f14; --jade:#2bb3ad; --flare:#c81d3a; --merged:#5a9d5f; --display: "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif; --display-tracking: 0; @@ -102,7 +107,9 @@ :root[data-theme="andalus"] { --ground:#062a28; --ground-2:#0a3532; --ground-3:#0e403c; --hair:rgba(201,150,60,.18); --hair-2:rgba(201,150,60,.09); - --bone:#f0e6d2; --bone-dim:#c2b294; --bone-faint:#8d8267; + --bone:#f0e6d2; --bone-dim:#c2b294; + /* lifted from #8d8267: only 3.66:1 worst-case pre-fix -- the biggest gap of the four. */ + --bone-faint:#a3967a; --gold:#c9963c; --gold-deep:#a2761f; --jade:#2fb3a6; --flare:#c1633f; --merged:#5f9d6e; --display: "Avenir Next", "Century Gothic", "Futura", sans-serif; --display-tracking: .01em; @@ -114,7 +121,11 @@ :root[data-theme="terminal"] { --ground:#080b0a; --ground-2:#0d120f; --ground-3:#111814; --hair:rgba(80,220,120,.16); --hair-2:rgba(80,220,120,.08); - --bone:#c9d6c9; --bone-dim:#7f9a83; --bone-faint:#4f6654; + --bone:#c9d6c9; --bone-dim:#7f9a83; + /* lifted from #4f6654: only 2.98:1 worst-case pre-fix -- the token that started this + follow-up. The 5px->6x10 scan widening in #scan below still helps, but this value + now clears AA on the color math alone, independent of the halo. */ + --bone-faint:#6e8772; --gold:#48d06a; --gold-deep:#33a552; --jade:#59d0c0; --flare:#e0574a; --merged:#48d06a; --display: var(--mono); --display-tracking: -.02em; diff --git a/docs/the-fleet/night-two/index.html b/docs/the-fleet/night-two/index.html index 78d9ee1..f829e42 100644 --- a/docs/the-fleet/night-two/index.html +++ b/docs/the-fleet/night-two/index.html @@ -56,7 +56,10 @@ :root[data-theme="arabic"] { --ground:#0d1233; --ground-2:#131a45; --ground-3:#182050; --hair:rgba(212,175,55,.18); --hair-2:rgba(212,175,55,.09); - --bone:#ece7d6; --bone-dim:#b9b8cb; --bone-faint:#7d7f9c; + --bone:#ece7d6; --bone-dim:#b9b8cb; + /* lifted from #7d7f9c: at .07 orn-opacity that still only cleared 4.24:1 worst-case + against the pattern's own color -- short of AA on the math alone, halo notwithstanding. */ + --bone-faint:#8688a3; --gold:#d4af37; --gold-deep:#a8862a; --jade:#4fb0c4; --flare:#c1523f; --merged:#6bab7d; --display: "Futura", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif; --display-tracking: .02em; @@ -79,7 +82,9 @@ :root[data-theme="indian"] { --ground:#2a0f14; --ground-2:#37151b; --ground-3:#421a21; --hair:rgba(232,160,32,.20); --hair-2:rgba(232,160,32,.1); - --bone:#f7ead0; --bone-dim:#d2b48c; --bone-faint:#96806a; + --bone:#f7ead0; --bone-dim:#d2b48c; + /* lifted from #96806a: 4.25:1 worst-case pre-fix, short of AA on the math alone. */ + --bone-faint:#a0886f; --gold:#e8a020; --gold-deep:#c07f14; --jade:#2bb3ad; --flare:#c81d3a; --merged:#5a9d5f; --display: "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif; --display-tracking: 0; @@ -102,7 +107,9 @@ :root[data-theme="andalus"] { --ground:#062a28; --ground-2:#0a3532; --ground-3:#0e403c; --hair:rgba(201,150,60,.18); --hair-2:rgba(201,150,60,.09); - --bone:#f0e6d2; --bone-dim:#c2b294; --bone-faint:#8d8267; + --bone:#f0e6d2; --bone-dim:#c2b294; + /* lifted from #8d8267: only 3.66:1 worst-case pre-fix -- the biggest gap of the four. */ + --bone-faint:#a3967a; --gold:#c9963c; --gold-deep:#a2761f; --jade:#2fb3a6; --flare:#c1633f; --merged:#5f9d6e; --display: "Avenir Next", "Century Gothic", "Futura", sans-serif; --display-tracking: .01em; @@ -114,7 +121,11 @@ :root[data-theme="terminal"] { --ground:#080b0a; --ground-2:#0d120f; --ground-3:#111814; --hair:rgba(80,220,120,.16); --hair-2:rgba(80,220,120,.08); - --bone:#c9d6c9; --bone-dim:#7f9a83; --bone-faint:#4f6654; + --bone:#c9d6c9; --bone-dim:#7f9a83; + /* lifted from #4f6654: only 2.98:1 worst-case pre-fix -- the token that started this + follow-up. The 5px->6x10 scan widening in #scan below still helps, but this value + now clears AA on the color math alone, independent of the halo. */ + --bone-faint:#6e8772; --gold:#48d06a; --gold-deep:#33a552; --jade:#59d0c0; --flare:#e0574a; --merged:#48d06a; --display: var(--mono); --display-tracking: -.02em;