src/scss/_tokens.scss · gabriel/musehub

1

/*

2

* MuseHub Design Tokens

3

*

4

* CSS custom properties that form the foundation of the MuseHub design system.

5

* All component classes consume these tokens — do not hardcode hex values in

6

* components.css, layout.css, or _domain.scss. Changing a token here cascades

7

* the change across every page automatically.

8

*

9

* Dark theme is the default (and currently the only supported theme).

10

* Future light-theme support: add a [data-theme="light"] selector block that

11

* overrides the --color-* tokens defined here.

12

*

13

* Dimension tokens (--dim-a through --dim-e) are domain-agnostic aliases.

14

* MIDI maps: a=harmonic, b=rhythmic, c=melodic, d=structural, e=dynamic.

15

* Domain-specific overrides can remap them via [data-domain="<slug>"] rules

* in _domain.scss.

*/

/* Scale the entire UI to 125% — zoom applies to all units including px,

20

matching what the browser's Cmd++ zoom does at 125%. */

body {

zoom: 1.25;

}

:root {

/* -------------------------------------------------------------------------

27

* Surface / background hierarchy (darkest → lightest)

28

* --bg-base deepest background — page backdrop

29

* --bg-surface primary card / panel surface

30

* --bg-overlay elevated / nested surface (artifact cards, code blocks)

31

* --bg-hover interactive hover state

32

* ------------------------------------------------------------------------- */

33

--bg-base: #0d1117;

34

--bg-surface: #161b22;

35

--bg-overlay: #21262d;

36

--bg-hover: #30363d;

37

38

/* -------------------------------------------------------------------------

39

* Border

40

* ------------------------------------------------------------------------- */

41

--border-subtle: #21262d;

42

--border-default: #30363d;

43

--border-muted: #484f58;

44

45

/* -------------------------------------------------------------------------

46

* Text

47

* ------------------------------------------------------------------------- */

48

--text-primary: #e6edf3;

49

--text-secondary: #c9d1d9;

50

--text-muted: #8b949e;

51

--text-disabled: #484f58;

52

53

/* -------------------------------------------------------------------------

54

* Accent / brand

55

* ------------------------------------------------------------------------- */

56

--color-accent: #4f8ef7; /* primary interactive / CTA blue (Muse protocol) */

57

--color-accent-link: #58a6ff; /* softer hyperlink blue */

58

--color-accent-muted: #2a5fd4; /* badge backgrounds, muted accent fills */

59

--color-success: #3fb950;

60

--color-success-bg: #238636;

61

--color-warning: #d29922;

62

--color-warning-bg: #9e6a03;

63

--color-danger: #f85149;

64

--color-danger-bg: #b91c1c;

65

--color-neutral: #8b949e;

66

--color-purple: #bc8cff;

67

--color-purple-bg: #6e40c9;

68

--color-orange: #f0883e;

69

70

/* -------------------------------------------------------------------------

71

* Domain-agnostic dimension color tokens (--dim-a … --dim-e)

72

*

73

* Five generic dimension slots usable by any domain plugin.

74

* MIDI mapping: a=harmonic, b=rhythmic, c=melodic, d=structural, e=dynamic.

75

* Code mapping: a=syntax, b=semantics, c=types, d=tests, e=docs.

76

*

77

* Each slot has a primary and a muted (background/badge) variant.

78

* Domain-specific named aliases are set in _domain.scss under

79

* [data-domain="midi"] / [data-domain="code"] / etc.

80

* Used in viewers, radar charts, insight pages, and diff views.

81

* ------------------------------------------------------------------------- */

82

--dim-a: #388bfd; /* blue — slot A */

83

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

84

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

85

--dim-b-muted: #1a5c2a;

86

--dim-c: #bc8cff; /* purple — slot C */

87

--dim-c-muted: #5a3e8a;

88

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

89

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

90

--dim-e: #f85149; /* red — slot E */

91

--dim-e-muted: #7a1a18;

92

93

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

94

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

95

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

96

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

97

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

98

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

99

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

100

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

101

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

102

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

103

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

104

105

/* -------------------------------------------------------------------------

106

* Domain badge tokens

107

* Used for the @author/slug pill shown on repo cards, repo headers,

108

* and the domain browser.

109

* ------------------------------------------------------------------------- */

110

--domain-badge-bg: #1c2a3a;

111

--domain-badge-text: #58a6ff;

112

--domain-badge-border: #2a4a6a;

113

114

/* -------------------------------------------------------------------------

115

* Agent accent token

116

* Used for the "agent" badge in activity feeds and event streams,

117

* and for agent-authored commit indicators.

118

* ------------------------------------------------------------------------- */

119

--agent-accent: #a78bfa; /* violet — distinct from human-blue accent */

120

--agent-accent-bg: #2d1f5e;

121

122

/* -------------------------------------------------------------------------

123

* Track colors — 8 distinct palette for multi-track views

124

* (piano roll lanes, arrangement matrix, contributor graphs)

125

* ------------------------------------------------------------------------- */

--track-0: #388bfd;

--track-1: #3fb950;

--track-2: #f0883e;

--track-3: #bc8cff;

--track-4: #f85149;

--track-5: #d29922;

--track-6: #39d353;

--track-7: #58a6ff;

/* -------------------------------------------------------------------------

136

* Spacing scale (4-point grid)

137

* ------------------------------------------------------------------------- */

--space-1: 4px;

--space-2: 8px;

--space-3: 12px;

--space-4: 16px;

--space-5: 20px;

--space-6: 24px;

--space-8: 32px;

--space-10: 40px;

--space-12: 48px;

/* -------------------------------------------------------------------------

149

* Typography

150

* System font stack — no web font dependency; matches the Muse protocol

151

* site aesthetic of clean, native-feeling developer tooling.

152

* JetBrains Mono is loaded via bunny.net for monospace content.

153

* ------------------------------------------------------------------------- */

154

--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;

155

--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

156

157

--font-size-xs: 11px;

158

--font-size-sm: 12px;

159

--font-size-base: 15px;

160

--font-size-md: 16px;

161

--font-size-lg: 18px;

162

--font-size-xl: 20px;

163

--font-size-2xl: 24px;

164

165

--font-weight-regular: 400;

166

--font-weight-medium: 500;

167

--font-weight-semibold:600;

168

--font-weight-bold: 700;

169

170

--line-height-tight: 1.25;

171

--line-height-normal: 1.65;

172

--line-height-relaxed:1.8;

173

174

/* -------------------------------------------------------------------------

175

* Border-radius scale

176

* ------------------------------------------------------------------------- */

--radius-sm: 3px;

--radius-base: 6px;

--radius-md: 6px;

--radius-lg: 8px;

--radius-full: 9999px;

182

183

/* -------------------------------------------------------------------------

184

* Shadows

185

* ------------------------------------------------------------------------- */

186

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

187

--shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4);

