# Personalização e Branding do Hosted Widget (OFDA)

Com o Hosted Widget da Belvo, você pode personalizar e aplicar sua marca ao widget de duas maneiras: através da solicitação do token de acesso e através da ferramenta de dashboard Custom Widget.

## Configurar via solicitação de token de acesso

As configurações abaixo são enviadas como JSON na mesma chamada de backend que sua solicitação para gerar um `access_token`. Para um exemplo completo de como isso se parece, veja o exemplo de código abaixo.

### Adicionar um ícone da empresa

Você pode adicionar o ícone da sua empresa ao widget para que ele fique mais alinhado com a sua marca. Quando você adiciona o ícone da sua empresa, ele aparece na seguinte tela:

- início inicial do widget


Certifique-se de que seu ícone tenha dimensões quadradas, esteja no formato SVG, tenha um fundo transparente e não contenha espaços em branco ao redor. Se o seu ícone não seguir essas especificações, o widget da Belvo exibirá o seguinte ícone:

Exemplo de ícone da empresa
**Instruções**
Para adicionar um ícone personalizado da empresa, basta adicionar a URL para sua imagem SVG na chave `company_icon`.

```json Exemplo de Ícone da Empresa
{
  "widget": {
    "branding": {
      ...
      "company_icon": "https://mysite.com/icon.svg",
      ...
        }
     }
}
```

### Adicionar o logotipo da empresa

Você pode adicionar o logotipo da sua empresa ao widget para que ele fique mais alinhado com a sua marca. Quando você adiciona o logotipo da sua empresa, ele aparece nas seguintes telas:

- enquanto a conta está sendo vinculada
- uma vez que uma conta é vinculada com sucesso
- quando um usuário opta por cancelar o processo de vinculação


Certifique-se de que seu logotipo esteja no formato SVG, tenha um fundo transparente e não contenha espaços em branco ao redor. Para melhor visibilidade e escalabilidade, sugerimos que você use um logotipo horizontal (veja o exemplo no canto superior esquerdo da imagem abaixo).

**Instruções**
Para adicionar um logotipo personalizado da empresa, basta adicionar a URL da sua imagem SVG à chave `company_logo`.

```json Exemplo de Logotipo da Empresa
{
  "widget": {
    "branding": {
      ...
      "company_logo": "https://mysite.com/logo.svg",
      ...
        }
     }
}
```

### Adicione o nome da sua empresa

Você pode adicionar o nome da sua empresa para ser exibido quando o widget iniciar pela primeira vez. Por padrão, será exibido apenas "Conecte sua conta". Quando você adiciona o nome da sua empresa, a mensagem seguirá o formato "[company_name] usa Belvo para conectar sua conta".

Por favor, note que apenas o nome da empresa é personalizável na frase introdutória

**Instruções**

Para adicionar o nome da sua empresa, basta adicioná-lo à chave `company_name`.

```json Company Name
{
  "widget": {
    "branding": {
      ...
      "company_name": "ACME",
      ...
        }
     }
}
```

### Exibir logo do Belvo no meio

Você pode optar por exibir o logo do Belvo entre o logo da sua empresa e o logo da instituição na tela inicial de conexão. Isso ajuda a reforçar que o Belvo está facilitando a conexão segura. Por padrão, essa opção está configurada como `false`, e apenas o logo da sua empresa e o logo da instituição são exibidos.

Quando ativado, o layout dos logos muda para: **[Logo da Sua Empresa]** → **[Logo do Belvo]** → **[Logo da Instituição]**

**Instruções**

Para exibir o logo do Belvo no meio da tela inicial de conexão, defina o parâmetro `show_belvo_middle_logo` como `true`.

```json Exibir Logo do Belvo no Meio
{
  "widget": {
    "branding": {
      ...
      "show_belvo_middle_logo": true,
      ...
    }
  }
}
```

### Mensagens personalizadas para o propósito de consentimento

Você pode modificar o texto que descreve o propósito de solicitação dos dados do seu usuário (*Propósito do compartilhamento*) para melhor descrever seu caso de uso.

