What does the l() function in a CSS value mean?

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.