Colors

Overview #

In Superkube, working with color is based on two things:

• $palette — a palette of colors and their shades.
• $colors — semantic colors based on the $palette.

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.

All in all, this creates a systematic approach. You only change the color in the palette, and the semantic colors are automatically swapped out of the palette for all modules or elements for which they are specified.

Palette #

The $palette map is in vars/palette.scss.

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

• black, white, neutral — are used for text color, borders, backgrounds, and other needs.
• black-o, white-o — black and white 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.

You can get a color from the $palette using the palette function. The color from the palette can only be used when specified in $colors. This is how semantic colors are formed from the palette. In the SCSS settings it looks like this:

// =Colors
$colors: (
    text: (
        success: palette(positive, dark)
    )
);

Colors #

The $colors map is in colors.scss where the colors of each module are imported.

All colors in the framework are generated from the palette. For example, this is how the colors in $colors look like for the Border module.

// =Colors
$colors: (
    border: (
        dark-7: palette(black-o, 7),
        dark-10: palette(black-o, 10),
        light-25: palette(white-o, 25),
        primary: palette(primary, base)
    )
);

Different elements, modules, modifiers can have the same color from the palette.

// =Colors
$colors: (
    background: (
        primary: palette(primary, base)
    )
    border: (
        primary: palette(primary, base)
    ),
    text: (
        primary: palette(primary, base)
    )
);

If an element or module has different states, this can be specified in $colors.

// =Colors
$colors: (
    link: (
        default: (
            base: palette(active, dark),
            hover: palette(negative, dark)
        ),
        dark: (
            base: palette(black),
            hover: palette(black-o, 60)
        )
    )
);

Here's what states can be:

• base
• hover
• focus
• hoverfocus
• before
• after
• first-child
• last-child
• active
• disabled

When building the framework, colors are specified as css variables. This, in particular, allows you to do dark mode on the fly.

color: var(--semantic-name-of-color);

Extend palette #

To extend the default values of palette, you need to create your palette.scss file. And then extend $palette maps in it.

// 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 the palette with map-extend function. For example, by adding yellow and its shades.

// =Palette
$palette: map-extend($palette, (
    yellow: (
        darker: #A7820D,
        dark: #D9A205,
        base: #FFBB00,
        lighter: #FFF6E0
    )
));

Extend colors #

To extend the default values of colors, you need to create your colors.scss file and separate files for the modules that you want to add or change colors. And then extend $colors map in them.

// your project
superkube/
colors/
    heading.scss
    my-module.scss
colors.scss
main.scss

Next, import all modules color files in the colors.scss.

// colors.scss
@import "colors/heading";
@import "colors/my-module";

Then you can extend $colors and create colors from the palette for your new module or for an existing one.

// colors/heading.scss
$colors: map-extend($colors, (
    heading: (
        acccent: palette(yellow, dark)
    )
));

// colors/my-module.scss
$colors: map-extend($colors, (
    my-module: (
        default: (
            background-color: palette(yellow, lighter)
        ),
        dark: (
            background-color: palette(yellow, dark)
        )
    )
));

In the example above, first, we extended the $colors for the existing Heading module. Superkube will automatically generate a new modifier for it.

<h1 class="heading-accent">...</h1>

Second, we added colors for our custom module and we can use them in the SCSS module with the color function.

.my-module {
    background-color: color(my-module, default, background-color);
}
.my-module-dark {
    background-color: color(my-module, dark, background-color);
}

Or by generating colors automatically.

.my-module {
    @include generate-variants('.my-module', my-module);
}

See also how to extend modules.

Change #

Changing the default values works on the same principle. You extend $palette or $colors by specifying a new value and it changes when Superkube is built.

// =Palette
$palette: map-extend($palette, (
    black: #000,
    neutral: (
        darker: #222,
        dark: #444,
        base: #888,
        mid: #D3D3D3,
        light: #E8E8E8,
        lighter: #F1F1F1,
        lightest: #F6F6F6
    )
));