khanmo97/sanzo-wada-palettes

Paletas de Sanzo Wada

Usa esto cuando el usuario quiera un esquema de colores "del libro de Wada", una paleta de Sanzo Wada, un número de combinación específico o una paleta de buen gusto para un sitio, marca, diseño o conjunto de vestimenta.

1. Obtener los datos

Fuente: mattdesl/dictionary-of-colour-combinations (licencia MIT). Clónalo en su propia carpeta vacía:

mkdir -p /tmp/wada && git clone --depth 1 -q https://github.com/mattdesl/dictionary-of-colour-combinations /tmp/wada/repo

Alternativa: npm install dictionary-of-colour-combinations en una carpeta vacía.

colors.json es un arreglo de 159 colores:

{"name": "Hermosa Pink", "combinations": [176, 227, 273], "swatch": 0,
 "cmyk": [0,30,6,0], "lab": [...], "rgb": [249,193,206], "hex": "#f9c1ce"}

Las paletas no se almacenan directamente. La combinación N es cada color cuya lista combinations contiene N:

import json, collections
colors = json.load(open('/tmp/wada/repo/colors.json'))
combos = collections.defaultdict(list)
for c in colors:
    for n in c['combinations']:
        combos[n].append(c)
# combos[n] -> lista de 2, 3 o 4 colores

Ejecuta Python con -I y mantén los scripts fuera de la carpeta clonada.

2. Elegir paletas

• Si el usuario da un número de combinación, úsalo directamente.
• En caso contrario, filtra por lo que haya solicitado: cantidad de colores (2, 3 o 4), estado de ánimo (cálido/frío por tono, apagado/brillante por croma LAB) o un color que quiera incluir (el más cercano por distancia LAB).
• Elige de 5 a 10 candidatos para el conmutador (paso 4). Si no se está construyendo un sitio, muestra de 3 a 5 como muestras en línea (hex, nombre, número de combinación).
• Para trabajo en interfaz de usuario, verifica el contraste del texto con las relaciones WCAG: 4.5:1 para texto de cuerpo. Usa el color más claro o más oscuro como fondo. Si un par falla, deriva un tinte más claro u oscuro de un color de la paleta para el texto, y anótalo.

3. Mapear cada paleta a un tema

Para trabajo web (Tailwind/shadcn por defecto), convierte cada paleta candidata en un conjunto completo de variables CSS de shadcn: --background, --foreground, --card, --card-foreground, --primary, --primary-foreground, --secondary, --secondary-foreground, --accent, --accent-foreground, --muted, --muted-foreground, --border, --ring. Usa el formato de color que el proyecto ya utilice (HSL u OKLCH). Si una paleta no tiene un color casi blanco o casi negro, deriva tintes/sombras de sus propios colores en lugar de usar gris puro.

Escribe todos los temas en un solo archivo, por ejemplo lib/wada-themes.ts:

export const wadaThemes = [
  { id: 176, name: "Hermosa Pink / ...", swatches: ["#f9c1ce", ...], vars: { "--background": "...", ... } },
  ...
];

4. Añadir el conmutador de temas (siempre, para trabajo web)

Construye un componente cliente components/wada-theme-switcher.tsx y renderízalo una vez en el diseño raíz.

Comportamiento:

• Un pequeño botón flotante en la esquina inferior derecha (alto z-index, con su propio estilo neutral fijo para que se mantenga legible en cualquier tema).
• Al hacer clic, se abre un panel que lista cada tema: número de combinación, nombre y sus muestras como pequeños círculos. Al hacer clic en un tema, se aplica instantáneamente estableciendo sus vars en document.documentElement.style.
• Flechas anterior/siguiente más atajos de teclado ([ y ]) para recorrer los temas rápidamente.
• Una opción "Por defecto" que elimina las variables en línea para restaurar el tema original del sitio.
• Recuerda el tema seleccionado en localStorage (envuelto en try/catch) para que sobreviva a la navegación y recarga de página.
• Un botón "Copiar CSS" que copia el tema actual como un bloque :root { ... } listo para pegar en globals.css, con el número de combinación en un comentario.
• Visibilidad: muéstralo cuando process.env.NODE_ENV !== "production" O la URL tenga ?themes=1. Esto permite al usuario probar en una vista previa de Vercel en vivo y compartir el enlace con un cliente, mientras que los visitantes normales nunca lo ven.

Cuando el usuario elija un ganador ("fijar 176"), escribe las variables de ese tema en globals.css como predeterminadas. Pregunta si eliminar el conmutador y wada-themes.ts o mantenerlos detrás de ?themes=1.

Otras salidas

• Sitios CSS plano: el mismo conmutador en JavaScript vanilla, estableciendo propiedades personalizadas en :root.
• Diseño / impresión: lista hex, RGB y CMYK por color con el número de combinación.
• Conjuntos de vestimenta / no digital: describe cada color en palabras sencillas y qué prenda le corresponde (base, principal, acento).

Cita siempre el(los) número(s) de combinación para que el usuario pueda encontrarlos en el libro.

Notas

• Los valores hex son aproximaciones digitalizadas. Los valores CMYK del libro impreso son la referencia.
• Los nombres de colores provienen del conjunto de datos. No inventes nombres japoneses.