mind-gym / elements / MG.Colours

Solid colours


type alias Colours =
{ transparent : Element.Color
, white : Element.Color
, gradientGreen : List Element.Color
, bone400 : Element.Color
, bone300 : Element.Color
, bone200 : Element.Color
, bone : Element.Color
, green800 : Element.Color
, green700 : Element.Color
, green600 : Element.Color
, green : Element.Color
, green400 : Element.Color
, green300 : Element.Color
, green200 : Element.Color
, green100 : Element.Color
, teal800 : Element.Color
, teal700 : Element.Color
, teal600 : Element.Color
, teal500 : Element.Color
, teal400 : Element.Color
, teal300 : Element.Color
, teal200 : Element.Color
, teal100 : Element.Color
, blue800 : Element.Color
, blue700 : Element.Color
, blue600 : Element.Color
, blue500 : Element.Color
, blue400 : Element.Color
, blue300 : Element.Color
, blue200 : Element.Color
, blue100 : Element.Color
, purple800 : Element.Color
, purple700 : Element.Color
, purple600 : Element.Color
, purple500 : Element.Color
, purple400 : Element.Color
, purple300 : Element.Color
, purple200 : Element.Color
, purple100 : Element.Color
, red800 : Element.Color
, red700 : Element.Color
, red600 : Element.Color
, red500 : Element.Color
, red400 : Element.Color
, red300 : Element.Color
, red200 : Element.Color
, red100 : Element.Color
, peach100 : Element.Color
, yellow800 : Element.Color
, yellow700 : Element.Color
, yellow600 : Element.Color
, yellow500 : Element.Color
, yellow400 : Element.Color
, yellow300 : Element.Color
, yellow200 : Element.Color
, yellow100 : Element.Color
, black : Element.Color
, black700 : Element.Color
, black600 : Element.Color
, black500 : Element.Color
, black400 : Element.Color
, black300 : Element.Color
, black200 : Element.Color
, black100 : Element.Color
, greyscale300 : Element.Color 
}

All of the available colours

colours : Colours

Colours used throughout MindGym's styleguide.

Gradients


type alias Gradient =
{ id : String
, startColour : Element.Color
, endColour : Element.Color
, direction : Basics.Float 
}



Define your gradient.
ID must be globally unique in your HTML.
Direction is degrees clockwise from 12 o'clock.

gradients : { rectangle436 : GradientAttributes, rectangle437 : GradientAttributes, rectangle438 : GradientAttributes, green400green500 : GradientAttributes }

A record containing the different gradients available

backgroundGradient : Gradient -> Element.Attr decorative msg

Sets the background gradient of an element.

Using external colours

externalColourDefinitions : Html msg

This exists to get around the fact that we can't use CSS gradients