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 */
}
/* -- 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 {
background: var(--card) !important;
color: var(--foreground) !important;
}
/* Light mode hljs (default) */
/* Light mode hljs (default :root scope) — forest primary, near-black values. */
.hljs-keyword,
.hljs-built_in,
.hljs-type,
.hljs-selector-tag,
.hljs-literal,
.hljs-number {
color: #166534;
.hljs-tag {
color: var(--forest);
}
.hljs-string,
.hljs-attr {
color: #4f5100;
.hljs-attr,
.hljs-regexp,
.hljs-symbol,
.hljs-bullet {
color: var(--silver);
}
.hljs-function,
.hljs-number,
.hljs-literal,
.hljs-meta,
.hljs-title,
.hljs-built_in,
.hljs-title.function_,
.hljs-section,
.hljs-name,
.hljs-params,
.hljs-variable,
.hljs-type,
.hljs-meta {
color: #0a0a0a;
.hljs-template-variable,
.hljs-function {
color: var(--foreground);
}
.hljs-comment {
color: #6b6b6b;
.hljs-comment,
.hljs-quote {
color: var(--silver);
font-style: italic;
}
.hljs-deletion,
.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 {
background: #141414 !important;
color: #ffffff !important;
background: var(--card) !important;
color: var(--foreground) !important;
}
.dark .hljs-keyword,
.dark .hljs-built_in,
.dark .hljs-type,
.dark .hljs-selector-tag,
.dark .hljs-literal,
.dark .hljs-number,
.dark .hljs-meta {
color: #faff69;
.dark .hljs-tag {
color: var(--volt);
}
.dark .hljs-string,
.dark .hljs-attr,
.dark .hljs-type {
color: #f4f692;
.dark .hljs-regexp,
.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-built_in,
.dark .hljs-title.function_,
.dark .hljs-section,
.dark .hljs-name,
.dark .hljs-params,
.dark .hljs-variable,
.dark .hljs-template-variable,
.dark .hljs-function,
.dark .hljs-selector-class {
color: #ffffff;
color: var(--foreground);
}
.dark .hljs-comment {
color: #a0a0a0;
.dark .hljs-comment,
.dark .hljs-quote {
color: var(--silver);
font-style: italic;
}
.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 {