Skip to content

Implement an easier way to modify the default typography #1239

@mlaursen

Description

@mlaursen

Description

Update the typography behavior so that the different typography parts can be updated with non-global variables.

  • $rmd-typography-default-headline-1-styles
  • $rmd-typography-headline-1-styles
  • $rmd-typography-default-headline-2-styles
  • $rmd-typography-headline-2-styles
  • $rmd-typography-default-headline-3-styles
  • $rmd-typography-headline-3-styles
  • $rmd-typography-default-headline-4-styles
  • $rmd-typography-headline-4-styles
  • $rmd-typography-default-headline-5-styles
  • $rmd-typography-headline-5-styles
  • $rmd-typography-default-headline-6-styles
  • $rmd-typography-headline-6-styles
  • $rmd-typography-default-body-1-styles
  • $rmd-typography-body-1-styles
  • $rmd-typography-default-body-2-styles
  • $rmd-typography-body-2-styles
  • $rmd-typography-default-button-styles
  • $rmd-typography-button-styles
  • $rmd-typography-default-caption-styles
  • $rmd-typography-caption-styles
  • $rmd-typography-default-overline-styles
  • $rmd-typography-overline-styles

Ideal API

@use "react-md" as * with (
  $rmd-typography-headline-1-styles: (
    font-size: 4rem,
    line-height: 4rem,
    margin: 0,
  ),
  $rmd-typography-headline-2-styles: (
    font-size: 3.5rem,
    line-height: 3.5rem,
    margin: 0,
  ),
  $rmd-typography-headline-3-styles: (
    margin: 0,
  ),
  $rmd-typography-headline-4-styles: (
    margin: 0,
  ),
  $rmd-typography-headline-5-styles: (
    margin: 0,
  ),
  $rmd-typography-headline-6-styles: (
    margin: 0,
  ),
  $rmd-typography-subtitle-1-styles: (),
  $rmd-typography-subtitle-2-styles: (),
  $rmd-typography-body-1-styles: (),
  $rmd-typography-body-2-styles: (),
  $rmd-typography-caption-styles: (),
  $rmd-typography-button-styles: (),
  $rmd-typography-overline-styles: (),
);

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions