RFC: material typography spec v2

This is a proposal for a migration path from the v1 typography spec to v2.

Breaking changes

• every variant will have a primary color. The spec does not list color as a property of typography.
• removes the following variants:
  • display1
  • display2
  • display3
  • display4
  • headline
  • title
  • subheading
• changes the style of the following variants:
  • body1
  • body2
  • caption
  • button

Implementation

Color

The spec does not mention color. Use primary by default and apply color manually on every usage.

Variant Name

Use names from spec but use headlineX instead of hX which matches mwc implementation

Roadmap

• new minor (implemented with #12916, scheduled for 3.2.0):
  • add new variants from the spec, conflicting names will be suffixed with Next
  • ~set suppressDeprecationWarning on every internal Typography usage to suppress warnings. They are for the user not the dev.~ Users should be warned if an internal component uses a deprecated variant. Recommend setting useNextVariants per component.
  • show deprecation warnings for categories that will be removed or restyled in a new minor version
  • expose useNextVariants to Typography. This will use the style of variants in the next major (~only concerns variants that will be restyled~ for all variants so that using useNextVariants has no breaking change when switching to new major)
  • update typescript definitions
  • recommend new variants and colors that should replace deprecated variants
  • Update docs to use typography v2
• new major with:
  • useNextVariants, suppressDeprecationWarning will become noop props
  • write codemod for migration:
    • remove useNextVariants, suppressDeprecationWarning props
    • apply new variants and colors according to recommendation
  • refactor internal usage of Typography, use codemod
  • remove old variants
• new minor with:
  • warn when using useNextVariants, suppressDeprecationWarning because noop

If we don’t consider style changes a breaking change we can skip the hole suppressDeprecationWarning step which reduces the workload but is probably annoying for users that aim at pixel perfect apps.

Misc

Spec:

• https://material.io/design/typography/the-type-system.html
• https://material.io/design/typography/understanding-typography.html

Existing Implementations:

• https://github.com/material-components/material-components-web/blob/master/packages/mdc-typography/_variables.scss

Related:

• #12377
• #11667

@oliviertassinari Could you ping core contributors?

[nathanmarks]

I say we just include the deprecation warnings and remove them in the next major.

[oliviertassinari]

https://betterwebtype.com/rhythm-in-web-typography