How to combine LESS color functions and CSS Variables

[thara]

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?
 

Quote

// Undefined_methodError: error evaluating function `darken`:
// Object #<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.