Distopia

@Composable
fun App() {
    WriteopiaTheme {
        YourContent()
    }
}

// Access M3 tokens
val primary = MaterialTheme.colorScheme.primary

// Access Writeopia semantic tokens
val colors = WriteopiaTheme.colorScheme
val bg     = colors.globalBackground

// WButtonVariant
WButton(text = "Save", onClick = { },
    variant = WButtonVariant.Filled)

WButton(text = "Cancel", onClick = { },
    variant = WButtonVariant.Tonal)

WButton(text = "Learn more", onClick = { },
    variant = WButtonVariant.Outlined)

WButton(text = "Skip", onClick = { },
    variant = WButtonVariant.Text)

WButton(text = "Delete", onClick = { },
    variant = WButtonVariant.Destructive)

WButton(
    text = "New note",
    onClick = { },
    variant = WButtonVariant.Filled,
    leadingIcon = Icons.Default.Add,
    leadingIconDescription = "Add",
)

FloatingActionButton(onClick = { }) {
    Icon(Icons.Default.Add, contentDescription = "Add")
}

ExtendedFloatingActionButton(
    onClick = { },
    icon = { Icon(Icons.Default.Add, contentDescription = null) },
    text = { Text("New") }
)

AssistChip(onClick = { }, label = { Text("Assist") })

FilterChip(selected = true, onClick = { }, label = { Text("Filter") })

InputChip(selected = false, onClick = { }, label = { Text("Input") })

SuggestionChip(onClick = { }, label = { Text("Suggestion") })

var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Label") }
)

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Label") }
)

ElevatedCard(modifier = Modifier.width(200.dp)) {
    Text("Elevated", style = MaterialTheme.typography.titleMedium)
    Text("Content", style = MaterialTheme.typography.bodyMedium)
}

OutlinedCard(modifier = Modifier.width(200.dp)) {
    Text("Outlined")
}

ListItem(
    headlineContent = { Text("Design tokens") },
    supportingContent = { Text("Updated 2 min ago") },
    leadingContent = {
        Icon(Icons.Default.Description, contentDescription = null)
    },
    modifier = Modifier.background(WriteopiaTheme.colorScheme.selectedBg)
)

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it }
)

var selected by remember { mutableIntStateOf(0) }

NavigationBar {
    NavigationBarItem(
        selected = selected == 0,
        onClick = { selected = 0 },
        icon = { Icon(Icons.Default.Home, contentDescription = null) },
        label = { Text("Home") }
    )
    // …more items
}

AlertDialog(
    onDismissRequest = { showDialog = false },
    title = { Text("Delete note?") },
    text  = { Text("This note will be permanently deleted.") },
    confirmButton = {
        WButton(text = "Delete", onClick = { },
            variant = WButtonVariant.Destructive)
    },
    dismissButton = {
        WButton(text = "Cancel", onClick = { },
            variant = WButtonVariant.Text)
    }
)

val snackbarHostState = remember { SnackbarHostState() }

Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) }
) {
    // trigger:
    LaunchedEffect(Unit) {
        snackbarHostState.showSnackbar(
            message = "Note moved to Trash",
            actionLabel = "Undo"
        )
    }
}

// Determinate
LinearProgressIndicator(progress = { 0.6f })

// Indeterminate
LinearProgressIndicator()

// Circular
CircularProgressIndicator()

// Dot badge
BadgedBox(badge = { Badge() }) {
    Icon(Icons.Default.Email, contentDescription = "Email")
}

// Count badge
BadgedBox(badge = { Badge { Text("5") } }) {
    Icon(Icons.Default.Notifications, contentDescription = "Notifications")
}