Create a brightness function on Houdini CSS

Question

Would it be possible to create a "brightness" function using the Houdini API?

For example:

Suppose that you created a CMS in which people can customize 10 colors. Some of the details in the page, however, should have a color that is a variant of those original 10, sometimes darker, sometimes brighter.

:root {
   --color-primary: #5a9e6f;
}

.box {
   color: var(--color-primary);
   border-color: brightness(var(--color-primary), -15%);
   background-color: brightness(var(--color-primary), -40%);
}

If so, how would it be your personal take on creating that worklet?

Answer 1

Is using Houdini a core request, or you just want the problem to be solved?

If you want the later, you can get the idea posted here by BoltClock

https://stackoverflow.com/a/41265350/1926369

and extend it to use hsl, that will give you brightness adjustment instead of alpha:

:root {
  --color: 20, 40%;
  --brightness: 50%;
}

div {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: hsl(var(--color), var(--brightness));
}


.base {
/* nothing here, default value */
}

.dark {
  --brightness: 30%;
}

.light {
  --brightness: 70%;
}

<div class="base">BASE</div>
<div class="dark">DARK</div>
<div class="light">LIGHT</div>