CSS API - disallow String parameters for colors

See #891 - Still not closing though since I want to revisit it after CSS Grid and propert keywrods typing

web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt

@@ -37,7 +37,7 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
                 color(Color.transparent)
                 borderRadius(20.px, 20.px, 20.px)
             }
-            color("#aaa")
+            color(Color("#aaa"))
         }
 
         border {
@@ -59,7 +59,7 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
                 color(Color("#167dff"))
                 borderRadius(20.px, 20.px, 20.px)
             }
-            color("#000")
+            color(Color("#000"))
         }
     }
 }

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

@@ -13,8 +13,8 @@ object WtCards : StyleSheet(AppStylesheet) {
 
     val wtCardThemeLight by style {
         border(color = rgba(39, 40, 44, .2))
-        color("#27282c")
+        color(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

@@ -6,7 +6,7 @@ import org.jetbrains.compose.web.css.selectors.*
 object WtTexts : StyleSheet(AppStylesheet) {
 
     val wtHero by style {
-        color("#27282c")
+        color(Color("#27282c"))
         fontSize(60.px)
         property("font-size", AppCSSVariables.wtHeroFontSize.value(60.px))
         property("letter-spacing", (-1.5).px)
@@ -28,7 +28,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtSubtitle2 by style {
-        color("#27282c")
+        color(Color("#27282c"))
         fontSize(28.px)
         property("font-size", AppCSSVariables.wtSubtitle2FontSize.value(28.px))
         property("letter-spacing", "normal")
@@ -107,7 +107,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
     val wtLink by style {
         property("border-bottom", "1px solid transparent")
         property("text-decoration", "none")
-        color("#167dff")
+        color(Color("#167dff"))
 
         hover(self) style {
             property("border-bottom-color", "#167dff")
@@ -115,7 +115,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtH2 by style {
-        color("#27282c")
+        color(Color("#27282c"))
         fontSize(31.px)
         property("font-size", AppCSSVariables.wtH2FontSize.value(31.px))
         property("letter-spacing", (-.5).px)
@@ -137,11 +137,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtH2ThemeDark by style {
-        color("#fff")
+        color(Color("#fff"))
     }
 
     val wtH3 by style {
-        color("#27282c")
+        color(Color("#27282c"))
         fontSize(21.px)
         property("font-size", AppCSSVariables.wtH3FontSize.value(20.px))
         property("letter-spacing", "normal")
@@ -156,12 +156,12 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtH3ThemeDark by style {
-        color("#fff")
+        color(Color("#fff"))
     }
 
     val wtButton by style {
-        color("white")
+        color(Color.white)
-        backgroundColor("#167dff")
+        backgroundColor(Color("#167dff"))
         fontSize(15.px)
         display(DisplayStyle.InlineBlock)
         property("text-decoration", "none")
@@ -191,8 +191,8 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtButtonContrast by style {
-        color("white")
+        color(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/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/background.kt

@@ -14,10 +14,6 @@ fun StyleBuilder.backgroundClip(value: String) {
     property("background-clip", value)
 }
 
-fun StyleBuilder.backgroundColor(value: String) {
-    property("background-color", value)
-}
-
 fun StyleBuilder.backgroundColor(value: CSSColorValue) {
     property("background-color", value)
 }

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/box.kt

@@ -38,10 +38,6 @@ fun StyleBuilder.outlineWidth(value: CSSNumeric) {
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color
-fun StyleBuilder.outlineColor(value: String) {
-    property("outline-color", value)
-}
-
 fun StyleBuilder.outlineColor(value: CSSColorValue) {
     property("outline-color", value)
 }

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/color.kt

@@ -5,10 +5,6 @@
 
 package org.jetbrains.compose.web.css
 
-fun StyleBuilder.color(value: String) {
-    property("color", value)
-}
-
 fun StyleBuilder.color(value: CSSColorValue) {
     // color hasn't Typed OM yet
     property("color", value)

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/text.kt

@@ -58,10 +58,6 @@ fun StyleBuilder.textAlign(value: String) {
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
-fun StyleBuilder.textDecorationColor(value: String) {
-    property("text-decoration-color", value)
-}
-
 fun StyleBuilder.textDecorationColor(value: CSSColorValue) {
     property("text-decoration-color", value)
 }

web/core/src/jsTest/kotlin/CSSStylesheetTests.kt

@@ -51,18 +51,18 @@ object AppStylesheet : StyleSheet() {
     }
 
     val withMedia by style {
-        color("lime")
+        color(Color.lime)
-        backgroundColor("lime")
+        backgroundColor(Color.lime)
 
         media(mediaMinWidth(20000.px)) {
             self style {
-                color("red")
+                color(Color.red)
             }
         }
 
         media(mediaMinWidth(20.px)) {
             self style {
-                backgroundColor("green")
+                backgroundColor(Color.green)
             }
         }
 

web/core/src/jsTest/kotlin/InlineStyleTests.kt

@@ -21,9 +21,9 @@ class InlineStyleTests {
                 {
                     style {
                         if (isRed) {
-                            color("red")
+                            color(Color.red)
                         } else {
-                            color("green")
+                            color(Color.green)
                         }
                     }
                 }
@@ -54,7 +54,7 @@ class InlineStyleTests {
                 {
                     style {
                         if (isRed) {
-                            color("red")
+                            color(Color.red)
                         }
                     }
                 }
@@ -85,7 +85,7 @@ class InlineStyleTests {
                 {
                     style {
                         if (isRed) {
-                            color("red")
+                            color(Color.red)
                         }
                     }
                 }
@@ -116,7 +116,7 @@ class InlineStyleTests {
                 {
                     style {
                         if (isRed) {
-                            color("red")
+                            color(Color.red)
                         }
                     }
                 }

web/core/src/jsTest/kotlin/StaticComposableTests.kt

@@ -1,16 +1,6 @@
 package org.jetbrains.compose.web.core.tests
 
-import org.jetbrains.compose.web.css.Position
+import org.jetbrains.compose.web.css.*
-import org.jetbrains.compose.web.css.bottom
-import org.jetbrains.compose.web.css.color
-import org.jetbrains.compose.web.css.left
-import org.jetbrains.compose.web.css.opacity
-import org.jetbrains.compose.web.css.percent
-import org.jetbrains.compose.web.css.position
-import org.jetbrains.compose.web.css.px
-import org.jetbrains.compose.web.css.right
-import org.jetbrains.compose.web.css.top
-import org.jetbrains.compose.web.css.value
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.Span
 import org.jetbrains.compose.web.dom.Text
@@ -77,9 +67,9 @@ class StaticComposableTests {
                 {
                     style {
                         opacity(0.3)
-                        color("red")
+                        color(Color.red)
                         opacity(0.2)
-                        color("green")
+                        color(Color.green)
                     }
                 }
             )

web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt

@@ -19,10 +19,10 @@ class CSSBackgroundTests {
     fun backgroundColor() = runTest {
         composition {
             Div({style {
-                backgroundColor("rgb(0, 128, 0)")
+                backgroundColor(rgb(0, 128, 0))
             }})
             Div({style {
-                backgroundColor("rgba(0, 129, 0, 0.2)")
+                backgroundColor(rgba(0, 129, 0, 0.2))
             }})
         }
 

web/core/src/jsTest/kotlin/css/CSSBoxTests.kt

@@ -122,12 +122,12 @@ class CSSBoxTests {
         composition {
             Div({
                 style {
-                    outlineColor("red")
+                    outlineColor(Color.red)
                 }
             })
             Div({
                 style {
-                    outlineColor("#32a1ce")
+                    outlineColor(Color("#32a1ce"))
                 }
             })
         }

web/core/src/jsTest/kotlin/css/CSSTextTests.kt

@@ -204,7 +204,7 @@ class CSSTextTests {
         composition {
             Div({
                 style {
-                    textDecorationColor("red")
+                    textDecorationColor(Color.red)
                 }
             })
             Div({

web/core/src/jsTest/kotlin/elements/AttributesTests.kt

@@ -48,7 +48,7 @@ class AttributesTests {
             ref { onDispose {  } }
             style {
                 width(500.px)
-                backgroundColor("red")
+                backgroundColor(Color.red)
             }
 
             onClick {  }

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

@@ -55,7 +55,7 @@ object AppStyleSheet : StyleSheet() {
     }
 
     val myClass by style {
-        color("green")
+        color(Color.green)
         animation(bounce) {
             duration(2.s)
             timingFunction(AnimationTimingFunction.EaseIn)
@@ -64,13 +64,13 @@ object AppStyleSheet : StyleSheet() {
     }
 
     val classWithNested by style {
-        color("green")
+        color(Color.green)
 
         MyCSSVariables.myVar(Color("blue"))
         MyCSSVariables.myVar2("red")
 
         hover(self) style {
-            color("red")
+            color(Color.red)
         }
 
         border {
@@ -99,7 +99,7 @@ fun CounterApp(counter: MutableState<Int>) {
     Button(
         {
             style {
-                color(if (counter.value % 2 == 0) "green" else "red")
+                color(if (counter.value % 2 == 0) Color.green else Color.red)
                 width((counter.value + 200).px)
                 fontSize(if (counter.value % 2 == 0) 25.px else 30.px)
                 margin(15.px)
@@ -123,7 +123,7 @@ fun Counter(value: Int) {
             onDrag { println("DRAGGING NOW!!!!") }
 
             style {
-                color("red")
+                color(Color.red)
             }
         }
     ) {
@@ -177,7 +177,7 @@ fun main() {
             }
 
             ".${AppStyleSheet.myClass}:hover" {
-                color("red")
+                color(Color.red)
             }
 
             media(mediaMinWidth(500.px) and mediaMaxWidth(700.px)) {
@@ -222,9 +222,9 @@ fun main() {
             attrs = {
                 classes(
                     Auto.css {
-                        color("pink")
+                        color(Color.pink)
                         hover(self) style {
-                            color("blue")
+                            color(Color.blue)
                         }
                     }
                 )
@@ -343,9 +343,9 @@ fun smallColoredText(text: String) {
 
                 style {
                     if (globalState.isDarkTheme) {
-                        color("black")
+                        color(Color.black)
                     } else {
-                        color("green")
+                        color(Color.green)
                     }
                 }
             },

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")
@@ -399,7 +399,7 @@ object AppStyleSheetWithAnimation : StyleSheet() {
     }
 
     val bounceClass by style {
-        color("green")
+        color(Color.green)
         animation(bounce) {
             duration(500.ms)
             timingFunction(AnimationTimingFunction.EaseIn)

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)
                 }
             }
         ) {}
@@ -70,10 +70,10 @@ class TestCases1 {
 
 private object AppStyleSheet : StyleSheet() {
     val textClass by style {
-        color("rgba(0, 200, 0, 0.92)")
+        color(rgba(0, 200, 0, 0.92))
         media(mediaMaxWidth(600.px)) {
             self style {
-                color("rgba(255, 200, 0, 0.99)")
+                color(rgba(255, 200, 0, 0.99))
             }
 
             CSSSelector.Child(self, CSSSelector.Type("span")) style {