CSS 值中的 color() 和 l() 函数是什么意思？

Question

今天在挖Ghost代码的时候遇到了一些代码。从 API 中提取数据后，我试图在我的 React 应用程序中创建相同的样式。

我找到了这个：

:root {
    /* Colours */
    --blue: #3eb0ef;
    --green: #a4d037;
    --purple: #ad26b4;
    --yellow: #fecd35;
    --red: #f05230;
    --darkgrey: #15171A;
    --midgrey: #738a94;
    --lightgrey: #141e24;
    --whitegrey: #e5eff5;
    --pink: #fa3a57;
    --brown: #a3821a;
    --darkmode: color(var(--darkgrey) l(+2%));
}

.post-full-content pre {
    overflow-x: auto;
    margin: 1.5em 0 3em;
    padding: 20px;
    max-width: 100%;
    border: color(var(--darkgrey) l(-10%)) 1px solid;
    color: var(--whitegrey);
    font-size: 1.4rem;
    line-height: 1.5em;
    background: color(var(--darkgrey) l(-3%));
    border-radius: 5px;
}

l()CSS中的函数是什么？我在任何地方都找不到。WebStorm 无法识别它，VSCode 也无法识别。它也不适用于我的 CRA 应用程序。我也不认为 Ghost 之后会使用任何 CSS 处理器。那是什么？

我发现gatsby-ghost-starter在他们的代码中也有它。

但它没有为我的应用程序渲染：

幽灵应用：

Answer 1

它是 HSL/HWB Adjuster 的一部分，用于调整亮度 - 其他是饱和度、白度和黑度。(快捷键s, w, b)

[saturation( | s(] ['+' | '-' | *]? <percentage> )
[lightness( | l(] ['+' | '-' | *]? <percentage> )
[whiteness( | w(] ['+' | '-' | *]? <percentage> )
[blackness( | b(] ['+' | '-' | *]? <percentage> )

所以，声明

color(var(--darkgrey) l(+2%));

表示将“darkray”的亮度调整 +2%

以下是有关使用color()函数修改颜色的一些详细信息

编辑：

截至 2020 年 7 月，此功能只是一个草案。另一个答案包含该行的许多详细信息。