Personalización de apariencia

Personaliza la apariencia del Centro de Privacidad y el módulo de Consentimiento de Soyio para que coincidan con tu marca. Las opciones de personalización se pasan a través del objeto appearance en la configuración.

Hoy soportamos la personalización de apariencia para el módulo de verificación de identidad en menor medida. Consulta la documentación de nuestro SDK web para más información.

A continuación, explora la demostración de personalización de apariencia y ajústala a tu gusto.

Loading Demo...

Esta guía cubre las opciones de personalización más comunes para el SDK web @soyio/soyio-widget (v3+) y el SDK mobile @soyio/soyio-rn-sdk (v5+). Para documentación técnica completa y opciones avanzadas, consulta la documentación oficial del SDK web de Soyio o la documentación del SDK mobile de Soyio.

Estructura

El objeto appearance consta de cuatro secciones principales:

const appearance = {
  theme: string,        // Tema predefinido
  mode: string,         // light | dark | auto
  variables: Variables, // Variables globales de apariencia
  rules: Rules,         // Reglas CSS por componente/estado
  config: Config,       // Configuración de comportamiento
};

Temas

Los temas integrados sirven como base para la personalización: ofrecen paletas de colores y estilos de componentes preconfigurados que sirven de punto de partida y luego se ajustan según tus necesidades.

Tema	Descripción
`"soyio"`	Tema principal de Soyio
`"flat"`	Tema minimalista con diseño plano y bordes rectos
`"neutral"`	Paleta más sobria, útil para integraciones con menos carga de marca
`"night"`	Alias deprecado de `theme: "soyio"` con `mode: "dark"`

Modos de color

El campo mode controla cómo se resuelve la variante clara u oscura del tema:

Modo	Descripción
`"light"`	Fuerza modo claro
`"dark"`	Fuerza modo oscuro
`"auto"`	Respeta el esquema de color del dispositivo/usuario

const appearance = {
  theme: 'soyio',
  mode: 'dark',
};

theme: "night" sigue siendo aceptado por compatibilidad, pero nuevas integraciones deberían usar theme + mode.

Variables

Las variables permiten ajustar atributos visuales comunes en todos los componentes.

Variables disponibles

Variables tipográficas

Variable	Descripción	Por defecto
`fontFamily`	Familia de fuentes base (se usa como fallback para body y title si no se especifican)	`"system-ui, sans-serif"`
`fontFamilyBody`	Familia de fuentes para texto de cuerpo/párrafo (usa `fontFamily` si no se especifica)	`var(--fontFamily)`
`fontFamilyTitle`	Familia de fuentes para títulos y encabezados (usa `fontFamily` si no se especifica)	`var(--fontFamily)`
`fontSizeBase`	Tamaño de fuente base para texto	`"1rem"`

Colores principales

Variable	Descripción	Por defecto
`colorPrimary`	Color principal para elementos interactivos	`"#0570DE"`
`colorPrimarySurface`	Color de fondo para elementos primarios (ej. pestaña activa)	depende del tema
`colorSecondary`	Color secundario para elementos interactivos	depende del tema
`colorBackground`	Color de fondo	`"#FFFFFF"`

Colores de superficie

Variable	Descripción	Por defecto
`colorSurface`	Color de superficie para tarjetas y secciones	`"#F9FAFB"`
`colorSurfaceMuted`	Color de superficie apagado	`"#F3F4F6"`
`colorSurfaceStrong`	Color de superficie fuerte	`"#E5E7EB"`

Colores de borde

Variable	Descripción	Por defecto
`colorBorder`	Color de borde	`"#D1D5DB"`
`colorBorderMuted`	Color de borde apagado	`"#E5E7EB"`
`colorSwitchBorder`	Color de borde para componente Switch (no marcado)	`"#000000"`

Colores de texto

