fix(a11y): address axe color-contrast violations on dark surface
This commit is contained in:
@@ -214,3 +214,16 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
|
||||
color: var(--color-on-surface, #e3e1e9);
|
||||
border-color: var(--color-outline-variant, #444651);
|
||||
}
|
||||
|
||||
/* Outline button over the site-header's bg-secondary surface needs lighter text
|
||||
* because --color-on-surface (#e3e1e9) on bg-secondary (#6e757f) is only 3.59:1.
|
||||
* Pure white clears 4.5:1 against #6e757f; --color-on-primary (#05297a) is too
|
||||
* dark and drops to 2.81:1, so we go to --color-white instead. */
|
||||
.site-header .button--outline {
|
||||
color: var(--color-white, #ffffff);
|
||||
border-color: var(--color-white, #ffffff);
|
||||
}
|
||||
.site-header .button--outline:hover {
|
||||
color: var(--color-primary-87, #dce1ff);
|
||||
border-color: var(--color-primary-87, #dce1ff);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user