NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-19 11:41:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

styling and such

Browse Source
This commit is contained in:
Ben Dansby 2022-03-22 11:00:59 -07:00
parent 322f31247e
commit 44ee5f52ef
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
styleguide-app/Examples/Colors.elm
View File

@ -13,7 +13,9 @@ import Html.Styled as Html
import Html.Styled.Attributes as Attributes exposing (css)
import Nri.Ui.Colors.Extra
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.Text.V6 as Text
import SolidColor exposing (highContrast)
@ -90,7 +92,7 @@ example =
]
|> viewColors
, Heading.h3 [] [ Html.text "Background Highlight Colors" ]
, Html.p [] [ Html.text "Background highlights should be used as the default highlight style because they are more noticeable and readable. The dark colors should be used in the case where headings need to harmonize with highlighted containers, such as in Guided Drafts." ]
, Text.mediumBody [ Text.plaintext "Background highlights should be used as the default highlight style because they are more noticeable and readable. The dark colors should be used in the case where headings need to harmonize with highlighted containers, such as in Guided Drafts." ]
, [ ( "highlightYellow", Colors.highlightYellow, "Yellow background highlights" )
, ( "highlightYellowDark", Colors.highlightYellowDark, "Dark yellow background highlights" )
, ( "highlightCyan", Colors.highlightCyan, "Cyan background highlights" )
@ -108,7 +110,7 @@ example =
]
|> viewColors
, Heading.h3 [] [ Html.text "Text Highlight Colors" ]
, Html.p [] [ Html.text "Colors for highlighting text on a white background. These colors are readable at 14px bold and bigger." ]
, Text.mediumBody [ Text.plaintext "Colors for highlighting text on a white background. These colors are readable at 14px bold and bigger." ]
, [ ( "textHighlightYellow", Colors.textHighlightYellow, "Neutral text highlight #1" )
, ( "textHighlightCyan", Colors.textHighlightCyan, "Neutral text highlight #2" )
, ( "textHighlightMagenta", Colors.textHighlightMagenta, "Neutral text highlight #3" )
@ -147,6 +149,8 @@ viewColors colors =
[ Css.maxWidth (Css.px 12000)
, Css.displayFlex
, Css.flexWrap Css.wrap
, Css.property "gap" "20px"
, Css.margin3 (Css.px 10) Css.zero (Css.px 30)
]
]
@ -160,9 +164,8 @@ viewColor ( name, color, description ) =
, Css.maxWidth (Css.px 250)
, Css.minHeight (Css.px 160)
, Css.maxHeight (Css.px 160)
, Css.margin (Css.px 4)
, Css.padding (Css.px 8)
, Css.borderRadius (Css.px 4)
, Css.padding (Css.px 20)
, Css.borderRadius (Css.px 20)
-- Interior spacing
, Css.displayFlex
@ -179,21 +182,26 @@ viewColor ( name, color, description ) =
]
]
[ Html.div
[ css [ Css.fontSize (Css.px 20) ]
[ css
[ Css.fontSize (Css.px 20)
, Css.fontWeight (Css.int 700)
, Fonts.baseFont
]
]
[ Html.text name ]
, Html.div
[ css
[ Css.fontSize (Css.px 10)
, Css.flexGrow (Css.num 1)
[ Css.fontSize (Css.px 15)
, Css.textAlign Css.center
, Css.margin2 (Css.px 10) Css.zero
, Fonts.baseFont
]
]
[ Html.text description ]
, Html.div
[ css
[ Css.fontSize (Css.px 20)
, Css.flexGrow (Css.num 2)
, Fonts.baseFont
]
]
[ Html.text color.value ]