Reference · Variables CSS

Esta página documenta cada variable --nrn-* que el widget expone dentro del Shadow DOM. Los colores siguen el formato triplete RGB (sin rgb(...)) para permitir composición con alpha en tiempo de ejecución, ej.: rgb(var(--nrn-primary) / 0.18).

• Spacings, radii, shadows, transitions son valores CSS estándar (rem, ms, 0 4px 6px …).
• Z-index son enteros.
• Layout dimensions son cualquier longitud CSS (px, vw, %).

Las variables se inyectan dentro de .neuroon-widget[data-theme="..."]. Tabla:

| Variable | Default light | Default dark | |---|---|---|---| | --nrn-surface-base | surfaceBase | 255 255 255 | 15 23 42 | | --nrn-surface-elevated | surfaceElevated | 248 250 252 | 30 41 59 | | --nrn-surface-overlay | surfaceOverlay | 255 255 255 | 30 41 59 | | --nrn-surface-hover | surfaceHover | 241 245 249 | 51 65 85 |

Text

Variable	Override	Default light	Default dark
--nrn-text-primary	textPrimary	15 23 42	248 250 252
--nrn-text-secondary	textSecondary	51 65 85	203 213 225
--nrn-text-muted	textMuted	100 116 139	148 163 184
--nrn-text-disabled	textDisabled	148 163 184	100 116 139

Border

Variable	Override	Default light	Default dark
--nrn-border-default	borderDefault	226 232 240	51 65 85
--nrn-border-emphasis	borderEmphasis	203 213 225	71 85 105
--nrn-border-subtle	borderSubtle	241 245 249	30 41 59

Brand primary

Variable	Override	Default
--nrn-primary	primary	6 182 212 (cyan-500)
--nrn-primary-light	primaryLight	34 211 238 (cyan-400)
--nrn-primary-dark	primaryDark	8 145 178 (cyan-600)

El widget también escribe variantes legacy --color-primary, --color-nrn-primary, --color-primary-hover para compatibilidad con clases Tailwind v4 generadas en build ( | | --nrn-secondary-light | secondaryLight | 96 165 250 (blue-400) | | --nrn-secondary-dark | secondaryDark | 29 78 216 (blue-700) |

Accent

Variable	Override	Default	Uso
--nrn-accent-purple	accentPurple	168 85 247 (purple-500)	AI suggestions, image search.
--nrn-accent-emerald	accentEmerald	16 185 129 (emerald-500)	Filtros aplicados por IA, success.
--nrn-accent-amber	accentAmber	245 158 11 (amber-500)	Warnings, confianza media.

Semantic

Variable	Override	Default
--nrn-success	success	34 197 94 (green-500)
--nrn-error	error	239 68 68 (red-500)
--nrn-warning	warning	245 158 11 (amber-500)

Tipografía

Variable	Override	Default
--nrn-font-family	fontFamily	"Inter", system-ui, sans-serif
--nrn-font-size-xs	fontSizeXs	0.75rem
--nrn-font-size-sm	fontSizeSm	0.875rem
--nrn-font-size-base	fontSizeBase	1rem
--nrn-font-size-lg	fontSizeLg	1.125rem
--nrn-font-size-xl	fontSizeXl	1.25rem
--nrn-font-size-2xl	fontSize2xl	1.5rem

Spacing

Variable	Override	Default
--nrn-spacing-xs	spacingXs	0.25rem
--nrn-spacing-sm	spacingSm	0.5rem
--nrn-spacing-md	spacingMd	1rem
--nrn-spacing-lg	spacingLg	1.5rem
--nrn-spacing-xl	spacingXl	2rem

Radius

Variable	Override	Default
--nrn-radius-sm	radiusSm	0.375rem
--nrn-radius-md	radiusMd	0.5rem
--nrn-radius-lg	radiusLg	0.75rem
--nrn-radius-xl	radiusXl	1rem
--nrn-radius-2xl	radius2xl	1.5rem
--nrn-radius-full	radiusFull	9999px

Shadow

Variable	Override	Default
--nrn-shadow-sm	shadowSm	0 1px 2px 0 rgb(0 0 0 / 0.05)
--nrn-shadow-md	shadowMd	0 4px 6px -1px rgb(0 0 0 / 0.1)
--nrn-shadow-lg	shadowLg	0 10px 15px -3px rgb(0 0 0 / 0.1)
--nrn-shadow-xl	shadowXl	0 20px 25px -5px rgb(0 0 0 / 0.1)

Transitions

Variable	Override	Default
--nrn-transition-fast	transitionFast	150ms ease-in-out
--nrn-transition-base	transitionBase	200ms ease-in-out
--nrn-transition-slow	transitionSlow	300ms ease-in-out

Z-index

Variable	Override	Default
--nrn-z-dropdown	zDropdown	1000
--nrn-z-sticky	zSticky	1100
--nrn-z-modal-backdrop	zModalBackdrop	1200
--nrn-z-modal	zModal	1300
--nrn-z-tooltip	zTooltip	1400

Layout

Variable	Override	Default
--nrn-container-max-width	containerMaxWidth	100%
--nrn-filters-max-width-sm	filtersMaxWidthSm	280px
--nrn-filters-max-width-md	filtersMaxWidthMd	300px
--nrn-filters-max-width-lg	filtersMaxWidthLg	320px
--nrn-drawer-width	drawerWidth	380px
--nrn-drawer-max-width	drawerMaxWidth	90vw
--nrn-dropdown-width	dropdownWidth	288px
--nrn-dropdown-max-height	dropdownMaxHeight	340px
--nrn-suggestions-max-width	suggestionsMaxWidth	100%
--nrn-comparison-panel-width	comparisonPanelWidth	360px
--nrn-comparison-tab-width	comparisonTabWidth	48px

Defaults: dónde leerlos

Los defaults numéricos se generan en build de los @theme blocks de Tailwind v4. La fuente de verdad final es siempre el bundle servido en cdn.neuroon.ai/widget@<version>/widget.css. Los valores listados aquí son la versión actual del widget (0.9.10). Si necesitas verificar puntualmente uno, inspecciona el shadow root con DevTools y revisa :host.

Próximas lecturas

• Widget → Theming
• Widget → Configuración