Variable	Descripción	Por defecto
`colorText`	Color de texto principal	`"#1E1B4B"`
`colorTextSecondary`	Color de texto secundario	`"#6B7280"`
`colorTextSubtle`	Color de texto sutil	`"#9CA3AF"`
`colorTextInverted`	Color de texto invertido	`"#FFFFFF"`
`colorTextTitle`	Color de texto de título/encabezado (usa `colorText` si no se especifica)	`var(--colorText)`
`colorLink`	Color para elementos de enlace	`"#0570DE"`

Colores de entrada

Variable	Descripción	Por defecto
`colorInputFocus`	Color de borde/anillo de enfoque para elementos de entrada	`"#0570DE"`
`colorInputErrorFocus`	Color de borde/anillo de enfoque para elementos de entrada en estado de error	`"#EF4444"`
`colorSelectArrow`	Color para el ícono de flecha del menú desplegable select	`"#6B7280"`

Colores de estado

Variable	Descripción	Por defecto
`colorInfo`	Color de estado de información	`"#1E40AF"`
`colorInfoBg`	Color de fondo de estado de información	`"#E0E7FF"`
`colorSuccess`	Color de estado de éxito	`"#15803D"`
`colorSuccessBg`	Color de fondo de estado de éxito	`"#DCFCE7"`
`colorWarning`	Color de estado de advertencia	`"#B45309"`
`colorWarningBg`	Color de fondo de estado de advertencia	`"#FEF3C7"`
`colorDanger`	Color de estado de peligro	`"#EF4444"`
`colorDangerBg`	Color de fondo de estado de peligro	`"#FEF2F2"`

Otros colores

Variable	Descripción	Por defecto
`colorOverlay`	Color de superposición	`"rgba(0, 0, 0, 0.5)"`
`dataUseIconColor`	Color para iconos de uso de datos en gestión de consentimientos	Por defecto de la configuración de la empresa

Si necesitas personalizar sombras (box-shadow), hoy debes hacerlo con appearance.rules. No existe una variable shadow o boxShadow a nivel global.

Bordes

Variable	Descripción	Por defecto
`borderRadius`	Radio de borde base (escala proporcionalmente para diferentes tamaños)	`"0.25rem"`
`borderWidth`	Ancho de borde para elementos	`"1px"`
`borderStyle`	Estilo de borde para elementos	`"solid"`

Nota sobre el radio de borde

La variable borderRadius sirve como unidad base. Los componentes más grandes (como Inputs y Buttons) usan un múltiplo de este valor (típicamente 2x), mientras que los elementos más pequeños usan una fracción o el valor base. Esto asegura un escalado consistente en todos los elementos de la UI.

Reglas

Aplica CSS personalizado a elementos específicos usando el objeto rules. Soyio admite estilos para varios componentes incluyendo inputs, botones, switches y más.

Pseudo-clases y pseudo-elementos soportados

La mayoría de las reglas admiten pseudo-clases y pseudo-elementos que se pueden agregar para estilizar diferentes estados:

Pseudo-clases soportadas

:hover - Cuando el elemento está en hover
:focus - Cuando el elemento está enfocado
:active - Cuando el elemento está activo/presionado
:disabled - Cuando el elemento está deshabilitado
:autofill - Cuando el input está auto-rellenado
:focus-visible - Cuando está enfocado mediante navegación por teclado

Pseudo-elementos soportados

::placeholder - Texto de marcador de posición en inputs
::selection - Texto seleccionado

Ejemplo de uso

rules: {
  ".Button": { backgroundColor: "blue" },           // Estilo base
  ".Button:hover": { backgroundColor: "darkblue" }, // Estado hover
  ".Button:disabled": { opacity: "0.5" },           // Estado deshabilitado
  ".Input::placeholder": { color: "gray" },         // Texto de marcador
  ".RadioCard:hover": { borderColor: "var(--colorPrimary)" }, // Hover de tarjeta
}

Reglas soportadas

Las siguientes capturas se tomaron desde Storybook con theme: "neutral" y mode: "light" para mostrar una base visual consistente. Haz clic en cualquier imagen para verla en tamaño completo.

Tipografía

.Title - Texto de título (clase base para todos los títulos)
.StepTitle - Texto de título del indicador de paso (también hereda de .Title)
.Description - Texto de descripción

