Compose Foundation — Building Without Material

All layout primitives (Row, Column, Spacer, LazyColumn, FlowRow, etc.), drawing modifiers (background, border, clip, drawBehind, graphicsLayer), and animations (AnimatedVisibility, AnimatedContent, spring(), tween()) are Foundation — no Material needed.

Shapes (Foundation-only)

RoundedCornerShape(8.dp)
RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp)
CircleShape
RectangleShape
CutCornerShape(8.dp)
GenericShape { size, _ -> /* custom path */ }

Workflow: Build Your Theme

Step 1 — Define tokens

data class MyColors(
    val primary: Color, val onPrimary: Color,
    val surface: Color, val onSurface: Color,
    val border: Color, val error: Color,
)

data class MyTypography(
    val display: TextStyle, val headline: TextStyle,
    val body: TextStyle, val label: TextStyle,
)

data class MySpacing(
    val xs: Dp = 4.dp, val sm: Dp = 8.dp,
    val md: Dp = 12.dp, val lg: Dp = 16.dp, val xl: Dp = 24.dp,
)

Step 2 — CompositionLocal providers

val LocalMyColors = staticCompositionLocalOf { MyColors.light() }
val LocalMyTypography = staticCompositionLocalOf { MyTypography() }
val LocalMySpacing = staticCompositionLocalOf { MySpacing() }

@Composable
fun MyTheme(colors: MyColors = MyColors.light(), content: @Composable () -> Unit) {
    CompositionLocalProvider(
        LocalMyColors provides colors,
        LocalMyTypography provides MyTypography(),
        LocalMySpacing provides MySpacing(),
    ) { content() }
}

Step 3 — Accessor object

object MyTheme {
    val colors: MyColors @Composable get() = LocalMyColors.current
    val typography: MyTypography @Composable get() = LocalMyTypography.current
    val spacing: MySpacing @Composable get() = LocalMySpacing.current
}

Step 4 — Build components

@Composable
fun MyButton(onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable () -> Unit) {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()
    val scale by animateFloatAsState(
        if (isPressed) 0.97f else 1f,
        spring(dampingRatio = Spring.DampingRatioMediumBouncy)
    )
    Box(
        modifier = modifier
            .graphicsLayer { scaleX = scale; scaleY = scale }
            .clip(RoundedCornerShape(8.dp))
            .background(MyTheme.colors.primary)
            .clickable(interactionSource = interactionSource, indication = MyIndication) { onClick() }
            .padding(horizontal = MyTheme.spacing.lg, vertical = MyTheme.spacing.md),
        contentAlignment = Alignment.Center,
    ) { content() }
}

Custom Indication (Press Feedback)

Material uses ripple(). Without Material, build your own:

object MyIndicationFactory : IndicationNodeFactory {
    override fun create(interactionSource: InteractionSource): DelegatableNode {
        return MyIndicationNode(interactionSource)
    }
}

private class MyIndicationNode(
    private val interactionSource: InteractionSource,
) : Modifier.Node(), DrawModifierNode {
    private var isPressed = false

    override fun onAttach() {
        coroutineScope.launch {
            interactionSource.interactions.collect { interaction ->
                when (interaction) {
                    is PressInteraction.Press -> isPressed = true
                    is PressInteraction.Release, is PressInteraction.Cancel -> isPressed = false
                }
            }
        }
    }

    override fun ContentDrawScope.draw() {
        drawContent()
        if (isPressed) drawRect(Color.Black.copy(alpha = 0.08f))
    }
}

Common Component Replacements

// Surface replacement
@Composable
fun Surface(modifier: Modifier = Modifier, color: Color = MyTheme.colors.surface, content: @Composable () -> Unit) {
    Box(modifier = modifier.clip(RoundedCornerShape(8.dp)).background(color).padding(MyTheme.spacing.md)) { content() }
}

// Divider replacement
@Composable
fun Divider(modifier: Modifier = Modifier) {
    Box(modifier = modifier.fillMaxWidth().height(1.dp).background(MyTheme.colors.border))
}

// Checkbox replacement
@Composable
fun Checkbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
    Box(
        modifier = Modifier.size(24.dp)
            .border(2.dp, MyTheme.colors.border)
            .background(if (checked) MyTheme.colors.primary else Color.Transparent)
            .clickable { onCheckedChange(!checked) },
        contentAlignment = Alignment.Center,
    ) { if (checked) BasicText("✓", style = TextStyle(color = MyTheme.colors.onPrimary)) }
}

Platform-Specific

// Haptics (Android)
val haptic = LocalHapticFeedback.current
haptic.performHapticFeedback(HapticFeedbackType.LongPress)

// Window insets (Android)
Modifier.windowInsetsPadding(WindowInsets.systemBars)
Modifier.windowInsetsPadding(WindowInsets.ime)

// Pointer (Desktop/Web)
Modifier.pointerHoverIcon(PointerIcon.Hand)

// Text selection
SelectionContainer { BasicText("Selectable text") }

Anti-Patterns

Quality Standards

• graphicsLayer for animation — scale/alpha don't trigger relayout
• derivedStateOf for computed values — prevents unnecessary recomposition
• remember expensive calculations — parsing, sorting, filtering
• 48dp minimum touch targets — all interactive elements
• Spring animations for interactive elements — no fixed duration, natural feel

Done Checklist

• Zero Material imports in the entire module
• Theme defined via CompositionLocalProvider with accessor object
• Components read style from theme, not parameters
• Custom Indication replaces ripple
• LazyColumn for scrollable lists (not Column + scroll)
• Platform-specific code in expect/actual (haptics, insets, cursor)