Por padrão, o texto exibido é: *Soluções financeiras personalizadas oferecidas por meio de recomendações sob medida, visando melhores ofertas de produtos financeiros e de crédito.*

**Instruções**

Para personalizar o texto que descreve o propósito de solicitar acesso aos dados do seu usuário, basta adicionar seu texto (máximo de 600 caracteres) à chave `purpose`.

```json Consent Purpose
{
  "widget": {
    "consent": {
       "purpose": "Seu texto personalizado aqui. Máximo de 600 caracteres",
       ...
    }
  }   
}
```

### Definir duração padrão do consentimento

Você pode especificar a duração padrão do consentimento (em dias) que será pré-selecionada no menu suspenso da tela de consentimento. Isso ajuda a otimizar a experiência do usuário ao apresentar o período de consentimento preferido como a opção padrão.

O backend suporta os seguintes valores de duração de consentimento:

| Rótulo | Valor (dias) |
|  --- | --- |
| Indeterminado | `null` |
| 12 meses | `366` |
| 9 meses | `275` |
| 6 meses | `183` |
| 3 meses | `92` |


**Como funciona:**

- Se você fornecer um dos valores válidos (`366`, `275`, `183` ou `92`), essa opção será pré-selecionada no menu suspenso de duração do consentimento.
- Se você não fornecer um valor ou fornecer um valor diferente, "Indeterminado" será a opção pré-selecionada.
- A ordem da lista suspensa permanece inalterada; apenas a opção pré-selecionada muda.
- O widget aceita qualquer número inteiro positivo, mas apenas os valores listados acima correspondem às opções disponíveis de duração do consentimento.


**Instruções**

Para definir a duração padrão do consentimento, adicione o número de dias à chave `default_consent_duration_days` dentro do objeto `consent`.

```json Default Consent Duration
{
  "widget": {
    "consent": {
       "default_consent_duration_days": 183
    }
  }
}
```

Opcional e Independente
O parâmetro `default_consent_duration_days` é opcional e independente do parâmetro `purpose`. Você pode usá-los juntos ou separadamente, conforme suas necessidades.

Valores Suportados
Para que a duração do consentimento seja devidamente pré-selecionada, use um destes valores: `366` (12 meses), `275` (9 meses), `183` (6 meses) ou `92` (3 meses). Qualquer outro valor resultará na pré-seleção de "Indeterminado".

### Ocultar mensagem na tela de seleção de instituição

Você pode optar por ocultar a mensagem "*Mais de 5 milhões de usuários já conectaram com segurança suas contas.*" que aparece quando o usuário seleciona sua instituição no widget. Por padrão, essa mensagem é visível no widget (`true`).

**Instruções**

Para ocultar a mensagem na tela de seleção de instituição, basta definir o parâmetro `social_proof` como `false`.

```json Social Proof
{
  "widget": {
    "branding": {
      ...
      "social_proof": false,
      ...
        }
     }
}
```

## Configurar via a ferramenta de dashboard do Custom Widget

As variáveis CSS são configuradas visualmente através da ferramenta **Custom Widget** no seu painel do Belvo.

**Instruções**

No seu painel do Belvo, vá para **Developer Tools > Custom Widget**, e então na seção **Widget Configuration** defina:

1. **Locale**: o idioma de exibição do widget: `en` (Inglês), `es` (Espanhol) ou `pt-BR` (Português).
2. **Integration Type**: `Open Finance` para o widget do Open Finance Brasil (OFDA), ou `Credentials` para o widget multi-regional.
3. **Color scheme**: Claro ou Escuro. Variáveis CSS específicas para o modo escuro usam o sufixo `-dark` — por exemplo, `--color-primary-base-dark` define a cor primária especificamente para o modo escuro.
4. **Country Codes**: quais países as instituições aparecem na pré-visualização do widget.
5. **Institution Types**: quais tipos de instituições aparecem na pré-visualização: `Fiscal` (conexões com autoridades fiscais), `Retail` (banco pessoal), `Business` (banco corporativo) ou `Employment` (sistemas de empregador/folha de pagamento).


