// Set the Preflight flag based on the build target.
const includePreflight = 'editor' === process.env._TW_TARGET ? false : true;
import plugin from 'tailwindcss/plugin';

module.exports = {
	presets: [
		// Manage Tailwind Typography's configuration in a separate file.
		require('./tailwind-typography.config.js'),
	],
	content: [
		// Ensure changes to PHP files and `theme.json` trigger a rebuild.
		'./theme/**/*.php',
	],
	darkMode: 'class',
	theme: {
		// Extend the default Tailwind theme.
		extend: {
		},
	},
	daisyui: {
		themes: [
			{
				wowpress: {
					"primary": "#a991f7",
					"secondary": "#f6d860",
					"accent": "#37cdbe",
					"neutral": "#fff",
					"base-100": "#ffffff",
					"primary-content": "#fff",
					"--rounded-box": "0rem", // border radius rounded-box utility class, used in card and other large boxes
					"--rounded-btn": "0rem", // border radius rounded-btn utility class, used in buttons and similar element
					"--rounded-badge": "0rem", 
				}
			}
		]
	},
	corePlugins: {
		// Disable Preflight base styles in builds targeting the editor.
		preflight: includePreflight,
	},
	plugins: [
	//	require('daisyui'),
		// Add Tailwind Typography (via _tw fork).
		require('@_tw/typography'),

		// Extract colors and widths from `theme.json`.
		require('@_tw/themejson'),

		// Uncomment below to add additional first-party Tailwind plugins.
		 require('@tailwindcss/forms'),
		 require('@tailwindcss/aspect-ratio'),
		 require('@tailwindcss/container-queries'),
		 plugin(function({theme, addUtilities}) {
			const colorUtilities={};
			const colors = theme('colors');
			for (const color in colors){
				if(typeof colors[color] === 'object'){
				   colorUtilities[`.button-${color}`] = {
					'background': colors[color]['400'],
					'color': colors[color]['800'],
					'border': '1px solid '+colors[color]['800'],
					'outline': colors[color]['800'],
					'&:hover': {
						'background': colors[color]['300'],
						'border': '1px solid'+ colors[color]['900']
					}
				   }
				   colorUtilities[`.badge-${color}`] = {
					'background': colors[color]['200'],
					'color': colors[color]['800'],
					'border-color': colors[color]['800'],
				   }
				   colorUtilities[`.alert-${color}`] = {
					'background': colors[color]['200'],
					'color': colors[color]['800'],
					'border-color': colors[color]['800'],
				   }
				   colorUtilities[`.disabled-${color}`] = {
					'--disabled-color' :  colors[color]['500'],
				   } 
				   colorUtilities[`.enabled-${color}`] = {
					'--enabled-color' :  colors[color]['500'],
				   } 
				}
			}
			
			addUtilities(colorUtilities);
		})
	],
	safelist: [
        {pattern: /button-+/},
        {pattern: /badge-+/},
        {pattern: /alert-+/},
        {pattern: /bg-[^/]+-200$/},
        {pattern: /text-+/},
        {pattern: /border-[^/]+-700$/},
	]
};