Typography
Os tokens de tipografia nos ajudam a construir textos, sejam eles títulos, sub-títulos, textos corridos ou quaiser outras variações.
Na maioria dos casos, o componente Typography deve resolver o problema, mas, quando não for o possível usar tal componente, podemos recorrer aos tokens.
Valores
Migração
Token | Valor | Exemplo |
|---|---|---|
| typography.variants.h1.desktop var(--typography-variants-h1-desktop) $typography-variants-h1-desktop | .font-family: Inter,Arial,sans-serif.font-size: 56px.line-height: 68px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.h1.mobile var(--typography-variants-h1-mobile) $typography-variants-h1-mobile | .font-family: Inter,Arial,sans-serif.font-size: 40px.line-height: 48px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.h2.desktop var(--typography-variants-h2-desktop) $typography-variants-h2-desktop | .font-family: Inter,Arial,sans-serif.font-size: 48px.line-height: 60px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.h2.mobile var(--typography-variants-h2-mobile) $typography-variants-h2-mobile | .font-family: Inter,Arial,sans-serif.font-size: 32px.line-height: 40px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.h3.desktop var(--typography-variants-h3-desktop) $typography-variants-h3-desktop | .font-family: Inter,Arial,sans-serif.font-size: 32px.line-height: 40px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.h3.mobile var(--typography-variants-h3-mobile) $typography-variants-h3-mobile | .font-family: Inter,Arial,sans-serif.font-size: 24px.line-height: 32px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.h4.desktop var(--typography-variants-h4-desktop) $typography-variants-h4-desktop | .font-family: Inter,Arial,sans-serif.font-size: 24px.line-height: 32px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.h4.mobile var(--typography-variants-h4-mobile) $typography-variants-h4-mobile | .font-family: Inter,Arial,sans-serif.font-size: 18px.line-height: 28px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.hero.desktop var(--typography-variants-hero-desktop) $typography-variants-hero-desktop | .font-family: Inter,Arial,sans-serif.font-size: 64px.line-height: 80px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.hero.mobile var(--typography-variants-hero-mobile) $typography-variants-hero-mobile | .font-family: Inter,Arial,sans-serif.font-size: 48px.line-height: 60px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.subtitle.desktop var(--typography-variants-subtitle-desktop) $typography-variants-subtitle-desktop | .font-family: Inter,Arial,sans-serif.font-size: 18px.line-height: 28px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.subtitle.mobile var(--typography-variants-subtitle-mobile) $typography-variants-subtitle-mobile | .font-family: Inter,Arial,sans-serif.font-size: 16px.line-height: 24px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.paragraphLg.desktop var(--typography-variants-paragraph-lg-desktop) $typography-variants-paragraph-lg-desktop | .font-family: Inter,Arial,sans-serif.font-size: 18px.line-height: 28px.font-weight: 400 | Lorem ipsum dolor sit amet. |
| typography.variants.paragraphLg.mobile var(--typography-variants-paragraph-lg-mobile) $typography-variants-paragraph-lg-mobile | .font-family: Inter,Arial,sans-serif.font-size: 16px.line-height: 24px.font-weight: 400 | Lorem ipsum dolor sit amet. |
| typography.variants.paragraphLgBold.desktop var(--typography-variants-paragraph-lg-bold-desktop) $typography-variants-paragraph-lg-bold-desktop | .font-family: Inter,Arial,sans-serif.font-size: 18px.line-height: 28px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.paragraphLgBold.mobile var(--typography-variants-paragraph-lg-bold-mobile) $typography-variants-paragraph-lg-bold-mobile | .font-family: Inter,Arial,sans-serif.font-size: 16px.line-height: 24px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.paragraphMd.desktop var(--typography-variants-paragraph-md-desktop) $typography-variants-paragraph-md-desktop | .font-family: Inter,Arial,sans-serif.font-size: 16px.line-height: 24px.font-weight: 400 | Lorem ipsum dolor sit amet. |
| typography.variants.paragraphMd.mobile var(--typography-variants-paragraph-md-mobile) $typography-variants-paragraph-md-mobile | .font-family: Inter,Arial,sans-serif.font-size: 14px.line-height: 24px.font-weight: 400 | Lorem ipsum dolor sit amet. |
| typography.variants.paragraphMdBold.desktop var(--typography-variants-paragraph-md-bold-desktop) $typography-variants-paragraph-md-bold-desktop | .font-family: Inter,Arial,sans-serif.font-size: 16px.line-height: 24px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.paragraphMdBold.mobile var(--typography-variants-paragraph-md-bold-mobile) $typography-variants-paragraph-md-bold-mobile | .font-family: Inter,Arial,sans-serif.font-size: 14px.line-height: 24px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.paragraphSm.desktop var(--typography-variants-paragraph-sm-desktop) $typography-variants-paragraph-sm-desktop | .font-family: Inter,Arial,sans-serif.font-size: 14px.line-height: 24px.font-weight: 400 | Lorem ipsum dolor sit amet. |
| typography.variants.paragraphSm.mobile var(--typography-variants-paragraph-sm-mobile) $typography-variants-paragraph-sm-mobile | .font-family: Inter,Arial,sans-serif.font-size: 12px.line-height: 20px.font-weight: 400 | Lorem ipsum dolor sit amet. |
| typography.variants.paragraphSmBold.desktop var(--typography-variants-paragraph-sm-bold-desktop) $typography-variants-paragraph-sm-bold-desktop | .font-family: Inter,Arial,sans-serif.font-size: 14px.line-height: 24px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.paragraphSmBold.mobile var(--typography-variants-paragraph-sm-bold-mobile) $typography-variants-paragraph-sm-bold-mobile | .font-family: Inter,Arial,sans-serif.font-size: 12px.line-height: 20px.font-weight: 700 | Lorem ipsum dolor sit amet. |
| typography.variants.caption.desktop var(--typography-variants-caption-desktop) $typography-variants-caption-desktop | .font-family: Inter,Arial,sans-serif.font-size: 12px.line-height: 20px.font-weight: 400 | Lorem ipsum dolor sit amet. |
| typography.variants.caption.mobile var(--typography-variants-caption-mobile) $typography-variants-caption-mobile | .font-family: Inter,Arial,sans-serif.font-size: 12px.line-height: 20px.font-weight: 400 | Lorem ipsum dolor sit amet. |
| typography.variants.overline.desktop var(--typography-variants-overline-desktop) $typography-variants-overline-desktop | .font-family: Inter,Arial,sans-serif.font-size: 10px.line-height: 16px.font-weight: 700.text-transform: uppercase | Lorem ipsum dolor sit amet. |
| typography.variants.overline.mobile var(--typography-variants-overline-mobile) $typography-variants-overline-mobile | .font-family: Inter,Arial,sans-serif.font-size: 10px.line-height: 16px.font-weight: 700.text-transform: uppercase | Lorem ipsum dolor sit amet. |
| typography.variants.labelSm.desktop var(--typography-variants-label-sm-desktop) $typography-variants-label-sm-desktop | .font-family: Inter,Arial,sans-serif.font-size: 14px.line-height: 24px.font-weight: 400 | Lorem ipsum dolor sit amet. |
| typography.variants.labelSm.mobile var(--typography-variants-label-sm-mobile) $typography-variants-label-sm-mobile | .font-family: Inter,Arial,sans-serif.font-size: 14px.line-height: 24px.font-weight: 400 | Lorem ipsum dolor sit amet. |
| typography.variants.labelMd.desktop var(--typography-variants-label-md-desktop) $typography-variants-label-md-desktop | .font-family: Inter,Arial,sans-serif.font-size: 16px.line-height: 24px.font-weight: 400 | Lorem ipsum dolor sit amet. |
| typography.variants.labelMd.mobile var(--typography-variants-label-md-mobile) $typography-variants-label-md-mobile | .font-family: Inter,Arial,sans-serif.font-size: 16px.line-height: 24px.font-weight: 400 | Lorem ipsum dolor sit amet. |