mind-gym/elements/2.1.0

NOTE: the latest version is 5.4.2

MG.Colours

Solid colours

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

All of the available colours

colours : Colours

Colours used throughout MindGym's styleguide.

Gradients

type alias Gradient =
{ id : String
, startColour : Color
, endColour : Color
, direction : Float
}
Define your gradient.
ID must be globally unique in your HTML.
Direction is degrees clockwise from 12 o'clock.
{ rectangle436 : GradientAttributes
, rectangle437 : GradientAttributes
, rectangle438 : GradientAttributes
, green400green500 : GradientAttributes
}

A record containing the different gradients available

backgroundGradient : Gradient -> Attr decorative msg
Sets the background gradient of an element.

Using external colours

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