SCSS issues with HSL and CSS variables

Question

Can't finish my function which can make some lighten version of a color from css variable. Any ideas?

:root {
  --color-black: rgba(0, 0, 0, 1);
}

@function color-lighten($color-name, $opacity){
  @return hsl(from var(--color-#{$color-name}) h calc(s + 10%) l / $opacity);
}

body {
  color: color-lighten(black, 1);
}

Goal:

body {
 color: hsl(from var(--color-black) h calc(s + 10%) l / 1);
}

Issue:

SassError: Only 3 elements allowed, but 5 were passed.