Custom Design Systems in Compose - Chicago Roboto

While Jetpack Compose comes with Google’s Material Design system, many apps have their own design language and systems that they need to adhere to in order to offer consistency across platforms. As apps and teams scale, it eventually becomes beneficial to implement your own design system.

That’s exactly the case at Dropbox. We recently went through the process of implementing our DIG design library in Compose, and have seen the benefits first hand.

In this talk, we’ll discuss different approaches to implementing custom design systems in Compose, from customizing the Material Theme, to extending it, all the way to implementing a full blown custom design library. We’ll cover some of the benefits and drawbacks of each approach that you might want to consider.

Lastly, we’ll share the process we went through at Dropbox as we implemented our DIG design library. We’ll report on our experience and reflect on the benefits we’ve seen and what our plans are for the future.

Transcript

1. Ryan Harter @rharter Custom Design Systems in Jetpack Compose
2. Ryan Harter @RHARter Custom Design Systems in Jetpack Compose UI
3. Ryan Harter @RHARter Follow Along https://ryans.link/roboto22
4. Compose UI
5. Compose UI Compose UI
6. Compose UI Compose UI Foundation
7. Compose UI Compose UI Foundation Compose Material
8. Compose Material Material Theme Colors Typography Button Text Surface Etc. Shape
9. Compose Material Material Theme Colors Typography Button Text Surface Etc. Shape
10. Sidebar Design System Tokens
11. Sidebar Design System Tokens @Stable class Colors( val primary: Color, val primaryVariant: Color, val secondary: Color, val secondaryVariant: Color, val background: Color, val surface: Color, val error: Color, val onPrimary: Color, val onSecondary: Color, val onBackground: Color, val onSurface: Color, val onError: Color, val isLight: Boolean )
12. Sidebar Design System Tokens @Stable class Colors( val primary: Color, val primaryVariant: Color, val secondary: Color, val secondaryVariant: Color, val background: Color, val surface: Color, val error: Color, val onPrimary: Color, val onSecondary: Color, val onBackground: Color, val onSurface: Color, val onError: Color, val isLight: Boolean ) @Stable class Colors( val : Color, val : Color, val : Color, val : Color, val : Color, val : Color, val : Color, val : Color, val : Color, val : Color, val : Color, val : Color, val : Boolean )
13. Sidebar Design System Tokens @Stable class Colors( val primary: Color, val primaryVariant: Color, val secondary: Color, val secondaryVariant: Color, val background: Color, val surface: Color, val error: Color, val onPrimary: Color, val onSecondary: Color, val onBackground: Color, val onSurface: Color, val onError: Color, val isLight: Boolean ) @Immutable class Typography( val h1: TextStyle, val h2: TextStyle, val h3: TextStyle, val h4: TextStyle, val h5: TextStyle, val h6: TextStyle, val subtitle1: TextStyle, val subtitle2: TextStyle, val body1: TextStyle, val body2: TextStyle, val button: TextStyle, val caption: TextStyle, val overline: TextStyle )
14. Sidebar Design System Tokens @Stable class Colors( val primary: Color, val primaryVariant: Color, val secondary: Color, val secondaryVariant: Color, val background: Color, val surface: Color, val error: Color, val onPrimary: Color, val onSecondary: Color, val onBackground: Color, val onSurface: Color, val onError: Color, val isLight: Boolean ) @Immutable class Typography( val h1: TextStyle, val h2: TextStyle, val h3: TextStyle, val h4: TextStyle, val h5: TextStyle, val h6: TextStyle, val subtitle1: TextStyle, val subtitle2: TextStyle, val body1: TextStyle, val body2: TextStyle, val button: TextStyle, val caption: TextStyle, val overline: TextStyle ) @Immutable class Typography( val : TextStyle, val : TextStyle, val : TextStyle, val : TextStyle, val : TextStyle, val : TextStyle, val : TextStyle, val : TextStyle, val : TextStyle, val : TextStyle, val : TextStyle, val : TextStyle, val : TextStyle )
15. Sidebar Design System Tokens @Stable class Colors( val primary: Color, val primaryVariant: Color, val secondary: Color, val secondaryVariant: Color, val background: Color, val surface: Color, val error: Color, val onPrimary: Color, val onSecondary: Color, val onBackground: Color, val onSurface: Color, val onError: Color, val isLight: Boolean ) @Immutable class Typography( val h1: TextStyle, val h2: TextStyle, val h3: TextStyle, val h4: TextStyle, val h5: TextStyle, val h6: TextStyle, val subtitle1: TextStyle, val subtitle2: TextStyle, val body1: TextStyle, val body2: TextStyle, val button: TextStyle, val caption: TextStyle, val overline: TextStyle )
16. Compose Material Material Theme Colors Typography Button Text Surface Etc. Shape
17. Compose Material Material Theme Button Text Surface Etc. Colors Typography Shape
18. Material Theme
19. Material Theme
20. Material Theme
21. Material Theme FAB Text Surface Text Image Surface Text Image TopAppBar Material Theme
22. Material Theme FAB Text Surface Text Image Surface Text Image TopAppBar Material Theme
23. Material Theme FAB Text Surface Text Image Surface Text Image TopAppBar Colors Typography Shape Material Theme
24. Material Theme Surface Surface FAB Surface Text Image TopAppBar Colors Typography Shape TopAppBar Surface Text Image Text FAB Material Theme
25. Sidebar CompositionLocal
26. Sidebar CompositionLocal Root
27. Sidebar CompositionLocal Root MaterialTheme
28. Sidebar CompositionLocal Root MaterialTheme Scaffold
29. Sidebar CompositionLocal Root MaterialTheme Scaffold TopAppBar Text ImageButton
30. Sidebar CompositionLocal Root MaterialTheme Scaffold TopAppBar FloatingActionButton Image Text ImageButton
31. Sidebar CompositionLocal Root MaterialTheme Scaffold TopAppBar Content FloatingActionButton Image Text ImageButton
32. Sidebar CompositionLocal Root MaterialTheme Scaffold TopAppBar Content FloatingActionButton Column Row Row Row Text Text Text Image Text ImageButton
33. Sidebar CompositionLocal Root MaterialTheme Scaffold TopAppBar Content FloatingActionButton Column Row Row Row Text Text Text Image Text ImageButton TopAppBar Text FloatingActionButton Image
34. Sidebar CompositionLocal Root MaterialTheme Scaffold TopAppBar Content FloatingActionButton Column Row Row Row Text Text Text Image Text ImageButton TopAppBar Text FloatingActionButton Image CompositionLocalProvider
35. Sidebar CompositionLocalProvider CompositionLocal Root MaterialTheme Scaffold TopAppBar Content FloatingActionButton Column Row Row Row Text Text Text Image Text ImageButton TopAppBar Text FloatingActionButton Image Colors Typography Shape
36. Sidebar CompositionLocalProvider CompositionLocal Root MaterialTheme Scaffold TopAppBar Content FloatingActionButton Column Row Row Row Text Text Text Image Text ImageButton TopAppBar Text FloatingActionButton Image Colors Typography Shape
37. Sidebar CompositionLocal What does Recomposition mean to your app 📍Room 1 🕓 4:00
38. Material Theme Surface Surface FAB Surface Text Image TopAppBar Colors Typography Shape TopAppBar Surface Text Image Text FAB Material Theme
39. Customizing • Customize Material • Extend Material • Replace Material Token Systems • Implement fully-custom design system Material Theme
40. Material Theme Button Text Surface Etc. Colors Typography Shape Customize Material
41. Material Theme Colors Typography Button Text Surface Etc. Shape Customize Material
42. private val LightColors = lightColors( . .. ) private val DarkColors = darkColors( . .. ) @Composable fun MyTheme(content: @Composable () - > Unit) { MaterialTheme( colors = if (isSystemInDarkTheme()) DarkColors else LightColors, shapes = Shapes( small = RoundedCornerShape(0.dp), medium = RoundedCornerShape(0.dp), large = RoundedCornerShape(0.dp) ), content = content ) } Customize Material
43. private val LightColors = lightColors( . .. ) private val DarkColors = darkColors( . .. ) @Composable fun MyTheme MaterialTheme( colors = if (isSystemInDarkTheme()) DarkColors else LightColors, shapes = Shapes( small = RoundedCornerShape(0.dp), medium = RoundedCornerShape(0.dp), large = RoundedCornerShape(0.dp) ), content = content ) } Customize Material (content: @Composable () - > Unit) {
44. private val LightColors = lightColors( . .. ) private val DarkColors = darkColors( . .. ) @Composable fun MyTheme MaterialTheme( colors = if (isSystemInDarkTheme()) DarkColors else LightColors, shapes = Shapes( small = RoundedCornerShape(0.dp), medium = RoundedCornerShape(0.dp), large = RoundedCornerShape(0.dp) ), content = content ) } : @Composable () -> Unit) { Customize Material (content
45. private val LightColors = lightColors( . .. ) private val DarkColors = darkColors( . .. ) @Composable fun MyTheme MaterialTheme( colors = if (isSystemInDarkTheme()) DarkColors else LightColors, shapes = Shapes( small = RoundedCornerShape(0.dp), medium = RoundedCornerShape(0.dp), large = RoundedCornerShape(0.dp) ), content = content ) } : @Composable () -> Unit) { (content Customize Material content
46. private val LightColors = lightColors( . .. ) private val DarkColors = darkColors( . .. ) @Composable fun MyTheme MaterialTheme( colors = if (isSystemInDarkTheme()) DarkColors else LightColors, shapes = Shapes( small = RoundedCornerShape(0.dp), medium = RoundedCornerShape(0.dp), large = RoundedCornerShape(0.dp) ), content = content ) } private val LightColors = lightColors( . .. ) private val DarkColors = darkColors( . .. ) @Composable fun MyTheme(content: @Composable () - > Unit) { MaterialTheme( colors = if (isSystemInDarkTheme()) DarkColors else LightColors, shapes = Shapes( small = RoundedCornerShape(0.dp), medium = RoundedCornerShape(0.dp), large = RoundedCornerShape(0.dp) ), content = content ) } Customize Material : @Composable () -> Unit) { content (content
47. private val LightColors = lightColors( . .. ) private val DarkColors = darkColors( . .. ) @Composable fun MyTheme MaterialTheme( colors = if (isSystemInDarkTheme()) DarkColors else LightColors, shapes = Shapes( small = RoundedCornerShape(0.dp), medium = RoundedCornerShape(0.dp), large = RoundedCornerShape(0.dp) ), content = content ) } private val LightColors = lightColors( . .. ) private val DarkColors = darkColors( . .. ) @Composable fun MyTheme(content: @Composable () - > Unit) { MaterialTheme( colors = if (isSystemInDarkTheme()) DarkColors else LightColors, shapes = Shapes( small = RoundedCornerShape(0.dp), medium = RoundedCornerShape(0.dp), large = RoundedCornerShape(0.dp) ), content = content ) } Customize Material : @Composable () >
48. private val LightColors = lightColors( . .. ) private val DarkColors = darkColors( . .. ) @Composable fun MyTheme(content: @Composable () - > Unit) { MaterialTheme( colors = if (isSystemInDarkTheme()) DarkColors else LightColors, shapes = Shapes( small = RoundedCornerShape(0.dp), medium = RoundedCornerShape(0.dp), large = RoundedCornerShape(0.dp) ), content = content ) } Customize Material
49. private val LightColors = lightColors( . .. ) private val DarkColors = darkColors( . .. ) @Composable fun MyTheme(content: @Composable () - > Unit) { MaterialTheme( colors = if (isSystemInDarkTheme()) DarkColors else LightColors, shapes = Shapes( small = RoundedCornerShape(0.dp), medium = RoundedCornerShape(0.dp), large = RoundedCornerShape(0.dp) ), content = content ) } Customize Material
50. private val LightColors = lightColors( . .. ) private val DarkColors = darkColors( . .. ) @Composable fun MyTheme(content: @Composable () - > Unit) { MaterialTheme( colors = if (isSystemInDarkTheme()) DarkColors else LightColors, shapes = Shapes( small = RoundedCornerShape(0.dp), medium = RoundedCornerShape(0.dp), large = RoundedCornerShape(0.dp) ), content = content ) } Customize Material
51. private val LightColors = lightColors( . .. ) private val DarkColors = darkColors( . .. ) @Composable fun MyTheme(content: @Composable () - > Unit) { MaterialTheme( colors = if (isSystemInDarkTheme()) DarkColors else LightColors, shapes = Shapes( small = RoundedCornerShape(0.dp), medium = RoundedCornerShape(0.dp), large = RoundedCornerShape(0.dp) ), content = content ) } Customize Material @Composable
52. fun MyApp() { MaterialTheme { . .. } }
53. fun MyApp() { MyTheme { . .. } }
54. Customizing • Customize Material • Extend Material • Replace Material Token Systems • Implement fully-custom design system Material Theme
55. Extend Material
56. Extend Material (super simple) val Colors.snackbarAction: Color get() = if (isLight) Red300 else Red700 val Typography.textFieldInput: TextStyle get() = TextStyle( / * ... */ ) val Shapes.card: Shape get() = RoundedCornerShape(size = 20.dp)
57. Extend Material (super simple) val Colors.snackbarAction: Color get() = if (isLight) Red300 else Red700 val Typography.textFieldInput: TextStyle get() = TextStyle( / * ... */ ) val Shapes.card: Shape get() = RoundedCornerShape(size = 20.dp)
58. Extend Material (super simple) val Colors.snackbarAction: Color get() = if (isLight) Red300 else Red700 val Typography.textFieldInput: TextStyle get() = TextStyle( / * ... */ ) val Shapes.card: Shape get() = RoundedCornerShape(size = 20.dp) val Colors.snackbarAction: Color get() = if (isLight) Red300 else Red700 val Typography.textFieldInput: TextStyle get() = TextStyle( / * ... */ ) val Shapes.card: Shape get() = RoundedCornerShape(size = 20.dp)
59. Extend Material (super simple) val Colors.snackbarAction: Color get() = if (isLight) Red300 else Red700 val Typography.textFieldInput: TextStyle get() = TextStyle( / * ... */ ) val Shapes.card: Shape get() = RoundedCornerShape(size = 20.dp)
60. Extend Material
61. @Immutable data class ExtendedColors( val tertiary: Color, val onTertiary: Color ) val LocalExtendedColors = staticCompositionLocalOf {
62. @Immutable ExtendedColors( tertiary = Color.Unspecified, onTertiary = Color.Unspecified ) } @Composable
63. fun ExtendedTheme( /* .. . * / content: @Composable () - > Unit ) { val extendedColors = ExtendedColors( tertiary = Color(0xFFA8EFF0), onTertiary = Color(0xFF002021) ) CompositionLocalProvider(LocalExtendedColors provides extendedColors) { MaterialTheme( /* colors = ... , typography = .. . , shapes = .. . */ content = content ) } } Extend Material
64. fun ExtendedTheme( /* .. . * / content: @Composable () - > Unit ) { val extendedColors = ExtendedColors( tertiary = Color(0xFFA8EFF0), onTertiary = Color(0xFF002021) ) CompositionLocalProvider(LocalExtendedColors provides extendedColors) { MaterialTheme( /* colors = ... , typography = .. . , shapes = .. . */ content = content ) } } Extend Material
65. fun ExtendedTheme( /* .. . * / content: @Composable () - > Unit ) { val extendedColors = ExtendedColors( tertiary = Color(0xFFA8EFF0), onTertiary = Color(0xFF002021) ) CompositionLocalProvider(LocalExtendedColors provides extendedColors) { MaterialTheme( /* colors = ... , typography = .. . , shapes = .. . */ content = content ) } } Extend Material
66. fun ExtendedTheme( /* .. . * / content: @Composable () - > Unit ) { val extendedColors = ExtendedColors( tertiary = Color(0xFFA8EFF0), onTertiary = Color(0xFF002021) ) CompositionLocalProvider(LocalExtendedColors provides extendedColors) { MaterialTheme( /* colors = ... , typography = .. . , shapes = .. . */ content = content ) } } Extend Material
67. fun ExtendedTheme( /* .. . * / content: @Composable () - > Unit ) { val extendedColors = ExtendedColors( tertiary = Color(0xFFA8EFF0), onTertiary = Color(0xFF002021) ) CompositionLocalProvider(LocalExtendedColors provides extendedColors) { MaterialTheme( /* colors = ... , typography = .. . , shapes = .. . */ content = content ) } } Extend Material
68. fun ExtendedTheme( /* .. . * / content: @Composable () - > Unit ) { val extendedColors = ExtendedColors( tertiary = Color(0xFFA8EFF0), onTertiary = Color(0xFF002021) ) CompositionLocalProvider(LocalExtendedColors provides extendedColors) { MaterialTheme( /* colors = ... , typography = .. . , shapes = .. . */ content = content ) } } Extend Material
69. Extend Material Root MaterialTheme Scaffold TopAppBar Content FloatingActionButton Column Row Row Row Text Text Text Image Text ImageButton CompositionLocalProvider
70. Extend Material Root MaterialTheme Scaffold pAppBar Fl CompositionLocalProvider
71. Extend Material Root MaterialTheme CompositionLocalProvider ExtendedTheme /CompositionLocalProvider/
72. Extend Material Root MaterialTheme CompositionLocalProvider ExtendedTheme /CompositionLocalProvider/ ExtendedColors
73. Extend Material Root MaterialTheme Scaffold TopAppBar Content FloatingActionButton Column Row Row Row Text Text Text Image Text ImageButton CompositionLocalProvider ExtendedTheme /CompositionLocalProvider/
74. Extend Material Root MaterialTheme Scaffold TopAppBar Content FloatingActionButton Column Row Row Row Text Text Image Text ImageButton Text CompositionLocalProvider ExtendedTheme /CompositionLocalProvider/ Text Text
75. Extend Material Root MaterialTheme Scaffold TopAppBar Content FloatingActionButton Column Row Row Row Text Text Image Text ImageButton Text CompositionLocalProvider ExtendedTheme /CompositionLocalProvider/ Text Text
76. fun ExtendedTheme( /* .. . * / content: @Composable () - > Unit ) { val extendedColors = ExtendedColors( tertiary = Color(0xFFA8EFF0), onTertiary = Color(0xFF002021) ) CompositionLocalProvider(LocalExtendedColors provides extendedColors) { MaterialTheme( /* colors = ... , typography = .. . , shapes = .. . */ content = content ) } } Extend Material
77. // Use with eg. ExtendedTheme.colors.tertiary object ExtendedTheme { val colors: ExtendedColors @Composable get() = LocalExtendedColors.current } tertiary = Color(0xFFA8EFF0),
78. object ExtendedTheme { fun ExtendedButton( onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit ) { Button( colors = ButtonDefaults.buttonColors( backgroundColor = ExtendedTheme.colors.tertiary, contentColor = ExtendedTheme.colors.onTertiary /* Other colors use values from MaterialTheme */ ), onClick = onClick, modifier = modifier, content = content ) }
79. object ExtendedTheme { fun ExtendedButton( onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit ) { Button( colors = ButtonDefaults.buttonColors( backgroundColor = ExtendedTheme.colors.tertiary, contentColor = ExtendedTheme.colors.onTertiary /* Other colors use values from MaterialTheme */ ), onClick = onClick, modifier = modifier, content = content ) }
80. object ExtendedTheme { fun ExtendedButton( onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit ) { Button( colors = ButtonDefaults.buttonColors( backgroundColor = ExtendedTheme.colors.tertiary, contentColor = ExtendedTheme.colors.onTertiary /* Other colors use values from MaterialTheme */ ), onClick = onClick, modifier = modifier, content = content ) }
81. object ExtendedTheme { fun ExtendedButton( onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit ) { Button( colors = ButtonDefaults.buttonColors( backgroundColor = ExtendedTheme.colors.tertiary, contentColor = ExtendedTheme.colors.onTertiary /* Other colors use values from MaterialTheme */ ), onClick = onClick, modifier = modifier, content = content ) }
82. object ExtendedTheme { fun ExtendedButton( onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit ) { Button( colors = ButtonDefaults.buttonColors( backgroundColor = ExtendedTheme.colors.tertiary, contentColor = ExtendedTheme.colors.onTertiary /* Other colors use values from MaterialTheme */ ), onClick = onClick, modifier = modifier, content = content ) }
83. Customizing • Customize Material • Extend Material • Replace Material Token Systems • Implement fully-custom design system Material Theme
84. Replace Tokens
85. Replace Tokens @Composable fun CustomTheme( /* .. . * / content: @Composable () - > Unit ) { val customColors = ... val customTypography = .. . val customElevation = CustomElevation( default = 4.dp, pressed = 8.dp ) CompositionLocalProvider( LocalCustomColors provides customColors, LocalCustomTypography provides customTypography, LocalCustomElevation provides customElevation, content = content ) }
86. Replace Tokens @Composable fun CustomTheme( /* .. . * / content: @Composable () - > Unit ) { val customColors = ... val customTypography = .. . val customElevation = CustomElevation( default = 4.dp, pressed = 8.dp ) CompositionLocalProvider( LocalCustomColors provides customColors, LocalCustomTypography provides customTypography, LocalCustomElevation provides customElevation, content = content ) }
87. Replace Tokens @Composable fun CustomTheme( /* .. . * / content: @Composable () - > Unit ) { val customColors = ... val customTypography = .. . val customElevation = CustomElevation( default = 4.dp, pressed = 8.dp ) CompositionLocalProvider( LocalCustomColors provides customColors, LocalCustomTypography provides customTypography, LocalCustomElevation provides customElevation, content = content ) }
88. @Composable fun CustomTheme( /* .. . * / content: @Composable () - > Unit ) { val customColors = ... val customTypography = .. . val customElevation = CustomElevation( default = 4.dp, pressed = 8.dp ) CompositionLocalProvider( LocalCustomColors provides customColors, LocalCustomTypography provides customTypography, LocalCustomElevation provides customElevation, content = content ) } Replace Tokens
89. @Composable fun CustomTheme( /* .. . * / content: @Composable () - > Unit ) { val customColors = ... val customTypography = .. . val customElevation = CustomElevation( default = 4.dp, pressed = 8.dp ) CompositionLocalProvider( LocalCustomColors provides customColors, LocalCustomTypography provides customTypography, LocalCustomElevation provides customElevation, content = content ) } Replace Tokens
90. @Composable fun CustomTheme( /* .. . * / content: @Composable () - > Unit ) { val customColors = ... val customTypography = .. . val customElevation = CustomElevation( default = 4.dp, pressed = 8.dp ) CompositionLocalProvider( LocalCustomColors provides customColors, LocalCustomTypography provides customTypography, LocalCustomElevation provides customElevation, content = content ) } Replace Tokens
91. @Composable fun CustomButton( onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit ) { Button( colors = ButtonDefaults.buttonColors( backgroundColor = CustomTheme.colors.component, contentColor = CustomTheme.colors.content, disabledBackgroundColor = CustomTheme.colors.content .copy(alpha = 0.12f) .compositeOver(CustomTheme.colors.component), disabledContentColor = CustomTheme.colors.content .copy(alpha = ContentAlpha.disabled) ), shape = ButtonShape, LocalCustomColors provides customColors,
92. .copy(alpha = 0.12f) .compositeOver(CustomTheme.colors.component), disabledContentColor = CustomTheme.colors.content .copy(alpha = ContentAlpha.disabled) ), shape = ButtonShape, elevation = ButtonDefaults.elevation( defaultElevation = CustomTheme.elevation.default, pressedElevation = CustomTheme.elevation.pressed ), onClick = onClick, modifier = modifier, content = { ProvideTextStyle( value = CustomTheme.typography.body ) { content() } } ) } Replace Tokens
93. Customizing • Customize Material • Extend Material • Replace Material Token Systems • Implement fully-custom design system Material Theme
94. Custom Theme Compose UI Foundation Compose Material
95. Custom Theme Compose UI Foundation Your Theme Compose Material
96. Custom Theme Compose Material Your Theme
97. Custom Theme Compose Material Colors Typography Shape
98. Custom Theme Compose Material Colors Typography Shape Surface Scaffold AppBar Button Card Checkbox FloatingAction Button Icon ListItem Menu Snackbar Text
99. Custom Theme Compose Material Colors Typography Shape Surface Scaffold AppBar Button Card Checkbox FloatingAction Button Icon ListItem Menu Snackbar Text
100. Custom Theme Compose Material Colors Typography Shape Surface Scaffold AppBar Button Card Checkbox FloatingAction Button Icon ListItem Menu Snackbar Text
101. Custom Theme Compose Material Colors Typography Shape Surface Scaffold AppBar Button Card Checkbox FloatingAction Button Icon ListItem Menu Snackbar Text
102. Surface
103. CompositionLocalProvider( LocalContentColor provides contentColor, LocalAbsoluteTonalElevation provides absoluteElevation ) { Box @Composable fun Surface( @Composable fun Surface( modifier: Modifier = Modifier, content: @Composable () - > Unit ) { content() } { } } Surface
104. CompositionLocalProvider( color: Color = MaterialTheme.colorScheme.surface, contentColor: Color = contentColorFor(color), tonalElevation: Dp = 0.dp, shadowElevation: Dp = 0.dp, border: BorderStroke? = null, content: @Composable ()
105. CompositionLocalProvider(
106. ( modifier = modifier .shadow(shadowElevation, shape, clip = false) .then(if (border != null) Modifier.border(border, shape) else Modifier) .background( color = surfaceColorAtElevation(color, absoluteElevation), shape = shape ) .clip(shape) .semantics(mergeDescendants = false) {}, propagateMinConstraints = true ) content: @Composable ()
107. ( modifier = modifier .shadow(shadowElevation, shape, clip = false) != @Composable fun Surface( modifier: Modifier = Modifier, shape: Shape = RectangleShape, color: Color = MaterialTheme.colorScheme.surface, contentColor: Color = contentColorFor(color), tonalElevation: Dp = 0.dp, shadowElevation: Dp = 0.dp, border: BorderStroke? = null, content: @Composable () - > Unit ) { val absoluteElevation = LocalAbsoluteTonalElevation.current + tonalElevation CompositionLocalProvider( LocalContentColor provides contentColor, LocalAbsoluteTonalElevation provides absoluteElevation ) { Box Surface
108. Custom Theme Compose Material Colors Typography Shape Surface Scaffold AppBar Button Card Checkbox FloatingAction Button Icon ListItem Menu Snackbar Text
109. Custom Theme Compose Material Colors Typography Shape Surface Scaffold AppBar Button Card Checkbox FloatingAction Button Icon ListItem Menu Snackbar Text
110. Card
111. Card @Composable fun Card( modifier: Modifier = Modifier, shape: Shape = MaterialTheme.shapes.medium, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor), border: BorderStroke? = null, elevation: Dp = 1.dp, content: @Composable () - > Unit ) { Surface( modifier = modifier, shape = shape, color = backgroundColor, contentColor = contentColor, elevation = elevation, border = border, content = content ) }
112. Card @Composable fun Card( modifier: Modifier = Modifier, shape: Shape = MaterialTheme.shapes.medium, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor), border: BorderStroke? = null, elevation: Dp = 1.dp, content: @Composable () - > Unit ) { Surface( modifier = modifier, shape = shape, color = backgroundColor, contentColor = contentColor, elevation = elevation, border = border, content = content ) }
113. Card @Composable fun Card( modifier: Modifier = Modifier, shape: Shape = MaterialTheme.shapes.medium, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor), border: BorderStroke? = null, elevation: Dp = 1.dp, content: @Composable () - > Unit ) { Surface( modifier = modifier, shape = shape, color = backgroundColor, contentColor = contentColor, elevation = elevation, border = border, content = content ) }
114. Card @Composable fun Card( modifier: Modifier = Modifier, shape: Shape = MaterialTheme.shapes.medium, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor), border: BorderStroke? = null, elevation: Dp = 1.dp, content: @Composable () - > Unit ) { Surface( modifier = modifier, shape = shape, color = backgroundColor, contentColor = contentColor, elevation = elevation, border = border, content = content ) }
115. Card @Composable fun Card( modifier: Modifier = Modifier, shape: Shape = MaterialTheme.shapes.medium, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor), border: BorderStroke? = null, elevation: Dp = 1.dp, content: @Composable () - > Unit ) { Surface( modifier = modifier, shape = shape, color = backgroundColor, contentColor = contentColor, elevation = elevation, border = border, content = content ) }
116. Card @Composable fun Card( modifier: Modifier = Modifier, shape: Shape = MaterialTheme.shapes.medium, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor), border: BorderStroke? = null, elevation: Dp = 1.dp, content: @Composable () - > Unit ) { Surface( modifier = modifier, shape = shape, color = backgroundColor, contentColor = contentColor, elevation = elevation, border = border, content = content ) }
117. Custom Theme Compose Material Colors Typography Shape Surface Scaffold AppBar Button Card Checkbox FloatingAction Button Icon ListItem Menu Snackbar Text
118. Custom Theme Compose Material Colors Typography Shape Surface Scaffold AppBar Button Card Checkbox FloatingAction Button Icon ListItem Menu Snackbar Text
119. Button
120. @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit ) { Surface( onClick = onClick, modifier = modifier, ) { Row( content = content ) } } Button
121. @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, elevation: ButtonElevation? = ButtonDefaults.elevation(), shape: Shape = MaterialTheme.shapes.small, border: BorderStroke? = null, colors: ButtonColors = ButtonDefaults.buttonColors(), contentPadding: PaddingValues = ButtonDefaults.ContentPadding, content: @Composable RowScope.() -> Unit ) { Surface( onClick = onClick, modifier = modifier, ) { Row( content = content ) Button
122. enabled: Boolean = true, onClick = onClick, modifier = modifier, enabled = enabled, shape = shape, color = colors.backgroundColor(enabled).value, contentColor = contentColor.copy(alpha = 1f), border = border, elevation = elevation ?. elevation(enabled, interactionSource) ?. value ?: 0.dp, interactionSource = interactionSource, ) { Row( content = content ) } Button
123. val contentColor by colors.contentColor(enabled) Surface(
124. Surface( value = MaterialTheme.typography.button ) { Row( content = content ) } } } } Button
125. color = colors.backgroundColor(enabled).value, .defaultMinSize( minWidth = ButtonDefaults.MinWidth, minHeight = ButtonDefaults.MinHeight ) .padding(contentPadding), content = content ) } } } } Button
126. verticalAlignment = Alignment.CenterVertically, content = content ) } } } } Button
127. @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, elevation: ButtonElevation? = ButtonDefaults.elevation(), shape: Shape = MaterialTheme.shapes.small, border: BorderStroke? = null, colors: ButtonColors = ButtonDefaults.buttonColors(), contentPadding: PaddingValues = ButtonDefaults.ContentPadding, content: @Composable RowScope.() -> Unit ) { val contentColor by colors.contentColor(enabled) Surface( onClick = onClick, modifier = modifier, enabled = enabled, @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, elevation: ButtonElevation? = ButtonDefaults.elevation(), shape: Shape = MaterialTheme.shapes.small, border: BorderStroke? = null, colors: ButtonColors = ButtonDefaults.buttonColors(), contentPadding: PaddingValues = ButtonDefaults.ContentPadding, content: @Composable RowScope.() -> Unit ) { val contentColor by colors.contentColor(enabled) Surface( onClick = onClick, modifier = modifier, enabled = enabled, Button
128. Custom Theme Compose Material Colors Typography Shape Surface Scaffold AppBar Button Card Checkbox FloatingAction Button Icon ListItem Menu Snackbar Text
129. Custom Theme Compose Material Colors Typography Shape Surface Scaffold AppBar Button Card Checkbox FloatingAction Button Icon ListItem Menu Snackbar Text
130. @Dropbox
131. Where we started • Already have design system • Color Tokens • Typography Tokens • Components
132. Goals • Get started fast • Easy to use (no cheat sheet) • Access to all of the existing Material composables • Use Compose while implementing design system • Incrementally migrate away from Material
133. • Customize Material • Extend Material • Replace Material Token Systems • Implement fully-custom design system Customizing Material Theme
134. • Customize Material • Extend Material • Wrap Material • Replace Material Token Systems • Implement fully-custom design system Customizing Material Theme
135. • Customize Material • Extend Material • Wrap Material Customizing Material Theme • Replace Material Token Systems • Implement fully-custom design system
136. Wrap Material
137. @Stable class Colors( primary: Color, secondary: Color, accent: Color, buttonPrimaryHover: Color, buttonPrimaryActive: Color, … )
138. /** * Converts the Dig colors to Material colors, so that standard Material * composables use Dig colors out of the box. */ internal fun Colors.toMaterialColors(): MaterialColors = MaterialColors( primary = accent, primaryVariant = accent, secondary = accent, secondaryVariant = accent, background = standard.background, surface = standard.background, error = alert.text, onPrimary = if (isLight) secondary else standard.text, onSecondary = if (isLight) standard.text else secondary, onBackground = standard.text, onSurface = standard.text, onError = if (isLight) secondary else standard.text, isLight = isLight, ) Wrap Material
139. @Immutable data class Typography internal constructor( val titleLarge: TextStyle, val titleStandard: TextStyle, val titleSmall: TextStyle, val labelXLarge: TextStyle, … ) internal fun Typography.toMaterialTypography(): MaterialTypography = MaterialTypography(
140. val titleLarge: TextStyle, defaultFontFamily = DefaultFontFamily, h1 = titleLarge, h2 = titleLarge, h3 = titleLarge, h4 = titleLarge, h5 = titleStandard, h6 = titleStandard.copy(fontWeight = FontWeight.Medium), subtitle1 = paragraphLarge, subtitle2 = paragraphStandard, body1 = paragraphLarge, body2 = paragraphStandard, button = labelLarge.copy(fontWeight = FontWeight.Medium, lineHeight = 24.sp), caption = labelSmall, overline = labelXSmall, ) Wrap Material
141. Wrap Material @Composable fun DigTheme( typography: Typography = DigTheme.typography, colors: Colors = DigTheme.colors, content: @Composable () - > Unit ) { val rememberedColors = … CompositionLocalProvider( LocalColors provides rememberedColors, LocalTypography provides typography ) { MaterialTheme( colors = rememberedColors.toMaterialColors(), typography = typography.toMaterialTypography(), shapes = …, content = content ) } }
142. Wrap Material @Composable fun DigTheme( typography: Typography = DigTheme.typography, colors: Colors = DigTheme.colors, content: @Composable () - > Unit ) { val rememberedColors = … CompositionLocalProvider( LocalColors provides rememberedColors, LocalTypography provides typography ) { MaterialTheme( colors = rememberedColors.toMaterialColors(), typography = typography.toMaterialTypography(), shapes = …, content = content ) } }
143. Wrap Material @Composable fun DigTheme( typography: Typography = DigTheme.typography, colors: Colors = DigTheme.colors, content: @Composable () - > Unit ) { val rememberedColors = … CompositionLocalProvider( LocalColors provides rememberedColors, LocalTypography provides typography ) { MaterialTheme( colors = rememberedColors.toMaterialColors(), typography = typography.toMaterialTypography(), shapes = …, content = content ) } }
144. Wrap Material @Composable fun DigTheme( typography: Typography = DigTheme.typography, colors: Colors = DigTheme.colors, content: @Composable () - > Unit ) { val rememberedColors = … CompositionLocalProvider( LocalColors provides rememberedColors, LocalTypography provides typography ) { MaterialTheme( colors = rememberedColors.toMaterialColors(), typography = typography.toMaterialTypography(), shapes = …, content = content ) } }
145. Wrap Material @Composable fun DigTheme( typography: Typography = DigTheme.typography, colors: Colors = DigTheme.colors, content: @Composable () - > Unit ) { val rememberedColors = … CompositionLocalProvider( LocalColors provides rememberedColors, LocalTypography provides typography ) { MaterialTheme( colors = rememberedColors.toMaterialColors(), typography = typography.toMaterialTypography(), shapes = …, content = content ) } }
146. Wrap Material @Composable fun DigTheme( typography: Typography = DigTheme.typography, colors: Colors = DigTheme.colors, content: @Composable () - > Unit ) { val rememberedColors = … CompositionLocalProvider( LocalColors provides rememberedColors, LocalTypography provides typography ) { MaterialTheme( colors = rememberedColors.toMaterialColors(), typography = typography.toMaterialTypography(), shapes = …, content = content ) } }
147. Wrap Material @Composable fun DigTheme( typography: Typography = DigTheme.typography, colors: Colors = DigTheme.colors, content: @Composable () - > Unit ) { val rememberedColors = … CompositionLocalProvider( LocalColors provides rememberedColors, LocalTypography provides typography ) { MaterialTheme( colors = rememberedColors.toMaterialColors(), typography = typography.toMaterialTypography(), shapes = …, content = content ) } }
148. Wrap Material @Composable fun DigTheme( typography: Typography = DigTheme.typography, colors: Colors = DigTheme.colors, content: @Composable () - > Unit ) { val rememberedColors = … CompositionLocalProvider( LocalColors provides rememberedColors, LocalTypography provides typography ) { MaterialTheme( colors = rememberedColors.toMaterialColors(), typography = typography.toMaterialTypography(), shapes = …, content = content ) } }
149. Wrap Material DigTheme { }
150. Wrap Material DigTheme { Row { Button(onClick = { }) { Text("Button") } Button( onClick = { }, enabled = false ) { Text("Disabled") } } }
151. Wrap Material DigTheme { Row { Button(onClick = { }) { Text("Button") } Button( onClick = { }, enabled = false ) { Text("Disabled") } } }
152. Migration • Not all Material elements perform like we expect • Ex. TopAppBar uses accent color, we use surface color. • Mitigate by creating custom composables • Which implementation to use?
153. Migration Button() TextButton() OutlinedButton() FloatingActionButton() Switch() Checkbox() RadioButton() Text() TextField() LinearProgressIndicator() Card() Button() TextButton() OutlinedButton() FloatingActionButton() Switch() Checkbox() RadioButton() Text() TextField() LinearProgressIndicator() Card() TopAppBar() NavigationBar()
154. dependencies { api(libs.androidx.compose.ui) api(libs.androidx.compose.runtime) api(libs.androidx.compose.foundation) api(libs.androidx.compose.material) implementation(libs.androidx.activity.activity.compose) implementation(libs.androidx.compose.animation) implementation(libs.androidx.lifecycle.lifecycle.viewmodel.compose) implementation(libs.androidx.compose.ui.ui.tooling.preview) debugImplementation(libs.androidx.compose.ui.ui.tooling) } Migration
155. dependencies { api(libs.androidx.compose.ui) api(libs.androidx.compose.runtime) api(libs.androidx.compose.foundation) api(libs.androidx.compose.material) implementation(libs.androidx.activity.activity.compose) implementation(libs.androidx.compose.animation) implementation(libs.androidx.lifecycle.lifecycle.viewmodel.compose) implementation(libs.androidx.compose.ui.ui.tooling.preview) debugImplementation(libs.androidx.compose.ui.ui.tooling) } dependencies { api(libs.androidx.compose.ui) api(libs.androidx.compose.runtime) api(libs.androidx.compose.foundation) implementation(libs.androidx.compose.material) implementation(libs.androidx.activity.activity.compose) implementation(libs.androidx.compose.animation) implementation(libs.androidx.lifecycle.lifecycle.viewmodel.compose) implementation(libs.androidx.compose.ui.ui.tooling.preview) debugImplementation(libs.androidx.compose.ui.ui.tooling) } Migration
156. Progress Implement Theme Audit Components Remove Material
157. Progress Implement Theme Audit Components Remove Material Implement Theme Audit Components
158. Ryan Harter @RHARter https://www.dropbox.com/jobs Work with me
159. Ryan Harter @RHARter Custom Design Systems in Jetpack Compose UI