Browse Source

Introduce new CSS Color API and deprecate old one

This resolves #902
pull/905/head
Shagen Ogandzhanian 3 years ago
parent
commit
fce92382fd
  1. 4
      web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
  2. 4
      web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt
  3. 4
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
  4. 27
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt
  5. 22
      web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt
  6. 28
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/Color.kt
  7. 4
      web/core/src/jsTest/kotlin/css/CSSBoxTests.kt
  8. 2
      web/core/src/jsTest/kotlin/css/CSSTextTests.kt
  9. 106
      web/core/src/jsTest/kotlin/css/ColorTests.kt
  10. 2
      web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/EventsTests.kt

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

@ -47,7 +47,7 @@ private val DeclareAndUseStylesheet = CodeSnippetData(
source = """ source = """
object MyStyleSheet : StyleSheet() { object MyStyleSheet : StyleSheet() {
val container by style { /* define a class `container` */ 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 = { attrs = {
classes(WtOffsets.wtTopOffset24) classes(WtOffsets.wtTopOffset24)
style { style {
backgroundColor(Color.RGBA(39, 40, 44, 0.05)) backgroundColor(rgba(39, 40, 44, 0.05))
borderRadius(8.px, 8.px, 8.px) borderRadius(8.px, 8.px, 8.px)
property("padding", "12px 16px") property("padding", "12px 16px")
} }

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

@ -117,7 +117,7 @@ private fun IntroCodeSample() {
Div(attrs = { Div(attrs = {
style { style {
marginTop(24.px) marginTop(24.px)
backgroundColor(Color.RGBA(39, 40, 44, 0.05)) backgroundColor(rgba(39, 40, 44, 0.05))
borderRadius(8.px) borderRadius(8.px)
property("font-family", "'JetBrains Mono', monospace") property("font-family", "'JetBrains Mono', monospace")
} }
@ -145,7 +145,7 @@ private fun IntroCodeSample() {
style { style {
height(1.px) height(1.px)
border(width = 0.px) border(width = 0.px)
backgroundColor(Color.RGBA(39, 40, 44, 0.15)) backgroundColor(rgba(39, 40, 44, 0.15))
} }
}) })

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

@ -39,8 +39,8 @@ object AppStylesheet : StyleSheet() {
top((-32).px) top((-32).px)
marginLeft(8.px) marginLeft(8.px)
fontSize(15.px) fontSize(15.px)
backgroundColor(Color.RGBA(39, 40, 44, .05)) backgroundColor(rgba(39, 40, 44, .05))
color(Color.RGBA(39,40,44,.7)) color(rgba(39, 40, 44, .7))
borderRadius(4.px, 4.px, 4.px) borderRadius(4.px, 4.px, 4.px)
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {

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

@ -1,25 +1,6 @@
package com.sample.style package com.sample.style
import org.jetbrains.compose.web.css.AlignItems import org.jetbrains.compose.web.css.*
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
object WtCards : StyleSheet(AppStylesheet) { object WtCards : StyleSheet(AppStylesheet) {
val wtCard by style { val wtCard by style {
@ -31,14 +12,14 @@ object WtCards : StyleSheet(AppStylesheet) {
} }
val wtCardThemeLight by style { val wtCardThemeLight by style {
border(color = Color.RGBA(39, 40, 44, .2)) border(color = rgba(39, 40, 44, .2))
color("#27282c") color("#27282c")
backgroundColor("white") backgroundColor("white")
} }
val wtCardThemeDark by style { val wtCardThemeDark by style {
backgroundColor(Color.RGBA(255, 255, 255, 0.05)) backgroundColor(rgba(255, 255, 255, 0.05))
color(Color.RGBA(255, 255, 255, 0.6)) color(rgba(255, 255, 255, 0.6))
border(0.px) border(0.px)
} }

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

@ -50,7 +50,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
} }
val wtText1 by style { val wtText1 by style {
color(Color.RGBA(39, 40, 44, .7)) color(rgba(39, 40, 44, .7))
fontSize(18.px) fontSize(18.px)
property("letter-spacing", "normal") property("letter-spacing", "normal")
property("font-weight", 400) property("font-weight", 400)
@ -63,11 +63,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
} }
val wtText1ThemeDark by style { val wtText1ThemeDark by style {
color(Color.RGBA(255, 255, 255, 0.6)) color(rgba(255, 255, 255, 0.6))
} }
val wtText2 by style { val wtText2 by style {
color(Color.RGBA(39, 40, 44, .7)) color(rgba(39, 40, 44, .7))
fontSize(15.px) fontSize(15.px)
property("letter-spacing", "normal") property("letter-spacing", "normal")
property("font-weight", 400) property("font-weight", 400)
@ -80,7 +80,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
} }
val wtText3 by style { val wtText3 by style {
color(Color.RGBA(39, 40, 44, .7)) color(rgba(39, 40, 44, .7))
fontSize(12.px) fontSize(12.px)
property("letter-spacing", "normal") property("letter-spacing", "normal")
property("font-weight", 400) property("font-weight", 400)
@ -93,15 +93,15 @@ object WtTexts : StyleSheet(AppStylesheet) {
} }
val wtTextPale by style { val wtTextPale by style {
color(Color.RGBA(255, 255, 255, 0.30)) color(rgba(255, 255, 255, 0.30))
} }
val wtText2ThemeDark by style { val wtText2ThemeDark by style {
color(Color.RGBA(255, 255, 255, 0.6)) color(rgba(255, 255, 255, 0.6))
} }
val wtText3ThemeDark by style { val wtText3ThemeDark by style {
color(Color.RGBA(255, 255, 255, 0.6)) color(rgba(255, 255, 255, 0.6))
} }
val wtLink by style { val wtLink by style {
@ -172,7 +172,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
property("width", "fit-content") property("width", "fit-content")
hover(self) style { 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") property("outline", "none")
hover(self) style { 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") backgroundColor("#27282c")
hover(self) style { 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) display(DisplayStyle.LegacyInlineFlex)
hover(self) style { hover(self) style {
backgroundColor(Color.RGBA(255, 255, 255, 0.1)) backgroundColor(rgba(255, 255, 255, 0.1))
property("border-radius", 24.px) property("border-radius", 24.px)
} }

28
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> external interface CSSColorValue : StylePropertyValue, CSSVariableValueAs<CSSColorValue>
object Color { 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 { data class RGB(val r: Number, val g: Number, val b: Number) : CSSColorValue {
override fun toString(): String = "rgb($r, $g, $b)" 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 { 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)" 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 { 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) constructor(h: Number, s: Number, l: Number) : this(h.deg, s, l)
override fun toString(): String = "hsl($h, $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 { 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) 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>() 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)

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

@ -195,8 +195,8 @@ class CSSBoxTests {
@Test @Test
fun outlineThreeValues() = runTest { fun outlineThreeValues() = runTest {
composition { composition {
Div({ style { outline(Color.RGB(0, 20, 100), "dashed", "thick") } }) Div({ style { outline(rgb(0, 20, 100), "dashed", "thick") } })
Div({ style { outline(Color.RGB(0, 100, 20), "double", 4.px) } }) Div({ style { outline(rgb(0, 100, 20), "double", 4.px) } })
Div({ style { outline("red", "outset", "thin") } }) Div({ style { outline("red", "outset", "thin") } })
Div({ style { outline("yellow", "inset", 8.px) } }) Div({ style { outline("yellow", "inset", 8.px) } })
} }

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

@ -209,7 +209,7 @@ class CSSTextTests {
}) })
Div({ Div({
style { style {
textDecorationColor(Color.RGBA(0, 200, 20, 0.85)) textDecorationColor(rgba(0, 200, 20, 0.85))
} }
}) })
} }

106
web/core/src/jsTest/kotlin/css/ColorTests.kt

@ -6,15 +6,115 @@
package org.jetbrains.compose.web.core.tests.css package org.jetbrains.compose.web.core.tests.css
import org.jetbrains.compose.web.core.tests.runTest import org.jetbrains.compose.web.core.tests.runTest
import org.jetbrains.compose.web.css.Color import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.color
import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Div
import org.w3c.dom.HTMLElement import org.w3c.dom.HTMLElement
import org.w3c.dom.get import org.w3c.dom.get
import kotlin.test.Test import kotlin.test.Test
import kotlin.test.assertEquals import kotlin.test.assertEquals
class ColorTests { 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 @Test
fun colorConstants() = runTest { fun colorConstants() = runTest {
composition { composition {
@ -297,6 +397,6 @@ class ColorTests {
assertEquals("yellowgreen", (root.children[counter++] as HTMLElement).style.color) assertEquals("yellowgreen", (root.children[counter++] as HTMLElement).style.color)
assertEquals("yellow", (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("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)
} }
} }

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

@ -73,7 +73,7 @@ class EventsTests {
style { style {
property("overflow-y", "scroll") property("overflow-y", "scroll")
height(200.px) height(200.px)
backgroundColor(Color.RGB(220, 220, 220)) backgroundColor(rgb(220, 220, 220))
} }
onScroll { onScroll {
state = "Scrolled" state = "Scrolled"

Loading…
Cancel
Save