Layout

.MainContainer - El contenedor principal

Card

.Card - Contenedores de tarjeta
.CardTitle - Texto de título de tarjeta

Dialog

.DialogOverlay - Superposiciones de diálogo
.DialogContent - Contenedores de contenido de diálogo
.DialogTitle - Títulos del diálogo
.DialogDescription - Texto descriptivo del diálogo

Inputs

Input

.Input - Campos de entrada
.Label - Etiquetas
.HintIcon - Iconos de ayuda/pista junto a etiquetas de entrada

Input con error

.Input--error - Campos de entrada en estado de error
.ErrorMessage - Texto de mensaje de error

Text area

.TextArea - Entradas de área de texto

Select

.Select - Triggers estilo select

Combobox

.Combobox - Entradas de combobox

NinInput

.NinInput - Campo de entrada para números de identidad nacional

TrackingCodeInput

.TrackingCodeInput - Componente de entrada de código de seguimiento
.TrackingCodeInputCell - Celdas individuales de la entrada de código de seguimiento
.TrackingCodeInputSeparator - Separador entre celdas de código de seguimiento

Botones y enlaces

Button

.Button - El componente de botón
.Button--solid - Variante principal del botón
.Button--outline - Variante con borde del botón
.Button--ghost - Variante sutil del botón

Link

.Link - Enlaces
.Button--link - Variante link del botón

Controles de selección

Checkbox

.Checkbox - El contenedor del checkbox
.CheckboxInput - El elemento checkbox estilizado (admite borderRadius, borderColor, backgroundColor)
.CheckboxLabel - La etiqueta del checkbox
.CheckboxCheck - El icono de marca de verificación dentro del checkbox
.CheckboxInput--checked - El estado marcado del checkbox

Radio

.Radio - Contenedores de botón de radio
.RadioButton - El elemento de botón de radio (el círculo en el que se puede hacer clic)
.RadioButton--checked - Estado marcado del botón de radio
.RadioIndicator - El punto indicador interno del botón de radio
.RadioIndicator--checked - Estado marcado del indicador de radio (visible cuando está seleccionado)
.RadioLabel - Etiquetas de botón de radio

Switch

.Switch - Interruptores de alternancia (envolvedor)
.SwitchRoot - Control de switch (pista)
.SwitchThumb - Pulgar del switch (círculo)
.SwitchIcon - Iconos del switch (marca/cruz)
.SwitchRoot--checked - Estado marcado de la pista del switch
.SwitchThumb--checked - Estado marcado del pulgar del switch

Radio card

.RadioCard - Tarjeta envolvente de un elemento de tarjeta de radio
.RadioCard--checked - Estado marcado de la tarjeta de radio
.RadioCardButton - El elemento de botón de radio dentro de una tarjeta de radio
.RadioCardButton--checked - Estado marcado del botón de tarjeta de radio
.RadioCardIndicator - El punto indicador interno dentro de una tarjeta de radio
.RadioCardIndicator--checked - Estado marcado del indicador de tarjeta de radio
.RadioCardTitle - El texto del título dentro de una tarjeta de radio (también hereda de .CardTitle)

Los elementos .RadioCardTitle también tienen la clase .CardTitle, así que estiliza todos los títulos de tarjeta con .CardTitle y sobrescribe lo específico en .RadioCardTitle.

Indicador de pasos

El indicador de pasos muestra el progreso a través de formularios de varios pasos.

.StepIndicatorContainer - El contenedor que envuelve todos los indicadores de paso
.StepIndicator - Elemento de indicador de paso individual
.StepIndicator--active - El paso actualmente activo
.StepIndicator--completed - Pasos que se han completado
.StepIndicator--pending - Pasos que aún no se han alcanzado
.StepIndicatorLine - La línea de conexión entre pasos
.StepIndicatorLine--top - El segmento de línea encima de un indicador de paso
.StepIndicatorLine--bottom - El segmento de línea debajo de un indicador de paso
.StepIndicatorIcon - Icono mostrado dentro de un indicador de paso (para pasos completados)
.StepIndicatorDot - El marcador de punto en un indicador de paso
.StepIndicatorNumber - El número de paso mostrado en el indicador

