From 9654149ec74379df770e5fdd2875bdc00a753e96 Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Fri, 30 Jul 2021 16:24:41 +0200 Subject: [PATCH] Update web_landing sample and web_langin example with fresher CSS API --- examples/web_landing/build.gradle.kts | 1 + .../kotlin/com/sample/components/Layout.kt | 6 +- .../content/AboutComposeWebLibsSection.kt | 3 +- .../com/sample/content/CodeSamplesSwitcher.kt | 8 +- .../kotlin/com/sample/content/CodeSnippets.kt | 6 +- .../kotlin/com/sample/content/Footer.kt | 6 +- .../kotlin/com/sample/content/Header.kt | 4 +- .../kotlin/com/sample/content/IntroSection.kt | 4 +- .../kotlin/com/sample/style/Stylesheet.kt | 18 ++--- .../jsMain/kotlin/com/sample/style/WtCard.kt | 16 ++-- .../jsMain/kotlin/com/sample/style/WtCol.kt | 6 +- .../kotlin/com/sample/style/WtContainer.kt | 26 +++---- .../jsMain/kotlin/com/sample/style/WtRow.kt | 2 +- .../kotlin/com/sample/style/WtSection.kt | 6 +- .../jsMain/kotlin/com/sample/style/WtText.kt | 78 +++++++++---------- .../kotlin/com/sample/components/Layout.kt | 6 +- .../content/AboutComposeWebLibsSection.kt | 3 +- .../com/sample/content/CodeSamplesSwitcher.kt | 8 +- .../kotlin/com/sample/content/CodeSnippets.kt | 6 +- .../kotlin/com/sample/content/Footer.kt | 6 +- .../kotlin/com/sample/content/Header.kt | 4 +- .../kotlin/com/sample/content/IntroSection.kt | 4 +- .../kotlin/com/sample/style/Stylesheet.kt | 18 ++--- .../jsMain/kotlin/com/sample/style/WtCard.kt | 16 ++-- .../jsMain/kotlin/com/sample/style/WtCol.kt | 6 +- .../kotlin/com/sample/style/WtContainer.kt | 26 +++---- .../jsMain/kotlin/com/sample/style/WtRow.kt | 2 +- .../kotlin/com/sample/style/WtSection.kt | 6 +- .../jsMain/kotlin/com/sample/style/WtText.kt | 78 +++++++++---------- 29 files changed, 191 insertions(+), 188 deletions(-) diff --git a/examples/web_landing/build.gradle.kts b/examples/web_landing/build.gradle.kts index c9cb9ada78..26f2beaf05 100644 --- a/examples/web_landing/build.gradle.kts +++ b/examples/web_landing/build.gradle.kts @@ -26,3 +26,4 @@ kotlin { } } } + diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt index de4887da04..90293df5ed 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt @@ -17,7 +17,7 @@ fun Layout(content: @Composable () -> Unit) { flexDirection(FlexDirection.Column) height(100.percent) margin(0.px) - property("box-sizing", "border-box") + boxSizing("border-box") } }) { content() @@ -28,8 +28,8 @@ fun Layout(content: @Composable () -> Unit) { fun MainContentLayout(content: @Composable () -> Unit) { Main({ style { - property("flex", "1 0 auto") - property("box-sizing", "border-box") + flex("1 0 auto") + boxSizing("border-box") } }) { content() diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt index cc5d810eb0..56bb49edb2 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt @@ -8,6 +8,7 @@ import com.sample.components.Card import com.sample.components.ContainerInSection import com.sample.components.LinkOnCard import com.sample.style.* +import org.jetbrains.compose.web.css.paddingTop data class CardWithListPresentation( val title: String, @@ -87,7 +88,7 @@ private fun CardWithList(card: CardWithListPresentation) { card.list.forEachIndexed { _, it -> Li({ style { - property("padding-top", 24.px) + paddingTop(24.px) } }) { Text(it) } } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt index 89d907dd27..d1e2095146 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt @@ -32,11 +32,11 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) { descendant(self, CSSSelector.Type("label")) style { display(DisplayStyle.InlineBlock) - property("width", SwitcherVariables.labelWidth.value(56.px)) - property("padding", SwitcherVariables.labelPadding.value(10.px)) + width(SwitcherVariables.labelWidth.value(56.px)) + padding(SwitcherVariables.labelPadding.value(10.px)) property("transition", "all 0.3s") - property("text-align", "center") - property("box-sizing", "border-box") + textAlign("center") + boxSizing("border-box") border { style(LineStyle.Solid) diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt index 35111abca0..27e9a062a1 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt @@ -238,7 +238,7 @@ private fun TitledCodeSample(title: String, code: String) { style { backgroundColor(rgba(39, 40, 44, 0.05)) borderRadius(8.px, 8.px, 8.px) - property("padding", "12px 16px") + padding(12.px, 16.px) } }) { FormattedCodeSnippet(code = code) @@ -249,8 +249,8 @@ private fun TitledCodeSample(title: String, code: String) { fun FormattedCodeSnippet(code: String, language: String = "kotlin") { Pre({ style { - property("max-height", 25.em) - property("overflow", "auto") + maxHeight(25.em) + overflow("auto") height(auto) } }) { diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt index 2d565f7c7b..6afc3e72d9 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt @@ -13,13 +13,13 @@ fun PageFooter() { Footer({ style { flexShrink(0) - property("box-sizing", "border-box") + boxSizing("border-box") } }) { Section({ classes(WtSections.wtSectionBgGrayDark) style { - property("padding", "24px 0") + padding(24.px, 0.px) } }) { Div({ classes(WtContainer.wtContainer) }) { @@ -61,7 +61,7 @@ private fun CopyrightInFooter() { style { justifyContent(JustifyContent.SpaceEvenly) flexWrap(FlexWrap.Wrap) - property("padding", "0px 12px") + padding(0.px, 12.px) } }) { Span({ diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt index dadb0a1d06..169a9e0a6e 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt @@ -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", 8.px) - property("padding-right", 8.px) + paddingLeft(8.px) + paddingRight(8.px) }}) Text("English") } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt index e76f4206c3..54f1bdb87b 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt @@ -40,7 +40,7 @@ fun Intro() { classes(WtTexts.wtHero) style { display(DisplayStyle.InlineBlock) - property("white-space", "nowrap") + whiteSpace("nowrap") } }) { Text("Web") @@ -170,7 +170,7 @@ private fun IntroCodeSampleResult() { Span({ classes(WtTexts.wtText2) style { - property("margin-right", 8.px) + marginRight(8.px) } }) { Text("Result:") diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt index 0450ebd6a2..58b2978474 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt @@ -26,21 +26,21 @@ object AppCSSVariables { object AppStylesheet : StyleSheet() { val composeLogo by style { - property("max-width", 100.percent) + maxWidth(100.percent) } val composeTitleTag by style { - property("padding", "5px 12px") - property("letter-spacing", "normal") - property("font-weight", 400) - property("line-height", 24.px) + padding(5.px, 12.px) + letterSpacing("normal") + fontWeight(400) + lineHeight(24.px) position(Position.Relative) top((-32).px) marginLeft(8.px) fontSize(15.px) backgroundColor(rgba(39, 40, 44, .05)) - color(rgba(39,40,44,.7)) + color(rgba(39, 40, 44, .7)) borderRadius(4.px, 4.px, 4.px) media(mediaMaxWidth(640.px)) { @@ -78,8 +78,8 @@ object AppStylesheet : StyleSheet() { value = "wtCol", operator = CSSSelector.Attribute.Operator.Contains ) style { - property("margin-right", AppCSSVariables.wtHorizontalLayoutGutter.value()) - property("margin-left", AppCSSVariables.wtHorizontalLayoutGutter.value()) + marginRight(AppCSSVariables.wtHorizontalLayoutGutter.value()) + marginLeft(AppCSSVariables.wtHorizontalLayoutGutter.value()) property( "flex-basis", @@ -89,7 +89,7 @@ object AppStylesheet : StyleSheet() { "max-width", "calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)" ) - property("box-sizing", "border-box") + boxSizing("border-box") } } } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt index 7c39c9e39a..f7407bf1aa 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt @@ -7,8 +7,8 @@ object WtCards : StyleSheet(AppStylesheet) { display(DisplayStyle.Flex) flexDirection(FlexDirection.Column) border(1.px, LineStyle.Solid) - property("min-height", 0) - property("box-sizing", "border-box") + minHeight(0.px) + boxSizing("border-box") } val wtCardThemeLight by style { @@ -25,11 +25,11 @@ object WtCards : StyleSheet(AppStylesheet) { val wtCardSection by style { position(Position.Relative) - property("overflow", "auto") - property("flex", "1 1 auto") - property("min-height", 0) - property("box-sizing", "border-box") - property("padding", "24px 32px") + overflow("auto") + flex( "1 1 auto") + minHeight( 0.px) + boxSizing("border-box") + padding(24.px, 32.px) media(mediaMaxWidth(640.px)) { self style { padding(16.px) } @@ -44,6 +44,6 @@ object WtCards : StyleSheet(AppStylesheet) { val wtVerticalFlexGrow by style { flexGrow(1) - property("max-width", 100.percent) + maxWidth(100.percent) } } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt index 6be3f12ab6..f8e5e428fe 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt @@ -119,19 +119,19 @@ object WtCols : StyleSheet(AppStylesheet) { forMaxWidth(640.px) { AppCSSVariables.wtColCount(0) flexGrow(1) - property("max-width", 100.percent) + maxWidth(100.percent) } } val wtColAutoFill by style { AppCSSVariables.wtColCount(0) flexGrow(1) - property("max-width", 100.percent) + maxWidth(100.percent) } val wtColInline by style { AppCSSVariables.wtColCount(0) - property("max-width", 100.percent) + maxWidth(100.percent) property("flex-basis", "auto") } } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt index 187cf346e9..c9fdb011cb 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt @@ -6,32 +6,32 @@ object WtContainer : StyleSheet(AppStylesheet) { val wtContainer by style { property("margin-left", "auto") property("margin-right", "auto") - property("box-sizing", "border-box") - property("padding-left", 22.px) - property("padding-right", 22.px) - property("max-width", 1276.px) + boxSizing("border-box") + paddingLeft(22.px) + paddingRight(22.px) + maxWidth(1276.px) media(mediaMaxWidth(640.px)) { self style { - property("max-width", 100.percent) - property("padding-left", 16.px) - property("padding-right", 16.px) + maxWidth(100.percent) + paddingLeft(6.px) + paddingRight(16.px) } } media(mediaMaxWidth(1276.px)) { self style { - property("max-width", 996.px) - property("padding-left", 22.px) - property("padding-right", 22.px) + maxWidth(996.px) + paddingLeft(2.px) + paddingRight(22.px) } } media(mediaMaxWidth(1000.px)) { self style { - property("max-width", 100.percent) - property("padding-left", 22.px) - property("padding-right", 22.px) + maxWidth(100.percent) + paddingLeft(2.px) + paddingRight(22.px) } } } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt index bc6dc626dc..5980a763d1 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt @@ -17,7 +17,7 @@ object WtRows : StyleSheet(AppStylesheet) { "margin-left", "calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})" ) - property("box-sizing", "border-box") + boxSizing("border-box") } val wtRowSizeM by style { diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt index 93580a690a..9ac4096ee2 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt @@ -5,9 +5,9 @@ import org.jetbrains.compose.web.css.* object WtSections : StyleSheet(AppStylesheet) { val wtSection by style { - property("box-sizing", "border-box") - property("padding-bottom", 96.px) - property("padding-top", 1.px) + boxSizing("border-box") + paddingBottom(96.px) + paddingTop(1.px) property( propertyName = "padding-bottom", value = "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})" diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt index 90a1410b2b..8fa22c4d57 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt @@ -8,11 +8,11 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtHero by style { color(Color("#27282c")) fontSize(60.px) - property("font-size", AppCSSVariables.wtHeroFontSize.value(60.px)) - property("letter-spacing", (-1.5).px) - property("font-weight", 900) - property("line-height", 64.px) - property("line-height", AppCSSVariables.wtHeroLineHeight.value(64.px)) + fontSize(AppCSSVariables.wtHeroFontSize.value(60.px)) + letterSpacing((-1.5).px) + fontWeight(900) + lineHeight(64.px) + lineHeight(AppCSSVariables.wtHeroLineHeight.value(64.px)) media(mediaMaxWidth(640.px)) { self style { @@ -30,11 +30,11 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtSubtitle2 by style { color(Color("#27282c")) fontSize(28.px) - property("font-size", AppCSSVariables.wtSubtitle2FontSize.value(28.px)) - property("letter-spacing", "normal") - property("font-weight", 300) - property("line-height", 40.px) - property("line-height", AppCSSVariables.wtSubtitle2LineHeight.value(40.px)) + fontSize(AppCSSVariables.wtSubtitle2FontSize.value(28.px)) + letterSpacing("normal") + fontWeight(300) + lineHeight(40.px) + lineHeight(AppCSSVariables.wtSubtitle2LineHeight.value(40.px)) media(mediaMaxWidth(640.px)) { self style { @@ -52,9 +52,9 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtText1 by style { color(rgba(39, 40, 44, .7)) fontSize(18.px) - property("letter-spacing", "normal") - property("font-weight", 400) - property("line-height", 28.px) + letterSpacing("normal") + fontWeight(400) + lineHeight(28.px) property( "font-family", @@ -69,9 +69,9 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtText2 by style { color(rgba(39, 40, 44, .7)) fontSize(15.px) - property("letter-spacing", "normal") - property("font-weight", 400) - property("line-height", 24.px) + letterSpacing("normal") + fontWeight(400) + lineHeight(24.px) property( "font-family", @@ -82,9 +82,9 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtText3 by style { color(rgba(39, 40, 44, .7)) fontSize(12.px) - property("letter-spacing", "normal") - property("font-weight", 400) - property("line-height", 16.px) + letterSpacing("normal") + fontWeight(400) + lineHeight(16.px) property( "font-family", @@ -117,11 +117,11 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtH2 by style { color(Color("#27282c")) fontSize(31.px) - property("font-size", AppCSSVariables.wtH2FontSize.value(31.px)) - property("letter-spacing", (-.5).px) - property("font-weight", 700) - property("line-height", 40.px) - property("line-height", 40.px) + fontSize(AppCSSVariables.wtH2FontSize.value(31.px)) + letterSpacing((-.5).px) + fontWeight(700) + lineHeight(40.px) + lineHeight(40.px) media(mediaMaxWidth(640.px)) { self style { @@ -143,11 +143,11 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtH3 by style { color(Color("#27282c")) fontSize(21.px) - property("font-size", AppCSSVariables.wtH3FontSize.value(20.px)) - property("letter-spacing", "normal") - property("font-weight", 700) - property("line-height", 28.px) - property("line-height", AppCSSVariables.wtH3LineHeight.value(28.px)) + fontSize(AppCSSVariables.wtH3FontSize.value(20.px)) + letterSpacing("normal") + fontWeight(700) + lineHeight(28.px) + lineHeight(AppCSSVariables.wtH3LineHeight.value(28.px)) property( "font-family", @@ -164,11 +164,11 @@ object WtTexts : StyleSheet(AppStylesheet) { backgroundColor(Color("#167dff")) fontSize(15.px) display(DisplayStyle.InlineBlock) - property("text-decoration", "none") - property("border-radius", "24px") - property("padding", "12px 32px") - property("line-height", 24.px) - property("font-weight", 400) + textDecoration("none") + borderRadius(24.px) + padding(12.px, 32.px) + lineHeight(24.px) + fontWeight(400) property("width", "fit-content") hover(self) style { @@ -183,7 +183,7 @@ object WtTexts : StyleSheet(AppStylesheet) { backgroundColor(Color("transparent")) border(0.px) - property("outline", "none") + outline("none") hover(self) style { backgroundColor(rgba(255, 255, 255, 0.1)) @@ -200,7 +200,7 @@ object WtTexts : StyleSheet(AppStylesheet) { } val wtSocialButtonItem by style { - property("margin-right", 16.px) + marginRight(16.px) marginLeft(16.px) padding(12.px) backgroundColor(Color("transparent")) @@ -208,13 +208,13 @@ object WtTexts : StyleSheet(AppStylesheet) { hover(self) style { backgroundColor(rgba(255, 255, 255, 0.1)) - property("border-radius", "24px") + borderRadius(24.px) } media(mediaMaxWidth(640.px)) { self style { - property("margin-right", 8.px) - property("margin-left", 8.px) + marginRight(8.px) + marginLeft(8.px) } } } diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt index de4887da04..90293df5ed 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt @@ -17,7 +17,7 @@ fun Layout(content: @Composable () -> Unit) { flexDirection(FlexDirection.Column) height(100.percent) margin(0.px) - property("box-sizing", "border-box") + boxSizing("border-box") } }) { content() @@ -28,8 +28,8 @@ fun Layout(content: @Composable () -> Unit) { fun MainContentLayout(content: @Composable () -> Unit) { Main({ style { - property("flex", "1 0 auto") - property("box-sizing", "border-box") + flex("1 0 auto") + boxSizing("border-box") } }) { content() diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt index cc5d810eb0..56bb49edb2 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt @@ -8,6 +8,7 @@ import com.sample.components.Card import com.sample.components.ContainerInSection import com.sample.components.LinkOnCard import com.sample.style.* +import org.jetbrains.compose.web.css.paddingTop data class CardWithListPresentation( val title: String, @@ -87,7 +88,7 @@ private fun CardWithList(card: CardWithListPresentation) { card.list.forEachIndexed { _, it -> Li({ style { - property("padding-top", 24.px) + paddingTop(24.px) } }) { Text(it) } } diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt index 89d907dd27..d1e2095146 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt @@ -32,11 +32,11 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) { descendant(self, CSSSelector.Type("label")) style { display(DisplayStyle.InlineBlock) - property("width", SwitcherVariables.labelWidth.value(56.px)) - property("padding", SwitcherVariables.labelPadding.value(10.px)) + width(SwitcherVariables.labelWidth.value(56.px)) + padding(SwitcherVariables.labelPadding.value(10.px)) property("transition", "all 0.3s") - property("text-align", "center") - property("box-sizing", "border-box") + textAlign("center") + boxSizing("border-box") border { style(LineStyle.Solid) diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt index 35111abca0..27e9a062a1 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt @@ -238,7 +238,7 @@ private fun TitledCodeSample(title: String, code: String) { style { backgroundColor(rgba(39, 40, 44, 0.05)) borderRadius(8.px, 8.px, 8.px) - property("padding", "12px 16px") + padding(12.px, 16.px) } }) { FormattedCodeSnippet(code = code) @@ -249,8 +249,8 @@ private fun TitledCodeSample(title: String, code: String) { fun FormattedCodeSnippet(code: String, language: String = "kotlin") { Pre({ style { - property("max-height", 25.em) - property("overflow", "auto") + maxHeight(25.em) + overflow("auto") height(auto) } }) { diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt index 2d565f7c7b..6afc3e72d9 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt @@ -13,13 +13,13 @@ fun PageFooter() { Footer({ style { flexShrink(0) - property("box-sizing", "border-box") + boxSizing("border-box") } }) { Section({ classes(WtSections.wtSectionBgGrayDark) style { - property("padding", "24px 0") + padding(24.px, 0.px) } }) { Div({ classes(WtContainer.wtContainer) }) { @@ -61,7 +61,7 @@ private fun CopyrightInFooter() { style { justifyContent(JustifyContent.SpaceEvenly) flexWrap(FlexWrap.Wrap) - property("padding", "0px 12px") + padding(0.px, 12.px) } }) { Span({ diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt index dadb0a1d06..169a9e0a6e 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt @@ -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", 8.px) - property("padding-right", 8.px) + paddingLeft(8.px) + paddingRight(8.px) }}) Text("English") } diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt index e76f4206c3..54f1bdb87b 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt @@ -40,7 +40,7 @@ fun Intro() { classes(WtTexts.wtHero) style { display(DisplayStyle.InlineBlock) - property("white-space", "nowrap") + whiteSpace("nowrap") } }) { Text("Web") @@ -170,7 +170,7 @@ private fun IntroCodeSampleResult() { Span({ classes(WtTexts.wtText2) style { - property("margin-right", 8.px) + marginRight(8.px) } }) { Text("Result:") diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt index 0450ebd6a2..58b2978474 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt @@ -26,21 +26,21 @@ object AppCSSVariables { object AppStylesheet : StyleSheet() { val composeLogo by style { - property("max-width", 100.percent) + maxWidth(100.percent) } val composeTitleTag by style { - property("padding", "5px 12px") - property("letter-spacing", "normal") - property("font-weight", 400) - property("line-height", 24.px) + padding(5.px, 12.px) + letterSpacing("normal") + fontWeight(400) + lineHeight(24.px) position(Position.Relative) top((-32).px) marginLeft(8.px) fontSize(15.px) backgroundColor(rgba(39, 40, 44, .05)) - color(rgba(39,40,44,.7)) + color(rgba(39, 40, 44, .7)) borderRadius(4.px, 4.px, 4.px) media(mediaMaxWidth(640.px)) { @@ -78,8 +78,8 @@ object AppStylesheet : StyleSheet() { value = "wtCol", operator = CSSSelector.Attribute.Operator.Contains ) style { - property("margin-right", AppCSSVariables.wtHorizontalLayoutGutter.value()) - property("margin-left", AppCSSVariables.wtHorizontalLayoutGutter.value()) + marginRight(AppCSSVariables.wtHorizontalLayoutGutter.value()) + marginLeft(AppCSSVariables.wtHorizontalLayoutGutter.value()) property( "flex-basis", @@ -89,7 +89,7 @@ object AppStylesheet : StyleSheet() { "max-width", "calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)" ) - property("box-sizing", "border-box") + boxSizing("border-box") } } } diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt index 7c39c9e39a..f7407bf1aa 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt @@ -7,8 +7,8 @@ object WtCards : StyleSheet(AppStylesheet) { display(DisplayStyle.Flex) flexDirection(FlexDirection.Column) border(1.px, LineStyle.Solid) - property("min-height", 0) - property("box-sizing", "border-box") + minHeight(0.px) + boxSizing("border-box") } val wtCardThemeLight by style { @@ -25,11 +25,11 @@ object WtCards : StyleSheet(AppStylesheet) { val wtCardSection by style { position(Position.Relative) - property("overflow", "auto") - property("flex", "1 1 auto") - property("min-height", 0) - property("box-sizing", "border-box") - property("padding", "24px 32px") + overflow("auto") + flex( "1 1 auto") + minHeight( 0.px) + boxSizing("border-box") + padding(24.px, 32.px) media(mediaMaxWidth(640.px)) { self style { padding(16.px) } @@ -44,6 +44,6 @@ object WtCards : StyleSheet(AppStylesheet) { val wtVerticalFlexGrow by style { flexGrow(1) - property("max-width", 100.percent) + maxWidth(100.percent) } } diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt index 6be3f12ab6..f8e5e428fe 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt @@ -119,19 +119,19 @@ object WtCols : StyleSheet(AppStylesheet) { forMaxWidth(640.px) { AppCSSVariables.wtColCount(0) flexGrow(1) - property("max-width", 100.percent) + maxWidth(100.percent) } } val wtColAutoFill by style { AppCSSVariables.wtColCount(0) flexGrow(1) - property("max-width", 100.percent) + maxWidth(100.percent) } val wtColInline by style { AppCSSVariables.wtColCount(0) - property("max-width", 100.percent) + maxWidth(100.percent) property("flex-basis", "auto") } } diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt index 187cf346e9..c9fdb011cb 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt @@ -6,32 +6,32 @@ object WtContainer : StyleSheet(AppStylesheet) { val wtContainer by style { property("margin-left", "auto") property("margin-right", "auto") - property("box-sizing", "border-box") - property("padding-left", 22.px) - property("padding-right", 22.px) - property("max-width", 1276.px) + boxSizing("border-box") + paddingLeft(22.px) + paddingRight(22.px) + maxWidth(1276.px) media(mediaMaxWidth(640.px)) { self style { - property("max-width", 100.percent) - property("padding-left", 16.px) - property("padding-right", 16.px) + maxWidth(100.percent) + paddingLeft(6.px) + paddingRight(16.px) } } media(mediaMaxWidth(1276.px)) { self style { - property("max-width", 996.px) - property("padding-left", 22.px) - property("padding-right", 22.px) + maxWidth(996.px) + paddingLeft(2.px) + paddingRight(22.px) } } media(mediaMaxWidth(1000.px)) { self style { - property("max-width", 100.percent) - property("padding-left", 22.px) - property("padding-right", 22.px) + maxWidth(100.percent) + paddingLeft(2.px) + paddingRight(22.px) } } } diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt index bc6dc626dc..5980a763d1 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt @@ -17,7 +17,7 @@ object WtRows : StyleSheet(AppStylesheet) { "margin-left", "calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})" ) - property("box-sizing", "border-box") + boxSizing("border-box") } val wtRowSizeM by style { diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt index 93580a690a..9ac4096ee2 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt @@ -5,9 +5,9 @@ import org.jetbrains.compose.web.css.* object WtSections : StyleSheet(AppStylesheet) { val wtSection by style { - property("box-sizing", "border-box") - property("padding-bottom", 96.px) - property("padding-top", 1.px) + boxSizing("border-box") + paddingBottom(96.px) + paddingTop(1.px) property( propertyName = "padding-bottom", value = "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})" diff --git a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt index 90a1410b2b..8fa22c4d57 100644 --- a/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt +++ b/web/samples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt @@ -8,11 +8,11 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtHero by style { color(Color("#27282c")) fontSize(60.px) - property("font-size", AppCSSVariables.wtHeroFontSize.value(60.px)) - property("letter-spacing", (-1.5).px) - property("font-weight", 900) - property("line-height", 64.px) - property("line-height", AppCSSVariables.wtHeroLineHeight.value(64.px)) + fontSize(AppCSSVariables.wtHeroFontSize.value(60.px)) + letterSpacing((-1.5).px) + fontWeight(900) + lineHeight(64.px) + lineHeight(AppCSSVariables.wtHeroLineHeight.value(64.px)) media(mediaMaxWidth(640.px)) { self style { @@ -30,11 +30,11 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtSubtitle2 by style { color(Color("#27282c")) fontSize(28.px) - property("font-size", AppCSSVariables.wtSubtitle2FontSize.value(28.px)) - property("letter-spacing", "normal") - property("font-weight", 300) - property("line-height", 40.px) - property("line-height", AppCSSVariables.wtSubtitle2LineHeight.value(40.px)) + fontSize(AppCSSVariables.wtSubtitle2FontSize.value(28.px)) + letterSpacing("normal") + fontWeight(300) + lineHeight(40.px) + lineHeight(AppCSSVariables.wtSubtitle2LineHeight.value(40.px)) media(mediaMaxWidth(640.px)) { self style { @@ -52,9 +52,9 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtText1 by style { color(rgba(39, 40, 44, .7)) fontSize(18.px) - property("letter-spacing", "normal") - property("font-weight", 400) - property("line-height", 28.px) + letterSpacing("normal") + fontWeight(400) + lineHeight(28.px) property( "font-family", @@ -69,9 +69,9 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtText2 by style { color(rgba(39, 40, 44, .7)) fontSize(15.px) - property("letter-spacing", "normal") - property("font-weight", 400) - property("line-height", 24.px) + letterSpacing("normal") + fontWeight(400) + lineHeight(24.px) property( "font-family", @@ -82,9 +82,9 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtText3 by style { color(rgba(39, 40, 44, .7)) fontSize(12.px) - property("letter-spacing", "normal") - property("font-weight", 400) - property("line-height", 16.px) + letterSpacing("normal") + fontWeight(400) + lineHeight(16.px) property( "font-family", @@ -117,11 +117,11 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtH2 by style { color(Color("#27282c")) fontSize(31.px) - property("font-size", AppCSSVariables.wtH2FontSize.value(31.px)) - property("letter-spacing", (-.5).px) - property("font-weight", 700) - property("line-height", 40.px) - property("line-height", 40.px) + fontSize(AppCSSVariables.wtH2FontSize.value(31.px)) + letterSpacing((-.5).px) + fontWeight(700) + lineHeight(40.px) + lineHeight(40.px) media(mediaMaxWidth(640.px)) { self style { @@ -143,11 +143,11 @@ object WtTexts : StyleSheet(AppStylesheet) { val wtH3 by style { color(Color("#27282c")) fontSize(21.px) - property("font-size", AppCSSVariables.wtH3FontSize.value(20.px)) - property("letter-spacing", "normal") - property("font-weight", 700) - property("line-height", 28.px) - property("line-height", AppCSSVariables.wtH3LineHeight.value(28.px)) + fontSize(AppCSSVariables.wtH3FontSize.value(20.px)) + letterSpacing("normal") + fontWeight(700) + lineHeight(28.px) + lineHeight(AppCSSVariables.wtH3LineHeight.value(28.px)) property( "font-family", @@ -164,11 +164,11 @@ object WtTexts : StyleSheet(AppStylesheet) { backgroundColor(Color("#167dff")) fontSize(15.px) display(DisplayStyle.InlineBlock) - property("text-decoration", "none") - property("border-radius", "24px") - property("padding", "12px 32px") - property("line-height", 24.px) - property("font-weight", 400) + textDecoration("none") + borderRadius(24.px) + padding(12.px, 32.px) + lineHeight(24.px) + fontWeight(400) property("width", "fit-content") hover(self) style { @@ -183,7 +183,7 @@ object WtTexts : StyleSheet(AppStylesheet) { backgroundColor(Color("transparent")) border(0.px) - property("outline", "none") + outline("none") hover(self) style { backgroundColor(rgba(255, 255, 255, 0.1)) @@ -200,7 +200,7 @@ object WtTexts : StyleSheet(AppStylesheet) { } val wtSocialButtonItem by style { - property("margin-right", 16.px) + marginRight(16.px) marginLeft(16.px) padding(12.px) backgroundColor(Color("transparent")) @@ -208,13 +208,13 @@ object WtTexts : StyleSheet(AppStylesheet) { hover(self) style { backgroundColor(rgba(255, 255, 255, 0.1)) - property("border-radius", "24px") + borderRadius(24.px) } media(mediaMaxWidth(640.px)) { self style { - property("margin-right", 8.px) - property("margin-left", 8.px) + marginRight(8.px) + marginLeft(8.px) } } }