From fc6ec2a00a7c6d0ae57d379c0dcd54b71e69c504 Mon Sep 17 00:00:00 2001
From: Ahmet Kilinc <akx9@icloud.com>
Date: Mon, 26 May 2025 23:48:08 +0100
Subject: [PATCH] new mapped colours

---
 .../app/(routes)/settings/labels/page.tsx     |  7 ++-
 apps/mail/components/mail/render-labels.tsx   |  8 ++--
 apps/mail/lib/label-colors.ts                 | 39 +++------------
 .../src/lib/driver/google-label-color-map.ts  | 48 +++----------------
 4 files changed, 20 insertions(+), 82 deletions(-)

diff --git a/apps/mail/app/(routes)/settings/labels/page.tsx b/apps/mail/app/(routes)/settings/labels/page.tsx
index e9b16487d..560560bd5 100644
--- a/apps/mail/app/(routes)/settings/labels/page.tsx
+++ b/apps/mail/app/(routes)/settings/labels/page.tsx
@@ -117,7 +117,7 @@ export default function LabelsPage() {
                   No labels created yet. Click the button above to create one.
                 </p>
               ) : (
-                <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-7">
+                <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 md:grid-cols-6">
                   {labels?.map((label) => {
                     return (
                       <div
@@ -129,11 +129,10 @@ export default function LabelsPage() {
                             className="px-2 py-1"
                             style={{
                               backgroundColor: label.color?.backgroundColor,
+                              color: label.color?.textColor,
                             }}
                           >
-                            <span className="dark:text-whitemix-blend-difference darK:text-black">
-                              {label.name}
-                            </span>
+                            <span>{label.name}</span>
                           </Badge>
                         </div>
                         <div className="absolute right-2 z-[25] flex items-center gap-1 rounded-xl border bg-white p-1 opacity-0 shadow-sm transition-opacity group-hover:opacity-100 dark:bg-[#1A1A1A]">
diff --git a/apps/mail/components/mail/render-labels.tsx b/apps/mail/components/mail/render-labels.tsx
index beed73f0a..5b6c85740 100644
--- a/apps/mail/components/mail/render-labels.tsx
+++ b/apps/mail/components/mail/render-labels.tsx
@@ -42,8 +42,8 @@ export const RenderLabels = ({ count = 1, labels }: { count?: number; labels: La
             searchValue.value.includes(`label:${label.name}`) && 'border-white',
           )}
           style={{
-            background: label.color?.backgroundColor + '1a',
-            color: label.color?.backgroundColor,
+            background: label.color?.backgroundColor,
+            color: label.color?.textColor,
           }}
         >
           {label.name}
@@ -66,8 +66,8 @@ export const RenderLabels = ({ count = 1, labels }: { count?: number; labels: La
                   searchValue.value.includes(`label:${label.name}`) && 'border-white',
                 )}
                 style={{
-                  backgroundColor: label.color?.backgroundColor + '1a',
-                  color: label.color?.backgroundColor,
+                  backgroundColor: label.color?.backgroundColor,
+                  color: label.color?.textColor,
                 }}
               >
                 {label.name}
diff --git a/apps/mail/lib/label-colors.ts b/apps/mail/lib/label-colors.ts
index 451c9751f..79ad4ecc8 100644
--- a/apps/mail/lib/label-colors.ts
+++ b/apps/mail/lib/label-colors.ts
@@ -1,37 +1,10 @@
 export const LABEL_COLORS = [
-  // Row 1 - Grayscale
-  { backgroundColor: '#000000', textColor: '#ffffff' },
-  { backgroundColor: '#434343', textColor: '#ffffff' },
-  { backgroundColor: '#666666', textColor: '#ffffff' },
-  { backgroundColor: '#999999', textColor: '#ffffff' },
-  { backgroundColor: '#cccccc', textColor: '#000000' },
-  { backgroundColor: '#ffffff', textColor: '#000000' },
-  // Row 2 - Warm colors
-  { backgroundColor: '#fb4c2f', textColor: '#ffffff' },
-  { backgroundColor: '#ffad47', textColor: '#ffffff' },
-  { backgroundColor: '#fad165', textColor: '#000000' },
-  { backgroundColor: '#ff7537', textColor: '#ffffff' },
-  { backgroundColor: '#cc3a21', textColor: '#ffffff' },
-  { backgroundColor: '#8a1c0a', textColor: '#ffffff' },
-  // Row 3 - Cool colors
-  { backgroundColor: '#16a766', textColor: '#ffffff' },
-  { backgroundColor: '#43d692', textColor: '#ffffff' },
-  { backgroundColor: '#4a86e8', textColor: '#ffffff' },
-  { backgroundColor: '#285bac', textColor: '#ffffff' },
-  { backgroundColor: '#3c78d8', textColor: '#ffffff' },
-  { backgroundColor: '#0d3472', textColor: '#ffffff' },
-  // Row 4 - Purple tones
-  { backgroundColor: '#a479e2', textColor: '#ffffff' },
-  { backgroundColor: '#b99aff', textColor: '#ffffff' },
-  { backgroundColor: '#653e9b', textColor: '#ffffff' },
-  { backgroundColor: '#3d188e', textColor: '#ffffff' },
-  { backgroundColor: '#f691b3', textColor: '#ffffff' },
-  { backgroundColor: '#994a64', textColor: '#ffffff' },
-  // Row 5 - Pastels
-  { backgroundColor: '#f6c5be', textColor: '#000000' },
-  { backgroundColor: '#ffe6c7', textColor: '#000000' },
-  { backgroundColor: '#c6f3de', textColor: '#000000' },
-  { backgroundColor: '#c9daf8', textColor: '#000000' },
+  { textColor: '#FFFFFF', backgroundColor: '#202020' },
+  { textColor: '#D1F0D9', backgroundColor: '#12341D' },
+  { textColor: '#FDECCE', backgroundColor: '#413111' },
+  { textColor: '#FDD9DF', backgroundColor: '#411D23' },
+  { textColor: '#D8E6FD', backgroundColor: '#1C2A41' },
+  { textColor: '#E8DEFD', backgroundColor: '#2C2341' },
 ] as const;
 
 export type LabelColor = (typeof LABEL_COLORS)[number];
diff --git a/apps/server/src/lib/driver/google-label-color-map.ts b/apps/server/src/lib/driver/google-label-color-map.ts
index da47171e7..ecc5e4068 100644
--- a/apps/server/src/lib/driver/google-label-color-map.ts
+++ b/apps/server/src/lib/driver/google-label-color-map.ts
@@ -4,48 +4,14 @@ type ColorMapping = {
 };
 
 export const GOOGLE_LABEL_COLOR_MAP: Record<string, ColorMapping> = {
-  // TODO: Add your custom color mappings here
-  // Example format:
-  // '#ffffff|#000000': { backgroundColor: '#yourCustomBg', textColor: '#yourCustomText' },
-
-  // Grayscale
-  '#000000|#ffffff': { backgroundColor: '#000000', textColor: '#ffffff' },
-  '#434343|#ffffff': { backgroundColor: '#434343', textColor: '#ffffff' },
-  '#666666|#ffffff': { backgroundColor: '#666666', textColor: '#ffffff' },
-  '#999999|#ffffff': { backgroundColor: '#999999', textColor: '#ffffff' },
-  '#cccccc|#000000': { backgroundColor: '#cccccc', textColor: '#000000' },
-  '#ffffff|#000000': { backgroundColor: '#ffffff', textColor: '#000000' },
-
-  // Warm colors
-  '#fb4c2f|#ffffff': { backgroundColor: '#fb4c2f', textColor: '#ffffff' },
-  '#ffad47|#ffffff': { backgroundColor: '#ffad47', textColor: '#ffffff' },
-  '#fad165|#000000': { backgroundColor: '#fad165', textColor: '#000000' },
-  '#ff7537|#ffffff': { backgroundColor: '#ff7537', textColor: '#ffffff' },
-  '#cc3a21|#ffffff': { backgroundColor: '#cc3a21', textColor: '#ffffff' },
-  '#8a1c0a|#ffffff': { backgroundColor: '#8a1c0a', textColor: '#ffffff' },
-
-  // Cool colors
-  '#16a766|#ffffff': { backgroundColor: '#16a766', textColor: '#ffffff' },
-  '#43d692|#ffffff': { backgroundColor: '#43d692', textColor: '#ffffff' },
-  '#4a86e8|#ffffff': { backgroundColor: '#4a86e8', textColor: '#ffffff' },
-  '#285bac|#ffffff': { backgroundColor: '#285bac', textColor: '#ffffff' },
-  '#3c78d8|#ffffff': { backgroundColor: '#3c78d8', textColor: '#ffffff' },
-  '#0d3472|#ffffff': { backgroundColor: '#0d3472', textColor: '#ffffff' },
-
-  // Purple tones
-  '#a479e2|#ffffff': { backgroundColor: '#a479e2', textColor: '#ffffff' },
-  '#b99aff|#ffffff': { backgroundColor: '#b99aff', textColor: '#ffffff' },
-  '#653e9b|#ffffff': { backgroundColor: '#653e9b', textColor: '#ffffff' },
-  '#3d188e|#ffffff': { backgroundColor: '#3d188e', textColor: '#ffffff' },
-  '#f691b3|#ffffff': { backgroundColor: '#f691b3', textColor: '#ffffff' },
-  '#994a64|#ffffff': { backgroundColor: '#994a64', textColor: '#ffffff' },
-
-  // Pastels
-  '#f6c5be|#000000': { backgroundColor: '#f6c5be', textColor: '#000000' },
-  '#ffe6c7|#000000': { backgroundColor: '#ffe6c7', textColor: '#000000' },
-  '#c6f3de|#000000': { backgroundColor: '#c6f3de', textColor: '#000000' },
-  '#c9daf8|#000000': { backgroundColor: '#c9daf8', textColor: '#000000' },
+  '#ffffff|#000000': { textColor: '#FFFFFF', backgroundColor: '#202020' },
+  '#16a766|#ffffff': { textColor: '#D1F0D9', backgroundColor: '#12341D' },
+  '#ffad47|#ffffff': { textColor: '#FDECCE', backgroundColor: '#413111' },
+  '#4a86e8|#ffffff': { textColor: '#D8E6FD', backgroundColor: '#1C2A41' },
+  '#a479e2|#ffffff': { textColor: '#E8DEFD', backgroundColor: '#2C2341' },
+  '#f691b3|#ffffff': { textColor: '#FDD9DF', backgroundColor: '#411D23' },
 };
+
 export function mapGoogleLabelColor(
   googleColor: ColorMapping | undefined,
 ): ColorMapping | undefined {