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, they gets different colors for different purposes and needs.
Extend or change #
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.