Variáveis CSS

Personalize a aparência da assinatura incorporada com variáveis CSS e classes.

CSS e variáveis CSS personalizados dependem do seu plano.

Use a propriedade cssVars em qualquer componente de incorporação para mudar cores, espaçamentos e mais.

<EmbedDirectTemplate
  host="https://app.kivosign.com.br"
  token="seu-token"
  cssVars={{
    background: '#ffffff',
    foreground: '#000000',
    primary: '#0000ff',
    primaryForeground: '#ffffff',
    radius: '0.5rem',
  }}
/>

Cores

Variável	Descrição
`background`	Cor de fundo base
`foreground`	Cor de texto base
`muted`	Cor de fundo suave
`mutedForeground`	Cor de texto suave
`popover`	Fundo de popovers e menus suspensos
`popoverForeground`	Texto de popovers e menus suspensos
`card`	Fundo dos cartões
`cardBorder`	Borda dos cartões
`cardBorderTint`	Destaque da borda dos cartões
`cardForeground`	Texto dos cartões
`fieldCard`	Fundo do cartão de campo
`fieldCardBorder`	Borda do cartão de campo
`fieldCardForeground`	Texto do cartão de campo
`widget`	Fundo do widget
`widgetForeground`	Texto do widget
`border`	Cor de borda padrão
`input`	Borda dos campos de entrada
`primary`	Cor da ação/botão principal
`primaryForeground`	Texto da ação/botão principal
`secondary`	Cor da ação/botão secundário
`secondaryForeground`	Texto do botão secundário
`accent`	Cor de destaque
`accentForeground`	Texto de destaque
`destructive`	Cor de ações destrutivas/de perigo
`destructiveForeground`	Texto de ações destrutivas/de perigo
`ring`	Cor do contorno de foco
`warning`	Cor de aviso/alerta
`envelopeEditorBackground`	Fundo do editor de envelopes. Só no editor de envelopes V2.

Espaçamento

Variável	Descrição
`radius`	Arredondamento das bordas (ex.: `0.5rem`)

Uso por framework

Passe cssVars para qualquer componente de incorporação. A sintaxe muda conforme o framework:

// React / Preact
<EmbedDirectTemplate host="https://app.kivosign.com.br" token={token} cssVars={cssVars} />

// Vue
<EmbedDirectTemplate host="https://app.kivosign.com.br" :token="token" :cssVars="cssVars" />

// Svelte
<EmbedDirectTemplate host="https://app.kivosign.com.br" {token} cssVars={cssVars} />

// Solid
<EmbedDirectTemplate host="https://app.kivosign.com.br" token={token} cssVars={cssVars} />

Formatos de cor

As cores aceitam qualquer formato CSS válido:

Hex: #ff0000
RGB: rgb(255, 0, 0)
HSL: hsl(0, 100%, 50%)
Nome: red

CSS personalizado

Use a propriedade css para injetar um CSS com controle mais fino:

<EmbedDirectTemplate
  host="https://app.kivosign.com.br"
  token="seu-token"
  css={`
    .documenso-embed {
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  `}
/>

Classes CSS

Partes específicas da incorporação podem ser estilizadas por classes CSS.

Classes dos componentes

Classe	Descrição
`.embed--Root`	Contêiner principal da incorporação
`.embed--DocumentContainer`	Contêiner do documento e do widget de assinatura
`.embed--DocumentViewer`	Contêiner do visualizador do documento
`.embed--DocumentWidget`	Contêiner do widget de assinatura
`.embed--DocumentWidgetContainer`	Contêiner externo do widget de assinatura
`.embed--DocumentWidgetHeader`	Cabeçalho do widget de assinatura
`.embed--DocumentWidgetContent`	Área principal do widget de assinatura
`.embed--DocumentWidgetForm`	Formulário dentro do widget de assinatura
`.embed--DocumentWidgetFooter`	Rodapé do widget de assinatura
`.embed--WaitingForTurn`	Tela de espera quando não é a vez do usuário
`.embed--DocumentCompleted`	Tela de conclusão depois da assinatura
`.embed--DocumentCompletedCard`	Cartão da assinatura na tela de conclusão
`.embed--DocumentCompletedTitle`	Título da tela de conclusão
`.embed--DocumentCompletedStatus`	Linha de status da tela de conclusão
`.embed--DocumentCompletedDescription`	Texto de descrição da tela de conclusão
`.embed--DocumentRejected`	Tela exibida depois de recusar o documento
`.field--FieldRootContainer`	Contêiner base dos campos do documento

Atributos de dados dos campos

Os campos expõem atributos de dados para estilos por estado:

Atributo	Valores	Descrição
`[data-field-type]`	`SIGNATURE`, `TEXT`, `CHECKBOX`, `RADIO` etc.	O tipo do campo
`[data-inserted]`	`true`, `false`	Se o campo foi preenchido
`[data-validate]`	`true`, `false`	Se o campo está sendo validado
`[data-readonly]`	`true`, `false`	Se o campo é somente leitura

Exemplo

/* Campos de assinatura */
.field--FieldRootContainer[data-field-type='SIGNATURE'] {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Campos preenchidos */
.field--FieldRootContainer[data-inserted='true'] {
  background-color: hsl(var(--primary));
  opacity: 0.2;
}

/* Widget personalizado */
.embed--DocumentWidget {
  background-color: #ffffff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

Outros exemplos

/* Transição em todos os campos */
.field--FieldRootContainer {
  transition: all 200ms ease;
}

/* Tela de espera */
.embed--WaitingForTurn {
  background-color: #f9fafb;
  padding: 2rem;
}

/* Ajustes responsivos do contêiner do documento */
@media (min-width: 768px) {
  .embed--DocumentContainer {
    gap: 2rem;
  }
}

Boas práticas

Veja também

Visão geral da incorporação - Propriedades e conceitos
React - Uso do SDK React
Vue - Uso do SDK Vue

Variáveis CSS

Mantenha o contraste

Teste o modo escuro

Siga sua marca

Arredondamento consistente

Nesta página