Concepts

Palette

This is about how to works with palettes in Superkube.

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
black-5
black-7
black-10
black-15
black-20
black-25
black-30
black-40
black-50
black-60
black-70
black-80
black-90
black-95
white-5
white-7
white-10
white-15
white-20
white-25
white-30
white-40
white-50
white-60
white-70
white-80
white-90
white-95
neutral
darker
neutral
dark
neutral
base
neutral
mid
neutral
light
neutral
lighter
neutral
lightest
primary
darker
primary
dark
primary
base
primary
light
primary
lighter
primary
lightest
positive
darker
positive
dark
positive
base
positive
light
positive
lighter
positive
lightest
negative
darker
negative
dark
negative
base
negative
light
negative
lighter
negative
lightest
active
darker
active
dark
active
base
active
light
active
lighter
active
lightest
red
darker
red
dark
red
base
red
light
red
lighter
red
lightest
orange
darker
orange
dark
orange
base
orange
light
orange
lighter
orange
lightest
yellow
darker
yellow
dark
yellow
base
yellow
light
yellow
lighter
yellow
lightest
green
darker
green
dark
green
base
green
light
green
lighter
green
lightest
blue
darker
blue
dark
blue
base
blue
light
blue
lighter
blue
lightest
indigdarker
indigdark
indigbase
indiglight
indiglighter
indiglightest
violet
darker
violet
dark
violet
base
violet
light
violet
lighter
violet
lightest
  • 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.
  • 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);
}