NoRedInk / noredink-ui / Nri.Ui.FocusRing.V1

forKeyboardUsers : List Css.Global.Snippet

When :focus-visible, add the two-tone focus ring.

Hides default focus ring from elements that are tagged as having a custom focus ring.

forMouseUsers : List Css.Global.Snippet

styles : List Css.Style

A two-tone focus ring that will be visually apparent for any background/element combination.

NOTE: use boxShadows instead if your focusable element:

tightStyles : List Css.Style

Prefer styles over tightStyles, except in cases where line spacing/font size will otherwise cause obscured content.

boxShadows : List String -> Css.Style

focus
    [ FocusRing.boxShadows [ "inset 0 3px 0 0 " ++ ColorsExtra.toCssString glacier ]
    , Css.outline3 (Css.px 2) Css.solid Css.transparent
    ]

insetBoxShadows : List String -> Css.Style

Please be sure that the padding on the element you add this style too is sufficient (at least 6px on all sides) that the inset box shadow won't cover any content.

focus
    [ FocusRing.insetBoxShadows [ "inset 0 3px 0 0 " ++ ColorsExtra.toCssString glacier ]
    , Css.outline3 (Css.px 2) Css.solid Css.transparent
    ]

outerBoxShadow : Css.Style

In special cases, we don't use a two-tone focus ring.

Be very sure this is what you need before using this!

insetBoxShadow : Css.Style

In special cases, we don't use a two-tone focus ring, and an outset focus ring would be obscured.

Be very sure this is what you need before using this!

customClass : String

Add this class to remove global focus styles. Only do this if you'll be adding the two-tone focus ring styles another way.

outerColor : Css.Color

innerColor : Css.Color