Spaces:
Sleeping
Sleeping
| /* ── Badge primitive — chrome tokens ─────────────────────────────── */ | |
| .ui-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| border-radius: var(--chrome-radius-pill); | |
| font-family: var(--chrome-font-mono); | |
| font-weight: 600; | |
| letter-spacing: var(--chrome-label-track); | |
| text-transform: uppercase; | |
| border: 1px solid currentColor; | |
| background: transparent; | |
| white-space: nowrap; | |
| user-select: none; | |
| line-height: 1.2; | |
| } | |
| .ui-badge__dot { | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| background: currentColor; | |
| box-shadow: none; | |
| } | |
| /* sizes */ | |
| .ui-badge--size-xs { padding: 0px 6px; font-size: var(--chrome-label-size); } | |
| .ui-badge--size-sm { padding: 1px 7px; font-size: var(--chrome-label-size); } | |
| /* tones — color applied via `color` so dot + border follow. Fill stays near- | |
| transparent so the badge reads as a chrome chip, not a filled pill. */ | |
| .ui-badge--neutral { color: var(--chrome-fg-muted); border-color: var(--chrome-border-strong); background: transparent; } | |
| .ui-badge--brand { color: var(--chrome-accent); border-color: var(--chrome-accent-border); background: var(--chrome-accent-bg); } | |
| .ui-badge--success { color: var(--chrome-severity-ok); border-color: color-mix(in srgb, var(--chrome-severity-ok) 45%, transparent); background: color-mix(in srgb, var(--chrome-severity-ok) 10%, transparent); } | |
| .ui-badge--warn { color: var(--chrome-severity-warn); border-color: color-mix(in srgb, var(--chrome-severity-warn) 45%, transparent); background: color-mix(in srgb, var(--chrome-severity-warn) 10%, transparent); } | |
| .ui-badge--danger { color: var(--chrome-severity-err); border-color: color-mix(in srgb, var(--chrome-severity-err) 45%, transparent); background: color-mix(in srgb, var(--chrome-severity-err) 10%, transparent); } | |
| .ui-badge--info { color: #83a598; border-color: color-mix(in srgb, #83a598 45%, transparent); background: color-mix(in srgb, #83a598 10%, transparent); } | |
| .ui-badge--violet { color: var(--chrome-fg-muted); border-color: var(--chrome-border-strong); background: transparent; } | |
| /* pulse modifier — for "loading" / "thinking" states */ | |
| .ui-badge--pulse .ui-badge__dot { animation: pulse 1.5s ease-in-out infinite; } | |