diff --git a/src/components/Texts.tsx b/src/components/Texts.tsx index 50df632..d7c033a 100644 --- a/src/components/Texts.tsx +++ b/src/components/Texts.tsx @@ -60,47 +60,89 @@ const createTextComponent = ( // Exports based on your tailwind.css and the example export const H1 = createTextComponent( 'h1', - 'text-5xl lg:text-8xl font-medium tracking-tight' + 'text-5xl lg:text-8xl font-medium leading-tight tracking-tight' +) +export const H2 = createTextComponent( + 'h2', + 'text-4xl lg:text-6xl font-medium leading-tight tracking-tight' +) +export const H3 = createTextComponent( + 'h3', + 'text-3xl lg:text-5xl font-medium leading-tight tracking-tight' +) +export const H4 = createTextComponent( + 'h4', + 'text-2xl lg:text-4xl font-medium leading-snug tracking-tight' ) -export const H2 = createTextComponent('h2', 'text-4xl lg:text-6xl font-medium') -export const H3 = createTextComponent('h3', 'text-3xl lg:text-5xl font-medium') -export const H4 = createTextComponent('h4', 'text-2xl lg:text-4xl font-medium') export const P = createTextComponent( 'p', 'text-base lg:text-lg leading-relaxed' ) -export const Small = createTextComponent('small', 'text-sm font-medium') -export const Subtle = createTextComponent('p', 'text-sm text-gray-500') -export const H5 = createTextComponent('h5', 'text-xl lg:text-2xl font-semibold') -export const Eyebrow = createTextComponent('h2', 'text-base/7 font-semibold') +export const Small = createTextComponent( + 'small', + 'text-sm font-medium leading-normal tracking-normal' +) +export const Subtle = createTextComponent( + 'p', + 'text-sm leading-normal tracking-normal text-gray-500' +) +export const H5 = createTextComponent( + 'h5', + 'text-xl lg:text-2xl font-semibold leading-snug tracking-tight' +) +export const Eyebrow = createTextComponent( + 'h2', + 'text-base/7 font-semibold tracking-wide' +) export const SectionHeader = createTextComponent( 'p', - 'text-3xl lg:text-4xl font-medium tracking-tight' + 'text-3xl lg:text-4xl font-medium leading-tight tracking-tight' +) +export const CardEyebrow = createTextComponent( + 'h3', + 'text-sm/4 font-semibold tracking-wide' ) -export const CardEyebrow = createTextComponent('h3', 'text-sm/4 font-semibold') export const CardTitle = createTextComponent( 'p', - 'text-lg font-medium tracking-tight' + 'text-lg font-medium leading-snug tracking-tight' +) +export const CardDescription = createTextComponent( + 'p', + 'text-sm/6 leading-normal tracking-normal' +) +export const FeatureTitle = createTextComponent( + 'h3', + 'text-lg font-semibold leading-snug tracking-tight' +) +export const FeatureDescription = createTextComponent( + 'p', + 'text-sm leading-normal tracking-normal' ) -export const CardDescription = createTextComponent('p', 'text-sm/6') -export const FeatureTitle = createTextComponent('h3', 'text-lg font-semibold') -export const FeatureDescription = createTextComponent('p', 'text-sm') export const MobileFeatureTitle = createTextComponent( 'h3', - 'text-sm font-semibold sm:text-lg' + 'text-sm font-semibold sm:text-lg leading-snug tracking-tight' ) export const SecondaryFeatureTitle = createTextComponent( 'h3', - 'font-semibold' + 'text-base font-semibold leading-snug tracking-tight' +) +export const Question = createTextComponent( + 'h3', + 'text-lg/6 font-semibold tracking-tight' +) +export const Answer = createTextComponent( + 'p', + 'mt-4 text-sm leading-normal tracking-normal' ) -export const Question = createTextComponent('h3', 'text-lg/6 font-semibold') -export const Answer = createTextComponent('p', 'mt-4 text-sm') export const PageHeader = createTextComponent( 'h2', - 'text-5xl lg:text-6xl font-medium tracking-tight' + 'text-5xl lg:text-6xl font-medium leading-tight tracking-tight' ) export const DownloadCardTitle = createTextComponent( 'dt', - 'text-base/7 font-semibold' + 'text-base/7 font-semibold tracking-wide' +) +export const DownloadCardDescription = createTextComponent( + 'dd', + 'text-base/7 leading-normal tracking-normal' ) -export const DownloadCardDescription = createTextComponent('dd', 'text-base/7')