🎨 Front de: Invoice App 🧾 | Simulación de trabajo en equipo con la comunidad de Twitch https://twitch.tv/vamoacodear y Discord https://discord.io/vamoacodear
🎨 Incluir en la configuración de Tailwind el design system del proyecto (valores obtenidos de Figma).
Figma en su documento solo especificaba un número limitado de tokens, se agregó TODOS los tokens que se encontraron el los flows del documento para facilitar el desarrollo, desde colors, box-shadows, breakpoints, etc.
📝 Agregar y configurar la tipografía fuente dada por Figma.
Se instaló localmente las fuentes necesarias en sus dos variantes (medium y bold) en un formato optimizado woff2.
Se optimizó la implementación de la fuente mediante tags de HTML en index.html.
Se generó una fuente de fallback para evitar layout shifts. (Debajo adjunto un artículo que habla de ello y una herramienta para ajustar una fuente de fallback). 👇
Se agregó en el README.md documentación sobre el design system y casos de uno de cada uno de sus tokens para facilitar el desarrollo y búsqueda de tokens.
Invoices App Pull Request 🪐
Descripcion ✏️
colors,box-shadows,breakpoints, etc.mediumybold) en un formato optimizadowoff2.index.html.fallbackpara evitar layout shifts. (Debajo adjunto un artículo que habla de ello y una herramienta para ajustar una fuente de fallback). 👇README.mddocumentación sobre el design system y casos de uno de cada uno de sus tokens para facilitar el desarrollo y búsqueda de tokens.🔗 Link sobre layout shift: https://simonhearne.com/2021/layout-shifts-webfonts/ 🔗 Herramienta para crear fallback de fuentes: https://meowni.ca/font-style-matcher/
Cambios visuales 🎨
N/A
Como testear? 🐛
N/A