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

# compose-web

[Morten Minke]

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

[Tuna]

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)
}

[Morten Minke]

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

[Tuna]

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

[Chrimaeon]

you don’t need a wrapper class. a simple

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

would do it as well

[Chrimaeon]

with those imports

import org.jetbrains.compose.web.css.CSSStyleVariable
import org.jetbrains.compose.web.css.StylePropertyString

[Morten Minke]

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

[David Herman]

@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