gabriel / musehub public
_code.scss
114 lines 4.6 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 23 hours ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Code
3 // File: src/scss/components/_code.scss
4 //
5 // Variants: pre, code, pre code, .diff-track-*, .diff-sign-*
6 // Tokens: --code-output-bg, --bg-overlay, --border-default, --font-mono
7 // --color-success, --color-danger, --color-accent
8 // Usage: <pre><code>…</code></pre>
9 //
10 // Notes: Syntax highlight colors (hljs) are intentionally hardcoded —
11 // they are part of the One Dark theme, not the design system.
12 // ─────────────────────────────────────────────────────────────────────────────
13
14 pre {
15 background: var(--code-output-bg);
16 border: 1px solid var(--border-default);
17 border-radius: var(--radius-base);
18 padding: var(--space-3);
19 font-size: 13px;
20 font-family: var(--font-mono);
21 overflow-x: auto;
22 white-space: pre-wrap;
23 word-break: break-word;
24 color: var(--text-secondary);
25 line-height: 1.65;
26 }
27
28 code {
29 font-family: var(--font-mono);
30 font-size: 0.88em;
31 background: var(--bg-overlay);
32 border: 1px solid var(--border-subtle);
33 padding: 1px 6px;
34 border-radius: 4px;
35 }
36
37 pre code {
38 background: transparent;
39 border: none;
40 padding: 0;
41 font-size: inherit;
42 color: inherit;
43 }
44
45 // ── highlight.js token theme (global — used by blob, diff, symbol pages) ─────
46 // Mapped to design-system tokens where possible; hardcoded for tokens that
47 // need stable color regardless of theme (e.g. string green, keyword purple).
48
49 .hljs { background: rgba(0,0,0,0); }
50 .hljs-keyword,
51 .hljs-selector-tag { color: var(--color-accent); font-weight: 500; }
52 .hljs-built_in,
53 .hljs-builtin-name { color: var(--color-warning); }
54 .hljs-type,
55 .hljs-class .hljs-title,
56 .hljs-title.hljs-class { color: var(--color-orange); }
57 .hljs-function .hljs-title,
58 .hljs-title.hljs-function,
59 .hljs-title { color: var(--color-accent-link); }
60 .hljs-string,
61 .hljs-doctag { color: var(--color-success); }
62 .hljs-number,
63 .hljs-literal { color: var(--color-orange); }
64 .hljs-comment,
65 .hljs-quote { color: var(--text-muted); font-style: italic; }
66 .hljs-meta,
67 .hljs-meta .hljs-keyword { color: var(--text-muted); }
68 // HTML / XML / Jinja
69 .hljs-tag { color: var(--text-secondary); }
70 .hljs-name { color: var(--color-accent); }
71 .hljs-attr { color: var(--color-accent-link); }
72 .hljs-template-tag { color: var(--color-accent); font-weight: 500; }
73 .hljs-template-variable { color: var(--color-success); }
74 // CSS
75 .hljs-selector-class,
76 .hljs-selector-id { color: var(--color-accent-link); }
77 .hljs-attribute { color: var(--color-accent); }
78 // General
79 .hljs-variable,
80 .hljs-subst { color: var(--text-primary); }
81 .hljs-property { color: var(--color-accent-link); }
82 .hljs-operator,
83 .hljs-punctuation { color: var(--text-muted); }
84 .hljs-params { color: var(--text-secondary); }
85 .hljs-symbol,
86 .hljs-bullet { color: var(--color-orange); }
87 .hljs-section,
88 .hljs-addition { color: var(--color-success); }
89 .hljs-deletion { color: var(--color-danger); }
90 .hljs-emphasis { font-style: italic; }
91 .hljs-strong { font-weight: 700; }
92 .hljs-link { text-decoration: underline; color: var(--color-accent-link); }
93
94 // Diff track rows (musical / multi-domain diffs)
95 .diff-track-row {
96 display: flex;
97 align-items: center;
98 gap: var(--space-3);
99 padding: var(--space-2) var(--space-3);
100 border-radius: var(--radius-sm);
101 margin-bottom: var(--space-1);
102 }
103
104 .diff-track-added { background: color-mix(in srgb, var(--color-success) 10%, transparent); border-left: 3px solid var(--color-success); }
105 .diff-track-removed { background: color-mix(in srgb, var(--color-danger) 10%, transparent); border-left: 3px solid var(--color-danger); }
106 .diff-track-changed { background: color-mix(in srgb, var(--color-accent) 10%, transparent); border-left: 3px solid var(--color-accent); }
107
108 .diff-sign { font-size: var(--text-lg); font-weight: var(--weight-bold); width: 20px; flex-shrink: 0; }
109 .diff-sign-add,
110 .diff-sign-add { color: var(--color-success); }
111 .diff-sign-del,
112 .diff-sign-remove { color: var(--color-danger); }
113 .diff-sign-ctx,
114 .diff-sign-change { color: var(--color-accent); }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 23 hours ago