mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-09-21 20:27:36 +03:00
Merge pull request #1069 from NoRedInk/bat/highlighter-high-contrast
Adds high contrast mode
This commit is contained in:
commit
91f2a89f1e
@ -72,6 +72,7 @@ import List.Extra
|
||||
import Nri.Ui.Highlightable.V1 as Highlightable exposing (Highlightable)
|
||||
import Nri.Ui.HighlighterTool.V1 as Tool
|
||||
import Nri.Ui.Html.Attributes.V2 as AttributesExtra
|
||||
import Nri.Ui.MediaQuery.V1 as MediaQuery
|
||||
import Sort exposing (Sorter)
|
||||
import Sort.Set
|
||||
import String.Extra
|
||||
@ -455,7 +456,19 @@ groupContainer viewSegment highlightables =
|
||||
tabindex 0
|
||||
, css
|
||||
[ Css.Global.children
|
||||
[ Css.Global.selector ":first-child" markedWith.startGroupClass
|
||||
[ Css.Global.selector ":first-child"
|
||||
(MediaQuery.highContrastMode
|
||||
[ Maybe.map
|
||||
(\name ->
|
||||
Css.before
|
||||
[ Css.property "content" ("\"[" ++ name ++ "] \"")
|
||||
]
|
||||
)
|
||||
markedWith.name
|
||||
|> Maybe.withDefault (Css.batch [])
|
||||
]
|
||||
:: markedWith.startGroupClass
|
||||
)
|
||||
, Css.Global.selector ":last-child" markedWith.endGroupClass
|
||||
]
|
||||
]
|
||||
|
@ -12,6 +12,7 @@ module Nri.Ui.HighlighterTool.V1 exposing
|
||||
|
||||
import Css
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.MediaQuery.V1 as MediaQuery
|
||||
|
||||
|
||||
{-| Tool that can be used on a highlighter
|
||||
@ -90,6 +91,7 @@ highlightStyles color =
|
||||
sharedStyles
|
||||
[ Css.backgroundColor color
|
||||
, Css.boxShadow5 Css.zero (Css.px 1) Css.zero Css.zero Colors.gray75
|
||||
, MediaQuery.highContrastMode [ Css.property "background-color" "Mark" ]
|
||||
]
|
||||
|
||||
|
||||
@ -105,6 +107,10 @@ hoverStyles color =
|
||||
List.append
|
||||
sharedStyles
|
||||
[ Css.important (Css.backgroundColor color)
|
||||
, MediaQuery.highContrastMode
|
||||
[ Css.property "background-color" "Highlight" |> Css.important
|
||||
, Css.property "color" "HighlightText"
|
||||
]
|
||||
|
||||
-- The Highlighter applies both these styles and the startGroup and
|
||||
-- endGroup styles. Here we disable the left and the right padding
|
||||
|
@ -1,5 +1,6 @@
|
||||
module Nri.Ui.MediaQuery.V1 exposing
|
||||
( anyMotion, prefersReducedMotion
|
||||
, highContrastMode
|
||||
, mobile, notMobile
|
||||
, mobileBreakpoint
|
||||
, quizEngineMobile
|
||||
@ -22,6 +23,7 @@ module Nri.Ui.MediaQuery.V1 exposing
|
||||
]
|
||||
|
||||
@docs anyMotion, prefersReducedMotion
|
||||
@docs highContrastMode
|
||||
|
||||
@docs mobile, notMobile
|
||||
@docs mobileBreakpoint
|
||||
@ -50,6 +52,12 @@ prefersReducedMotion =
|
||||
withMediaQuery [ "(prefers-reduced-motion)" ]
|
||||
|
||||
|
||||
{-| -}
|
||||
highContrastMode : List Style -> Style
|
||||
highContrastMode =
|
||||
withMediaQuery [ "(forced-colors: active)" ]
|
||||
|
||||
|
||||
{-| Styles using the `mobileBreakpoint` value as the maxWidth.
|
||||
-}
|
||||
mobile : MediaQuery
|
||||
|
Loading…
Reference in New Issue
Block a user