From c05e320665525a24cd13ba75f24b2052068ea220 Mon Sep 17 00:00:00 2001
From: rosslh <ross@rosshill.ca>
Date: Thu, 19 Feb 2026 16:10:43 -0800
Subject: [PATCH] style(branding): replace Coolify purple and yellow with
 MapleDeploy palette

Replace #6b16ed (Coolify purple) with #d52b1e (MapleDeploy red) and
#fcd452 (Coolify yellow) with #fde047 (Tailwind yellow-300) across all
form focus states, dirty indicators, chart colors, and theme tokens.
Also fix warning color scale to use standard Tailwind yellow values.
---
 config/constants.php                            |  2 +-
 config/livewire.php                             |  2 +-
 resources/css/app.css                           |  6 +++---
 resources/css/utilities.css                     | 17 +++++++++--------
 .../views/components/forms/datalist.blade.php   | 12 ++++++------
 .../views/components/forms/input.blade.php      |  4 ++--
 .../views/components/forms/select.blade.php     |  2 +-
 .../views/components/forms/textarea.blade.php   | 10 +++++-----
 .../application/deployment/index.blade.php      |  4 ++--
 .../livewire/project/shared/metrics.blade.php   |  4 ++--
 .../views/livewire/server/charts.blade.php      |  4 ++--
 11 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/config/constants.php b/config/constants.php
index ce590d46f..b31957f2c 100644
--- a/config/constants.php
+++ b/config/constants.php
@@ -3,7 +3,7 @@
 return [
     // MapleDeploy branding: registry pointed to Forgejo, auto-update disabled by default
     'coolify' => [
-        'version' => '4.0.0-beta.463.6',
+        'version' => '4.0.0-beta.463.7',
         'helper_version' => '1.0.12',
         'realtime_version' => '1.0.10',
         'self_hosted' => env('SELF_HOSTED', true),
diff --git a/config/livewire.php b/config/livewire.php
index 716739b17..0775a5cb2 100644
--- a/config/livewire.php
+++ b/config/livewire.php
@@ -118,7 +118,7 @@
 
     'navigate' => [
         'show_progress_bar' => true,
-        'progress_bar_color' => '#fcd452',
+        'progress_bar_color' => '#fde047',
     ],
 
     /*
diff --git a/resources/css/app.css b/resources/css/app.css
index 538ab92ae..fd8c81ddc 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -19,13 +19,13 @@ @theme {
     --font-display: 'Overlock', sans-serif;
 
     --color-base: #1c1917;
-    --color-warning: #fcd452;
+    --color-warning: #fde047;
     --color-warning-50: #fefce8;
     --color-warning-100: #fef9c3;
     --color-warning-200: #fef08a;
     --color-warning-300: #fde047;
-    --color-warning-400: #fcd452;
-    --color-warning-500: #facc15;
+    --color-warning-400: #facc15;
+    --color-warning-500: #eab308;
     --color-warning-600: #ca8a04;
     --color-warning-700: #a16207;
     --color-warning-800: #854d0e;
diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index 02be0c0c4..6a882af73 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -40,11 +40,11 @@ @utility input-sticky {
     }
 
     &:focus-visible {
-        box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 1px #e5e5e5;
+        box-shadow: inset 4px 0 0 #d52b1e, inset 0 0 0 1px #e5e5e5;
     }
 
     &:where(.dark, .dark *):focus-visible {
-        box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 1px #242424;
+        box-shadow: inset 4px 0 0 #fde047, inset 0 0 0 1px #242424;
     }
 }
 
@@ -82,11 +82,11 @@ @utility input {
     @apply focus-visible:outline-none;
 
     &:focus-visible {
-        box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;
+        box-shadow: inset 4px 0 0 #d52b1e, inset 0 0 0 2px #e5e5e5;
     }
 
     &:where(.dark, .dark *):focus-visible {
-        box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424;
+        box-shadow: inset 4px 0 0 #fde047, inset 0 0 0 2px #242424;
     }
 
     &:read-only {
@@ -113,11 +113,11 @@ @utility select {
     }
 
     &:focus-visible {
-        box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;
+        box-shadow: inset 4px 0 0 #d52b1e, inset 0 0 0 2px #e5e5e5;
     }
 
     &:where(.dark, .dark *):focus-visible {
-        box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424;
+        box-shadow: inset 4px 0 0 #fde047, inset 0 0 0 2px #242424;
     }
 }
 
@@ -269,7 +269,8 @@ @utility description {
 }
 
 @utility bg-coollabs-gradient {
-    @apply from-purple-500 via-pink-500 to-red-500 bg-linear-to-r;
+    /* MapleDeploy branding */
+    @apply from-red-700 via-red-500 to-red-400 bg-linear-to-r;
 }
 
 @utility text-helper {
@@ -333,7 +334,7 @@ @utility log-warning {
 }
 
 @utility log-debug {
-    @apply bg-purple-500/10 dark:bg-purple-500/15;
+    @apply bg-stone-500/10 dark:bg-stone-500/15;
 }
 
 @utility log-info {
diff --git a/resources/views/components/forms/datalist.blade.php b/resources/views/components/forms/datalist.blade.php
index 1d9a3b263..bc005aef5 100644
--- a/resources/views/components/forms/datalist.blade.php
+++ b/resources/views/components/forms/datalist.blade.php
@@ -99,12 +99,12 @@
             {{-- Unified Input Container with Tags Inside --}}
             <div @click="$refs.searchInput.focus()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false"
                 class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5  px-2 w-full text-sm rounded-sm border-0 bg-white dark:bg-coolgray-100 cursor-text px-1 text-black dark:text-white"
-                :style="focused ? 'box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;' : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;'"
-                x-init="$watch('focused', () => { if ($root.classList.contains('dark') || document.documentElement.classList.contains('dark')) { $el.style.boxShadow = focused ? 'inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424' : 'inset 4px 0 0 transparent, inset 0 0 0 2px #242424'; } })"
+                :style="focused ? 'box-shadow: inset 4px 0 0 #d52b1e, inset 0 0 0 2px #e5e5e5;' : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;'"
+                x-init="$watch('focused', () => { if ($root.classList.contains('dark') || document.documentElement.classList.contains('dark')) { $el.style.boxShadow = focused ? 'inset 4px 0 0 #fde047, inset 0 0 0 2px #242424' : 'inset 4px 0 0 transparent, inset 0 0 0 2px #242424'; } })"
                 :class="{
                         'opacity-50': {{ $disabled ? 'true' : 'false' }}
                     }" wire:loading.class="opacity-50"
-                wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]">
+                wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]">
 
                 {{-- Selected Tags Inside Input --}}
                 <template x-for="value in selected" :key="value">
@@ -225,11 +225,11 @@ class="w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 bg-white dark:
                 {{-- Input Container --}}
                 <div @click="openDropdown()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false"
                     class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 bg-white dark:bg-coolgray-100 cursor-text text-black dark:text-white"
-                    :style="focused ? 'box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;' : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;'"
-                    x-init="$watch('focused', () => { if ($root.classList.contains('dark') || document.documentElement.classList.contains('dark')) { $el.style.boxShadow = focused ? 'inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424' : 'inset 4px 0 0 transparent, inset 0 0 0 2px #242424'; } })"
+                    :style="focused ? 'box-shadow: inset 4px 0 0 #d52b1e, inset 0 0 0 2px #e5e5e5;' : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;'"
+                    x-init="$watch('focused', () => { if ($root.classList.contains('dark') || document.documentElement.classList.contains('dark')) { $el.style.boxShadow = focused ? 'inset 4px 0 0 #fde047, inset 0 0 0 2px #242424' : 'inset 4px 0 0 transparent, inset 0 0 0 2px #242424'; } })"
                     :class="{
                     'opacity-50': {{ $disabled ? 'true' : 'false' }}
-                }" wire:loading.class="opacity-50" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]">
+                }" wire:loading.class="opacity-50" wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]">
 
                     {{-- Display Selected Value or Search Input --}}
                     <div class="flex-1 flex items-center min-w-0 px-1">
diff --git a/resources/views/components/forms/input.blade.php b/resources/views/components/forms/input.blade.php
index a329664a2..37779c223 100644
--- a/resources/views/components/forms/input.blade.php
+++ b/resources/views/components/forms/input.blade.php
@@ -36,7 +36,7 @@ class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hov
             @endif
             <input autocomplete="{{ $autocomplete }}" value="{{ $value }}"
                 {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
-                @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
+                @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
                 wire:loading.attr="disabled"
                 type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
                 name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
@@ -47,7 +47,7 @@ class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hov
     @else
         <input autocomplete="{{ $autocomplete }}" @if ($value) value="{{ $value }}" @endif
             {{ $attributes->merge(['class' => $defaultClass]) }} @required($required) @readonly($readonly)
-            @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
+            @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
             wire:loading.attr="disabled"
             type="{{ $type }}" @disabled($disabled) min="{{ $attributes->get('min') }}"
             max="{{ $attributes->get('max') }}" minlength="{{ $attributes->get('minlength') }}"
diff --git a/resources/views/components/forms/select.blade.php b/resources/views/components/forms/select.blade.php
index 22a0c4027..4d8f6b8e9 100644
--- a/resources/views/components/forms/select.blade.php
+++ b/resources/views/components/forms/select.blade.php
@@ -12,7 +12,7 @@ class="flex gap-1 items-center mb-1 text-sm font-medium {{ $disabled ? 'text-neu
     @endif
     <select {{ $attributes->merge(['class' => $defaultClass]) }} @disabled($disabled) @required($required)
         wire:loading.attr="disabled" name={{ $modelBinding }} id="{{ $htmlId }}"
-        @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @else wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif>
+        @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @else wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif>
         {{ $slot }}
     </select>
     @error($modelBinding)
diff --git a/resources/views/components/forms/textarea.blade.php b/resources/views/components/forms/textarea.blade.php
index 3f8fdb112..1fde57e6d 100644
--- a/resources/views/components/forms/textarea.blade.php
+++ b/resources/views/components/forms/textarea.blade.php
@@ -45,16 +45,16 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
                 @endif
                 <input x-cloak x-show="type === 'password'" value="{{ $value }}"
                     {{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
-                    @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
+                    @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
                     wire:loading.attr="disabled"
                     type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
                     name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
                     aria-placeholder="{{ $attributes->get('placeholder') }}">
                 <textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}" x-cloak x-show="type !== 'password'"
                     placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
-                    @if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]"
+                    @if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]"
                 @else
