From fce92382fdbb0ee8fc9830cfd8253831d6607b29 Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Fri, 16 Jul 2021 18:49:23 +0200 Subject: [PATCH] Introduce new CSS Color API and deprecate old one This resolves #902 --- .../kotlin/com/sample/content/CodeSnippets.kt | 4 +- .../kotlin/com/sample/content/IntroSection.kt | 4 +- .../kotlin/com/sample/style/Stylesheet.kt | 4 +- .../jsMain/kotlin/com/sample/style/WtCard.kt | 27 +---- .../jsMain/kotlin/com/sample/style/WtText.kt | 22 ++-- .../org/jetbrains/compose/web/css/Color.kt | 28 +++++ web/core/src/jsTest/kotlin/css/CSSBoxTests.kt | 4 +- .../src/jsTest/kotlin/css/CSSTextTests.kt | 2 +- web/core/src/jsTest/kotlin/css/ColorTests.kt | 106 +++++++++++++++++- .../compose/web/sample/tests/EventsTests.kt | 2 +- 10 files changed, 156 insertions(+), 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 index e204c31b1a..57c109b253 100644 --- 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 index 7de2779296..e395ff49ea 100644 --- 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 index 4c664cbaae..a1af8dc043 100644 --- 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 index 3c8282817c..4cbb24e3fe 100644 --- 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 index bf7ff13575..3a9582163f 100644 --- 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 index 9fee840eac..9b38dbaedf 100644 --- 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 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() + +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 index a7d8ebb5f4..474f552630 100644 --- 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 index 3f29c780e4..f309976466 100644 --- 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 index a6f2f3dd02..6e90e28688 100644 --- 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 index 7815fc763e..b44b499648 100644 --- 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"