Closed bitspittle closed 10 months ago
Make sure all custom css classes we create inherit from CSSStyleValue or whatever the type is that lets us set things as variables
I already added a StyleVariable
concept to Silk, but I still need something that needs to be color mode aware.
NOTE: This won't replace palettes but will instead build on top of them.
What I'm thinking....
New SilkVariable
class:
// Declaration
val ButtonHoverColor by SilkVariable(prefix = "silk") { colorMode ->
colorMode.toSilkPalette().button.hover
}
// Usage
val ButtonStyle by ComponentStyle(prefix = "silk") {
/*...*/
hover {
Modifier.backgroundColor(ButtonHoverColor.value())
// Was: Modifier.backgroundColor(colorMode.toSilkPalette().button.hover)
}
}
initSilk
:
mutableTheme.registerSilkVariable(ButtonHoverColor)
SilkApp
?) and grabs the root (raw!) element, setting all silk variables values on it.
for (silkVar in theme.silkVars) {
root.style.setProperty("--${silkVar.name}", silkVar.value.toString())
}
updateSilkVariables(colorMode: ColorMode, rootProvider: () -> HTMLElement = { window.findElementById("root") }
?I think we can close this now. The current system is something I'm satisfied with.
Variables are set here: https://github.com/varabyte/kobweb/blob/a6061d7a3b53383e055a94ef4aa430af6647f8b4/frontend/silk-widgets/src/jsMain/kotlin/com/varabyte/kobweb/silk/init/InitSilkWidgets.kt#L309
For example, should I be using variables for styles instead of creating dark / light versions?
Should themed colors be replaced with variables where people can override them that way in some subwindow?