From e576c601371134276dd7ff67c4186215ab639934 Mon Sep 17 00:00:00 2001 From: Benoit TRAVERS Date: Sun, 28 Jun 2026 19:34:20 +0200 Subject: [PATCH 1/2] Light mode: add surface definition (borders + card lift) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The light page read flat/washed because white cards sat on a near-white bg with only a ~10% hairline and no rest shadow — measured-AA text, but no structural contrast. Without darkening the bg (which would drop the accent labels below AA), add definition: - tokens.css light: --border 0.10 -> 0.16, --border-2 0.17 -> 0.24, --card-soft -> #F0E6EC (stronger dividers/edges; also lifts docs chrome). - Landing.vue light: give project + principle cards a soft rest shadow so they separate from the background. Co-Authored-By: Claude Opus 4.8 (1M context) --- apps/website/.vitepress/theme/Landing.vue | 6 ++++++ packages/theme/src/tokens.css | 6 +++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/website/.vitepress/theme/Landing.vue b/apps/website/.vitepress/theme/Landing.vue index b9aa43b..4b56b00 100644 --- a/apps/website/.vitepress/theme/Landing.vue +++ b/apps/website/.vitepress/theme/Landing.vue @@ -250,6 +250,12 @@ onMounted(() => { --btv-footer: rgba(26, 12, 20, 0.025); } :global(html:not(.dark)) .btv-glow { opacity: 0.55; } +/* On near-white, the hairline alone leaves cards looking flat — give them a + soft rest shadow in light mode so they lift off the background. */ +:global(html:not(.dark)) .btv-pcard, +:global(html:not(.dark)) .btv-prin-card { + box-shadow: 0 1px 2px rgba(26, 12, 20, 0.05), 0 16px 32px -24px rgba(26, 12, 20, 0.22); +} /* general accent highlights (incl. the small copy toast) keep the AA text accent */ .btv-pink { color: var(--text-accent); } diff --git a/packages/theme/src/tokens.css b/packages/theme/src/tokens.css index edd7628..3fdd9fd 100644 --- a/packages/theme/src/tokens.css +++ b/packages/theme/src/tokens.css @@ -141,10 +141,10 @@ --bg: #FBF7F9; --bg-grad: #FCEDF4; --card: #FFFFFF; - --card-soft: #F6EDF2; + --card-soft: #F0E6EC; - --border: rgba(26, 12, 20, 0.10); - --border-2: rgba(26, 12, 20, 0.17); + --border: rgba(26, 12, 20, 0.16); + --border-2: rgba(26, 12, 20, 0.24); --text: #1F0E18; --muted: #5E5159; /* ~7.1:1 on white */ From 0c1e9ad23f0aa1491fcd71722b815144cd0b1e3d Mon Sep 17 00:00:00 2001 From: Benoit TRAVERS Date: Sun, 28 Jun 2026 19:51:26 +0200 Subject: [PATCH 2/2] Address review: keep project-card hover shadow in light mode The light rest-shadow selector outspecifies .pcard:hover, so the hover box-shadow stopped applying on project cards. Add a matching-specificity light hover override that restores var(--shadow-card). [Copilot] Co-Authored-By: Claude Opus 4.8 (1M context) --- apps/website/.vitepress/theme/Landing.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/website/.vitepress/theme/Landing.vue b/apps/website/.vitepress/theme/Landing.vue index 4b56b00..85d27fa 100644 --- a/apps/website/.vitepress/theme/Landing.vue +++ b/apps/website/.vitepress/theme/Landing.vue @@ -256,6 +256,8 @@ onMounted(() => { :global(html:not(.dark)) .btv-prin-card { box-shadow: 0 1px 2px rgba(26, 12, 20, 0.05), 0 16px 32px -24px rgba(26, 12, 20, 0.22); } +/* keep the hover lift shadow — the rest rule above outspecifies .pcard:hover */ +:global(html:not(.dark)) .btv-pcard:hover { box-shadow: var(--shadow-card); } /* general accent highlights (incl. the small copy toast) keep the AA text accent */ .btv-pink { color: var(--text-accent); }