diff --git a/core/pattern-library/molecules.scss b/core/pattern-library/molecules.scss index 4072747..c8ebbb8 100644 --- a/core/pattern-library/molecules.scss +++ b/core/pattern-library/molecules.scss @@ -4,7 +4,34 @@ $form-border-width: 0.1rem; border: $form-border-width solid ui-color(form-border); } +// The focus visual only — no selector. Apply it under whatever trigger you need +// (`&:focus`, `&:focus-within`, `&:focus-visible`, …). +@mixin focus-style() { + box-shadow: 0 0 0.5rem 0.3rem rgba(ui-color(focus-outline), 0.7); + outline: none; +} + +// The common case: the focus visual on the element's own focus. +@mixin focus-indicator() { + &:focus { + @include focus-style(); + } +} + +// Strips a native