feat: color-coolify: js to set button label color

resources/js/app.js

@@ -1,4 +1,8 @@
 import { initializeTerminalComponent } from './terminal.js';
+import { initializeColorUtils } from './color-utils.js';
+
+// Initialize color utilities globally
+initializeColorUtils();
 
 ['livewire:navigated', 'alpine:init'].forEach((event) => {
     document.addEventListener(event, () => {

resources/js/color-utils.js

@@ -0,0 +1,30 @@
+/**
+ * Color utility functions for the application
+ */
+export function initializeColorUtils() {
+    /**
+     * Determines the appropriate text color (black or white) based on background color luminance
+     * Uses WCAG relative luminance formula for accessibility
+     *
+     * @param {string} bgColor - Hex color code (e.g., '#FF5733')
+     * @returns {string} Tailwind CSS class: 'text-black' or 'text-white'
+     */
+    function getContrastTextColor(bgColor) {
+        if (!bgColor) return '';
+
+        // Convert hex to RGB
+        const hex = bgColor.replace('#', '');
+        const r = parseInt(hex.substr(0, 2), 16);
+        const g = parseInt(hex.substr(2, 2), 16);
+        const b = parseInt(hex.substr(4, 2), 16);
+
+        // Calculate relative luminance using WCAG formula
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+        // Return dark text for light backgrounds, light text for dark backgrounds
+        return luminance > 0.5 ? 'text-black' : 'text-white';
+    }
+
+    // Make it globally available
+    window.getContrastTextColor = getContrastTextColor;
+}

resources/views/livewire/project/edit.blade.php

@@ -32,7 +32,7 @@
                             @click="showPicker = true; $nextTick(() => document.getElementById('colorPicker').click())"
                             class="flex items-center justify-center w-20 h-8 text-xs font-medium border rounded cursor-pointer border-coolgray-300 dark:border-coolgray-500 hover:border-coolgray-400 dark:hover:border-coolgray-400"
                             :style="$wire.color ? 'background-color: ' + $wire.color : ''">
-                            <span :class="$wire.color ? 'text-white mix-blend-difference' : 'dark:text-white'">
+                            <span :class="$wire.color ? getContrastTextColor($wire.color) : 'dark:text-white'">
                                 Select
                             </span>
                         </button>