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.
Social Media
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); }