Painel de Configuração do Widget com campos numerados: Locale, Integration Type, Color scheme, Country Codes, Institution Types, e Load Widget
Depois de clicar em **Load Widget**, você poderá acessar o painel de **CSS Variables**. Pesquise ou use os filtros de categoria (Fonte, Navbar, Botão, Banner, Texto de Entrada e mais) para encontrar uma variável, e então insira um valor. A **Widget Preview** à direita atualiza ao vivo enquanto você digita, para que você possa verificar cada alteração antes de finalizá-la.

Painel de Variáveis CSS com campos de variáveis editáveis ao lado de uma Pré-visualização do Widget ao vivo
Clique em **Export Configuration**. Isso cria automaticamente um ticket de suporte no Zendesk com seu JSON de personalização anexado, que a equipe do Belvo usa para aplicá-lo à sua conta. Use **Import** para carregar uma configuração exportada anteriormente de volta na ferramenta se você quiser continuar editando-a.

Esta página lista os parâmetros `css_key` disponíveis, seus valores padrão e o que cada um controla. Para qualquer variável com um equivalente `-dark`, a chave `-dark` define a substituição especificamente para o modo escuro. Veja a seção acima para saber como aplicá-los.

### Cores Primárias

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--color-primary-base` | `#0663f9` | Define a cor primária para botões, caixas de seleção e a barra de progresso. |
| `--color-primary-base-dark` | `#0663f9` | Define a cor primária no modo escuro. |


### Tipografia

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--font-family-primary` | `Geist` | Define a família de fontes primária usada em todo o widget. Fonte de fallback quando nenhuma fonte personalizada é fornecida. |
| `--font-family-regular-file-name` | `—` | Arquivo de fonte a ser usado para texto de peso regular (400). Sem padrão — usado apenas se uma fonte personalizada for fornecida. |
| `--font-family-semibold-file-name` | `—` | Arquivo de fonte a ser usado para texto de peso semibold (600). Sem padrão — usado apenas se uma fonte personalizada for fornecida. |
| `--font-family-bold-file-name` | `—` | Arquivo de fonte a ser usado para texto de peso bold (700). Sem padrão — usado apenas se uma fonte personalizada for fornecida. |


### Links

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--link-font-color` | `#0663f9` | Define a cor da fonte para hiperlinks (por exemplo, o link da política de privacidade). |
| `--link-font-color-dark` | `#0663f9` | Define a cor da fonte para hiperlinks no modo escuro. |
| `--link-text-decoration` | `none` | Define a decoração do texto (por exemplo, sublinhado) para hiperlinks. |


### Texto em Nível de Página

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--text-title-color` | `#161a1d` | Define a cor dos títulos em nível de página. |
| `--text-title-color-dark` | `#eef3f8` | Define a cor dos títulos em nível de página no modo escuro. |
| `--text-title-font-size` | `1.125rem` | Define o tamanho da fonte dos títulos em nível de página. |
| `--text-title-line-height` | `1.75rem (26px)` | Define a altura da linha dos títulos em nível de página. |
| `--text-body-color` | `#414d58` | Define a cor do texto do corpo em nível de página. |
| `--text-body-color-dark` | `#c2cfd9` | Define a cor do texto do corpo em nível de página no modo escuro. |
| `--text-body-font-size` | `1rem` | Define o tamanho da fonte do texto do corpo em nível de página. |
| `--text-body-line-height` | `1.5rem (24px)` | Define a altura da linha do texto do corpo em nível de página. |


