gabriel / musehub public
_badges.scss
70 lines 6.2 KB
Raw
sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 8 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Badges
3 // File: src/scss/components/_badges.scss
4 //
5 // Variants: .badge--open .badge--closed .badge--merged .badge--active
6 // .badge--clean .badge--dirty .badge--error
7 // .badge--human .badge--agent .badge--verified .badge--deprecated
8 // .badge--{status} for CI: success/failure/running/pending/cancelled
9 // Tokens: --color-success, --color-danger, --color-purple, --color-warning
10 // --domain-agent, --text-secondary
11 // Usage: <span class="badge badge--open">open</span>
12 //
13 // Notes: Agent badge uses fuchsia — agents should pop.
14 // Human badge is intentionally understated.
15 // ─────────────────────────────────────────────────────────────────────────────
16
17 .badge {
18 display: inline-flex;
19 align-items: center;
20 gap: 4px;
21 padding: 2px var(--space-2);
22 border-radius: var(--radius-full);
23 font-family: var(--font-mono);
24 font-size: var(--text-xs);
25 font-weight: var(--weight-semibold);
26 line-height: var(--line-height-tight);
27 white-space: nowrap;
28 letter-spacing: 0.3px;
29 border: 1px solid transparent;
30 }
31
32 // State badges
33 .badge--open, .badge-open { background: var(--color-accent-muted); color: var(--text-primary); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }
34 .badge--closed, .badge-closed { background: color-mix(in srgb, var(--color-neutral) 15%, transparent); color: var(--text-secondary); border-color: color-mix(in srgb, var(--color-neutral) 30%, transparent); }
35 .badge--merged, .badge-merged { background: var(--color-purple-bg); color: var(--text-primary); border-color: color-mix(in srgb, var(--color-purple) 30%, transparent); }
36 .badge--active, .badge-active { background: var(--color-success-bg); color: var(--text-primary); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
37 .badge--clean, .badge-clean { background: var(--color-success-bg); color: var(--text-primary); }
38 .badge--dirty, .badge-dirty { background: var(--color-warning-bg); color: var(--text-primary); }
39 .badge--error, .badge-error { background: var(--color-danger-bg); color: var(--text-primary); }
40
41 // CI status badges
42 .badge--success { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 25%, transparent); }
43 .badge--failure { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 25%, transparent); }
44 .badge--running { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 25%, transparent); }
45 .badge--pending { background: color-mix(in srgb, var(--text-secondary) 10%, transparent); color: var(--text-muted); border-color: var(--border-subtle); }
46 .badge--cancelled { background: color-mix(in srgb, var(--text-muted) 10%, transparent); color: var(--text-muted); border-color: var(--border-subtle); }
47 .badge--warning { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 25%, transparent); }
48
49 // Identity / provenance badges
50 .badge--human { color: var(--text-secondary); border-color: var(--border-default); }
51 .badge--agent { background: var(--agent-accent-bg); color: var(--agent-accent); border-color: color-mix(in srgb, var(--agent-accent) 30%, transparent); }
52 .badge--verified { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 25%, transparent); }
53 .badge--deprecated { background: color-mix(in srgb, var(--color-orange) 12%, transparent); color: var(--color-orange); border-color: color-mix(in srgb, var(--color-orange) 25%, transparent); }
54
55 // MCP tool type badges
56 .badge--read { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 20%, transparent); }
57 .badge--write { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 20%, transparent); }
58 .badge--cli { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 20%, transparent); }
59 .badge--elicit { background: color-mix(in srgb, var(--color-purple) 12%, transparent); color: var(--color-purple); border-color: color-mix(in srgb, var(--color-purple) 20%, transparent); }
60 .badge--mist { background: color-mix(in srgb, var(--domain-mist) 12%, transparent); color: var(--domain-mist); border-color: color-mix(in srgb, var(--domain-mist) 20%, transparent); }
61 .badge--server { background: var(--bg-hover); color: var(--text-muted); border-color: var(--border-subtle); }
62 .badge--resource { background: color-mix(in srgb, var(--color-orange) 12%, transparent); color: var(--color-orange); border-color: color-mix(in srgb, var(--color-orange) 20%, transparent); }
63 .badge--prompt { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 20%, transparent); }
64
65 // Dimension badges (for MIDI/multi-domain views)
66 .badge-dim-harmonic { background: var(--dim-harmonic-muted); color: var(--text-primary); }
67 .badge-dim-rhythmic { background: var(--dim-rhythmic-muted); color: var(--text-primary); }
68 .badge-dim-melodic { background: var(--dim-melodic-muted); color: var(--text-primary); }
69 .badge-dim-structural { background: var(--dim-structural-muted); color: var(--text-primary); }
70 .badge-dim-dynamic { background: var(--dim-dynamic-muted); color: var(--text-primary); }
File History 14 commits
sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 8 days ago
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 8 days ago
sha256:408916fc5973ba59c6e4eebaa80ebdcc801c0a63205651e25009d11548f79454 chore: bump version to 0.2.0.dev2 — nightly.2, matching muse Sonnet 4.6 patch 11 days ago
sha256:d035733f21ccff27735fddebfbbe0ed24565a32a22db8de5885402262671ecd2 chore: bump version to 0.2.0rc15 for musehub#113 fix release Sonnet 4.6 patch 14 days ago
sha256:0032d6cfa33bc3c8367436ad768e7dd0e339b4332153160247da8266cb5fa352 Merge branch 'task/version-tags-phase3-server' into dev Human 17 days ago
sha256:4669620efda9ff41c55bdefd1f7bfe1c239d468428744c84ead9957e5a003a53 merge: rescue snapshot-recovery hardening (c00aa21d) into d… Opus 4.8 minor ⚠ 29 days ago
sha256:a59da49c4611b970fc4b6ae48678ce4943261c213a07ddbd73ce9201df869b4a fix: remove false-positive proposal_comments index drop fro… Sonnet 4.6 patch 33 days ago
sha256:0a240d6dbff234f07d98a28a4a9a68db702f3f9ff9260196f24219bdb1c0b6f3 feat: render markdown mists as HTML with heading anchor links Sonnet 4.6 patch 34 days ago
sha256:24a7d47486ebc4ebd1832830580e177ec6f877b48dced8c000e198cdec4ce9d6 Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:b9ff931d147e0114a1f17060f415b89ed551c170a91ff226c70437aa5c85f9ee Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:d1122d21e73471879b460037b22c0b50fded7c423444a176f248428f75dac39c Merge 'task/fix-issue-pagination-cursor' into 'dev' — propo… Human 35 days ago
sha256:01e18975e73d2b3cd5b6db7929c895bef9aa6e0d4391dc5b2adfc548b41318dd Merge 'feat/adding-debug-logs-to-staging' into 'dev' — prop… Human 35 days ago
sha256:6b1949fc2797ca4c1936a637a4cbfec828ef56cf52398a2e74ca3c4f494e728f fix: use wire_bytes not mpack_bytes_raw in compute_object_b… Sonnet 4.6 patch 48 days ago
sha256:b99f2455dc346966d040133f5203297e6e3ef5803a93728a2c30568d0a0f7583 rename: delta_add → delta_upsert across wire format, models… Sonnet 4.6 patch 50 days ago