gabriel / musehub public
_canvas.scss
108 lines 3.4 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: Canvas
3 // File: src/scss/components/_canvas.scss
4 //
5 // Variants: .prof-canvas, .prof-canvas__domain, .prof-canvas__cell[data-intensity]
6 // .prof-canvas__legend, .prof-canvas__tooltip
7 // Tokens: --canvas-0 through --canvas-4, --domain-*, --bg-elevated
8 // Usage: <div class="prof-canvas">…</div>
9 //
10 // Notes: Activity canvas replaced the old contribution graph entirely.
11 // data-intensity 0-4 maps to --canvas-0 through --canvas-4.
12 // Only domains with commits are rendered (no phantom rows).
13 // ─────────────────────────────────────────────────────────────────────────────
14
15 .prof-canvas {
16 display: flex;
17 flex-direction: column;
18 gap: var(--space-3);
19 }
20
21 .prof-canvas__domain {
22 display: flex;
23 flex-direction: column;
24 gap: var(--space-1);
25 }
26
27 .prof-canvas__domain-label {
28 font-family: var(--font-mono);
29 font-size: var(--text-xs);
30 font-weight: var(--weight-semibold);
31 text-transform: uppercase;
32 letter-spacing: 0.8px;
33 color: var(--text-muted);
34 }
35
36 .prof-canvas__domain-label[data-domain="code"] { color: var(--domain-code); }
37 .prof-canvas__domain-label[data-domain="midi"] { color: var(--domain-midi); }
38 .prof-canvas__domain-label[data-domain="mist"] { color: var(--domain-mist); }
39 .prof-canvas__domain-label[data-domain="agent"] { color: var(--domain-agent); }
40 .prof-canvas__domain-label[data-domain="generic"] { color: var(--domain-generic); }
41
42 .prof-canvas__grid {
43 display: flex;
44 gap: 2px;
45 overflow-x: auto;
46 }
47
48 .prof-canvas__week {
49 display: flex;
50 flex-direction: column;
51 gap: 2px;
52 }
53
54 .prof-canvas__cell {
55 width: 11px;
56 height: 11px;
57 border-radius: 2px;
58 background: var(--canvas-0);
59 box-shadow: inset 0 0 0 1px var(--canvas-border);
60 cursor: default;
61 transition: opacity var(--transition-fast);
62
63 &[data-intensity="0"] { background: var(--canvas-0); }
64 &[data-intensity="1"] { background: var(--canvas-1); }
65 &[data-intensity="2"] { background: var(--canvas-2); }
66 &[data-intensity="3"] { background: var(--canvas-3); }
67 &[data-intensity="4"] { background: var(--canvas-4); }
68
69 &:hover { opacity: 0.75; }
70 }
71
72 // Tooltip on hover
73 .prof-canvas__tooltip {
74 position: absolute;
75 background: var(--bg-elevated);
76 color: var(--text-primary);
77 border: 1px solid color-mix(in srgb, var(--canvas-2) 40%, transparent);
78 border-radius: var(--radius-sm);
79 padding: 4px var(--space-2);
80 font-size: var(--text-xs);
81 font-family: var(--font-mono);
82 white-space: nowrap;
83 pointer-events: none;
84 z-index: var(--z-tooltip);
85 box-shadow: var(--shadow-md);
86 }
87
88 // Legend strip
89 .prof-canvas__legend {
90 display: flex;
91 align-items: center;
92 gap: var(--space-2);
93 font-size: var(--text-xs);
94 color: var(--text-muted);
95 margin-top: var(--space-1);
96 }
97
98 .prof-canvas__legend-cell {
99 width: 11px;
100 height: 11px;
101 border-radius: 2px;
102
103 &[data-intensity="0"] { background: var(--canvas-0); }
104 &[data-intensity="1"] { background: var(--canvas-1); }
105 &[data-intensity="2"] { background: var(--canvas-2); }
106 &[data-intensity="3"] { background: var(--canvas-3); }
107 &[data-intensity="4"] { background: var(--canvas-4); }
108 }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago