SkapaTypography

Deprecated

SkapaTypographyM2 is deprecated. Use the new SkapaTypography system instead.

Typography Tokens used in Skapa

See also

Samples

import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import net.ikea.skapa.fonts.latin.NotoIkeaLatin
import net.ikea.skapa.foundation.typography2.SkapaTypeScale

fun main() { 
   //sampleStart 
   SkapaTheme2(
    darkTheme = isSystemInDarkTheme(),
    fontFamily = NotoIkeaLatin, // Add your desired font family
    typeScale = SkapaTypeScale.SmallScreen, // Select the desired type scale depending on what size device you are designing for
    baseFontSize = 14.sp // Add your desired base font size, increasing will scale all typesets accordingly
) {
    Column {
        Text(
            text = "Skapa Display M",
            style = SkapaTheme.typography.displayM
        )
        Text(
            text = "Skapa heading M",
            style = SkapaTheme.typography.headingM,
            modifier = Modifier.semantics { heading() }
        )
        Text(
            text = "Skapa statement M",
            style = SkapaTheme.typography.statementM
        )
        Text(
            text = "Skapa body M",
            style = SkapaTheme.typography.bodyM
        )
        Text(
            text = "Skapa label M",
            style = SkapaTheme.typography.labelM
        )
        Text(
            text = "Skapa caption M",
            style = SkapaTheme.typography.captionM
        )
    }
} 
   //sampleEnd
}

Types

Link copied to clipboard
object Sizes

Different font sizes recommended by Skapa

Link copied to clipboard
object TypeScale

Skapa type sets, with long and short line height text. Represented by SkapaFont class