Skip to content

Commit

Permalink
Simplify assignment signatures in CSS properties
Browse files Browse the repository at this point in the history
  • Loading branch information
@Schahen
Schahen committed Jun 8, 2021
1 parent ee1a8f1 commit 9698698
Show file tree
Hide file tree
Showing 26 changed files with 217 additions and 201 deletions.
4 changes: 2 additions & 2 deletions examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ fun Layout(content: @Composable () -> Unit) {
flexDirection(FlexDirection.Column)
height(100.percent)
margin(0.px)
property("box-sizing", StylePropertyValue("border-box"))
property("box-sizing", "border-box".asStylePropertyValue())
}
}) {
content()
Expand All @@ -29,7 +29,7 @@ fun MainContentLayout(content: @Composable () -> Unit) {
Main({
style {
property("flex", value("1 0 auto"))
property("box-sizing", value("border-box"))
property("box-sizing", "border-box".asStylePropertyValue())
}
}) {
content()
Expand Down
10 changes: 5 additions & 5 deletions examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ private fun TitledCodeSample(title: String, code: String) {
style {
backgroundColor(Color.RGBA(39, 40, 44, 0.05))
borderRadius(8.px, 8.px, 8.px)
property("padding", value("12px 16px"))
property("padding", "12px 16px".asStylePropertyValue())
}
}) {
FormattedCodeSnippet(code = code)
Expand All @@ -248,16 +248,16 @@ private fun TitledCodeSample(title: String, code: String) {
fun FormattedCodeSnippet(code: String, language: String = "kotlin") {
Pre({
style {
property("max-height", value(25.em))
property("overflow", value("auto"))
property("max-height", 25.em.asStylePropertyValue())
property("overflow", "auto".asStylePropertyValue())
height(auto)
}
}) {
Code({
classes("language-$language", "hljs")
style {
property("font-family", value("'JetBrains Mono', monospace"))
property("tab-size", value(4))
property("font-family", "'JetBrains Mono', monospace".asStylePropertyValue())
property("tab-size", 4.asStylePropertyValue())
fontSize(10.pt)
backgroundColor(Color("transparent"))
}
Expand Down
4 changes: 2 additions & 2 deletions examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ private fun LanguageButton() {
onClick { window.alert("Oops! This feature is yet to be implemented") }
}) {
Img(src = "ic_lang.svg", attrs = { style {
property("padding-left", value(8.px))
property("padding-right", value(8.px))
property("padding-left", 8.px.asStylePropertyValue())
property("padding-right", 8.px.asStylePropertyValue())
}}) {}
Text("English")
}
Expand Down
10 changes: 5 additions & 5 deletions examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ fun Intro() {
classes(WtTexts.wtHero)
style {
display(DisplayStyle.InlineBlock)
property("white-space", value("nowrap"))
property("white-space", "nowrap".asStylePropertyValue())
}
}) {
Text("Web")
Expand Down Expand Up @@ -124,12 +124,12 @@ private fun IntroCodeSample() {
marginTop(24.px)
backgroundColor(Color.RGBA(39, 40, 44, 0.05))
borderRadius(8.px)
property("font-family", value("'JetBrains Mono', monospace"))
property("font-family", "'JetBrains Mono', monospace".asStylePropertyValue())
}
}) {
Div({
style {
property("padding", value("12px 16px"))
property("padding", "12px 16px".asStylePropertyValue())
}
}) {
FormattedCodeSnippet(
Expand Down Expand Up @@ -162,7 +162,7 @@ private fun IntroCodeSample() {
private fun IntroCodeSampleResult() {
Div({
style {
property("padding", value("12px 16px"))
property("padding", "12px 16px".asStylePropertyValue())
display(DisplayStyle.Flex)
flexDirection(FlexDirection.Row)
alignItems(AlignItems.Center)
Expand All @@ -171,7 +171,7 @@ private fun IntroCodeSampleResult() {
Span({
classes(WtTexts.wtText2)
style {
property("margin-right", value(8.px))
property("margin-right", 8.px.asStylePropertyValue())
}
}) {
Text("Result:")
Expand Down
6 changes: 3 additions & 3 deletions web/benchmark-core/src/jsMain/kotlin/com/sample/components/Layout.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ fun Layout(content: @Composable () -> Unit) {
flexDirection(FlexDirection.Column)
height(100.percent)
margin(0.px)
property("box-sizing", "border-box".asStylePropertyValue())
property("box-sizing", "border-box")
}
}
) {
Expand All @@ -32,8 +32,8 @@ fun MainContentLayout(content: @Composable () -> Unit) {
Main(
attrs = {
style {
property("flex", value("1 0 auto"))
property("box-sizing", value("border-box"))
property("flex", "1 0 auto")
property("box-sizing", "border-box")
}
}
) {
Expand Down
2 changes: 1 addition & 1 deletion web/benchmark-core/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ private fun CardWithList(card: CardWithListPresentation) {
}) {
card.list.forEachIndexed { ix, it ->
Li(attrs = {
style { property("padding-top", value(24.px)) }
style { property("padding-top", 24.px) }
}) { Text(it) }
}
}
Expand Down
6 changes: 3 additions & 3 deletions web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
display(DisplayStyle.InlineBlock)
property("width", SwitcherVariables.labelWidth.value(56.px))
property("padding", SwitcherVariables.labelPadding.value(10.px))
property("transition", value("all 0.3s"))
property("text-align", value("center"))
property("box-sizing", value("border-box"))
property("transition", "all 0.3s")
property("text-align", "center")
property("box-sizing", "border-box")

border {
style(LineStyle.Solid)
Expand Down
10 changes: 5 additions & 5 deletions web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ private fun TitledCodeSample(title: String, code: String) {
style {
backgroundColor(Color.RGBA(39, 40, 44, 0.05))
borderRadius(8.px, 8.px, 8.px)
property("padding", value("12px 16px"))
property("padding", "12px 16px")
}
}
) {
Expand All @@ -253,17 +253,17 @@ private fun TitledCodeSample(title: String, code: String) {
fun FormattedCodeSnippet(code: String, language: String = "kotlin") {
Pre(attrs = {
style {
property("max-height", value(25.em))
property("overflow", value("auto"))
property("max-height", 25.em)
property("overflow", "auto")
height(auto)
}
}) {
Code(
attrs = {
classes("language-$language", "hljs")
style {
property("font-family", value("'JetBrains Mono', monospace"))
property("tab-size", value(4))
property("font-family", "'JetBrains Mono', monospace")
property("tab-size", 4)
fontSize(10.pt)
backgroundColor(Color("transparent"))
}
Expand Down
6 changes: 3 additions & 3 deletions web/benchmark-core/src/jsMain/kotlin/com/sample/content/Footer.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ fun PageFooter() {
Footer(attrs = {
style {
flexShrink(0)
property("box-sizing", value("border-box"))
property("box-sizing", "border-box")
}
}) {
Section(attrs = {
classes(WtSections.wtSectionBgGrayDark)
style {
property("padding", value("24px 0"))
property("padding", "24px 0")
}
}) {
Div(attrs = { classes(WtContainer.wtContainer) }) {
Expand Down Expand Up @@ -61,7 +61,7 @@ private fun CopyrightInFooter() {
style {
justifyContent(JustifyContent.SpaceEvenly)
flexWrap(FlexWrap.Wrap)
property("padding", value("0px 12px"))
property("padding", "0px 12px")
}
}) {
Span(attrs = {
Expand Down
6 changes: 3 additions & 3 deletions web/benchmark-core/src/jsMain/kotlin/com/sample/content/Header.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,13 @@ private fun LanguageButton() {
classes(WtTexts.wtButton, WtTexts.wtLangButton)
onClick { window.alert("Oops! This feature is yet to be implemented") }
style {
property("cursor", value("pointer"))
property("cursor", "pointer")
}
}) {
Img(src = "ic_lang.svg", attrs = {
style {
property("padding-left", value(8.px))
property("padding-right", value(8.px))
property("padding-left", 8.px)
property("padding-right", 8.px)
}
})
Text("English")
Expand Down
10 changes: 5 additions & 5 deletions web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ fun Intro() {
classes(WtTexts.wtHero)
style {
display(DisplayStyle.InlineBlock)
property("white-space", value("nowrap"))
property("white-space", "nowrap")
}
}) {
Text("Web")
Expand Down Expand Up @@ -121,12 +121,12 @@ private fun IntroCodeSample() {
marginTop(24.px)
backgroundColor(Color.RGBA(39, 40, 44, 0.05))
borderRadius(8.px)
property("font-family", value("'JetBrains Mono', monospace"))
property("font-family", "'JetBrains Mono', monospace")
}
}) {
Div(attrs = {
style {
property("padding", value("12px 16px"))
property("padding", "12px 16px")
}
}) {
FormattedCodeSnippet(
Expand Down Expand Up @@ -159,7 +159,7 @@ private fun IntroCodeSample() {
private fun IntroCodeSampleResult() {
Div(attrs = {
style {
property("padding", value("12px 16px"))
property("padding", "12px 16px")
display(DisplayStyle.Flex)
flexDirection(FlexDirection.Row)
alignItems(AlignItems.Center)
Expand All @@ -169,7 +169,7 @@ private fun IntroCodeSampleResult() {
attrs = {
classes(WtTexts.wtText2)
style {
property("margin-right", value(8.px))
property("margin-right", 8.px)
}
},
) {
Expand Down
18 changes: 9 additions & 9 deletions web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@ object AppCSSVariables : CSSVariables {

object AppStylesheet : StyleSheet() {
val composeLogo by style {
property("max-width", value(100.percent))
property("max-width", 100.percent)
}

val composeTitleTag by style {
property("padding", value("5px 12px"))
property("letter-spacing", value("normal"))
property("font-weight", value(400))
property("line-height", value(24.px))
property("padding", "5px 12px")
property("letter-spacing", "normal")
property("font-weight", 400)
property("line-height", 24.px)

position(Position.Relative)
top((-32).px)
Expand All @@ -54,7 +54,7 @@ object AppStylesheet : StyleSheet() {
"label, a, button" style {
property(
"font-family",
value("system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif")
"system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif"
)
}

Expand Down Expand Up @@ -83,13 +83,13 @@ object AppStylesheet : StyleSheet() {

property(
"flex-basis",
value("calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)")
"calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)"
)
property(
"max-width",
value("calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)")
"calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)"
)
property("box-sizing", value("border-box"))
property("box-sizing", "border-box")
}
}
}
52 changes: 33 additions & 19 deletions web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,37 @@
package com.sample.style

import androidx.compose.runtime.Composable
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.*
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.*
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.maxWidth
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) {
val wtCard by style {
display(DisplayStyle.Flex)
flexDirection(FlexDirection.Column)
border(1.px, LineStyle.Solid)
property("min-height", value(0))
property("box-sizing", value("border-box"))
property("min-height", 0)
property("box-sizing", "border-box")
}

val wtCardThemeLight by style {
border(color = Color.RGBA(39,40,44,.2))
border(color = Color.RGBA(39, 40, 44, .2))
color("#27282c")
backgroundColor("white")
}
Expand All @@ -27,28 +41,28 @@ object WtCards : StyleSheet(AppStylesheet) {
color(Color.RGBA(255, 255, 255, 0.6))
border(0.px)
}

val wtCardSection by style {
position(Position.Relative)
property("overflow", value("auto"))
property("flex", value("1 1 auto"))
property("min-height", value(0))
property("box-sizing", value("border-box"))
property("padding", value("24px 32px"))
property("overflow", "auto")
property("flex", "1 1 auto")
property("min-height", 0)
property("box-sizing", "border-box")
property("padding", "24px 32px")

media(maxWidth(640.px)) {
self style { padding(16.px) }
}
}

val wtVerticalFlex by style {
display(DisplayStyle.Flex)
flexDirection(FlexDirection.Column)
alignItems(AlignItems.FlexStart)
}

val wtVerticalFlexGrow by style {
flexGrow(1)
property("max-width", value(100.percent))
property("max-width", 100.percent)
}
}
Loading

0 comments on commit 9698698

Please sign in to comment.