### Barra de Navegação

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--nav-bar-title-color` | `#161a1d` | Define a cor do título da barra de navegação. |
| `--nav-bar-title-color-dark` | `#eef3f8` | Define a cor do título da barra de navegação no modo escuro. |
| `--nav-bar-title-align` | `center` | Especifica o alinhamento do título da barra de navegação. As posições possíveis são `center`, `start` e `end`. |
| `--nav-bar-icon-color` | `#161a1d` | Define a cor dos ícones da barra de navegação. |
| `--nav-bar-icon-color-dark` | `#eef3f8` | Define a cor dos ícones da barra de navegação no modo escuro. |
| `--nav-bar-background-color` | `#ffffff` | Define a cor de fundo da barra de navegação. |
| `--nav-bar-background-color-dark` | `#011432` | Define a cor de fundo da barra de navegação no modo escuro. |
| `--nav-bar-box-shadow` | `none` | Adiciona um efeito de sombra à barra de navegação. |
| `--nav-bar-border-color` | `#f0f2f4` | Especifica a cor da borda da barra de navegação. |
| `--nav-bar-border-color-dark` | `#2b3d54` | Especifica a cor da borda da barra de navegação no modo escuro. |
| `--nav-bar-left-icon` | `arrow_back` | Define um ícone personalizado para a ação à esquerda da barra de navegação (por exemplo, seta de voltar). |
| `--nav-bar-left-icon-dark` | `arrow_back` | Define um ícone personalizado para a ação à esquerda no modo escuro. |
| `--nav-bar-right-icon` | `—` | Define um ícone personalizado para a ação à direita da barra de navegação (por exemplo, ajuda). Sem padrão — definido via uma propriedade do componente, não pelo tema. |
| `--nav-bar-right-icon-dark` | `—` | Define um ícone personalizado para a ação à direita no modo escuro. Sem padrão — definido via uma propriedade do componente, não pelo tema. |
| `--nav-bar-icon-size` | `24px` | Define o tamanho dos ícones da barra de navegação. |


### Botões

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--text-button-font-color` | `—` | Define a cor da fonte para botões apenas com texto (não preenchidos). |
| `--text-button-font-color-dark` | `—` | Define a cor da fonte para botões apenas com texto (não preenchidos) no modo escuro. |
| `--button-font-color` | `#ffffff` | Define a cor da fonte para botões. |
| `--button-font-color-dark` | `—` | Define a cor da fonte para botões no modo escuro. |
| `--button-font-color-disabled` | `#ffffff` | Define a cor da fonte para botões desativados. |
| `--button-font-color-disabled-dark` | `—` | Define a cor da fonte para botões desativados no modo escuro. |
| `--button-border-radius` | `8px` | Especifica o raio da borda dos botões. |
| `--button-background-color-disabled` | `#009EE3` | Define a cor de fundo para botões desativados. |
| `--button-background-color-disabled-dark` | `—` | Define a cor de fundo para botões desativados no modo escuro. |
| `--button-opacity-disabled` | `0.2` | Especifica a opacidade para botões desativados. |


