Failing build

.gitignore

@@ -42,3 +42,6 @@ bin/
 .DS_Store
 
 web
+
+.kotlin
+.idea

build.gradle.kts

@@ -46,7 +46,7 @@ kotlin {
         val jsMain by getting {
             dependencies {
                 //base
-                implementation("nl.astraeus:kotlin-komponent-js:1.2.2-SNAPSHOT")
+                implementation("nl.astraeus:kotlin-komponent-js:1.2.2")
             }
         }
         val jsTest by getting {

src/jsMain/kotlin/nl/astraeus/vst/chip/view/MainView.kt

@@ -162,7 +162,7 @@ object MainView : Komponent() {
           }
         }
       }
-      div {
+      div(MainViewCss.ButtonCss.name) {
         +"Send note on to output"
         onClickFunction = {
           val data = Uint8Array(
@@ -176,7 +176,7 @@ object MainView : Komponent() {
           Midi.send(data, window.performance.now() + 2000)
         }
       }
-      div {
+      div(MainViewCss.ButtonCss.name) {
         +"Send note off to output"
         onClickFunction = {
           val data = Uint8Array(
@@ -214,6 +214,10 @@ object MainView : Komponent() {
           margin(0.px)
           padding(0.px)
           height(100.prc)
+        }
+        select("html", "body") {
+          backgroundColor(Css.currentStyle.mainBackgroundColor)
+          color(Css.currentStyle.mainFontColor)
 
           fontFamily("JetbrainsMono, monospace")
           fontSize(14.px)
@@ -226,13 +230,14 @@ object MainView : Komponent() {
           margin(1.rem)
           padding(1.rem)
           backgroundColor(Css.currentStyle.buttonBackgroundColor)
+          color(Css.currentStyle.mainFontColor)
 
           hover {
             backgroundColor(Css.currentStyle.buttonBackgroundColor.hover())
           }
         }
         select(cls(ActiveCss)) {
-          backgroundColor(Css.currentStyle.selectedBackgroundColor)
+          //backgroundColor(Css.currentStyle.selectedBackgroundColor)
         }
         select(cls(NoteBarCss)) {
           minHeight(4.rem)
@@ -249,7 +254,7 @@ object MainView : Komponent() {
           backgroundImage("url('https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg')")
           background("right 0.8em center/1.4em")
           backgroundColor(Css.currentStyle.inputBackgroundColor)
-          color(Css.currentStyle.entryFontColor)
+          //color(Css.currentStyle.entryFontColor)
           borderRadius(0.25.em)
         }
         select(cls(StartSplashCss)) {

src/jsMain/kotlin/nl/astraeus/vst/chip/view/css/Css.kt

@@ -1,34 +1,19 @@
 package daw.style
 
 import kotlinx.browser.document
-import nl.astraeus.css.properties.Color
-import nl.astraeus.css.properties.UserSelect
-import nl.astraeus.css.properties.hsl
-import nl.astraeus.css.properties.hsla
+import nl.astraeus.css.properties.*
 import nl.astraeus.css.style
 import nl.astraeus.css.style.ConditionalStyle
 import nl.astraeus.css.style.Style
 
 class StyleDefinition(
-  val mainFontColorNumber: Int = 32,
-  val mainFontColor: Color = hsla(mainFontColorNumber, 70, 55, 1.0),
-  val mainBackgroundColor: Color,
-  val selectedBackgroundColor: Color = hsl((Css.mainFontColorNumber + 180) % 360, 40, 30),
-  val mainBorderColor: Color = hsla((Css.mainFontColorNumber + 270) % 360, 0, 20, 0.5),
-  val headerFontColor: Color = hsl(Css.mainFontColorNumber, 50, 95),
-  val entryFontColor: Color = hsl(Css.mainFontColorNumber, 70, 55),
-  val successColor: Color = hsl(120, 70, 55),
-  val highlightFontColor : Color = hsl(Css.mainFontColorNumber, 70, 65),
-  val menuFontColor : Color = hsl(Css.mainFontColorNumber, 50, 100),
-  val menuBackgroundColor : Color = hsl(Css.mainFontColorNumber, 50, 16),
-  val backgroundComponentColor : Color = hsl(0, 0, 16),
-  val inputBackgroundColor : Color = hsl(0, 0, 20),
-  val inputBorderColor : Color = hsl(Css.mainFontColorNumber, 50, 50),
-  val buttonFontColor : Color = hsl(Css.mainFontColorNumber, 50, 95),
-  val buttonBackgroundColor : Color = hsl(Css.mainFontColorNumber, 70, 55),
-  val tabColor: Color = mainFontColor.darken(20),
-  val tabSelectedColor: Color = mainFontColor.lighten(10),
-  val tabHoverColor: Color = tabSelectedColor.lighten(20),
+  val mainFontColor: Color = hsla(178, 70, 55, 1.0),
+  val mainBackgroundColor: Color = hsl(239, 50, 10),
+  //val entryFontColor: Color = hsl(Css.mainFontColorNumber, 70, 55),
+  val inputBackgroundColor : Color = mainBackgroundColor.lighten(15),
+  val buttonBackgroundColor : Color = mainBackgroundColor.lighten(15),
+  val buttonBorderColor : Color = mainFontColor.changeAlpha(0.25),
+  val buttonBorderWidth : Measurement = 2.px,
 )
 
 object NoTextSelectCls : CssName("no-text-select")
@@ -43,7 +28,6 @@ fun Color.hover(): Color = if (Css.currentStyle == Css.darkStyle) {
 
 object Css {
   var minified = false
-  var mainFontColorNumber = 32
   var dynamicStyles = mutableMapOf<CssId, ConditionalStyle.() -> Unit>()
 
   fun CssId.defineCss(conditionalStyle: ConditionalStyle.() -> Unit) {
@@ -73,16 +57,10 @@ object Css {
   }
 
   val darkStyle = StyleDefinition(
-    mainFontColorNumber = mainFontColorNumber,
-    mainBackgroundColor = hsl(0, 0, 10)
   )
 
   val lightStyle = StyleDefinition(
-    mainFontColorNumber = (mainFontColorNumber + 120) % 360,
-    mainBackgroundColor = hsl(0, 0, 98),
-    mainBorderColor = hsla((Css.mainFontColorNumber + 270) % 360, 0, 20, 0.15),
-    headerFontColor = hsl(mainFontColorNumber, 50, 5),
-    backgroundComponentColor = hsl(0, 0, 84),
+    mainBackgroundColor = hsl(239+180, 50, 15),
   )
 
   var currentStyle: StyleDefinition = darkStyle

src/jvmMain/kotlin/nl/astraeus/vst/chip/Main.kt

@@ -9,7 +9,7 @@ fun main() {
   }
 
   val server = Undertow.builder()
-    .addHttpListener(Settings.port, "0.0.0.0")
+    .addHttpListener(Settings.port, "localhost")
     .setIoThreads(4)
     .setHandler(RequestHandler)
     .setServerOption(UndertowOptions.SHUTDOWN_TIMEOUT, 1000)

src/jvmMain/kotlin/nl/astraeus/vst/chip/RequestHandler.kt

@@ -12,5 +12,4 @@ object RequestHandler : HttpHandler {
   override fun handleRequest(exchange: HttpServerExchange) {
     resourceHandler.handleRequest(exchange)
   }
-
 }