Access formatting value of conditional formatting in Power BI custom visual

Question

I'm new to Power BI custom visual development, following the Microsoft documentation, but I don't find it particularly helpful when it comes to conditional formatting.

I'm building up my visual using HTML elements, and I want to apply conditional formatting to the background color of the elements. I created a simplified example which is available here: https://github.com/DanielSzentimrey-Harrach/sampleVisual

In settings.ts I specified the instanceKind property on my color picker, so I can configure conditional formatting:

class DataPointCardSettings extends FormattingSettingsCard {
    defaultColor = new formattingSettings.ColorPicker({
        name: "defaultColor",
        displayName: "Default color",
        value: { value: "" },
        instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule
    });

    name: string = "dataPoint";
    displayName: string = "Data colors";
    slices: Array<FormattingSettingsSlice> = [this.defaultColor];
}

In my visual.ts I simply iterate through the input values, and display the category name within a span. I use the measure value to set the width of the span. (This simple logic is just for the sake of this example.):

public update(options: VisualUpdateOptions) {
    this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews[0]);
    
    const dataView: powerbi.DataView = options.dataViews[0];
    const categoricalMapping = dataView.categorical;

    this.target.innerHTML = "";

    for (let i=0; i < categoricalMapping.categories[0].values.length; i++) {
        const span: HTMLElement = document.createElement("span");
        span.appendChild(document.createTextNode(categoricalMapping.categories[0].values[i].toString()));
        span.style.width = 50 * +categoricalMapping.values[0].values[i].toString() + "px";
        span.style.backgroundColor = this.formattingSettings.dataPointCard.defaultColor.value.value;
        this.target.appendChild(span);
    }
}

I know that the second to last line (span.style.backgroundColor...) is not right, but I don't know how to access the specific result of the conditional formatting for each individual item.

In Power BI, I have the following:

• Input data
  
• Data mapping
  
• Formatting settings
  

Notice how I'm picking the first value from the Color column, which is "blue" for Cat3.

After this, in my visual all the spans are colored blue.

Any help would be very much appreciated.