Status surfaces demo
Covers alerts, badges, tags/chips, and tooltips — all driven by semantic color tokens color-accent, color-success, color-warning, color-danger.
Alerts / callouts
Each variant uses a semantic color token for background, text, and border. Token contract: color-accent / color-success / color-warning / color-danger. Padding: spacing-md. Corners: radius.
color-accent.color-success.color-warning.color-danger.Badges
Filled badges: bg: color-{color} + text: bg. Outlined badges: border + text: color-{color}. Both use px-spacing-xs, radius, text-small. Vertical padding 0.125rem is below spacing-xs granularity — local exception per G4 row 5.
Filled
Outlined
Tags / chips
Container: .zfb-tag — bg: color-surface, border: color-muted, px: spacing-sm, py: spacing-xs, radius, text-small. Close button: color-muted resting, color-danger hover.
Tooltips
Hover over the annotated terms. Bubble: bg: color-surface, text: fg, border: color-muted, radius, px: spacing-sm, py: spacing-xs, text-small. Opacity transition uses easing-tab-open. Implementation: CSS :hover on wrapper reveals the bubble sibling.