Referência técnica de IA
Props, tokens, gradientes e ícones de IA no Nimbus. O contrato de implementação exato para developers, com pacote e versão.
Contrato de implementação para developers: props exatas, valores, pacote e versão. Cada entrada do catálogo enlaça o padrão de design que a usa.
Verificado com @nimbus-ds/components@5.59.0, @nimbus-ds/tokens@9.6.0 e @nimbus-ds/styles@9.65.0.
Três mecanismos conforme a intenção. Convém escolher apenas um por elemento.
- appearance="ai-generative" — estiliza um controle como parte de uma experiência de IA. Em Input, Textarea, Select, ProgressBar, IconButton e Tag.
- aiGenerated={true} — marca que o valor foi gerado por IA (estilo + anel de foco). Em Input, Textarea, Select, Chip e Checkbox. Quando os dois coexistem, aiGenerated tem precedência: no Select, a documentação da prop deixa isso explícito ("When true, this styling takes precedence over appearance").
- appearance="ai-primary" | "ai-secondary" — exclusivo do Button, para ações de IA com hierarquia.
Em Icon e Text, o estilo é ativado com color="ai-generative". Em IconButton, color="ai-generative" tinge o ícone interno, enquanto appearance pinta o fundo do contêiner.
Regra prática
Usar aiGenerated para comunicar a origem de um dado ("isto foi gerado por IA"); usar appearance para vestir um controle que faz parte de uma experiência de IA ("a partir daqui se gera com IA").
Button — appearance="ai-primary" | "ai-secondary". Ação que dispara uma geração; primária e complementar. Ver padrão: Disparar uma geração.
Input — appearance="ai-generative" · aiGenerated. Campo de uma linha em um fluxo de IA ou com valor autogerado. Ver padrão: Mostrar o resultado.
Textarea — appearance="ai-generative" · aiGenerated. Texto longo gerado por IA, como a descrição de um produto. Ver padrão: Mostrar o resultado.
Select — appearance="ai-generative" · aiGenerated. Opção sugerida ou pré-selecionada por IA. Ver padrão: Mostrar o resultado.
Frete grátis
Chip — aiGenerated. Critério ou rótulo proposto por IA. Ver padrão: Mostrar o resultado.
Checkbox — aiGenerated. Seleção sugerida por IA. Não se aplica se a aparência for danger. Ver padrão: Mostrar o resultado.
ProgressBar — appearance="ai-generative". Progresso de um processo de IA em andamento. Ver padrão: Comunicar o processo.
IconButton — appearance="ai-generative" · color="ai-generative". Ação de IA representada apenas com ícone. Ver padrão: Disparar uma geração.
Tag — appearance="ai-generative". Rótulo que indica conteúdo gerado por IA. Ver padrão: Identificar e atribuir a IA.
Icon — color="ai-generative". Ícone tingido com o gradiente generativo. Ver padrão: Identificar e atribuir a IA.
O Text também aceita color="ai-generative" para texto em gradiente (títulos ou chamadas breves, não CTAs — ver Disparar uma geração). O gradiente pode alterar outras propriedades do texto, como width e display: convém revisar visualmente o resultado antes de publicar.
aiGenerative.background — #F8F7FD. Fundo de uma área associada à IA.
aiGenerative.surface — #F8F7FD. Superfície de um contêiner generativo.
aiGenerative.surface-highlight — #F1EDFC. Superfície destacada ou hover suave.
aiGenerative.interactive — #E2DCFA. Elementos interativos em repouso.
aiGenerative.interactive-hover — #CDC1F6. Elementos interativos em hover.
aiGenerative.interactive-pressed — #4629BA. Elementos interativos pressionados.
aiGenerative.text-low — #452F9D. Texto secundário sobre superfícies de IA.
aiGenerative.text-high — #1F1254. Texto principal sobre superfícies de IA.
Azul — High #0050C3 · Light #96C1FC.
Violeta — High #4629BA · Light #BCB0E8.
Rosa — High #D8446E · Light #E5809D.
Modo claro e escuro
Por enquanto os valores de IA são idênticos nos temas light e dark. Consumir os tokens do sistema permite propagar qualquer ajuste futuro de forma automática.
Três gradientes já compostos, todos com inclinação de 50deg. São importados de @nimbus-ds/styles.
gradients.aiGenerativeInteractive — repouso. linear-gradient(50deg, #0050C3 28.22%, #4629BA 49.27%, #D8446E 83.12%).
gradients.aiGenerativeHover — hover, com a ordem das cores invertida. linear-gradient(50deg, #D8446E 28.22%, #4629BA 49.27%, #0050C3 83.12%).
gradients.aiGenerativeDisabled — desabilitado. linear-gradient(50deg, #96C1FC 28.22%, #BCB0E8 49.27%, #E5809D 83.12%).
Em @nimbus-ds/icons. Cada ícone pode ser usado com o gradiente (color="ai-generative") ou em uma cor neutra (color="neutral-textHigh"); ambas as opções são válidas conforme o contexto.
GenerativeStarsIcon — à esquerda com o gradiente generativo, à direita em cor neutra.
GenerativePencilIcon — à esquerda com o gradiente generativo, à direita em cor neutra.
IaCoinIcon — à esquerda com o gradiente generativo, à direita em cor neutra.
- Foco visível: conservar o anel aiFocus que os componentes com aiGenerated aplicam.
- A cor não basta: acompanhar sempre com texto, ícone ou rótulo.
- Contraste: com Text color="ai-generative", reservá-lo para textos breves e destacados.
- Nada é decorativo: descrever a função dos ícones com aria-label quando não houver texto visível.
Estes componentes já fazem parte de @nimbus-ds/components e @nimbus-ds/icons; não é preciso instalar nada adicional.
import React from "react";
import { Button } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Button appearance="ai-primary">Generate</Button>
);
export default Example;