Typography component#60
Conversation
Deployed to Cloudflare Pages
|
kaja-osojnik
force-pushed
the
kaja/typography-component
branch
from
106025d to
6ebf66c
Compare
| export const typographyVariants = cva("", { | ||
| variants: { | ||
| variant: { | ||
| h1: "scroll-m-20 text-4xl font-semibold tracking-[-0.04em] lg:text-5xl", |
There was a problem hiding this comment.
what's up with tracking-[-0.04em] why do we even care about it ? I also don't see such value in a design guide.
There was a problem hiding this comment.
This are styles from Figma shadcn design system library directly - under 'letter-spacing'. Will confirm with design team, what needs to be used.
| lead: "text-xl text-muted-foreground", | ||
| large: "text-lg font-semibold", | ||
| small: "text-sm font-medium leading-none", | ||
| muted: "text-sm text-muted-foreground", |
There was a problem hiding this comment.
Does muted should force text size? Yeah I think it's better to make muted another prop in cva like textColor (this name is not ideal, but I am using it in Link already) so it can be applied to any element with variant combo. Should small large be size?
There was a problem hiding this comment.
Not sure - this is also taken directly from shadcn default component, but happy to remove if we need more freedom to be using it for larger text sizes as well.
| h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-[-0.04em] first:mt-0", | ||
| h3: "scroll-m-20 text-2xl font-semibold tracking-[-0.04em]", | ||
| h4: "scroll-m-20 text-xl font-semibold tracking-[-0.04em]", | ||
| p: "leading-7 [&:not(:first-child)]:mt-6", |
There was a problem hiding this comment.
Is changing line-height for p safe? will this always align nicely with copy in other HTML elements?
How this mt-6 is working? Shouldn't this be handled by container's gap in most cases ?
There was a problem hiding this comment.
I see what you mean - again these were default shadcn values from the library, but seems like it needed to be adjusted as how is used in Explorer. Will discuss with design team.
|
why Storybook renders |
kaja-osojnik
force-pushed
the
kaja/typography-component
branch
from
6ebf66c to
912664e
Compare
kaja-osojnik
force-pushed
the
kaja/typography-component
branch
2 times, most recently
from
6a0c407 to
400d217
Compare
kaja-osojnik
force-pushed
the
kaja/typography-component
branch
from
400d217 to
478ded3
Compare
2 participants
Add Typography component with variants for headings, paragraph, muted, blockquote and size.