lucamug / style-framework / Framework.Color

Demo

Cards

Colors are inspired by the Bulma framework: https://bulma.io/documentation/overview/variables/

Colors

orange : Element.Color

yellow : Element.Color

green : Element.Color

turquoise : Element.Color

cyan : Element.Color

blue : Element.Color

purple : Element.Color

red : Element.Color

Grey Scale

Demo

black : Element.Color

black_bis : Element.Color

black_ter : Element.Color

grey_darker : Element.Color

grey_dark : Element.Color

grey : Element.Color

grey_light : Element.Color

grey_lighter : Element.Color

white_ter : Element.Color

white_bis : Element.Color

white : Element.Color

Derived

Demo

primary : Element.Color

info : Element.Color

success : Element.Color

warning : Element.Color

danger : Element.Color

light : Element.Color

dark : Element.Color

Fonts

Demo

text : Element.Color

text_light : Element.Color

text_strong : Element.Color

code : Element.Color

code_background : Element.Color

pre : Element.Color

pre_background : Element.Color

Links

Demo

link : Element.Color

link_active : Element.Color

link_active_border : Element.Color

link_focus : Element.Color

link_focus_border : Element.Color

link_hover : Element.Color

link_hover_border : Element.Color

link_invert : Element.Color

link_visited : Element.Color

Others

Demo

background : Element.Color

border : Element.Color

border_hover : Element.Color

muted : Element.Color

transparent : Element.Color

disabledButtonBackground : Element.Color

disabledButtonFont : Element.Color

Introspection

Used internally to generate the Style Guide

introspection : { name : String, description : String, signature : String, variations : List ( String, List ( Element msg1, String ) ) }