Feat/mobile opacity

mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt

@@ -25,6 +25,7 @@ import com.atls.hyperion.ui.fragments.datepicker.stories.DateRangePickerStory
 import com.atls.hyperion.ui.primitives.stories.LinkStory
 import com.atls.hyperion.ui.primitives.stories.TextStory
 import com.atls.hyperion.ui.theme.Theme
+import com.atls.hyperion.ui.theme.tokens.effects.stories.opacity.OpacityStory
 import com.atls.hyperion.ui.theme.tokens.elevation.stories.ElevationStory
 
 @Composable
@@ -44,6 +45,7 @@ fun App() {
                 DividerStory(),
                 ElevationStory(),
                 InputStory(),
+                OpacityStory(),
                 PaginationStory(),
                 PlaceholderStory(),
                 PopupStory(),

mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/Alpha.kt

@@ -1,6 +1,6 @@
 package com.atls.hyperion.ui.theme.tokens.effects
 
-object Alpha {
+object Alpha { //TODO remove after components migration to Opacity
     val full = 1f
     val huge = 0.9f
     val large = 0.8f

mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/Opacity.kt

@@ -0,0 +1,14 @@
+package com.atls.hyperion.ui.theme.tokens.effects
+
+object Opacity {
+    val none = 0f
+    val xs2 = 0.04f
+    val xs = 0.08f
+    val sm = 0.12f
+    val md = 0.16f
+    val lg = 0.24f
+    val xl = 0.4f
+    val xl2 = 0.64f
+    val xl3 = 0.8f
+    val full = 1f
+}

mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/stories/opacity/Component.kt

@@ -0,0 +1,102 @@
+package com.atls.hyperion.ui.theme.tokens.effects.stories.opacity
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Switch
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import com.atls.hyperion.storybook.shared.model.ComponentExample
+import com.atls.hyperion.ui.theme.LocalHyperionColors
+import com.atls.hyperion.ui.theme.Theme
+import com.atls.hyperion.ui.theme.tokens.layout.Spacing
+
+class OpacityStory : ComponentExample {
+    override val name: String = "Opacity"
+
+    @Composable
+    override fun Content() {
+        var darkTheme by remember { mutableStateOf(false) }
+
+        Theme(darkTheme = darkTheme) {
+            val colors = LocalHyperionColors.current
+
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(colors.surface.base)
+                    .verticalScroll(rememberScrollState())
+                    .padding(Spacing.component.xl3),
+                verticalArrangement = Arrangement.spacedBy(Spacing.component.xl3)
+            ) {
+                Toggle(
+                    label = "Dark theme",
+                    checked = darkTheme,
+                    textColor = colors.text.primary,
+                    onCheckedChange = { darkTheme = it }
+                )
+
+                opacityValues.forEach { (name, value) ->
+                    Column(verticalArrangement = Arrangement.spacedBy(Spacing.component.md)) {
+                        Row(
+                            modifier = Modifier.fillMaxWidth(),
+                            horizontalArrangement = Arrangement.SpaceBetween
+                        ) {
+                            Text(text = name, color = colors.text.primary)
+                            Text(
+                                text = "${(value * 100).toInt()}%",
+                                color = colors.text.secondary
+                            )
+                        }
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .height(Spacing.layout.xs)
+                                .background(colors.surface.muted)
+                        ) {
+                            Box(
+                                modifier = Modifier
+                                    .fillMaxSize()
+                                    .alpha(value)
+                                    .background(colors.action.base)
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun Toggle(
+    label: String,
+    checked: Boolean,
+    textColor: Color,
+    onCheckedChange: (Boolean) -> Unit
+) {
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Text(text = label, color = textColor)
+        Switch(checked = checked, onCheckedChange = onCheckedChange)
+    }
+}

mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/stories/opacity/Constants.kt

@@ -0,0 +1,16 @@
+package com.atls.hyperion.ui.theme.tokens.effects.stories.opacity
+
+import com.atls.hyperion.ui.theme.tokens.effects.Opacity
+
+internal val opacityValues = listOf(
+    "none" to Opacity.none,
+    "xs2" to Opacity.xs2,
+    "xs" to Opacity.xs,
+    "sm" to Opacity.sm,
+    "md" to Opacity.md,
+    "lg" to Opacity.lg,
+    "xl" to Opacity.xl,
+    "xl2" to Opacity.xl2,
+    "xl3" to Opacity.xl3,
+    "full" to Opacity.full
+)