Last active
January 13, 2023 15:59
-
-
Save trezy/d1a4dd6294eee9b41597bc266f680359 to your computer and use it in GitHub Desktop.
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
:root { | |
--hue-shift: 0deg; | |
@include generateHSLCustomPropertiesFromColor('palette-black', #060606); | |
@include generateHSLCustomPropertiesFromColor('palette-green', #00bc8c); | |
@include generateHSLCustomPropertiesFromColor('palette-dark-grey', #313131); | |
@include generateHSLCustomPropertiesFromColor('palette-grey', #444444); | |
@include generateHSLCustomPropertiesFromColor('palette-red', #f00); | |
@include generateHSLCustomPropertiesFromColor('palette-white', #fff); | |
} | |
.usingAColor { | |
color: var(--palette-red); | |
} | |
.usingAColorWithTransparency { | |
color: hsla(var(--palette-black-hsl), 0.5); | |
} | |
.usingAColorWithAdjustments { | |
color: hsl(var(--palette-black-h), var(--palette-black-s), calc(var(--palette-black-l) - 10%)); | |
} | |
.adjustingAllHuesForChaos { | |
--hue-shift: 180deg; | |
} |
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
@mixin generateHSLCustomProperties($name, $h, $s, $l) { | |
// $safeName is necessary because $name could theoretically be a color literal, and Sass doesn't | |
// like that. | |
$safeName: '' + $name; | |
--#{$safeName}-h: calc(#{$h} + var(--hue-shift)); | |
--#{$safeName}-s: #{$s}; | |
--#{$safeName}-l: #{$l}; | |
--#{$safeName}-hsl: var(--#{$safeName}-h), var(--#{$safeName}-s), var(--#{$safeName}-l); | |
--#{$safeName}: hsl(var(--#{$safeName}-hsl)); | |
} | |
// Example input | |
// @include generateHSLCustomPropertiesFromColor('palette-blue', #0092c7); | |
// Example output | |
// --palette-blue-h: calc(195.9798994975deg + var(--hue-shift)); | |
// --palette-blue-s: 100%; | |
// --palette-blue-l: 39.0196078431%; | |
// --palette-blue-hsl: var(--palette-blue-h),var(--palette-blue-s),var(--palette-blue-l) | |
// --palette-blue: hsl(var(--palette-blue-hsl)); |
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
@mixin generateHSLCustomPropertiesFromColor($name, $color) { | |
@include generateHSLCustomProperties( | |
$name, | |
hue($color), | |
saturation($color), | |
lightness($color), | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment