rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(branding): replace Coolify purple and yellow with MapleDeploy palette

Browse source 
Replace #6b16ed (Coolify purple) with #d52b1e (MapleDeploy red) and
form focus states, dirty indicators, chart colors, and theme tokens.
Also fix warning color scale to use standard Tailwind yellow values.
This commit is contained in:
rosslh 2026-02-19 16:10:43 -08:00
parent 068460d853
commit 6db1c5e9e4
10 changed files with 33 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config/livewire.php
View file

@ -118,7 +118,7 @@
'navigate' => [ 'navigate' => [
'show_progress_bar' => true, 'show_progress_bar' => true,
'progress_bar_color' => '#fcd452', 'progress_bar_color' => '#fde047',
], ],
/* /*

6
resources/css/app.css
View file

@ -19,13 +19,13 @@ @theme {
--font-display: 'Overlock', sans-serif; --font-display: 'Overlock', sans-serif;
--color-base: #1c1917; --color-base: #1c1917;
--color-warning: #fcd452; --color-warning: #fde047;
--color-warning-50: #fefce8; --color-warning-50: #fefce8;
--color-warning-100: #fef9c3; --color-warning-100: #fef9c3;
--color-warning-200: #fef08a; --color-warning-200: #fef08a;
--color-warning-300: #fde047; --color-warning-300: #fde047;
--color-warning-400: #fcd452; --color-warning-400: #facc15;
--color-warning-500: #facc15; --color-warning-500: #eab308;
--color-warning-600: #ca8a04; --color-warning-600: #ca8a04;
--color-warning-700: #a16207; --color-warning-700: #a16207;
--color-warning-800: #854d0e; --color-warning-800: #854d0e;

17
resources/css/utilities.css
View file

@ -40,11 +40,11 @@ @utility input-sticky {
} }
&:focus-visible { &: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 { &: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; @apply focus-visible:outline-none;
&:focus-visible { &: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 { &: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 { &:read-only {
@ -113,11 +113,11 @@ @utility select {
} }
&:focus-visible { &: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 { &: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 { @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 { @utility text-helper {
@ -333,7 +334,7 @@ @utility log-warning {
} }
@utility log-debug { @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 { @utility log-info {

10
resources/views/components/forms/datalist.blade.php
View file

@ -99,9 +99,10 @@
{{-- Unified Input Container with Tags Inside --}} {{-- Unified Input Container with Tags Inside --}}
<div @click="$refs.searchInput.focus()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false" <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" 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"
{{-- MapleDeploy branding: red accent instead of Coolify purple --}}
:style="(() => { :style="(() => {
const isDark = document.documentElement.classList.contains('dark'); const isDark = document.documentElement.classList.contains('dark');
const accent = isDark ? '#fcd452' : '#6b16ed'; const accent = isDark ? '#fde047' : '#d52b1e';
const border = isDark ? '#242424' : '#e5e5e5'; const border = isDark ? '#242424' : '#e5e5e5';
return focused return focused
? 'box-shadow: inset 4px 0 0 ' + accent + ', inset 0 0 0 2px ' + border + ';' ? 'box-shadow: inset 4px 0 0 ' + accent + ', inset 0 0 0 2px ' + border + ';'
@ -110,7 +111,7 @@ class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5 px-2 w-
:class="{ :class="{
'opacity-50': {{ $disabled ? 'true' : 'false' }} 'opacity-50': {{ $disabled ? 'true' : 'false' }}
}" wire:loading.class="opacity-50" }" 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 --}} {{-- Selected Tags Inside Input --}}
<template x-for="value in selected" :key="value"> <template x-for="value in selected" :key="value">
@ -231,9 +232,10 @@ class="w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 bg-white dark:
{{-- Input Container --}} {{-- Input Container --}}
<div @click="openDropdown()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false" <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" 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"
{{-- MapleDeploy branding: red accent instead of Coolify purple --}}
:style="(() => { :style="(() => {
const isDark = document.documentElement.classList.contains('dark'); const isDark = document.documentElement.classList.contains('dark');
const accent = isDark ? '#fcd452' : '#6b16ed'; const accent = isDark ? '#fde047' : '#d52b1e';
const border = isDark ? '#242424' : '#e5e5e5'; const border = isDark ? '#242424' : '#e5e5e5';
return focused return focused
? 'box-shadow: inset 4px 0 0 ' + accent + ', inset 0 0 0 2px ' + border + ';' ? 'box-shadow: inset 4px 0 0 ' + accent + ', inset 0 0 0 2px ' + border + ';'
@ -241,7 +243,7 @@ class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 bg-whit
})()" })()"
:class="{ :class="{
'opacity-50': {{ $disabled ? 'true' : 'false' }} '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 --}} {{-- Display Selected Value or Search Input --}}
<div class="flex-1 flex items-center min-w-0 px-1"> <div class="flex-1 flex items-center min-w-0 px-1">

4
resources/views/components/forms/input.blade.php
View file

@ -36,7 +36,7 @@ class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hov
@endif @endif
<input autocomplete="{{ $autocomplete }}" value="{{ $value }}" <input autocomplete="{{ $autocomplete }}" value="{{ $value }}"
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required) {{ $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" wire:loading.attr="disabled"
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}" type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}" 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 @else
<input autocomplete="{{ $autocomplete }}" @if ($value) value="{{ $value }}" @endif <input autocomplete="{{ $autocomplete }}" @if ($value) value="{{ $value }}" @endif
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required) @readonly($readonly) {{ $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" wire:loading.attr="disabled"
type="{{ $type }}" @disabled($disabled) min="{{ $attributes->get('min') }}" type="{{ $type }}" @disabled($disabled) min="{{ $attributes->get('min') }}"
max="{{ $attributes->get('max') }}" minlength="{{ $attributes->get('minlength') }}" max="{{ $attributes->get('max') }}" minlength="{{ $attributes->get('minlength') }}"

2
resources/views/components/forms/select.blade.php
View file

@ -12,7 +12,7 @@ class="flex gap-1 items-center mb-1 text-sm font-medium {{ $disabled ? 'text-neu
@endif @endif
<select {{ $attributes->merge(['class' => $defaultClass]) }} @disabled($disabled) @required($required) <select {{ $attributes->merge(['class' => $defaultClass]) }} @disabled($disabled) @required($required)
wire:loading.attr="disabled" name={{ $modelBinding }} id="{{ $htmlId }}" 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 }} {{ $slot }}
</select> </select>
@error($modelBinding) @error($modelBinding)

10
resources/views/components/forms/textarea.blade.php
View file

@ -45,16 +45,16 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
@endif @endif
<input x-cloak x-show="type === 'password'" value="{{ $value }}" <input x-cloak x-show="type === 'password'" value="{{ $value }}"
{{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required) {{ $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" wire:loading.attr="disabled"
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}" type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}" name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
aria-placeholder="{{ $attributes->get('placeholder') }}"> aria-placeholder="{{ $attributes->get('placeholder') }}">
<textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}" x-cloak x-show="type !== 'password'" <textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}" x-cloak x-show="type !== 'password'"
placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }} 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 @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 }}" @disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
name="{{ $name }}" name={{ $modelBinding }} name="{{ $name }}" name={{ $modelBinding }}
@if ($autofocus) x-ref="autofocusInput" @endif></textarea> @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 }}" <textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}"
{{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}" {{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}"
{{ !$spellcheck ? 'spellcheck=false' : '' }} {{ $attributes->merge(['class' => $defaultClass]) }} {{ !$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 @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 }}" @disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
name="{{ $name }}" name={{ $modelBinding }} name="{{ $name }}" name={{ $modelBinding }}
@if ($autofocus) x-ref="autofocusInput" @endif></textarea> @if ($autofocus) x-ref="autofocusInput" @endif></textarea>

4
resources/views/livewire/project/application/deployment/index.blade.php
View file

@ -38,7 +38,7 @@
'p-2 border-l-2 bg-white dark:bg-coolgray-100', 'p-2 border-l-2 bg-white dark:bg-coolgray-100',
'border-blue-500/50 border-dashed' => 'border-blue-500/50 border-dashed' =>
data_get($deployment, 'status') === 'in_progress', data_get($deployment, 'status') === 'in_progress',
'border-purple-500/50 border-dashed' => 'border-amber-500/50 border-dashed' =>
data_get($deployment, 'status') === 'queued', data_get($deployment, 'status') === 'queued',
'border-white border-dashed' => 'border-white border-dashed' =>
data_get($deployment, 'status') === 'cancelled-by-user', data_get($deployment, 'status') === 'cancelled-by-user',
@ -52,7 +52,7 @@
'px-3 py-1 rounded-md text-xs font-medium shadow-xs', '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' => 'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' =>
data_get($deployment, 'status') === 'in_progress', 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', data_get($deployment, 'status') === 'queued',
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200' =>
data_get($deployment, 'status') === 'failed', data_get($deployment, 'status') === 'failed',

4
resources/views/livewire/project/shared/metrics.blade.php
View file

@ -63,7 +63,7 @@ class="pt-5">
enabled: false, enabled: false,
offsetY: -10, offsetY: -10,
style: { style: {
colors: ['#FCD452'], colors: ['#fde047'],
}, },
background: { background: {
enabled: false, enabled: false,
@ -191,7 +191,7 @@ class="pt-5">
enabled: false, enabled: false,
offsetY: -10, offsetY: -10,
style: { style: {
colors: ['#FCD452'], colors: ['#fde047'],
}, },
background: { background: {
enabled: false, enabled: false,

4
resources/views/livewire/server/charts.blade.php
View file

@ -57,7 +57,7 @@
enabled: false, enabled: false,
offsetY: -10, offsetY: -10,
style: { style: {
colors: ['#FCD452'], colors: ['#fde047'],
}, },
background: { background: {
enabled: false, enabled: false,
@ -187,7 +187,7 @@
enabled: false, enabled: false,
offsetY: -10, offsetY: -10,
style: { style: {
colors: ['#FCD452'], colors: ['#fde047'],
}, },
background: { background: {
enabled: false, enabled: false,