mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(nexus): rewrite hljs palette for design.md (phase 6)

Browse source
This commit is contained in:
Nexus Dev 2026-04-11 16:32:57 +00:00
parent 547e526279
commit f66209f4ac
1 changed files with 75 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
ui/src/index.css
View file

@ -202,72 +202,116 @@
--chart-role-5: #a0a0a0; /* silver — support/quinary */ --chart-role-5: #a0a0a0; /* silver — support/quinary */
} }
/* -- highlight.js syntax theme overrides (chat code blocks) ------------- */ /* -- highlight.js syntax theme overrides (chat code blocks) -------------
* DESIGN.md §4: dark surface, terminal aesthetic, neon + white syntax.
* Strictly 4 hues: volt (or forest in light), white/near-black, silver, forest.
* No rainbow highlighting — traditional per-class hues collapse into this scheme.
*/
/* Base hljs surface — themed via CSS vars */ /* Base hljs surface — inherits the code-block container (bg-card / bg-muted). */
.hljs { .hljs {
background: var(--card) !important; background: var(--card) !important;
color: var(--foreground) !important; color: var(--foreground) !important;
} }
/* Light mode hljs (default) */ /* Light mode hljs (default :root scope) — forest primary, near-black values. */
.hljs-keyword, .hljs-keyword,
.hljs-built_in,
.hljs-type,
.hljs-selector-tag, .hljs-selector-tag,
.hljs-literal, .hljs-tag {
.hljs-number { color: var(--forest);
color: #166534;
} }
.hljs-string, .hljs-string,
.hljs-attr { .hljs-attr,
color: #4f5100; .hljs-regexp,
.hljs-symbol,
.hljs-bullet {
color: var(--silver);
} }
.hljs-function, .hljs-number,
.hljs-literal,
.hljs-meta,
.hljs-title, .hljs-title,
.hljs-built_in, .hljs-title.function_,
.hljs-section,
.hljs-name,
.hljs-params,
.hljs-variable, .hljs-variable,
.hljs-type, .hljs-template-variable,
.hljs-meta { .hljs-function {
color: #0a0a0a; color: var(--foreground);
} }
.hljs-comment { .hljs-comment,
color: #6b6b6b; .hljs-quote {
color: var(--silver);
font-style: italic; font-style: italic;
} }
.hljs-deletion, .hljs-deletion,
.hljs-selector-class { .hljs-selector-class {
color: #dc2626; color: var(--destructive);
}
.hljs-addition {
color: var(--success);
}
.hljs-link {
color: var(--forest);
text-decoration: underline;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 700;
} }
/* Dark mode hljs — overrides the light defaults */ /* Dark mode hljs — volt primary on near-black surface, terminal-like. */
.dark .hljs { .dark .hljs {
background: #141414 !important; background: var(--card) !important;
color: #ffffff !important; color: var(--foreground) !important;
} }
.dark .hljs-keyword, .dark .hljs-keyword,
.dark .hljs-built_in,
.dark .hljs-type,
.dark .hljs-selector-tag, .dark .hljs-selector-tag,
.dark .hljs-literal, .dark .hljs-tag {
.dark .hljs-number, color: var(--volt);
.dark .hljs-meta {
color: #faff69;
} }
.dark .hljs-string, .dark .hljs-string,
.dark .hljs-attr, .dark .hljs-attr,
.dark .hljs-type { .dark .hljs-regexp,
color: #f4f692; .dark .hljs-symbol,
.dark .hljs-bullet {
color: var(--silver);
} }
.dark .hljs-function, .dark .hljs-number,
.dark .hljs-literal,
.dark .hljs-meta,
.dark .hljs-title, .dark .hljs-title,
.dark .hljs-built_in, .dark .hljs-title.function_,
.dark .hljs-section,
.dark .hljs-name,
.dark .hljs-params,
.dark .hljs-variable, .dark .hljs-variable,
.dark .hljs-template-variable,
.dark .hljs-function,
.dark .hljs-selector-class { .dark .hljs-selector-class {
color: #ffffff; color: var(--foreground);
} }
.dark .hljs-comment { .dark .hljs-comment,
color: #a0a0a0; .dark .hljs-quote {
color: var(--silver);
font-style: italic; font-style: italic;
} }
.dark .hljs-deletion { .dark .hljs-deletion {
color: #ef4444; color: var(--destructive);
}
.dark .hljs-addition {
color: var(--success);
}
.dark .hljs-link {
color: var(--volt);
text-decoration: underline;
} }
@layer base { @layer base {