tailwind.config.ts

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/islands/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    colors: {
      'solid-red': 'var(--solid-red)',
      'solid-orange': 'var(--solid-orange)',
      'solid-yellow': 'var(--solid-yellow)',
      'solid-green': 'var(--solid-green)',
      'solid-blue': 'var(--solid-blue)',
      'solid-indigo': 'var(--solid-indigo)',
      'solid-purple': 'var(--solid-purple)',
      'solid-pink': 'var(--solid-pink)',
      'solid-brown': 'var(--solid-brown)',
      'solid-black': 'var(--solid-black)',
      'solid-white': 'var(--solid-white)',

      'solid-translucent-red': 'var(--solid-translucent-red)',
      'solid-translucent-orange': 'var(--solid-translucent-orange)',
      'solid-translucent-yellow': 'var(--solid-translucent-yellow)',
      'solid-translucent-green': 'var(--solid-translucent-green)',
      'solid-translucent-blue': 'var(--solid-translucent-blue)',
      'solid-translucent-indigo': 'var(--solid-translucent-indigo)',
      'solid-translucent-purple': 'var(--solid-translucent-purple)',
      'solid-translucent-pink': 'var(--solid-translucent-pink)',
      'solid-translucent-brown': 'var(--solid-translucent-brown)',
      'solid-translucent-black': 'var(--solid-translucent-black)',
      'solid-translucent-white': 'var(--solid-translucent-white)',

      'background-standard-primary': 'var(--backgroud-standard-primary)',
      'background-standard-secondary': 'var(--backgroud-standard-secondary)',

      'background-inverted-primary': 'var(--backgroud-inverted-primary)',
      'background-inverted-secondary': 'var(--backgroud-inverted-secondary)',

      'content-standard-primary': 'var(--content-standard-primary)',
      'content-standard-secondary': 'var(--content-standard-secondary)',
      'content-standard-tertiary': 'var(--content-standard-tertiary)',
      'content-standard-quaternary': 'var(--content-standard-quaternary)',

      'content-inverted-primary': 'var(--content-inverted-primary)',
      'content-inverted-secondary': 'var(--content-inverted-secondary)',
      'content-inverted-tertiary': 'var(--content-inverted-tertiary)',
      'content-inverted-quaternary': 'var(--content-inverted-quaternary)',

      'line-divider': 'var(--line-divider)',
      'line-outline': 'var(--line-outline)',

      'components-fill-standard-primary': 'var(--components-fill-standard-primary)',
      'components-fill-standard-secondary': 'var(--components-fill-standard-secondary)',
      'components-fill-standard-tertiary': 'var(--components-fill-standard-tertiary)',

      'components-fill-inverted-primary': 'var(--components-fill-inverted-primary)',
      'components-fill-inverted-secondary': 'var(--components-fill-inverted-secondary)',
      'components-fill-inverted-tertiary': 'var(--components-fill-inverted-tertiary)',

      'components-interactive-hover': 'var(--components-interactive-hover)',
      'components-interactive-focused': 'var(--components-interactive-focused)',
      'components-interactive-pressed': 'var(--components-interactive-pressed)',

      'components-translucent-primary': 'var(--components-translucent-primary)',
      'components-translucent-secondary': 'var(--components-translucent-secondary)',
      'components-translucent-tertiary': 'var(--components-translucent-tertiary)',

      'core-accent': 'var(--core-accent)',
      'core-accent-translucent': 'var(--core-accent-translucent)',

      'core-status-positive': 'var(--core-status-positive)',
      'core-status-warning': 'var(--core-status-warning)',
      'core-status-negative': 'var(--core-status-negative)',

      'syntax-comment': 'var(--syntax-comment)',
      'syntax-function': 'var(--syntax-function)',
      'syntax-variable': 'var(--syntax-variable)',
      'syntax-string': 'var(--syntax-string)',
      'syntax-constant': 'var(--syntax-constant)',
      'syntax-operator': 'var(--syntax-operator)',
      'syntax-keyword': 'var(--syntax-keyword)',
    },
    fontSize: {
      display: ['48px', { lineHeight: '64px', letterSpacing: '-1.44px' }],
      title: ['24px', { lineHeight: '32px', letterSpacing: '-0.48px' }],
      heading: ['20px', { lineHeight: '28px', letterSpacing: '-0.4px' }],
      body: ['16px', { lineHeight: '24px', letterSpacing: '-0.32px' }],
      label: ['14px', { lineHeight: '22px', letterSpacing: '-0.28px' }],
      footnote: ['12px', { lineHeight: '20px', letterSpacing: '-0.24px' }],
      caption: ['10px', { lineHeight: '16px', letterSpacing: '-0.2px' }],
    },
    spacing: {
      'spacing-50': '2px',
      'spacing-100': '4px',
      'spacing-150': '6px',
      'spacing-200': '8px',
      'spacing-300': '12px',
      'spacing-400': '16px',
      'spacing-500': '20px',
      'spacing-550': '24px',
      'spacing-600': '28px',
      'spacing-700': '32px',
      'spacing-750': '36px',
      'spacing-800': '40px',
      'spacing-850': '48px',
      'spacing-900': '64px',
      'spacing-950': '72px',
      'spacing-1000': '80px',
    },
    borderRadius: {
      'radius-100': '4px',
      'radius-200': '6px',
      'radius-300': '8px',
      'radius-400': '12px',
      'radius-500': '14px',
      'radius-600': '16px',
      'radius-700': '20px',
      'radius-800': '24px',
      'radius-full': '9999px',
    },
  },
  plugins: [],
};
export default config;