Colours

The default colours defined in Karma CSS are as follows.

Colour Palette

Base

Base set of colours that are required within the framework. Karma CSS by default depends on these colours being defined.

Cool

An alternative cool colour palette.

Warm

An alternative warm colour palette.

Greyscale

Base set of greyscale colours.

Base set of popular social media colours.

For each defined color there are two classes created .b-{color} to set the background and the class .c-{color} to set the colour (text).

Adding Your Own Colours

You can define additional colours in your variables. Simply add the following $colors variable:

// any colours defined here will create helpers for background and text colour
// additionally you can redefine the colours in karma by adding them here too
// so adding `primary` will overwrite the primary colour.
$colors: (
    "somecolor":        rgb(0,0,0),
    "othercolor":       rgb(240,230,220)
);

Helpers

There is a handy function you can use in your css to get a colour by its name:

.mydiv { border-color: color("primary"); }

As well as others to either lighten, darken or apply opacity

// return a colour by its name and darken it by 10%
.mydiv { background-color: color-darken("primary", 10%); }

// return a colour by its name and lighten it by 10%
.mydiv { background-color: color-lighten("primary", 10%); }

// return a colour by its name and apply an alpha of .8
.mydiv { background-color: color-a("primary", .8); }