From d8d27924a4c738cc1e344bb5e4f2453f3ec37e2b Mon Sep 17 00:00:00 2001
From: Niels Drost <nielsdrost7@gmail.com>
Date: Sat, 4 Jul 2026 14:24:00 +0200
Subject: [PATCH] fix(ui): dark mode contrast corrections (#568)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 package.json                                  |  3 +-
 .../filament/company/invoiceplane-blue.css    | 47 +++++++++++++++++++
 .../css/filament/company/invoiceplane.css     | 32 +++++++++++++
 resources/css/filament/company/nord.css       | 47 +++++++++++++++++++
 resources/css/filament/company/orange.css     | 47 +++++++++++++++++++
 resources/css/filament/company/reddit.css     | 47 +++++++++++++++++++
 vite.config.js                                |  7 ++-
 7 files changed, 227 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 5ea4ad819..53a1429e9 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "build": "vite build",
+        "build": "vite build --mode development",
+        "prod": "vite build --mode production",
         "dev": "vite"
     },
     "devDependencies": {
diff --git a/resources/css/filament/company/invoiceplane-blue.css b/resources/css/filament/company/invoiceplane-blue.css
index cbaaccd09..66960260e 100644
--- a/resources/css/filament/company/invoiceplane-blue.css
+++ b/resources/css/filament/company/invoiceplane-blue.css
@@ -11,6 +11,21 @@
 }
 */
 
+/* gray-token remap: InvoicePlane Blue neutral palette */
+:root {
+    --gray-50:  #f8f9fd;
+    --gray-100: #eef1f9;
+    --gray-200: #dde4f2;
+    --gray-300: #c4ceea;
+    --gray-400: #9aaed5;
+    --gray-500: #758eba;
+    --gray-600: #546e97;
+    --gray-700: #3d5375;
+    --gray-800: #283c57;
+    --gray-900: #182840;
+    --gray-950: #0e1a2e;
+}
+
 .fi-bg-color-600 {
     @apply bg-blue-700;
     @apply hover:bg-blue-500;
@@ -65,11 +80,43 @@
         @apply text-white;
         @apply !bg-blue-700;
         @apply rounded-lg;
+
+        > .fi-sidebar-item-btn {
+            @apply !bg-blue-700;
+
+            > .fi-icon { @apply !text-white; }
+            > .fi-sidebar-item-label { @apply !text-white; }
+        }
     }
 
     .fi-sidebar-header {
         @apply bg-blue-500;
     }
