Color Lightness is like Darken in Sass.

[djmtype]

I can see how you arrived at the name, Lightness. You're essentially removing light from the color by choosing any decimal value below 1.

However, if you had a function which did the opposite, would that naming convention make sense? So, it would be called "darkness"?

You obviously can't use darken or lighten because those are reserved for Sass.

What about lighter and darker – which would be more in line with Sass?

Are there plans to include a color "Darkness" function – that does the opposite? Essentially:

@function darkness($color, $darknessMultiplier){
  $color: str-replace($color, 'var(');
  $color: str-replace($color, ')');
  $color-h: var(#{$color+'-h'});
  $color-s: var(#{$color+'-s'});
  $color-l: var(#{$color+'-l'});
  @return hsl($color-h, $color-s, calc(#{$color-l} / #{$darknessMultiplier}));
}

Regardless, having the ability to use Sass with CSS variables is brilliant! It cuts out the repetition.

[sebastiano-guerriero]

Hi there! Yes, the idea was to use a single function to modify the (HSL) lightness value. An alternative approach would be the one you suggest, with 2 functions (e.g., lighter/darker). We don't plan on releasing new color functions atm. However, if you prefer the lighter/darker approach, I'd suggest creating a _mixins.scss file in the custom-style/ folder to store these functions. If you're used to the SASS nomenclature, it makes total sense to split the lightness function.

More info on how we came up with the color functions here: https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

[djmtype]

Actually, your lightness function is more in line with Sass’ scale-color method, which is ideally more useful as it uses 1/10 increments instead of percentages. It’s easier to gage how much light will be removed from an element.