Wiki

Documentación de Estilos de la Aplicación Sicoferp Introducción Bienvenido a la documentación de estilos de la aplicación Sicoferp. Este documento proporciona una guía detallada sobre los estilos utilizados en Sicoferp, basados en las representaciones visuales proporcionadas en Figma. Se enfoca en el tema “ada-light-green” y el manejo de iconos SVG, asegurando una experiencia de usuario coherente y atractiva.

Objetivo El objetivo principal de esta documentación es establecer pautas claras y accesibles para los desarrolladores y diseñadores que trabajan en la aplicación Sicoferp. Al seguir estas directrices basadas en los diseños de Figma, garantizamos que todos los elementos visuales, desde colores y tipografía hasta componentes específicos y uso de iconos, mantengan un estilo uniforme y profesional en toda la aplicación.

Estructura de Carpetas y Archivos Directorio del Tema “ada-light-green”

Ubicación: src/assets/layout/styles/theme/ada-light-green Este directorio contiene todos los archivos de estilos específicos del tema “ada-light-green”, basados en los diseños presentados en Figma. Aquí se definen las reglas de estilo CSS y SCSS que configuran la apariencia visual de la aplicación Sicoferp, incluyendo variables de colores, tipografía, espaciado y estilos para componentes como botones, tarjetas y barras de navegación.

Gestión de Iconos SVG

Ubicación de los Iconos: src/assets/icon Archivo de Clases de Iconos: src/assets/icon/icon.scss En src/assets/icon, se encuentran los iconos SVG licenciados utilizados en la aplicación, organizados según los diseños presentados en Figma. El archivo icon.scss define clases CSS para cada ícono SVG, permitiendo su fácil integración y reutilización en diferentes partes de la interfaz de usuario de Sicoferp. Algunos componentes hacen uso del atributo icon para referenciar estos iconos licenciados de manera consistente y eficiente.

Uso y Mantenimiento Es crucial seguir estas convenciones y estructuras basadas en los diseños de Figma para facilitar la mantenibilidad y escalabilidad del código de estilos en Sicoferp. Además, se enfatiza minimizar las modificaciones directas en el archivo src/styles.scss, optando por importar archivos adicionales según sea necesario para separar estilos específicos y mantener un control efectivo sobre las actualizaciones y versiones de los estilos.

Ejemplos y Guía de Estilos Para una implementación eficiente y coherente de los estilos en Sicoferp, se proporcionan ejemplos prácticos y guías detalladas basadas en los diseños de Figma para:

Colores: Paleta de colores utilizada en el tema “ada-light-green”. Tipografía: Fuentes y tamaños de texto estándar para diferentes elementos de la interfaz de usuario, la fuente es Roboto. Componentes Específicos: Estilos detallados para botones, tarjetas, formularios y otros componentes clave. Las dimensiones de los componentes se encuentran en los diseños de Figma. Uso de Iconos SVG: Instrucciones claras sobre cómo incorporar y utilizar los iconos SVG mediante las clases definidas en icon.scss, según los diseños presentados en Figma y utilizando el atributo icon cuando sea aplicable.

←Regresar