Copiar para IA

Aparência

Faça o gerador de orçamentos parecer construído pela sua própria equipe de produto.

A API de Aparência

Um único objeto appearance controla a aparência do gerador de orçamentos incorporado e dos componentes nativos. Ele tem cinco partes: theme, variables, rules, layout e fonts.

<script src="https://cordhq.app/embed.js" async></script>
<div
  data-cord-token="a1b2c3d4e5f60718"
  data-cord-appearance='{
    "theme": "flat",
    "variables": {
      "colorPrimary": "#0f766e",
      "colorText": "#0b1220",
      "borderRadius": "10px",
      "borderRadiusButton": "999px"
    },
    "rules": {
      "Button": { "text-transform": "uppercase", "letter-spacing": "0.04em" },
      "Total": { "font-weight": "700" }
    },
    "layout": { "compact": true, "hideChat": true },
    "fonts": [{ "cssSrc": "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" }]
  }'>
</div>

Com o Web Component, o mesmo JSON vai no atributo appearance ou na propriedade element.appearance; no React, na prop appearance de <CordCotizador>.

Temas (theme)

Tema	O que faz
light	Padrão.
dark	Paleta escura completa: fundo, superfícies, texto, bordas e campos. night é um alias.
auto	Segue o prefers-color-scheme do visitante.
flat	Sem sombra e com bordas visíveis, para sites que não usam elevação.

O tema é aplicado primeiro, e as suas variables sempre prevalecem sobre ele.

Variáveis (variables)

São escritas em camelCase. Cada uma chega a uma superfície real do gerador de orçamentos; uma variável que você não definir mantém o valor do Cord.

Variável	Tipo	Onde aparece
colorPrimary	cor	Botão principal, destaques, balões do próprio lado no chat
colorOnPrimary	cor	Texto sobre a cor primária
colorBackground	cor	Fundo do cartão
colorSurface	cor	Painéis internos: notas, total, chat, avisos
colorText	cor	Texto principal e valores
colorTextSecondary	cor	Rótulos, identificação fiscal, notas
colorTextPlaceholder	cor	Cabeçalhos de tabela, dicas, placeholders
colorBorder	cor	Divisores e bordas
colorDanger	cor	Recusar e erros
colorSuccess	cor	Confirmações
colorInput	cor	Fundo dos campos
colorInputText	cor	Texto dos campos
colorInputBorder	cor	Borda dos campos
colorFocus	cor	Borda do campo em foco
fontFamily	família	O cartão inteiro
fontSize	comprimento	Itens
fontWeightBold	peso	Botões
borderRadius	comprimento	Cartão
borderRadiusButton	comprimento	Botões
borderRadiusInput	comprimento	Campos
spacingCard	espaçamento	Preenchimento do cartão (2rem ou 1.5rem 2rem)
shadowCard	none ou default	Sombra do cartão

Uma cor aceita hexadecimal, rgb(), hsl(), oklch(), oklab(), lab(), lch() ou um nome. Um comprimento aceita px, rem, em ou %.

Regras por componente (rules)

Para o que as variáveis não alcançam, rules aplica propriedades a componentes com nome público. Não são seletores CSS: são nomes estáveis que o Cord traduz para o próprio markup, por isso não quebram quando o markup muda.

"rules": {
  "Button": { "text-transform": "uppercase" },
  "Button:hover": { "opacity": "0.9" },
  "Input:focus": { "border-color": "#0f766e" },
  "Bubble--mine": { "background-color": "#0f766e" }
}

Componentes: Card, Header, Total, Table, Row, SummaryRow, Notes, Button, Button:hover, ButtonSecondary, ButtonSecondary:hover, Input, Input:focus, Chat, Bubble, Bubble--mine.

Propriedades: color, background-color, border-color, border-width, border-style, border-radius, font-size, font-weight, letter-spacing, text-transform, padding, box-shadow (none ou default) e opacity.

Layout (layout)

Opção	Efeito
compact: true	Menos espaço em branco no cartão, para colunas estreitas.
hideChat: true	Oculta a conversa e os comentários por item.
hideNotes: true	Oculta o bloco de notas do orçamento.

Ocultar é apenas apresentação: o orçamento e as suas ações continuam iguais no link público.

Fontes (fonts)

Até quatro folhas de fonts.googleapis.com ou fonts.bunny.net por https. Se você não declarar fontFamily, o Cord usa a primeira família da primeira folha.

O que o Cord valida e por quê

Todo valor que termina em CSS passa por um validador com listas fechadas de chaves, componentes e propriedades, e uma gramática por tipo de valor. São descartados url(), expression(), @, !important, ;, chaves e <, e o objeto inteiro é ignorado se passar de 8 KB. O que for descartado não quebra o restante: é ignorado, o SDK avisa no console durante o desenvolvimento e aparece na barra de depuração com uma chave de teste.

Isso fecha a porta ao uso da aparência para ocultar botões, cobrir o total ou carregar recursos de terceiros dentro do iframe: o design é seu, a integridade do orçamento é do Cord.

Componentes nativos

Modo headless (baseTheme: 'none')

Com <CordBuilder> ou useQuoteBuilder e a sua própria UI, appearance={{ baseTheme: 'none' }} em <CordProvider> desativa a folha de estilos base. As classes .cord-* continuam no markup e a aparência fica nas suas mãos (Tailwind, CSS Modules ou o que você usar).

Overrides por elemento (elements)

Cada nó de <CordBuilder> tem uma classe estável .cord-<key> (builderRoot, formField, itemRow, summaryRoot, submitButton…). appearance.elements acrescenta o seu className e o seu style:

<CordProvider
  publishableKey={pk}
  appearance={{
    variables: { colorPrimary: '#0f766e', borderRadiusInput: '6px' },
    elements: {
      submitButton: 'my-button',
      itemRow: { style: { gap: '18px' } },
    },
  }}
>
  <CordBuilder />
</CordProvider>

A classe base .cord-<key> nunca é substituída; a sua é adicionada por cima.