# DOC-1505: Análise de Lacunas de Variáveis de Personalização do Widget

Lista de origem: 183 propriedades CSS personalizadas fornecidas para a reformulação da personalização do widget.

Verificado em relação aos dois documentos de personalização ao vivo:

- **Widget multi-região** (Empregos Brasil, Registros de Emprego México, Fiscal México) → fonte canônica é `_partials/hosted-widget-branding-and-customization.md`, incluída via `{% partial %}` nas três páginas de produtos.
- **Widget OFDA** (Open Finance Brasil / Agregação Regulada) → `products/aggregation_brazil/ofda-widget-branding-and-customization.md` (totalmente embutido, não é um parcial).


Existe um terceiro documento de widget — `products/payments_brazil/payments-brazil-bio-pix-widget-customization.md` (Pix Biometria) — mas ele usa um namespace de variáveis totalmente diferente (`--nav-bar-stepper-color-active`, `--color-surface-base`, `--container-border-*`, etc.) que não está presente na lista fornecida, portanto, está excluído da contagem de lacunas abaixo. Indique se Pix Biometria também deve estar no escopo para DOC-1505.

## Números principais

|  | Contagem |
|  --- | --- |
| Total de variáveis na lista fornecida | 183 |
| Documentado em **ambos** Multi-region e OFDA | 72 |
| Documentado apenas em Multi-region **somente** | 6 |
| Documentado apenas em OFDA **somente** | 0 |
| **Faltando em ambos os documentos** | 105 |


**57% da lista de variáveis fornecida (105/183) não está documentada em nenhum lugar.** O conjunto não documentado é dominado por categorias inteiras de componentes que não existem nos documentos atuais: tipografia/fontes, links, tokens de texto em nível de página, diálogos, caixas de seleção, dropdowns, listas de itens, acordiões e as telas de consentimento/redirecionamento específicas do OFDA.

## Lacuna 1 — Multi-região possui 6 variáveis que o OFDA não tem

A documentação do OFDA não possui a seção "Modificar a tela de credenciais do widget". Estas são documentadas apenas para Multi-região:

| Variável CSS |
|  --- |
| `--credentials-screen-institution-logo-border-radius` |
| `--credentials-screen-header-logo-reversed` |
| `--credentials-screen-help-link-align` |
| `--credentials-screen-help-link-font-size` |
| `--credentials-screen-counter-border-radius` |
| `--credentials-screen-counter-font-size` |


**Ação necessária:** confirmar com a engenharia se o widget OFDA realmente suporta a personalização da tela de credenciais. Se sim, esta seção está faltando na documentação do OFDA. Se não, nenhuma ação é necessária — mas vale a pena incluir uma nota de uma linha na documentação do OFDA explicando a diferença da plataforma (espelha o padrão existente onde o OFDA também não possui `--button-border-color-disabled` na tabela de botões, apesar de aparecer no exemplo de código de botões).

## Lacuna 2 — 105 variáveis ausentes em ambos os documentos

Agrupadas por componente aparente, na ordem em que provavelmente seriam adicionadas a ambos os documentos:

### Tipografia / fontes (nova categoria — sem seção existente)

| Variável |
|  --- |
| `--font-family-primary` |
| `--font-family-regular-file-name` |
| `--font-family-semibold-file-name` |
| `--font-family-bold-file-name` |


### Links (nova categoria)

| Variável |
|  --- |
| `--link-font-color` |
| `--link-font-color-dark` |
| `--link-text-decoration` |


### Tokens de texto em nível de página (nova categoria — título/corpo fora de componentes específicos)

| Variável |
|  --- |
| `--text-title-color` |
| `--text-title-color-dark` |
| `--text-title-font-size` |
| `--text-title-line-height` |
| `--text-body-color` |
| `--text-body-color-dark` |
| `--text-body-font-size` |
| `--text-body-line-height` |


### Botões (extensão da seção existente "Modificar os botões do widget")

| Variável |
|  --- |
| `--text-button-font-color` |
| `--text-button-font-color-dark` |


