[UPDATE] Modify TW tokens

[egdev6]

Como resultado de la tarea #91 habría que modificar la configuración de tokens de Tailwind (tanto a nivel de proyecto, como de storybook, como de componentes) por los nuevos definidos y unificar criterios visuales (uso de grises como fondo, rojos para resaltar, blancos o grises claros para textos)

IMPORTANTE! para mantener retrocompatibilidad hasta que hagamos los refactors en los componentes existentes, habría que mantener los actuales extendiéndolos con los nuevos.

Podríamos poner las páginas actuales de colores en storybook con la etiqueta deprecated y hacer nuevas con los nuevos tokens

[MarcosGiannini]

Plan de Acción y Tareas Pendientes

Para reflejar los próximos pasos acordados en nuestra última sincronización, aquí está el checklist de tareas pendientes para las issues #91 y #92.

🎨 Tareas de Diseño (@Maca314):

• 1. Definir Paleta Final: Terminar de definir la "Paleta 7" con todos los colores (primarios, semánticos, etc.) para modo claro y oscuro.
• 2. Crear Tokens en Figma: Crear/actualizar todas las Variables en Figma (Color, Tipografía, Sombras) con la nomenclatura acordada.
• 3. Aplicar Tokens: Aplicar estas nuevas variables a los componentes de ejemplo en Figma para validar el sistema.
• 4. Exportar y Entregar: Usar el plugin "Figma Variables to JSON" para exportar el fichero .json final y adjuntarlo en esta issue o pasarlo al desarrollador.

💻 Tareas de Desarrollo (@MarcosGiannini):

• 1. Recepción del JSON: Recibir y validar el fichero .json con todos los tokens.
• 2. Implementar Tokens en Tailwind: Modificar la configuración de Tailwind para añadir los nuevos tokens, manteniendo la retrocompatibilidad como se indica en la descripción de la issue.
• 3. Actualizar Storybook: Reflejar los nuevos tokens en Storybook (pendiente de la sincronización con @egdev6).
• 4. Crear Pull Request: Subir los cambios para que el equipo los revise.

[egdev6]

Según lo que hablamos con @MarcosGiannini propongo el siguiente esquema de tokens @Maca314

Gama rojos primarios (dark y light - pueden variar para encajar mejor con los grises azulados)
Escala rojos (dark y light - pueden variar para encajar mejor con los grises azulados)
Escalas de grises (dark y light pero con tonos más azulados que encajen mejor con los rojos)
Colores secundarios (tono normal, tono claro y tono oscuro ¿duplicar dark y light?)
Colores de texto (color primario y color secundario para dark y light)
Sombras (sm, md y lg dark y light)
Colores Background (primario, secundario y terciario dark y light)
Font (los necesarios)
Text y spacing (los dejaría como están)

Quedo abieto a comentarios y opiniones. Gracias!

[MarcosGiannini]

IMPLEMENTACIÓN COMPLETADA 🚀

Se ha finalizado toda la implementación de la arquitectura base para el nuevo sistema de tokens, cumpliendo con todos los requisitos técnicos de esta issue.

Resumen de Cambios y Entregables

• ✅ theme-new.css: Creado y poblado con la estructura completa de los nuevos tokens (escalas, semánticos, etc.) utilizando valores placeholder.
• ✅ safelist-new.ts: Creado con la lista completa de las nuevas clases de utilidad. El archivo ha sido refactorizado en constantes separadas para máxima legibilidad y mantenibilidad.
• ✅ index.ts: Actualizado para exportar los nuevos types de TypeScript (NewTextThemeColors, NewBgThemeColors, etc.), proporcionando type-safety para el uso de los nuevos tokens en los componentes.
• ✅ Nueva Documentación en Storybook: Creada y funcionando la nueva página New Primitive Colors, que visualiza toda la nueva paleta de colores a través de las clases de Tailwind, validando que la arquitectura es 100% funcional.
• ✅ Deprecación de Documentación Antigua: La página Primitive Colors original ha sido marcada como obsoleta con un aviso claro y un enlace a la nueva documentación.

Siguientes Pasos

La infraestructura está lista. El proyecto queda a la espera de los valores de color definitivos de la Issue #91 para reemplazar los placeholders y dar por finalizado el sistema de diseño visual.

cc @egdev6 @Maca314

[egdev6]

@MarcosGiannini super! cerraremos los nuevos temas con @Maca314 y trasladamos a la nueva configuración. Buen trabajo!