Retroalimentación

Loader

.Loader - Indicadores de carga

Tooltip

.TooltipContent - Popover de contenido de un tooltip

Alert

.Alert - Cajas de alerta
.Alert--error - Variante de alerta de error
.Alert--warning - Variante de alerta de advertencia
.Alert--info - Variante de alerta de información
.Alert--success - Variante de alerta de éxito
.AlertIcon - El icono dentro de una alerta
.AlertContent - El área de contenido/texto dentro de una alerta

Chip

.Chip - Chips/Etiquetas
.Chip--info - Variante de chip de información
.Chip--green - Variante de chip verde
.Chip--red - Variante de chip rojo
.Chip--amber - Variante de chip ámbar

Componentes de consentimiento

Las siguientes reglas son específicas del widget de consentimiento y permiten personalizar elementos de UI relacionados con consentimientos:

CategoryTag

.CategoryTag - Identificador de categoría de uso de datos (ej. "Compartir datos con terceros"). Aparece sobre las descripciones de categoría en vistas de consentimiento expandidas.

Badge

.Badge - Etiqueta de obligatorio/opcional que aparece en los elementos de consentimiento.

Estas reglas específicas de consentimiento solo están disponibles en el widget de consentimiento y no tendrán efecto en otros widgets como el del centro de privacidad.

Configuración

Ajusta el comportamiento de los componentes usando el objeto config.

interface Config {
  helperTextPosition?: 'top' | 'bottom';
  hintIcon?: string;
  icon?: {
    weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
    size?: number;
    dataUseVariant?: 'duotone' | 'outline' | 'solid';
  };
  iconRules?: Record<string, { weight?: IconWeight; size?: number }>;
  mainPageColumns?: 1 | 2 | 3 | 4;
  brandTheme?: 'default' | 'dark' | 'light';
}

Propiedades de configuración

Propiedad	Descripción	Por defecto
`helperTextPosition`	Posición del texto de ayuda/descripción relativa a las entradas del formulario	`"bottom"`
`hintIcon`	Nombre del icono para tooltips de ayuda/pista en etiquetas de entrada	`"Question"`
`icon.weight`	Variante de peso/estilo del icono global	`"regular"`
`icon.size`	Tamaño predeterminado del icono global en píxeles	`24`
`icon.dataUseVariant`	Variante de icono para iconos de uso de datos en gestión de consentimientos (`duotone`, `outline`, `solid`)	Por defecto de la configuración de la empresa
`iconRules`	Sobrescrituras de estilo de icono por componente	`{}`
`mainPageColumns`	Número de columnas en la cuadrícula de tarjetas de funciones del Centro de Privacidad (1-4)	`2`
`consentManagementColumns`	Número de columnas en la cuadrícula de tarjetas de la sección de gestión de consentimientos (1-4)	`2`
`brandTheme`	Variante de tema para elementos de marca como el pie de página (`default`, `dark`, `light`)	`"default"`

Iconos

Soyio usa Phosphor Icons, una familia de iconos flexible con múltiples variantes de peso. Personaliza la apariencia del icono a nivel global con la configuración config.icon, o sobrescribe iconos para componentes específicos con config.iconRules.

Pesos de icono disponibles

Peso	Descripción
`thin`	Ancho de trazo más delgado
`light`	Ancho de trazo ligero
`regular`	Ancho de trazo predeterminado
`bold`	Ancho de trazo en negrita
`fill`	Iconos rellenos/sólidos
`duotone`	Iconos de dos tonos con opacidad

Ejemplo de icono global

const appearance = {
  config: {
    icon: {
      weight: "bold",
      size: 20,
    },
  },
};

Sobrescrituras de icono por componente

Usa iconRules para personalizar iconos para componentes específicos. La clave es el nombre del componente (ej., Alert, Switch) o una clave específica de variante (ej., Alert.error):

