morten-olsen.github.io/content/templates/react/typography/index.tsx

import styled from 'styled-components';
import { Theme, Typography } from '../theme';

interface TextProps {
  color?: keyof Theme['colors'];
  bold?: boolean;
  theme: Theme;
}

const BaseText = styled.span<TextProps>`
  ${({ theme }) => (theme.font.family ? `font-family: ${theme.font.family};` : '')}
  color: ${({ color, theme }) => (color ? theme.colors[color] : theme.colors.foreground)};
  font-weight: ${({ bold }) => (bold ? 'bold' : 'normal')};
  font-size: ${({ theme }) => theme.font.baseSize}px;
`;

const get = (name: keyof Theme['typography'], theme: Theme): Typography => {
  const typography = theme.typography[name];
  return typography;
};

const createTypography = (name: keyof Theme['typography']) => {
  const Component = styled(BaseText)<TextProps>`
    font-size: ${({ theme }) => theme.font.baseSize * (get(name, theme).size || 1)}px;
    font-weight: ${({ bold, theme }) =>
      typeof bold !== 'undefined' ? 'bold' : get(name, theme).weight || 'normal'};
    ${({ theme }) => (get(name, theme).upperCase ? 'text-transform: uppercase;' : '')}
  `;
  return Component;
};

const Jumbo = createTypography('Jumbo');
const Title2 = createTypography('Title2');
const Title1 = createTypography('Title1');
const Body1 = createTypography('Body1');
const Overline = createTypography('Overline');
const Caption = createTypography('Caption');
const Link = createTypography('Link');

const types: { [key in keyof Theme['typography']]: typeof BaseText } = {
  Jumbo,
  Title2,
  Title1,
  Body1,
  Overline,
  Caption,
  Link,
};

export type { TextProps };
export { types, Jumbo, Title2, Title1, Body1, Overline, Caption, Link };