src/scss/theme/_tokens.scss · gabriel/musehub

1

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

2

// Theme: Spectral

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: #a8b8cc; // labels, metadata, secondary info

42

--text-muted: #6b7fa0; // timestamps, counts, disabled

43

--text-disabled: #3d4f68; // 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-teal: #2dd4bf;

61

62

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

63

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

64

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

65

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

66

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

67

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

68

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

69

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

70

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

71

--gradient-hero:

72

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

73

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

74

75

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

76

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

77

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

78

--domain-code: #60a5fa;

79

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

80

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

81

82

--domain-midi: #a78bfa;

83

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

84

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

85

86

--domain-mist: #c084fc;

87

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

88

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

89

90

--domain-generic: #64748b;

91

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

92

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

93

94

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

95

--domain-agent: #e879f9;

96

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

97

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

98

99

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

100

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

101

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

102

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

103

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

104

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

105

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

106

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

107

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

108

109

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

110

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

111

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

112

// Legacy aliases

113

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

114

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

115

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

116

117

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

118

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

119

--glow-spectral:

120

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

121

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

122

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

123

--glow-accent:

124

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

125

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

126

--glow-agent:

127

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

128

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

129

130

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

131

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

132

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

133

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

134

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

135

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

136

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

137

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

138

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

139

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

140

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

141

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

142

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

143

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

144

145

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

146

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

147

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

148

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

149

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

150

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

151

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

152

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

153

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

154

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

155

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

156

157

// ── 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 ────────────────────────────────────────────────────────────

168

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

169

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

170

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

171

--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;

183

--line-height-normal: 1.65;

184

--line-height-relaxed: 1.8;

185

186

// ── 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;

207

208

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

209

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

210

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

211

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

212

213

--duration-fast: 80ms;

214

--duration-base: 150ms;

215

--duration-slow: 250ms;

216

--duration-reveal: 400ms;

217

218

// Legacy transition aliases

219

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

220

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

221

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

222

223

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

224

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

225

// over shadows for interactive feedback.

226

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

227

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

228

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

229

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

230

231

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

--z-base: 0;

--z-raised: 10;

--z-overlay: 100;

--z-modal: 200;

--z-toast: 300;

--z-tooltip: 400;

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

240

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

}

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

245

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

246

// are unchanged; backgrounds and text flip.

247

[data-theme="light"] {

248

--bg-void: #f4f4f8; // cool off-white — barely perceptible tint

249

--bg-base: #ededf3; // blue-gray ground — soft, not purple

250

--bg-surface: #ffffff; // cards/panels white — elevated above base

251

--bg-elevated: #f8f8fb; // slightly lifted surfaces

252

--bg-overlay: #e0e0ea; // hover states, active rows

253

--bg-hover: #e8e8f0; // lighter hover for dense lists

254

255

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

256

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

257

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

258

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

259

260

--text-primary: #0f172a;

261

--text-secondary: #475569;

262

--text-muted: #94a3b8;

263

--text-disabled: #cbd5e1;

264

265

--code-output-bg: #f1f5f9;

266

267

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

268

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

269

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

270

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

271

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

272

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

273

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

274

}

275

276

// ── 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);

288

}

289

290

.htmx-request #htmx-loading {

display: block;

opacity: 1;

}

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