Friday, 7 May 2021

Create a brightness function on Houdini CSS

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?



from Create a brightness function on Houdini CSS

No comments:

Post a Comment