Variables CSS

Los clientes de la plataforma tienen acceso a un conjunto completo de variables CSS que pueden usarse para personalizar la apariencia de la experiencia de firma integrada. Estas variables controlan todo, desde colores hasta espaciado, y pueden usarse para coincidir con el sistema de diseño de tu aplicación.

Variables Disponibles

Colores

Variable	Descripción	Predeterminado
background	Color de fondo base	Por defecto del sistema
foreground	Color de texto base	Por defecto del sistema
muted	Color de fondo tenue/sutil	Por defecto del sistema
mutedForeground	Color de texto tenue/sutil	Por defecto del sistema
popover	Color de fondo de popover/dropdown	Por defecto del sistema
popoverForeground	Color de texto de popover/dropdown	Por defecto del sistema
card	Color de fondo de tarjeta	Por defecto del sistema
cardBorder	Color de borde de tarjeta	Por defecto del sistema
cardBorderTint	Color de borde resaltado de tarjeta	Por defecto del sistema
cardForeground	Color de texto de tarjeta	Por defecto del sistema
fieldCard	Color de fondo de tarjeta de campo	Por defecto del sistema
fieldCardBorder	Color de borde de tarjeta de campo	Por defecto del sistema
fieldCardForeground	Color de texto de tarjeta de campo	Por defecto del sistema
widget	Color de fondo de widget	Por defecto del sistema
widgetForeground	Color de texto de widget	Por defecto del sistema
border	Color de borde predeterminado	Por defecto del sistema
input	Color de borde de campo de entrada	Por defecto del sistema
primary	Color de acción/botón principal	Por defecto del sistema
primaryForeground	Color de texto de acción/botón principal	Por defecto del sistema
secondary	Color de acción/botón secundario	Por defecto del sistema
secondaryForeground	Color de texto de acción/botón secundario	Por defecto del sistema
accent	Color de acento/resaltado	Por defecto del sistema
accentForeground	Color de texto de acento/resaltado	Por defecto del sistema
destructive	Color de acción destructiva/peligrosa	Por defecto del sistema
destructiveForeground	Color de texto destructivo/peligroso	Por defecto del sistema
ring	Color del anillo de enfoque	Por defecto del sistema
warning	Color de advertencia/alerta	Por defecto del sistema

Espaciado y Diseño

Variable	Descripción	Predeterminado
radius	Tamaño del radio del borde en unidades REM	Por defecto del sistema

Ejemplo de Uso

Así es como usar estas variables en tu implementación de integración:

const cssVars = {
  // Colores
  background: '#ffffff',
  foreground: '#000000',
  primary: '#0000ff',
  primaryForeground: '#ffffff',
  accent: '#4f46e5',
  destructive: '#ef4444',

  // Espaciado
  radius: '0.5rem'
};

//
<legaldoc-embed-sign-document
  token={token}
  cssVars={cssVars}
/>

Formato de Color

Los colores pueden especificarse en cualquier formato de color CSS válido:

• Hexadecimal: #ff0000
• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%)
• Colores con nombre: red

Los colores se convertirán automáticamente al formato apropiado internamente.

Mejores Prácticas

1. Mantener Contraste: Al personalizar colores, asegúrate de que haya suficiente contraste entre los colores de fondo y primer plano para la accesibilidad.
2. Probar Modo Oscuro: Si no has deshabilitado el modo oscuro, prueba tus variables de color tanto en modo claro como oscuro.
3. Usar Colores de Marca: Alinea los colores primarios y de acento con el esquema de colores de tu marca para una apariencia cohesiva.
4. Radio Consistente: Usa un valor de radio de borde consistente que coincida con el sistema de diseño de tu aplicación.

Objetivos de Clase CSS

Además de las variables CSS, los componentes específicos en la experiencia integrada pueden ser dirigidos usando clases CSS para un estilo más granular:

Clases de Componentes

Nombre de Clase	Descripción
.embed--Root	Contenedor principal para la experiencia de firma integrada
.embed--DocumentContainer	Contenedor para el documento y widget de firma
.embed--DocumentViewer	Contenedor para el visor de documentos
.embed--DocumentWidget	Contenedor del widget de firma
.embed--DocumentWidgetContainer	Contenedor externo para el widget de firma, maneja el posicionamiento
.embed--DocumentWidgetHeader	Sección de encabezado del widget de firma
.embed--DocumentWidgetContent	Área de contenido principal del widget de firma
.embed--DocumentWidgetForm	Sección de formulario dentro del widget de firma
.embed--DocumentWidgetFooter	Sección de pie de página del widget de firma
.embed--WaitingForTurn	Contenedor para la pantalla de espera cuando no es el turno del usuario
.embed--DocumentCompleted	Contenedor para la pantalla de finalización después de firmar
.field--FieldRootContainer	Contenedor base para campos de documento (firmas, texto, casillas, etc.)

Los componentes de campo también exponen varios atributos de datos que pueden usarse para dar estilo a diferentes estados:

Atributo de Datos	Valores	Descripción
[data-field-type]	SIGNATURE, TEXT, CHECKBOX, RADIO, etc.	El tipo de campo
[data-inserted]	true, false	Si el campo ha sido llenado
[data-validate]	true, false	Si el campo está siendo validado

Ejemplo de Estilo de Campo

/* Estilo para todos los contenedores de campo */
.field--FieldRootContainer {
  transition: all 200ms ease;
}

/* Estilo para tipos de campo específicos */
.field--FieldRootContainer[data-field-type='SIGNATURE'] {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Estilo para campos insertados */
.field--FieldRootContainer[data-inserted='true'] {
  background-color: var(--primary);
  opacity: 0.2;
}

/* Estilo para campos siendo validados */
.field--FieldRootContainer[data-validate='true'] {
  border-color: orange;
}

Ejemplo de Uso

/* Estilos personalizados para el widget de documento */
.embed--DocumentWidget {
  background-color: #ffffff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Estilos personalizados para la pantalla de espera */
.embed--WaitingForTurn {
  background-color: #f9fafb;
  padding: 2rem;
}

/* Ajustes responsivos para el contenedor de documento */
@media (min-width: 768px) {
  .embed--DocumentContainer {
    gap: 2rem;
  }
}