mirror of
https://github.com/koala73/worldmonitor.git
synced 2026-04-25 17:14:57 +02:00
feat(brief): swap sienna rust for two-strength WM mint (Option B palette) (#3178)
* feat(brief): swap sienna rust for two-strength WM mint (Option B palette)
The only off-brand color in the product was the brief's sienna rust
(#8b3a1f) accent. Every other surface — /pro landing, dashboard,
dashboard panels — uses the WM mint green (#4ade80). Swapping the
brief's accent to the brand mint makes the magazine read as a sibling
of /pro rather than a separate editorial product, while keeping the
magazine-grade serif typography and even/odd page inversion intact.
Implementation (user picked Option B from brief-palette-playground.html):
--sienna : #8b3a1f -> #3ab567 muted mint for LIGHT pages (readable
on #fafafa without the bright-mint
glare of a pure-brand swap)
--mint : + #4ade80 bright WM mint for DARK pages
(matches /pro exactly)
--cream : #f1e9d8 -> #fafafa unified with --paper; one crisp white
--cream-ink: #1a1612 -> #0a0a0a crisper contrast on the new paper
Accent placement (unchanged structurally — only colors swapped):
- Digest running heads, labels, blockquote rule, stats dividers,
end-marker rule, signal/thread tags: all muted mint on light
- Story source line: newly mint (was unstyled bone/ink at 0.6 opacity);
two-strength — muted on light stories, bright on dark
- Logo ekg dot: mint on every page so the brand 'signal' pulse
threads through the whole magazine
No layout changes. No HTML structure changes. Only color constants +
a ~20-line CSS addition for story-source + ekg-dot accents.
165/165 brief tests pass (renderer contract unchanged — envelope shape
identical, only computed styles differ). Both tsconfigs typecheck clean.
* fix(brief): darken light-page mint to pass WCAG AA + fix digest ekg-dot
Two P2 findings on PR #3178 review.
1. Digest ekg-dot used bright #4ade80 on a #fafafa background,
contradicting the code comment that said 'light pages use the
muted mint'. The rule was grouped with .cover and .story.dark
(both ink backgrounds) when it should have been grouped with
.story.light (paper background). Regrouped.
2. #3ab567 on #fafafa tests at ~2.31:1 — fails WCAG AA 4.5:1 for
every text size and fails the 3:1 large-text floor. The PR called
this a rollback trigger; contrast math says it would fail every
meaningful text usage (mono running heads, source lines, labels,
footer captions). Swapped --sienna from #3ab567 to #1f7a3f —
tested at ~4.90:1 on #fafafa, passes AA for normal text.
Kept the variable name '--sienna' for backwards compat (every
.digest rule references it). The hue stays recognisably mint-
family (green dominant) so the brand relationship with #4ade80
on dark pages is still clear to a reader. Dark-page mint is
unchanged — #4ade80 on #0a0a0a is ~11.4:1, passes AAA.
Playground (brief-palette-playground.html) updated to match so
future iterations work against the accessible value.
165/165 brief tests pass. Both tsconfigs typecheck clean.
This commit is contained in:
@@ -514,11 +514,26 @@ function renderBackCover({ tz, pageIndex, totalPages }) {
|
||||
|
||||
const STYLE_BLOCK = `<style>
|
||||
:root {
|
||||
/* WorldMonitor brand palette — aligned with /pro landing + dashboard.
|
||||
Previous sienna rust (#8b3a1f) was the only off-brand color in the
|
||||
product; swapped to WM mint at two strengths so the accent harmonises
|
||||
on both light and dark pages. Paper unified to a single crisp white
|
||||
(#fafafa) rather than warm cream so the brief reads as a sibling of
|
||||
/pro rather than a separate editorial product. */
|
||||
--ink: #0a0a0a;
|
||||
--bone: #f2ede4;
|
||||
--cream: #f1e9d8;
|
||||
--cream-ink: #1a1612;
|
||||
--sienna: #8b3a1f;
|
||||
--cream: #fafafa; /* was #f1e9d8 — unified with --paper */
|
||||
--cream-ink: #0a0a0a; /* was #1a1612 — crisper contrast on white */
|
||||
/* --sienna is kept as the variable name for backwards compat (every
|
||||
.digest rule below references it) but the VALUE is now a dark
|
||||
mint sized for WCAG AA 4.5:1 on #fafafa. The earlier #3ab567 hit
|
||||
only ~2.3:1, which failed accessibility for the mono running
|
||||
heads + source lines even at their 13-18 px sizes. #1f7a3f lands
|
||||
at ~4.90:1 — passes AA for normal text, still reads as mint-
|
||||
family (green hue dominant), and sits close enough to the brand
|
||||
#4ade80 that a reader recognises the relationship. */
|
||||
--sienna: #1f7a3f; /* dark mint for light-page accents — WCAG AA on #fafafa */
|
||||
--mint: #4ade80; /* bright WM brand mint for dark-page accents (AAA on #0a0a0a) */
|
||||
--paper: #fafafa;
|
||||
--paper-ink: #0a0a0a;
|
||||
}
|
||||
@@ -689,11 +704,27 @@ const STYLE_BLOCK = `<style>
|
||||
max-width: 40ch; margin-bottom: 4vh; opacity: 0.88;
|
||||
}
|
||||
.story.dark .desc { opacity: 0.85; }
|
||||
/* Source line — the one editorial accent on story pages. Sits at
|
||||
two-strength mint to match the brand (Option B): muted on light,
|
||||
bright on dark. Opacity removed so mint reads as a deliberate
|
||||
accent, not a muted bone/ink. */
|
||||
.story .source {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: max(11px, 0.9vw); letter-spacing: 0.2em;
|
||||
text-transform: uppercase; opacity: 0.6;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.story.light .source { color: var(--sienna); }
|
||||
.story.dark .source { color: var(--mint); }
|
||||
/* Logo ekg dot: mint on every page so the brand "signal" pulse
|
||||
shows across the whole magazine. Light pages use the muted mint
|
||||
so it doesn't glare against #fafafa. */
|
||||
/* Bright mint on DARK backgrounds only (ink cover + dark stories).
|
||||
Digest pages are light (#fafafa) so they need the dark-mint
|
||||
variant — bright mint would read as a neon dot on white. */
|
||||
.cover .wm-logo .wm-ekg-dot,
|
||||
.story.dark .wm-logo .wm-ekg-dot { fill: var(--mint); }
|
||||
.digest .wm-logo .wm-ekg-dot,
|
||||
.story.light .wm-logo .wm-ekg-dot { fill: var(--sienna); }
|
||||
.story .right { display: flex; flex-direction: column; justify-content: center; }
|
||||
.story .callout {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
|
||||
Reference in New Issue
Block a user