From d3f58f3787b38b6b12e75f1fa275dcce0bf31fd0 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Tue, 10 Mar 2026 20:32:16 +0100
Subject: [PATCH] refactor: derive accent color presets from avatar gradient
 palette
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the hardcoded 16-color ACCENT_PRESETS array in AccountPanel with
a shared export from gradients.ts that extracts both hex stops from each
avatar gradient, producing 14 harmonized colors in a 7×2 grid.
---
 .../components/modals/settingsPanels/AccountPanel.tsx  | 10 ++--------
 packages/web/src/utils/gradients.ts                    |  6 ++++++
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/modals/settingsPanels/AccountPanel.tsx b/packages/web/src/components/modals/settingsPanels/AccountPanel.tsx
index 014a83d5..8ff0e82e 100644
--- a/packages/web/src/components/modals/settingsPanels/AccountPanel.tsx
+++ b/packages/web/src/components/modals/settingsPanels/AccountPanel.tsx
@@ -3,16 +3,10 @@ import { useAuthStore } from '../../../stores/authStore';
 import { Avatar } from '../../ui/Avatar';
 import { ImageCropModal } from '../../ui/ImageCropModal';
 import { api } from '../../../api/client';
-import { getAvatarGradient, adjustColor, AVATAR_GRADIENT_MAP } from '../../../utils/gradients';
+import { getAvatarGradient, adjustColor, AVATAR_GRADIENT_MAP, ACCENT_PRESETS } from '../../../utils/gradients';
 import { AVATAR_COLORS } from '@backspace/shared';
 import type { User, UserStatus, AvatarColor } from '@backspace/shared';
 
-const ACCENT_PRESETS = [
-  '#86efac', '#fca5a5', '#c4b5fd', '#7dd3fc',
-  '#fcd34d', '#fda4af', '#fb923c', '#7c6cf6',
-  '#ef4444', '#f97316', '#22d3ee', '#a3e635',
-  '#f472b6', '#818cf8', '#2dd4bf', '#e879f9',
-];
 
 export function AccountPanel() {
   const user = useAuthStore((s) => s.user);
@@ -419,7 +413,7 @@ export function AccountPanel() {
           {/* Accent Color */}
           <div>
             <label className="block text-xs text-txt-secondary mb-1.5">Accent Color</label>
-            <div className="grid grid-cols-8 gap-1.5 mb-2">
+            <div className="grid grid-cols-7 gap-1.5 mb-2">
               {ACCENT_PRESETS.map((color) => (
                 <button
                   key={color}
diff --git a/packages/web/src/utils/gradients.ts b/packages/web/src/utils/gradients.ts
index e430fc0d..13652802 100644
--- a/packages/web/src/utils/gradients.ts
+++ b/packages/web/src/utils/gradients.ts
@@ -72,6 +72,12 @@ export function getSpaceGradient(id?: string | null, name?: string): GradientEnt
   return SPACE_GRADIENTS[hashString(key) % SPACE_GRADIENTS.length]!;
 }
 
+/** Flat accent-color presets derived from the avatar gradient palette. Both stops per gradient. */
+export const ACCENT_PRESETS: string[] = AVATAR_GRADIENTS.flatMap(g => {
+  const matches = g.gradient.match(/#[0-9a-fA-F]{6}/g);
+  return matches ?? [];
+});
+
 /** Shift each RGB component of a hex color by `amount` (positive = lighter, negative = darker). */
 export function adjustColor(hex: string, amount: number): string {
   const r = Math.max(0, Math.min(255, parseInt(hex.slice(1, 3), 16) + amount));