Does anyone know how I can use externally created css var variables in the kotlin defined stylesheets?

border-color: var(--color-b);

See: https://developer.mozilla.org/en-US/docs/Web/CSS/var

You can add a new class and extension method like this

class ThemeColorValue(private val colorKey: String): CSSColorValue {
    override fun toString(): String = "var(--$colorKey)"
}

fun CSSBuilder.borderColor(color: CSSColorValue) {
    property("border-color", color)
}

Good one, I can give that a shot. It does however implicitly expect the users to the the toString to evaluate the correct value. Would be nice if the CSS properties somehow have a generic way of dealing with the var functionality. Something like

color(var("--some-var"))

This would make it more 'supported' by Compose

I prefer small support and easy to extend rather than having everything.

you don’t need a wrapper class. a simple

property("color", CSSStyleVariable<StylePropertyString>("color-b").value())

would do it as well

thx Christian that was exactly what I was looking for!!!

@Morten Minke If you haven't gotten too far in your project, you might be interested in my project Kobweb. It's a layer built on top of Compose HTML and the css variable stuff came out clean I think: https://github.com/varabyte/kobweb#css-variables