Why does editing colors in Angular not work correctly?

Question

Heyo, I'm trying to set colors for some inline SVG element programmatically but it doesn't really work.

My code has, for example:

baseColor: HSLColor = HSLColor.of(30, 40, 50); //ugly but good for experiments
strokeColor: HSLColor = HSLColor.of(0, 0, 60); //default value, gets replaced

...

ngOnInit() {
  this.strokeColor = {...this.baseColor, value: Math.max(0, this.baseColor.value - 40)};
}

<path d="..." style="{{'fill:' + this.baseColor + ';stroke:' + this.strokeColor + ';stroke-width:0.84px;'}}"/>

The resulting DOM element has a fill but NO stroke. I've tried setting it via ngStyle, too. Doesn't work either.

My plan is to have the stroke color be a darker base color. For that, I thought I could just use the old attributes of the baseColor (hue, saturation, value) and override the value with a new one. If I remove the line in the onInit() method, a stroke will be visible (using the default color I set up above). The contents of this.strokeColor are virtually the same before onInit() and after, only with different values. Printing JSON.stringify(this.strokeColor) to console reveals as much. But it seems there is still some difference and I can't get my head around what it is.

Converting my frankenstein'ed stroke color to HSLColor with as doesn't work, either.

ngOnInit() {
  this.strokeColor = {...this.baseColor, value: Math.max(0, this.baseColor.value - 40)} as HSLColor;
}

Using the following actually works but I'm just trying to figure out WHY:

this.strokeColor = HSLColor.of(this.baseColor.hue, this.baseColor.saturation, this.baseColor.value - 40);