Typography Components

import { Text } from '@theme-ui/components'

<Text>Default text</Text>
<Text variant="caps">Uppercase text</Text>
<Text sx={{ fontSize: 4, fontWeight: 'bold' }}>Large bold text</Text>

// theme.js
export default {
  text: {
    default: {
      fontSize: 2,
      lineHeight: 'body'
    },
    caps: {
      textTransform: 'uppercase',
      letterSpacing: '0.1em',
      fontSize: 1
    },
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading'
    }
  }
}

<Text>This is basic text content.</Text>

<Text sx={{ color: 'primary', fontSize: 3 }}>
  Primary colored text
</Text>

<Box>
  <Text variant="caps">Small Caps</Text>
  <Text variant="heading">Heading Style Text</Text>
</Box>

<Text as="div" p={2}>
  Text rendered as a div with padding
</Text>

import { Heading } from '@theme-ui/components'

<Heading>Default Heading</Heading>
<Heading as="h1">Page Title</Heading>
<Heading as="h3" variant="subheading">Subheading</Heading>

{
  fontFamily: 'heading',
  fontWeight: 'heading',
  lineHeight: 'heading'
}

// theme.js
export default {
  fonts: {
    heading: 'system-ui, sans-serif'
  },
  fontWeights: {
    heading: 700
  },
  lineHeights: {
    heading: 1.25
  },
  text: {
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
      fontSize: 5
    },
    subheading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
      fontSize: 3,
      color: 'secondary'
    }
  }
}

<Box>
  <Heading as="h1">Page Title</Heading>
  <Heading as="h2">Section Heading</Heading>
  <Heading as="h3">Subsection Heading</Heading>
</Box>

<Heading
  sx={{
    color: 'primary',
    fontSize: [4, 5, 6],
    mb: 3
  }}
>
  Responsive Heading
</Heading>

<Box>
  <Heading variant="heading">Main Heading</Heading>
  <Heading variant="subheading">Subheading Style</Heading>
</Box>

<Heading
  sx={{
    background: 'linear-gradient(45deg, #f06, #48f)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    fontSize: 6
  }}
>
  Gradient Heading
</Heading>

import { Paragraph } from '@theme-ui/components'

<Paragraph>
  This is a paragraph of body text. It uses the paragraph variant from your theme.
</Paragraph>

{
  fontFamily: 'body',
  fontWeight: 'body',
  lineHeight: 'body'
}

// theme.js
export default {
  fonts: {
    body: 'system-ui, sans-serif'
  },
  fontWeights: {
    body: 400
  },
  lineHeights: {
    body: 1.5
  },
  text: {
    paragraph: {
      fontSize: 2,
      lineHeight: 'body',
      mb: 3
    },
    small: {
      fontSize: 1,
      lineHeight: 'body'
    }
  }
}

<Paragraph>
  Build themeable user interfaces with constraint-based design principles.
  Theme UI provides a powerful styling system for creating consistent designs.
</Paragraph>

<Paragraph
  sx={{
    fontSize: 3,
    lineHeight: 1.6,
    color: 'text',
    maxWidth: '65ch'
  }}
>
  A paragraph with optimal reading width and custom styling.
</Paragraph>

<Paragraph
  sx={{
    fontSize: [3, 4],
    fontWeight: 300,
    lineHeight: 1.6,
    mb: 4
  }}
>
  This is a lead paragraph with larger text to introduce an article.
</Paragraph>

<Box>
  <Paragraph>
    First paragraph of content. This uses the default paragraph styling
    from your theme.
  </Paragraph>
  
  <Paragraph>
    Second paragraph with consistent spacing and typography.
  </Paragraph>
  
  <Paragraph variant="small">
    A smaller paragraph variant for footnotes or additional details.
  </Paragraph>
</Box>

<Box>
  <Heading as="h1" mb={2}>Article Title</Heading>
  
  <Text sx={{ color: 'gray', fontSize: 1, mb: 4 }}>
    Published on January 1, 2024
  </Text>
  
  <Paragraph sx={{ fontSize: 3, mb: 3 }}>
    Lead paragraph with larger text to introduce the article content.
  </Paragraph>
  
  <Heading as="h2" mt={4} mb={2}>Section Heading</Heading>
  
  <Paragraph>
    Regular paragraph text with proper spacing and typography.
  </Paragraph>
</Box>