https://kotlinlang.org logo
#compose
Title
# compose
m

molikto

04/21/2020, 3:14 AM
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.
l

Louis Pullen-Freilich [G]

04/21/2020, 1:41 PM
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:
Copy code
@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.
m

molikto

04/21/2020, 1:57 PM
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
Also it is counterintuitive to me if that "high" is lower than default.
l

Louis Pullen-Freilich [G]

04/21/2020, 2:04 PM
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.
m

molikto

04/21/2020, 2:08 PM
Thanks!