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

style: hue-normalize red palette to brand OKLCH h=29.38
All checks were successful
Build MapleDeploy Coolify Image / build (push) Successful in 1m47s
Details

Browse source
This commit is contained in:
rosslh 2026-04-24 22:45:02 -04:00
parent cdbe818adc
commit 1c1e0376eb
7 changed files with 39 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
.ai/design-system.md
View file

@ -50,7 +50,7 @@ #### Semantic
| Token | Hex | Usage |
|---|---|---|
| `success` | `#22C55E` | Running status, success alerts |
| `error` | `#dc2626` | Stopped status, danger actions, error alerts |
| `error` | `#dc281c` | Stopped status, danger actions, error alerts |
#### Light Mode Defaults
@ -650,7 +650,7 @@ ### 3.7 Badge / Status Indicator
.badge-success { background: #22C55E; }
.badge-warning { background: #fcd452; }
.badge-error { background: #dc2626; }
.badge-error { background: #dc281c; }
```
#### Status Text Pattern
@ -669,7 +669,7 @@ #### Status Text Pattern
| Status | Badge Class | Text Color |
|---|---|---|
| Running | `badge-success` | `text-success` (`#22C55E`) |
| Stopped | `badge-error` | `text-error` (`#dc2626`) |
| Stopped | `badge-error` | `text-error` (`#dc281c`) |
| Degraded | `badge-warning` | `dark:text-warning` (`#fcd452`) |
| Restarting | `badge-warning` | `dark:text-warning` (`#fcd452`) |
@ -1129,7 +1129,7 @@ ### 3.10 Callout / Alert
**Icon colors per type:**
- Warning: `text-warning-600 dark:text-warning-400` (`#ca8a04` / `#fcd452`)
- Danger: `text-red-600 dark:text-red-400` (`#dc2626` / `#f87171`)
- Danger: `text-red-600 dark:text-red-400` (`#dc281c` / `#f87171`)
- Info: `text-blue-600 dark:text-blue-400` (`#2563eb` / `#60a5fa`)
- Success: `text-green-600 dark:text-green-400` (`#16a34a` / `#4ade80`)
@ -1661,6 +1661,6 @@ ## 6. CSS Custom Properties (Theme Tokens)
/* Semantic */
--color-success: #22C55E;
--color-error: #dc2626;
--color-error: #dc281c;
}
```

25
resources/css/app.css
View file

@ -33,12 +33,25 @@ @theme {
--color-warning-800: #854d0e;
--color-warning-900: #713f12;
--color-success: #22C55E;
--color-error: #dc2626;
--color-coollabs-50: #fef3f2;
--color-coollabs: #d52b1e;
--color-coollabs-100: #f34d40;
--color-coollabs-200: #bc2519;
--color-coollabs-300: #9c2118;
/* MapleDeploy branding: red palette hue-normalized to OKLCH h=29.38 (#D52A1E) */
--color-error: #dc281c;
--color-coollabs-50: #fef3f1;
--color-coollabs: #d52b1f;
--color-coollabs-100: #f34d3d;
--color-coollabs-200: #bc251a;
--color-coollabs-300: #9c2117;
/* Override Tailwind's red scale so red-* utility classes match the MapleDeploy brand hue */
--color-red-50: #fef1ef;
--color-red-100: #ffe3df;
--color-red-200: #ffcec5;
--color-red-300: #feaa9d;
--color-red-400: #fb7968;
--color-red-500: #f34d3d;
--color-red-600: #d52b1f;
--color-red-700: #bc251a;
--color-red-800: #9c2117;
--color-red-900: #812219;
--color-red-950: #460d08;
--color-coolgray-100: #1c1917;
--color-coolgray-200: #35322f;
--color-coolgray-300: #44403c;

6
resources/css/utilities.css
View file

@ -40,7 +40,7 @@ @utility input-sticky {
}
&:focus-visible {
box-shadow: inset 4px 0 0 #d52b1e, inset 0 0 0 1px #e5e5e5;
box-shadow: inset 4px 0 0 #d52b1f, inset 0 0 0 1px #e5e5e5;
}
&:where(.dark, .dark *):focus-visible {
@ -82,7 +82,7 @@ @utility input {
@apply focus-visible:outline-none;
&:focus-visible {
box-shadow: inset 4px 0 0 #d52b1e, inset 0 0 0 2px #e5e5e5;
box-shadow: inset 4px 0 0 #d52b1f, inset 0 0 0 2px #e5e5e5;
}
&:where(.dark, .dark *):focus-visible {
@ -113,7 +113,7 @@ @utility select {
}
&:focus-visible {
box-shadow: inset 4px 0 0 #d52b1e, inset 0 0 0 2px #e5e5e5;
box-shadow: inset 4px 0 0 #d52b1f, inset 0 0 0 2px #e5e5e5;
}
&:where(.dark, .dark *):focus-visible {

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

@ -102,7 +102,7 @@ class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5 px-2 w-
{{-- MapleDeploy branding: red accent instead of Coolify purple --}}
:style="(() => {
const isDark = document.documentElement.classList.contains('dark');
const accent = isDark ? '#fde047' : '#d52b1e';
const accent = isDark ? '#fde047' : '#d52b1f';
const border = isDark ? '#242424' : '#e5e5e5';
return focused
? 'box-shadow: inset 4px 0 0 ' + accent + ', inset 0 0 0 2px ' + border + ';'
@ -111,7 +111,7 @@ class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5 px-2 w-
:class="{
'opacity-50': {{ $disabled ? 'true' : 'false' }}
}" 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]">
wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,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">
@ -235,7 +235,7 @@ class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 bg-whit
{{-- MapleDeploy branding: red accent instead of Coolify purple --}}
:style="(() => {
const isDark = document.documentElement.classList.contains('dark');
const accent = isDark ? '#fde047' : '#d52b1e';
const accent = isDark ? '#fde047' : '#d52b1f';
const border = isDark ? '#242424' : '#e5e5e5';
return focused
? 'box-shadow: inset 4px 0 0 ' + accent + ', inset 0 0 0 2px ' + border + ';'
@ -243,7 +243,7 @@ class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 bg-whit
})()"
:class="{
'opacity-50': {{ $disabled ? 'true' : 'false' }}
}" 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]">
}" wire:loading.class="opacity-50" wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,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">

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

@ -39,7 +39,7 @@ class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hov
x-bind:type="type"
x-bind:class="{ 'truncate': type === 'text' && ! $el.disabled }"
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
@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
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,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"
@readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
@ -50,7 +50,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_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,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') }}"

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
<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_#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>
@if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,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_#d52b1f,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)

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

@ -53,16 +53,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_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,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_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]"
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,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_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,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>
@ -72,9 +72,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_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]"
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,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_#d52b1e,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fde047,inset_0_0_0_2px_#242424]" @endif
wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#d52b1f,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>