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
3 years ago · a5cffc44ca
18 changed files with 56 additions and 82 deletions
--- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt
+++ b/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"))
        }
    }
 }
--- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt
+++ b/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")
-        backgroundColor("white")
+        color(Color("#27282c"))
+        backgroundColor(Color.white)
    }

    val wtCardThemeDark by style {
--- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt
+++ b/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())
    }
 }
--- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt
+++ b/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")
-        backgroundColor("#167dff")
+        color(Color.white)
+        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")
-        backgroundColor("#27282c")
+        color(Color.white)
+        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 {
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/background.kt
+++ b/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)
 }
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/box.kt
+++ b/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)
 }
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/color.kt
+++ b/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)
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/text.kt
+++ b/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)
 }
--- a/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
+++ b/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
@ -51,18 +51,18 @@ object AppStylesheet : StyleSheet() {
    }

    val withMedia by style {
-        color("lime")
-        backgroundColor("lime")
+        color(Color.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)
            }
        }

--- a/web/core/src/jsTest/kotlin/InlineStyleTests.kt
+++ b/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)
                        }
                    }
                }
--- a/web/core/src/jsTest/kotlin/StaticComposableTests.kt
+++ b/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.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.css.*
 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)
                    }
                }
            )
--- a/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt
+++ b/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))
            }})
        }

--- a/web/core/src/jsTest/kotlin/css/CSSBoxTests.kt
+++ b/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"))
                }
            })
        }
--- a/web/core/src/jsTest/kotlin/css/CSSTextTests.kt
+++ b/web/core/src/jsTest/kotlin/css/CSSTextTests.kt
@ -204,7 +204,7 @@ class CSSTextTests {
        composition {
            Div({
                style {
-                    textDecorationColor("red")
+                    textDecorationColor(Color.red)
                }
            })
            Div({
--- a/web/core/src/jsTest/kotlin/elements/AttributesTests.kt
+++ b/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 {  }
--- a/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/Sample.kt
+++ b/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)
                    }
                }
            },
--- a/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/EventsTests.kt
+++ b/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)
--- a/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt
+++ b/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 {