SkapaSpacing

Spacing 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()) {
    // Spacing
    Column(
        verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Typography (typesets) and colours tokens
        Text(
            text = "Sample",
            color = SkapaTheme.colors.textAndIcon1,
            style = SkapaTheme.typography.headingXS,
            modifier = Modifier.semantics { heading() }
        )
        // Typography (typeScale)
        Text(
            text = "Description goes here",
            color = SkapaTheme.colors.textAndIcon2,
            style = SkapaTypography.TypeScale.font50.long
        )
        // Spacing, Borders & Colours tokens
        Box(
            modifier = Modifier
                .size(SkapaSpacing.space100)
                .background(color = SkapaTheme.colors.neutral1)
                .border(
                    width = SkapaBorders.Thickness.thicknessThin,
                    color = SkapaTheme.colors.neutral7,
                    shape = SkapaBorders.CornerRadius.radiusS
                )
        )
    }
} 
   //sampleEnd
}

Properties

Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
val space25: Dp
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
val space50: Dp
Link copied to clipboard
Link copied to clipboard
val space75: Dp
Link copied to clipboard