NoRedInk/noredink-ui/22.6.0

NOTE: the latest version is 35.9.3

Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/NoRedInk/noredink-ui.

What we checked: Tag 22.6.0 is still on github.com/NoRedInk/noredink-ui; its commit 7cae53f1af4b is from 2023-03-24 17:13 UTC, before the version was published (2023-03-27 14:55 UTC); elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/NoRedInk/noredink-ui/zipball/22.6.0/

Nri.Ui.FocusRing.V1

forKeyboardUsers : List 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 Snippet
styles : List Style

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

NOTE: use boxShadows instead if your focusable element:

  • already has a box shadow
  • has an explicit border radius set
tightStyles : List Style

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

boxShadows : List String -> Style
focus
    [ FocusRing.boxShadows [ "inset 0 3px 0 0 " ++ ColorsExtra.toCssString glacier ]
    , Css.outline3 (Css.px 2) Css.solid Css.transparent
    ]
insetBoxShadows : List String -> 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
    ]

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

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

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 : Color
innerColor : Color