gabriel / musehub public
_chips.scss
251 lines 8.3 KB
Raw
sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 8 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Chips
3 // File: src/scss/components/_chips.scss
4 //
5 // Variants: .chip--code .chip--midi .chip--mist .chip--agent .chip--generic
6 // .filter-chip .filter-chip.active .ticker-chip .ticker-chip.active
7 // .mono-badge .mono-badge--accent .mono-badge--success
8 // Tokens: --domain-*, --color-accent, --bg-overlay, --border-default
9 // Usage: <span class="chip chip--midi">midi</span>
10 //
11 // Notes: Domain chips on profile cards. Filter chips in sidebars.
12 // ticker-chip for horizontal scroll strips.
13 // ─────────────────────────────────────────────────────────────────────────────
14
15 .chip {
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-default);
26 background: var(--bg-overlay);
27 color: var(--text-secondary);
28 }
29
30 .chip--code { background: var(--domain-code-bg); color: var(--domain-code); border-color: var(--domain-code-border); }
31 .chip--midi { background: var(--domain-midi-bg); color: var(--domain-midi); border-color: var(--domain-midi-border); }
32 .chip--mist { background: var(--domain-mist-bg); color: var(--domain-mist); border-color: var(--domain-mist-border); }
33 .chip--agent { background: var(--domain-agent-bg); color: var(--domain-agent); border-color: var(--domain-agent-border); }
34 .chip--generic { background: var(--domain-generic-bg); color: var(--domain-generic); border-color: var(--domain-generic-border); }
35
36 // Filter chip (explore sidebar, issue filters)
37 .filter-chip {
38 display: inline-block;
39 font-family: var(--font-mono);
40 font-size: 11px;
41 padding: 3px 10px;
42 border-radius: var(--radius-full);
43 background: var(--bg-overlay);
44 color: var(--text-secondary);
45 border: 1px solid var(--border-default);
46 cursor: pointer;
47 margin: 2px 3px 2px 0;
48 text-decoration: none;
49 transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
50
51 &:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
52
53 &.active {
54 background: color-mix(in srgb, var(--color-accent) 12%, transparent);
55 color: var(--color-accent);
56 border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
57 }
58 }
59
60 // Ticker / marquee chip
61 .ticker-chip {
62 font-family: var(--font-mono);
63 font-size: 13px;
64 padding: 4px var(--space-4);
65 border-radius: var(--radius-full);
66 border: 1px solid var(--border-default);
67 white-space: nowrap;
68 color: var(--text-muted);
69 background: transparent;
70 flex-shrink: 0;
71
72 &.active {
73 border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
74 color: var(--color-accent);
75 background: color-mix(in srgb, var(--color-accent) 8%, transparent);
76 }
77 }
78
79 // Monospace eyebrow badge
80 .mono-badge {
81 font-family: var(--font-mono);
82 font-size: var(--text-xs);
83 font-weight: var(--weight-medium);
84 padding: 2px var(--space-2);
85 border-radius: 4px;
86 border: 1px solid var(--border-subtle);
87 background: var(--bg-overlay);
88 color: var(--text-muted);
89 white-space: nowrap;
90 letter-spacing: 0.3px;
91 }
92
93 .mono-badge--accent, .mono-badge-accent {
94 color: var(--color-accent);
95 background: color-mix(in srgb, var(--color-accent) 8%, transparent);
96 border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
97 }
98
99 .mono-badge--success, .mono-badge-success {
100 color: var(--color-success);
101 background: color-mix(in srgb, var(--color-success) 8%, transparent);
102 border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
103 }
104
105 // Label chip (issue/proposal labels)
106 .label-chip {
107 display: inline-flex;
108 align-items: center;
109 gap: 5px;
110 padding: 2px 8px;
111 border-radius: var(--radius-full);
112 border: 1px solid;
113 font-size: 11px;
114 font-weight: var(--weight-medium);
115 letter-spacing: 0.02em;
116 text-decoration: none;
117 white-space: nowrap;
118 transition: filter var(--transition-fast);
119
120 &:hover { filter: brightness(1.15); text-decoration: none; }
121 &--active { box-shadow: 0 0 0 2px currentColor; }
122 }
123
124 // Project chip — repo links inside hero strip
125 .project-chip {
126 display: inline-flex;
127 align-items: center;
128 gap: 5px;
129 font-size: var(--text-xs);
130 font-weight: var(--weight-semibold);
131 font-family: var(--font-mono);
132 padding: 4px 10px;
133 border-radius: 20px;
134 text-decoration: none;
135 background: rgba(255, 255, 255, 0.04);
136 color: var(--text-muted);
137 border: 1px solid rgba(255, 255, 255, 0.08);
138 transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
139
140 &:hover {
141 color: var(--text-primary);
142 border-color: rgba(255, 255, 255, 0.18);
143 background: rgba(255, 255, 255, 0.07);
144 text-decoration: none;
145 }
146
147 &__icon { display: flex; align-items: center; }
148 }
149
150 .label-dot {
151 width: 7px;
152 height: 7px;
153 border-radius: 50%;
154 flex-shrink: 0;
155 }
156
157 // Type badge — human / agent / org identity label
158 .type-badge {
159 display: inline-flex;
160 align-items: center;
161 font-family: var(--font-mono);
162 font-size: var(--text-xs);
163 font-weight: var(--weight-semibold);
164 padding: 2px 7px;
165 border-radius: 4px;
166 letter-spacing: 0.04em;
167 text-transform: lowercase;
168 border: 1px solid;
169 vertical-align: middle;
170 margin-left: var(--space-2);
171
172 &--human { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }
173 &--agent { color: var(--color-purple); background: color-mix(in srgb, var(--color-purple) 12%, transparent); border-color: color-mix(in srgb, var(--color-purple) 30%, transparent); }
174 &--org { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, transparent); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
175 &--xs { font-size: 9px; padding: 1px 5px; margin-left: var(--space-1); }
176 }
177
178 // Verified badge — check + "verified" inline
179 .verified-badge {
180 display: inline-flex;
181 align-items: center;
182 gap: 4px;
183 font-size: var(--text-xs);
184 font-weight: var(--weight-semibold);
185 color: var(--color-success);
186 background: color-mix(in srgb, var(--color-success) 10%, transparent);
187 border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
188 border-radius: 4px;
189 padding: 2px 7px;
190 letter-spacing: 0.03em;
191 }
192
193 // Repo health indicator (circular progress + score)
194 .repo-health {
195 display: inline-flex;
196 align-items: center;
197 gap: 3px;
198 font-size: 11px;
199 font-weight: var(--weight-semibold);
200 font-family: var(--font-mono);
201 padding: 2px 6px;
202 border-radius: 4px;
203
204 &--good { color: var(--color-success); }
205 &--fair { color: var(--color-warning); }
206 &--poor { color: var(--color-danger); }
207 }
208
209 // Repo tag — domain/topic label on repo cards
210 .repo-tag {
211 display: inline-block;
212 font-size: 10px;
213 padding: 1px 6px;
214 border-radius: var(--radius-full);
215 background: var(--bg-overlay);
216 border: 1px solid var(--border-subtle);
217 color: var(--text-muted);
218 font-family: var(--font-mono);
219 }
220
221 // Private badge
222 .badge--private {
223 font-size: 10px;
224 padding: 1px 7px;
225 border-radius: var(--radius-full);
226 background: color-mix(in srgb, var(--color-warning) 10%, transparent);
227 border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent);
228 color: var(--color-warning);
229 font-weight: var(--weight-medium);
230 letter-spacing: 0.03em;
231 }
232
233 // Capability tag (agent scope panel)
234 .cap {
235 display: inline-flex;
236 align-items: center;
237 gap: 5px;
238 font-family: var(--font-mono);
239 font-size: 11px;
240 padding: 3px 8px;
241 border-radius: 4px;
242 border: 1px solid var(--border-subtle);
243 background: var(--bg-surface);
244 color: var(--text-secondary);
245
246 &--granted {
247 color: var(--color-success);
248 background: color-mix(in srgb, var(--color-success) 8%, transparent);
249 border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
250 }
251 }
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