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:
The CSS color() function allows the browser to display colors in any color space, such as the P3 color space which can display colors outside of the default sRGB color space.
Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.
The color property in CSS is used to set the color to text, the background of the webpage, and also to set the color of borders. 2. color-name: By directly specify the name of the color like blue, green, yellow, white, black, etc.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With