Compose StyleSheet

Compose StyleSheet is a flexible UI component framework for Jetpack Compose.

This library is still under development. All APIs may change in the future.

fun createStyleSheet(useDarkMode: Boolean): StyleSheet = StyleSheet {
    Colors.text += if (useDarkMode) Color.White else Color.Black
    Colors.subText += if (useDarkMode) Color.LightGray else Color.DarkGray
    Colors.background += if (useDarkMode) Color.Black else Color.White

    content {
        color += Colors.text
    }

    surface {
        background += Colors.background
    }

    text(TextTags.primary) {
        fontSize += 24.sp
    }

    text(TextTags.secondary) {
        fontSize += 14.sp
        color += Colors.subText
    }
}

Setup

// build.gradle.kts
dependencies {
    implementation("com.moriatsushi.compose.stylesheet:compose-stylesheet:0.0.1")
}

Usage

StyleSheet

Colors, Fonts, Sizes, Component Styles, etc. are defined in the StyleSheet.

val styleSheet = StyleSheet {
    /* ... */
}

The created StyleSheet can be provided as follows:

@Composable
fun App() {
    ProvideStyleSheet(styleSheet) {
        /* ... */
    }
}

Design Token (Colors, Fonts, Sizes, etc…)

Design tokens are named style values, such as colors, fonts, sizes, etc.

You can define design tokens as follows:

val primaryColor = Token("primaryColor", default = Color.Black)
val secondaryColor = Token("secondaryColor", default = Color.DarkGray)

val defaultFontFamily = Token("defaultFontFamily", default = FontFamily.SansSerif)
val defaultFontSize = Token("defaultFontSize", default = 16.sp)
val defaultMargin = Token("defaultMargin", default = 8.dp)

The values of the design tokens can be overridden using the style sheet. For example, you can change the colors based on dark or light mode.

fun createStyleSheet(useDarkMode: Boolean): StyleSheet = StyleSheet {
    primaryColor += if (useDarkMode) Color.White else Color.Black
    secondaryColor += if (useDarkMode) Color.LightGray else Color.DarkGray
}

The values can be obtained as follows:

@Composable
fun Sample() {
    val primaryColorValue = primaryColor.value
    val secondaryColorValue = secondaryColor.value
}

Content Style

You can use the StyleSheet to customize the content style of text, icon, etc.

val styleSheet = StyleSheet {
    content {
        // Set the text color to the primary color.
        // You can use design tokens here.
        color += primaryColor

        // Set the font size to 16sp.
        fontSize += 16.sp
    }
}

Component Style

All components can be styled using the StyleSheet.

val styleSheet = StyleSheet {
    surface { // Custom the surface component
        // Set the background color of the surface component to #EEEEEE
        background += Color(0xFFEEEEEE)
    }
}

If there are child contents in the component, you can change the content style as follows:

val styleSheet = StyleSheet {
    surface {
        content {
            // Set the content color in the surface component to red
            color += Color.Red
        }
    }
}

Tag

The tags can be used to define variations of a component.

First, you can create a tag with the target component:

val primaryText = Tag("primaryText", text) // A tag for the text component
val subText = Tag("subText", text)

Then, you need to set the style for each tag in the StyleSheet:

val styleSheet = StyleSheet {
    text(primaryText) {
        color += Color.Black
    }

    text(subText) {
        color += Color.Gray
    }
}

Finally, you can specify the tag when using the component:

@Composable
fun Sample() {
    Column {
        Text("Primary Text", tags = primaryText) // The text color is black
        Text("Sub Text", tags = subText) // The text color is gray
    }
}

When you specify multiple tags, the merged style is applied:

@Composable
fun Sample() {
    Column {
        Text("Primary large text", tags = primaryText + largeText)
    }
}

GitHub

View Github