Design System library for Kotlin/Compose Multiplatform

⭐️ Introduction

Introducing the C·ZAN design system, named in honor of Paul Cezanne, a renowned painter from Aix-en-Provence, France.

This framework is specifically adapted for apps running on Compose Multiplatform and will apply a specific look & feel for the targeted platforms:

Android: Material 3, Google's open-source design system
iOS: Cupertino, Apple's design system

C·ZAN is following the Atomic Design methodology, where atoms, molecules, organisms and templates are the different levels of design you can use to build your app.

➡️ Be sure to show your support by starring ⭐️ this repository, and feel free to contribute if you're interested!

💾 Installation

Add the dependency in your common module's commonMain sourceSet:

implementation('io.github.tweener:czan:$czan_version')

The latest version is:

⚙️ Usage

1. Theme configuration

First, you must configure your theme and define your color palette, typography and shape, as explained in the official documentation for Material 3 with Jetpack Compose.

Colors:

val md_theme_light_primary = Color(0xFF123456)

val MyAppLightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    ...
)

val md_theme_dark_primary = Color(0xFF123456)

val MyAppLightColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    ...
)

Typography:

val MyAppTypography = Typography(
    labelLarge = TextStyle(
        fontWeight = FontWeight.Medium,
        ...
    )
    ...
)

Shapes:

val MyAppShapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(8.dp),
    large = RoundedCornerShape(12.dp),
    extraLarge = RoundedCornerShape(16.dp)
)

2. Theme declaration

Then, declare your app theme using CzanTheme as follows:

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    CzanTheme(
        darkTheme = darkTheme,
        lightColorScheme = MyAppLightColorScheme,
        darkColorScheme = MyAppDarkColorScheme,
        typography = MyAppTypography,
        shapes = MyAppShapes,
        content = content
    )
}

Note: if your app does not need a dark theme, use darkColorScheme = null.

3. Theme usage

C·ZAN wraps some default Material 3 classes to properly adapt the look & feel to the targeted platform. Make sure to use the following ones:

androidx.compose.material3.Scaffold -> com.tweener.czan.designsystem.atom.scaffold.Scaffold
androidx.compose.material3.NavigationBar -> com.tweener.czan.designsystem.atom.bars.NavigationBar
androidx.compose.material3.NavigationBarItem -> com.tweener.czan.designsystem.atom.bars.NavigationBarItem

import com.tweener.czan.designsystem.atom.scaffold.Scaffold
import com.tweener.czan.designsystem.atom.bars.NavigationBar
import com.tweener.czan.designsystem.atom.bars.NavigationBarItem

@Composable
fun App(
  modifier: Modifier = Modifier
) {
    Surface {
        MyAppTheme {
            Scaffold(
                navigationBar = {
                    NavigationBar {
                        NavigationBarItem(...)
                        NavigationBarItem(...)
                        NavigationBarItem(...)
                    }
                },
                ...
            ) { innerPadding ->
                ...
            }
        }
    }
}

4. Light & Dark mode

If you declared a darkColorScheme in step 2, C·ZAN will automatically adapts the theme to light or dark mode depending on the device's settings.

To override it, you can achieve it by using ThemeType as follows:

val themeType: ThemeType = ThemeType.DARK // If you want to use a ThemeType directly from your main Composable
// or
val themeType by viewModel.themeType.collectAsState() // If the ThemeType is provided by the ViewModel 

MyAppTheme(darkTheme = shouldUseDarkTheme(themeType = themeType)) {
    ...
}

🗺️ Roadmap

The C·ZAN design system, still in its early stages, has an exciting journey of development ahead. Checkout the roadmap to know all about the upcoming tasks, presented in no specific order and without set deadlines.

Feel free to check out the range of Composables that are already available here!

👨‍💻 Contributing

We love your input and welcome any contributions! Please read our contribution guidelines before submitting a pull request.

🪪 Licence

C·ZAN is licensed under the Apache-2.0.

Tweener/czan