SkapaBorders

Subset of Border 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

fun main() { 
   //sampleStart 
   SkapaThemeM3(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.typesets.heading.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
}

Types

Link copied to clipboard

Component border corner radius

Link copied to clipboard
object Thickness

Component border thickness