Question: textstyle, content color, emphasis, how ...

# compose

[molikto]

Question: textstyle, content color, emphasis, how they interact? and what's the intended use of them collaboratively? for example currently the default light Material Theme use a 0x000000 content color, I would expect Text pick up a Emphasis.high, so the actual content color for Text is not pure black.

[Louis Pullen-Freilich [G]]

Good question 🙂

Emphasis.high is not a default, the default is no emphasis level, i.e 100% alpha.

Content color represents the raw / unmodified color to be used in a component / hierarchy. For example, if the background is black, then content color is probably white. Content color is not Material specific, and lives in ui-foundation , which allows generic components like Text and Icon to consume this by default, so they will have the correct color for different backgrounds.

Emphasis is a Material specific transformation of content color, essentially applying alpha to the existing content color, and providing the newly modified content color to children. This allows components to apply different emphasis levels to their content, to emphasize / de-emphasize subcomponents as needed.

TextStyle is just a collection of properties used to style a Text, so it's not really that related to content color - you can explicitly set color in TextStyle to override the content color / emphasis, but most of the time you probably want to use / set content color.

The intended use of this is something like:

@Composable 
fun IconListItem(icon, label...) {
// Provide red as the content color
Providers(ContentColorAmbient provides Color.Red) {
Row {  
// Provide medium emphasis for the icon                 ProvideEmphasis(emphasisLevels.medium) {
    icon()
}
// Provide high emphasis for the label
ProvideEmphasis(emphasisLevels.high) {
    label()
}
}
}
}

Does this make sense? In general we need to write more tutorials / guidance / docs around this, as it's not very visible right now.

[molikto]

Thanks for the this! I think I am confused if I need to have an Emphasis level for ALL texts. I don't know if the expected usage is default contentColor = Color.Black, then all text pick a non-None Emphasis level. I thought it this way because it seems, the Material Design page itself uses https://material.io/design/color/text-legibility.html#text-backgrounds text color #333333 as the darkest body text color, and this would be consistent with what I describled. (body text with High Emphasis will be about this color if content color is set to Black

[molikto]

Also it is counterintuitive to me if that "high" is lower than default.

[Louis Pullen-Freilich [G]]

Yes, high vs default is confusing, might be worth renaming something here.

The guidance there is a suggestion, so I think it's quite implementation specific - you don't have to use emphasis for all text, I think for colored surfaces though you should to preserve contrast ratios.

[molikto]

Thanks!