From bdccb3ecd10a5eb64000a33bedceb3bd6cd4af94 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Mon, 24 Aug 2026 21:29:51 +0300 Subject: [PATCH 1/4] feat(theme): opacity mobile --- .../com/atls/hyperion/ui/theme/tokens/Opacity.kt | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/Opacity.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/Opacity.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/Opacity.kt new file mode 100644 index 000000000..d7aba5cce --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/Opacity.kt @@ -0,0 +1,14 @@ +package com.atls.hyperion.ui.theme.tokens + +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 +} From 1dfa024667205bf92b1ec7fa606857ac9b59fa48 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Mon, 24 Aug 2026 21:34:43 +0300 Subject: [PATCH 2/4] refactor(theme): move opacity to effects --- .../com/atls/hyperion/ui/theme/tokens/{ => effects}/Opacity.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/{ => effects}/Opacity.kt (80%) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/Opacity.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/Opacity.kt similarity index 80% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/Opacity.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/Opacity.kt index d7aba5cce..75076513b 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/Opacity.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/Opacity.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.theme.tokens +package com.atls.hyperion.ui.theme.tokens.effects object Opacity { val none = 0f From 2e3dd342de35eef07edf9fc256bdf336f913aefa Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Mon, 24 Aug 2026 21:34:44 +0300 Subject: [PATCH 3/4] chore(theme): mark alpha as legacy --- .../kotlin/com/atls/hyperion/ui/theme/tokens/effects/Alpha.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/Alpha.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/Alpha.kt index a8b5ca577..5a490228a 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/Alpha.kt +++ b/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 From e73fdb54ea0ffff2358ab096e03efa3541e871c7 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 25 Aug 2026 05:07:56 +0300 Subject: [PATCH 4/4] feat(theme): add opacity story --- .../kotlin/com/atls/hyperion/sample/App.kt | 2 + .../effects/stories/opacity/Component.kt | 102 ++++++++++++++++++ .../effects/stories/opacity/Constants.kt | 16 +++ 3 files changed, 120 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/stories/opacity/Component.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/stories/opacity/Constants.kt diff --git a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt index ba5bba67d..bfa9d731f 100644 --- a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt +++ b/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 @Composable fun App() { @@ -42,6 +43,7 @@ fun App() { DateRangePickerStory(), DividerStory(), InputStory(), + OpacityStory(), PaginationStory(), PlaceholderStory(), PopupStory(), diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/stories/opacity/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/stories/opacity/Component.kt new file mode 100644 index 000000000..b91eafae2 --- /dev/null +++ b/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) + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/stories/opacity/Constants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/effects/stories/opacity/Constants.kt new file mode 100644 index 000000000..f5b822d37 --- /dev/null +++ b/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 +)