leolabs / docsy Goto Github PK

For better support of a theming engine, it could be beneficial to switch from HEX to HSL. We could transform the HEX to HSL and save the single values (e.g saturation) as SCSS variables and compose them to a primary color variable.

Example Implementation:

$primary-color-h: 230;
$primary-color-s: 100%;
$primary-color-l: 54%;

$primary-color: hsl($primary-color-h, $primary-color-s, $primary-color-l);

Example Usage:

This could be used to create a very light colored background:

background-color: hsl($primary-color-h, $primary-color-s, 95);

or a slightly colored box shadow using HSLA:

box-shadow: 0px 5px 15px -2px hsla($primary-color-h, 20, $primary-color-l, 0.2);

This could help to create a more consistent styling and better theming. It is also recommended in the Refactoring UI book.