How to access scss variables in typescript

I wanted to generate an object and it will create an HTML element. Here I need to supply color, background-color, border to that object.

Instead of hard coding all those values, I wanted to grab them from SCSS.

I tried this way and it works. Not sure it is the correct way to do or not. So, looking for perfect solution

SCSS sample code:

:root {
    --normal-rate: #00008b;
    --special-rate : #80d4ff;
    --flat-rate : #F7941D;
}

Typescript Code:

this.normalRate = window.getComputedStyle(document.documentElement).getPropertyValue("--normal-rate");
this.specialRate = window.getComputedStyle(document.documentElement).getPropertyValue(RateColor.SpecialRate);
this.flatRate = window.getComputedStyle(document.documentElement).getPropertyValue(RateColor.FlatRate);

this.obj= [
        { title: '', allDay: false,..., backgroundColor: this.specialRate, borderColor: this.specialRate },
        { title: '', allDay: false,..., backgroundColor: this.normalRate, borderColor: this.normalRate },
        { title: '', allDay: false,..., backgroundColor: this.flatRate, borderColor: this.flatRate }
      ];