Add Opacity interface and fix Modifier.opacity(percent)

Author: DennisTsar

frontend/compose-html-ext/src/jsMain/kotlin/com/varabyte/kobweb/compose/css/Color.kt

@@ -120,3 +120,14 @@ sealed class ColorInterpolationMethod private constructor(private val value: Str
             space.withHue(hueInterpolationMethod)
     }
 }
+
+sealed interface Opacity : StylePropertyValue {
+    companion object : CssGlobalValues<Opacity> {
+        fun of(value: Number): Opacity = value.unsafeCast<Opacity>()
+        fun of(value: CSSPercentageNumericValue): Opacity = value.unsafeCast<Opacity>()
+    }
+}
+
+fun StyleScope.opacity(value: Opacity) {
+    property("opacity", value)
+}

frontend/compose-html-ext/src/jsTest/kotlin/com/varabyte/kobweb/compose/css/CssStylePropertyTests.kt

@@ -1781,6 +1781,18 @@ class CssStylePropertyTests {
         assertThat(styleToText { objectFit(ObjectFit.Unset) }).isEqualTo("object-fit: unset")
     }
 
+    @Test
+    fun verifyOpacity() {
+        assertThat(styleToText { opacity(Opacity.of(0.5)) }).isEqualTo("opacity: 0.5")
+        assertThat(styleToText { opacity(Opacity.of(50.percent)) }).isEqualTo("opacity: 50%")
+
+        assertThat(styleToText { opacity(Opacity.Inherit) }).isEqualTo("opacity: inherit")
+        assertThat(styleToText { opacity(Opacity.Initial) }).isEqualTo("opacity: initial")
+        assertThat(styleToText { opacity(Opacity.Revert) }).isEqualTo("opacity: revert")
+        assertThat(styleToText { opacity(Opacity.RevertLayer) }).isEqualTo("opacity: revert-layer")
+        assertThat(styleToText { opacity(Opacity.Unset) }).isEqualTo("opacity: unset")
+    }
+
     @Test
     fun verifyOrphans() {
         assertThat(styleToText { orphans(Orphans.of(2)) }).isEqualTo("orphans: 2")

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

@@ -25,10 +25,14 @@ fun Modifier.colorScheme(colorScheme: ColorScheme) = styleModifier {
     colorScheme(colorScheme)
 }
 
+fun Modifier.opacity(opacity: Opacity) = styleModifier {
+    opacity(opacity)
+}
+
 fun Modifier.opacity(value: Number) = styleModifier {
     opacity(value)
 }
 
 fun Modifier.opacity(value: CSSPercentageNumericValue) = styleModifier {
-    opacity(value.unsafeCast<CSSSizeValue<CSSUnit.percent>>())
+    opacity(Opacity.of(value))
 }