Colors are one of the hardest parts of CSS for me. I find that I back myself into a corner often with either having too many colors dispersed between many different files, or the system I've designed is too inflexible to handle all of the color options I want.
The importance of simplicity
The best design system is usually the one that is simple. As designers & developers, it tends to be in our nature to make things that are detailed, with lots of possibilities, while we overlook the peace simplicity brings.
Merging CSS variables & SCSS
Creating a map
$colors: (
primary: #F1F2F3,
secondary: blue,
darkmode: (
grey-1: #222,
grey-2: #333,
grey-3: #444
)
);Staging the colors map
html {
@each $name, $color in $colors {
@if type-of($color) == "map" {
@each $subname, $subcolor in $color {
--color-#{$name}-#{$subname}: #{$subcolor};
}
} @else {
--color-#{$name}: #{$color};
}
}
}Utility functions to inject our colors
@function c($color-name) {
@return var(--color-#{$color-name});
}Using the variables throughout our CSS
body {
background: c('primary');
// For nested maps, you will have to call the nested variable, followed by the name
color: c('darkmode-grey-1');
}