31 lines
1.0 KiB
Plaintext
31 lines
1.0 KiB
Plaintext
/**
|
|
* styles/tokens/_focus.less
|
|
*
|
|
* Module-wide focus ring pattern.
|
|
*
|
|
* High-contrast outer ring + inner offset that must survive all 9 state
|
|
* background combinations and both Foundry dark/light themes.
|
|
* Never rely on browser default focus outline alone.
|
|
*
|
|
* Applied via: .scrying-pool *:focus-visible
|
|
*/
|
|
|
|
.scrying-pool {
|
|
*:focus-visible {
|
|
outline: none; /* suppress browser default - visible fallback via box-shadow */
|
|
box-shadow: var(--sp-focus-ring), 0 0 0 4px var(--sp-surface);
|
|
/* Inner offset (--sp-surface) creates separation so the ring is visible
|
|
against any state background. The outer ring uses --sp-focus (#63c287).
|
|
NOTE: Parent containers must NOT have overflow:hidden to avoid clipping. */
|
|
}
|
|
|
|
/* Elevated contrast for interactive elements with state backgrounds */
|
|
[role="button"]:focus-visible,
|
|
button:focus-visible {
|
|
outline: none;
|
|
box-shadow:
|
|
0 0 0 2px var(--sp-surface), /* inner offset */
|
|
0 0 0 4px var(--sp-focus); /* outer ring */
|
|
}
|
|
}
|