Aparência

A appearance ajusta o fragment à sua marca. Ela entra no assiny.fragments(), com as fonts, e vale para a instância inteira: não há como trocá-la depois na mesma instância.

{
  "theme": "assiny"
}

Como funcionaCopiar o link da seção

A aparência é uma lista fechada. Cada item fora da lista ou da faixa é ignorado, só ele, com um aviso no console ([Assiny] Appearance: '…' foi ignorado (fora da lista fechada ou da faixa).), e o resto se aplica. Uma appearance que não é objeto vale o tema padrão.

const fragments = assiny.fragments({
  mode: 'payment',
  amount: 12990,
  currency: 'brl',
  appearance: { theme, labels, layout, variables: { … }, rules: { '.Input': { … } } },
  fonts: [{ family: 'Inter', weights: [400, 600] }],
});

Os valores seguem a CSS, como texto ('16px', '#6938ef'). Nenhum valor com url(, var(, inherit, /* ou um destes caracteres é aceito: { } ; < > \ @ ! " ' e a crase.

Tema, rótulos e layoutCopiar o link da seção

O tema dá o valor inicial das 15 variáveis; as variables que você passa trocam só as que você nomeia.

O anel de foco dos três temas acompanha o colorPrimary. Os valores com var(--colorPrimary) e color-mix( são os padrões internos e não podem ser passados de volta (var( é recusado): para manter o anel na cor primária, passe a cor literal, como 0 0 0 2px #6938ef. A borda dos campos não é variável: cada tema tem a sua.

VariáveisCopiar o link da seção

• Cor é hexadecimal (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb() ou rgba().
• Tamanho é só em px (ou 0), sempre como texto: '16px', não 16.
• fontWeightNormal aceita o número ou o texto (400 ou '400').

Em aparelho de toque (pointer: coarse), a fonte dos campos nunca fica abaixo de 16px, qualquer que seja o fontSizeBase ou o fontSize de uma regra; fora dele, o mínimo é 12px.

RegrasCopiar o link da seção

rules é { '<seletor>': { <propriedade>: <valor> } }, com a propriedade em camelCase, como no JavaScript.

rules: {
  '.Tab--selected': { fontWeight: '600' },
  '.Input': { borderColor: '#98a2b3' },
}

Os 14 seletores:

.Checkbox e .CheckboxLabel também são aceitos, sem aviso, e não têm efeito nesta versão.

As 18 propriedades:

Um valor que o navegador não aceita para a propriedade também é ignorado.

O anel de foco nunca someCopiar o link da seção

boxShadow e outline em .Input:focus desenham o anel de foco de todos os controles do fragment (campos, abas e opções). O anel só conta se tiver pelo menos 1px (de desfoque ou de espalhamento, na sombra; de espessura, no contorno, que precisa de um estilo como solid) e uma cor com alfa maior que zero. Sem isso, o fragment mantém o anel do tema e avisa no console. O mesmo vale para focusBoxShadow e focusOutline nas variables: os dois em none trazem de volta o anel do tema.

FontesCopiar o link da seção

As fontes vêm do próprio Assiny Gateway; nenhuma vem de fora. O catálogo tem 8 famílias:

• fontFamily, na variável ou numa regra, aceita só o nome exato da família, sem pilha. A família em uso já carrega os pesos que o fragment usa (o fontWeightNormal, 500 e 600, quando a família os tem).
• fonts: [{ family, weights }], no assiny.fragments(), acrescenta pesos; sem weights, carrega o 400.
• Família ou peso fora do catálogo é ignorado com aviso no console.
• Até a fonte carregar vale a fonte do sistema; o evento ready não espera.

Exemplo completoCopiar o link da seção

const fragments = assiny.fragments({
  mode: 'payment',
  amount: 12990,
  currency: 'brl',
  appearance: {
    theme: 'flat',
    labels: 'floating',
    layout: 'tabs',
    variables: {
      colorPrimary: '#0b6e4f',
      colorText: '#1d2939',
      fontFamily: 'Manrope',
      fontSizeBase: '15px',
      spacingUnit: '4px',
      borderRadius: '10px',
    },
    rules: {
      '.Tab--selected': { fontWeight: '600' },
      '.Input': { borderColor: '#98a2b3' },
      '.Input:focus': { boxShadow: '0 0 0 3px rgba(11, 110, 79, 0.25)' },
      '.Label': { textTransform: 'uppercase', letterSpacing: '0.04em' },
    },
  },
  fonts: [{ family: 'Manrope', weights: [400, 600, 700] }],
});

A tela do QR do PIX não segue a aparência: ela tem a cara fixa do Assiny Gateway (PIX e a tela do QR).