Getting Started

Colors

Palette #

Superkube has two maps for color management. The first one is $palette. This map contains a palette of colors that can be used in various UI elements.

This is how it can look like.

$palette: (
    black: {color},
    white: {color},
    neutral: (
        darker: {color},
        dark: {color},
        base: {color},
        light: {color},
        lighter: {color}
    ),
    active: ( ... ),
    positive: ( ... ),
    negative: ( ... )
);

The colors black, white and sets of shades neutral, active, positive, negative are required to build the resulting css. Of course, you can change them for the colors and tones that are used in your project.

All other colors you can add according to your needs. For example, you can add brand and warning colors.

$palette: (
    ...
    brand: {color},
    warning: (
        darker: {color},
        dark: {color},
        base: {color},
        light: {color},
        lighter: {color}
    )
);

Colors #

The colors of the palette are used in the $colors map which describes the specific use of color for an element appearance. Colors from the palette can be mixed, can have different transparency, can have certain semantic meaning.

This is how it can look:

$colors: (
    text: (
        dark: palette(black),
        default: palette(neutral, darker),
        moderated: rgba(palette(neutral, darker), .7),
        muted: rgba(palette(neutral, darker), .5),
        success: palette(positive, dark),
        error: palette(negative, dark),
        light: palette(white)
    ),
    heading: (
        default: palette(black),
        muted: rgba(palette(black), .5),
        light: palette(white)
    ),
    background: (
        primary: palette(neutral, lighter)
    )
);

Colors from the $colors map are generated in css variables:

--color-text-dark
--color-text-default
--color-text-success
--color-heading-default

You can use these variables in SCSS by calling them using the color function. See description of the color function.

For example:

.item {
    background-color: color(background, primary);
}

Dark mode #

Because Superkube generates css varariables for color, it allows you to automatically change the light and dark color scheme. Or change it using Javascript with just one class for the html tag, without reloading the page.

For Dark mode, you need to create a corresponding $palette-dark palette, which will have alternative colors to the $palette:

$palette-dark: (
    ...
    white: {color}
    ...
);

And use colors from $palette-dark to $colors-dark. For example, here is how to set the color of the text:

$colors-dark: (
    ...
    text: (
        default: rgba(palette-dark(white), .8)
    )
    ...
);

If the variable $dark-class is null in vars.scss. Then the color scheme will be shown depending on the settings of the operating system.

If you specify a class in the variable $dark-class, for example, this way:

$dark-class: 'dark-ui';

Then using Javascript you can set for html tag this class and colors will be changed to dark theme.

<html class="dark-ui">...</html>