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 Francisco, e 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 |
| Habilitado | 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.