4

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?

Fabio Nolasco
  • 7,122
  • 6
  • 35
  • 32
  • Something on these terms: https://github.com/w3c/css-houdini-drafts/issues/857 – Fabio Nolasco May 03 '21 at 11:15
  • you are looking for this: https://drafts.css-houdini.org/css-paint-api/ – Temani Afif May 03 '21 at 11:35
  • Sure. Thank you Temani =) But before I spend a few days reading through W3C documentation, I would like to know if it is possible. It seems so. But in that case, I wonder why nobody has done that yet. – Fabio Nolasco May 03 '21 at 19:43
  • the support of houdni is still low so you won't find a lot around this soon. you don't need to spend days reading. Few minutes should be enough to understand the purpose of the paint API but maybe you will need more time if you want to have a working code (and you will probably be the first to implement a brightness function ;) ) – Temani Afif May 03 '21 at 19:52
  • you can follow the state here: https://ishoudinireadyyet.com/ .. Firefox still has no support to any API – Temani Afif May 03 '21 at 19:54
  • There is a working and efficient polifill already published that fixed Firefox lack of support... https://www.youtube.com/watch?v=5eBar5TI71M – Fabio Nolasco May 03 '21 at 21:14

1 Answers1

2

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>
vals
  • 61,425
  • 11
  • 89
  • 138
  • also related: https://stackoverflow.com/q/55329996/8620333 but this won't work with any color format – Temani Afif May 10 '21 at 10:43
  • Hi vals and Temani, thank you for your answer! I had gone over those approaches before already... and experimented thoroughly with them a while back. Unfortunately the don't align with some of the requirements the project has. I might be able to adopt them some day, but for now I really want to investigate the Houdini option... even more so that now there is a polifill that I can test. – Fabio Nolasco May 10 '21 at 13:16
  • @TemaniAfif Sorry, seems that I almost copied your answer! – vals May 10 '21 at 17:36
  • you simply got the same idea ;) – Temani Afif May 11 '21 at 14:39