Merge pull request #68 from dreyfus92/fix/contrast-in-buttons

fix(Button): corrige contraste del botón y hover visible en fondos oscuros

Revisado en local, parece correcto.

Author: oxcar

src/components/Button.svelte

@@ -1,10 +1,10 @@
 <script>
-	import { onMount } from 'svelte';
+	import { fontColorContrast } from '$lib/fontColorContrast.js';
 
 	/** @type {{ action_label: string, color?: string }} */
 	let { action_label, color = "#00D690" } = $props();
 
-	let contrastedColor = $state('');
+	const labelColor = $derived(fontColorContrast(color));
 
 	/**
 	 * @param {string} hex
@@ -26,21 +26,46 @@
 			.slice(1)}`;
 	}
 
-	let darkerColor = $derived(darkenColor(color, 7));
+	/**
+	 * @param {string} hex
+	 * @param {number} percent
+	 */
+	function lightenColor(hex, percent) {
+		const num = parseInt(hex.slice(1), 16),
+			amt = Math.round(2.55 * percent),
+			R = (num >> 16) + amt,
+			G = (num >> 8 & 0x00FF) + amt,
+			B = (num & 0x0000FF) + amt;
+		return `#${(
+			0x1000000 +
+			(R < 255 ? (R < 0 ? 0 : R) : 255) * 0x10000 +
+			(G < 255 ? (G < 0 ? 0 : G) : 255) * 0x100 +
+			(B < 255 ? (B < 0 ? 0 : B) : 255)
+		)
+			.toString(16)
+			.slice(1)}`;
+	}
 
-	onMount(async () => {
-		const fontColorContrast = (await import('font-color-contrast')).default;
-		contrastedColor = fontColorContrast(color);
-	});
+	const hoverColor = $derived(
+		labelColor === '#ffffff' ? lightenColor(color, 22) : darkenColor(color, 12)
+	);
 </script>
 
 <button
-	class="Button min-w-[137px] h-12 px-6 py-2 rounded-3xl justify-center items-center inline-flex hover:bg-white/75 transition ease-in duration-150"
-	style={`background-color: ${color}; color: ${contrastedColor};`}
-	onmouseover={(e) => { e.currentTarget.style.backgroundColor = darkerColor; }}
-	onmouseout={(e) => { e.currentTarget.style.backgroundColor = color; }}
-	onfocus={(e) => { e.currentTarget.style.backgroundColor = darkerColor; }}
-	onblur={(e) => { e.currentTarget.style.backgroundColor = color; }}
+	class="min-w-[137px] h-12 px-6 py-2 rounded-3xl justify-center items-center inline-flex transition ease-in duration-150"
+	style={`background-color: ${color};`}
+	onmouseover={(e) => {
+		e.currentTarget.style.backgroundColor = hoverColor;
+	}}
+	onmouseout={(e) => {
+		e.currentTarget.style.backgroundColor = color;
+	}}
+	onfocus={(e) => {
+		e.currentTarget.style.backgroundColor = hoverColor;
+	}}
+	onblur={(e) => {
+		e.currentTarget.style.backgroundColor = color;
+	}}
 >
-	<span class="Button text-base uppercase leading-normal font-bold">{action_label}</span>
-</button>
+	<span class="text-base uppercase leading-normal font-bold" style={`color: ${labelColor};`}>{action_label}</span>
+</button>

src/lib/fontColorContrast.js

@@ -0,0 +1,21 @@
+import pkg from 'font-color-contrast';
+
+/**
+ * Normalize CJS default export for Vite client + SSR.
+ * @returns {(hex: string) => string}
+ */
+function resolve() {
+	if (typeof pkg === 'function') return /** @type {(hex: string) => string} */ (pkg);
+	const outer =
+		pkg && typeof pkg === 'object' && 'default' in pkg
+			? /** @type {{ default: unknown }} */ (pkg).default
+			: undefined;
+	if (typeof outer === 'function') return /** @type {(hex: string) => string} */ (outer);
+	if (outer && typeof outer === 'object' && 'default' in outer) {
+		const inner = /** @type {{ default: unknown }} */ (outer).default;
+		if (typeof inner === 'function') return /** @type {(hex: string) => string} */ (inner);
+	}
+	throw new Error('font-color-contrast: could not resolve a callable export');
+}
+
+export const fontColorContrast = resolve();

vite.config.js

@@ -2,5 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	ssr: {
+		noExternal: ['font-color-contrast']
+	}
 });