Migration from less to CSS: How to do the same as lighten and darken function in CSS3?

Question

I'm making a migration from LESS to CSS3 of an internal React component library.

I have, for example, the following and I can't find a way to do the same in CSS. I found no way to replace the lighten function.

I thought about logging the lightened color and to store it in a variable, but it seems to me that it is not clean!

box-shadow: 0 0 var(--button-small-shadow-width) lighten(var(--colors-primary-blue), var(--button-lighten-percentage));

Thanks for your help.

Pure CSS does not support these options. – Paulie_D Aug 10 '22 at 12:07 — Paulie_D, Aug 10 '22 at 12:07

score 1 · Answer 1 · answered Aug 10 '22 at 12:10

CSS does not have a lighten equivalent.

You would need to lighten the colour manually by the amount you want it reduced.

e.g

LESS

.myclass {
   background-color: lighten(hsl(80, 90%, 20%), 10%);
}

CSS

.myclass {
  background-color: hsl(80, 90%, 30%);
}

1 Answers1