Focus Outline Width
2px
$ aoe install @community/value-focus-outline-widthProjection
Always in _index.xml · the agent never has to ask for this.
focus-outline-width [value] v1.0.0
Loaded when retrieval picks the atom as adjacent / supporting.
focus-outline-width [value] v1.0.0
Constant
2px
Type
css-length
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Usage
/* Canonical focus ring pattern */
:focus-visible {
outline: 2px solid currentColor; /* or a specific focus-ring token */
outline-offset: 2px;
}
Loaded when retrieval picks the atom as a focal / direct hit.
focus-outline-width [value] v1.0.0
Constant
2px
Type
css-length
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Usage
/* Canonical focus ring pattern */
:focus-visible {
outline: 2px solid currentColor; /* or a specific focus-ring token */
outline-offset: 2px;
}
Relations
related: [@w3c/fact-wcag-focus-contrast, @community/term-focus-ring, @community/check-focus-visible]
Rationale
WCAG 2.2 SC 2.4.11 specifies a minimum focus indicator area equivalent to a 2 CSS pixel perimeter. Using outline-width: 2px with outline-offset: 2px satisfies both the size and gap requirements while remaining visible on all background colors when combined with a 3:1 contrast ratio ring color.
Constant
2px
Type
css-length
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Usage
/* Canonical focus ring pattern */
:focus-visible {
outline: 2px solid currentColor; /* or a specific focus-ring token */
outline-offset: 2px;
}
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/value-focus-outline-width/atom.yaml