Tema e controles compartilhados
Configure as cores, a tipografia, as dimensões, as bordas e o comportamento dos campos compartilhados pelos widgets de checkout da DEUNA.
Nesta página
Use a theme para decisões visuais que devem permanecer consistentes em todo o checkout. Configure esses padrões antes de adicionar substituições para uma tela específica.
Cores#
Defina os fundos primário e secundário, o texto principal e as cores do botão primário. Todos os valores de cor devem usar o formato HEX.
{
"theme": {
"colors": {
"primaryTextColor": "#323237",
"backgroundSecondary": "#FFFFFF",
"backgroundPrimary": "#FFFFFF",
"buttonPrimaryFill": "#17171A",
"buttonPrimaryHover": "#69696E",
"buttonPrimaryText": "#FFFFFF",
"buttonPrimaryActive": "#116C8E"
}
}
}Tipografia#
As fontes compatíveis são Heeb, Hind, Lato, Montserrat, Mukta, Nunito, Open Sans, Quicksand, Roboto, Raleway, San Franciscoe Ubuntu. Entre em contato com seu Technical Account Manager (TAM) da DEUNA antes de usar outra fonte.
{
"theme": {
"typography": {
"primaryFontFamily": "Lato"
}
}
}Dimensões dos controles#
Defina borderRadius e height em pixels. A altura padrão dos controles é 40px; use valores de 30px a 60px para preservar a usabilidade.
{
"theme": {
"buttons": {
"borderRadius": "20px",
"height": "50px"
},
"inputs": {
"borderRadius": "50px",
"height": "50px"
}
}
}Bordas dos campos por estado#
| Estado | Significado | Cor padrão |
|---|---|---|
| Desativado | O cliente não pode editar o campo. | #B4B4B7 |
| Ativado | O campo está disponível, mas ainda não recebeu dados. | #D9D9DB |
| Foco | O cliente está interagindo com o campo. | #404046 |
| Preenchido | O campo contém dados válidos. | #8E8E92 |
| Erro | O campo é inválido ou falta um valor obrigatório. | #E11900 |
{
"theme": {
"colors": {
"inputBorder": "#D9D9DB",
"inputBorderError": "#F1998E",
"inputEnhancerFill": "#1AE1D7",
"inputBorderPositive": "#66D19E"
}
}
}Comportamento dos campos#
Configure inputMode para clearable para exibir um controle de redefinição, validated para exibir ícones de sucesso e erro, ou none para não exibir nenhum deles. Os controles de redefinição e validação não podem ser ativados ao mesmo tempo.
{
"theme": {
"inputs": {
"inputMode": "clearable"
}
}
}Para consultar todos os campos e tipos compatíveis, use a referência de propriedades do CustomStyle.