Search code examples
csshsl

What do the color() and l() function in a CSS value mean?

Today I encountered some code when digging in the Ghost code. I'm trying to create the same styling in my React app after extracting data from the API.

I found this:

: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;
}

What is the l() function in the CSS? I can't find it anywhere. WebStorm doesn't recognise it, nor VSCode. It also doesn't work in my CRA app. I don't think Ghost is using any CSS processor afterwards either. So what is it?

I found out that gatsby-ghost-starter has it in their code as well.

But it's not rendering for my app:

My app

Ghost app:

ghost app

Solution

  • It is a part of HSL/HWB Adjuster and is for adjusting the lightness - the others being saturation, whiteness and blackness. (shortcuts s, w, b)

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

    So, the statement

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

    means adjust lightness of the "darkgray" by +2%

    Here are some details on modifying colors with color() function

    Edit:

    As of July, 2020, this feature is just a draft. The other answer contains a lot of details on that line.