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