matt/color-picker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix color picker syncing, update components to tailwind ui, display all formats at once

Browse Source
This commit is contained in:
Matt
2025-02-10 11:45:17 -05:00
parent 4261e6f436
commit 7ae2594a66
5 changed files with 408 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/TailwindColors.tsx
View File

@@ -4,10 +4,9 @@ import { TAILWIND_COLORS } from '../utils/colors'
interface TailwindColorsProps {
onColorSelect: (color: string) => void
selectedColor?: string
format?: 'hex' | 'rgb' | 'hsl' | 'hsb' | 'oklch' | 'tailwind'
}
export function TailwindColors({ onColorSelect, selectedColor, format = 'hex' }: TailwindColorsProps) {
export function TailwindColors({ onColorSelect, selectedColor }: TailwindColorsProps) {
// Order colors in specified sequence
const orderedColors = useMemo(() => [
'red',
@@ -52,25 +51,24 @@ export function TailwindColors({ onColorSelect, selectedColor, format = 'hex' }:
{/* Color rows */}
{orderedColors.map(colorName => (
<React.Fragment key={colorName}>
<div className="sticky left-0 z-10 bg-white text-sm font-medium text-zinc-600 capitalize py-1 pr-3 whitespace-nowrap">
<div className="flex sticky left-0 z-10 bg-white text-sm font-medium items-center justify-end text-gray-900 py-1 pr-3 whitespace-nowrap border-r border-gray-100">
{colorName}
</div>
{shades.map(shade => {
const values = TAILWIND_COLORS[colorName][shade]
const hexColor = typeof values === 'string' ? values : values.hex
const displayValue = format === 'oklch' && typeof values !== 'string' ? values.oklch : hexColor
const textColorClass = getTextColor(hexColor)
return (
<button
key={`${colorName}-${shade}`}
onClick={() => onColorSelect(displayValue)}
className={`aspect-square transition-all hover:scale-105 hover:shadow-lg group relative
${selectedColor === displayValue ? 'ring-2 ring-offset-1 ring-indigo-500 z-10' : ''}`}
onClick={() => onColorSelect(hexColor)}
className={`aspect-square transition-all hover:scale-110 hover:z-10 hover:shadow-lg hover:ring-2 hover:ring-offset-2 hover:ring-indigo-600 relative
${selectedColor === hexColor ? 'ring-2 ring-offset-2 ring-indigo-600 z-10 shadow-lg' : 'shadow-sm ring-1 ring-inset ring-gray-900/5'}`}
style={{ backgroundColor: hexColor }}
title={`${colorName}-${shade}: ${displayValue}`}
title={`${colorName}-${shade}: ${hexColor}`}
>
<span className={`absolute inset-0 flex items-center justify-center text-[10px] font-medium ${textColorClass}`}>
<span className={`absolute inset-0 flex items-center justify-center text-xs font-medium ${textColorClass}`}>
{shade}
</span>
</button>