gabriel / musehub public
_canvas.scss
107 lines 3.4 KB
Raw
sha256:bb2baaabdd19320bde50cb69d447fd1c1e571467df729be1a23b5e93064b046a feat(intel): standardize headers, gauge icon, velocity card… Sonnet 4.6 minor ⚠ breaking 143 days 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 cursor: default;
60 transition: opacity var(--transition-fast);
61
62 &[data-intensity="0"] { background: var(--canvas-0); }
63 &[data-intensity="1"] { background: var(--canvas-1); }
64 &[data-intensity="2"] { background: var(--canvas-2); }
65 &[data-intensity="3"] { background: var(--canvas-3); }
66 &[data-intensity="4"] { background: var(--canvas-4); }
67
68 &:hover { opacity: 0.75; }
69 }
70
71 // Tooltip on hover
72 .prof-canvas__tooltip {
73 position: absolute;
74 background: var(--bg-elevated);
75 color: var(--text-primary);
76 border: 1px solid color-mix(in srgb, var(--canvas-2) 40%, transparent);
77 border-radius: var(--radius-sm);
78 padding: 4px var(--space-2);
79 font-size: var(--text-xs);
80 font-family: var(--font-mono);
81 white-space: nowrap;
82 pointer-events: none;
83 z-index: var(--z-tooltip);
84 box-shadow: var(--shadow-md);
85 }
86
87 // Legend strip
88 .prof-canvas__legend {
89 display: flex;
90 align-items: center;
91 gap: var(--space-2);
92 font-size: var(--text-xs);
93 color: var(--text-muted);
94 margin-top: var(--space-1);
95 }
96
97 .prof-canvas__legend-cell {
98 width: 11px;
99 height: 11px;
100 border-radius: 2px;
101
102 &[data-intensity="0"] { background: var(--canvas-0); }
103 &[data-intensity="1"] { background: var(--canvas-1); }
104 &[data-intensity="2"] { background: var(--canvas-2); }
105 &[data-intensity="3"] { background: var(--canvas-3); }
106 &[data-intensity="4"] { background: var(--canvas-4); }
107 }
File History 1 commit
sha256:bb2baaabdd19320bde50cb69d447fd1c1e571467df729be1a23b5e93064b046a feat(intel): standardize headers, gauge icon, velocity card… Sonnet 4.6 minor ⚠ 143 days ago