Reference · Variables CSS

Variables --nrn-* que el widget expone dentro del Shadow DOM. Fuente: tailwind.css del widget v0.9.27.

Los colores usan triplete RGB (sin rgb(...)) para composición con alpha: rgb(var(--nrn-primary) / 0.18).

Surface

Variable	Override	Light	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	241 245 249	30 41 59
--nrn-surface-hover	surfaceHover	226 232 240	51 65 85

Text

Variable	Override	Light	Dark
--nrn-text-primary	textPrimary	15 23 42	248 250 252
--nrn-text-secondary	textSecondary	30 41 59	203 213 225
--nrn-text-muted	textMuted	71 85 105	148 163 184
--nrn-text-disabled	textDisabled	148 163 184	100 116 139

Border

Variable	Override	Light	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	Light
--nrn-primary	primary	8 145 178 (cyan-600)
--nrn-primary-light	primaryLight	6 182 212 (cyan-500)
--nrn-primary-dark	primaryDark	14 116 144 (cyan-700)

Brand secondary

Variable	Override	Light
--nrn-secondary	secondary	59 130 246 (blue-500)
--nrn-secondary-light	secondaryLight	96 165 250 (blue-400)
--nrn-secondary-dark	secondaryDark	29 78 216 (blue-700)

Accent

Variable	Override	Light
--nrn-accent-purple	accentPurple	168 85 247 (purple-500)
--nrn-accent-emerald	accentEmerald	16 185 129 (emerald-500)
--nrn-accent-amber	accentAmber	245 158 11 (amber-500)

Semantic

Variable	Override	Light
--nrn-success	success	34 197 94
--nrn-error	error	239 68 68
--nrn-warning	warning	245 158 11

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

Spacing

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

Radius

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

Shadow

Variable	Override	Light
--nrn-shadow-sm	shadowSm	0 0 0 1px rgb(15 23 42 / 0.05), 0 1px 2px rgb(15 23 42 / 0.06), 0 2px 6px rgb(15 23 42 / 0.06)
--nrn-shadow-md	shadowMd	0 0 0 1px rgb(15 23 42 / 0.05), 0 1px 2px rgb(15 23 42 / 0.06), 0 4px 12px rgb(15 23 42 / 0.08)
--nrn-shadow-lg	shadowLg	0 0 0 1px rgb(15 23 42 / 0.05), 0 2px 4px rgb(15 23 42 / 0.06), 0 12px 24px rgb(15 23 42 / 0.1)

Z-index

Variable	Override	Default
--nrn-z-dropdown	zDropdown	1000
--nrn-z-sticky	zSticky	1020
--nrn-z-drawer	zDrawer	1040
--nrn-z-modal	zModal	1050
--nrn-z-popover	zPopover	1060
--nrn-z-tooltip	zTooltip	1070

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-comparison-panel-width	comparisonPanelWidth	360px
--nrn-comparison-tab-width	comparisonTabWidth	48px

Los valores reales se generan en build desde @theme de Tailwind v4. Para verificarlos, inspecciona el shadow root con DevTools.

Próximas lecturas

• Widget → Theming
• Widget → Configuración