188

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

189

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

190

191

/* -------------------------------------------------------------------------

192

* Animation / transition

193

* ------------------------------------------------------------------------- */

194

--transition-fast: 0.1s ease;

195

--transition-base: 0.15s ease;

196

--transition-slow: 0.25s ease;

197

198

/* -------------------------------------------------------------------------

199

* Z-index ladder

200

* ------------------------------------------------------------------------- */

--z-base: 0;

--z-raised: 10;

--z-overlay: 100;

--z-modal: 200;

--z-toast: 300;

--z-tooltip: 400;

/* -------------------------------------------------------------------------

209

* Gradient accents — Muse protocol design language

210

* gradient-accent: title/wordmark gradient (blue → violet → purple)

211

* gradient-hero: subtle radial glow used in hero / banner areas

212

* ------------------------------------------------------------------------- */

213

--gradient-accent: linear-gradient(90deg, #6ea8fe 0%, #a78bfa 50%, #c084fc 100%);

214

--gradient-hero:

215

radial-gradient(ellipse 60% 40% at 20% 50%, rgba(79, 142, 247, 0.07) 0%, transparent 70%),

216

radial-gradient(ellipse 50% 40% at 80% 50%, rgba(188, 140, 255, 0.06) 0%, transparent 70%);

217

218

/* -------------------------------------------------------------------------

219

* Code / terminal output background

220

* Darker than --bg-base to distinguish rendered output blocks from

221

* editable code areas.

222

* ------------------------------------------------------------------------- */

223

--code-output-bg: #0a0e14;

224

}

225

226

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

227

Top-of-page progress bar shown while any HTMX request is in flight.

228

Positioned in base.html as #htmx-loading. */

#htmx-loading {

position: fixed;

top: 0;

left: 0;

right: 0;

height: 2px;

background: var(--color-accent);

z-index: 9999;

display: none;

opacity: 0;

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

240

}

241

242

.htmx-request #htmx-loading {

display: block;

opacity: 1;

}

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