Generates HSL color schemes with SCSS/SASS dynamically

scss_custom_prop.scss

/* 
* Erik Codekraft - 2022
*/

/// Output the value for the property
/// @param {number or string} $val - the base value
/// @param {number} $val2 - the value to sum
/// @output the result or the css string calc(val1 + val2)
@function set_value($val, $val2) {
	@if (type-of($val) == string) {
		@return calc(#{$val} + #{$val2});
	} @else {
		@return $val + $val2;
	}
}

/// Output a hsl color variation for a custom property
/// @param {list} $color - the Hue Saturation Luminosity values of the base color
/// @param {number} $hue - corresponds to the hue rotate scss function
/// @param {percentage} $saturation - corresponds to the saturate/desaturate scss function
/// @param {percentage} $luminosity - corresponds to the lighten/darken scss function
/// @param {percentage} $alpha - makes the colour transparent (the colour becomes a hsla)
/// @output a hsl color custom property in hsl or hsla depends on if the alpha argument has been passed
@function gen-custom-prop($color, $hue: false, $saturation: false, $luminosity: false, $alpha: false) {

	@if (type_of($color) == string) {
		@error("Error in _variables.scss: colors needs to be a list like 150, 100%, 50% and not " + $color)
	}

	$h: nth($color, 1);
	$s: nth($color, 2);
	$l: nth($color, 3);

	@if($hue != false) {
		$h: set_value($h, $hue);
	}

	@if($saturation != false) {
		$s: set_value($s, $saturation);
	}

	@if($luminosity != false) {
		$l: set_value($l, $luminosity);
	}

	@if($alpha != false) {
		@return unquote("hsla(#{$h}, #{$s}, #{$l}, #{$alpha})");
	}

	@return unquote("hsl(#{$h}, #{$s}, #{$l})");
}

// THE SCSS WAY
// primary color
$color-primary: var(--color-hue), var(--color-sat), var(--color-luma);
$color-primary-text: var(--color-hue), calc(var(--color-sat) - 18%), calc(var(--color-luma) + 40%);

// secondary color
$color-secondary: var(--color-hue), var(--color-sat--secondary), var(--color-luma);
$color-secondary-text: var(--color-hue), var(--color-sat--secondary), calc(var(--color-luma) - 60%);

// highlight
$color-highlight: var(--color-hue--highlight), var(--color-sat), var(--color-luma);
$color-highlight-text: var(--color-hue--highlight), var(--color-sat), calc(var(--color-luma) + 40%);

// export vars as CSS vars
:root {

	// test
	--color-hue: 174;
	--color-hue--highlight: calc(var(--color-hue) - 150);

	--color-sat: 90%;
	--color-sat--secondary: calc(var(--color-sat) - 40%);

	--color-luma: 29%;
	--color-luma-white: 100%;

	/*
	// THE CSS WAY
	// primary color
	--color-primary: hsl(var(--color-hue), var(--color-sat), var(--color-luma));
	--color-primary-text: hsl(var(--color-hue), calc(var(--color-sat) - 18%), calc(var(--color-luma) + 40%));

	// secondary color
	--color-secondary: hsl(var(--color-hue), var(--color-sat--secondary), var(--color-luma));
	--color-secondary-text: hsl(var(--color-hue), var(--color-sat--secondary), calc(var(--color-luma) - 60%));

	// highlight
	--color-highlight: hsl(var(--color-hue--highlight), var(--color-sat), var(--color-luma));
	--color-highlight-text: hsl(var(--color-hue--highlight), var(--color-sat), calc(var(--color-luma) + 40%));
	*/

	--color-primary: hsl(#{$color-primary});
	--color-primary-text: hsl(#{$color-primary-text});
	--color-secondary: hsl(#{$color-secondary});
	--color-secondary-text: hsl(#{$color-secondary-text});
	--color-highlight: hsl(#{$color-highlight});
	--color-highlight-text: hsl(#{$color-highlight-text});

	--color-content-bg: hsl(0,0%,var(--color-luma-white));
	--color-subtext: hsl(0,0%,calc(var(--color-luma-white) * .46));
	--color-black: hsl(0,0%,calc(var(--color-luma-white) * 0));

	--test-color-0: #{gen-custom-prop( $color-primary )};
	--test-color-1: #{gen-custom-prop( (1,2%,3%) )};
	--test-color-2: #{gen-custom-prop( (1,2%,3%) , 1, 2%, -10%, .5 )};
	--test-color-3: #{gen-custom-prop( ( var(--color-hue), 10%, 50% ) )};
	--test-color-4: #{gen-custom-prop( $color-secondary, -150 )};
	--test-color-5: #{gen-custom-prop( $color-primary, false, -10% )};
	--test-color-6: #{gen-custom-prop( $color-secondary, false, false, 10% )};
	--test-color-7: #{gen-custom-prop( $color-primary, false, false, false, 50% )};
}

#c { background: hsl(var(--color-hue), var(--color-sat), calc(var(--color-luma) - 100%));}
#d { background: #{gen-custom-prop( $color-secondary, false, false, false, 50% )};}
#e { background: #{gen-custom-prop( (var(--color-hue),90%,80%), false, false, false, 50% )};}

Will return this:

:root {
    --color-hue: 174;
    --color-hue--highlight: calc(var(--color-hue) - 150);
    --color-sat: 90%;
    --color-sat--secondary: calc(var(--color-sat) - 40%);
    --color-luma: 29%;
    --color-luma-white: 100%;
    --color-primary: hsl(var(--color-hue), var(--color-sat), var(--color-luma));
    --color-primary-text: hsl(var(--color-hue), calc(var(--color-sat) - 18%), calc(var(--color-luma) + 40%));
    --color-secondary: hsl(var(--color-hue), var(--color-sat--secondary), var(--color-luma));
    --color-secondary-text: hsl(var(--color-hue), var(--color-sat--secondary), calc(var(--color-luma) - 60%));
    --color-highlight: hsl(var(--color-hue--highlight), var(--color-sat), var(--color-luma));
    --color-highlight-text: hsl(var(--color-hue--highlight), var(--color-sat), calc(var(--color-luma) + 40%));
    --color-content-bg: hsl(0,0%,var(--color-luma-white));
    --color-subtext: hsl(0,0%,calc(var(--color-luma-white) * .46));
    --color-black: hsl(0,0%,calc(var(--color-luma-white) * 0));
    --test-color-0: hsl(var(--color-hue), var(--color-sat), var(--color-luma));
    --test-color-1: hsl(1, 2%, 3%);
    --test-color-2: hsla(2, 4%, -7%, 0.5);
    --test-color-3: hsl(var(--color-hue), 10%, 50%);
    --test-color-4: hsl(calc(var(--color-hue) + -150), var(--color-sat--secondary), var(--color-luma));
    --test-color-5: hsl(var(--color-hue), calc(var(--color-sat) + -10%), var(--color-luma));
    --test-color-6: hsl(var(--color-hue), var(--color-sat--secondary), calc(var(--color-luma) + 10%));
    --test-color-7: hsla(var(--color-hue), var(--color-sat), var(--color-luma), 50%);
}

#c {
    background: hsl(var(--color-hue),var(--color-sat),calc(var(--color-luma) - 100%))
}

#d {
    background: hsla(var(--color-hue),var(--color-sat--secondary),var(--color-luma),50%)
}

#e {
    background: hsla(var(--color-hue),90%,80%,50%)
}