Rethinking Typography components based on Radix

[cirdes]

Context

In Shadcn, Typography isn't implemented as components. There is an issue requesting Typography to become a component.

One of the most unexpected behaviors is the <P> tag having a mt-6 class, which adds a margin to the <p> element. Due to this margin, we are unable to use it as is.

Current Typography

We currently have the following components in RbUI and Shadcn:

• H1
• H2
• H3
• H4
• P
• Blockquote
• List
• Inline code
• Lead
• Large
• Small
• Muted

The Inline Link is only present in RbUI, and table is only present in Shadcn.

What should we do?

We should follow Radix’s Typography definition, as presented here: https://www.radix-ui.com/themes/docs/theme/typography, and establish conventions based on Grommet to allow for predefined levels.

Radix defines Text, which can be rendered as "span" | "div" | "label" | "p", and Heading, which can be rendered as "h1" | "h2" | "h3" | "h4" | "h5" | "h6". Both Text and Heading follow the same size and weight scale.

For size, it ranges from:

For weight, it defines:

Light | Regular | Medium | Bold

The migration

• TypographyH1 -> Heading(level: "1") or Heading(as: "h1", size: "6")
  Change font-size from 30px -> 24px
• TypographyH2 -> Heading(level: "2") or Heading(as: "h2", size: "5")
  Change font-size from 24px -> 20px
• TypographyH3 -> Heading(level: "3") or Heading(as: "h3", size: "4")
  Change font-size from 20px -> 18px
• TypographyH4 -> Heading(level: "4") or Heading(as: "h4", size: "3")
  Change font-size from 18px -> 16px
• TypographyP -> Text
  The TypographyP only defines line-height. With Text, we will be able to use size and customize its sizes.

Additional Changes

• Blockquote will be removed.
• List will be removed.
• If we want to keep Inline code, it should be a standalone component since it wraps around text and isn't typography itself.
• Lead -> Text
• Large -> Text
• Small -> Text
• Muted -> Text

@sethhorsley , let me know what do you think about it. I'm planning to work on that next!

[sethhorsley]

Yeah this is a good proposal. I have a semi working version I will push here

[pierry01]

That's great! It will be very easy to remember just Heading and Text instead of TypographyP, TypographyLarge, TypographyXYZ, etc.....

I like the syntax of INTEGER level -> Heading(level: 1) and Text(level: 3)

[sethhorsley]

closes #150