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: #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-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: #0d0d1a; // void

103

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

104

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

105

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

106

--canvas-4: #a855f7; // amethyst (was fuchsia #c026d3 — same energy, less neon)

107

108

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

109

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

110

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

111

// Legacy aliases

112

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

113

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

114

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

115

116

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

117

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

118

--glow-spectral:

119

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

120

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

121

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

122

--glow-accent:

123

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

124

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

125

--glow-agent:

126

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

127

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

128

129

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

130

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

131

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

132

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

133

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

134

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

135

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

136

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

137

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

138

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

139

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

140

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

141

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

142

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

143

144

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

145

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

146

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

147

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

148

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

149

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

150

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

151

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

152

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

153

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

154

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

155

156

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

167

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

168

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

169

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

170

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

182

--line-height-normal: 1.65;

183

--line-height-relaxed: 1.8;

184

185

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

206

207

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

208

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

209

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

210

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

211

212

--duration-fast: 80ms;

213

--duration-base: 150ms;

214

--duration-slow: 250ms;

215

--duration-reveal: 400ms;

216

217

// Legacy transition aliases

218

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

219

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

220

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

221

222

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

223

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

224

// over shadows for interactive feedback.

225

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

226

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

227

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

228

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

229

230

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

--z-base: 0;

--z-raised: 10;

--z-overlay: 100;

--z-modal: 200;

--z-toast: 300;

--z-tooltip: 400;

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

239

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

}

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

244

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

245

// are unchanged; backgrounds and text flip.

246

[data-theme="light"] {

247

--bg-void: #ffffff;

248

--bg-base: #f8fafc;

249

--bg-surface: #f1f5f9;

250

--bg-elevated: #e2e8f0;

251

--bg-overlay: #cbd5e1;

252

--bg-hover: #e2e8f0;

253

254

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

255

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

256

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

257

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

258

259

--text-primary: #0f172a;

260

--text-secondary: #475569;

261

--text-muted: #94a3b8;

262

--text-disabled: #cbd5e1;

263

264

--code-output-bg: #f1f5f9;

265

}

266

267

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

279

}

280

281

.htmx-request #htmx-loading {

display: block;

opacity: 1;

}

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