### Banners (estende a seção existente "Modificar os banners do widget")

| Variável |
|  --- |
| `--banner-icon-size` |
| `--banner-icon-name-error` |
| `--banner-icon-name-success` |
| `--banner-icon-name-info` |
| `--banner-icon-name-warning` |


### Campos de entrada (expande a seção existente "Modificar os campos de entrada do widget" — esta é a maior lacuna em uma seção existente)

| Variável |
|  --- |
| `--input-text-font-size` |
| `--input-text-font-color` |
| `--input-text-font-color-dark` |
| `--input-text-border-color-error` |
| `--input-text-border-color-error-dark` |
| `--input-text-label-weight` |
| `--input-text-label-font-size` |
| `--input-text-assistive-color` |
| `--input-text-assistive-color-dark` |
| `--input-text-assistive-color-error` |
| `--input-text-assistive-color-error-dark` |
| `--input-text-assistive-font-weight` |
| `--input-text-icon-opacity` |
| `--input-text-icon-size` |
| `--input-text-icon-order` |
| `--input-text-password-visible-icon` |
| `--input-text-password-non-visible-icon` |


### Checkbox (nova categoria)

| Variável |
|  --- |
| `--checkbox-border-color` |
| `--checkbox-border-color-dark` |
| `--checkbox-border-radius` |


### Dialog (nova categoria)

| Variável |
|  --- |
| `--dialog-title-color` |
| `--dialog-title-color-dark` |
| `--dialog-body-color` |
| `--dialog-body-color-dark` |
| `--dialog-body-font-size` |
| `--dialog-body-line-height` |


### Abas (extensão da seção existente "Modificar Componentes de Abas do Widget" — variantes de modo escuro ausentes)

| Variável |
|  --- |
| `--tab-text-color-dark` |
| `--tab-border-color-dark` |


Nota: ao contrário de todos os outros componentes temáticos, o exemplo de código "Escuro" da seção de abas reutiliza as chaves simples `--tab-text-color` / `--tab-border-color` em vez das que possuem o sufixo `-dark`. Isso é inconsistente com a própria convenção do documento (explicitamente declarada: "adicione `-dark` a qualquer uma das variáveis CSS ... para aplicar um estilo personalizado especificamente para o modo escuro") e com o restante da página. Confirme com a engenharia se as abas realmente não possuem variáveis específicas para o modo escuro (nesse caso, o exemplo de código está correto e essas duas estão fora do escopo) ou se os documentos estão apenas faltando essas informações (nesse caso, o próprio exemplo de código Escuro precisa de uma correção, não apenas uma nova linha na tabela).

### Overlay / superfície / divisor / imagem / layout (novas categorias)

| Variável |
|  --- |
| `--overlay-background-color` |
| `--overlay-background-color-dark` |
| `--surface-color` |
| `--surface-color-dark` |
| `--divider-color` |
| `--divider-color-dark` |
| `--image-border-radius` |
| `--layout-side-padding` |


Nota: `overlay_background_color` (minúsculas, snake_case, sem traços) já existe em ambos os documentos, mas como uma **chave JSON de branding** (`widget.branding.overlay_background_color`), não como uma variável CSS. `--overlay-background-color` / `-dark` são irmãos com namespace de variável CSS e são genuinamente novos/não documentados — vale a pena verificar com a engenharia se estes não são apenas o mesmo controle exposto duas vezes.

### Dropdown (nova categoria)

| Variável |
|  --- |
| `--dropdown-border-radius` |
| `--dropdown-font-color` |
| `--dropdown-font-color-dark` |
| `--dropdown-label-display` |


### Lista de itens (nova categoria)

| Variável |
|  --- |
| `--item-list-hover-color` |
| `--item-list-hover-color-dark` |
| `--item-list-skeleton-color` |
| `--item-list-skeleton-color-dark` |
| `--item-list-icon-color` |
| `--item-list-icon-color-dark` |
| `--item-list-title-color` |
| `--item-list-title-color-dark` |
| `--item-list-body-color` |
| `--item-list-body-color-dark` |


### Accordion (nova categoria)

