@ragrabbit/mcp

by madarco
Verified
{/* Typography.mdx */} import { Meta, Typeset } from '@storybook/blocks'; <Meta title="Base/Typography" /> export const typography = { type: { primary: "--font-geist-sans", }, weight: { regular: '400', bold: '700', extrabold: '800', black: '900', }, size: { s1: 12, s2: 14, s3: 16, m1: 20, m2: 24, m3: 28, l1: 32, l2: 40, l3: 48, }, }; export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; # Typography **Font:** System Serif **Weights:** All <span class="font-sans">Font sans</span> <Typeset fontSizes={[ Number(typography.size.m1), ]} fontWeight={typography.weight.regular} sampleText={SampleText} fontFamily="serif" /> **Font:** System GeistMonoVF **Weights:** 400(regular), 700(bold), 800(extrabold), 900(black) <Typeset fontSizes={[ Number(typography.size.m1), ]} fontWeight={typography.weight.regular} sampleText={SampleText} fontFamily="--font-geist-mono" /> **Font:** GeistSansVF Regular <Typeset fontSizes={[ Number(typography.size.m1), ]} fontWeight={typography.weight.regular} sampleText={SampleText} fontFamily={typography.type.primary} /> Bold <Typeset fontSizes={[ Number(typography.size.m1), ]} fontWeight={typography.weight.bold} sampleText={SampleText} fontFamily={typography.type.primary} /> Extrabold <Typeset fontSizes={[ Number(typography.size.m1), ]} fontWeight={typography.weight.extrabold} sampleText={SampleText} fontFamily={typography.type.primary} /> Black <Typeset fontSizes={[ Number(typography.size.m1), ]} fontWeight={typography.weight.black} sampleText={SampleText} fontFamily={typography.type.primary} /> Sizes <Typeset fontSizes={[ Number(typography.size.s1), Number(typography.size.s2), Number(typography.size.s3), Number(typography.size.m1), Number(typography.size.m2), Number(typography.size.m3), Number(typography.size.l1), Number(typography.size.l2), Number(typography.size.l3), ]} fontWeight={typography.weight.black} sampleText={SampleText} fontFamily={typography.type.primary} />