zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

feat(ui): expand color picker preset grid from 9×2 to 10×3 with updated colors

Browse Source
This commit is contained in:
Hyko
2026-04-22 16:37:59 -04:00
parent 102d7acd40
commit 60b3022a23
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/ColorPicker.client.js
+6 -5
View File
@@ -2,9 +2,10 @@
import { useState, useRef, useEffect } from 'react'; import { useState, useRef, useEffect } from 'react';
const ROW1 = ['#1abc9c', '#2ecc71', '#3498db', '#9b59b6', '#e91e63', '#f1c40f', '#e67e22', '#e74c3c', '#95a5a6']; const ROW1 = ['#0d9488', '#16a34a', '#0284c7', '#2563eb', '#4f46e5', '#7c3aed', '#9333ea', '#c026d3', '#db2777', '#e11d48'];
const ROW2 = ['#11806a', '#1f8b4c', '#206694', '#71368a', '#ad1457', '#c27c0e', '#a84300', '#992d22', '#546e7a']; const ROW2 = ['#0f766e', '#15803d', '#0369a1', '#1d4ed8', '#4338ca', '#6d28d9', '#7e22ce', '#a21caf', '#be185d', '#be123c'];
const PRESET_COLORS = [...ROW1, ...ROW2]; const ROW3 = ['#b45309', '#c2410c', '#b91c1c', '#92400e', '#4d7c0f', '#047857', '#155e75', '#1e3a8a', '#312e81', '#581c87'];
const PRESET_COLORS = [...ROW1, ...ROW2, ...ROW3];
const isValidHex = (hex) => /^#[0-9a-fA-F]{6}$/.test(hex); const isValidHex = (hex) => /^#[0-9a-fA-F]{6}$/.test(hex);
@@ -108,9 +109,9 @@ const ColorPicker = ({
/> />
</div> </div>
{/* Right: 9×2 preset grid */} {/* Right: 10×3 preset grid */}
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
{[ROW1, ROW2].map((row, rowIdx) => ( {[ROW1, ROW2, ROW3].map((row, rowIdx) => (
<div key={rowIdx} className="flex gap-1.5"> <div key={rowIdx} className="flex gap-1.5">
{row.map((color) => { {row.map((color) => {
const isSelected = selected === color.toLowerCase(); const isSelected = selected === color.toLowerCase();