From 41755ccffce8badb9daec3704b52f52de0c03ac8 Mon Sep 17 00:00:00 2001 From: pyr0ball Date: Thu, 16 Apr 2026 07:28:36 -0700 Subject: [PATCH] =?UTF-8?q?fix:=20DemoBanner=20button=20contrast=20?= =?UTF-8?q?=E2=80=94=20use=20semantic=20surface=20token=20instead=20of=20h?= =?UTF-8?q?ardcoded=20white?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --color-primary in dark mode is a medium-light green (#6ab870); white on green yields ~2.2:1 contrast (fails WCAG AA 4.5:1 minimum). Using --color-surface (dark navy in dark mode, near-white in light mode) ensures the text always contrasts strongly with the primary background regardless of theme. Also tints banner background with 8% primary via color-mix() so it reads as visually distinct from the page surface without being loud. --- web/src/components/DemoBanner.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/components/DemoBanner.vue b/web/src/components/DemoBanner.vue index 93162cd..51c1cd5 100644 --- a/web/src/components/DemoBanner.vue +++ b/web/src/components/DemoBanner.vue @@ -27,8 +27,8 @@ position: sticky; top: 0; z-index: 200; - background: var(--color-surface-raised); - border-bottom: 1px solid var(--color-border); + background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-raised)); + border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border)); display: flex; align-items: center; justify-content: space-between; @@ -62,7 +62,7 @@ .demo-banner__cta--primary { background: var(--color-primary); - color: white; + color: var(--color-surface); /* surface is dark in dark mode, light in light mode — always contrasts primary */ } .demo-banner__cta--secondary {