Windy CSS styleguide

2.5 #colors.4 .fg-color classes

Toggle example guides Toggle HTML markup

Foreground color classes, basically shorthand for color: @xyz. Names are usually inherited from LESS variables naming convention (but not always).

Examples
Default styling
Hello world
Hello world
.fg-red
Primary Windy red color
Hello world
Hello world
.fg-red-light
Lighten version of our primary red used as fg color
Hello world
Hello world
.fg-yellow
Color class
Hello world
Hello world
.fg-error
Errors
Hello world
Hello world
.fg-ok
ok messages
Hello world
Hello world
.fg-gray
gray text
Hello world
Hello world
.fg-gray-dark
dark gray text
Hello world
Hello world
.fg-gray-light
lGray text
Hello world
Hello world
.fg-black
Black text
Hello world
Hello world
.fg-white
Pure white
Hello world
Hello world
.fg-orange-light
Light version of orange, used for icons, borders in dark content
Hello world
Hello world
Markup 
<div class="centered">
            <div class="rounded-box bg-white [modifier class]">Hello world</div>
            <div class="rounded-box bg-gray-dark [modifier class]">Hello world</div>
        </div>
Source: src/css/colors/color-classes.less, line 1