+
+    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
+    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
+        @apply !bg-blue-600;
+    }
+
+    .fi-sidebar-group-dropdown-trigger-btn:hover,
+    .fi-sidebar-group-dropdown-trigger-btn:focus-visible {
+        @apply !bg-blue-600;
+    }
+
+    .fi-sidebar-database-notifications-btn:hover,
+    .fi-sidebar-database-notifications-btn:focus-visible {
+        @apply !bg-blue-600;
+    }
+
+    .fi-sidebar-database-notifications-btn > .fi-icon,
+    .fi-sidebar-database-notifications-btn > .fi-sidebar-database-notifications-btn-label {
+        @apply !text-white;
+    }
+
+    .fi-user-menu-trigger {
+        .fi-icon { @apply !text-white; }
+        .fi-tenant-menu-trigger-text { @apply !text-white; }
+    }
 }
 
 /*
diff --git a/resources/css/filament/company/invoiceplane.css b/resources/css/filament/company/invoiceplane.css
index cd97219e5..b725523fd 100644
--- a/resources/css/filament/company/invoiceplane.css
+++ b/resources/css/filament/company/invoiceplane.css
@@ -60,11 +60,43 @@
         @apply text-white;
         @apply bg-primary-700!;
         @apply rounded-lg;
+
+        > .fi-sidebar-item-btn {
+            @apply bg-primary-700!;
+
+            > .fi-icon { @apply text-white!; }
+            > .fi-sidebar-item-label { @apply text-white!; }
+        }
     }
 
     .fi-sidebar-header {
         @apply bg-primary-500;
     }
+
+    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
+    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
+        @apply bg-primary-600!;
+    }
+
+    .fi-sidebar-group-dropdown-trigger-btn:hover,
+    .fi-sidebar-group-dropdown-trigger-btn:focus-visible {
+        @apply bg-primary-600!;
+    }
+
+    .fi-sidebar-database-notifications-btn:hover,
+    .fi-sidebar-database-notifications-btn:focus-visible {
+        @apply bg-primary-600!;
+    }
+
+    .fi-sidebar-database-notifications-btn > .fi-icon,
+    .fi-sidebar-database-notifications-btn > .fi-sidebar-database-notifications-btn-label {
+        @apply text-white!;
+    }
+
+    .fi-user-menu-trigger {
+        .fi-icon { @apply text-white!; }
+        .fi-tenant-menu-trigger-text { @apply text-white!; }
+    }
 }
 
 /*
diff --git a/resources/css/filament/company/nord.css b/resources/css/filament/company/nord.css
index b701bdd7c..40a81aa9b 100644
--- a/resources/css/filament/company/nord.css
+++ b/resources/css/filament/company/nord.css
@@ -111,6 +111,21 @@
     --color-info-950: #405162;
 }
 
+/* gray-token remap: Nord content-area neutral palette (Snow Storm → Polar Night) */
+:root {
+    --gray-50:  var(--color-snowstorm-600);
+    --gray-100: var(--color-snowstorm-500);
+    --gray-200: var(--color-snowstorm-400);
+    --gray-300: var(--color-polarnight-300);
+    --gray-400: var(--color-polarnight-400);
+    --gray-500: var(--color-polarnight-500);
+    --gray-600: var(--color-polarnight-600);
+    --gray-700: var(--color-polarnight-700);
+    --gray-800: var(--color-polarnight-800);
+    --gray-900: var(--color-polarnight-900);
+    --gray-950: var(--color-polarnight-950);
+}
+
 .fi-bg-color-600 {
     @apply bg-[var(--color-frost-700)];
     @apply hover:bg-[var(--color-frost-500)];
@@ -165,11 +180,43 @@
         @apply text-[var(--color-snowstorm-600)];
         @apply !bg-[var(--color-polarnight-800)];
         @apply rounded-lg;
+
+        > .fi-sidebar-item-btn {
+            @apply !bg-[var(--color-polarnight-800)];
+
+            > .fi-icon { @apply !text-[var(--color-snowstorm-600)]; }
+            > .fi-sidebar-item-label { @apply !text-[var(--color-snowstorm-600)]; }
+        }
     }
 
     .fi-sidebar-header {
         @apply bg-[var(--color-polarnight-700)];
     }
+
+    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
+    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
+        @apply !bg-[var(--color-polarnight-600)];
+    }
+
+    .fi-sidebar-group-dropdown-trigger-btn:hover,
+    .fi-sidebar-group-dropdown-trigger-btn:focus-visible {
+        @apply !bg-[var(--color-polarnight-600)];
+    }
+
+    .fi-sidebar-database-notifications-btn:hover,
+    .fi-sidebar-database-notifications-btn:focus-visible {
+        @apply !bg-[var(--color-polarnight-600)];
+    }
+
+    .fi-sidebar-database-notifications-btn > .fi-icon,
+    .fi-sidebar-database-notifications-btn > .fi-sidebar-database-notifications-btn-label {
+        @apply !text-[var(--color-snowstorm-600)];
+    }
+
+    .fi-user-menu-trigger {
+        .fi-icon { @apply !text-[var(--color-snowstorm-600)]; }
+        .fi-tenant-menu-trigger-text { @apply !text-[var(--color-snowstorm-600)]; }
+    }
 }
 
 /*
diff --git a/resources/css/filament/company/orange.css b/resources/css/filament/company/orange.css
index 8e832fb8f..85ad79573 100644
--- a/resources/css/filament/company/orange.css
+++ b/resources/css/filament/company/orange.css
@@ -6,6 +6,21 @@
 @source '../../../../Modules/**/resources/views/**/*';
 @source '../../../../Modules/**/*.php';
 
