You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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!
The text was updated successfully, but these errors were encountered:
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 amt-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:
The
Inline Link
is only present in RbUI, andtable
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
andHeading
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")
orHeading(as: "h1", size: "6")
Change font-size from 30px -> 24px
TypographyH2
->Heading(level: "2")
orHeading(as: "h2", size: "5")
Change font-size from 24px -> 20px
TypographyH3
->Heading(level: "3")
orHeading(as: "h3", size: "4")
Change font-size from 20px -> 18px
TypographyH4
->Heading(level: "4")
orHeading(as: "h4", size: "3")
Change font-size from 18px -> 16px
TypographyP
->Text
The
TypographyP
only defines line-height. WithText
, we will be able to use size and customize its sizes.Additional Changes
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!
The text was updated successfully, but these errors were encountered: