javascript - 在 Houdini CSS 上创建亮度函数

Question

是否可以使用 Houdini 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>