ourworld_web/www_mycelium_net
23
0
Fork 0
forked from sashaastiadi/www_mycelium_net
Code Issues Pull Requests Activity

style: add consistent leading and tracking properties to text components

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-22 13:42:26 +02:00
parent f6841df98f
commit 0ca6a563b1
1 changed files with 63 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/Texts.tsx
View File

@@ -60,47 +60,89 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
// Exports based on your tailwind.css and the example // Exports based on your tailwind.css and the example
export const H1 = createTextComponent( export const H1 = createTextComponent(
'h1', '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( export const P = createTextComponent(
'p', 'p',
'text-base lg:text-lg leading-relaxed' 'text-base lg:text-lg leading-relaxed'
) )
export const Small = createTextComponent('small', 'text-sm font-medium') export const Small = createTextComponent(
export const Subtle = createTextComponent('p', 'text-sm text-gray-500') 'small',
export const H5 = createTextComponent('h5', 'text-xl lg:text-2xl font-semibold') 'text-sm font-medium leading-normal tracking-normal'
export const Eyebrow = createTextComponent('h2', 'text-base/7 font-semibold') )
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( export const SectionHeader = createTextComponent(
'p', '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( export const CardTitle = createTextComponent(
'p', '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( export const MobileFeatureTitle = createTextComponent(
'h3', 'h3',
'text-sm font-semibold sm:text-lg' 'text-sm font-semibold sm:text-lg leading-snug tracking-tight'
) )
export const SecondaryFeatureTitle = createTextComponent( export const SecondaryFeatureTitle = createTextComponent(
'h3', '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( export const PageHeader = createTextComponent(
'h2', '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( export const DownloadCardTitle = createTextComponent(
'dt', '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')