UI.Palette
is an interface offering all colors variations proposed in the design system.
Palette.blue600
|> Palette.toElementColor
blue : Color
Shorthand for the most common occurrence of blue. Equivalent to blue700
gray : Color
Shorthand for the most common occurrence of gray. Equivalent to gray700
green : Color
Shorthand for the most common occurrence of green. Equivalent to green500
red : Color
Shorthand for the most common occurrence of red. Equivalent to red600
yellow : Color
Shorthand for the most common occurrence of yellow. Equivalent to yellow500
blue100 : Color
blue200 : Color
blue300 : Color
blue400 : Color
blue500 : Color
blue600 : Color
blue700 : Color
blue800 : Color
gray100 : Color
gray200 : Color
gray300 : Color
gray400 : Color
gray500 : Color
gray600 : Color
gray700 : Color
gray800 : Color
green800 : Color
red100 : Color
red200 : Color
red300 : Color
red400 : Color
red500 : Color
red600 : Color
red700 : Color
green100 : Color
green200 : Color
green300 : Color
green400 : Color
green500 : Color
green600 : Color
green700 : Color
red800 : Color
yellow100 : Color
yellow200 : Color
yellow300 : Color
yellow400 : Color
yellow500 : Color
yellow600 : Color
yellow700 : Color
yellow800 : Color
The design system describes four main entries that here are called Hues.
A hue is one of the five pure colors of the palette.
hueBlue : Hue
hueGray : Hue
hueGreen : Hue
hueRed : Hue
hueYellow : Hue
Each hue can be paired with eight different shades.
The shades are 800, 700, 600, 500, 400, 300, 200 and 100.
shade100 : Shade
shade200 : Shade
shade300 : Shade
shade400 : Shade
shade500 : Shade
shade600 : Shade
shade700 : Shade
shade800 : Shade
Palette.Color
holds data about some desired color.
color : Hue -> Shade -> Color
Given a hue and shade it constructs a color.
Palette.color hueBlue shade600
toBackgroundColor : Color -> Element.Attr decorative msg
Shorthand for setting background colors
Element.row
[ Palette.blue600 |> Palette.toBackgroundColor
]
[]
toFontColor : Color -> Element.Attr decorative msg
Shorthand for setting font colors
Element.row
[ Palette.blue600 |> Palette.toFontColor
, Font.size 16
, Font.justify
]
[]
toBorderColor : Color -> Element.Attr decorative msg
Shorthand for setting border colors
Element.row
[ Palette.blue600 |> Palette.toBorderColor
, Border.width 2
, Border.solid
]
[]
genericBlack : Color
Black as in #000
.
Palette.genericBlack
genericWhite : Color
White as in #FFF
.
Palette.genericWhite
genericSkyBlue : Color
That blue used in our visual identity.
Palette.genericSkyBlue
withAlpha : Basics.Float -> Color -> Color
Applies an alpha value to the color adding transparency.
backgroundColor
|> Palette.withAlpha 0.5
|> Palette.toElementColor
|> Element.Background.color
toElementColor : Color -> Element.Color
Manually transforms a Palette.Color
into an Elm-UI-compatible color.
let
backgroundColor =
Palette.blue700
in
Element.el
[ backgroundColor
|> Palette.toElementColor
|> Element.Font.color
, backgroundColor
|> Palette.toElementColor
|> Element.Background.color
]
<|
Element.text "Hello World!"
toCssColor : Color -> String
Transforms a Palette.Color
into a CSS-compatible parameter.
Palette.blue700
|> Palette.toCssColor
|> Html.Attributes.style "font-color"