Status surfaces demo
Status surfaces cover alerts, badges, and tooltips — all driven by semantic color tokens
--nx-color-accent, --nx-color-success, --nx-color-warning, --nx-color-danger. Toggle any in the Design Token Panel to see every surface update live.Alerts / callouts
Each variant uses a semantic color token for background and border. Token contract:
.is-info / .is-success / .is-warning / .is-danger with --nx-bg text. Padding: --nx-vsp-md / --nx-hsp-md. Corners: --nx-radius.Info: uses
--nx-color-accent.Success: uses
--nx-color-success.Warning: uses
--nx-color-warning.Danger: uses
--nx-color-danger.Badges
Filled badges:
.nx-badge + color modifier. Outlined: .nx-badge.is-outlined + color modifier. Both use --nx-hsp-xs horizontal padding and --nx-text-helper font size.Filled
accentsuccesswarningdanger
Outlined
accentsuccesswarningdanger
Tooltips
Hover over the annotated terms. Bubble:
.nx-tooltip__bubble uses --nx-color-surface, --nx-color-muted border, --nx-radius. Opacity transition references --nx-easing-tab-open. Implementation: position: absolute with translateX(-50%) on the sibling bubble span.Token panel adjusts hsp-md / vsp-md--nx-hsp-md / --nx-vsp-md (default 1rem) live in the browser.Colors follow the three-tier strategypalette → semantic → component design-token model.Easing uses the easing-tab-opencubic-bezier(0.42, 0, 1, 1) semantic role.