From a5cffc44ca1f615ee591c6ff93bef4aefb92be5e Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Tue, 20 Jul 2021 11:02:09 +0200 Subject: [PATCH] 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 --- .../com/sample/content/CodeSamplesSwitcher.kt | 4 ++-- .../jsMain/kotlin/com/sample/style/WtCard.kt | 4 ++-- .../kotlin/com/sample/style/WtSection.kt | 6 ++--- .../jsMain/kotlin/com/sample/style/WtText.kt | 24 +++++++++---------- .../compose/web/css/properties/background.kt | 4 ---- .../compose/web/css/properties/box.kt | 4 ---- .../compose/web/css/properties/color.kt | 4 ---- .../compose/web/css/properties/text.kt | 4 ---- .../src/jsTest/kotlin/CSSStylesheetTests.kt | 8 +++---- .../src/jsTest/kotlin/InlineStyleTests.kt | 10 ++++---- .../jsTest/kotlin/StaticComposableTests.kt | 16 +++---------- .../jsTest/kotlin/css/CSSBackgroundTests.kt | 4 ++-- web/core/src/jsTest/kotlin/css/CSSBoxTests.kt | 4 ++-- .../src/jsTest/kotlin/css/CSSTextTests.kt | 2 +- .../jsTest/kotlin/elements/AttributesTests.kt | 2 +- .../androidx/compose/web/sample/Sample.kt | 20 ++++++++-------- .../compose/web/sample/tests/EventsTests.kt | 12 +++++----- .../compose/web/sample/tests/TestCases1.kt | 6 ++--- 18 files changed, 56 insertions(+), 82 deletions(-) diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt index 8aaff09515..e3a9a2984a 100644 --- 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")) } } } 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 53bd6e3c71..d23fa4959b 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 @@ -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 { diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt index 0263c903d2..c8119770f4 100644 --- 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()) } } \ No newline at end of file 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 3a9582163f..b53a66f2a1 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 @@ -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 { diff --git 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 index d47bdc024e..5e1285e335 100644 --- 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) } diff --git 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 index 114366afd0..6f0c896fff 100644 --- 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) } diff --git 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 index 3e95df4988..bbaf5a36dc 100644 --- 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) diff --git 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 index 319d765061..3b16bfb47c 100644 --- 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) } diff --git a/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt b/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt index 07b769e309..1debabe2ec 100644 --- 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) } } diff --git a/web/core/src/jsTest/kotlin/InlineStyleTests.kt b/web/core/src/jsTest/kotlin/InlineStyleTests.kt index 10f36ac46d..a3d24c4c6f 100644 --- 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) } } } diff --git a/web/core/src/jsTest/kotlin/StaticComposableTests.kt b/web/core/src/jsTest/kotlin/StaticComposableTests.kt index ee797b1f32..412b43b369 100644 --- 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) } } ) diff --git a/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt b/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt index 00c351f7e2..3d3dc03eb6 100644 --- 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)) }}) } diff --git a/web/core/src/jsTest/kotlin/css/CSSBoxTests.kt b/web/core/src/jsTest/kotlin/css/CSSBoxTests.kt index 474f552630..7c589f842c 100644 --- 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")) } }) } diff --git a/web/core/src/jsTest/kotlin/css/CSSTextTests.kt b/web/core/src/jsTest/kotlin/css/CSSTextTests.kt index f309976466..6342d4e8ae 100644 --- 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({ diff --git a/web/core/src/jsTest/kotlin/elements/AttributesTests.kt b/web/core/src/jsTest/kotlin/elements/AttributesTests.kt index 1a7bab93e4..a02bbce76d 100644 --- 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 { } diff --git 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 index 70ffd80cf8..14bc8fb915 100644 --- 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) { 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) } } }, 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 b44b499648..01e513cfaa 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 @@ -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) diff --git 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 index 8a8a0b4139..1a19791c0f 100644 --- 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 {