import { COLORS } from './constants/colors';
import tailwindForms from '@tailwindcss/forms';
import tailwindTints from 'tailwind-tints';
import type { Config } from 'tailwindcss';

const tints = tailwindTints({
  primary: COLORS.COLOR_PRIMARY,
  secondary: COLORS.COLOR_SECONDARY,
  tertiarty: COLORS.COLOR_TERTIARTY,
  danger: COLORS.COLOR_DANGER,
});

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    '../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      width: {
        standard: '1104px',
      },
    },
    // extend: {
    //   colors: {
    //     primary: COLORS.COLOR_PRIMARY,
    //     secondary: COLORS.COLOR_SECONDARY,
    //     tertiarty: COLORS.COLOR_TERTIARTY,
    //   },
    // },
  },
  plugins: [tints, tailwindForms],
};
export default config;