### Banners

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--banner-border-radius` | `8px` | Especifica o raio da borda dos banners. |
| `--banner-background-color` | `#ffffff` | Define a cor de fundo dos banners. |
| `--banner-background-color-dark` | `#011432` | Define a cor de fundo dos banners no modo escuro. |
| `--banner-background-color-error` | `#ffffff` | Define a cor de fundo para banners de erro. |
| `--banner-background-color-error-dark` | `#011432` | Define a cor de fundo para banners de erro no modo escuro. |
| `--banner-background-color-info` | `#ffffff` | Define a cor de fundo para banners de informação. *(não estava na lista original de 183 itens — adicionado desde que já foi lançado)* |
| `--banner-background-color-info-dark` | `#011432` | Define a cor de fundo para banners de informação no modo escuro. *(não estava na lista original de 183 itens — adicionado desde que já foi lançado)* |
| `--banner-background-color-success` | `#ffffff` | Define a cor de fundo para banners de sucesso. *(não estava na lista original de 183 itens — adicionado desde que já foi lançado)* |
| `--banner-background-color-success-dark` | `#011432` | Define a cor de fundo para banners de sucesso no modo escuro. *(não estava na lista original de 183 itens — adicionado desde que já foi lançado)* |
| `--banner-background-color-warning` | `#ffffff` | Define a cor de fundo para banners de aviso. *(não estava na lista original de 183 itens — adicionado desde que já foi lançado)* |
| `--banner-background-color-warning-dark` | `#011432` | Define a cor de fundo para banners de aviso no modo escuro. *(não estava na lista original de 183 itens — adicionado desde que já foi lançado)* |
| `--banner-border-color` | `#e2e6e9` | Especifica a cor da borda dos banners. |
| `--banner-border-color-dark` | `#2b3d54` | Especifica a cor da borda dos banners no modo escuro. |
| `--banner-border-color-left-error` | `#f90e06` | Cor da borda esquerda para banners de erro. |
| `--banner-border-color-left-error-dark` | `#e04a39` | Cor da borda esquerda para banners de erro no modo escuro. |
| `--banner-border-color-left-success` | `#59c837` | Cor da borda esquerda para banners de sucesso. |
| `--banner-border-color-left-success-dark` | `#59c837` | Cor da borda esquerda para banners de sucesso no modo escuro. |
| `--banner-border-color-left-info` | `#0663f9` | Cor da borda esquerda para banners de informação. |
| `--banner-border-color-left-info-dark` | `#0663f9` | Cor da borda esquerda para banners de informação no modo escuro. |
| `--banner-border-color-left-warning` | `#f9c806` | Cor da borda esquerda para banners de aviso. |
| `--banner-border-color-left-warning-dark` | `#f9c806` | Cor da borda esquerda para banners de aviso no modo escuro. |
| `--banner-border-left-width` | `0.25rem` | Controla a espessura da borda esquerda para variantes de banner. Defina como `0` para remover a borda esquerda e confiar apenas na cor de fundo. |
| `--banner-icon-color-error` | `#f90e06` | Cor do ícone para banners de erro. |
| `--banner-icon-color-error-dark` | `#e04a39` | Cor do ícone para banners de erro no modo escuro. |
| `--banner-icon-color-success` | `#59c837` | Cor do ícone para banners de sucesso. |
| `--banner-icon-color-success-dark` | `#59c837` | Cor do ícone para banners de sucesso no modo escuro. |
| `--banner-icon-color-info` | `#0663f9` | Cor do ícone para banners de informação. |
| `--banner-icon-color-info-dark` | `#0663f9` | Cor do ícone para banners de informação no modo escuro. |
| `--banner-icon-color-warning` | `#f9c806` | Cor do ícone para banners de aviso. |
| `--banner-icon-color-warning-dark` | `#f9c806` | Cor do ícone para banners de aviso no modo escuro. |
| `--banner-icon-size` | `24px` | Define o tamanho do ícone para ícones de banner. |
| `--banner-icon-name-error` | `—` | Define o ícone usado para banners de erro. Sem padrão — nenhum ícone mostrado a menos que fornecido. |
| `--banner-icon-name-success` | `—` | Define o ícone usado para banners de sucesso. Sem padrão — nenhum ícone mostrado a menos que fornecido. |
| `--banner-icon-name-info` | `—` | Define o ícone usado para banners de informação. Sem padrão — nenhum ícone mostrado a menos que fornecido. |
| `--banner-icon-name-warning` | `—` | Define o ícone usado para banners de aviso. Sem padrão — nenhum ícone mostrado a menos que fornecido. |
| `--banner-title-color` | `#161a1d` | Define a cor dos títulos dos banners. |
| `--banner-title-color-dark` | `#eef3f8` | Define a cor dos títulos dos banners no modo escuro. |
| `--banner-body-color` | `#576775` | Especifica a cor do texto do corpo dos banners. |
| `--banner-body-color-dark` | `#a6b4c3` | Especifica a cor do texto do corpo dos banners no modo escuro. |
| `--banner-title-font-weight` | `600` | Define o peso da fonte dos títulos dos banners. |
| `--banner-body-font-weight` | `600` | Especifica o peso da fonte do texto do corpo dos banners. |
| `--banner-box-shadow` | `0 2px 4px 0 rgb(0 0 0 / 5%)` | Adiciona um efeito de sombra aos banners. |


