From 862c6ac2236823c28158cdeea1c942f177ccd7e5 Mon Sep 17 00:00:00 2001 From: rosslh Date: Mon, 6 Apr 2026 14:48:20 -0400 Subject: [PATCH] style(branding): remap neutral/gray to stone and fix chart theming Remap neutral and gray scales to stone equivalents in @theme block for warm tone consistency across all three apps. Interpolate coolgray-200 to avoid invisible dark-mode elements. Add gridColor/textColor to ApexCharts initial options so axis labels render on first load. Update warning color and fix add-tag opacity. --- resources/css/app.css | 32 +++++++++++++++++-- resources/css/utilities.css | 2 +- .../views/auth/confirm-password.blade.php | 2 +- .../views/auth/forgot-password.blade.php | 2 +- resources/views/auth/login.blade.php | 6 ++-- resources/views/auth/register.blade.php | 4 +-- resources/views/auth/reset-password.blade.php | 4 +-- .../views/auth/two-factor-challenge.blade.php | 4 +-- resources/views/layouts/base.blade.php | 3 ++ resources/views/layouts/simple.blade.php | 2 +- .../livewire/force-password-reset.blade.php | 2 +- .../livewire/project/shared/metrics.blade.php | 29 +++++++++++++++-- .../views/livewire/server/charts.blade.php | 29 +++++++++++++++-- 13 files changed, 101 insertions(+), 20 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index 1ea79ef0f..f43d8fe7b 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -40,10 +40,37 @@ @theme { --color-coollabs-200: #bc2519; --color-coollabs-300: #9c2118; --color-coolgray-100: #1c1917; - --color-coolgray-200: #292524; + --color-coolgray-200: #35322f; --color-coolgray-300: #44403c; --color-coolgray-400: #57534e; --color-coolgray-500: #78716c; + + /* MapleDeploy branding: remap neutral and gray → stone for warm tone consistency with marketing/dashboard. + Upstream uses neutral for text/borders and gray for backgrounds/surfaces. Remapping both to stone + warms the entire UI to match our design system, covering ~1000 class references without touching + any Blade templates. */ + --color-neutral-50: oklch(98.5% 0.001 106.423); + --color-neutral-100: oklch(97% 0.001 106.424); + --color-neutral-200: oklch(92.3% 0.003 48.717); + --color-neutral-300: oklch(86.9% 0.005 56.366); + --color-neutral-400: oklch(70.9% 0.01 56.259); + --color-neutral-500: oklch(55.3% 0.013 58.071); + --color-neutral-600: oklch(44.4% 0.011 73.639); + --color-neutral-700: oklch(37.4% 0.01 67.558); + --color-neutral-800: oklch(26.8% 0.007 34.298); + --color-neutral-900: oklch(21.6% 0.006 56.043); + --color-neutral-950: oklch(14.7% 0.004 49.25); + --color-gray-50: oklch(98.5% 0.001 106.423); + --color-gray-100: oklch(97% 0.001 106.424); + --color-gray-200: oklch(92.3% 0.003 48.717); + --color-gray-300: oklch(86.9% 0.005 56.366); + --color-gray-400: oklch(70.9% 0.01 56.259); + --color-gray-500: oklch(55.3% 0.013 58.071); + --color-gray-600: oklch(44.4% 0.011 73.639); + --color-gray-700: oklch(37.4% 0.01 67.558); + --color-gray-800: oklch(26.8% 0.007 34.298); + --color-gray-900: oklch(21.6% 0.006 56.043); + --color-gray-950: oklch(14.7% 0.004 49.25); } /* @@ -96,7 +123,8 @@ @keyframes lds-heart { */ html, body { - @apply w-full min-h-full bg-stone-50 dark:bg-base dark:text-neutral-400; + /* MapleDeploy branding: text-stone-800 body text matches marketing/dashboard */ + @apply w-full min-h-full text-stone-800 bg-gray-50 dark:bg-base dark:text-neutral-400; } body { diff --git a/resources/css/utilities.css b/resources/css/utilities.css index e7977dc71..52613a73e 100644 --- a/resources/css/utilities.css +++ b/resources/css/utilities.css @@ -138,7 +138,7 @@ @utility tag { } @utility add-tag { - @apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200; + @apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500 text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200; } @utility dropdown-item { diff --git a/resources/views/auth/confirm-password.blade.php b/resources/views/auth/confirm-password.blade.php index c504c4364..f6eb9d686 100644 --- a/resources/views/auth/confirm-password.blade.php +++ b/resources/views/auth/confirm-password.blade.php @@ -1,5 +1,5 @@ -
+
diff --git a/resources/views/auth/forgot-password.blade.php b/resources/views/auth/forgot-password.blade.php index 567f504e3..23d325a04 100644 --- a/resources/views/auth/forgot-password.blade.php +++ b/resources/views/auth/forgot-password.blade.php @@ -1,5 +1,5 @@ -
+
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index 7bc3ef8a5..d15d89339 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -1,5 +1,5 @@ -
+
@@ -82,7 +82,7 @@ class="text-sm dark:text-neutral-400 hover:text-coollabs dark:hover:text-warning
- + Don't have an account?
@@ -103,7 +103,7 @@ class="block w-full text-center py-3 px-4 rounded-lg border border-neutral-300 d
- or + or continue with
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php index 7917dcd76..2492c534e 100644 --- a/resources/views/auth/register.blade.php +++ b/resources/views/auth/register.blade.php @@ -11,7 +11,7 @@ function getOldOrLocal($key, $localValue) ?> -
+
@@ -85,7 +85,7 @@ class="p-4 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-2
- + Already have an account?
diff --git a/resources/views/auth/reset-password.blade.php b/resources/views/auth/reset-password.blade.php index 8c5ff7264..88f096d28 100644 --- a/resources/views/auth/reset-password.blade.php +++ b/resources/views/auth/reset-password.blade.php @@ -1,5 +1,5 @@ -
+
@@ -70,7 +70,7 @@ class="p-4 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-2
- + Remember your password?
diff --git a/resources/views/auth/two-factor-challenge.blade.php b/resources/views/auth/two-factor-challenge.blade.php index ad350590a..fa2bc80f2 100644 --- a/resources/views/auth/two-factor-challenge.blade.php +++ b/resources/views/auth/two-factor-challenge.blade.php @@ -1,5 +1,5 @@ -
- + Need help?
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php index 449c9475b..641137328 100644 --- a/resources/views/layouts/base.blade.php +++ b/resources/views/layouts/base.blade.php @@ -140,6 +140,7 @@ let cpuColor = '#1e90ff' let ramColor = '#00ced1' let textColor = '#ffffff' + let gridColor = '#44403c' let editorBackground = '#181818' let editorTheme = 'blackboard' @@ -152,12 +153,14 @@ function checkTheme() { cpuColor = '#1e90ff' ramColor = '#00ced1' textColor = '#ffffff' + gridColor = '#44403c' editorBackground = '#181818' editorTheme = 'blackboard' } else { cpuColor = '#1e90ff' ramColor = '#00ced1' textColor = '#000000' + gridColor = '#d6d3d1' editorBackground = '#ffffff' editorTheme = null } diff --git a/resources/views/layouts/simple.blade.php b/resources/views/layouts/simple.blade.php index 89a66756e..27248f4ec 100644 --- a/resources/views/layouts/simple.blade.php +++ b/resources/views/layouts/simple.blade.php @@ -1,7 +1,7 @@ @extends('layouts.base') @section('body') @livewireScripts -
+
{{ $slot }}
@parent diff --git a/resources/views/livewire/force-password-reset.blade.php b/resources/views/livewire/force-password-reset.blade.php index 44c473849..30f58eb4c 100644 --- a/resources/views/livewire/force-password-reset.blade.php +++ b/resources/views/livewire/force-password-reset.blade.php @@ -1,4 +1,4 @@ -
+
MapleDeploy diff --git a/resources/views/livewire/project/shared/metrics.blade.php b/resources/views/livewire/project/shared/metrics.blade.php index f8b00c641..477479cf5 100644 --- a/resources/views/livewire/project/shared/metrics.blade.php +++ b/resources/views/livewire/project/shared/metrics.blade.php @@ -71,11 +71,23 @@ class="pt-5"> }, grid: { show: true, - borderColor: '', + borderColor: gridColor, }, colors: [cpuColor], xaxis: { type: 'datetime', + labels: { + style: { + colors: textColor, + } + } + }, + yaxis: { + labels: { + style: { + colors: textColor, + } + } }, series: [{ name: "CPU %", @@ -121,6 +133,9 @@ class="pt-5"> data: chartData[0].seriesData, }], colors: [cpuColor], + grid: { + borderColor: gridColor, + }, xaxis: { type: 'datetime', labels: { @@ -199,7 +214,7 @@ class="pt-5"> }, grid: { show: true, - borderColor: '', + borderColor: gridColor, }, colors: [ramColor], xaxis: { @@ -211,6 +226,13 @@ class="pt-5"> } } }, + yaxis: { + labels: { + style: { + colors: textColor, + } + } + }, series: [{ name: "Memory (MB)", data: [] @@ -256,6 +278,9 @@ class="pt-5"> data: chartData[0].seriesData, }], colors: [ramColor], + grid: { + borderColor: gridColor, + }, xaxis: { type: 'datetime', labels: { diff --git a/resources/views/livewire/server/charts.blade.php b/resources/views/livewire/server/charts.blade.php index 4d687f4af..7029e6d37 100644 --- a/resources/views/livewire/server/charts.blade.php +++ b/resources/views/livewire/server/charts.blade.php @@ -65,11 +65,23 @@ }, grid: { show: true, - borderColor: '', + borderColor: gridColor, }, colors: [cpuColor], xaxis: { type: 'datetime', + labels: { + style: { + colors: textColor, + } + } + }, + yaxis: { + labels: { + style: { + colors: textColor, + } + } }, series: [{ name: 'CPU %', @@ -116,6 +128,9 @@ data: chartData[0].seriesData, }], colors: [cpuColor], + grid: { + borderColor: gridColor, + }, xaxis: { type: 'datetime', labels: { @@ -195,7 +210,7 @@ }, grid: { show: true, - borderColor: '', + borderColor: gridColor, }, colors: [ramColor], xaxis: { @@ -207,6 +222,13 @@ } } }, + yaxis: { + labels: { + style: { + colors: textColor, + } + } + }, series: [{ name: "Memory (%)", data: [] @@ -252,6 +274,9 @@ data: chartData[0].seriesData, }], colors: [ramColor], + grid: { + borderColor: gridColor, + }, xaxis: { type: 'datetime', labels: {