Nota

Para reglas de icono específicas de variante, usa notación de punto (Alert.error) en lugar de la sintaxis CSS de doble guión (Alert--error).

const appearance = {
  config: {
    icon: {
      weight: "regular", // Predeterminado global
    },
    iconRules: {
      Alert: { weight: "fill" },           // Todas las alertas usan iconos rellenos
      Switch: { weight: "bold", size: 16 }, // Los iconos de switch son en negrita y más pequeños
      "Alert.error": { weight: "fill" },    // Alertas de error específicamente
    },
  },
};

Personalización del icono de pista

El icono de pista aparece junto a las etiquetas de entrada cuando hay un tooltip/pista disponible. Cambia qué icono se muestra con hintIcon:

Nombre del icono	Descripción
`Question`	Signo de interrogación en círculo (predeterminado)
`Info`	Icono de información "i"
`QuestionMark`	Signo de interrogación simple
`Warning`	Icono de advertencia/exclamación

const appearance = {
  config: {
    hintIcon: "Info", // Usar icono de información en lugar de signo de interrogación
  },
};

También estiliza el icono de pista usando la regla .HintIcon.

Ejemplo visual del hint icon en un input

Ejemplo de configuración completa

Este ejemplo muestra cómo combinar temas, variables, reglas y configuración para personalizar completamente la apariencia de los componentes. Usa esta configuración tanto en el Centro de Privacidad como en el módulo de Consentimiento.

const appearance = {
  theme: "soyio",
  mode: "auto",
  variables: {
    fontFamily: "system-ui, sans-serif",
    colorPrimary: "#f54c27",
    colorSecondary: "#f54c27",
    colorBackground: "#0f172a",
    colorText: "#f8fafc",
    colorTextSecondary: "#cbd5e1",
    borderRadius: "0.5rem",
    borderWidth: "2px",
    borderStyle: "solid",
  },
  rules: {
    ".MainContainer": {
      borderWidth: "1px",
      borderColor: "#E5E7EB",
      borderRadius: "0.25rem",
      boxShadow: "0 10px 30px rgba(15, 23, 42, 0.18)",
    },
    ".Card": {
      boxShadow: "0 12px 24px rgba(15, 23, 42, 0.14)",
    },
    ".DialogContent": {
      boxShadow: "0 18px 48px rgba(15, 23, 42, 0.24)",
    },
  },
  config: {
    helperTextPosition: "top"
  },
};

Estructura​

Temas​

Modos de color​

Variables​

Variables disponibles​

Variables tipográficas​

Colores principales​

Colores de superficie​

Colores de borde​

Colores de texto​

Colores de entrada​

Colores de estado​

Otros colores​

Bordes​

Reglas​

Pseudo-clases y pseudo-elementos soportados​

Pseudo-clases soportadas​

Pseudo-elementos soportados​

Ejemplo de uso​

Reglas soportadas​

Tipografía​

Layout​

Inputs​

Botones y enlaces​

Controles de selección​

Indicador de pasos​

Retroalimentación​

Componentes de consentimiento​

Configuración​

Propiedades de configuración​

Iconos​

Pesos de icono disponibles​

Ejemplo de icono global​

Sobrescrituras de icono por componente​

Personalización del icono de pista​

Ejemplo de configuración completa​

Estructura

Temas

Modos de color

Variables

Variables disponibles

Variables tipográficas

Colores principales

Colores de superficie

Colores de borde

Colores de texto

Colores de entrada

Colores de estado

Otros colores

Bordes

Reglas

Pseudo-clases y pseudo-elementos soportados

Pseudo-clases soportadas

Pseudo-elementos soportados

Ejemplo de uso

Reglas soportadas

Tipografía

Layout

Inputs

Botones y enlaces

Controles de selección

Indicador de pasos

Retroalimentación

Componentes de consentimiento

Configuración

Propiedades de configuración

Iconos

Pesos de icono disponibles

Ejemplo de icono global

Sobrescrituras de icono por componente

Personalización del icono de pista

Ejemplo de configuración completa