### Campos de Entrada

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--input-text-font-size` | `1rem` | Define o tamanho da fonte para o texto do campo de entrada. |
| `--input-text-font-color` | `#161a1d` | Define a cor da fonte para o texto do campo de entrada. |
| `--input-text-font-color-dark` | `#eef3f8` | Define a cor da fonte para o texto do campo de entrada no modo escuro. |
| `--input-text-border-radius` | `8px` | Define o raio da borda para os campos de entrada. |
| `--input-text-border-color` | `#161a1d` | Especifica a cor da borda para os campos de entrada. |
| `--input-text-border-color-dark` | `#2b3d54` | Especifica a cor da borda para os campos de entrada no modo escuro. |
| `--input-text-outline-border-color` | `#0663f980` | Define a cor da borda de contorno para os campos de entrada (como um efeito de hover). |
| `--input-text-outline-border-color-dark` | `#0663f980` | Define a cor da borda de contorno para os campos de entrada no modo escuro. |
| `--input-text-border-color-error` | `#f90e06` | Define a cor da borda para os campos de entrada em estado de erro. |
| `--input-text-border-color-error-dark` | `#e04a39` | Define a cor da borda para os campos de entrada em estado de erro, no modo escuro. |
| `--input-text-placeholder-color` | `#8a9aa8` | Define a cor para o texto do placeholder. |
| `--input-text-placeholder-color-dark` | `#2b3d54` | Define a cor para o texto do placeholder no modo escuro. |
| `--input-text-label-color` | `#414d58` | Define a cor do rótulo para os campos de entrada. |
| `--input-text-label-color-dark` | `#eef3f8` | Define a cor do rótulo para os campos de entrada no modo escuro. |
| `--input-text-label-color-error` | `#f90e06` | Especifica a cor do rótulo para os campos de entrada em estado de erro. |
| `--input-text-label-color-error-dark` | `#e04a39` | Especifica a cor do rótulo para os campos de entrada em estado de erro, no modo escuro. |
| `--input-text-label-variation` | `outlined` | Especifica a variação de posição do rótulo. As opções possíveis são `outlined` e `top`. |
| `--input-text-label-weight` | `600` | Define o peso da fonte para os rótulos dos campos de entrada. |
| `--input-text-label-font-size` | `0.75rem` | Define o tamanho da fonte para os rótulos dos campos de entrada. |
| `--input-text-assistive-color` | `#2b343b` | Define a cor para o texto assistivo (de ajuda) abaixo de um campo de entrada. |
| `--input-text-assistive-color-dark` | `#eef3f8` | Define a cor para o texto assistivo no modo escuro. |
| `--input-text-assistive-color-error` | `#f90e06` | Define a cor para o texto assistivo quando o campo de entrada está em estado de erro. |
| `--input-text-assistive-color-error-dark` | `#e04a39` | Define a cor para o texto assistivo em estado de erro, no modo escuro. |
| `--input-text-assistive-font-weight` | `400` | Define o peso da fonte para o texto assistivo. |
| `--input-text-icon-color` | `#8a9aa8` | Define a cor dos ícones de entrada. |
| `--input-text-icon-color-dark` | `#eef3f8` | Define a cor dos ícones de entrada no modo escuro. |
| `--input-text-icon-opacity` | `—` | Define a opacidade para os ícones do campo de entrada. Sem padrão — atualmente não consumido em CSS. |
| `--input-text-icon-size` | `40px` | Define o tamanho dos ícones do campo de entrada. |
| `--input-text-icon-order` | `1` | Define a ordem de exibição dos ícones dentro de um campo de entrada. |
| `--input-text-password-visible-icon` | `show` | Define o ícone mostrado quando o conteúdo de um campo de senha está visível. |
| `--input-text-password-non-visible-icon` | `hide` | Define o ícone mostrado quando o conteúdo de um campo de senha está oculto. |


### Checkbox

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--checkbox-border-color` | `#161a1d` | Define a cor da borda para checkboxes. |
| `--checkbox-border-color-dark` | `#2b3d54` | Define a cor da borda para checkboxes no modo escuro. |
| `--checkbox-border-radius` | `4px` | Define o raio da borda para checkboxes. |


