web-ui: wave-1 foundation — services/web-ui/src/css/components/badge.css

This commit is contained in:
Zac Gaetano 2026-05-21 12:30:35 -04:00
parent e256a771d5
commit 30cb6663dd

View file

@ -0,0 +1,31 @@
/* badge.css ─ status pills + signal badges */
.wd-badge {
display: inline-flex;
align-items: center;
gap: 4px;
height: 18px;
padding: 0 6px;
border-radius: 3px;
font: 600 10px/1 var(--font);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wd-badge--good { background: var(--signal-good-bg); color: var(--signal-good); }
.wd-badge--bad { background: var(--signal-bad-bg); color: var(--signal-bad); }
.wd-badge--warn { background: var(--signal-warn-bg); color: var(--signal-warn); }
.wd-badge--idle { background: var(--bg-surface); color: var(--text-tertiary); }
.wd-badge--info { background: var(--accent-subtle); color: var(--accent); }
/* Status dot (4px circle, leading indicator on cards/rows) */
.wd-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.wd-dot--good { background: var(--signal-good); }
.wd-dot--bad { background: var(--signal-bad); }
.wd-dot--warn { background: var(--signal-warn); }
.wd-dot--idle { background: var(--signal-idle); }