Generated by SassMeister.com.

input.scss

@function css-darken($h, $s, $l, $darken-by) {
    @return $h, $s, calc(#{l} - #{$darken-by + 0%})
};

$color-primary: #007d7e;
$color-primary-tuple: var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness);
:root {
    --color-primary-hue: #{hue($color-primary)};
    --color-primary-saturation: #{saturation($color-primary)};
    --color-primary-lightness: #{lightness($color-primary)};
    
    --color-primary: hsl(#{$color-primary-tuple})
    --color-primary-darker: hsl(#{css-darken($color-primary-tuple..., 4)})
}

output.css

:root {
  --color-primary-hue: 180.4761904762deg;
  --color-primary-saturation: 100%;
  --color-primary-lightness: 24.7058823529%;
  --color-primary: hsl(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness))
  --color-primary-darker: hsl(4, var(--color-primary-hue), calc(l - var(--color-primary-lightness)0%)) ;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.10",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}