Learn about all available CSS variables for customizing your embedded signing experience
Variable | Description | Default |
---|---|---|
background | Base background color | System default |
foreground | Base text color | System default |
muted | Muted/subtle background color | System default |
mutedForeground | Muted/subtle text color | System default |
popover | Popover/dropdown background color | System default |
popoverForeground | Popover/dropdown text color | System default |
card | Card background color | System default |
cardBorder | Card border color | System default |
cardBorderTint | Card border tint/highlight color | System default |
cardForeground | Card text color | System default |
fieldCard | Field card background color | System default |
fieldCardBorder | Field card border color | System default |
fieldCardForeground | Field card text color | System default |
widget | Widget background color | System default |
widgetForeground | Widget text color | System default |
border | Default border color | System default |
input | Input field border color | System default |
primary | Primary action/button color | System default |
primaryForeground | Primary action/button text color | System default |
secondary | Secondary action/button color | System default |
secondaryForeground | Secondary action/button text color | System default |
accent | Accent/highlight color | System default |
accentForeground | Accent/highlight text color | System default |
destructive | Destructive/danger action color | System default |
destructiveForeground | Destructive/danger text color | System default |
ring | Focus ring color | System default |
warning | Warning/alert color | System default |
Variable | Description | Default |
---|---|---|
radius | Border radius size in REM units | System default |
#ff0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)
red
Class Name | Description |
---|---|
.embed--Root | Main container for the embedded signing experience |
.embed--DocumentContainer | Container for the document and signing widget |
.embed--DocumentViewer | Container for the document viewer |
.embed--DocumentWidget | The signing widget container |
.embed--DocumentWidgetContainer | Outer container for the signing widget, handles positioning |
.embed--DocumentWidgetHeader | Header section of the signing widget |
.embed--DocumentWidgetContent | Main content area of the signing widget |
.embed--DocumentWidgetForm | Form section within the signing widget |
.embed--DocumentWidgetFooter | Footer section of the signing widget |
.embed--WaitingForTurn | Container for the waiting screen when it’s not the user’s turn to sign |
.embed--DocumentCompleted | Container for the completion screen after signing |
.field--FieldRootContainer | Base container for document fields (signatures, text, checkboxes, etc.) |
Data Attribute | Values | Description |
---|---|---|
[data-field-type] | SIGNATURE , TEXT , CHECKBOX , RADIO , etc. | The type of field |
[data-inserted] | true , false | Whether the field has been filled |
[data-validate] | true , false | Whether the field is being validated |