Crea o edita un tema
Buena práctica
Si estás trabajando en un nuevo proyecto, siempre debes crear un nuevo tema.
Para crear un nuevo tema, previamente debes obtener la información del sistema de diseño definido para tu proyecto. En función de esto, configurarás cada una de las variables y estilos para los componentes de tu app y, si corresponde, los estilos personalizados y los datos CSS para un estilo específico.
Lee las instrucciones a continuación para aprender cómo crear un tema.
En la página Themes, haz clic en Create.
Buena práctica
El nuevo tema tiene elementos y valores configurados por defecto que están alineados con los estándares de uso de Veritran.
El nuevo tema se abre en la pestaña Variables, donde se definen las configuraciones predeterminadas. Configura cada pestaña de acuerdo con el sistema de diseño creado para tu proyecto en función de los estándares de uso. Comience configurando la pestaña Settings.
Consulta la sección Configuración del tema para obtener más información sobre cada sección, cómo configurar cada valor y crear nuevas configuraciones.
Nota
El panel Preview a la derecha te permite ver cómo se verá una pantalla básica en una app móvil si el tema se aplica a ella.
Ha< clic en Save para guardar el tema y volver a la página Themes.
Dirígete a la configuración de la app y aplica el tema correspondiente a tu app. Para saber más, lee Views.
Configuración del tema
Las secciones siguientes explican las diferentes configuraciones disponibles para un tema y su propósito. Para establecer estilos básicos, debe configurar la pestaña Variables y Styles. Configurarás las pestañas Custom y CSS en función del sistema de diseño de tu proyecto, ya sea una app móvil o web.
Importante
Recuerda configurar solo las pestañas especificadas en el sistema de diseño de tu proyecto. Si tienes alguna pregunta, revísala con los miembros de tu equipo de diseño.
Consulta las secciones a continuación para obtener más información sobre cada pestaña disponible.
Variables
Las variables son conjuntos de valores aplicados a los atributos de los componentes de la app. Haz clic en el ícono de lapiz (
) para abrir el modal de configuración de la variable. Para eliminar una variable, haz clic en el ícono de la papelera (
.
Nota
En todos los casos, puedes cambiar el nombre de la variable.
Obtiene más información sobre cómo configurarlos en la siguiente tabla.
Color. Variables que definen los colores (incluyendo tonos de gris) aplicables a distintos atributos de un componente. Cada tarjeta de una variable muestra el nombre, el código de color en formato hexadecimal y la opacidad definida. | Para definir el color, selecciona un color del selector de colores o ingresa el código hexadecimal en el campo Hexa. Una vez que ingreses el color, el campo Opacidad se configurará automáticamente al 100%. Haz clic en el campo y cambia la opacidad según sea necesario. Haz clic en Save. Si tu proyecto requiere más colores que los incluidos, haz clic en Add color. Se abre el modal Color, donde completas los campos como se especifica anteriormente.  |
Font. Define los valores de propiedades de estilo que se aplicarán a los textos en los componentes. | Para definir una fuente, dirígete al campo Font y selecciona una opción en el menú desplegable. Luego, selecciona un tamaño y unidad de medida. Haz clic en Save. Si tu proyecto requiere más fuentes que las incluidas, haga clic en Add font y completa los campos como se especifica arriba.  |
Border. Define los valores de los atributos de estilo que se aplicarán a los bordes de los componentes. | Para definir un borde, haz clic en el campo Width e introduce el número que representa el ancho. Luego, selecciona una unidad de medida en el menú desplegable a la derecha. Por defecto, el borde está activado. Para eliminar el borde, haz clic en el icono de cadena enlazada y deshabilita los bordes. Haz clic en Save. SugerenciaComo mejor práctica, deja px seleccionado. Para agregar un borde adicional, haz clic en Add border y completa los campos como se especificó anteriormente. NotaLos tamaños definidos para cada borde aparecerán en el componente de muestra que aparece arriba.  |
Radius. Define los valores de los atributos de estilo que se aplicarán a los Establece los valores de las propiedades de estilo que se aplicarán a los radios en los bordes de los componentes. | De forma predeterminada, todos los atributos de radio se seleccionan para configurarlos con un único valor. Para ello, haz clic en el campo Radius e introduce el número o utiliza la barra deslizante para alcanzar el número deseado. Luego, selecciona una unidad de medida. Para establecer el radio de cada esquina individualmente, haz clic en la esquina deseada, luego haz clic en el campo Radius e introduce el número o utiliza la barra deslizante para alcanzar el número deseado. Luego, selecciona una unidad de medida. SugerenciaComo mejor práctica, deja px seleccionado. Para agregar un valor de radio adicional, haz clic en Add radius y completa los campos como se especificó anteriormente. NotaLos tamaños definidos para cada radio aparecerán en el componente de muestra que aparece arriba.  |
Shadow. Define los valores de los atributos de estilo que serán aplicados a las sombras de los componentes. | Para definir la sombra, primero introduce los valores en los campos X e Y, que determinan la sombra con respecto al eje X (horizontal) y el eje Y (vertical), respectivamente. Luego, selecciona la unidad de medida para cada eje. En el campo Blur, puede definir el nivel de desenfoque de la sombra. En el campo Spread, puedes definir el radio de ensanchamiento de la sombra, donde cuanto mayor sea el valor, mayor será el tamaño de la sombra. En ambos casos, introduce el número y selecciona la unidad de medida. Por último, en el campo Color, selecciona la variable de color aplicable a la sombra. Haz clic Add. NotaCada eje considera el centro del componente como punto de partida. Para agregar una sombra adicional, haz clic en Add shadow y completa los campos como se especificó anteriormente.  |
Margin Define los valores de los atributos de estilo aplicados a los márgenes de los componentes - es decir, el espacio alrededor del borde del componente. | Para configurar los márgenes, haz clic en cada campo (Top, Right, Bottom, Left) e introduce el valor. Luego, selecciona la unidad de medida ubicada a la derecha. Haz clic Add. Para agregar un margen adicional, haz clic en Add margin y completa los campos como se especificó anteriormente.  |
Padding Define los valores de los atributos de estilo aplicados a los rellenos de los componentes - es decir, el espacio entre el borde del componente y el contenido del componente (valor). | Para configurar los rellenos, haz clic en cada campo (Top, Right, Bottom, Left) e introduce el valor. Luego, selecciona la unidad de medida ubicada a la derecha. Haz clic Add. Para agregar un atributo de relleno adicional, haz clic en Add paddingy completa los campos como se especificó anteriormente.  |
Styles
Esta sección contiene un conjunto de estilos predefinidos que se asignarán a los componentes de una pantalla. Incluye diferentes estilos para diferentes componentes, y debes configurar cada estilo utilizando las variables previamente definidas. Esto significa que solo podrás usar las variables configuradas y no crear variables adicionales en la pestaña Styles.
Importante
Los estilos solo se pueden aplicar a los componentes enumerados en esta sección. Esto significa que, por ejemplo, los estilos de botón solo se pueden aplicar a componentes de botón y no a otros componentes como entradas de texto o etiquetas de texto.
Dado que los estilos predefinidos se aplican al atributo CSS Class de los componentes, todos los componentes de la pantalla adquieren todas las propiedades o atributos configurados para ese estilo.
Haz clic en el icono del lápiz ( ) para abrir el modal de configuración de estilo. Para eliminar una variable, haz clic en el ícono de la papelera. En todos los casos, se puede modificar el nombre del estilo del componente.
Consulta la tabla siguiente para aprender a configurar los estilos disponibles de los componentes (y sus estados) en las pantallas de tu app.
Nota
Los atributos disponibles para cada componente representan los atributos más utilizados cuando se configura el componente en el panel derecho del editor de pantallas.
Button. Los estilos de botón definidos bajo las mejores prácticas incluyen: btn_ghost, btn_primary, btn_secondary_small, Terciary, TertiaryOutline, TertiaryText. | Para definir un estilo de botón, selecciona el tipo de botón que deseas configurar y haz clic El estilo de botón permite configurar estilos para cada estado del componente: Active, Hover (solo aplicable a aplicaciones web), Pressed y Disabled. Puedes configurar el estilo solo para el estado Active (estado predeterminado del componente) o uno o más de los estados restantes. Si no configuras el resto de los estados, heredarán la configuración del estado Active. Configura cada uno de los atributos (valor y unidad de medida, si procede) utilizando las variables valores previamente configurados. Los atributos disponibles incluyen: Background, Font, Shadow, Padding, Border Color, Icon Color, Height, Border, Icon, Margin, Radius, Font Color y Width. Luego, haz clic en Save. Para agregar un estilo de botón adicional, haz clic en el Add button y completa los campos como se especifica anteriormente.  |
Checkbox. No aparecen estilos de casilla creados de forma predeterminada. | Para definir un estilo de casilla de verificación, haz clic en Add checkbox. El estilo de casilla de verificación te permite configurar el estilo de estado Active solamente. Configura cada uno de los atributos (valor y unidad de medida, si procede) utilizando las variables valores previamente configurados. Los atributos disponibles incluyen: Background, Border Color, Font, Height, Border, Margin, Icon Color, y Width. Luego, haz clic en Add. Para agregar un estilo de casilla de verificación, haz clic en Add checkbox y completa los campos como se especificó anteriormente.  |
Flex Los estilos de contenedor flexible definidos bajo las mejores prácticas incluyen: flc_bottomsheet, flc_card, flc_header, flc_menu, FlexPrimary, FlexBackground y FlexContent. | Para definir un estilo de flex container, selecciona el tipo de flex que deseas configurar y haz clic El estilo del flex container permite configurar estilos para cada estado del componente: Active, Hover (solo aplicable a aplicaciones web), Pressed y Disabled. Puedes configurar el estilo solo para el estado Active (estado predeterminado del componente) o uno o más de los estados restantes. Si no configuras el resto de los estados, heredarán la configuración del estado Active. Configura cada uno de los atributos (valor y unidad de medida, si procede) utilizando las variables valores previamente configurados. Los atributos disponibles incluyen: Background, Radius, Margin, Shadow, Height, Border, Border Color, Padding, y Width. Luego, haz clic en Save. Para agregar un estilo de flex container adicional, haz clic en Add flex y completa los campos como se especificó anteriormente.  |
Input Los estilos de entrada de texto definidos bajo las mejores prácticas incluyen: ipt_regular. | Para definir un estilo, selecciona el tipo de entrada de texto que deseas configurar y haz clic El estilo de entrada de texto permite configurar estilos para cada estado del componente: Active, Focus, Filled, Success, Error y Disabled. Puedes configurar el estilo solo para el estado Active (estado predeterminado del componente) o uno o más de los estados restantes. Si no configuras el resto de los estados, heredarán la configuración del estado Active. Configura cada uno de los atributos (valor y unidad de medida, si procede) utilizando las variables valores previamente configurados. Los atributos disponibles incluyen: Background, Font Content Color, Border, Margin, Radius, Border Color, Icon Left, Shadow, Height, Font Hint, Left Icon Color, Padding, Icon Right, Font Content, Right Icon Color y Width. Luego, haz clic en Save. Para agregar un estilo de entrada de texto adicional, haz clic en Add input y completa los campos como se especificó anteriormente.  . |
Panel Los estilos de panel definidos bajo las mejores prácticas incluyen: pnl_main. | Para definir un estilo de panel, selecciona el tipo que deseas configurar y haz clic El estilo de panel te permite configurar el estilo de estado Active solamente. Configura cada uno de los atributos (valor y unidad de medida, si procede) utilizando las variables valores previamente configurados. Los atributos disponibles incluyen: Background, Border Color, Padding, Border, Margin, y Radius. Luego, haz clic en Save. Para agregar un estilo de panel adicional, haz clic en Add panel y completa los campos como se especificó anteriormente.  |
Radio No aparecen estilos de botones de radio creados por defecto. | Para definir un estilo de botón de opción, haz clic en Add radio. El estilo de radio te permite configurar el estilo de estado Active solamente. Configura cada uno de los atributos (valor y unidad de medida, si procede) utilizando las variables valores previamente configurados. Los atributos disponibles incluyen: Radio Color, Font, Width, Font Color, Margin y Height. Luego, haz clic en Add. Para crear un estilo de botón de opción, haz clic en Add radio y completa los campos como se especifica a continuación.  |
Switch No aparecen estilos de interruptor creados por defecto. | Para definir un estilo de radio, haga clic en Add switch. El estilo de interruptor te permite configurar el estilo de estado Active solamente. Configura cada uno de los atributos (valor y unidad de medida, si procede) utilizando las variables valores previamente configurados. Los atributos disponibles incluyen: Background Control, Margin Right, Border Control Color, Font Color, Height, Background Box, Font, Border Box Color y Width. Luego, haz clic en Add. Para crear un estilo de interruptor, haz clic en Add switch y completa los campos como se especifica a continuación.  |
Text Los estilos de etiquetas de texto definidos bajo las mejores prácticas incluyen: txt_headline1, txt_headline3, txt_label, txt_paragraph3, txt_paragraph4, txt_paragraph2, txt_link. | Para definir un estilo de etiqueta de texto, selecciona el tipo que desea configurar y haz clic El estilo de etiqueta de texto permite configurar estilos para cada estado del componente: Active, Hover (solo aplicable a aplicaciones web), Pressed y Disabled. Puedes configurar el estilo solo para el estado Active (estado predeterminado del componente) o uno o más de los estados restantes. Si no configuras el resto de los estados, heredarán la configuración del estado Active. Configura cada uno de los atributos (valor y unidad de medida, si procede) utilizando las variables valores previamente configurados. Los atributos disponibles incluyen: Font, Margin, Line Spacing, Font Color, Padding y Character Spacing. Haz clic en la casilla Text Underline para agregar un diseño de subrayado a la etiqueta de texto. Luego, haz clic en Save. Para agregar un estilo de etiqueta de texto adicional, haz clic en Add text y completa los campos como se especificó anteriormente.  |
Custom
En esta sección, puedes crear estilos específicos para definir atributos que se aplicarán a un estilo de componente. Un estilo personalizado se utiliza para reemplazar un atributo específico de un estilo de componente bajo una circunstancia específica, o para agregar un atributo que no está disponible en el estilo del componente.
¿Cuándo crear un estilo personalizado?
Los estilos personalizados se pueden utilizar en las siguientes circunstancias:
Para crear un estilo para un componente que no está incluido en la sección Styles.
Para crear estilos que se aplicarán en cualquier otro componente en general (ya que no están asignados a un componente específico).
Para concatenar un estilo personalizado con un solo atributo a un estilo existente, si es necesario en casos de uso de proyectos específicos. Para obtener más información, lea Cómo concatenar estilos en un componente en Usar el tema.
Si hay estilos creados, puedes usar la barra de búsqueda y escribir el nombre del estilo. Una vez que encuentres el estilo personalizado deseado, puedes realizar diferentes acciones. Haz clic en para modificar los valores existentes o en 
para agregar más atributos al estilo personalizado. Para eliminar un estilo personalizado, haz clic en el icono de papelera (.
Lee las instrucciones a continuación para aprender cómo configurar un estilo personalizado en Custom.
Buena práctica
Utiliza estilos personalizados solo cuando los estilos predefinidos disponibles en la sección Styles no cumplan con los requisitos de tu app. Como mejor práctica, los estilos personalizados deben contener un atributo que sobrescriba el estilo del componente.
Haz clic + Add style.
En el campo Style name, introduce un nombre para identificar el nuevo estilo. Usa snake_case. Por ejemplo: border_error. Deje el campo Component en blanco.
Nota
Evite el uso de nombres de estilo ya en uso, para evitar confusiones al configurar el componente en el editor de pantallas.
En el campo Property, agrega el atributo que deseas configurar. Comienza a escribir el atributo y selecciona una opción de la lista.
En el valor, establece el valor respectivo aplicable al atributo.
Haz clic en Save para guardar el estilo personalizado.
CSS
En esta sección, puedes crear estilos específicos para apps web utilizando un editor de código CSS. Para crear un estilo nuevo, elige una de las dos alternativas: cargar un archivo CSS o escribir CSS válido directamente.
Para cargar un archivo CSS, haz clic en + Add CSS y selecciona el archivo que deseas cargar desde el sistema.
Para escribir CSS, haz clic en la leyenda Type or paste valid CSS here y escribe CSS válido.
Importante
Usa esta sección solo para configurar las propiedades específicas para las apps web que no están disponibles en las pestañas Styles y Custom.
Settings
La pestaña Settings contiene información básica sobre el tema para identificarlo en el ambiente de Studio. Para completarlo, sigue las instrucciones a continuación:
En el campo Name, escribe un nombre que identifique el tema. Debe estar en snake_case e incluir el nombre del proyecto y sus principales aspectos o características. Por ejemplo: veribank_light_mode.
En el campo Description, describe los aspectos principales del tema; puedes brindar más información sobre el nombre seleccionado.
En el campo Tags, introduce cualquier etiqueta aplicable al tema, que permitirá a otros usuarios de Studio identificar las características.
En el campo Transitions, haz clic en la flecha y selecciona el efecto aplicado a la transición entre pantallas. Esto afecta a toda la app. A continuación, haz clic en el campo Duration e introduce un número mientras dure el efecto de transición (en milisegundos).
En los campos Logo y Thumbnail, haz clic en Upload para seleccionar una imagen que represente el tema cuando se invoque desde otras entidades; por ejemplo, cuando apliques un tema en la configuración de la app.
Sugerencia
Puedes utilizar la misma imagen para ambos campos.