Does anyone know how I can use externally created ...
# compose-web
m
Does anyone know how I can use externally created css var variables in the kotlin defined stylesheets?
Copy code
border-color: var(--color-b);
See: https://developer.mozilla.org/en-US/docs/Web/CSS/var
t
You can add a new class and extension method like this
Copy code
class ThemeColorValue(private val colorKey: String): CSSColorValue {
    override fun toString(): String = "var(--$colorKey)"
}

fun CSSBuilder.borderColor(color: CSSColorValue) {
    property("border-color", color)
}
m
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
Copy code
color(var("--some-var"))
This would make it more 'supported' by Compose
t
I prefer small support and easy to extend rather than having everything.
c
you don’t need a wrapper class. a simple
Copy code
property("color", CSSStyleVariable<StylePropertyString>("color-b").value())
would do it as well
with those imports
Copy code
import org.jetbrains.compose.web.css.CSSStyleVariable
import org.jetbrains.compose.web.css.StylePropertyString
m
thx Christian that was exactly what I was looking for!!!
d
@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