Headline

gistfile1.txt

import React from 'react';

import { cn } from '@/lib/utils';

export interface HeadlineProps {
  children: React.ReactNode;
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  type?: 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
  className?: string;
}

const _NOT_PURGE_CLASSES = [
  'text-headline-xl',
  'leading-headline-xl',
  'tracking-headline-xl',
  'text-headline-l',
  'leading-headline-l',
  'tracking-headline-l',
  'text-headline-m',
  'leading-headline-m',
  'tracking-headline-m',
  'text-headline-s',
  'leading-headline-s',
  'tracking-headline-s',
  'text-headline-xs',
  'leading-headline-xs',
  'tracking-headline-xs',
  'text-headline-xxs',
  'leading-headline-xxs',
  'tracking-headline-xxs',
  'text-headline-xxxs',
  'leading-headline-xxxs',
  'tracking-headline-xxxs',
];

export const Headline: React.FC<HeadlineProps> = ({
  children,
  as: Component = 'h1',
  type = 'xl',
  className,
}) => (
  <Component
    className={cn(
      [
        `text-headline-${type} leading-headline-${type} tracking-headline-${type}`,
        'font-medium',
      ],
      className,
    )}
  >
    {children}
  </Component>
);

tailwind config example

letterSpacing: {
        'headline-xl': 'var(--letter-spacing-headline-xl)',
        'headline-l': 'var(--letter-spacing-headline-l)',
        'headline-m': 'var(--letter-spacing-headline-m)',
        'headline-s': 'var(--letter-spacing-headline-s)',
        'headline-xs': 'var(--letter-spacing-headline-xs)',
        'headline-xxs': 'var(--letter-spacing-headline-xxs)',
        'headline-xxxs': 'var(--letter-spacing-headline-xxxl)',
        // body
        'body-xxl': 'var(--letter-spacing-body-xxl)',
        'body-xl': 'var(--letter-spacing-body-xl)',
        'body-l': 'var(--letter-spacing-body-l)',
        'body-m': 'var(--letter-spacing-body-m)',
        'body-s': 'var(--letter-spacing-body-s)',
        // lead
        'lead-m': 'var(--letter-spacing-lead-m)',
        'lead-s': 'var(--letter-spacing-lead-s)',
      },
      fontSize: {
        'headline-xl': 'var(--font-size-headline-xl)',
        'headline-l': 'var(--font-size-headline-l)',
        'headline-m': 'var(--font-size-headline-m)',
        'headline-s': 'var(--font-size-headline-s)',
        'headline-xs': 'var(--font-size-headline-xs)',
        'headline-xxs': 'var(--font-size-headline-xxs)',
        'headline-xxxs': 'var(--font-size-headline-xxxl)',

        'body-xxl': 'var(--font-size-body-xxl)',
        'body-xl': 'var(--font-size-body-xl)',
        'body-l': 'var(--font-size-body-l)',
        'body-m': 'var(--font-size-body-m)',
        'body-s': 'var(--font-size-body-s)',

        'lead-m': 'var(--font-size-lead-m)',
        'lead-s': 'var(--font-size-lead-s)',
      },
      lineHeight: {
        'headline-xl': 'var(--line-height-headline-xl)',
        'headline-l': 'var(--line-height-headline-l)',
        'headline-m': 'var(--line-height-headline-m)',
        'headline-s': 'var(--line-height-headline-s)',
        'headline-xs': 'var(--line-height-headline-xs)',
        'headline-xxs': 'var(--line-height-headline-xxs)',
        'headline-xxxs': 'var(--line-height-headline-xxxl)',
        // body
        'body-xxl': 'var(--line-height-body-xxl)',
        'body-xl': 'var(--line-height-body-xl)',
        'body-l': 'var(--line-height-body-l)',
        'body-m': 'var(--line-height-body-m)',
        'body-s': 'var(--line-height-body-s)',
        // lead
        'lead-m': 'var(--line-height-lead-m)',
        'lead-s': 'var(--line-height-lead-s)',
      },

Text.tsx

import React from 'react';

import { cn } from '@/lib/utils';

export interface TextProps {
  children: React.ReactNode;
  as?: 'p' | 'span';
  variant?: 'body' | 'lead';
  type?: 'xxl' | 'xl' | 'l' | 'm' | 's';
  className?: string;
}

const _NOT_PURGE_CLASSES = [
  'text-body-m',
  'leading-body-m',
  'tracking-body-m',
  'text-lead-m',
  'leading-lead-m',
  'tracking-lead-m',
  'text-body-l',
  'leading-body-l',
  'tracking-body-l',
  'text-lead-l',
  'leading-lead-l',
  'tracking-lead-l',
  'text-body-xl',
  'leading-body-xl',
  'tracking-body-xl',
  'text-lead-xl',
  'leading-lead-xl',
  'tracking-lead-xl',
  'text-body-xxl',
  'leading-body-xxl',
  'tracking-body-xxl',
  'text-lead-xxl',
  'leading-lead-xxl',
  'tracking-lead-xxl',
  'text-body-s',
  'leading-body-s',
  'tracking-body-s',
  'text-lead-s',
];

export const Text: React.FC<TextProps> = ({
  children,
  variant = 'body',
  as: Component = 'p',
  type = 'm',
  className,
}) => {
  return (
    <Component
      className={cn(
        [
          `text-${variant}-${type} leading-${variant}-${type} tracking-${variant}-${type}`,
        ],
        className,
      )}
    >
      {children}
    </Component>
  );
};