From b4ae385301001a1540c16a59cf7126b2ac564d04 Mon Sep 17 00:00:00 2001 From: Benoit TRAVERS Date: Sun, 28 Jun 2026 15:57:34 +0200 Subject: [PATCH 1/2] Light mode: split display vs label accent + scheme-aware green checks - Add --display-accent (brand pink #E0589A, both schemes) and use it for the large display wordmark (.btv-pink). Large text only needs 3:1, so it stays fully on-brand pink in light. - Light --text-accent -> #D6246F (vivid raspberry, ~4.6:1 AA) for the small labels/links (eyebrows, tags, package names, docs links) so they're readable on white while staying punchy. - Feature-list check marks now stroke var(--text-green) instead of a hardcoded bright green, so they darken to #15683A (AA) on light and stay #46B86C on dark. Verified light: wordmark rgb(224,88,154), eyebrow rgb(214,36,111), check rgb(21,104,58); build green. Co-Authored-By: Claude Opus 4.8 (1M context) --- apps/website/.vitepress/theme/Landing.vue | 4 ++-- packages/theme/src/tokens.css | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/apps/website/.vitepress/theme/Landing.vue b/apps/website/.vitepress/theme/Landing.vue index 4714d74..113d813 100644 --- a/apps/website/.vitepress/theme/Landing.vue +++ b/apps/website/.vitepress/theme/Landing.vue @@ -163,7 +163,7 @@ onMounted(() => {

{{ p.blurb }}

@@ -251,7 +251,7 @@ onMounted(() => { } :global(html:not(.dark)) .btv-glow { opacity: 0.55; } -.btv-pink { color: var(--text-accent); } +.btv-pink { color: var(--display-accent); } .btv-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; diff --git a/packages/theme/src/tokens.css b/packages/theme/src/tokens.css index e8bb0c6..34354db 100644 --- a/packages/theme/src/tokens.css +++ b/packages/theme/src/tokens.css @@ -55,6 +55,10 @@ --text-accent: #E0589A; --text-green: #46B86C; + /* Display accent — the brand pink as the LARGE display wordmark colour in + both schemes (large text only needs 3:1, so it can stay fully vibrant). */ + --display-accent: #E0589A; + /* ── Glass (frosted sticky headers) ──────────────────────────── */ --glass: rgba(21, 16, 28, 0.66); @@ -147,7 +151,7 @@ --faint: #978996; --accent: #E0589A; /* fill unchanged (dark ink on top) */ - --text-accent: #C42A6C; /* punchier vivid beetroot, ~5.1:1 on white (was #A52260) */ + --text-accent: #D6246F; /* small labels / links — vivid raspberry, ~4.6:1 AA on white */ --text-green: #15683A; /* ~5.2:1 on white — affirmative text */ --accent-wash: rgba(224, 88, 154, 0.12); From 56b3eb64c95427c97937af9d68097cbd505664f0 Mon Sep 17 00:00:00 2001 From: Benoit TRAVERS Date: Sun, 28 Jun 2026 16:25:21 +0200 Subject: [PATCH 2/2] Address review: scope display accent to wordmarks; spelling - .btv-pink reverts to --text-accent (AA) for general highlights incl. the small copy toast; --display-accent (brand pink) is now scoped to the large wordmarks only (.btv-title/.btv-word). Fixes the toast falling below AA in light. [Copilot] - tokens.css comment: 'colour' -> 'color' for consistency. [Copilot] Co-Authored-By: Claude Opus 4.8 (1M context) --- apps/website/.vitepress/theme/Landing.vue | 6 +++++- packages/theme/src/tokens.css | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/website/.vitepress/theme/Landing.vue b/apps/website/.vitepress/theme/Landing.vue index 113d813..b9aa43b 100644 --- a/apps/website/.vitepress/theme/Landing.vue +++ b/apps/website/.vitepress/theme/Landing.vue @@ -251,7 +251,11 @@ onMounted(() => { } :global(html:not(.dark)) .btv-glow { opacity: 0.55; } -.btv-pink { color: var(--display-accent); } +/* general accent highlights (incl. the small copy toast) keep the AA text accent */ +.btv-pink { color: var(--text-accent); } +/* the large display wordmark (hero / header / footer) stays full brand pink */ +.btv-title .btv-pink, +.btv-word .btv-pink { color: var(--display-accent); } .btv-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; diff --git a/packages/theme/src/tokens.css b/packages/theme/src/tokens.css index 34354db..63006c6 100644 --- a/packages/theme/src/tokens.css +++ b/packages/theme/src/tokens.css @@ -55,7 +55,7 @@ --text-accent: #E0589A; --text-green: #46B86C; - /* Display accent — the brand pink as the LARGE display wordmark colour in + /* Display accent — the brand pink as the LARGE display wordmark color in both schemes (large text only needs 3:1, so it can stay fully vibrant). */ --display-accent: #E0589A;