在Houdini CSS上创建一个亮度函数

Question

是否可以创建一个；亮度"；函数使用胡迪尼API？

例如：

假设您创建了一个CMS，人们可以在其中自定义10种颜色。然而，页面中的一些细节的颜色应该是原始10的变体，有时更暗，有时更亮。

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

如果是这样的话，你个人对创建小作品的看法如何？

Answer 1

使用Houdini是核心请求，还是只想解决问题？

如果你想稍后，你可以通过BoltClock在这里发布这个想法

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

并将其扩展为使用hsl，这将为您提供亮度调整，而不是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>