This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Nri.Ui.Palette.V1

Predefined color palettes for use in configurable components

type alias Palette = { border : Css.Color , background : Css.Color , primary : Css.Color , name : PaletteName }
type PaletteName = Gray | DarkGray | Blue | DarkBlue | Purple | Turquoise | Red | Green | White | Cornflower | Aqua
white : Palette

White palette (borders are blue)

gray : Palette

Gray palette

darkGray : Palette

Dark Gray palette

blue : Palette

Blue palette

darkBlue : Palette

Dark blue palette

purple : Palette

Purple palette

turquoise : Palette

Turquoise palette

green : Palette

Green palette

red : Palette

Red palette

aqua : Palette

Aqua palette

cornflower : Palette

Cornflower palette

module Nri.Ui.Palette.V1 exposing (..)

{-| Predefined color palettes for use in configurable components

@docs Palette, PaletteName
@docs white, gray, darkGray, blue, darkBlue, purple, turquoise, green, red, aqua, cornflower

-}

import Css exposing (..)
import Nri.Colors as Colors


{-| -}
type alias Palette =
    { border : Css.Color
    , background : Css.Color
    , primary : Css.Color
    , name : PaletteName
    }


{-| -}
type PaletteName
    = Gray
    | DarkGray
    | Blue
    | DarkBlue
    | Purple
    | Turquoise
    | Red
    | Green
    | White
    | Cornflower
    | Aqua


{-| Gray palette
-}
gray : Palette
gray =
    { border = Colors.gray75
    , background = Colors.gray96
    , primary = Colors.gray75
    , name = Gray
    }


{-| Aqua palette
-}
aqua : Palette
aqua =
    { border = Colors.aqua
    , background = Colors.aquaLight
    , primary = Colors.aqua
    , name = Aqua
    }


{-| Dark Gray palette
-}
darkGray : Palette
darkGray =
    { border = Colors.gray45
    , background = Colors.gray96
    , primary = Colors.gray45
    , name = DarkGray
    }


{-| Blue palette
-}
blue : Palette
blue =
    { border = Colors.azure
    , background = Colors.frost
    , primary = Colors.azure
    , name = Blue
    }


{-| Dark blue palette
-}
darkBlue : Palette
darkBlue =
    { border = Colors.navy
    , background = Colors.frost
    , primary = Colors.navy
    , name = DarkBlue
    }


{-| Purple palette
-}
purple : Palette
purple =
    { border = Colors.purple
    , background = Colors.purpleLight
    , primary = Colors.purple
    , name = Purple
    }


{-| Turquoise palette
-}
turquoise : Palette
turquoise =
    { border = Colors.turquoise
    , background = Colors.turquoiseLight
    , primary = Colors.turquoise
    , name = Turquoise
    }


{-| Green palette
-}
green : Palette
green =
    { border = Colors.green
    , background = Colors.greenLightest
    , primary = Colors.green
    , name = Green
    }


{-| Red palette
-}
red : Palette
red =
    { border = Colors.red
    , background = Colors.redLight
    , primary = Colors.red
    , name = Red
    }


{-| White palette (borders are blue)
-}
white : Palette
white =
    { border = Colors.navy
    , background = Colors.white
    , primary = Colors.navy
    , name = White
    }


{-| Cornflower palette
-}
cornflower : Palette
cornflower =
    { border = Colors.cornflower
    , background = Colors.cornflowerLight
    , primary = Colors.cornflower
    , name = Cornflower
    }