Skip to content
Helipagos DocSite

Convenciones

Checkout dinámico tiene un sistema de configuración de colorimetría e imágenes que se basa en configuraciones guardadas en Base de datos. Para realizar una configuración más clara y concisa entre el área de diseño y el área de desarrollo, se realizó una estandarización de propiedades

Las propiedades están organizadas para gestionar los colores, bordes y otros elementos visuales, cada una con un propósito específico. A continuación, se describen las propiedades y su convención de nomenclatura para que puedas comprender cómo funcionan.

1. Propiedades de Color

Las propiedades de color se dividen en categorías según su uso en la interfaz de usuario. Las categorías incluyen colores de fondo, primer plano (foreground), bordes, y colores especiales para componentes específicos como popovers, tarjetas, etc.

Colores de Fondo

Estas propiedades definen los colores de fondo de los elementos de la interfaz.

  • primary: Color principal de la interfaz.
  • secondary: Color secundario, utilizado en elementos menos destacados.
  • muted: Color para elementos inactivos o menos relevantes.
  • popover: Fondo para las ventanas emergentes o popovers.
  • card: Fondo de las tarjetas o contenedores.
  • background-color: Color de fondo principal de la interfaz.

Colores de Primer Plano (Texto)

Estas propiedades se usan para los colores de texto sobre los fondos.

  • primary-foreground: Color de texto sobre el fondo principal.
  • secondary-foreground: Color de texto sobre el fondo secundario.
  • muted-foreground: Color de texto para los elementos con fondo “muted”.
  • popover-foreground: Color de texto para los popovers.
  • card-foreground: Color de texto dentro de las tarjetas.
  • foreground: Color principal del texto en la interfaz.
  • accent-foreground: Color de texto sobre los elementos de acento.

Colores Especiales

Algunas propiedades se usan para situaciones específicas, como alertas o botones destructivos.

  • destructive: Color para elementos destructivos, como botones de eliminación.
  • destructive-foreground: Color de texto para los elementos destructivos.

Otros Colores

  • border: Define el color de los bordes de los elementos.
  • input: Color de fondo para los campos de entrada.

2. Propiedades de Estilo

ring

Define el color del borde cuando un elemento está enfocado o seleccionado.

radius

Esta propiedad define el border-radius, es decir, el radio de los bordes redondeados de los elementos. Usualmente, un valor de 1 o más indica bordes redondeados, mientras que un valor de 0 es un borde recto. Como medida de valor, este número se transforma a rem para la utilización dentro del estilo en checkout v2.

3. Propiedades para las imágenes y enunciado

Estas propiedades se utilizan para definir imágenes dentro del tema, como el fondo, header o el logo.

  • background: URL de la imagen a utilizar como fondo de checkout.
  • header: URL de la imagen a utilizar como Header.
  • logo-image: URL de la imágen a utilizar como Logo.
  • title: Slogan, titulo o razón social de la organización.

Las imágenes como tal tienen un orden de prioridad según existencia. Esto quiere decir que apareceran o no apareceran las imágenes según las existencias.

Tabla de prioridades

Cuan más grande sea el número, mayor prioridad de aparición tendrá

PropiedadPrioridad
header2
background2
title1
logo-image1

Ejemplos de situación

  • ⛔: Propiedad no cargada dentro de la configuración
  • ✅: Propiedad cargada dentro de la configuración
headerlogo-imagetitleResultado a mostrar
✅✅✅header
✅⛔⛔header
⛔✅✅logo-image + title
⛔⛔✅title
⛔✅⛔logo-image
⛔⛔⛔none (error)

4. Propiedades de Estado

  • enabled: Un valor booleano que indica si el tema está habilitado (true) o no (false).

Convenciones de Nomenclatura

Las convenciones de nomenclatura de las propiedades siguen un formato específico que tiene como objetivo ser claro y consistente en la definición de los colores y estilos de la interfaz:

  1. Color Base + Modificador
    Las propiedades de color se nombran utilizando una convención de color base seguido de un modificador que indica su uso específico. Ejemplos:

    • primary: Color base, se refiere al color principal.
    • primary-foreground: Indica el color del texto sobre el color base primary.
    • muted-foreground: Texto sobre un color de fondo “muted” (menos destacado).

  2. Elementos Visuales
    Las propiedades que no son de color, como los bordes y los radios, también siguen un patrón lógico:

    • ring: Color del borde enfocado.
    • radius: Radio de los bordes redondeados.

  3. Componente Específico
    Las propiedades que se refieren a componentes como popovers, tarjetas, etc., tienen nombres específicos:

    • popover y popover-foreground: Para el fondo y el texto de los popovers.
    • card y card-foreground: Para el fondo y el texto de las tarjetas.

  4. Imagen y Medios
    Las propiedades relacionadas con imágenes siguen una convención simple de nombres descriptivos:

    • background: Fondo de la interfaz.
    • header: Imagen del encabezado.
    • logo-image: Imagen del logo.

  5. Estado y Activación
    Las propiedades que controlan el estado, como si el tema está habilitado, siguen un nombre intuitivo:

    • enabled: Determina si el tema está activado o desactivado.

Puntos a tener en cuenta

La configuración se basa en valores por defecto y valores modificados, esto significa que cualquier propiedad no agregada normalmente se tomará de la configuración por defecto de helipagos, siendo la siguiente configuración

{
  "id": "67cb0cb2a416dfa9dd48b73e",
  "primary": "#002DBC",
  "primaryForeground": "#f7f9fb",
  "secondary": "#828282",
  "secondaryForeground": "#0f172a",
  "muted": "#f1f5f9",
  "mutedForeground": "#64748b",
  "popover": "#ffffff",
  "popoverForeground": "#010816",
  "card": "#ffffff",
  "cardForeground": "#010816",
  "border": "#e2e8f0",
  "input": "#e2e8f0",
  "backgroundColor": "#FFFFFF",
  "foreground": "#010816",
  "accent": "#f1f5f9",
  "accentForeground": "#0f172a",
  "destructive": "#ee4444",
  "destructiveForeground": "#f7f9fb",
  "ring": "#808080",
  "radius": 1,
  "background": "https://helipagos.s3.amazonaws.com/TMP/tmp_51738937478166",
  "header": "https://helipagos.s3.amazonaws.com/TMP/tmp_51738937615217",
  "title": "Modificado",
  "logoImage": "https://helipagos.s3.amazonaws.com/TMP/tmp_51738777469303",
  "userId": 5,
  "enabled": true
}