Status surfaces demo
Covers alerts, badges, tags/chips, and tooltips — all driven by semantic
color tokens
--astro-color-accent, --astro-color-success,
--astro-color-warning, --astro-color-danger.
Alerts / callouts
Each variant uses a semantic color token for background, text, and border.
Token contract:
bg-accent / bg-success /
bg-warning / bg-danger with text-bg
text and matching border outline. Padding: --astro-hsp-md / --astro-vsp-md.
Corners: --astro-radius.
Info: uses
bg-accent, text-bg,
border-accent. Token: color-accent.
Success: uses
bg-success, text-bg,
border-success. Token: color-success.
Warning: uses
bg-warning, text-bg,
border-warning. Token: color-warning.
Danger: uses
bg-danger, text-bg,
border-danger. Token: color-danger.
Badges
Filled badges:
astro-badge.is-{color} + bg-{color}.
Outlined badges: astro-badge.is-outlined.is-{color}.
Both use --astro-hsp-xs, --astro-radius,
astro-text-helper.
Filled
accentsuccesswarningdanger
Outlined
accentsuccesswarningdanger
Tags / chips
Chip container:
astro-card background + inline-flex layout.
Close button uses astro-helper with hover color.
Design
×
Tokens
×
Tailwind
×
CSS Vars
×
Tooltips
Hover over the annotated terms. Bubble:
astro-tooltip__bubble
with bg-surface, text-fg, border-muted,
--astro-radius, --astro-hsp-sm / --astro-vsp-xs,
--astro-text-helper. Opacity transition uses
--astro-easing-tab-open.
Token panel adjusts hsp-md / vsp-md
--astro-hsp-md / --astro-vsp-md (default 1rem)
live in the browser.
Colors follow the three-tier strategy
palette → semantic → component
design-token model.
Easing uses the easing-tab-open
cubic-bezier(0.42, 0, 1, 1)
semantic role.