keith/Portfolio-2026
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(buttons): dark-surface button variants with WCAG-AA contrast

Browse Source
This commit is contained in:
Keith Solomon
2026-08-16 13:24:04 -05:00
parent 8125d1c818
commit aaef1ee4f8
2 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/blocks/buttons.css
+40
View File
@@ -174,3 +174,43 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
opacity: 1;
outline: 2px solid var(--color-info, #233a7a);
}
/* Dark-surface button variants (WCAG-AA against #100e0b) */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1rem;
line-height: 1.1;
padding: 0.5rem 2rem;
border-radius: 0.5rem;
border: 3px solid transparent;
text-decoration: none;
transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
.button:active { transform: scale(0.99); }
@media (prefers-reduced-motion: reduce) { .button:active { transform: none; } }
.button:focus-visible { outline: 2px solid var(--color-primary, #b6c4ff); outline-offset: 3px; }
.button--primary {
background: var(--color-primary, #b6c4ff);
color: var(--color-on-primary, #05297a);
border-color: var(--color-primary, #b6c4ff);
}
.button--primary:hover { background: var(--color-primary-87, #dce1ff); border-color: var(--color-primary-87, #dce1ff); }
.button--outline {
background: transparent;
color: var(--color-on-surface, #e3e1e9);
border-color: var(--color-outline, #8f909d);
}
.button--outline:hover { border-color: var(--color-primary, #b6c4ff); color: var(--color-primary, #b6c4ff); }
.button--secondary {
background: var(--color-surface-container-high, #292a2f);
color: var(--color-on-surface, #e3e1e9);
border-color: var(--color-outline-variant, #444651);
}