backgroundColor accepts only color signature

web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt

@@ -14,7 +14,7 @@ object WtCards : StyleSheet(AppStylesheet) {
     val wtCardThemeLight by style {
         border(color = rgba(39, 40, 44, .2))
         color("#27282c")
-        backgroundColor("white")
+        backgroundColor(Color.white)
     }
 
     val wtCardThemeDark by style {

web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt

@@ -16,16 +16,16 @@ object WtSections : StyleSheet(AppStylesheet) {
             propertyName = "padding-bottom",
             value = "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})"
         )
-        backgroundColor("#fff")
+        backgroundColor(Color("#fff"))
     }
 
     val wtSectionBgGrayLight by style {
-        backgroundColor("#f4f4f4")
+        backgroundColor(Color("#f4f4f4"))
         backgroundColor(AppCSSVariables.wtColorGreyLight.value())
     }
 
     val wtSectionBgGrayDark by style {
-        backgroundColor("#323236")
+        backgroundColor(Color("#323236"))
         backgroundColor(AppCSSVariables.wtColorGreyDark.value())
     }
 }

web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt

@@ -161,7 +161,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
 
     val wtButton by style {
         color("white")
-        backgroundColor("#167dff")
+        backgroundColor(Color("#167dff"))
         fontSize(15.px)
         display(DisplayStyle.InlineBlock)
         property("text-decoration", "none")
@@ -192,7 +192,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
 
     val wtButtonContrast by style {
         color("white")
-        backgroundColor("#27282c")
+        backgroundColor(Color("#27282c"))
 
         hover(self) style {
             backgroundColor(rgba(39, 40, 44, .7))
@@ -203,7 +203,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
         property("margin-right", 16.px)
         marginLeft(16.px)
         padding(12.px)
-        backgroundColor("transparent")
+        backgroundColor(Color.transparent)
         display(DisplayStyle.LegacyInlineFlex)
 
         hover(self) style {

web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/EventsTests.kt

@@ -21,7 +21,7 @@ class EventsTests {
                 style {
                     width(100.px)
                     height(100.px)
-                    backgroundColor("red")
+                    backgroundColor(Color.red)
                 }
                 onDoubleClick { state = "Double Click Works!" }
             }
@@ -130,7 +130,7 @@ class EventsTests {
         Div(attrs = {
             id("box")
             style {
-                backgroundColor("red")
+                backgroundColor(Color.red)
                 padding(50.px)
                 width(300.px)
             }
@@ -176,7 +176,7 @@ class EventsTests {
                 style {
                     width(200.px)
                     height(200.px)
-                    backgroundColor("red")
+                    backgroundColor(Color.red)
                 }
                 onMouseMove {
                     state = "${it.x},${it.y}|${it.offsetX},${it.offsetY}"
@@ -301,7 +301,7 @@ class EventsTests {
             style {
                 width(300.px)
                 height(300.px)
-                backgroundColor("red")
+                backgroundColor(Color.red)
             }
         }) {
             Text("Touch me and move the pointer")
@@ -338,7 +338,7 @@ class EventsTests {
                 animationEnd = "ENDED"
             }
             style {
-                backgroundColor("red")
+                backgroundColor(Color.red)
             }
         }) {
             Text("Click to Animate")

web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt

@@ -50,7 +50,7 @@ class TestCases1 {
                 style {
                     width(100.px)
                     height(100.px)
-                    backgroundColor("red")
+                    backgroundColor(Color.red)
                 }
             }
         ) {}