-            wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
+            wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
                     @disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
                     name="{{ $name }}" name={{ $modelBinding }}
                     @if ($autofocus) x-ref="autofocusInput" @endif></textarea>
@@ -64,9 +64,9 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
             <textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}"
                 {{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}"
                 {{ !$spellcheck ? 'spellcheck=false' : '' }} {{ $attributes->merge(['class' => $defaultClass]) }}
-                @if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]"
+                @if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]"
         @else
-    wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
+    wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
                 @disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
                 name="{{ $name }}" name={{ $modelBinding }}
                 @if ($autofocus) x-ref="autofocusInput" @endif></textarea>
diff --git a/resources/views/livewire/project/application/deployment/index.blade.php b/resources/views/livewire/project/application/deployment/index.blade.php
index e73c11c62..935f07aa9 100644
--- a/resources/views/livewire/project/application/deployment/index.blade.php
+++ b/resources/views/livewire/project/application/deployment/index.blade.php
@@ -38,7 +38,7 @@
                 'p-2 border-l-2 bg-white dark:bg-coolgray-100',
                 'border-blue-500/50 border-dashed' =>
                     data_get($deployment, 'status') === 'in_progress',
-                'border-purple-500/50 border-dashed' =>
+                'border-amber-500/50 border-dashed' =>
                     data_get($deployment, 'status') === 'queued',
                 'border-white border-dashed' =>
                     data_get($deployment, 'status') === 'cancelled-by-user',
@@ -52,7 +52,7 @@
                                 'px-3 py-1 rounded-md text-xs font-medium shadow-xs',
                                 'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' =>
                                     data_get($deployment, 'status') === 'in_progress',
-                                'bg-purple-100/80 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' =>
+                                'bg-amber-100/80 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300' =>
                                     data_get($deployment, 'status') === 'queued',
                                 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200' =>
                                     data_get($deployment, 'status') === 'failed',
diff --git a/resources/views/livewire/project/shared/metrics.blade.php b/resources/views/livewire/project/shared/metrics.blade.php
index 728f7fef4..f8b00c641 100644
--- a/resources/views/livewire/project/shared/metrics.blade.php
+++ b/resources/views/livewire/project/shared/metrics.blade.php
@@ -63,7 +63,7 @@ class="pt-5">
                                 enabled: false,
                                 offsetY: -10,
                                 style: {
-                                    colors: ['#FCD452'],
+                                    colors: ['#fde047'],
                                 },
                                 background: {
                                     enabled: false,
@@ -191,7 +191,7 @@ class="pt-5">
                                 enabled: false,
                                 offsetY: -10,
                                 style: {
-                                    colors: ['#FCD452'],
+                                    colors: ['#fde047'],
                                 },
                                 background: {
                                     enabled: false,
diff --git a/resources/views/livewire/server/charts.blade.php b/resources/views/livewire/server/charts.blade.php
index d7ce259b5..4d687f4af 100644
--- a/resources/views/livewire/server/charts.blade.php
+++ b/resources/views/livewire/server/charts.blade.php
@@ -57,7 +57,7 @@
                                     enabled: false,
                                     offsetY: -10,
                                     style: {
-                                        colors: ['#FCD452'],
+                                        colors: ['#fde047'],
                                     },
                                     background: {
                                         enabled: false,
@@ -187,7 +187,7 @@
                                         enabled: false,
                                         offsetY: -10,
                                         style: {
-                                            colors: ['#FCD452'],
+                                            colors: ['#fde047'],
                                         },
                                         background: {
                                             enabled: false,