Compose StyleSheet: Revolutionizing UI Design in Jetpack Compose

Compose StyleSheet is an innovative framework designed to enhance user interface development in Jetpack Compose. Offering a versatile array of customizable UI components, this library simplifies the design process, allowing for dynamic styling and seamless integration of design elements like colors, fonts, and sizes. Ideal for developers seeking to streamline UI creation, Compose StyleSheet is a game-changer in the world of app development

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)
    }
}