Figure out how variables interact with Kobweb / Silk

[bitspittle]

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?

[bitspittle]

Make sure all custom css classes we create inherit from CSSStyleValue or whatever the type is that lets us set things as variables

[bitspittle]

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

• Register all silk variables in initSilk:

  mutableTheme.registerSilkVariable(ButtonHoverColor)

• Update Gradle plugin to find all silk variables in user code to do this for them.
• Add code in silk which detects the color mode changing (maybe in 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())
  }

  • Note: We'll need a way to make this easy for people using Silk widgets without Kobweb to do. Maybe a helper function which looks like updateSilkVariables(colorMode: ColorMode, rootProvider: () -> HTMLElement = { window.findElementById("root") }?

[bitspittle]

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