src/scss/_tokens.scss · gabriel/musehub

1

// ─────────────────────────────────────────────────────────────────────────────

2

// Theme: Spectral Dark

3

// File: src/scss/_tokens.scss

4

//

5

// Single source of truth for every design decision. All component and page

6

// partials consume these tokens — no raw hex values outside this file.

7

//

8

// Light mode: add [data-theme="light"] overrides below :root.

9

// Domain colors: --domain-{slug}-{prop} for domain-aware components.

10

// Gradients: --gradient-spectral is the canonical brand gradient.

11

// ─────────────────────────────────────────────────────────────────────────────

12

13

// Inter + JetBrains Mono loaded in base.html via bunny.net CDN.

14

15

/* Scale the entire UI to 125% */

body {

zoom: 1.25;

}

:root {

// ── Background layers (void → elevated) ───────────────────────────────────

23

// Four layers create depth without shadows. The purple tint in elevated

24

// surfaces gives the void a spectral quality — not neutral gray.

25

--bg-void: #07070f; // deepest — page backdrop

26

--bg-base: #0d1117; // grounded dark — familiar, stable

27

--bg-surface: #161b22; // cards, panels, sidebars

28

--bg-elevated: #1c1c2e; // modals, dropdowns, canvas cells, code blocks

29

--bg-overlay: #21213a; // hover states, active rows, selected items

30

--bg-hover: #2a2a42; // lighter hover for dense lists

31

32

// ── Borders (crystalline — translucent purple, barely there) ──────────────

33

// Opacity-based so they read correctly on any surface layer.

34

--border-subtle: rgba(99, 102, 241, 0.07); // dividers, hairlines

35

--border-default: rgba(99, 102, 241, 0.14); // card edges, panel outlines

36

--border-strong: rgba(139, 92, 246, 0.28); // focused inputs, active states

37

--border-glow: rgba(167, 139, 250, 0.45); // hover, selected, highlighted

38

39

// ── Text ──────────────────────────────────────────────────────────────────

40

--text-primary: #e2e8f0; // main content

41

--text-secondary: #94a3b8; // labels, metadata, secondary info

42

--text-muted: #4a5568; // timestamps, counts, disabled

43

--text-disabled: #2d3748; // truly inactive elements

44

45

// ── Accent / brand ────────────────────────────────────────────────────────

46

--color-accent: #60a5fa; // primary interactive — electric blue

47

--color-accent-link: #93c5fd; // softer hyperlink blue

48

--color-accent-muted: #1e40af; // badge backgrounds, muted accent fills

49

--color-success: #3fb950;

50

--color-success-bg: #14532d;

51

--color-warning: #d29922;

52

--color-warning-bg: #7c4b08;

53

--color-danger: #f87171;

54

--color-danger-critical: #ff2244;

55

--color-danger-bg: #991b1b;

56

--color-neutral: #64748b;

57

--color-purple: #a78bfa;

58

--color-purple-bg: #3b1f8a;

59

--color-orange: #f0883e;

60

--color-rose: #fb7185;

61

--color-teal: #2dd4bf;

62

63

// ── Spectral gradients ────────────────────────────────────────────────────

64

// --gradient-spectral is the canonical brand gradient. Use it for name

65

// text, hero accents, and primary CTAs. Cooler landing (lavender, not

66

// fuchsia) keeps it luminous without crossing into garish.

67

--gradient-spectral: linear-gradient(90deg, #60a5fa, #818cf8, #a78bfa, #c084fc);

68

--gradient-spectral-45: linear-gradient(45deg, #60a5fa, #818cf8, #a78bfa, #c084fc);

69

--gradient-agent: linear-gradient(90deg, #a78bfa, #e879f9);

70

--gradient-void: linear-gradient(180deg, #0d1117 0%, #07070f 100%);

71

--gradient-surface: linear-gradient(135deg, #161b22 0%, #1c1c2e 100%);

72

--gradient-hero:

73

radial-gradient(ellipse 60% 40% at 20% 50%, rgba(96, 165, 250, 0.06) 0%, transparent 70%),

74

radial-gradient(ellipse 50% 40% at 80% 50%, rgba(167, 139, 250, 0.05) 0%, transparent 70%);

75

76

// ── Domain color system ───────────────────────────────────────────────────

77

// Each domain has primary / bg / border. Composable into pills, cards,

78

// chip icons, canvas cells, and any domain-scoped UI.

79

--domain-code: #60a5fa;

80

--domain-code-bg: rgba(96, 165, 250, 0.08);

81

--domain-code-border: rgba(96, 165, 250, 0.18);

82

83

--domain-midi: #a78bfa;

84

--domain-midi-bg: rgba(167, 139, 250, 0.08);

85

--domain-midi-border: rgba(167, 139, 250, 0.18);

86

87

--domain-mist: #c084fc;

88

--domain-mist-bg: rgba(192, 132, 252, 0.08);

89

--domain-mist-border: rgba(192, 132, 252, 0.18);

90

91

--domain-generic: #64748b;

92

--domain-generic-bg: rgba(100, 116, 139, 0.08);

93

--domain-generic-border: rgba(100, 116, 139, 0.18);

94

95

// Agent is the most saturated domain — agents are special, they should pop.

96

--domain-agent: #e879f9;

97

--domain-agent-bg: rgba(232, 121, 249, 0.08);

98

--domain-agent-border: rgba(232, 121, 249, 0.18);

99

100

// ── Activity canvas intensity palette ─────────────────────────────────────

101

// Used in .prof-canvas__cell[data-intensity] and legend swatches.

102

// Level 0 = void/empty; level 4 = maximum activity.

103

--canvas-0: #21262d; // empty cell — clearly distinct from #0d1117 bg-base

104

--canvas-1: #1e1b4b; // indigo shadow

105

--canvas-2: #4c1d95; // deep violet

106

--canvas-3: #7c3aed; // violet

107

--canvas-4: #a855f7; // amethyst

108

--canvas-border: rgba(139, 92, 246, 0.18);

109

110

// ── Agent / provenance tokens ─────────────────────────────────────────────

111

--agent-accent: #e879f9; // fuchsia — intentionally hotter than domain-agent

112

--agent-accent-bg: rgba(232, 121, 249, 0.10);

113

// Legacy aliases

114

--domain-badge-bg: rgba(96, 165, 250, 0.08);

115

--domain-badge-text: #60a5fa;

116

--domain-badge-border: rgba(96, 165, 250, 0.18);

117

118

// ── Glow effects ──────────────────────────────────────────────────────────

119

// Use on focused inputs, selected cards, active nav items, primary CTAs.

120

--glow-spectral:

121

0 0 0 1px rgba(139, 92, 246, 0.20),

122

0 0 16px rgba(139, 92, 246, 0.12),

123

0 0 32px rgba(139, 92, 246, 0.06);

124

--glow-accent:

125

0 0 0 1px rgba(96, 165, 250, 0.25),

126

0 0 12px rgba(96, 165, 250, 0.15);

127

--glow-agent:

128

0 0 0 1px rgba(232, 121, 249, 0.25),

129

0 0 12px rgba(232, 121, 249, 0.15);

130

131

// ── Dimension slots (domain-agnostic data dimensions) ─────────────────────

132

// Five generic dimension slots for multi-track views, radar charts,

133

// insight pages, diff views. Domain plugins can remap semantics via

134

// [data-domain] rules in _domain.scss.

135

--dim-a: #60a5fa; // blue — slot A

136

--dim-a-muted: #1e3a5f;

137

--dim-b: #3fb950; // green — slot B

138

--dim-b-muted: #14532d;

139

--dim-c: #a78bfa; // violet — slot C

140

--dim-c-muted: #3b1f8a;

141

--dim-d: #f0883e; // orange — slot D

142

--dim-d-muted: #7c3010;

143

--dim-e: #f87171; // red — slot E

144

--dim-e-muted: #991b1b;

145

146

// Backward-compat MIDI aliases (deprecated — use --dim-* above)

147

--dim-harmonic: var(--dim-a);

148

--dim-harmonic-muted: var(--dim-a-muted);

149

--dim-rhythmic: var(--dim-b);

150

--dim-rhythmic-muted: var(--dim-b-muted);

151

--dim-melodic: var(--dim-c);

152

--dim-melodic-muted: var(--dim-c-muted);

153

--dim-structural: var(--dim-d);

154

--dim-structural-muted: var(--dim-d-muted);

155

--dim-dynamic: var(--dim-e);

156

--dim-dynamic-muted: var(--dim-e-muted);

157

158

// ── Track colors (8-slot palette for multi-track views) ───────────────────

--track-0: #60a5fa;

--track-1: #3fb950;

--track-2: #f0883e;

--track-3: #a78bfa;

--track-4: #f87171;

--track-5: #d29922;

--track-6: #e879f9;

--track-7: #818cf8;

// ── Typography ────────────────────────────────────────────────────────────

169

// Inter: clean, humanist sans-serif. Loaded via bunny.net in base.html.

170

// JetBrains Mono: for all code, data, hashes, counts.

171

--font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

172

--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;

--text-xs: 11px;

--text-sm: 13px;

--text-base: 15px;

--text-md: 17px;

--text-lg: 20px;

--text-xl: 24px;

--text-2xl: 32px;

--text-3xl: 48px;

--line-height-tight: 1.25;

184

--line-height-normal: 1.65;

185

--line-height-relaxed: 1.8;

186

187

// ── Spacing (8pt grid) ────────────────────────────────────────────────────

--space-1: 4px;

--space-2: 8px;

--space-3: 12px;

--space-4: 16px;

--space-5: 20px;

--space-6: 24px;

--space-7: 32px;

--space-8: 40px;

--space-9: 48px;

--space-10: 64px;

--space-11: 80px;

--space-12: 96px;

// ── Border radius ─────────────────────────────────────────────────────────

--radius-sm: 3px;

--radius-base: 6px;

--radius-md: 8px;

--radius-lg: 12px;

--radius-xl: 16px;

--radius-full: 9999px;

208

209

// ── Motion ────────────────────────────────────────────────────────────────

210

--ease-out: cubic-bezier(0.0, 0, 0.2, 1);

211

--ease-in: cubic-bezier(0.4, 0, 1, 1);

212

--ease-snap: cubic-bezier(0.0, 0, 0.1, 1); // snappy interactions

213

214

--duration-fast: 80ms;

215

--duration-base: 150ms;

216

--duration-slow: 250ms;

217

--duration-reveal: 400ms;

218

219

// Legacy transition aliases

220

--transition-fast: var(--duration-fast) var(--ease-out);

221

--transition-base: var(--duration-base) var(--ease-out);

222

--transition-slow: var(--duration-slow) var(--ease-out);

223

224

// ── Shadows ───────────────────────────────────────────────────────────────

225

// In a dark theme, drop shadows are subtle. Prefer border-lift (--border-glow)

226

// over shadows for interactive feedback.

227

--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);

228

--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);

229

--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);

230

--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.7);

231

232

// ── Z-index ladder ────────────────────────────────────────────────────────

--z-base: 0;

--z-raised: 10;

--z-overlay: 100;

--z-modal: 200;

--z-toast: 300;

--z-tooltip: 400;

// ── Code / terminal ───────────────────────────────────────────────────────

241

--code-output-bg: #07070f; // darker than --bg-base, matches --bg-void

242

243

// ── Hero gradient midpoint ────────────────────────────────────────────────

244

--bg-hero-mid: #0f1923; // dark teal-black; overridden in light mode

}

// ── Light mode overrides ───────────────────────────────────────────────────

249

// Secondary target — dark is primary. Spectral gradients and domain colors

250

// are unchanged; backgrounds and text flip.

251

[data-theme="light"] {

252

--bg-void: #ffffff;

253

--bg-base: #f8fafc;

254

--bg-surface: #f1f5f9;

255

--bg-elevated: #e2e8f0;

256

--bg-overlay: #cbd5e1;

257

--bg-hover: #e2e8f0;

258

--bg-hero-mid: #dde4ee; // hero gradient midpoint — muted in light mode

259

260

--border-subtle: rgba(99, 102, 241, 0.09);

261

--border-default: rgba(99, 102, 241, 0.18);

262

--border-strong: rgba(99, 102, 241, 0.35);

263

--border-glow: rgba(139, 92, 246, 0.50);

264

265

--text-primary: #1e293b; // slate-800 — readable without harshness

266

--text-secondary: #475569;

267

--text-muted: #94a3b8;

268

--text-disabled: #cbd5e1;

269

270

// Semantic bg colors — dark values replaced with light tints

271

--color-accent-muted: rgba(37, 99, 235, 0.10);

272

--color-success-bg: rgba(22, 163, 74, 0.10);

273

--color-warning-bg: rgba(217, 119, 6, 0.10);

274

--color-danger-bg: rgba(220, 38, 38, 0.10);

275

--color-purple-bg: rgba(109, 40, 217, 0.10);

276

277

// Dimension muted bg — dark fills become light tints

278

--dim-a-muted: rgba(37, 99, 235, 0.10);

279

--dim-b-muted: rgba(22, 163, 74, 0.10);

280

--dim-c-muted: rgba(109, 40, 217, 0.10);

281

--dim-d-muted: rgba(194, 65, 12, 0.10);

282

--dim-e-muted: rgba(220, 38, 38, 0.10);

283

284

--code-output-bg: #f1f5f9;

285

286

// Activity canvas — light mode uses opaque violet tints on a slate ground

287

--canvas-0: #e2e8ef; // empty cell — visible but subtle on #f8fafc bg-base

288

--canvas-1: #c4b5fd; // violet-300

289

--canvas-2: #8b5cf6; // violet-500

290

--canvas-3: #7c3aed; // violet-600

291

--canvas-4: #6d28d9; // violet-700

292

--canvas-border: rgba(99, 102, 241, 0.20);

293

}

294

295

// ── HTMX loading indicator ────────────────────────────────────────────────

#htmx-loading {

position: fixed;

top: 0;

left: 0;

right: 0;

height: 2px;

background: var(--gradient-spectral);

z-index: 9999;

display: none;

opacity: 0;

transition: opacity var(--transition-fast);

307

}

308

309

.htmx-request #htmx-loading {

display: block;

opacity: 1;

}

.htmx-request.htmx-indicator { display: block; }