From 1c1e0376ebcd369e4138c4a269ac7085875d35ea Mon Sep 17 00:00:00 2001 From: rosslh Date: Fri, 24 Apr 2026 22:45:02 -0400 Subject: [PATCH] style: hue-normalize red palette to brand OKLCH h=29.38 --- .ai/design-system.md | 10 ++++---- resources/css/app.css | 25 ++++++++++++++----- resources/css/utilities.css | 6 ++--- .../views/components/forms/datalist.blade.php | 8 +++--- .../views/components/forms/input.blade.php | 4 +-- .../views/components/forms/select.blade.php | 2 +- .../views/components/forms/textarea.blade.php | 10 ++++---- 7 files changed, 39 insertions(+), 26 deletions(-) diff --git a/.ai/design-system.md b/.ai/design-system.md index d22adf3c6..cb94550b1 100644 --- a/.ai/design-system.md +++ b/.ai/design-system.md @@ -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; } ``` diff --git a/resources/css/app.css b/resources/css/app.css index f43d8fe7b..a17444eaa 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -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; diff --git a/resources/css/utilities.css b/resources/css/utilities.css index ee63bcc51..663a4aa1e 100644 --- a/resources/css/utilities.css +++ b/resources/css/utilities.css @@ -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 { diff --git a/resources/views/components/forms/datalist.blade.php b/resources/views/components/forms/datalist.blade.php index 91e0f53dc..d20748e6f 100644 --- a/resources/views/components/forms/datalist.blade.php +++ b/resources/views/components/forms/datalist.blade.php @@ -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 --}}