From c72c0168b45c1c9a8b90e76b6b2e7d368d8e6d03 Mon Sep 17 00:00:00 2001
From: Nick <koolnube84@gmail.com>
Date: Mon, 2 Feb 2026 19:48:59 -0500
Subject: [PATCH] feat: color-coolify: js to set button label color

---
 resources/js/app.js                           |  4 +++
 resources/js/color-utils.js                   | 30 +++++++++++++++++++
 .../views/livewire/project/edit.blade.php     |  2 +-
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/color-utils.js

diff --git a/resources/js/app.js b/resources/js/app.js
index 4dcae5f8e..2a3e8f3f2 100644
--- a/resources/js/app.js
+++ b/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, () => {
diff --git a/resources/js/color-utils.js b/resources/js/color-utils.js
new file mode 100644
index 000000000..ef792502d
--- /dev/null
+++ b/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;
+}
diff --git a/resources/views/livewire/project/edit.blade.php b/resources/views/livewire/project/edit.blade.php
index 9375e9765..e4be8e83e 100644
--- a/resources/views/livewire/project/edit.blade.php
+++ b/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>