color.scss

$hues: (
    "red": 0,
    "pink": 336,
    "purple": 270,
    "indigo": 230,
    "blue": 216,
    "light-blue": 200,
    "cyan": 180,
    "teal": 160,
    "green": 130,
    "light-green": 100,
    "kiwi": 50,
    "yellow": 30,
    "orange": 20
);

$sat_lit: (
    // kv; saturation, lightness in hsl()
    // primary colors
    "p50": 40% 90%,
    "p100": 40% 80%,
    "p200": 40% 65%,
    "p300": 40% 50%,
    "p400": 60% 40%,
    "p500": 100% 30%,
    "p600": 100% 25%,
    "p700": 100% 20%,
    "p800": 100% 15%,
    "p900": 100% 10%,

    // alternative
    "a100": 100% 75%,
    "a200": 100% 65%,
    "a400": 100% 55%,
    "a700": 100% 45%,

    // surface
    "s1": 9% 15%,
    "s2": 10% 17%,
    "s3": 11% 20%,
    "s4": 12% 20%,
    "s5": 11% 22%
);

:root {
    @each $hue, $deg in $hues {
        --hue-#{$hue}: $deg;
        @each $sat_lit, $sat_lit_val in $sat_lit {
            --color-#{$hue}-#{$sat_lit}: hsl(#{$deg} #{$sat_lit_val});
        }
    }

    @each $sat_lit, $sat_lit_val in $sat_lit {
        --sat-lit-#{$sat_lit}: $sat_lit_val;
        --color-#{$sat_lit}: hsl(var(--base-hue) #{$sat_lit_val});
    }

}