const theme = require('./theme.json');
const tailpress = require('@jeffreyvr/tailwindcss-tailpress');

// Fonction pour obtenir la couleur de base depuis theme.json
const getBaseColor = (slug) => {
  const color = theme.settings.color.palette.find(
    (c) => c.slug === slug
  );
  return color ? color.color : null;
};

module.exports = {
  content: [
    './*.php',
    './**/*.php',
    './resources/css/*.css',
    './resources/js/*.js',
    './safelist.txt',
  ],
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '0rem',
      },
    },
    extend: {
      colors: {
        ...tailpress.colorMapper(
          tailpress.theme('settings.color.palette', theme)
        ),
        'carhop-orange': {
          50: '#fff8eb',
          100: '#ffebc6',
          200: '#ffd588',
          300: '#ffba4a',
          400: getBaseColor('carhop-orange'), // Base Color
          500: '#f97a07',
          600: '#dd5602',
          700: '#b73806',
          800: '#942a0c',
          900: '#7a240d',
          950: '#461002',
        },
        'carhop-purple': {
          50: '#f8f5ff',
          100: '#efe8ff',
          200: '#e2d4ff',
          300: getBaseColor('carhop-purple'), // Base Color
          400: '#ab82fe',
          500: '#8c53f9',
          600: '#7331ec',
          700: '#6020d0',
          800: '#531faa',
          900: '#451b88',
          950: '#2b0665',
        },
      },
      fontSize: tailpress.fontSizeMapper(
        tailpress.theme(
          'settings.typography.fontSizes',
          theme
        )
      ),
    },
    screens: {
      xs: '480px',
      sm: '600px',
      md: '782px',
      lg: tailpress.theme(
        'settings.layout.contentSize',
        theme
      ),
      xl: tailpress.theme(
        'settings.layout.wideSize',
        theme
      ),
      '2xl': '1440px',
    },
  },
  plugins: [tailpress.tailwind],
};