PaackEng / paack-ui / UI.Palette

UI.Palette is an interface offering all colors variations proposed in the design system.

Palette.blue600
    |> Palette.toElementColor

Which color

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

Which hue


type Hue

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

Which shade


type Shade

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

Building


type Color

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
    ]
    []

Generic colors

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

Making it transparent

withAlpha : Basics.Float -> Color -> Color

Applies an alpha value to the color adding transparency.

backgroundColor
    |> Palette.withAlpha 0.5
    |> Palette.toElementColor
    |> Element.Background.color

Obtaining a usable variation

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"