devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

refactor: derive accent color presets from avatar gradient palette

Browse Source 
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.
This commit is contained in:
Jannis Braun
2026-03-10 20:32:16 +01:00
parent d2697d87fa
commit d3f58f3787
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/modals/settingsPanels/AccountPanel.tsx
+2 -8
View File
@@ -3,16 +3,10 @@ import { useAuthStore } from '../../../stores/authStore';
import { Avatar } from '../../ui/Avatar'; import { Avatar } from '../../ui/Avatar';
import { ImageCropModal } from '../../ui/ImageCropModal'; import { ImageCropModal } from '../../ui/ImageCropModal';
import { api } from '../../../api/client'; 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 { AVATAR_COLORS } from '@backspace/shared';
import type { User, UserStatus, AvatarColor } 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() { export function AccountPanel() {
const user = useAuthStore((s) => s.user); const user = useAuthStore((s) => s.user);
@@ -419,7 +413,7 @@ export function AccountPanel() {
{/* Accent Color */} {/* Accent Color */}
<div> <div>
<label className="block text-xs text-txt-secondary mb-1.5">Accent Color</label> <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) => ( {ACCENT_PRESETS.map((color) => (
<button <button
key={color} key={color}
packages/web/src/utils/gradients.ts
+6
View File
@@ -72,6 +72,12 @@ export function getSpaceGradient(id?: string | null, name?: string): GradientEnt
return SPACE_GRADIENTS[hashString(key) % SPACE_GRADIENTS.length]!; 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). */ /** Shift each RGB component of a hex color by `amount` (positive = lighter, negative = darker). */
export function adjustColor(hex: string, amount: number): string { export function adjustColor(hex: string, amount: number): string {
const r = Math.max(0, Math.min(255, parseInt(hex.slice(1, 3), 16) + amount)); const r = Math.max(0, Math.min(255, parseInt(hex.slice(1, 3), 16) + amount));