Circuit-Forge/peregrine
3
0
Fork 0
Code Issues 19 Pull requests 1 Projects Releases 7 Packages Wiki Activity Actions

fix: DemoBanner button contrast — use semantic surface token instead of hardcoded white

Browse source 
--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.
This commit is contained in:
pyr0ball 2026-04-16 07:28:36 -07:00
parent f8c78031a0
commit 41755ccffc
1 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/src/components/DemoBanner.vue
View file

@ -27,8 +27,8 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 200; z-index: 200;
background: var(--color-surface-raised); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-raised));
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -62,7 +62,7 @@
.demo-banner__cta--primary { .demo-banner__cta--primary {
background: var(--color-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 { .demo-banner__cta--secondary {