Theme and shared controls
Configure the colors, typography, dimensions, borders, and input behavior shared by DEUNA checkout widgets.
Use the theme object for visual decisions that should remain consistent across the checkout. Configure these defaults before adding overrides for an individual screen.
Colors#
Set the primary and secondary backgrounds, main text, and primary-button colors. All color values must use HEX format.
{
"theme": {
"colors": {
"primaryTextColor": "#323237",
"backgroundSecondary": "#FFFFFF",
"backgroundPrimary": "#FFFFFF",
"buttonPrimaryFill": "#17171A",
"buttonPrimaryHover": "#69696E",
"buttonPrimaryText": "#FFFFFF",
"buttonPrimaryActive": "#116C8E"
}
}
}Typography#
Supported typefaces are Heeb, Hind, Lato, Montserrat, Mukta, Nunito, Open Sans, Quicksand, Roboto, Raleway, San Francisco, and Ubuntu. Contact your DEUNA Technical Account Manager (TAM) before using another typeface.
{
"theme": {
"typography": {
"primaryFontFamily": "Lato"
}
}
}Control dimensions#
Define borderRadius and height in pixels. The default control height is 40px; use values from 30px through 60px to preserve usability.
{
"theme": {
"buttons": {
"borderRadius": "20px",
"height": "50px"
},
"inputs": {
"borderRadius": "50px",
"height": "50px"
}
}
}Input borders by state#
| State | Meaning | Default color |
|---|---|---|
| Disabled | The customer cannot edit the field. | #B4B4B7 |
| Enabled | The field is available but has not received input. | #D9D9DB |
| Focus | The customer is interacting with the field. | #404046 |
| Filled | The field contains valid data. | #8E8E92 |
| Error | The field is invalid or a required value is missing. | #E11900 |
{
"theme": {
"colors": {
"inputBorder": "#D9D9DB",
"inputBorderError": "#F1998E",
"inputEnhancerFill": "#1AE1D7",
"inputBorderPositive": "#66D19E"
}
}
}Input behavior#
Set inputMode to clearable to display a reset control, validated to display success and error icons, or none to display neither. Reset and validation controls cannot be enabled together.
{
"theme": {
"inputs": {
"inputMode": "clearable"
}
}
}For every supported field and type, use the CustomStyle property reference.