This is about how to works with colors in Superkube.
Colors are semantic values based on the Palette. The idea is that there is a single palette from which colors are taken for semantic and other meanings. Just as an artist works with colors, by mixing palettes, he gets different colors for different purposes and needs.
$colors map is in
This map defines the base colors for the core modules of Superkube.
These colors are generated in CSS variables and are available globally in the framework.
These are the color groups generated automatically in the framework:
// =Colors background body border button form heading inline input line link placeholder pre shadow table text
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
colors.scss in your custom framework settings in the
// vars.scss @import "vars/colors";
Now you can extend or change colors in the
colors.scss file with
// =Colors $colors: map-extend($colors, ( background: ( accent: var(--palette-pink-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.