| Variável |
|  --- |
| `--accordion-icon-color` |
| `--accordion-icon-color-dark` |
| `--accordion-title-color` |
| `--accordion-title-color-dark` |


### Tela de credenciais — informações extras e título (estende a seção de tela de credenciais, que atualmente é apenas Multi-região — veja Gap 1)

| Variável |
|  --- |
| `--credentials-screen-extra-info-align` |
| `--credentials-screen-extra-info-font-weight` |
| `--credentials-screen-extra-info-font-size` |
| `--credentials-screen-extra-info-line-height` |
| `--credentials-screen-extra-info-color` |
| `--credentials-screen-extra-info-color-dark` |
| `--credentials-screen-title-align` |
| `--credentials-screen-title-font-weight` |
| `--credentials-screen-title-font-size` |
| `--credentials-screen-title-line-height` |
| `--credentials-screen-title-color` |
| `--credentials-screen-title-color-dark` |


### Detalhes do consentimento / resumo do consentimento (conceitos exclusivos do OFDA — o fluxo de consentimento do Open Finance não possui documentação de variáveis CSS atualmente)

| Variável |
|  --- |
| `--consent-details-identification-section-icon` |
| `--consent-details-expiration-section-icon` |
| `--consent-details-header-background-color` |
| `--consent-details-header-background-color-dark` |
| `--consent-summary-identification-section-icon` |
| `--consent-summary-expiration-section-icon` |
| `--consent-summary-purpose-section-icon` |
| `--consent-summary-shared-information-section-icon` |


**Estes são quase certamente exclusivos do OFDA** (telas de consentimento são um conceito regulamentado pelo Open Finance/Brasil — o widget multi-região não possui etapa de consentimento). Vale a pena confirmar o escopo com a engenharia antes de decidir se pertencem apenas à documentação do OFDA.

### Tela de obtenção de consentimento (provavelmente apenas OFDA)

| Variável |
|  --- |
| `--fetching-consent-title-font-size` |
| `--fetching-consent-title-line-height` |
| `--fetching-consent-body-font-size` |
| `--fetching-consent-body-line-height` |


### Tela de redirecionamento (provavelmente apenas OFDA)

| Variável |
|  --- |
| `--redirect-title-font-size` |
| `--redirect-title-line-height` |
| `--redirect-body-font-size` |
| `--redirect-body-line-height` |
| `--redirect-openfinance-logo-visibility` |


## Totalmente documentado (72 variáveis, nenhuma ação necessária)

Presente com uma linha de tabela (ou equivalente em modo escuro documentado) **tanto** nos documentos Multi-região quanto nos documentos OFDA hoje: a cor primária completa, barra de navegação, botões (menos as duas adições de botões de texto acima), banners (menos nome/ícone/tamanho), campos de entrada (menos as adições acima) e seções de abas (modo claro). Lista completa disponível mediante solicitação — omitida aqui, pois não necessita de trabalho de documentação.

## Advertência sobre a fonte de verdade

`apis/BelvoOpenApiSpec.yaml` define o esquema do array `theme` (`css_key` / `value`, ambos do tipo livre `type: string`) tanto para os endpoints de token OFDA quanto para multi-região, mas **não** enumera nomes de variáveis como um enum — a descrição de `css_key` apenas lista 3 exemplos ilustrativos (`--color-primary-base`, `--nav-bar-title-color`, `--nav-bar-icon-color`) em prosa. A especificação não pode ser usada para validar a lista fornecida de 183 variáveis em relação ao produto; essa confirmação precisa vir da engenharia/design, não do contrato da API.

## Próximo passo sugerido

Antes de escrever atualizações na documentação: confirme com a engenharia (a) quais das categorias "provavelmente apenas OFDA" (detalhes/resumo do consentimento, busca de consentimento, redirecionamento) são genuinamente exclusivas do OFDA versus também disponíveis em várias regiões, e (b) se a seção de tela de credenciais apenas para várias regiões (Lacuna 1) deve ser portada para o OFDA ou se é uma limitação genuína da plataforma.