tethys.backend/resources/js/colors.js

const gradientBgBase = 'bg-gradient-to-tr';
export const gradientBgPurplePink = `${gradientBgBase} from-purple-400 via-pink-500 to-red-500`;
export const gradientBgDark = `${gradientBgBase} from-slate-700 via-slate-900 to-slate-800`;
export const gradientBgPinkRed = `${gradientBgBase} from-pink-400 via-red-500 to-yellow-500`;
export const gradientBgGreenBlue = `${gradientBgBase}  from-green-400 to-blue-400`;

export const colorsBgLight = {
	white: 'bg-white text-black',
	light: 'bg-white text-black dark:bg-slate-900/70 dark:text-white',
	contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
	success: 'bg-emerald-500 border-emerald-500 text-white',
	danger: 'bg-red-500 border-red-500 text-white',
	warning: 'bg-yellow-500 border-yellow-500 text-white',
	info: 'bg-blue-500 border-blue-500 text-white',
};

export const colorsText = {
	white: 'text-black dark:text-slate-100',
	light: 'text-gray-700 dark:text-slate-400',
	contrast: 'dark:text-white',
	success: 'text-emerald-500',
	danger: 'text-red-500',
	warning: 'text-yellow-500',
	info: 'text-blue-500',
	modern: 'text-teal-500',
};

export const colorsOutline = {
	white: [colorsText.white, 'border-gray-100'],
	light: [colorsText.light, 'border-gray-100'],
	contrast: [colorsText.contrast, 'border-gray-900 dark:border-slate-100'],
	success: [colorsText.success, 'border-emerald-500'],
	danger: [colorsText.danger, 'border-red-500'],
	warning: [colorsText.warning, 'border-yellow-500'],
	info: [colorsText.info, 'border-blue-500'],
};

export const getButtonColor = (color, isOutlined, hasHover) => {
	const colors = {
		bg: {
			white: 'bg-white text-black',
			contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
			light: 'bg-gray-50 text-black',
			success: 'bg-emerald-600 dark:bg-emerald-500 text-white',
			danger: 'bg-red-600 dark:bg-red-500 text-white',
			warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
			info: 'bg-blue-600 dark:bg-blue-500 text-white',
			modern: 'bg-teal-600 dark:bg-teal-500 text-white',
		},
		bgHover: {
			white: 'hover:bg-gray-50',
			contrast: 'hover:bg-gray-900 hover:dark:bg-slate-100',
			light: 'hover:bg-gray-200',
			success:
				'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
			danger:
				'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
			warning:
				'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
			info: 'hover:bg-blue-700 hover:border-blue-700 hover:dark:bg-blue-600 hover:dark:border-blue-600',
			modern: 'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
		},
		borders: {
			white: 'border-gray-100',
			contrast: 'border-gray-900 dark:border-slate-100',
			light: 'border-gray-100 dark:border-slate-700',
			success: 'border-emerald-600 dark:border-emerald-500',
			danger: 'border-red-600 dark:border-red-500',
			warning: 'border-yellow-600 dark:border-yellow-500',
			info: 'border-blue-600 dark:border-blue-500',
			modern: 'border-teal-600 dark:border-teal-500',
		},
		text: {
			white: 'text-black dark:text-slate-100',
			contrast: 'dark:text-slate-100',
			light: 'text-gray-700 dark:text-slate-400',
			success: 'text-emerald-600 dark:text-emerald-500',
			danger: 'text-red-600 dark:text-red-500',
			warning: 'text-yellow-600 dark:text-yellow-500',
			info: 'text-blue-600 dark:text-blue-500',
			modern: 'text-teal-600 dark:text-teal-500',
		},
		outlineHover: {
			white: 'hover:bg-gray-100 hover:text-gray-900 dark:hover:text-slate-900',
			contrast:
				'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
			light: 'hover:bg-gray-100 hover:text-gray-900 dark:hover:text-slate-900',			
			success:
				'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-600',
			danger:
				'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
			warning:
				'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
			info: 'hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-blue-600',
			modern: 'hover:bg-teal-600 hover:text-teal hover:dark:bg-teal-100 hover:dark:text-black',
		},
	};

	if (!colors.bg[color]) {
		return color;
	}

	const base = [isOutlined ? colors.text[color] : colors.bg[color], colors.borders[color]];

	if (hasHover) {
		base.push(isOutlined ? colors.outlineHover[color] : colors.bgHover[color]);
	}

	return base;
};