Introduce new CSS Color API and deprecate old one

This resolves JetBrains#902
mareklangiewicz · Feb 14, 2022 · 6f4f138 · 6f4f138
1 parent 684b4c3
commit 6f4f138
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 47 deletions.
diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
@@ -47,7 +47,7 @@ private val DeclareAndUseStylesheet = CodeSnippetData(
     source = """
         object MyStyleSheet : StyleSheet() {
             val container by style { /* define a class `container` */
-                border(1.px, LineStyle.Solid, Color.RGB(255, 0, 0))
+                border(1.px, LineStyle.Solid, rgb(255, 0, 0))
             }
         }
         
@@ -237,7 +237,7 @@ private fun TitledCodeSample(title: String, code: String) {
         attrs = {
             classes(WtOffsets.wtTopOffset24)
             style {
-                backgroundColor(Color.RGBA(39, 40, 44, 0.05))
+                backgroundColor(rgba(39, 40, 44, 0.05))
                 borderRadius(8.px, 8.px, 8.px)
                 property("padding", "12px 16px")
             }

diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt
@@ -117,7 +117,7 @@ private fun IntroCodeSample() {
     Div(attrs = {
         style {
             marginTop(24.px)
-            backgroundColor(Color.RGBA(39, 40, 44, 0.05))
+            backgroundColor(rgba(39, 40, 44, 0.05))
             borderRadius(8.px)
             property("font-family", "'JetBrains Mono', monospace")
         }
@@ -145,7 +145,7 @@ private fun IntroCodeSample() {
             style {
                 height(1.px)
                 border(width = 0.px)
-                backgroundColor(Color.RGBA(39, 40, 44, 0.15))
+                backgroundColor(rgba(39, 40, 44, 0.15))
             }
         })
 

diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
@@ -39,8 +39,8 @@ object AppStylesheet : StyleSheet() {
         top((-32).px)
         marginLeft(8.px)
         fontSize(15.px)
-        backgroundColor(Color.RGBA(39, 40, 44, .05))
-        color(Color.RGBA(39,40,44,.7))
+        backgroundColor(rgba(39, 40, 44, .05))
+        color(rgba(39, 40, 44, .7))
         borderRadius(4.px, 4.px, 4.px)
 
         media(mediaMaxWidth(640.px)) {

diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt
@@ -1,25 +1,6 @@
 package com.sample.style
 
-import org.jetbrains.compose.web.css.AlignItems
-import org.jetbrains.compose.web.css.Color
-import org.jetbrains.compose.web.css.DisplayStyle
-import org.jetbrains.compose.web.css.FlexDirection
-import org.jetbrains.compose.web.css.LineStyle
-import org.jetbrains.compose.web.css.Position
-import org.jetbrains.compose.web.css.StyleSheet
-import org.jetbrains.compose.web.css.alignItems
-import org.jetbrains.compose.web.css.backgroundColor
-import org.jetbrains.compose.web.css.border
-import org.jetbrains.compose.web.css.color
-import org.jetbrains.compose.web.css.display
-import org.jetbrains.compose.web.css.flexDirection
-import org.jetbrains.compose.web.css.flexGrow
-import org.jetbrains.compose.web.css.mediaMaxWidth
-import org.jetbrains.compose.web.css.media
-import org.jetbrains.compose.web.css.padding
-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.*
 
 object WtCards : StyleSheet(AppStylesheet) {
     val wtCard by style {
@@ -31,14 +12,14 @@ object WtCards : StyleSheet(AppStylesheet) {
     }
 
     val wtCardThemeLight by style {
-        border(color = Color.RGBA(39, 40, 44, .2))
+        border(color = rgba(39, 40, 44, .2))
         color("#27282c")
         backgroundColor("white")
     }
 
     val wtCardThemeDark by style {
-        backgroundColor(Color.RGBA(255, 255, 255, 0.05))
-        color(Color.RGBA(255, 255, 255, 0.6))
+        backgroundColor(rgba(255, 255, 255, 0.05))
+        color(rgba(255, 255, 255, 0.6))
         border(0.px)
     }
 

diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt
@@ -50,7 +50,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtText1 by style {
-        color(Color.RGBA(39, 40, 44, .7))
+        color(rgba(39, 40, 44, .7))
         fontSize(18.px)
         property("letter-spacing", "normal")
         property("font-weight", 400)
@@ -63,11 +63,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtText1ThemeDark by style {
-        color(Color.RGBA(255, 255, 255, 0.6))
+        color(rgba(255, 255, 255, 0.6))
     }
 
     val wtText2 by style {
-        color(Color.RGBA(39, 40, 44, .7))
+        color(rgba(39, 40, 44, .7))
         fontSize(15.px)
         property("letter-spacing", "normal")
         property("font-weight", 400)
@@ -80,7 +80,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtText3 by style {
-        color(Color.RGBA(39, 40, 44, .7))
+        color(rgba(39, 40, 44, .7))
         fontSize(12.px)
         property("letter-spacing", "normal")
         property("font-weight", 400)
@@ -93,15 +93,15 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtTextPale by style {
-        color(Color.RGBA(255, 255, 255, 0.30))
+        color(rgba(255, 255, 255, 0.30))
     }
 
     val wtText2ThemeDark by style {
-        color(Color.RGBA(255, 255, 255, 0.6))
+        color(rgba(255, 255, 255, 0.6))
     }
 
     val wtText3ThemeDark by style {
-        color(Color.RGBA(255, 255, 255, 0.6))
+        color(rgba(255, 255, 255, 0.6))
     }
 
     val wtLink by style {
@@ -172,7 +172,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
         property("width", "fit-content")
 
         hover(self) style {
-            backgroundColor(Color.RGBA(22, 125, 255, .8))
+            backgroundColor(rgba(22, 125, 255, .8))
         }
     }
 
@@ -186,7 +186,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
         property("outline", "none")
 
         hover(self) style {
-            backgroundColor(Color.RGBA(255, 255, 255, 0.1))
+            backgroundColor(rgba(255, 255, 255, 0.1))
         }
     }
 
@@ -195,7 +195,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
         backgroundColor("#27282c")
 
         hover(self) style {
-            backgroundColor(Color.RGBA(39, 40, 44, .7))
+            backgroundColor(rgba(39, 40, 44, .7))
         }
     }
 
@@ -207,7 +207,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
         display(DisplayStyle.LegacyInlineFlex)
 
         hover(self) style {
-            backgroundColor(Color.RGBA(255, 255, 255, 0.1))
+            backgroundColor(rgba(255, 255, 255, 0.1))
             property("border-radius", 24.px)
         }
 

diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/Color.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/Color.kt
@@ -5,20 +5,25 @@ package org.jetbrains.compose.web.css
 external interface CSSColorValue : StylePropertyValue, CSSVariableValueAs<CSSColorValue>
 
 object Color {
+
+    @Deprecated("use org.jetbrains.compose.web.css.rgb", ReplaceWith("rgb(r, g, b)"))
     data class RGB(val r: Number, val g: Number, val b: Number) : CSSColorValue {
         override fun toString(): String = "rgb($r, $g, $b)"
     }
 
+    @Deprecated("use org.jetbrains.compose.web.css.rgba", ReplaceWith("rgba(r, g, b, a)"))
     data class RGBA(val r: Number, val g: Number, val b: Number, val a: Number) : CSSColorValue {
         override fun toString(): String = "rgba($r, $g, $b, $a)"
     }
 
+    @Deprecated("use org.jetbrains.compose.web.css.hsl", ReplaceWith("hsl(r, g, b)"))
     data class HSL(val h: CSSAngleValue, val s: Number, val l: Number) : CSSColorValue {
         constructor(h: Number, s: Number, l: Number) : this(h.deg, s, l)
 
         override fun toString(): String = "hsl($h, $s%, $l%)"
     }
 
+    @Deprecated("use org.jetbrains.compose.web.css.hsla", ReplaceWith("hsla(r, g, b, a)"))
     data class HSLA(val h: CSSAngleValue, val s: Number, val l: Number, val a: Number) : CSSColorValue {
         constructor(h: Number, s: Number, l: Number, a: Number) : this(h.deg, s, l, a)
 
@@ -168,3 +173,26 @@ object Color {
 }
 
 fun Color(name: String): CSSColorValue = name.unsafeCast<CSSColorValue>()
+
+private class RGB(val r: Number, val g: Number, val b: Number): CSSColorValue {
+    override fun toString(): String = "rgb($r, $g, $b)"
+}
+
+private class RGBA(val r: Number, val g: Number, val b: Number, val a: Number) : CSSColorValue {
+    override fun toString(): String = "rgba($r, $g, $b, $a)"
+}
+
+private class HSL(val h: CSSAngleValue, val s: Number, val l: Number) : CSSColorValue {
+    override fun toString(): String = "hsl($h, $s%, $l%)"
+}
+
+private class HSLA(val h: CSSAngleValue, val s: Number, val l: Number, val a: Number) : CSSColorValue {
+    override fun toString(): String = "hsla($h, $s%, $l%, $a)"
+}
+
+fun rgb(r: Number, g: Number, b: Number): CSSColorValue = RGB(r, g, b)
+fun rgba(r: Number, g: Number, b: Number, a: Number): CSSColorValue = RGBA(r, g, b, a)
+fun hsl(h: CSSAngleValue, s: Number, l: Number): CSSColorValue = HSL(h, s, l)
+fun hsl(h: Number, s: Number, l: Number): CSSColorValue = HSL(h.deg, s, l)
+fun hsla(h: CSSAngleValue, s: Number, l: Number, a: Number): CSSColorValue = HSLA(h, s, l, a)
+fun hsla(h: Number, s: Number, l: Number, a: Number): CSSColorValue = HSLA(h.deg, s, l, a)
diff --git a/web/core/src/jsTest/kotlin/css/CSSBoxTests.kt b/web/core/src/jsTest/kotlin/css/CSSBoxTests.kt
@@ -195,8 +195,8 @@ class CSSBoxTests {
     @Test
     fun outlineThreeValues() = runTest {
         composition {
-            Div({ style { outline(Color.RGB(0, 20, 100), "dashed", "thick") } })
-            Div({ style { outline(Color.RGB(0, 100, 20), "double", 4.px) } })
+            Div({ style { outline(rgb(0, 20, 100), "dashed", "thick") } })
+            Div({ style { outline(rgb(0, 100, 20), "double", 4.px) } })
             Div({ style { outline("red", "outset", "thin") } })
             Div({ style { outline("yellow", "inset", 8.px) } })
         }

diff --git a/web/core/src/jsTest/kotlin/css/CSSTextTests.kt b/web/core/src/jsTest/kotlin/css/CSSTextTests.kt
@@ -209,7 +209,7 @@ class CSSTextTests {
             })
             Div({
                 style {
-                    textDecorationColor(Color.RGBA(0, 200, 20, 0.85))
+                    textDecorationColor(rgba(0, 200, 20, 0.85))
                 }
             })
         }

diff --git a/web/core/src/jsTest/kotlin/css/ColorTests.kt b/web/core/src/jsTest/kotlin/css/ColorTests.kt
@@ -6,15 +6,115 @@
 package org.jetbrains.compose.web.core.tests.css
 
 import org.jetbrains.compose.web.core.tests.runTest
-import org.jetbrains.compose.web.css.Color
-import org.jetbrains.compose.web.css.color
+import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.get
 import kotlin.test.Test
 import kotlin.test.assertEquals
 
+
 class ColorTests {
+    @Test
+    @Suppress("DEPRECATION")
+    fun rgbTestDeprecated() = runTest {
+        composition {
+            Div({ style { color(Color.RGB(0, 0, 0)) } })
+            Div({ style { color(Color.RGB(200, 10, 20)) } })
+        }
+
+        assertEquals("rgb(0, 0, 0)", (root.children[0] as HTMLElement).style.color)
+        assertEquals("rgb(200, 10, 20)", (root.children[1] as HTMLElement).style.color)
+    }
+
+
+    @Test
+    fun rgbTest() = runTest {
+        composition {
+            Div({ style { color(rgb(0, 0, 0)) } })
+            Div({ style { color(rgb(200, 10, 20)) } })
+        }
+
+        assertEquals("rgb(0, 0, 0)", (root.children[0] as HTMLElement).style.color)
+        assertEquals("rgb(200, 10, 20)", (root.children[1] as HTMLElement).style.color)
+    }
+
+    @Test
+    @Suppress("DEPRECATION")
+    fun rgbaTestDeprecated() = runTest {
+        composition {
+            Div({ style { color(Color.RGBA(0, 220, 0, 0.2)) } })
+            Div({ style { color(Color.RGBA(200, 10, 20, 1)) } })
+            Div({ style { color(Color.RGBA(200, 10, 20, 0.3)) } })
+        }
+
+        assertEquals("rgba(0, 220, 0, 0.2)", (root.children[0] as HTMLElement).style.color)
+        assertEquals("rgb(200, 10, 20)", (root.children[1] as HTMLElement).style.color)
+        assertEquals("rgba(200, 10, 20, 0.3)", (root.children[2] as HTMLElement).style.color)
+    }
+
+
+    @Test
+    fun rgbaTest() = runTest {
+        composition {
+            Div({ style { color(rgba(0, 220, 0, 0.2)) } })
+            Div({ style { color(rgba(200, 10, 20, 1)) } })
+            Div({ style { color(rgba(200, 10, 20, 0.3)) } })
+        }
+
+        assertEquals("rgba(0, 220, 0, 0.2)", (root.children[0] as HTMLElement).style.color)
+        assertEquals("rgb(200, 10, 20)", (root.children[1] as HTMLElement).style.color)
+        assertEquals("rgba(200, 10, 20, 0.3)", (root.children[2] as HTMLElement).style.color)
+    }
+
+    @Test
+    @Suppress("DEPRECATION")
+    fun hslTestDeprecated() = runTest {
+        composition {
+            Div({ style { color(Color.HSL(100, 120, 50)) } })
+            Div({ style { color(Color.HSL(235, 100, 50)) } })
+        }
+
+        assertEquals("rgb(85, 255, 0)", (root.children[0] as HTMLElement).style.color)
+        assertEquals("rgb(0, 21, 255)", (root.children[1] as HTMLElement).style.color)
+    }
+
+    @Test
+    fun hslTest() = runTest {
+        composition {
+            Div({ style { color(hsl(100, 120, 50)) } })
+            Div({ style { color(hsl(235, 100, 50)) } })
+        }
+
+        assertEquals("rgb(85, 255, 0)", (root.children[0] as HTMLElement).style.color)
+        assertEquals("rgb(0, 21, 255)", (root.children[1] as HTMLElement).style.color)
+    }
+
+    @Test
+    @Suppress("DEPRECATION")
+    fun hslaTestDeprecated() = runTest {
+        composition {
+            Div({ style { color(Color.HSLA(100, 100, 50, 1)) } })
+            Div({ style { color(Color.HSLA(235, 100, 50, .5)) } })
+        }
+
+        assertEquals("rgb(85, 255, 0)", (root.children[0] as HTMLElement).style.color)
+        assertEquals("rgba(0, 21, 255, 0.5)", (root.children[1] as HTMLElement).style.color)
+    }
+
+
+    @Test
+    fun hslaTest() = runTest {
+        composition {
+            Div({ style { color(hsla(100, 100, 50, 1)) } })
+            Div({ style { color(hsla(235, 100, 50, .5)) } })
+        }
+
+        assertEquals("rgb(85, 255, 0)", (root.children[0] as HTMLElement).style.color)
+        assertEquals("rgba(0, 21, 255, 0.5)", (root.children[1] as HTMLElement).style.color)
+    }
+
+
     @Test
     fun colorConstants() = runTest {
         composition {
@@ -297,6 +397,6 @@ class ColorTests {
         assertEquals("yellowgreen", (root.children[counter++] as HTMLElement).style.color)
         assertEquals("yellow", (root.children[counter++] as HTMLElement).style.color)
         assertEquals("transparent", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("currentcolor", (root.children[counter++] as HTMLElement).style.color)
+        assertEquals("currentcolor", (root.children[counter] as HTMLElement).style.color)
     }
 }
diff --git 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
@@ -73,7 +73,7 @@ class EventsTests {
                 style {
                     property("overflow-y", "scroll")
                     height(200.px)
-                    backgroundColor(Color.RGB(220, 220, 220))
+                    backgroundColor(rgb(220, 220, 220))
                 }
                 onScroll {
                     state = "Scrolled"