How to combine LESS color functions and CSS Variables?

Question

In my project I have a CSS custom variables like this:

:root {
  --primary-color: #e04c4c;
  --secondary-color: #2c2c5e;
  --text-color: #d67900; 
}

In my LESS files I have used LESS color functions to get more colors base on its primary and secondary. This is how its look like:

.component1 {
  background: darken(--primary-color, 10%);
}

.component2 {
  background: lighten(--secondary-color, 5%);
}

But when I compile this, it gives an error like this?

// Undefined_methodError: error evaluating function darken: // Object # has no method 'toHSL'

When googling I found a solution for SASS, but not for LESS.

Can anybody tell me is there any possible workaround for this particular case?

Thank you.