Palette

Overview #

Palette is base colors of the framework and their shades and tints. It's similar to how an artist works with color. You make up a palette and take from it the colors you want, mix them or make transparency to get different semantic colors, such as the color of text, buttons, etc.

Palette #

The $palette map is in vars/palette.scss. The framework automatically generates colors based on this map as CSS variables and they are available everywhere in the framework. For example, you can specify them as colors in the modules you make.

.my-module {
    // vars
    --my-module-color: var(--palette-black);
    --my-module-background-color: var(--palette-neutral-lightest);

    // props
    color: var(--my-module-color);
    background-color: var(--my-module-background-color);
}

By default, the palette in Superkube has the following colors:

• black, white, neutral — are used for text color, borders, backgrounds, and other needs.
• black-{n}, white-{n}, active-{n}, negative-{n}, positive-{n} — palettes with opacity.
• primary — for accents, backgrounds, links, which are of primary importance.
• positive — for positive states (e.g. success).
• negative — for negative states (e.g. error).
• active — for focus and active states.
• all other colors — for decorative purposes.

Extend or change #

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

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

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

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

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

// =Palette
$palette: map-extend($palette, (
    negative: (
        lightest: #FEF1F4
    ),
    accent: (
        base: #F05D24
    )
));

In the example above, we change the the negative-lightest color of palette to a different color. And also add a new color accent-base, which can now be used in the framework as a CSS variable.

.my-module {
    // vars
    --my-module-color: var(--palette-accent-base);

    // props
    color: var(--my-module-color);
}