diff --git a/app/design-system/design-system-hedvig/src/commonMain/kotlin/com/hedvig/android/design/system/hedvig/Button.kt b/app/design-system/design-system-hedvig/src/commonMain/kotlin/com/hedvig/android/design/system/hedvig/Button.kt index 4cd57a80c0..8144d5023e 100644 --- a/app/design-system/design-system-hedvig/src/commonMain/kotlin/com/hedvig/android/design/system/hedvig/Button.kt +++ b/app/design-system/design-system-hedvig/src/commonMain/kotlin/com/hedvig/android/design/system/hedvig/Button.kt @@ -46,12 +46,12 @@ import com.hedvig.android.design.system.hedvig.ButtonDefaults.ButtonSize import com.hedvig.android.design.system.hedvig.tokens.ButtonTokens import com.hedvig.android.design.system.hedvig.tokens.GhostStyleButtonTokens import com.hedvig.android.design.system.hedvig.tokens.LargeSizeButtonTokens +import com.hedvig.android.design.system.hedvig.tokens.LiquidGlassButtonTokens import com.hedvig.android.design.system.hedvig.tokens.MediumSizeButtonTokens import com.hedvig.android.design.system.hedvig.tokens.MiniSizeButtonTokens import com.hedvig.android.design.system.hedvig.tokens.PrimaryAltStyleButtonTokens import com.hedvig.android.design.system.hedvig.tokens.PrimaryStyleButtonTokens import com.hedvig.android.design.system.hedvig.tokens.RedStyleButtonTokens -import com.hedvig.android.design.system.hedvig.tokens.RoundedLargeSizeButtonTokens import com.hedvig.android.design.system.hedvig.tokens.RoundedLiquidGlassStyleButtonTokens import com.hedvig.android.design.system.hedvig.tokens.RoundedPrimaryStyleButtonTokens import com.hedvig.android.design.system.hedvig.tokens.SecondaryAltStyleButtonTokens @@ -334,8 +334,8 @@ private val ButtonDefaults.ButtonStyle.style: Style ButtonDefaults.ButtonStyle.SecondaryAlt -> Style.SecondaryAlt ButtonDefaults.ButtonStyle.Ghost -> Style.Ghost ButtonDefaults.ButtonStyle.Red -> Style.Red - ButtonDefaults.ButtonStyle.RoundedPrimary -> Style.RoundedPrimary - ButtonDefaults.ButtonStyle.RoundedLiquidGlass -> Style.RoundedLiquidGlass + ButtonDefaults.ButtonStyle.RoundedPrimary -> Style.LiquidGlassTinted + ButtonDefaults.ButtonStyle.RoundedLiquidGlass -> Style.LiquidGlassRegular } private val ButtonSize.size: Size @@ -351,9 +351,12 @@ private val ButtonSize.size: Size * [ButtonSize.Large]; at every smaller size they fall back to the standard button metrics. Corner * radius is not part of this: every button is a pill, see [ButtonTokens.ContainerShape]. */ +// TODO: that fallback is a silent one, and Figma draws the liquid glass buttons at one fixed size +// rather than across the size scale. Lift them off the size axis so the combination stops being +// expressible. @Composable private fun ButtonSize.sizeIn(style: Style): Size = when { - style.glassMaterial != null && this == ButtonSize.Large -> Size.LargeRounded + style.glassMaterial != null && this == ButtonSize.Large -> Size.LiquidGlass else -> size } @@ -407,18 +410,18 @@ private sealed interface Size { get() = LargeSizeButtonTokens.LabelTextFont.value } - object LargeRounded : Size { + object LiquidGlass : Size { override val contentPadding: PaddingValues = PaddingValues( - top = RoundedLargeSizeButtonTokens.TopPadding, - bottom = RoundedLargeSizeButtonTokens.BottomPadding, - start = RoundedLargeSizeButtonTokens.HorizontalPadding, - end = RoundedLargeSizeButtonTokens.HorizontalPadding, + top = LiquidGlassButtonTokens.TopPadding, + bottom = LiquidGlassButtonTokens.BottomPadding, + start = LiquidGlassButtonTokens.HorizontalPadding, + end = LiquidGlassButtonTokens.HorizontalPadding, ) override val textStyle: TextStyle @Composable @ReadOnlyComposable - get() = RoundedLargeSizeButtonTokens.LabelTextFont.value + get() = LiquidGlassButtonTokens.LabelTextFont.value } object Medium : Size { @@ -573,7 +576,7 @@ private sealed interface Style { } } - data object RoundedPrimary : Style { + data object LiquidGlassTinted : Style { // The fill inverts between themes: near-black on light, opaque white on dark. override val glassMaterial: GlassMaterial @Composable @@ -598,7 +601,7 @@ private sealed interface Style { } } - data object RoundedLiquidGlass : Style { + data object LiquidGlassRegular : Style { override val glassMaterial: GlassMaterial @Composable get() = liquidGlassMaterial diff --git a/app/design-system/design-system-hedvig/src/commonMain/kotlin/com/hedvig/android/design/system/hedvig/tokens/ButtonTokens.kt b/app/design-system/design-system-hedvig/src/commonMain/kotlin/com/hedvig/android/design/system/hedvig/tokens/ButtonTokens.kt index 67601718e6..00d8a94cfe 100644 --- a/app/design-system/design-system-hedvig/src/commonMain/kotlin/com/hedvig/android/design/system/hedvig/tokens/ButtonTokens.kt +++ b/app/design-system/design-system-hedvig/src/commonMain/kotlin/com/hedvig/android/design/system/hedvig/tokens/ButtonTokens.kt @@ -110,9 +110,9 @@ internal object LargeSizeButtonTokens { val LabelTextFont = TypographyKeyTokens.BodySmall } -// TODO: the glass button styles are only designed at the large size. Every smaller size falls back to -// the standard button metrics above until design provides them. -internal object RoundedLargeSizeButtonTokens { +// The metrics of the liquid glass buttons, which Figma draws at one fixed size rather than across +// the size scale. 20/12/12 around a 24dp line box gives the 48dp pill height the design specifies. +internal object LiquidGlassButtonTokens { val HorizontalPadding = 20.dp val TopPadding = 12.dp val BottomPadding = 12.dp