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

style(ColorPicker): update preset color palette and improve layout responsiveness

Browse Source
This commit is contained in:
Hyko
2026-04-22 16:59:01 -04:00
parent ccb35c6420
commit 2c781d4223
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/ColorPicker.client.js
+5 -5
View File
@@ -2,9 +2,9 @@
import { useState, useRef, useEffect } from 'react'; import { useState, useRef, useEffect } from 'react';
const ROW1 = ['#0d9488', '#16a34a', '#0284c7', '#2563eb', '#4f46e5', '#7c3aed', '#9333ea', '#c026d3', '#db2777', '#e11d48']; const ROW1 = ['#4489ed', '#2a9db0', '#43b53c', '#5e7b4e', '#f5c211', '#f7581f', '#ff2b2b', '#ff2e63', '#f540ed', '#b34ce9', '#818faf', '#c0bfbc'];
const ROW2 = ['#0f766e', '#15803d', '#0369a1', '#1d4ed8', '#4338ca', '#6d28d9', '#7e22ce', '#a21caf', '#be185d', '#be123c']; const ROW2 = ['#2657cf', '#24687a', '#287124', '#384d2f', '#c68408', '#c0280e', '#ca0505', '#ce0245', '#b417a7', '#8021aa', '#4e5b7e', '#75746f'];
const ROW3 = ['#b45309', '#c2410c', '#b91c1c', '#92400e', '#4d7c0f', '#047857', '#155e75', '#1e3a8a', '#312e81', '#581c87']; const ROW3 = ['#233f85', '#234856', '#1e4a1d', '#263321', '#834a10', '#7b1e13', '#8d0f0f', '#93083e', '#78176c', '#5b1d72', '#373f55', '#282725'];
const PRESET_COLORS = [...ROW1, ...ROW2, ...ROW3]; 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);
@@ -75,9 +75,9 @@ const ColorPicker = ({
<p className="text-xs text-neutral-500 dark:text-neutral-400">{description}</p> <p className="text-xs text-neutral-500 dark:text-neutral-400">{description}</p>
)} )}
<div className="flex items-start gap-3"> <div className="flex flex-wrap items-start gap-3">
{/* Left: big custom swatch + hex input */} {/* Left: big custom swatch + hex input */}
<div className="flex flex-col gap-2 w-20 flex-shrink-0"> <div className="flex flex-col gap-2 w-14 flex-shrink-0">
<button <button
type="button" type="button"
title="Couleur personnalisée" title="Couleur personnalisée"