+/* gray-token remap: Orange warm neutral palette */
+:root {
+    --gray-50:  #fafaf8;
+    --gray-100: #f4efe9;
+    --gray-200: #e5ddd4;
+    --gray-300: #cdc3b8;
+    --gray-400: #a89a8d;
+    --gray-500: #857468;
+    --gray-600: #67574d;
+    --gray-700: #4c3c33;
+    --gray-800: #352920;
+    --gray-900: #211912;
+    --gray-950: #100c08;
+}
+
 .fi-bg-color-600 {
     @apply bg-orange-700;
     @apply hover:bg-orange-500;
@@ -60,11 +75,43 @@
         @apply text-white;
         @apply !bg-orange-700;
         @apply rounded-lg;
+
+        > .fi-sidebar-item-btn {
+            @apply !bg-orange-700;
+
+            > .fi-icon { @apply !text-white; }
+            > .fi-sidebar-item-label { @apply !text-white; }
+        }
     }
 
     .fi-sidebar-header {
         @apply bg-orange-500;
     }
+
+    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
+    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
+        @apply !bg-orange-600;
+    }
+
+    .fi-sidebar-group-dropdown-trigger-btn:hover,
+    .fi-sidebar-group-dropdown-trigger-btn:focus-visible {
+        @apply !bg-orange-600;
+    }
+
+    .fi-sidebar-database-notifications-btn:hover,
+    .fi-sidebar-database-notifications-btn:focus-visible {
+        @apply !bg-orange-600;
+    }
+
+    .fi-sidebar-database-notifications-btn > .fi-icon,
+    .fi-sidebar-database-notifications-btn > .fi-sidebar-database-notifications-btn-label {
+        @apply !text-white;
+    }
+
+    .fi-user-menu-trigger {
+        .fi-icon { @apply !text-white; }
+        .fi-tenant-menu-trigger-text { @apply !text-white; }
+    }
 }
 
 /*
diff --git a/resources/css/filament/company/reddit.css b/resources/css/filament/company/reddit.css
index 4436211e1..b42afc3ee 100644
--- a/resources/css/filament/company/reddit.css
+++ b/resources/css/filament/company/reddit.css
@@ -6,6 +6,21 @@
 @source '../../../../Modules/**/resources/views/**/*';
 @source '../../../../Modules/**/*.php';
 
+/* gray-token remap: Reddit warm red-orange neutral palette */
+:root {
+    --gray-50:  #faf9f8;
+    --gray-100: #f4efeb;
+    --gray-200: #e5dbd5;
+    --gray-300: #cdc0b8;
+    --gray-400: #a8948a;
+    --gray-500: #85706a;
+    --gray-600: #67524d;
+    --gray-700: #4c3a36;
+    --gray-800: #352622;
+    --gray-900: #211714;
+    --gray-950: #100b09;
+}
+
 .fi-bg-color-600 {
     @apply bg-[#FF4500];
     @apply hover:bg-[#ff5722];
@@ -60,11 +75,43 @@
         @apply text-white;
         @apply !bg-[#d93900];
         @apply rounded-lg;
+
+        > .fi-sidebar-item-btn {
+            @apply !bg-[#d93900];
+
+            > .fi-icon { @apply !text-white; }
+            > .fi-sidebar-item-label { @apply !text-white; }
+        }
     }
 
     .fi-sidebar-header {
         @apply bg-[#FF4500];
     }
+
+    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
+    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
+        @apply !bg-[#e83d00];
+    }
+
+    .fi-sidebar-group-dropdown-trigger-btn:hover,
+    .fi-sidebar-group-dropdown-trigger-btn:focus-visible {
+        @apply !bg-[#e83d00];
+    }
+
+    .fi-sidebar-database-notifications-btn:hover,
+    .fi-sidebar-database-notifications-btn:focus-visible {
+        @apply !bg-[#e83d00];
+    }
+
+    .fi-sidebar-database-notifications-btn > .fi-icon,
+    .fi-sidebar-database-notifications-btn > .fi-sidebar-database-notifications-btn-label {
+        @apply !text-white;
+    }
+
+    .fi-user-menu-trigger {
+        .fi-icon { @apply !text-white; }
+        .fi-tenant-menu-trigger-text { @apply !text-white; }
+    }
 }
 
 /*
diff --git a/vite.config.js b/vite.config.js
index df7d4ad56..511e19469 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,7 +2,10 @@ import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import tailwindcss from '@tailwindcss/vite';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
+    build: {
+        minify: mode === 'production',
+    },
     plugins: [
         laravel({
             input: [
@@ -18,4 +21,4 @@ export default defineConfig({
         }),
         tailwindcss(),
     ],
-});
+}));