0
577
ViewsWhat 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:
Ghost app:
2 answers
Answer question0
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.
0
Personally I feel the other answer lacking in practical details, so here they are. Before you can consider using any of this, you need to know that these are not currently widely available functions. In fact, as of now it seems they are only supported by Safari:
https://caniuse.com#feat=css-color-function
and notably are not currently supported with Firefox or Chrome:
- https://bugzilla.mozilla.org/show_bug.cgi?id=1128204
- https://bugs.chromium.org/p/chromium/issues/detail?id=1068610
They are documented with Working Draft CSS Color Module Level 4:
https://w3.org/TR/2019/WD-css-color-4-20191105
However as can be seen below, the current (and only) recommended version is CSS Color Module Level 3, so anything other than this should only be used in a test like environment: