tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  prefix: '',
  theme: {
    fontFamily: {
      sans: ['DM Sans', ...defaultTheme.fontFamily.sans],
    },
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        'text-primary': 'var(--text-primary)',
        'text-secondary': 'var(--text-secondary)',
        'text-tertiary': 'var(--text-tertiary)',
        'text-placeholder': 'var(--text-placeholder)',
        'text-disable': 'var(--text-disable)',
        'text-inverted': 'var(--text-inverted)',
        'text-content-primary': 'var(--text-content-primary)',
        'text-content-secondary': 'var(--text-content-secondary)',
        'text-content-tertiary': 'var(--text-content-tertiary)',
        'text-content-placeholder': 'var(--text-content-placeholder)',
        'text-content-disable': 'var(--text-content-disable)',
        'fill-bg-1': 'var(--fill-bg-1)',
        'fill-bg-2': 'var(--fill-bg-2)',
        'fill-bg-3': 'var(--fill-bg-3)',
        'fill-bg-4': 'var(--fill-bg-4)',
        'bg-5': 'var(--bg-5)',
        'bg-6': 'var(--bg-6)',
        'fill-transparency-block': 'var(--fill-transparency-block)',
        'fill-transparency-hover': 'var(--fill-transparency-hover)',
        'fill-transparency-pressed': 'var(--fill-transparency-pressed)',
        'scenes-toast': 'var(--scenes-toast)',
        'scenes-overlay': 'var(--scenes-overlay)',
        'scenes-panel': 'var(--scenes-panel)',
        'scenes-guide': 'var(--scenes-guide)',
        'line-1': 'var(--line-1)',
        'line-2': 'var(--line-2)',
        'line-3': 'var(--line-3)',
        'shadow-008': 'var(--shadow-008)',
        'shadow-016': 'var(--shadow-016)',
        'shadow-024': 'var(--shadow-024)',
        'shadow-032': 'var(--shadow-032)',
        'white-inverted': 'var(--white-inverted)',
        'black-inverted': 'var(--black-inverted)',
        'background-1': 'var(--background-1)',
        'background-2': 'var(--background-2)',
        'background-3': 'var(--background-3)',
        'background-4': 'var(--background-4)',
        'background-5': 'var(--background-5)',
        'background-6': 'var(--background-6)',
        'background-7': 'var(--background-7)',
        'background-8': 'var(--background-8)',
        'background-9': 'var(--background-9)',
        foreground: 'hsl(var(--foreground))',
        grey: {
          50: '#FAFAFA',
          100: '#F4F4F5',
          200: '#E4E4E7',
          300: '#D4D4D8',
          400: '#A1A1AA',
          500: '#71717A',
          600: '#52525B',
          700: '#3F3F46',
          800: '#27272A',
          900: '#222225',
          950: '#19191A',
          1000: '#141415',
          1100: '#0F0F10',
          1200: '#09090B',
          1300: '#050505',
        },
        green: {
          50: '#E8F5E7',
          100: '#C8E7C4',
          200: '#A4D79E',
          300: '#80C976',
          400: '#63BD58',
          500: '#46B138',
          600: '#3CA22F',
          700: '#2F9024',
          800: '#227F18',
          900: '#006100',
          950: '#006100',
        },
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
};