Material-components-web: Add missing typography color contrast / text colors

[joshunger]

Would it be possible to add the missing typography color contrast / text colors outlined on https://material.io/guidelines/style/typography.html#typography-other-typographic-guidelines. For example, caption is 54%, body1 is 87%, etc.

I couldn't find documentation that these exist on https://material-components-web.appspot.com/typography.html.

Looks like color contrast in MDL was implemented in https://github.com/google/material-design-lite/blob/mdl-1.x/src/_mixins.scss using opacity

[amsheehan]

This seems reasonable. Would you mind creating a PR for it?

[touficbatache]

I can do it :smiley: Should I add it using mixins? (I'm not really familiar with them :sweat_smile:) @amsheehan

[amsheehan]

NOTE: Cross posting from Discord for the sake of posterity

All you'll have to do is add to the existing map of typographic styles in mdc-typography/_variables.scss. Make sure that what you're adding is spec aligned and it should all be good.

[touficbatache]

So the typography should have a fixed color contrast/opacity that cannot be changed. Correct?

[touficbatache]

Should I create a new map? If yes, how should I name 54% and 87%? If not, I'm not sure how to proceed: could you please post a sample code? @amsheehan

[lynnmercier]

I think we're already handling this in MDC Theme

https://github.com/material-components/material-components-web/blob/c509e7da32e8c14e29526b5e20bea68d98b2fe84/packages/mdc-theme/_variables.scss#L35

I'm afraid if we add opacity: .87 to MDC Typography, it will clash with the existing rgba(0, 0, 0, 0.87)

@joshunger can you just add the CSS class mdc-theme--text-primary-on-dark to whatever element has mdc-typography--body1? And achieve the same effect?

[joshunger]

@lynnjepsen Yeah rgba is better than opacity. Adding mdc-theme--text-primary-on-dark or mdc-theme--text-secondary-on-dark should achieve the same effect and could be a workaround. Does this cause any confusion to the end user? How do they need to know to apply mdc-theme--text-secondary-on-dark for a caption but mdc-theme--text-primary-on-dark for body1, etc.?

[lynnmercier]

It is confusing...I'm confused...I'm going to talk with our designers more and see if I can clarify when you use the typographic system, and when you use the color theming system

[yeelan0319]

Pasting this from the PR that @touficbatache had.

TL;DR: Text contrast (color) is about text hierarchy but not simply correlate to text size. We cannot simply associate certain typography size with contrast but need to look at larger context. So here I am closing this PR.

A little bit longer version about the discussion:
Here is a paragraph on design guideline - color section:

The most important text has an opacity of 87%.
Secondary text, which is lower in the visual hierarchy, has an opacity of 54%.

However, importance is a ambiguous idea. It is highly correlated with the actual environment and context that the typography is being used for. So we cant make a hard and fast rule, based on the typescale and sizing, what should always inherit 87% and what inherits 54%. And for our pre-defined components, it do have a clear hierarchy within its scope, which enabled us to assign a color contrast to them. A good example could be mdc-card.

We are very grateful that you helped us surface this ambiguity from our design guideline even though we cannot accept this PR. It is a very good find out and we definitely will put further thoughts into our future guidelines.

[joshunger]

I ended up adding mdc-theme--text-primary-on-light by doing the following steps -

1. yarn add @material/theme
2. import '@material/theme/dist/mdc.theme.min.css';
3. Added mdc-theme--text-primary-on-light where necessary.