# Variables CSS > Personaliza la apariencia de la experiencia de firma integrada usando 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: ```jsx const cssVars = { // Colores background: '#ffffff', foreground: '#000000', primary: '#0000ff', primaryForeground: '#ffffff', accent: '#4f46e5', destructive: '#ef4444', // Espaciado radius: '0.5rem' }; // ``` ## 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 ```css /* 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 ```css /* 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; } } ```