Lightning Web Component Design Tokens? CSS in experience builder. Can't figure this one out

Question

I'll start with a TL;DR Need to pass a value from Experience Builder into CSS. E.g. if someone chooses black on the property type of Color, the value well be passed to a custom CSS class. I have tried the below with no success.

.custom-class { var(--propertyName); }

Really struggling with this one. I need to allow admins to change the color of buttons in a lightning web component that is being used as a community hero via Experience Builder.

All sings are pointing to the need of using an Aura design token, but I have seen a few hints of a recent update of this being supported in LWCs.

My background is in web dev, so I have a solid understanding of the core concept, but how in the world do I get the TargetConfig property type color to show in the Experience builder for the button?

I am passing string values to other pieces of the LWC, so that is working, but I can't figure out how to pass a string or any value to the CSS of the LWC.

Edit: thanks for the markdown edit Brian.

Code

js-meta.xml

<property name="secondaryButtonColor" type="Color" default="rgba(0, 0, 0, 1)" label="Secondary button color"/>

js

@api secondaryButtonColor;

css

.button {
background-color:var(--secondaryButtonColor);
}

html

<a href="#" class="button">Test</a>

Answer 1

You cannot pass variabled to CSS file from javascript. You have to depend on javascript to apply styles at run time. Below is how you can do it:

HTML:

<button style={btnBackground}>My Btn</button>

JS:

@api
secondaryButtonColor = 'yellow';

get btnBackground() {
    return `background:${this.secondaryButtonColor}`;
}

Whatever you select from app builder for secondaryButtonColor will be passed to change color. Here is the playground example