Concepts

Colors

This is about how to works with colors in Superkube.

Overview #

Colors are semantic values based on the Palette. The idea is that there is a single palette from which colors are taken for semantic and other meanings. Just as an artist works with colors, by mixing palettes, he gets different colors for different purposes and needs.

The $colors map is in vars/colors.scss. This map defines the base colors for the core modules of Superkube. These colors are generated in CSS variables and are available globally in the framework.

Colors #

These are the color groups generated automatically in the framework:


// =Colors
background
body
border
button
form
heading
inline
input
line
link
placeholder
pre
shadow
table
text

Extend or change #

To extend or change the default values of colors, you need to create your colors.scss file that you want to add or change colors. And then extend $colors map in it. See also How to use to learn more about how to create your project and extend Superkube.


// your project
superkube/
vars/
    colors.scss
vars.scss
main.scss

Next, import colors.scss in your custom framework settings in the vars.scss file.


// vars.scss
@import "vars/colors";

Now you can extend or change colors in the colors.scss file with map-extend function.


// =Colors
$colors: map-extend($colors, (
    background: (
        accent: var(--palette-pink-base)
    ),
    text: (
        muted: var(--palette-black-40)
    )
));

In the example above, we replace the color of the text-muted modifier with a more muted one. We also add a new background accent color, which will automatically create the bg-accent modifier class.