Colors

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, they gets different colors for different purposes and needs.

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.