### Diálogo

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--dialog-title-color` | `#161a1d` | Define a cor dos títulos do diálogo. |
| `--dialog-title-color-dark` | `#eef3f8` | Define a cor dos títulos do diálogo no modo escuro. |
| `--dialog-body-color` | `#8a9aa8` | Define a cor do texto do corpo do diálogo. |
| `--dialog-body-color-dark` | `#6a7e93` | Define a cor do texto do corpo do diálogo no modo escuro. |
| `--dialog-body-font-size` | `1rem` | Define o tamanho da fonte do texto do corpo do diálogo. |
| `--dialog-body-line-height` | `24px` | Define a altura da linha do texto do corpo do diálogo. |


### Abas

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--tab-text-color` | `#0663f9` | Define a cor do texto para as abas. |
| `--tab-text-color-dark` | `#0663f9` | Define a cor do texto para as abas no modo escuro. |
| `--tab-border-color` | `#0663f9` | Especifica a cor da borda na parte inferior das abas. |
| `--tab-border-color-dark` | `#0663f9` | Define a cor da borda na parte inferior das abas no modo escuro. |


### Dropdown

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--dropdown-border-radius` | `8px` | Define o raio da borda para os campos de dropdown. |
| `--dropdown-font-color` | `#161a1d` | Define a cor da fonte para os campos de dropdown. |
| `--dropdown-font-color-dark` | `#eef3f8` | Define a cor da fonte para os campos de dropdown no modo escuro. |
| `--dropdown-label-display` | `visible` | Controla como o rótulo do dropdown é exibido. |


### Lista de Itens

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--item-list-hover-color` | `#f0f2f4` | Define a cor de fundo de um item da lista ao passar o mouse. |
| `--item-list-hover-color-dark` | `#0b1c3c` | Define a cor de fundo de um item da lista ao passar o mouse, no modo escuro. |
| `--item-list-skeleton-color` | `#f0f2f4` | Define a cor do esqueleto de carregamento exibido enquanto uma lista está carregando. |
| `--item-list-skeleton-color-dark` | `#0b1c3c` | Define a cor do esqueleto de carregamento no modo escuro. |
| `--item-list-icon-color` | `#161a1d` | Define a cor dos ícones dentro de um item da lista. |
| `--item-list-icon-color-dark` | `#eef3f8` | Define a cor dos ícones dentro de um item da lista no modo escuro. |
| `--item-list-title-color` | `#161a1d` | Define a cor do título de um item da lista. |
| `--item-list-title-color-dark` | `#eef3f8` | Define a cor do título de um item da lista no modo escuro. |
| `--item-list-body-color` | `#6c8193` | Define a cor do corpo/texto secundário de um item da lista. |
| `--item-list-body-color-dark` | `#dee6ec` | Define a cor do corpo/texto secundário de um item da lista no modo escuro. |


### Accordion

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--accordion-icon-color` | `#161a1d` | Define a cor do ícone de expandir/recolher do accordion. |
| `--accordion-icon-color-dark` | `#eef3f8` | Define a cor do ícone de expandir/recolher do accordion no modo escuro. |
| `--accordion-title-color` | `#161a1d` | Define a cor do título do accordion. |
| `--accordion-title-color-dark` | `#eef3f8` | Define a cor do título do accordion no modo escuro. |


### Overlay, Surface, Divider, Image & Layout

Você pode adicionar uma cor de sobreposição personalizada para quando o widget carregar em sua aplicação desktop. Recomendamos escolher uma cor neutra relacionada à sua marca para manter o contexto ambiental.

Opacidade da sobreposição
Não importa a cor que você escolha, a Belvo define automaticamente a opacidade para 90%. Isso se deve às seguintes práticas recomendadas de UX:

- Com opacidades mais baixas (menos de 70%), os usuários podem ter dificuldade em se concentrar no fluxo, pois terão "ruído visual" no fundo.
- Cores sólidas (opacidade definida em 100%) podem causar uma mudança drástica, resultando em uma experiência desconexa ou não natural.


| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--overlay-background-color` | `#03286380` | Define a cor de fundo da sobreposição mostrada atrás do widget. O padrão é cinza. |
| `--overlay-background-color-dark` | `#03286380` | Define a cor de fundo da sobreposição no modo escuro. |
| `--surface-color` | `#ffffff` | Define a cor base da superfície (fundo) do widget. |
| `--surface-color-dark` | `#011432` | Define a cor base da superfície (fundo) do widget no modo escuro. |
| `--divider-color` | `#e2e6e9` | Define a cor das linhas divisórias. |
| `--divider-color-dark` | `#2b3d54` | Define a cor das linhas divisórias no modo escuro. |
| `--image-border-radius` | `8px` | Define o raio da borda para imagens exibidas dentro do widget. |
| `--layout-side-padding` | `16px` | Define o preenchimento lateral horizontal para o layout do widget. |


### Detalhes do Consentimento

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--consent-details-identification-section-icon` | `article` | Define o ícone para a seção de identificação na tela de detalhes do consentimento. |
| `--consent-details-expiration-section-icon` | `date_range` | Define o ícone para a seção de expiração na tela de detalhes do consentimento. |
| `--consent-details-header-background-color` | `color-mix(in srgb, #0663f9, white 90%) (≈ azul claro)` | Define a cor de fundo do cabeçalho da tela de detalhes do consentimento. |
| `--consent-details-header-background-color-dark` | `color-mix(in srgb, #0663f9, #011432 80%) (≈ azul marinho escuro)` | Define a cor de fundo do cabeçalho da tela de detalhes do consentimento no modo escuro. |


### Resumo do Consentimento

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--consent-summary-identification-section-icon` | `profile_filled` | Define o ícone para a seção de identificação na tela de resumo do consentimento. |
| `--consent-summary-expiration-section-icon` | `date_range` | Define o ícone para a seção de expiração na tela de resumo do consentimento. |
| `--consent-summary-purpose-section-icon` | `badge_check` | Define o ícone para a seção de propósito na tela de resumo do consentimento. |
| `--consent-summary-shared-information-section-icon` | `info` | Define o ícone para a seção de informações compartilhadas na tela de resumo do consentimento. |


### Tela de Carregamento de Consentimento

A tela de carregamento exibida enquanto o consentimento está sendo processado.

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--fetching-consent-title-font-size` | `1.125rem` | Define o tamanho da fonte do título na tela de carregamento de consentimento. |
| `--fetching-consent-title-line-height` | `1.75rem` | Define a altura da linha do título na tela de carregamento de consentimento. |
| `--fetching-consent-body-font-size` | `0.875rem` | Define o tamanho da fonte do texto do corpo na tela de carregamento de consentimento. |
| `--fetching-consent-body-line-height` | `22px` | Define a altura da linha do texto do corpo na tela de carregamento de consentimento. |


### Tela de Redirecionamento

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--redirect-title-font-size` | `—` | Define o tamanho da fonte do título na tela de redirecionamento. Sem padrão em tempo de execução — nenhum consumidor de componente encontrado no código; efetivamente não utilizado/legado. |
| `--redirect-title-line-height` | `—` | Define a altura da linha do título na tela de redirecionamento. Sem padrão em tempo de execução — nenhum consumidor de componente encontrado no código; efetivamente não utilizado/legado. |
| `--redirect-body-font-size` | `—` | Define o tamanho da fonte do texto do corpo na tela de redirecionamento. Sem padrão em tempo de execução — nenhum consumidor de componente encontrado no código; efetivamente não utilizado/legado. |
| `--redirect-body-line-height` | `—` | Define a altura da linha do texto do corpo na tela de redirecionamento. Sem padrão em tempo de execução — nenhum consumidor de componente encontrado no código; efetivamente não utilizado/legado. |
| `--redirect-openfinance-logo-visibility` | `—` | Controla se o logo do Open Finance é visível na tela de redirecionamento. Sem padrão em tempo de execução — nenhum consumidor de componente encontrado no código; efetivamente não utilizado/legado. |