Reference · Variables CSS

Listado canónico de variables --nrn-* que el widget expone dentro del Shadow DOM. Fuente de verdad: el bundle CSS embebido en https://cdn.neuroon.ai/widget@0.9.10/widget.js (los valores aquí son los de esa versión). Si quieres verificar puntualmente uno, inspecciona el shadow root con DevTools y revisa el bloque .neuroon-widget.

Convenciones

• Colores en formato RGB-triplet (6 182 212, no #06b6d4). El widget compone con rgb(var(--nrn-primary)) y permite alpha runtime: rgb(var(--nrn-primary) / 0.18).
• Spacings, radii, shadows, motion son valores CSS estándar (rem, ms, cubic-bezier(...)).
• Z-index son enteros.
• Las variables se inyectan dentro de .neuroon-widget (host del shadow root). Si sobrescribes desde fuera, anclalo al host: .neuroon-widget { --nrn-primary: 16 206 199; }.

Surfaces

Variable	Default light
--nrn-surface-base	255 255 255 (white)
--nrn-surface-elevated	248 250 252 (slate-50)
--nrn-surface-overlay	241 245 249 (slate-100)
--nrn-surface-hover	226 232 240 (slate-200)
--nrn-surface-subtle	241 245 249 (slate-100)
--nrn-surface-sunken	241 245 249 (slate-100)
--nrn-surface-float	250 251 252 (floating elements)

Text

Variable	Default light
--nrn-text-primary	15 23 42 (slate-900)
--nrn-text-secondary	30 41 59 (slate-800)
--nrn-text-tertiary	51 65 85 (slate-700)
--nrn-text-muted	71 85 105 (slate-600 — WCAG AA)
--nrn-text-disabled	148 163 184 (slate-400)

Border

Variable	Default light
--nrn-border-default	226 232 240 (slate-200)
--nrn-border-emphasis	203 213 225 (slate-300)
--nrn-border-subtle	241 245 249 (slate-100)

Brand primary

Variable	Default	Comentario
--nrn-primary	8 145 178	cyan-600 (4.5:1 sobre blanco)
--nrn-primary-light	6 182 212	cyan-500
--nrn-primary-dark	14 116 144	cyan-700
--nrn-primary-hover	6 182 212	cyan-500 (estado hover)
--nrn-primary-text	255 255 255	texto sobre primary

Escala completa (para componer fondos, hovers, bordes):

Variable	Default	Uso típico
--nrn-primary-50	236 254 255	fondos sutiles
--nrn-primary-100	207 250 254	hover backgrounds
--nrn-primary-200	165 243 252	active backgrounds
--nrn-primary-300	103 232 249	bordes claros
--nrn-primary-400	34 211 238	decorativos
--nrn-primary-500	6 182 212	= primary-light
--nrn-primary-600	8 145 178	= primary
--nrn-primary-700	14 116 144	= primary-dark
--nrn-primary-800	21 94 117	accents heavy
--nrn-primary-900	22 78 99	muy oscuro
--nrn-primary-950	8 51 68	casi negro

Brand secondary

Variable	Default
--nrn-secondary	37 99 235 (blue-600)
--nrn-secondary-light	59 130 246 (blue-500)
--nrn-secondary-dark	29 78 216 (blue-700)

Accent

Variable	Default	Uso
--nrn-accent-purple	147 51 234 (purple-600)	AI suggestions, image search
--nrn-accent-emerald	4 120 87 (emerald-700, WCAG AA)	filtros aplicados por IA, success
--nrn-accent-amber	217 119 6 (amber-600)	warnings, confianza media
--nrn-accent-purple-strong	109 40 217 (violet-700)	énfasis purple
--nrn-accent-emerald-strong	6 95 70 (emerald-800)	énfasis emerald
--nrn-accent-amber-strong	180 83 9 (amber-700)	énfasis amber

Semantic

Variable	Default
--nrn-success	22 163 74 (green-600)
--nrn-success-strong	21 128 61 (green-700)
--nrn-warning	202 138 4 (yellow-600)
--nrn-warning-strong	161 98 7 (yellow-700)
--nrn-error	220 38 38 (red-600)
--nrn-error-strong	185 28 28 (red-700)
--nrn-info	37 99 235 (blue-600)

Decorativas y status

Variable	Default	Uso
--nrn-rating	245 158 11 (amber-500)	estrellas/ratings
--nrn-rating-light	251 191 36 (amber-400)	rating background
--nrn-trending	236 72 153 (pink-500)	badges trending
--nrn-premium	139 92 246 (violet-500)	badges premium
--nrn-winner	245 158 11 (amber-500)	comparator winner
--nrn-importance-essential	244 63 94 (rose-500)	importancia esencial
--nrn-importance-high	245 158 11 (amber-500)	importancia alta
--nrn-importance-medium	6 182 212 (cyan-500)	importancia media
--nrn-importance-low	100 116 139 (slate-500)	importancia baja

Glass / overlay

Variable	Default
--nrn-overlay	0 0 0
--nrn-overlay-opacity	0.5
--nrn-glass-background	255 255 255
--nrn-glass-border	226 232 240
--nrn-ring-offset	255 255 255
--nrn-glass-blur	20px
--nrn-glass-blur-lg	32px
--nrn-glass-bg	rgba(255, 255, 255, 0.65)
--nrn-glass-bg-hover	rgba(255, 255, 255, 0.85)

Tipografía

Variable	Default
--nrn-font-size-xs	0.75rem
--nrn-font-size-sm	0.875rem
--nrn-font-size-base	1rem
--nrn-font-size-lg	1.125rem
--nrn-font-size-xl	1.25rem
--nrn-font-weight-normal	400
--nrn-font-weight-medium	500
--nrn-font-weight-semibold	600
--nrn-font-weight-bold	700
--nrn-font-weight-display	800
--nrn-font-letter-spacing-tight	-0.02em
--nrn-font-letter-spacing-display	-0.03em

Spacing

Variable	Default
--nrn-spacing-xs	0.25rem
--nrn-spacing-sm	0.5rem
--nrn-spacing-md	0.75rem
--nrn-spacing-lg	1rem
--nrn-spacing-xl	1.5rem

Radius

Variable	Default
--nrn-radius-sm	0.25rem
--nrn-radius-md	0.375rem
--nrn-radius-lg	0.5rem
--nrn-radius-xl	0.75rem
--nrn-radius-2xl	1rem

Shadow

Variable	Default
--nrn-shadow-xs	0 1px 2px rgb(0 0 0 / 0.05)
--nrn-shadow-sm	0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06)
--nrn-shadow-md	0 4px 6px rgb(0 0 0 / 0.07), 0 2px 4px rgb(0 0 0 / 0.06)
--nrn-shadow-lg	0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05)
--nrn-shadow-xl	0 20px 25px rgb(0 0 0 / 0.1), 0 10px 10px rgb(0 0 0 / 0.04)
--nrn-shadow-2xl	0 25px 50px rgb(0 0 0 / 0.25)
--nrn-shadow-primary	0 4px 14px rgb(8 145 178 / 0.25)
--nrn-shadow-primary-lg	0 8px 24px rgb(8 145 178 / 0.35)

