gabriel / musehub public
_chips.scss
251 lines 8.3 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day 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 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago