Cannot make oklch color lighter

[Jagget]

To reproduce:

Go to Playground: https://lesscss.org/less-preview/#eyJjb2RlIjoiI2xpYigpIHtcbiAgICAuY29sb3JzKCkge1xuICAgICAgQHByaW1hcnk6IGJsdWU7XG4gICAgICBAc2Vjb25kYXJ5OiBncmVlbjtcbiAgICB9XG4gICAgLnJ1bGVzKEBzaXplKSB7XG4gICAgICBib3JkZXI6IEBzaXplIHNvbGlkIHdoaXRlO1xuICAgIH1cbiAgfVxuICBcbiAgLmJveCB3aGVuICgjbGliLmNvbG9yc1tAcHJpbWFyeV0gPSBibHVlKSB7XG4gICAgd2lkdGg6IDEwMHB4O1xuICAgIGJhY2tncm91bmQ6IG9rbGNoKGZyb20gIzAwMDBGRiBjYWxjKGwgLSAwLjEpIGMgaCk7XG4gICAgaGVpZ2h0OiAoJHdpZHRoIC8gMik7XG4gIH1cbiAgXG4gIC5iYXI6ZXh0ZW5kKC5ib3gpIHtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNjAwcHgpIHtcbiAgICAgIHdpZHRoOiAyMDBweDtcbiAgICAgICNsaWIucnVsZXMoMXB4KTtcbiAgICB9XG4gIH0iLCJhY3RpdmVWZXJzaW9uIjoiNC4zLjAiLCJtYXRoIjoicGFyZW5zLWRpdmlzaW9uIiwic3RyaWN0VW5pdHMiOmZhbHNlfQ==

Change

// Take blue and make it a bit darker
background: oklch(from #0000FF calc(l - 0.1) c h); 

to

// Take blue and make it a bit lighter
background: oklch(from #0000FF calc(l + 0.1) c h);

Current behavior:

Error: Could not parse call arguments or missing ')'

Expected behavior:

Parse color manipulations properly

Environment information:

• less version: 4.3.0

[dosubot[bot]]

Hello @Jagget! I'm Dosu, your friendly bot here to help you solve bugs, answer questions, and assist you on your journey to becoming a contributor. I'm here while you wait for a human maintainer. How can I assist you today?

The error you're encountering with the oklch function in Less version 4.3.0 seems to be related to the parsing of the function's arguments. Unfortunately, I couldn't find specific documentation or examples for the oklch function in the Less codebase, which might help clarify the correct syntax or usage .

However, based on typical usage patterns for color manipulation functions in Less, you might want to ensure that the syntax for the oklch function is correct and that the arguments are being passed in a format that Less can interpret. If the function is not parsing correctly, it could be due to an issue with how the calc function is being used within the oklch function.

You might try simplifying the expression or checking if there are any updates or patches related to the oklch function in the Less repository that address this issue. Additionally, verifying the syntax against any available documentation or examples could be helpful.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[puckowski]

Thank you for reporting the issue. I'll take a look this weekend, see if I can come up with a PR.

[Jagget]

It also doesn't parse multiplication:

    background-color: oklch(from #0000FF calc(l * 0.5) c h);

[puckowski]

PR https://github.com/less/less.js/pull/4344 should resolve this issue. Awaiting peer review before it is merged.

[puckowski]

Hello, this issue should be resolved in Less 4.4.0 available on npm now at https://www.npmjs.com/package/less/v/4.4.0

This Less in part:

background: oklch(from #0000FF calc(l + 0.1) c h);

becomes:

<style type="text/css">.box,
.bar {
  width: 100px;
  background: oklch(from #0000FF calc(l + 0.1) c h);
  height: 50px;
}
@media (min-width: 600px) {
  .bar {
    width: 200px;
    border: 1px solid white;
  }
}
</style>