diff --git a/.gitignore b/.gitignore index 76802f1..f0b4e3e 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,5 @@ kotlin-js-store # Gradle ignores .gradle +# Kotlin ignores +.kotlin \ No newline at end of file diff --git a/gradle.properties b/gradle.properties index 7fc6f1f..36704cb 100644 --- a/gradle.properties +++ b/gradle.properties @@ -1 +1,2 @@ kotlin.code.style=official +org.gradle.configuration-cache=true \ No newline at end of file diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 186c62a..0f96add 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -1,9 +1,11 @@ [versions] -jetbrains-compose = "1.6.2" -kobweb = "0.17.3" -kotlin = "1.9.23" +jetbrains-compose = "1.7.1" +kobweb = "0.20.0" +kotlin = "2.1.0" [libraries] +compose-html-core = { module = "org.jetbrains.compose.html:html-core", version.ref = "jetbrains-compose" } +compose-runtime = { module = "org.jetbrains.compose.runtime:runtime", version.ref = "jetbrains-compose" } kobweb-api = { module = "com.varabyte.kobweb:kobweb-api", version.ref = "kobweb" } kobweb-core = { module = "com.varabyte.kobweb:kobweb-core ", version.ref = "kobweb" } kobweb-silk = { module = "com.varabyte.kobweb:kobweb-silk", version.ref = "kobweb" } @@ -13,7 +15,7 @@ silk-icons-fa = { module = "com.varabyte.kobwebx:silk-icons-fa", version.ref = " silk-icons-mdi = { module = "com.varabyte.kobwebx:silk-icons-mdi", version.ref = "kobweb" } [plugins] -jetbrains-compose = { id = "org.jetbrains.compose", version.ref = "jetbrains-compose" } +compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" } kobweb-application = { id = "com.varabyte.kobweb.application", version.ref = "kobweb" } kobweb-library = { id = "com.varabyte.kobweb.library", version.ref = "kobweb" } kobwebx-markdown = { id = "com.varabyte.kobwebx.markdown", version.ref = "kobweb" } diff --git a/gradle/wrapper/gradle-wrapper.jar b/gradle/wrapper/gradle-wrapper.jar index d64cd49..a4b76b9 100644 Binary files a/gradle/wrapper/gradle-wrapper.jar and b/gradle/wrapper/gradle-wrapper.jar differ diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties index b82aa23..cea7a79 100644 --- a/gradle/wrapper/gradle-wrapper.properties +++ b/gradle/wrapper/gradle-wrapper.properties @@ -1,6 +1,6 @@ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-bin.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-8.12-bin.zip networkTimeout=10000 validateDistributionUrl=true zipStoreBase=GRADLE_USER_HOME diff --git a/gradlew b/gradlew index 1aa94a4..f3b75f3 100755 --- a/gradlew +++ b/gradlew @@ -15,6 +15,8 @@ # See the License for the specific language governing permissions and # limitations under the License. # +# SPDX-License-Identifier: Apache-2.0 +# ############################################################################## # @@ -55,7 +57,7 @@ # Darwin, MinGW, and NonStop. # # (3) This script is generated from the Groovy template -# https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt +# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt # within the Gradle project. # # You can find Gradle at https://github.com/gradle/gradle/. @@ -84,7 +86,7 @@ done # shellcheck disable=SC2034 APP_BASE_NAME=${0##*/} # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036) -APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit +APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit # Use the maximum available, or set MAX_FD != -1 to use that value. MAX_FD=maximum diff --git a/gradlew.bat b/gradlew.bat index 93e3f59..9d21a21 100644 --- a/gradlew.bat +++ b/gradlew.bat @@ -13,6 +13,8 @@ @rem See the License for the specific language governing permissions and @rem limitations under the License. @rem +@rem SPDX-License-Identifier: Apache-2.0 +@rem @if "%DEBUG%"=="" @echo off @rem ########################################################################## @@ -43,11 +45,11 @@ set JAVA_EXE=java.exe %JAVA_EXE% -version >NUL 2>&1 if %ERRORLEVEL% equ 0 goto execute -echo. -echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. -echo. -echo Please set the JAVA_HOME variable in your environment to match the -echo location of your Java installation. +echo. 1>&2 +echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2 +echo. 1>&2 +echo Please set the JAVA_HOME variable in your environment to match the 1>&2 +echo location of your Java installation. 1>&2 goto fail @@ -57,11 +59,11 @@ set JAVA_EXE=%JAVA_HOME%/bin/java.exe if exist "%JAVA_EXE%" goto execute -echo. -echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% -echo. -echo Please set the JAVA_HOME variable in your environment to match the -echo location of your Java installation. +echo. 1>&2 +echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2 +echo. 1>&2 +echo Please set the JAVA_HOME variable in your environment to match the 1>&2 +echo location of your Java installation. 1>&2 goto fail diff --git a/site/.kobweb/conf.yaml b/site/.kobweb/conf.yaml index 7353c04..8d391fe 100644 --- a/site/.kobweb/conf.yaml +++ b/site/.kobweb/conf.yaml @@ -5,10 +5,10 @@ server: files: dev: contentRoot: "build/processedResources/js/main/public" - script: "build/dist/js/developmentExecutable/wiki.frozenblock.net.js" + script: "build/kotlin-webpack/js/developmentExecutable/wiki.frozenblock.net.js" api: "build/libs/wiki.frozenblock.net.jar" prod: - script: "build/dist/js/productionExecutable/wiki.frozenblock.net.js" + script: "build/kotlin-webpack/js/productionExecutable/wiki.frozenblock.net.js" siteRoot: ".kobweb/site" port: 8080 diff --git a/site/build.gradle.kts b/site/build.gradle.kts index a67fea5..b860a60 100644 --- a/site/build.gradle.kts +++ b/site/build.gradle.kts @@ -1,8 +1,9 @@ import com.varabyte.kobweb.gradle.application.util.configAsKobwebApplication +import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi plugins { alias(libs.plugins.kotlin.multiplatform) - alias(libs.plugins.jetbrains.compose) + alias(libs.plugins.compose.compiler) alias(libs.plugins.kobweb.application) alias(libs.plugins.kobwebx.markdown) } @@ -92,16 +93,21 @@ kotlin { // and the `jvmMain` source set below. configAsKobwebApplication("wiki.frozenblock.net" /*, includeServer = true*/) + js { + @OptIn(ExperimentalKotlinGradlePluginApi::class) + compilerOptions.target = "es2015" + } + sourceSets { val commonMain by getting { dependencies { - implementation(compose.runtime) + implementation(libs.compose.runtime) } } val jsMain by getting { dependencies { - implementation(compose.html.core) + implementation(libs.compose.html.core) implementation(libs.kobweb.core) implementation(libs.kobweb.silk) // This default template uses built-in SVG icons, but what's available is limited. diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/AppEntry.kt b/site/src/jsMain/kotlin/net/frozenblock/net/AppEntry.kt index 7ad6b8e..29805ec 100644 --- a/site/src/jsMain/kotlin/net/frozenblock/net/AppEntry.kt +++ b/site/src/jsMain/kotlin/net/frozenblock/net/AppEntry.kt @@ -8,10 +8,10 @@ import com.varabyte.kobweb.compose.ui.modifiers.scrollBehavior import com.varabyte.kobweb.core.App import com.varabyte.kobweb.silk.SilkApp import com.varabyte.kobweb.silk.components.layout.Surface -import com.varabyte.kobweb.silk.components.style.common.SmoothColorStyle -import com.varabyte.kobweb.silk.components.style.toModifier import com.varabyte.kobweb.silk.init.InitSilk import com.varabyte.kobweb.silk.init.InitSilkContext +import com.varabyte.kobweb.silk.style.common.SmoothColorStyle +import com.varabyte.kobweb.silk.style.toModifier import com.varabyte.kobweb.silk.theme.colors.ColorMode import kotlinx.browser.localStorage import org.jetbrains.compose.web.css.vh diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/AppStyles.kt b/site/src/jsMain/kotlin/net/frozenblock/net/AppStyles.kt index d90c915..586efac 100644 --- a/site/src/jsMain/kotlin/net/frozenblock/net/AppStyles.kt +++ b/site/src/jsMain/kotlin/net/frozenblock/net/AppStyles.kt @@ -7,15 +7,15 @@ import com.varabyte.kobweb.compose.ui.modifiers.* import com.varabyte.kobweb.silk.components.forms.ButtonStyle import com.varabyte.kobweb.silk.components.forms.ButtonVars import com.varabyte.kobweb.silk.components.layout.HorizontalDividerStyle -import com.varabyte.kobweb.silk.components.style.ComponentStyle -import com.varabyte.kobweb.silk.components.style.addVariantBase -import com.varabyte.kobweb.silk.components.style.base import com.varabyte.kobweb.silk.init.InitSilk import com.varabyte.kobweb.silk.init.InitSilkContext import com.varabyte.kobweb.silk.init.registerStyleBase +import com.varabyte.kobweb.silk.style.CssStyle +import com.varabyte.kobweb.silk.style.addVariantBase +import com.varabyte.kobweb.silk.style.base import com.varabyte.kobweb.silk.theme.colors.palette.color import com.varabyte.kobweb.silk.theme.colors.palette.toPalette -import com.varabyte.kobweb.silk.theme.modifyComponentStyleBase +import com.varabyte.kobweb.silk.theme.modifyStyleBase import org.jetbrains.compose.web.css.cssRem import org.jetbrains.compose.web.css.percent import org.jetbrains.compose.web.css.px @@ -33,29 +33,29 @@ fun initSiteStyles(ctx: InitSilkContext) { } // Silk dividers only extend 90% by default; we want full width dividers in our site - ctx.theme.modifyComponentStyleBase(HorizontalDividerStyle) { + ctx.theme.modifyStyleBase(HorizontalDividerStyle) { Modifier.fillMaxWidth() } } -val HeadlineTextStyle by ComponentStyle.base { +val HeadlineTextStyle = CssStyle.base { Modifier .fontSize(3.cssRem) .textAlign(TextAlign.Start) .lineHeight(1.2) //1.5x doesn't look as good on very large text } -val SubheadlineTextStyle by ComponentStyle.base { +val SubheadlineTextStyle = CssStyle.base { Modifier .fontSize(1.cssRem) .textAlign(TextAlign.Start) .color(colorMode.toPalette().color.toRgb().copyf(alpha = 0.8f)) } -val CircleButtonVariant by ButtonStyle.addVariantBase { +val CircleButtonVariant = ButtonStyle.addVariantBase { Modifier.padding(0.px).borderRadius(50.percent) } -val UncoloredButtonVariant by ButtonStyle.addVariantBase { +val UncoloredButtonVariant = ButtonStyle.addVariantBase { Modifier.setVariable(ButtonVars.BackgroundDefaultColor, Colors.Transparent) } diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/components/layouts/MarkdownLayout.kt b/site/src/jsMain/kotlin/net/frozenblock/net/components/layouts/MarkdownLayout.kt index d5faef3..08b5a73 100644 --- a/site/src/jsMain/kotlin/net/frozenblock/net/components/layouts/MarkdownLayout.kt +++ b/site/src/jsMain/kotlin/net/frozenblock/net/components/layouts/MarkdownLayout.kt @@ -14,8 +14,8 @@ import com.varabyte.kobweb.compose.ui.modifiers.* import com.varabyte.kobweb.core.rememberPageContext import com.varabyte.kobweb.silk.components.layout.HorizontalDivider import com.varabyte.kobweb.silk.components.navigation.Link -import com.varabyte.kobweb.silk.components.style.ComponentStyle -import com.varabyte.kobweb.silk.components.style.toModifier +import com.varabyte.kobweb.silk.style.CssStyle +import com.varabyte.kobweb.silk.style.toModifier import com.varabyte.kobweb.silk.theme.colors.palette.color import com.varabyte.kobweb.silk.theme.colors.palette.toPalette import net.frozenblock.net.components.sections.PageList @@ -29,7 +29,7 @@ import org.jetbrains.compose.web.css.px import org.jetbrains.compose.web.dom.P import org.jetbrains.compose.web.dom.Text -val MarkdownStyle by ComponentStyle { +val MarkdownStyle = CssStyle { // The following rules apply to all descendant elements, indicated by the leading space. // When you use `cssRule`, the name of this style is prefixed in front of it. // See also: https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/components/layouts/PageLayout.kt b/site/src/jsMain/kotlin/net/frozenblock/net/components/layouts/PageLayout.kt index ec9a875..8d18128 100644 --- a/site/src/jsMain/kotlin/net/frozenblock/net/components/layouts/PageLayout.kt +++ b/site/src/jsMain/kotlin/net/frozenblock/net/components/layouts/PageLayout.kt @@ -12,9 +12,9 @@ import com.varabyte.kobweb.compose.ui.Alignment import com.varabyte.kobweb.compose.ui.Modifier import com.varabyte.kobweb.compose.ui.modifiers.* import com.varabyte.kobweb.compose.ui.toAttrs -import com.varabyte.kobweb.silk.components.style.ComponentStyle -import com.varabyte.kobweb.silk.components.style.breakpoint.Breakpoint -import com.varabyte.kobweb.silk.components.style.toModifier +import com.varabyte.kobweb.silk.style.CssStyle +import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint +import com.varabyte.kobweb.silk.style.toModifier import com.varabyte.kobweb.silk.theme.colors.ColorMode import kotlinx.browser.document import org.jetbrains.compose.web.css.cssRem @@ -24,7 +24,7 @@ import net.frozenblock.net.components.sections.Footer import net.frozenblock.net.components.sections.NavHeader import net.frozenblock.net.toSitePalette -val PageContentStyle by ComponentStyle { +val PageContentStyle = CssStyle { base { Modifier.fillMaxSize().padding(leftRight = 2.cssRem, /*top = 4.0.cssRem*/) } Breakpoint.MD { Modifier.maxWidth(60.cssRem) } } diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/Footer.kt b/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/Footer.kt index c6885de..01e6731 100644 --- a/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/Footer.kt +++ b/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/Footer.kt @@ -22,11 +22,11 @@ import com.varabyte.kobweb.silk.components.layout.SimpleGrid import com.varabyte.kobweb.silk.components.layout.numColumns import com.varabyte.kobweb.silk.components.navigation.Link import com.varabyte.kobweb.silk.components.navigation.UncoloredLinkVariant -import com.varabyte.kobweb.silk.components.style.ComponentStyle -import com.varabyte.kobweb.silk.components.style.base -import com.varabyte.kobweb.silk.components.style.toModifier -import com.varabyte.kobweb.silk.components.style.vars.color.ColorVar import com.varabyte.kobweb.silk.components.text.SpanText +import com.varabyte.kobweb.silk.style.CssStyle +import com.varabyte.kobweb.silk.style.base +import com.varabyte.kobweb.silk.style.toModifier +import com.varabyte.kobweb.silk.style.vars.color.ColorVar import com.varabyte.kobweb.silk.theme.colors.ColorMode import com.varabyte.kobweb.silk.theme.colors.ColorSchemes import net.frozenblock.net.CircleButtonVariant @@ -36,7 +36,7 @@ import org.jetbrains.compose.web.css.cssRem import org.jetbrains.compose.web.css.percent import org.jetbrains.compose.web.dom.Span -val FooterStyle by ComponentStyle.base { +val FooterStyle = CssStyle.base { Modifier .backgroundColor(colorMode.toSitePalette().nearBackground) .padding(topBottom = 1.5.cssRem, leftRight = 10.percent) diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/ModSection.kt b/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/ModSection.kt index 3a4ba68..95490c0 100644 --- a/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/ModSection.kt +++ b/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/ModSection.kt @@ -19,10 +19,10 @@ import com.varabyte.kobweb.silk.components.layout.SimpleGrid import com.varabyte.kobweb.silk.components.layout.numColumns import com.varabyte.kobweb.silk.components.navigation.Link import com.varabyte.kobweb.silk.components.navigation.UncoloredLinkVariant -import com.varabyte.kobweb.silk.components.style.ComponentStyle -import com.varabyte.kobweb.silk.components.style.base -import com.varabyte.kobweb.silk.components.style.toModifier import com.varabyte.kobweb.silk.components.text.SpanText +import com.varabyte.kobweb.silk.style.CssStyle +import com.varabyte.kobweb.silk.style.base +import com.varabyte.kobweb.silk.style.toModifier import com.varabyte.kobweb.silk.theme.colors.ColorMode import net.frozenblock.net.components.style.background import net.frozenblock.net.components.style.boxShadow @@ -34,7 +34,7 @@ import org.jetbrains.compose.web.css.px private class Mod(val link: String, val name: String, val icon: String) -val ModItemStyle by ComponentStyle.base { +val ModItemStyle = CssStyle.base { Modifier.margin(18.px) } diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/NavHeader.kt b/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/NavHeader.kt index a17e054..94ae231 100644 --- a/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/NavHeader.kt +++ b/site/src/jsMain/kotlin/net/frozenblock/net/components/sections/NavHeader.kt @@ -12,17 +12,14 @@ import com.varabyte.kobweb.compose.ui.modifiers.* import com.varabyte.kobweb.silk.components.graphics.Image import com.varabyte.kobweb.silk.components.icons.MoonIcon import com.varabyte.kobweb.silk.components.icons.SunIcon -import com.varabyte.kobweb.silk.components.layout.breakpoint.displayIfAtLeast -import com.varabyte.kobweb.silk.components.layout.breakpoint.displayUntil import com.varabyte.kobweb.silk.components.navigation.Link import com.varabyte.kobweb.silk.components.navigation.UncoloredLinkVariant import com.varabyte.kobweb.silk.components.navigation.UndecoratedLinkVariant import com.varabyte.kobweb.silk.components.overlay.PopupPlacement import com.varabyte.kobweb.silk.components.overlay.Tooltip -import com.varabyte.kobweb.silk.components.style.ComponentStyle -import com.varabyte.kobweb.silk.components.style.base -import com.varabyte.kobweb.silk.components.style.breakpoint.Breakpoint -import com.varabyte.kobweb.silk.components.style.toModifier +import com.varabyte.kobweb.silk.style.CssStyle +import com.varabyte.kobweb.silk.style.base +import com.varabyte.kobweb.silk.style.toModifier import com.varabyte.kobweb.silk.theme.colors.ColorMode import net.frozenblock.net.components.style.boxShadow import net.frozenblock.net.components.widgets.HamburgerButton @@ -32,7 +29,7 @@ import net.frozenblock.net.components.widgets.SideMenuState import org.jetbrains.compose.web.css.DisplayStyle import org.jetbrains.compose.web.css.cssRem -val NavHeaderStyle by ComponentStyle.base { +val NavHeaderStyle = CssStyle.base { Modifier.fillMaxWidth().padding(1.cssRem) } diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/components/widgets/SideMenu.kt b/site/src/jsMain/kotlin/net/frozenblock/net/components/widgets/SideMenu.kt index 4151e09..e1c21fc 100644 --- a/site/src/jsMain/kotlin/net/frozenblock/net/components/widgets/SideMenu.kt +++ b/site/src/jsMain/kotlin/net/frozenblock/net/components/widgets/SideMenu.kt @@ -11,16 +11,16 @@ import com.varabyte.kobweb.compose.ui.Alignment import com.varabyte.kobweb.compose.ui.Modifier import com.varabyte.kobweb.compose.ui.graphics.Colors import com.varabyte.kobweb.compose.ui.modifiers.* -import com.varabyte.kobweb.silk.components.animation.Keyframes -import com.varabyte.kobweb.silk.components.animation.toAnimation import com.varabyte.kobweb.silk.components.icons.CloseIcon import com.varabyte.kobweb.silk.components.overlay.Overlay import com.varabyte.kobweb.silk.components.overlay.OverlayVars +import com.varabyte.kobweb.silk.style.animation.Keyframes +import com.varabyte.kobweb.silk.style.animation.toAnimation import com.varabyte.kobweb.silk.theme.colors.ColorMode import net.frozenblock.net.toSitePalette import org.jetbrains.compose.web.css.* -val SideMenuSlideInAnim by Keyframes { +val SideMenuSlideInAnim = Keyframes { from { Modifier.translateX(100.percent) } diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/components/widgets/WikiTitle.kt b/site/src/jsMain/kotlin/net/frozenblock/net/components/widgets/WikiTitle.kt index fb56e51..e399303 100644 --- a/site/src/jsMain/kotlin/net/frozenblock/net/components/widgets/WikiTitle.kt +++ b/site/src/jsMain/kotlin/net/frozenblock/net/components/widgets/WikiTitle.kt @@ -13,9 +13,9 @@ import com.varabyte.kobweb.compose.ui.graphics.Colors import com.varabyte.kobweb.compose.ui.modifiers.color import com.varabyte.kobweb.compose.ui.modifiers.textAlign import com.varabyte.kobweb.compose.ui.modifiers.textShadow -import com.varabyte.kobweb.silk.components.style.toAttrs -import com.varabyte.kobweb.silk.components.style.toModifier import com.varabyte.kobweb.silk.components.text.SpanText +import com.varabyte.kobweb.silk.style.toAttrs +import com.varabyte.kobweb.silk.style.toModifier import com.varabyte.kobweb.silk.theme.colors.ColorMode import net.frozenblock.net.HeadlineTextStyle import net.frozenblock.net.pages.HeroContainerStyle diff --git a/site/src/jsMain/kotlin/net/frozenblock/net/pages/Index.kt b/site/src/jsMain/kotlin/net/frozenblock/net/pages/Index.kt index faced3e..c1cfa53 100644 --- a/site/src/jsMain/kotlin/net/frozenblock/net/pages/Index.kt +++ b/site/src/jsMain/kotlin/net/frozenblock/net/pages/Index.kt @@ -10,12 +10,9 @@ import com.varabyte.kobweb.compose.ui.Modifier import com.varabyte.kobweb.compose.ui.graphics.Colors import com.varabyte.kobweb.compose.ui.modifiers.* import com.varabyte.kobweb.core.Page -import com.varabyte.kobweb.silk.components.style.ComponentStyle -import com.varabyte.kobweb.silk.components.style.addVariant -import com.varabyte.kobweb.silk.components.style.breakpoint.Breakpoint -import com.varabyte.kobweb.silk.components.style.toAttrs -import com.varabyte.kobweb.silk.components.style.toModifier import com.varabyte.kobweb.silk.components.text.SpanText +import com.varabyte.kobweb.silk.style.* +import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint import com.varabyte.kobweb.silk.theme.colors.ColorMode import net.frozenblock.net.HeadlineTextStyle import net.frozenblock.net.SubheadlineTextStyle @@ -28,13 +25,15 @@ import org.jetbrains.compose.web.css.vh import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Text +sealed interface HeroContainerKind : ComponentKind + // Container that has a tagline and grid on desktop, and just the tagline on mobile -val HeroContainerStyle by ComponentStyle { +val HeroContainerStyle = CssStyle { base { Modifier.fillMaxWidth().gap(2.cssRem) } Breakpoint.MD { Modifier.margin { top(20.vh) } } } -val TopHeroContainerVariant by HeroContainerStyle.addVariant { +val TopHeroContainerVariant = HeroContainerStyle.addVariant { Breakpoint.MD { Modifier.margin { top(5.vh) } } }