title: What do the color() and l() function in a CSS value mean?
body: <p>Today I encountered some code when digging in the <a href="https://ghost.org/" rel="noreferrer">Ghost</a> code. I'm trying to create the same styling in my React app after extracting data from the API.</p>
  <p>I found this:</p>
  <pre class="lang-css prettyprint-override"><code>: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;
  }
  </code></pre>
  <p>What is the <code>l()</code> 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?</p>
  <p>I found out that <a href="https://github.com/TryGhost/gatsby-starter-ghost/blob/master/src/styles/app.css" rel="noreferrer">gatsby-ghost-starter</a> has it in their code as well.</p>
  <p>But it's not rendering for my app:</p>
  <p><a href="https://i.stack.imgur.com/NdOPQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NdOPQ.png" alt="My app" /></a></p>
  <p>Ghost app:</p>
  <p><a href="https://i.stack.imgur.com/arHzv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/arHzv.png" alt="ghost app" /></a></p>