Hi, how can I create custom typography with Compos...

# multiplatform

[Samuel Chen]

Hi, how can I create custom typography with Compose Multiplatform and use it in a CompositionLocalProvider, considering CustomTypography needs to be defined within a @Composable?

// staticCompositionLocalOf is not a composable function
val LocalTypography = staticCompositionLocalOf { CustomTypography() }

[Giorgi]

the way I solved it is to return null as a default value. not ideal but it works.

val LocalCCTypography = staticCompositionLocalOf<CCTypography?> { null }

data class CCTypography(
    val h1: TextStyle,
    val h2: TextStyle,
    val h3: TextStyle,
    val h4: TextStyle,
    val h5: TextStyle,
    val h6: TextStyle,
    val h7: TextStyle,
    val body1: TextStyle,
    val body2: TextStyle,
    val body3: TextStyle,
    val body4: TextStyle,
    val caption1: TextStyle,
    val caption2: TextStyle,
    val tiny1: TextStyle,
    val tiny2: TextStyle
)

private val lineHeightStyle = LineHeightStyle(
    LineHeightStyle.Alignment.Center, trim = LineHeightStyle.Trim.None
)

@Composable
fun createCCTypography(): CCTypography {
    return CCTypography(
        h1 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 24.sp,
            lineHeight = 36.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W900
        ),
        h2 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 20.sp,
            lineHeight = 32.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W900
        ),
        h3 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 16.sp,
            lineHeight = 26.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W900
        ),
        h4 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 14.sp,
            lineHeight = 20.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W900
        ),
        h5 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 14.sp,
            lineHeight = 20.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W800
        ),
        h6 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 12.sp,
            lineHeight = 16.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W800
        ),
        h7 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 12.sp,
            lineHeight = 16.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W800
        ),
        body1 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 14.sp,
            lineHeight = 26.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W700
        ),
        body2 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 14.sp,
            lineHeight = 26.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W500
        ),
        body3 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 12.sp,
            lineHeight = 20.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W700
        ),
        body4 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 12.sp,
            lineHeight = 20.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W500
        ),
        caption1 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 11.sp,
            lineHeight = 12.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W700
        ),
        caption2 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 11.sp,
            lineHeight = 12.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W500
        ),
        tiny1 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 10.sp,
            lineHeight = 12.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W700
        ),
        tiny2 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 10.sp,
            lineHeight = 12.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W500
        )
    )
}

and when providing

CompositionLocalProvider(
            LocalCCTypography provides createCCTypography()
        ) {
            content()
        }

now since this composition local is nullable it will be ugly to start writting question marks everywhere. So I worte a wrapper

object CCTheme {
    val typography: CCTypography
        @Composable
        @ReadOnlyComposable
        get() = LocalCCTypography.current!!
}

[Giorgi]

hope this helps 📌

[Samuel Chen]

I’ll give it a try. Thanks a lot—you made my day! ❤️

[Vidmantas Kerbelis]

If you look at some of the composition locals provided by Jetpack Compose they work around the null initial state issue like so:

val LocalTypography = staticCompositionLocalOf<CustomTypography> { error("Not provided") }

Personally I'm using that where I don't have no initial state.
This will only crash if you forget to wrap your composables in CompositionLocalProvider