[BLOG POST] Compose Unstyled: The missing Design System layer for Compose UI

[alexstyl]

I just published a new blog post about Compose Unstyled:

Compose Unstyled: The missing Design System layer for Compose UI

Opened this Discussion for anyone that wants to leave their thoughts, comments or feedback on the article.

[vysarafanov]

Thx a lot for the article.
I would like to discuss a little bit.

In my current project I experimented a lot to identify the way how to leverage the design tokens during the migration from Views to Composable. I want to share the findings, may be it will help somebody to migrate to the Compose.

Let's say

• we have a spacings - S, M, L
• Xml theme contains 3 attributes - spacingS, spacingM, spacingL
• there is no Composable theme for now, but plan to be implemented in the future

Given this information, it becomes quite difficult to create a theme as the article says, without context, we don't have access to the raw values. How I solved it:

enum class Spacing {
 S, M, L
}

val Spacing.value: Dp
    @Composable
    get() = with(LocalContext.current) {
        LocalDensity.current.run {
            when (this@value) {
                Spacing.S -> R.attr.spacingS
                Spacing.M -> R.attr.spacingM
                Spacing.L -> R.attr.spacingL
            }.getThemeAttribute(this).toDp()
        }
    }

and the usage of the Spacing looks like:

Box(modifier = Modifier.padding(Spacing.S.value))

Same was done for the aspect ration, colors, typographies, etc.
Finally when the Xml Theme will be replaced to the Compose version what needs is just to update/reimplement the value function per each design token class.

[vysarafanov]

additional benefit is that you can use those semantic tokens outside of the Composable functions if you want/need.

enum class MyTypography / MyColor / MySpacing / etc.

MessageUiModel(
    val text: String,
    val style: MyTypography = MyTypography.Body,
    val color: MyColor = MyTypography.Primary,
)

[alexstyl]

@vysarafanov Compose Unstyle's buildTheme {} function gives you a composable scope, so you can get a reference to your XML theme from there.

Here is how you would use your existing XML theme attributes:

val spacing = ThemeProperty<Dp>("spacing")
val small = ThemeToken<Dp>("small")
val medium = ThemeToken<Dp>("medium")
val large = ThemeToken<Dp>("large")

@Composable
fun Resources.Theme.resolveDp(attr: Int): Dp {
    val density = LocalDensity.current

    return remember(density, attr) {

        val typedValue = TypedValue()
        resolveAttribute(attr, typedValue, false)
        with(density) {
            typedValue.getDimension(resources.displayMetrics).toDp()
        }
    }
}

val MyTheme = buildTheme {
    val context = LocalContext.current
    val xmlTheme = context.theme

    properties[spacing] = mapOf(
        small to xmlTheme.resolveDp(R.attr.spacingS),
        medium to xmlTheme.resolveDp(R.attr.spacingM),
        large to xmlTheme.resolveDp(R.attr.spacingL),
    )
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MyTheme {
                Column {
                    Text("Small = ${Theme[spacing][small]}")
                    Text("Medium = ${Theme[spacing][medium]}")
                    Text("Large = ${Theme[spacing][large]}")
                }
            }
        }
    }
}

[alexstyl]

Heads up. This is now officially supported in 1.40.0 (https://composables.com/blog/compose-unstyled-1.40.0)

[vysarafanov]

Looks nice, thank you for the update 🥳