Reference · CSS variables

This page documents every --nrn-* variable the widget exposes inside the Shadow DOM. Colors use the RGB-triplet format (no rgb(...) wrapper) to allow runtime alpha composition, e.g.: rgb(var(--nrn-primary) / 0.18).

• Spacings, radii, shadows, transitions are standard CSS values (rem, ms, 0 4px 6px …).
• Z-index are integers.
• Layout dimensions are any CSS length (px, vw, %).

Variables are injected inside .neuroon-widget[data-theme="..."]. Table:

| 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)

The widget also writes legacy variants --color-primary, --color-nrn-primary, --color-primary-hover for compatibility with Tailwind v4 classes generated at build time ( | | --nrn-secondary-light | secondaryLight | 96 165 250 (blue-400) | | --nrn-secondary-dark | secondaryDark | 29 78 216 (blue-700) |

Accent

Variable	Override	Default	Usage
--nrn-accent-purple	accentPurple	168 85 247 (purple-500)	AI suggestions, image search.
--nrn-accent-emerald	accentEmerald	16 185 129 (emerald-500)	AI-applied filters, success.
--nrn-accent-amber	accentAmber	245 158 11 (amber-500)	Warnings, medium confidence.

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)

Typography

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: where to read them

Numeric defaults are generated at build time from the Tailwind v4 @theme blocks. The final source of truth is always the bundle served at cdn.neuroon.ai/widget@<version>/widget.css. The values listed here are the current widget version (0.9.10). If you need to verify a specific one, inspect the shadow root in DevTools and check :host.

Further reading

• Widget → Theming
• Widget → Configuration