Motion (duration + easing)

Variable	Default	Uso
--nrn-duration-instant	50ms	feedback de tap
--nrn-duration-fast	150ms	hover states
--nrn-duration-normal	250ms	transitions estándar
--nrn-duration-slow	400ms	aparición de modals
--nrn-duration-slower	600ms	aparición pesada
--nrn-ease-out	cubic-bezier(0.16, 1, 0.3, 1)	entrada suave
--nrn-ease-in	cubic-bezier(0.4, 0, 1, 1)	salida rápida
--nrn-ease-in-out	cubic-bezier(0.65, 0, 0.35, 1)	balanceado
--nrn-ease-spring	cubic-bezier(0.34, 1.56, 0.64, 1)	bounce sutil
--nrn-ease-bounce	cubic-bezier(0.68, -0.6, 0.32, 1.6)	bounce más pronunciado
--nrn-motion-entrance	300ms var(--nrn-ease-out)	preset entrada
--nrn-motion-exit	200ms var(--nrn-ease-in)	preset salida
--nrn-motion-hover	150ms var(--nrn-ease-out)	preset hover
--nrn-motion-stagger	40ms	delay entre items

Z-index

Variable	Default
--nrn-z-dropdown	1000
--nrn-z-sticky	1020
--nrn-z-fixed	1030
--nrn-z-drawer	1040
--nrn-z-modal	1050
--nrn-z-popover	1060
--nrn-z-tooltip	1070
--nrn-z-toast	1080
--nrn-z-modal-fullscreen	9999

Override desde tu host

Sobrescribe directamente con la sintaxis RGB-triplet:

.neuroon-widget {
  --nrn-primary: 16 206 199;       /* tu color de marca */
  --nrn-primary-hover: 13 165 159;
  --nrn-radius-md: 0.5rem;
}

No uses #06b6d4 ni rgb(6, 182, 212) — el widget envuelve la variable con rgb(var(--nrn-primary) / <alpha>) y necesita el formato sin función. Si tu design system sólo expone hex, conviértelo a triplete antes de inyectar.

Modo oscuro

El widget detecta el tema vía data-theme="dark" (manual) o por prefers-color-scheme (auto, si theme="auto"). Las variables anteriores son las del modo claro. Para ver los defaults del modo oscuro inspecciona el shadow root con DevTools y revisa el bloque .neuroon-widget[data-theme="dark"]. La forma más portable de adaptar tu marca a ambos modos es definir las dos versiones en el host:

.neuroon-widget { --nrn-primary: 16 206 199; }
.neuroon-widget[data-theme="dark"] { --nrn-primary: 102 240 234; }

Próximas lecturas

• Widget → Theming
• Widget → Configuración