_pills.scss
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2
feat: add repair-commit wire endpoint (API parity with repa…
Opus 4.8
minor
⚠ breaking
1 day ago
| 1 | // ───────────────────────────────────────────────────────────────────────────── |
| 2 | // Component: Pills |
| 3 | // File: src/scss/components/_pills.scss |
| 4 | // |
| 5 | // Variants: .pill[data-domain], .pill--status[data-status] |
| 6 | // .pill--open .pill--merged .pill--closed |
| 7 | // Tokens: --domain-*, --color-success, --color-purple, --color-neutral |
| 8 | // Usage: <span class="pill" data-domain="code">code</span> |
| 9 | // <span class="pill pill--status" data-status="open">open</span> |
| 10 | // |
| 11 | // Notes: Domain pills use the full domain token set (primary/bg/border). |
| 12 | // Status: open=green, merged=violet, closed=slate. |
| 13 | // ───────────────────────────────────────────────────────────────────────────── |
| 14 | |
| 15 | .pill { |
| 16 | display: inline-flex; |
| 17 | align-items: center; |
| 18 | gap: 4px; |
| 19 | padding: 2px var(--space-2); |
| 20 | border-radius: var(--radius-full); |
| 21 | font-family: var(--font-mono); |
| 22 | font-size: var(--text-xs); |
| 23 | font-weight: var(--weight-medium); |
| 24 | white-space: nowrap; |
| 25 | border: 1px solid var(--border-subtle); |
| 26 | background: var(--bg-overlay); |
| 27 | color: var(--text-secondary); |
| 28 | } |
| 29 | |
| 30 | // Domain pills |
| 31 | .pill[data-domain="code"] { |
| 32 | background: var(--domain-code-bg); |
| 33 | color: var(--domain-code); |
| 34 | border-color: var(--domain-code-border); |
| 35 | } |
| 36 | |
| 37 | .pill[data-domain="midi"] { |
| 38 | background: var(--domain-midi-bg); |
| 39 | color: var(--domain-midi); |
| 40 | border-color: var(--domain-midi-border); |
| 41 | } |
| 42 | |
| 43 | .pill[data-domain="mist"] { |
| 44 | background: var(--domain-mist-bg); |
| 45 | color: var(--domain-mist); |
| 46 | border-color: var(--domain-mist-border); |
| 47 | } |
| 48 | |
| 49 | .pill[data-domain="agent"] { |
| 50 | background: var(--domain-agent-bg); |
| 51 | color: var(--domain-agent); |
| 52 | border-color: var(--domain-agent-border); |
| 53 | } |
| 54 | |
| 55 | .pill[data-domain="generic"], |
| 56 | .pill[data-domain=""] { |
| 57 | background: var(--domain-generic-bg); |
| 58 | color: var(--domain-generic); |
| 59 | border-color: var(--domain-generic-border); |
| 60 | } |
| 61 | |
| 62 | // Status pills |
| 63 | .pill--status[data-status="open"] { |
| 64 | background: color-mix(in srgb, var(--color-success) 12%, transparent); |
| 65 | color: var(--color-success); |
| 66 | border-color: color-mix(in srgb, var(--color-success) 30%, transparent); |
| 67 | } |
| 68 | |
| 69 | .pill--status[data-status="merged"] { |
| 70 | background: color-mix(in srgb, var(--color-purple) 12%, transparent); |
| 71 | color: var(--color-purple); |
| 72 | border-color: color-mix(in srgb, var(--color-purple) 30%, transparent); |
| 73 | } |
| 74 | |
| 75 | .pill--status[data-status="closed"] { |
| 76 | background: color-mix(in srgb, var(--color-neutral) 12%, transparent); |
| 77 | color: var(--color-neutral); |
| 78 | border-color: color-mix(in srgb, var(--color-neutral) 30%, transparent); |
| 79 | } |
File History
1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2
feat: add repair-commit wire endpoint (API parity with repa…
Opus 4.8
minor
⚠
1 day ago