Typography

🔤 Typography

Compose

All styles are Compose TextStyle stored in EverliTypography object:

@Composable
fun SomeText() {
  Text(
    text = "Hello",
    color = EverliColors.Black100,
    style = EverliTypography.Body.Regular
  )
}

Note EverlyTypography contains sub-objects for each style, e.g. EverlyTypography.Body

XML

The styles are stored as xml styles in styles.xml:

<TextView
    style="@style/EverliTypography.Body.Regular"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello"
    android:textColor="@color/black_100" />

Note: All styles are accessible via the EverliTypography prefix.

EverliTypography in EverliTheme

The typography styles are mirrored in:

data class EverliTypography

Used then in EverliTheme for the local composition:

object EverliTheme {

  val typography: EverliTypography
    @Composable
    @ReadOnlyComposable
    get() = LocalTypography.current

  // more code

}

⚠️ This is done to prevent possible scenarios where we need to change the text style for sub-theme. E.g. we change the EverliTheme.typography.title for a "plus" sub-theme.

Text styles in the XML Theme

Unfortunately, text styles are not supported as part of the theme, they are only accessible via EverliTypography style mentioned above.

➕ Adding a new text style

1. First a new TextStyle in EverliTypography
2. Then new XML style in styles.xml
3. We also need to update EverliTypography data class used for the theme