From 9e79362c966741795df9b5eeb8f4118cde768a95 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 18 Aug 2026 22:25:21 +0300 Subject: [PATCH 01/11] feat(theme): add mobile elevation tokens --- .../com/atls/hyperion/ui/theme/Theme.kt | 4 + .../ui/theme/tokens/elevation/Elevations.kt | 89 +++++++++++++++++++ .../ui/theme/tokens/elevation/Interfaces.kt | 34 +++++++ 3 files changed, 127 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/Theme.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/Theme.kt index 5ab861f1b..10d1592d5 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/Theme.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/Theme.kt @@ -8,11 +8,13 @@ import com.atls.hyperion.ui.theme.tokens.borders.Borders import com.atls.hyperion.ui.theme.tokens.colors.Colors import com.atls.hyperion.ui.theme.tokens.colors.darkColors import com.atls.hyperion.ui.theme.tokens.colors.lightColors +import com.atls.hyperion.ui.theme.tokens.elevation.Elevations import com.atls.hyperion.ui.theme.typography.TextStyles import com.atls.hyperion.ui.theme.typography.fontFamilies.ScienceGothicFontFamily val LocalHyperionColors = staticCompositionLocalOf { lightColors } val LocalHyperionBorders = staticCompositionLocalOf { Borders(lightColors) } +val LocalHyperionElevations = staticCompositionLocalOf { Elevations(lightColors.elevation) } val LocalHyperionTypography = staticCompositionLocalOf { TextStyles(fontFamily = FontFamily.Default) } @Composable @@ -22,11 +24,13 @@ fun Theme( content: @Composable () -> Unit ) { val borders = Borders(colors) + val elevations = Elevations(colors.elevation) val typography = TextStyles(fontFamily = ScienceGothicFontFamily()) CompositionLocalProvider( LocalHyperionColors provides colors, LocalHyperionBorders provides borders, + LocalHyperionElevations provides elevations, LocalHyperionTypography provides typography ) { content() diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt new file mode 100644 index 000000000..f4485744e --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt @@ -0,0 +1,89 @@ +package com.atls.hyperion.ui.theme.tokens.elevation + +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.atls.hyperion.ui.theme.tokens.colors.ElevationColors + +class Elevations(colors: ElevationColors) { + val xs: PressableElevationStates = Xs(colors.xs) + val sm: PressableElevationStates = Sm(colors.sm) + val md: PressableElevationStates = Md(colors.md) + val lg: PressableElevationStates = Lg(colors.lg) + val modal: ElevationStates = Modal(colors.md) + + private class Xs(color: Color) : PressableElevationStates { + override val default = elevation(drop(color, offsetY = 1.dp, blur = 2.dp)) + override val pressed = elevation( + inner(color, offsetY = 1.dp, blur = 1.dp), + drop(color, offsetY = 1.dp, blur = 1.dp, spread = (-1).dp) + ) + override val disabled = elevation(drop(color, offsetY = 1.dp, blur = 1.dp)) + } + + private class Sm(color: Color) : PressableElevationStates { + override val default = elevation(drop(color, offsetY = 2.dp, blur = 6.dp)) + override val pressed = elevation( + inner(color, offsetY = 1.dp, blur = 2.dp), + drop(color, offsetY = 1.dp, blur = 3.dp, spread = (-2).dp) + ) + override val disabled = elevation(drop(color, offsetY = 1.dp, blur = 2.dp)) + } + + private class Md(color: Color) : PressableElevationStates { + override val default = elevation(drop(color, offsetY = 4.dp, blur = 12.dp)) + override val pressed = elevation( + inner(color, offsetY = 1.dp, blur = 3.dp), + drop(color, offsetY = 2.dp, blur = 6.dp, spread = (-1).dp) + ) + override val disabled = elevation(drop(color, offsetY = 2.dp, blur = 5.dp)) + } + + private class Lg(color: Color) : PressableElevationStates { + override val default = elevation( + drop(color, offsetY = 6.dp, blur = 12.dp, spread = (-4).dp) + ) + override val pressed = elevation( + inner(color, offsetY = 2.dp, blur = 4.dp), + drop(color, offsetY = 3.dp, blur = 8.dp, spread = (-4).dp) + ) + override val disabled = elevation( + drop(color, offsetY = 3.dp, blur = 6.dp, spread = (-3).dp) + ) + } + + private class Modal(color: Color) : ElevationStates { + override val default = elevation( + drop(color, offsetY = 12.dp, blur = 20.dp, spread = (-2).dp) + ) + } +} + +private fun elevation(vararg shadows: Shadow) = Elevation(shadows.toList()) + +private fun drop( + color: Color, + offsetY: Dp, + blur: Dp, + spread: Dp = 0.dp +) = Shadow( + type = ShadowType.Drop, + offsetX = 0.dp, + offsetY = offsetY, + blur = blur, + spread = spread, + color = color +) + +private fun inner( + color: Color, + offsetY: Dp, + blur: Dp +) = Shadow( + type = ShadowType.Inner, + offsetX = 0.dp, + offsetY = offsetY, + blur = blur, + spread = 0.dp, + color = color +) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt new file mode 100644 index 000000000..caa40c15d --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt @@ -0,0 +1,34 @@ +package com.atls.hyperion.ui.theme.tokens.elevation + +import androidx.compose.runtime.Immutable +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp + +@Immutable +data class Elevation( + val shadows: List +) + +@Immutable +data class Shadow( + val type: ShadowType, + val offsetX: Dp, + val offsetY: Dp, + val blur: Dp, + val spread: Dp, + val color: Color +) + +enum class ShadowType { + Drop, + Inner +} + +interface ElevationStates { + val default: Elevation +} + +interface PressableElevationStates : ElevationStates { + val pressed: Elevation + val disabled: Elevation +} From 76d547bfce6385235643ca5d8fd5642785aa1012 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 18 Aug 2026 22:25:44 +0300 Subject: [PATCH 02/11] feat(theme): add elevation modifier --- .../atls/hyperion/ui/primitives/Elevation.kt | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/Elevation.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/Elevation.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/Elevation.kt new file mode 100644 index 000000000..b8cf1b87b --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/Elevation.kt @@ -0,0 +1,34 @@ +package com.atls.hyperion.ui.primitives + +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.RectangleShape +import androidx.compose.ui.graphics.Shape +import com.adamglin.composeshadow.dropShadow +import com.adamglin.composeshadow.innerShadow +import com.atls.hyperion.ui.theme.tokens.elevation.Elevation +import com.atls.hyperion.ui.theme.tokens.elevation.ShadowType + +fun Modifier.elevation( + elevation: Elevation, + shape: Shape = RectangleShape +): Modifier = elevation.shadows.fold(this) { modifier, shadow -> + when (shadow.type) { + ShadowType.Drop -> modifier.dropShadow( + shape = shape, + color = shadow.color, + offsetX = shadow.offsetX, + offsetY = shadow.offsetY, + blur = shadow.blur, + spread = shadow.spread + ) + + ShadowType.Inner -> modifier.innerShadow( + shape = shape, + color = shadow.color, + offsetX = shadow.offsetX, + offsetY = shadow.offsetY, + blur = shadow.blur, + spread = shadow.spread + ) + } +} From 78ee31f71b1f484f19d8bad649f6454a0b37acb5 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 18 Aug 2026 22:26:08 +0300 Subject: [PATCH 03/11] chore(theme): mark legacy elevation tokens --- .../com/atls/hyperion/ui/theme/tokens/layout/Elevation.kt | 2 +- .../kotlin/com/atls/hyperion/ui/theme/tokens/shadows/Shadows.kt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Elevation.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Elevation.kt index f779aa15c..76b7d991b 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Elevation.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Elevation.kt @@ -2,7 +2,7 @@ package com.atls.hyperion.ui.theme.tokens.layout import androidx.compose.ui.unit.dp -object Elevation { +object Elevation { //TODO remove after components refactoring val zero = 0.dp val tiny = 2.dp val medium = 8.dp diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/shadows/Shadows.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/shadows/Shadows.kt index fb3f3cb6c..8040fb900 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/shadows/Shadows.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/shadows/Shadows.kt @@ -3,7 +3,7 @@ package com.atls.hyperion.ui.theme.tokens.shadows import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp -object Shadows { +object Shadows { //TODO remove after components refactoring val gunsmoke = Shadow(0.dp, 0.dp, 1.dp, Color(0x1A878787)) val gray = Shadow(0.dp, 1.dp, 1.dp, Color(0x17878787)) val grey = Shadow((-1).dp, 2.dp, 2.dp, Color(0x0D878787)) From bd832e4af953e82e7861b2b19738f5f37a1712f4 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 18 Aug 2026 22:35:32 +0300 Subject: [PATCH 04/11] fix(theme): use native elevation shadows --- .../atls/hyperion/ui/primitives/Elevation.kt | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/Elevation.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/Elevation.kt index b8cf1b87b..5dd64661a 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/Elevation.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/Elevation.kt @@ -1,10 +1,12 @@ package com.atls.hyperion.ui.primitives import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.dropShadow +import androidx.compose.ui.draw.innerShadow import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.graphics.Shape -import com.adamglin.composeshadow.dropShadow -import com.adamglin.composeshadow.innerShadow +import androidx.compose.ui.graphics.shadow.Shadow +import androidx.compose.ui.unit.DpOffset import com.atls.hyperion.ui.theme.tokens.elevation.Elevation import com.atls.hyperion.ui.theme.tokens.elevation.ShadowType @@ -15,20 +17,19 @@ fun Modifier.elevation( when (shadow.type) { ShadowType.Drop -> modifier.dropShadow( shape = shape, - color = shadow.color, - offsetX = shadow.offsetX, - offsetY = shadow.offsetY, - blur = shadow.blur, - spread = shadow.spread + shadow = shadow.toComposeShadow() ) ShadowType.Inner -> modifier.innerShadow( shape = shape, - color = shadow.color, - offsetX = shadow.offsetX, - offsetY = shadow.offsetY, - blur = shadow.blur, - spread = shadow.spread + shadow = shadow.toComposeShadow() ) } } + +private fun com.atls.hyperion.ui.theme.tokens.elevation.Shadow.toComposeShadow() = Shadow( + radius = blur, + spread = spread, + offset = DpOffset(offsetX, offsetY), + color = color +) From cf7def2f1afe874c03295e5aa0fa684697d9a441 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 18 Aug 2026 22:54:11 +0300 Subject: [PATCH 05/11] fix(theme): render inner elevation shadows --- .../atls/hyperion/ui/primitives/Elevation.kt | 35 +++++++++++++------ 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/Elevation.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/Elevation.kt index 5dd64661a..d2614d89b 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/Elevation.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/Elevation.kt @@ -1,8 +1,10 @@ package com.atls.hyperion.ui.primitives +import androidx.compose.foundation.background import androidx.compose.ui.Modifier import androidx.compose.ui.draw.dropShadow import androidx.compose.ui.draw.innerShadow +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.shadow.Shadow @@ -12,18 +14,31 @@ import com.atls.hyperion.ui.theme.tokens.elevation.ShadowType fun Modifier.elevation( elevation: Elevation, + backgroundColor: Color, shape: Shape = RectangleShape -): Modifier = elevation.shadows.fold(this) { modifier, shadow -> - when (shadow.type) { - ShadowType.Drop -> modifier.dropShadow( - shape = shape, - shadow = shadow.toComposeShadow() - ) +): Modifier { + val withDropShadows = elevation.shadows.fold(this) { modifier, shadow -> + if (shadow.type == ShadowType.Drop) { + modifier.dropShadow( + shape = shape, + shadow = shadow.toComposeShadow() + ) + } else { + modifier + } + } + + val withBackground = withDropShadows.background(backgroundColor, shape) - ShadowType.Inner -> modifier.innerShadow( - shape = shape, - shadow = shadow.toComposeShadow() - ) + return elevation.shadows.fold(withBackground) { modifier, shadow -> + if (shadow.type == ShadowType.Inner) { + modifier.innerShadow( + shape = shape, + shadow = shadow.toComposeShadow() + ) + } else { + modifier + } } } From c6af9725daec5544a2e5de12aca9d2305caaf166 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 18 Aug 2026 23:11:15 +0300 Subject: [PATCH 06/11] fix(theme): align subtle action colors --- .../kotlin/com/atls/hyperion/ui/theme/tokens/colors/Dark.kt | 2 +- .../kotlin/com/atls/hyperion/ui/theme/tokens/colors/Light.kt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Dark.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Dark.kt index c52130fc9..f648fc8ba 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Dark.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Dark.kt @@ -8,7 +8,7 @@ val darkColors = Colors( hover = Color(0xFF7AA7FF), pressed = Color(0xFF3F74FF), disabled = Color(0xFF5F8FFF), - subtle = Color(0xFF394A6B) + subtle = Color(0x4D5F8FFF) ), surface = SurfaceColors( base = Color(0xFF111111), diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Light.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Light.kt index 8e4212513..f9762fa6f 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Light.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Light.kt @@ -8,7 +8,7 @@ val lightColors = Colors( hover = Color(0xFF1643A3), pressed = Color(0xFF12357F), disabled = Color(0x401E56C7), - subtle = Color(0xFF6B86C8) + subtle = Color(0x401E56C7) ), surface = SurfaceColors( base = Color(0xFFF8F9FF), From ac3fb7f294acc81b8154431cfbda0ae04f3d0342 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 18 Aug 2026 23:12:49 +0300 Subject: [PATCH 07/11] fix(theme): add focused elevation shadows --- .../com/atls/hyperion/ui/theme/Theme.kt | 4 +- .../ui/theme/tokens/elevation/Elevations.kt | 65 +++++++++++++++---- .../ui/theme/tokens/elevation/Interfaces.kt | 1 + 3 files changed, 56 insertions(+), 14 deletions(-) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/Theme.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/Theme.kt index 10d1592d5..aeb5e7b34 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/Theme.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/Theme.kt @@ -14,7 +14,7 @@ import com.atls.hyperion.ui.theme.typography.fontFamilies.ScienceGothicFontFamil val LocalHyperionColors = staticCompositionLocalOf { lightColors } val LocalHyperionBorders = staticCompositionLocalOf { Borders(lightColors) } -val LocalHyperionElevations = staticCompositionLocalOf { Elevations(lightColors.elevation) } +val LocalHyperionElevations = staticCompositionLocalOf { Elevations(lightColors) } val LocalHyperionTypography = staticCompositionLocalOf { TextStyles(fontFamily = FontFamily.Default) } @Composable @@ -24,7 +24,7 @@ fun Theme( content: @Composable () -> Unit ) { val borders = Borders(colors) - val elevations = Elevations(colors.elevation) + val elevations = Elevations(colors) val typography = TextStyles(fontFamily = ScienceGothicFontFamily()) CompositionLocalProvider( diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt index f4485744e..a01dad039 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt @@ -3,17 +3,27 @@ package com.atls.hyperion.ui.theme.tokens.elevation import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp -import com.atls.hyperion.ui.theme.tokens.colors.ElevationColors +import com.atls.hyperion.ui.theme.tokens.colors.Colors -class Elevations(colors: ElevationColors) { - val xs: PressableElevationStates = Xs(colors.xs) - val sm: PressableElevationStates = Sm(colors.sm) - val md: PressableElevationStates = Md(colors.md) - val lg: PressableElevationStates = Lg(colors.lg) - val modal: ElevationStates = Modal(colors.md) +class Elevations(colors: Colors) { + val xs: PressableElevationStates = Xs(colors.elevation.xs, colors.action.subtle) + val sm: PressableElevationStates = Sm(colors.elevation.sm, colors.action.subtle) + val md: PressableElevationStates = Md(colors.elevation.md, colors.action.subtle) + val lg: PressableElevationStates = Lg(colors.elevation.lg, colors.action.subtle) + val modal: ElevationStates = Modal(colors.elevation.md) - private class Xs(color: Color) : PressableElevationStates { + private class Xs(color: Color, focusedColor: Color) : PressableElevationStates { override val default = elevation(drop(color, offsetY = 1.dp, blur = 2.dp)) + override val focused = elevation( + drop(color, offsetY = 1.dp, blur = 3.dp, spread = 1.dp), + drop( + focusedColor, + offsetX = 1.dp, + offsetY = 3.dp, + blur = 6.dp, + spread = (-2).dp + ) + ) override val pressed = elevation( inner(color, offsetY = 1.dp, blur = 1.dp), drop(color, offsetY = 1.dp, blur = 1.dp, spread = (-1).dp) @@ -21,8 +31,18 @@ class Elevations(colors: ElevationColors) { override val disabled = elevation(drop(color, offsetY = 1.dp, blur = 1.dp)) } - private class Sm(color: Color) : PressableElevationStates { + private class Sm(color: Color, focusedColor: Color) : PressableElevationStates { override val default = elevation(drop(color, offsetY = 2.dp, blur = 6.dp)) + override val focused = elevation( + drop(color, offsetY = 2.dp, blur = 8.dp, spread = 1.dp), + drop( + focusedColor, + offsetX = 1.dp, + offsetY = 4.dp, + blur = 8.dp, + spread = (-2).dp + ) + ) override val pressed = elevation( inner(color, offsetY = 1.dp, blur = 2.dp), drop(color, offsetY = 1.dp, blur = 3.dp, spread = (-2).dp) @@ -30,8 +50,18 @@ class Elevations(colors: ElevationColors) { override val disabled = elevation(drop(color, offsetY = 1.dp, blur = 2.dp)) } - private class Md(color: Color) : PressableElevationStates { + private class Md(color: Color, focusedColor: Color) : PressableElevationStates { override val default = elevation(drop(color, offsetY = 4.dp, blur = 12.dp)) + override val focused = elevation( + drop(color, offsetY = 4.dp, blur = 14.dp), + drop( + focusedColor, + offsetX = 1.dp, + offsetY = 6.dp, + blur = 14.dp, + spread = (-4).dp + ) + ) override val pressed = elevation( inner(color, offsetY = 1.dp, blur = 3.dp), drop(color, offsetY = 2.dp, blur = 6.dp, spread = (-1).dp) @@ -39,10 +69,20 @@ class Elevations(colors: ElevationColors) { override val disabled = elevation(drop(color, offsetY = 2.dp, blur = 5.dp)) } - private class Lg(color: Color) : PressableElevationStates { + private class Lg(color: Color, focusedColor: Color) : PressableElevationStates { override val default = elevation( drop(color, offsetY = 6.dp, blur = 12.dp, spread = (-4).dp) ) + override val focused = elevation( + drop(color, offsetY = 7.dp, blur = 16.dp, spread = (-4).dp), + drop( + focusedColor, + offsetX = 1.dp, + offsetY = 6.dp, + blur = 8.dp, + spread = (-1).dp + ) + ) override val pressed = elevation( inner(color, offsetY = 2.dp, blur = 4.dp), drop(color, offsetY = 3.dp, blur = 8.dp, spread = (-4).dp) @@ -63,12 +103,13 @@ private fun elevation(vararg shadows: Shadow) = Elevation(shadows.toList()) private fun drop( color: Color, + offsetX: Dp = 0.dp, offsetY: Dp, blur: Dp, spread: Dp = 0.dp ) = Shadow( type = ShadowType.Drop, - offsetX = 0.dp, + offsetX = offsetX, offsetY = offsetY, blur = blur, spread = spread, diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt index caa40c15d..6239a1827 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt @@ -29,6 +29,7 @@ interface ElevationStates { } interface PressableElevationStates : ElevationStates { + val focused: Elevation val pressed: Elevation val disabled: Elevation } From f631880883c064d615c7531439de192b04f61064 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Fri, 21 Aug 2026 02:07:22 +0300 Subject: [PATCH 08/11] refactor(theme): extract elevation tokens --- .../ui/theme/tokens/elevation/Blurs.kt | 17 ++ .../ui/theme/tokens/elevation/Elevations.kt | 145 +++++++++++++----- .../ui/theme/tokens/elevation/Offsets.kt | 14 ++ .../ui/theme/tokens/elevation/Spreads.kt | 12 ++ 4 files changed, 146 insertions(+), 42 deletions(-) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Blurs.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Offsets.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Spreads.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Blurs.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Blurs.kt new file mode 100644 index 000000000..385f1e0f2 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Blurs.kt @@ -0,0 +1,17 @@ +package com.atls.hyperion.ui.theme.tokens.elevation + +import androidx.compose.ui.unit.dp + +object ShadowBlur { + val xs5 = 1.dp + val xs4 = 2.dp + val xs3 = 3.dp + val xs2 = 4.dp + val xs = 5.dp + val sm = 6.dp + val md = 8.dp + val lg = 12.dp + val xl = 14.dp + val xl2 = 16.dp + val xl3 = 20.dp +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt index a01dad039..c89b30c37 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt @@ -2,7 +2,6 @@ package com.atls.hyperion.ui.theme.tokens.elevation import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.Dp -import androidx.compose.ui.unit.dp import com.atls.hyperion.ui.theme.tokens.colors.Colors class Elevations(colors: Colors) { @@ -13,88 +12,150 @@ class Elevations(colors: Colors) { val modal: ElevationStates = Modal(colors.elevation.md) private class Xs(color: Color, focusedColor: Color) : PressableElevationStates { - override val default = elevation(drop(color, offsetY = 1.dp, blur = 2.dp)) + override val default = elevation( + drop(color, offsetY = ShadowOffset.xs, blur = ShadowBlur.xs4) + ) override val focused = elevation( - drop(color, offsetY = 1.dp, blur = 3.dp, spread = 1.dp), + drop( + color, + offsetY = ShadowOffset.xs, + blur = ShadowBlur.xs3, + spread = ShadowSpread.xs + ), drop( focusedColor, - offsetX = 1.dp, - offsetY = 3.dp, - blur = 6.dp, - spread = (-2).dp + offsetX = ShadowOffset.xs, + offsetY = ShadowOffset.md, + blur = ShadowBlur.sm, + spread = ShadowSpread.negativeSm ) ) override val pressed = elevation( - inner(color, offsetY = 1.dp, blur = 1.dp), - drop(color, offsetY = 1.dp, blur = 1.dp, spread = (-1).dp) + inner(color, offsetY = ShadowOffset.xs, blur = ShadowBlur.xs5), + drop( + color, + offsetY = ShadowOffset.xs, + blur = ShadowBlur.xs5, + spread = ShadowSpread.negativeXs + ) + ) + override val disabled = elevation( + drop(color, offsetY = ShadowOffset.xs, blur = ShadowBlur.xs5) ) - override val disabled = elevation(drop(color, offsetY = 1.dp, blur = 1.dp)) } private class Sm(color: Color, focusedColor: Color) : PressableElevationStates { - override val default = elevation(drop(color, offsetY = 2.dp, blur = 6.dp)) + override val default = elevation( + drop(color, offsetY = ShadowOffset.sm, blur = ShadowBlur.sm) + ) override val focused = elevation( - drop(color, offsetY = 2.dp, blur = 8.dp, spread = 1.dp), + drop( + color, + offsetY = ShadowOffset.sm, + blur = ShadowBlur.md, + spread = ShadowSpread.xs + ), drop( focusedColor, - offsetX = 1.dp, - offsetY = 4.dp, - blur = 8.dp, - spread = (-2).dp + offsetX = ShadowOffset.xs, + offsetY = ShadowOffset.lg, + blur = ShadowBlur.md, + spread = ShadowSpread.negativeSm ) ) override val pressed = elevation( - inner(color, offsetY = 1.dp, blur = 2.dp), - drop(color, offsetY = 1.dp, blur = 3.dp, spread = (-2).dp) + inner(color, offsetY = ShadowOffset.xs, blur = ShadowBlur.xs4), + drop( + color, + offsetY = ShadowOffset.xs, + blur = ShadowBlur.xs3, + spread = ShadowSpread.negativeSm + ) + ) + override val disabled = elevation( + drop(color, offsetY = ShadowOffset.xs, blur = ShadowBlur.xs4) ) - override val disabled = elevation(drop(color, offsetY = 1.dp, blur = 2.dp)) } private class Md(color: Color, focusedColor: Color) : PressableElevationStates { - override val default = elevation(drop(color, offsetY = 4.dp, blur = 12.dp)) + override val default = elevation( + drop(color, offsetY = ShadowOffset.lg, blur = ShadowBlur.lg) + ) override val focused = elevation( - drop(color, offsetY = 4.dp, blur = 14.dp), + drop(color, offsetY = ShadowOffset.lg, blur = ShadowBlur.xl), drop( focusedColor, - offsetX = 1.dp, - offsetY = 6.dp, - blur = 14.dp, - spread = (-4).dp + offsetX = ShadowOffset.xs, + offsetY = ShadowOffset.xl, + blur = ShadowBlur.xl, + spread = ShadowSpread.negativeLg ) ) override val pressed = elevation( - inner(color, offsetY = 1.dp, blur = 3.dp), - drop(color, offsetY = 2.dp, blur = 6.dp, spread = (-1).dp) + inner(color, offsetY = ShadowOffset.xs, blur = ShadowBlur.xs3), + drop( + color, + offsetY = ShadowOffset.sm, + blur = ShadowBlur.sm, + spread = ShadowSpread.negativeXs + ) + ) + override val disabled = elevation( + drop(color, offsetY = ShadowOffset.sm, blur = ShadowBlur.xs) ) - override val disabled = elevation(drop(color, offsetY = 2.dp, blur = 5.dp)) } private class Lg(color: Color, focusedColor: Color) : PressableElevationStates { override val default = elevation( - drop(color, offsetY = 6.dp, blur = 12.dp, spread = (-4).dp) + drop( + color, + offsetY = ShadowOffset.xl, + blur = ShadowBlur.lg, + spread = ShadowSpread.negativeLg + ) ) override val focused = elevation( - drop(color, offsetY = 7.dp, blur = 16.dp, spread = (-4).dp), + drop( + color, + offsetY = ShadowOffset.xl2, + blur = ShadowBlur.xl2, + spread = ShadowSpread.negativeLg + ), drop( focusedColor, - offsetX = 1.dp, - offsetY = 6.dp, - blur = 8.dp, - spread = (-1).dp + offsetX = ShadowOffset.xs, + offsetY = ShadowOffset.xl, + blur = ShadowBlur.md, + spread = ShadowSpread.negativeXs ) ) override val pressed = elevation( - inner(color, offsetY = 2.dp, blur = 4.dp), - drop(color, offsetY = 3.dp, blur = 8.dp, spread = (-4).dp) + inner(color, offsetY = ShadowOffset.sm, blur = ShadowBlur.xs2), + drop( + color, + offsetY = ShadowOffset.md, + blur = ShadowBlur.md, + spread = ShadowSpread.negativeLg + ) ) override val disabled = elevation( - drop(color, offsetY = 3.dp, blur = 6.dp, spread = (-3).dp) + drop( + color, + offsetY = ShadowOffset.md, + blur = ShadowBlur.sm, + spread = ShadowSpread.negativeMd + ) ) } private class Modal(color: Color) : ElevationStates { override val default = elevation( - drop(color, offsetY = 12.dp, blur = 20.dp, spread = (-2).dp) + drop( + color, + offsetY = ShadowOffset.xl3, + blur = ShadowBlur.xl3, + spread = ShadowSpread.negativeSm + ) ) } } @@ -103,10 +164,10 @@ private fun elevation(vararg shadows: Shadow) = Elevation(shadows.toList()) private fun drop( color: Color, - offsetX: Dp = 0.dp, + offsetX: Dp = ShadowOffset.none, offsetY: Dp, blur: Dp, - spread: Dp = 0.dp + spread: Dp = ShadowSpread.none ) = Shadow( type = ShadowType.Drop, offsetX = offsetX, @@ -122,9 +183,9 @@ private fun inner( blur: Dp ) = Shadow( type = ShadowType.Inner, - offsetX = 0.dp, + offsetX = ShadowOffset.none, offsetY = offsetY, blur = blur, - spread = 0.dp, + spread = ShadowSpread.none, color = color ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Offsets.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Offsets.kt new file mode 100644 index 000000000..ddd47a368 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Offsets.kt @@ -0,0 +1,14 @@ +package com.atls.hyperion.ui.theme.tokens.elevation + +import androidx.compose.ui.unit.dp + +object ShadowOffset { + val none = 0.dp + val xs = 1.dp + val sm = 2.dp + val md = 3.dp + val lg = 4.dp + val xl = 6.dp + val xl2 = 7.dp + val xl3 = 12.dp +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Spreads.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Spreads.kt new file mode 100644 index 000000000..283df4b0b --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Spreads.kt @@ -0,0 +1,12 @@ +package com.atls.hyperion.ui.theme.tokens.elevation + +import androidx.compose.ui.unit.dp + +object ShadowSpread { + val negativeLg = (-4).dp + val negativeMd = (-3).dp + val negativeSm = (-2).dp + val negativeXs = (-1).dp + val none = 0.dp + val xs = 1.dp +} From 17a6d9ba2b24fb8937d5143560b933f2592876d0 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Mon, 24 Aug 2026 21:10:24 +0300 Subject: [PATCH 09/11] fix(theme): remove invalid elevation immutability --- .../com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt | 1 - 1 file changed, 1 deletion(-) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt index 6239a1827..b618d0e50 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt @@ -4,7 +4,6 @@ import androidx.compose.runtime.Immutable import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.Dp -@Immutable data class Elevation( val shadows: List ) From 48e8ff080873ecad883548631f7a811b2f820cb4 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Mon, 24 Aug 2026 21:20:54 +0300 Subject: [PATCH 10/11] feat(theme): elevation story --- .../kotlin/com/atls/hyperion/sample/App.kt | 2 + .../tokens/elevation/stories/Component.kt | 168 ++++++++++++++++++ 2 files changed, 170 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/stories/Component.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..c7ee465e1 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.elevation.stories.ElevationStory @Composable fun App() { @@ -41,6 +42,7 @@ fun App() { DatePickerStory(), DateRangePickerStory(), DividerStory(), + ElevationStory(), InputStory(), PaginationStory(), PlaceholderStory(), diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/stories/Component.kt new file mode 100644 index 000000000..e75d08b76 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/stories/Component.kt @@ -0,0 +1,168 @@ +package com.atls.hyperion.ui.theme.tokens.elevation.stories + +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.interaction.collectIsPressedAsState +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.verticalScroll +import androidx.compose.material.Switch +import androidx.compose.material.Text +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Shape +import com.atls.hyperion.storybook.shared.model.ComponentExample +import com.atls.hyperion.ui.primitives.elevation +import com.atls.hyperion.ui.theme.LocalHyperionColors +import com.atls.hyperion.ui.theme.LocalHyperionElevations +import com.atls.hyperion.ui.theme.Theme +import com.atls.hyperion.ui.theme.tokens.elevation.Elevation +import com.atls.hyperion.ui.theme.tokens.elevation.PressableElevationStates +import com.atls.hyperion.ui.theme.tokens.layout.Radii +import com.atls.hyperion.ui.theme.tokens.layout.Spacing + +class ElevationStory : ComponentExample { + override val name: String = "Elevation" + + @Composable + override fun Content() { + var darkTheme by remember { mutableStateOf(false) } + var focused by remember { mutableStateOf(false) } + var enabled by remember { mutableStateOf(true) } + + Theme(darkTheme = darkTheme) { + val colors = LocalHyperionColors.current + val elevations = LocalHyperionElevations.current + val pressableElevations = listOf( + "xs" to elevations.xs, + "sm" to elevations.sm, + "md" to elevations.md, + "lg" to elevations.lg + ) + + Column( + modifier = Modifier + .fillMaxSize() + .background(colors.surface.subtle) + .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 } + ) + Toggle( + label = "Focused", + checked = focused, + textColor = colors.text.primary, + onCheckedChange = { focused = it } + ) + Toggle( + label = "Enabled", + checked = enabled, + textColor = colors.text.primary, + onCheckedChange = { enabled = it } + ) + + pressableElevations.forEach { (label, states) -> + ElevationCard( + label = label, + states = states, + focused = focused, + enabled = enabled, + backgroundColor = colors.surface.base, + textColor = colors.text.primary + ) + } + + StaticElevationCard( + label = "modal · default", + elevation = elevations.modal.default, + backgroundColor = colors.surface.base, + textColor = colors.text.primary + ) + } + } + } +} + +@Composable +private fun Toggle( + label: String, + checked: Boolean, + textColor: Color, + onCheckedChange: (Boolean) -> Unit +) { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween + ) { + Text(label, color = textColor) + Switch(checked = checked, onCheckedChange = onCheckedChange) + } +} + +@Composable +private fun ElevationCard( + label: String, + states: PressableElevationStates, + focused: Boolean, + enabled: Boolean, + backgroundColor: Color, + textColor: Color +) { + val interactionSource = remember { MutableInteractionSource() } + val pressed by interactionSource.collectIsPressedAsState() + val state = when { + !enabled -> "disabled" to states.disabled + pressed -> "pressed" to states.pressed + focused -> "focused" to states.focused + else -> "default" to states.default + } + + StaticElevationCard( + label = "$label · ${state.first}", + elevation = state.second, + backgroundColor = backgroundColor, + textColor = textColor, + modifier = Modifier.clickable( + interactionSource = interactionSource, + indication = null, + enabled = enabled, + onClick = {} + ) + ) +} + +@Composable +private fun StaticElevationCard( + label: String, + elevation: Elevation, + backgroundColor: Color, + textColor: Color, + modifier: Modifier = Modifier, + shape: Shape = RoundedCornerShape(Radii.md) +) { + Box( + modifier = Modifier + .fillMaxWidth() + .height(Spacing.layout.lg) + .elevation( + elevation = elevation, + backgroundColor = backgroundColor, + shape = shape + ) + .then(modifier), + contentAlignment = Alignment.Center + ) { + Text(label, color = textColor) + } +} From e81f5083df81396993d59d910607d0b80724bef9 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 25 Aug 2026 04:25:35 +0300 Subject: [PATCH 11/11] fix(theme): remove focused elevation state --- .../ui/theme/tokens/elevation/Elevations.kt | 71 +++---------------- .../ui/theme/tokens/elevation/Interfaces.kt | 1 - .../tokens/elevation/stories/Component.kt | 10 --- 3 files changed, 8 insertions(+), 74 deletions(-) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt index c89b30c37..4bb08e5d7 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Elevations.kt @@ -5,31 +5,16 @@ import androidx.compose.ui.unit.Dp import com.atls.hyperion.ui.theme.tokens.colors.Colors class Elevations(colors: Colors) { - val xs: PressableElevationStates = Xs(colors.elevation.xs, colors.action.subtle) - val sm: PressableElevationStates = Sm(colors.elevation.sm, colors.action.subtle) - val md: PressableElevationStates = Md(colors.elevation.md, colors.action.subtle) - val lg: PressableElevationStates = Lg(colors.elevation.lg, colors.action.subtle) + val xs: PressableElevationStates = Xs(colors.elevation.xs) + val sm: PressableElevationStates = Sm(colors.elevation.sm) + val md: PressableElevationStates = Md(colors.elevation.md) + val lg: PressableElevationStates = Lg(colors.elevation.lg) val modal: ElevationStates = Modal(colors.elevation.md) - private class Xs(color: Color, focusedColor: Color) : PressableElevationStates { + private class Xs(color: Color) : PressableElevationStates { override val default = elevation( drop(color, offsetY = ShadowOffset.xs, blur = ShadowBlur.xs4) ) - override val focused = elevation( - drop( - color, - offsetY = ShadowOffset.xs, - blur = ShadowBlur.xs3, - spread = ShadowSpread.xs - ), - drop( - focusedColor, - offsetX = ShadowOffset.xs, - offsetY = ShadowOffset.md, - blur = ShadowBlur.sm, - spread = ShadowSpread.negativeSm - ) - ) override val pressed = elevation( inner(color, offsetY = ShadowOffset.xs, blur = ShadowBlur.xs5), drop( @@ -44,25 +29,10 @@ class Elevations(colors: Colors) { ) } - private class Sm(color: Color, focusedColor: Color) : PressableElevationStates { + private class Sm(color: Color) : PressableElevationStates { override val default = elevation( drop(color, offsetY = ShadowOffset.sm, blur = ShadowBlur.sm) ) - override val focused = elevation( - drop( - color, - offsetY = ShadowOffset.sm, - blur = ShadowBlur.md, - spread = ShadowSpread.xs - ), - drop( - focusedColor, - offsetX = ShadowOffset.xs, - offsetY = ShadowOffset.lg, - blur = ShadowBlur.md, - spread = ShadowSpread.negativeSm - ) - ) override val pressed = elevation( inner(color, offsetY = ShadowOffset.xs, blur = ShadowBlur.xs4), drop( @@ -77,20 +47,10 @@ class Elevations(colors: Colors) { ) } - private class Md(color: Color, focusedColor: Color) : PressableElevationStates { + private class Md(color: Color) : PressableElevationStates { override val default = elevation( drop(color, offsetY = ShadowOffset.lg, blur = ShadowBlur.lg) ) - override val focused = elevation( - drop(color, offsetY = ShadowOffset.lg, blur = ShadowBlur.xl), - drop( - focusedColor, - offsetX = ShadowOffset.xs, - offsetY = ShadowOffset.xl, - blur = ShadowBlur.xl, - spread = ShadowSpread.negativeLg - ) - ) override val pressed = elevation( inner(color, offsetY = ShadowOffset.xs, blur = ShadowBlur.xs3), drop( @@ -105,7 +65,7 @@ class Elevations(colors: Colors) { ) } - private class Lg(color: Color, focusedColor: Color) : PressableElevationStates { + private class Lg(color: Color) : PressableElevationStates { override val default = elevation( drop( color, @@ -114,21 +74,6 @@ class Elevations(colors: Colors) { spread = ShadowSpread.negativeLg ) ) - override val focused = elevation( - drop( - color, - offsetY = ShadowOffset.xl2, - blur = ShadowBlur.xl2, - spread = ShadowSpread.negativeLg - ), - drop( - focusedColor, - offsetX = ShadowOffset.xs, - offsetY = ShadowOffset.xl, - blur = ShadowBlur.md, - spread = ShadowSpread.negativeXs - ) - ) override val pressed = elevation( inner(color, offsetY = ShadowOffset.sm, blur = ShadowBlur.xs2), drop( diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt index b618d0e50..ef26b1582 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/Interfaces.kt @@ -28,7 +28,6 @@ interface ElevationStates { } interface PressableElevationStates : ElevationStates { - val focused: Elevation val pressed: Elevation val disabled: Elevation } diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/stories/Component.kt index e75d08b76..5b7befc8f 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/elevation/stories/Component.kt @@ -31,7 +31,6 @@ class ElevationStory : ComponentExample { @Composable override fun Content() { var darkTheme by remember { mutableStateOf(false) } - var focused by remember { mutableStateOf(false) } var enabled by remember { mutableStateOf(true) } Theme(darkTheme = darkTheme) { @@ -58,12 +57,6 @@ class ElevationStory : ComponentExample { textColor = colors.text.primary, onCheckedChange = { darkTheme = it } ) - Toggle( - label = "Focused", - checked = focused, - textColor = colors.text.primary, - onCheckedChange = { focused = it } - ) Toggle( label = "Enabled", checked = enabled, @@ -75,7 +68,6 @@ class ElevationStory : ComponentExample { ElevationCard( label = label, states = states, - focused = focused, enabled = enabled, backgroundColor = colors.surface.base, textColor = colors.text.primary @@ -114,7 +106,6 @@ private fun Toggle( private fun ElevationCard( label: String, states: PressableElevationStates, - focused: Boolean, enabled: Boolean, backgroundColor: Color, textColor: Color @@ -124,7 +115,6 @@ private fun ElevationCard( val state = when { !enabled -> "disabled" to states.disabled pressed -> "pressed" to states.pressed - focused -> "focused" to states.focused else -> "default" to states.default }