Last active
January 28, 2022 11:55
-
-
Save erikyo/817ac8ecfd3a4a049d5a34603b0dde43 to your computer and use it in GitHub Desktop.
Generates HSL color schemes with SCSS/SASS dynamically
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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% )};} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Will return this: