Refactor box modifiers

... adding support for box-sizing and box-decoration-break styles.

frontend/kobweb-compose/src/jsMain/kotlin/com/varabyte/kobweb/compose/ui/modifiers/BoxModifiers.kt

@@ -0,0 +1,27 @@
+package com.varabyte.kobweb.compose.ui.modifiers
+
+import com.varabyte.kobweb.compose.css.*
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.graphics.Color
+import com.varabyte.kobweb.compose.ui.graphics.toCssColor
+import com.varabyte.kobweb.compose.ui.styleModifier
+import org.jetbrains.compose.web.css.*
+
+fun Modifier.boxDecorationBreak(boxDecorationBreak: BoxDecorationBreak) = styleModifier {
+    boxDecorationBreak(boxDecorationBreak)
+}
+
+fun Modifier.boxShadow(
+    offsetX: CSSLengthValue = 0.px,
+    offsetY: CSSLengthValue = 0.px,
+    blurRadius: CSSLengthValue? = null,
+    spreadRadius: CSSLengthValue? = null,
+    color: Color? = null,
+    inset: Boolean = false,
+) = styleModifier {
+    this.boxShadow(offsetX, offsetY, blurRadius, spreadRadius, color?.toCssColor(), inset)
+}
+
+fun Modifier.boxSizing(boxSizing: BoxSizing) = styleModifier {
+    boxSizing(boxSizing)
+}

frontend/kobweb-compose/src/jsMain/kotlin/com/varabyte/kobweb/compose/ui/modifiers/EffectsModifiers.kt

@@ -1,46 +1,8 @@
 package com.varabyte.kobweb.compose.ui.modifiers
 
 import com.varabyte.kobweb.compose.ui.Modifier
-import com.varabyte.kobweb.compose.ui.graphics.Color
 import com.varabyte.kobweb.compose.ui.styleModifier
-import org.jetbrains.compose.web.css.*
 
 fun Modifier.backdropFilter(value: String) = styleModifier {
     property("backdrop-filter", value)
 }
-
-fun Modifier.boxShadow(value: String) = styleModifier {
-    property("box-shadow", value)
-}
-
-fun Modifier.boxShadow(
-    offsetX: CSSLengthValue = 0.px,
-    offsetY: CSSLengthValue = 0.px,
-    blurRadius: CSSLengthValue? = null,
-    spreadRadius: CSSLengthValue? = null,
-    color: Color? = null,
-    inset: Boolean = false,
-) = boxShadow(buildString {
-    if (inset) {
-        append("inset")
-        append(' ')
-    }
-    append(offsetX)
-    append(' ')
-    append(offsetY)
-
-    if (blurRadius != null) {
-        append(' ')
-        append(blurRadius)
-    }
-
-    if (spreadRadius != null) {
-        append(' ')
-        append(spreadRadius)
-    }
-
-    if (color != null) {
-        append(' ')
-        append(color)
-    }
-})

frontend/web-compose-ext/src/jsMain/kotlin/com/varabyte/kobweb/compose/css/Box.kt

@@ -0,0 +1,78 @@
+package com.varabyte.kobweb.compose.css
+
+import org.jetbrains.compose.web.css.*
+
+// See: https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
+sealed class BoxDecorationBreak(val value: String) {
+    // Keyword
+    object Slice : BoxDecorationBreak("slice")
+    object Clone : BoxDecorationBreak("clone")
+
+    // Global
+    object Inherit : BoxDecorationBreak("inherit")
+    object Initial : BoxDecorationBreak("initial")
+    object Revert : BoxDecorationBreak("revert")
+    object RevertLayer : BoxDecorationBreak("revert-layer")
+    object Unset : BoxDecorationBreak("unset")
+}
+
+fun StyleScope.boxDecorationBreak(boxDecorationBreak: BoxDecorationBreak) {
+    property("box-decoration-break", boxDecorationBreak.value)
+}
+
+// See: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
+sealed class BoxSizing(val value: String) {
+    // Keyword
+    object BorderBox : BoxSizing("border-box")
+    object ContentBox : BoxSizing("content-box")
+
+    // Global
+    object Inherit : BoxSizing("inherit")
+    object Initial : BoxSizing("initial")
+    object Revert : BoxSizing("revert")
+    object RevertLayer : BoxSizing("revert-layer")
+    object Unset : BoxSizing("unset")
+}
+
+fun StyleScope.boxSizing(boxSizing: BoxSizing) {
+    boxSizing(boxSizing.value)
+}
+
+// See: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
+fun StyleScope.boxShadow(value: String) {
+    property("box-shadow", value)
+}
+
+fun StyleScope.boxShadow(
+    offsetX: CSSLengthValue = 0.px,
+    offsetY: CSSLengthValue = 0.px,
+    blurRadius: CSSLengthValue? = null,
+    spreadRadius: CSSLengthValue? = null,
+    color: CSSColorValue? = null,
+    inset: Boolean = false,
+) {
+    boxShadow(buildString {
+        if (inset) {
+            append("inset")
+            append(' ')
+        }
+        append(offsetX)
+        append(' ')
+        append(offsetY)
+
+        if (blurRadius != null) {
+            append(' ')
+            append(blurRadius)
+        }
+
+        if (spreadRadius != null) {
+            append(' ')
+            append(spreadRadius)
+        }
+
+        if (color != null) {
+            append(' ')
+            append(color)
+        }
+    })
+}