tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      // Every colour resolves to a custom property defined in index.css, and
      // nothing here hardcodes a hex. That is what lets dark mode be a matter of
      // reassigning properties rather than editing this config or any component.
      colors: {
        ground: 'var(--ground)',
        surface: 'var(--surface)',
        ink: 'var(--ink)',
        'ink-muted': 'var(--ink-muted)',
        hairline: 'var(--hairline)',
        edge: 'var(--edge)',
        focus: 'var(--focus)',
        danger: 'var(--danger)',
        'danger-ink': 'var(--danger-ink)',

        sage: 'var(--sage)',
        'sage-ink': 'var(--sage-ink)',
        sky: 'var(--sky)',
        'sky-ink': 'var(--sky-ink)',
        blush: 'var(--blush)',
        'blush-ink': 'var(--blush-ink)',
        sand: 'var(--sand)',
        'sand-ink': 'var(--sand-ink)',
        lilac: 'var(--lilac)',
        'lilac-ink': 'var(--lilac-ink)',
        seafoam: 'var(--seafoam)',
        'seafoam-ink': 'var(--seafoam-ink)',
      },
      fontFamily: {
        display: ['Fraunces Variable', 'Georgia', 'serif'],
        body: ['Karla', 'system-ui', 'sans-serif'],
      },
      fontSize: {
        // Node text steps down with depth, with a floor at 13px.
        meta: ['12px', { lineHeight: '1.4', letterSpacing: '0.02em' }],
        node: ['15px', { lineHeight: '1.35' }],
        'node-2': ['14px', { lineHeight: '1.35' }],
        'node-3': ['13px', { lineHeight: '1.35' }],
      },
      borderRadius: {
        node: '14px',
      },
      transitionTimingFunction: {
        // The easing shared by every motion in the app.
        reflow: 'cubic-bezier(0.2, 0, 0, 1)',
      },
      spacing: {
        // Minimum touch target.
        touch: '44px',
        'safe-b': 'env(safe-area-inset-bottom)',
      },
    },
  },
  plugins: [],
};