Colors

Overview #

Colors are global framework colors that are automatically generated as classes for some modules or available in CSS/SCSS as css variables.

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-yellow-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.

Also, the framework will create a new global variable --background-accent for the new color and the --text-muted variable will have the updated color.

You can use them in your CSS/SCSS:

.my-module {
    background-color: var(--background-accent);
}
.my-another-module {
    color: var(--text-muted);
}