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

style(branding): remap neutral/gray to stone and fix chart theming
All checks were successful
Build MapleDeploy Coolify Image / build (push) Successful in 1m30s
Details

Browse source 
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.
This commit is contained in:
rosslh 2026-04-06 14:48:20 -04:00
parent 0aaba04396
commit 862c6ac223
13 changed files with 101 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
resources/css/app.css
View file

@ -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 {

2
resources/css/utilities.css
View file

@ -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 {

2
resources/views/auth/confirm-password.blade.php
View file

@ -1,5 +1,5 @@
<x-layout-simple>
<section class="bg-stone-50 dark:bg-base">
<section class="bg-gray-50 dark:bg-base">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<div class="w-full max-w-md space-y-8">
<div class="text-center space-y-2">

2
resources/views/auth/forgot-password.blade.php
View file

@ -1,5 +1,5 @@
<x-layout-simple>
<section class="bg-stone-50 dark:bg-base">
<section class="bg-gray-50 dark:bg-base">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<div class="w-full max-w-md space-y-8">
<div class="text-center space-y-2">

6
resources/views/auth/login.blade.php
View file

@ -1,5 +1,5 @@
<x-layout-simple>
<section class="bg-stone-50 dark:bg-base">
<section class="bg-gray-50 dark:bg-base">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<div class="w-full max-w-md space-y-8">
<div class="text-center space-y-2">
@ -82,7 +82,7 @@ class="text-sm dark:text-neutral-400 hover:text-coollabs dark:hover:text-warning
<div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-stone-50 dark:bg-base text-neutral-500 dark:text-neutral-400 ">
<span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400 ">
Don't have an account?
</span>
</div>
@ -103,7 +103,7 @@ class="block w-full text-center py-3 px-4 rounded-lg border border-neutral-300 d
<div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-stone-50 dark:bg-base text-neutral-500 dark:text-neutral-400">or
<span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400">or
continue with</span>
</div>
</div>

4
resources/views/auth/register.blade.php
View file

@ -11,7 +11,7 @@ function getOldOrLocal($key, $localValue)
?>
<x-layout-simple>
<section class="bg-stone-50 dark:bg-base">
<section class="bg-gray-50 dark:bg-base">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<div class="w-full max-w-md space-y-8">
<div class="text-center space-y-2">
@ -85,7 +85,7 @@ class="p-4 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-2
<div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-stone-50 dark:bg-base text-neutral-500 dark:text-neutral-400">
<span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400">
Already have an account?
</span>
</div>

4
resources/views/auth/reset-password.blade.php
View file

@ -1,5 +1,5 @@
<x-layout-simple>
<section class="bg-stone-50 dark:bg-base">
<section class="bg-gray-50 dark:bg-base">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<div class="w-full max-w-md space-y-8">
<div class="text-center space-y-2">
@ -70,7 +70,7 @@ class="p-4 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-2
<div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-stone-50 dark:bg-base text-neutral-500 dark:text-neutral-400">
<span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400">
Remember your password?
</span>
</div>

4
resources/views/auth/two-factor-challenge.blade.php
View file

@ -1,5 +1,5 @@
<x-layout-simple>
<section class="bg-stone-50 dark:bg-base" x-data="{
<section class="bg-gray-50 dark:bg-base" x-data="{
showRecovery: false,
digits: ['', '', '', '', '', ''],
code: '',
@ -121,7 +121,7 @@ class="mt-2 text-sm dark:text-neutral-400 hover:text-black dark:hover:text-white
<div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-stone-50 dark:bg-base text-neutral-500 dark:text-neutral-400">
<span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400">
Need help?
</span>
</div>

3
resources/views/layouts/base.blade.php
View file

@ -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
}

2
resources/views/layouts/simple.blade.php
View file

@ -1,7 +1,7 @@
@extends('layouts.base')
@section('body')
@livewireScripts
<main class="h-full bg-stone-50 dark:bg-base">
<main class="h-full bg-gray-50 dark:bg-base">
{{ $slot }}
</main>
@parent

2
resources/views/livewire/force-password-reset.blade.php
View file

@ -1,4 +1,4 @@
<section class="bg-stone-50 dark:bg-base">
<section class="bg-gray-50 dark:bg-base">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<div class="flex items-center justify-center mb-6">
<img src="https://mapledeploy.ca/api/logo/lockup?height=80" alt="MapleDeploy" class="h-12 dark:hidden" />

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

@ -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: {

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

@ -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: {