Postal/Zero
1
0
Fork 0
mirror of https://github.com/Mail-0/Zero.git synced 2026-06-30 07:46:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

new mapped colours

Browse Source
This commit is contained in:
Ahmet Kilinc
2025-05-26 23:48:08 +01:00
committed by Adam
parent b339cbb7c9
commit fc6ec2a00a
4 changed files with 20 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/mail/app/(routes)/settings/labels/page.tsx
View File

@@ -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]">

8
apps/mail/components/mail/render-labels.tsx
View File

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

39
apps/mail/lib/label-colors.ts
View File

@@ -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];

48
apps/server/src/lib/driver/google-label-color-map.ts
View File

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