Referencia técnica de IA
Props, tokens, gradientes e iconos de IA en Nimbus. El contrato de implementación exacto para developers, con paquete y versión.
Contrato de implementación para developers: props exactas, valores, paquete y versión. Cada entrada del catálogo enlaza al patrón de diseño que lo usa.
Verificado contra @nimbus-ds/components@5.59.0, @nimbus-ds/tokens@9.6.0 y @nimbus-ds/styles@9.65.0.
Tres mecanismos según la intención. Conviene elegir uno solo por elemento.
- appearance="ai-generative" — estiliza un control como parte de una experiencia de IA. En Input, Textarea, Select, ProgressBar, IconButton y Tag.
- aiGenerated={true} — marca que el valor fue generado por IA (estilo + anillo de foco). En Input, Textarea, Select, Chip y Checkbox. Donde conviven ambos, aiGenerated tiene precedencia: en Select, la documentación de la prop lo aclara de forma explícita ("When true, this styling takes precedence over appearance").
- appearance="ai-primary" | "ai-secondary" — exclusivo de Button, para acciones de IA con jerarquía.
En Icon y Text, el estilo se activa con color="ai-generative". En IconButton, color="ai-generative" tiñe el ícono interno, mientras appearance pinta el fondo del contenedor.
Regla práctica
Usar aiGenerated para comunicar el origen de un dato ("esto lo generó la IA"); usar appearance para vestir un control que forma parte de una experiencia de IA ("desde acá se genera con IA").
Button — appearance="ai-primary" | "ai-secondary". Acción que dispara una generación; primaria y complementaria. Ver patrón: Disparar una generación.
Input — appearance="ai-generative" · aiGenerated. Campo de una línea en un flujo de IA o con valor autogenerado. Ver patrón: Mostrar el resultado.
Textarea — appearance="ai-generative" · aiGenerated. Texto largo generado por IA, como la descripción de un producto. Ver patrón: Mostrar el resultado.
Select — appearance="ai-generative" · aiGenerated. Opción sugerida o preseleccionada por IA. Ver patrón: Mostrar el resultado.
Envío gratis
Chip — aiGenerated. Criterio o etiqueta propuesta por IA. Ver patrón: Mostrar el resultado.
Checkbox — aiGenerated. Selección sugerida por IA. No aplica si la apariencia es danger. Ver patrón: Mostrar el resultado.
ProgressBar — appearance="ai-generative". Progreso de un proceso de IA en curso. Ver patrón: Comunicar el proceso.
IconButton — appearance="ai-generative" · color="ai-generative". Acción de IA representada solo con ícono. Ver patrón: Disparar una generación.
Tag — appearance="ai-generative". Etiqueta que indica contenido generado por IA. Ver patrón: Identificar y atribuir la IA.
Icon — color="ai-generative". Ícono teñido con el gradiente generativo. Ver patrón: Identificar y atribuir la IA.
Text también acepta color="ai-generative" para texto en gradiente (títulos o llamados breves, no CTAs — ver Disparar una generación). El gradiente puede alterar otras propiedades del texto, como width y display: conviene revisar visualmente el resultado antes de publicar.
aiGenerative.background — #F8F7FD. Fondo de una zona asociada a IA.
aiGenerative.surface — #F8F7FD. Superficie de un contenedor generativo.
aiGenerative.surface-highlight — #F1EDFC. Superficie destacada o hover suave.
aiGenerative.interactive — #E2DCFA. Elementos interactivos en reposo.
aiGenerative.interactive-hover — #CDC1F6. Elementos interactivos en hover.
aiGenerative.interactive-pressed — #4629BA. Elementos interactivos presionados.
aiGenerative.text-low — #452F9D. Texto secundario sobre superficies de IA.
aiGenerative.text-high — #1F1254. Texto principal sobre superficies de IA.
Azul — High #0050C3 · Light #96C1FC.
Violeta — High #4629BA · Light #BCB0E8.
Rosa — High #D8446E · Light #E5809D.
Modo claro y oscuro
Por ahora los valores de IA son idénticos en los temas light y dark. Consumir los tokens del sistema permite propagar cualquier ajuste futuro de forma automática.
Tres gradientes ya compuestos, todos con inclinación de 50deg. Se importan desde @nimbus-ds/styles.
gradients.aiGenerativeInteractive — reposo. linear-gradient(50deg, #0050C3 28.22%, #4629BA 49.27%, #D8446E 83.12%).
gradients.aiGenerativeHover — hover, con el orden de colores invertido. linear-gradient(50deg, #D8446E 28.22%, #4629BA 49.27%, #0050C3 83.12%).
gradients.aiGenerativeDisabled — deshabilitado. linear-gradient(50deg, #96C1FC 28.22%, #BCB0E8 49.27%, #E5809D 83.12%).
En @nimbus-ds/icons. Cada ícono se puede usar con el gradiente (color="ai-generative") o en un color neutral (color="neutral-textHigh"); ambas opciones son válidas según el contexto.
GenerativeStarsIcon — a la izquierda con el gradiente generativo, a la derecha en color neutral.
GenerativePencilIcon — a la izquierda con el gradiente generativo, a la derecha en color neutral.
IaCoinIcon — a la izquierda con el gradiente generativo, a la derecha en color neutral.
- Foco visible: conservar el anillo aiFocus que aplican los componentes con aiGenerated.
- El color no alcanza: acompañar siempre con texto, ícono o etiqueta.
- Contraste: con Text color="ai-generative", reservarlo para textos breves y destacados.
- Nada es decorativo: describir la función de los iconos con aria-label cuando no haya texto visible.
Estos componentes ya forman parte de @nimbus-ds/components y @nimbus-ds/icons; no hace falta 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;