Hueso’s default color palettes are based on palx.jxnblk.com. This tool auto-generates up to 13 colors from a single hex value, and then divides each color on 10 different shades (see example for #C7FFC4).

Every single palette lives on a separate .scss file under base/palettes and is @imported on _config.scss for later use on the $colors map.

Of course, you can choose any file hierarchy, any palette generator, etc. You might need to adapt _config.scss values because we follow Palx nomenclature, which ranges every color from 0 to 10 (i.e, $blue0 to $blue10). You can find some similar palette generators on References

The $colors map can store as many sub-maps as needed, but the following are mandatory and will trigger errors if not present:

• base for primary, secondary and separator colors
• text for typography colors
• state for indicating states like: muted, error, warning, success

Current values

References

Eva Design System