style(highlight): complete Dracula color coverage for all syntax tokens

Expand syntax highlighting CSS from 15 to 31 highlight classes, ensuring
all tree-sitter captures have assigned colors. Organized into logical
sections with comments.

Coverage added:
- type-builtin, function-builtin, constant-builtin (variants)
- variable-builtin, variable-parameter (orange, italic)
- constructor, embedded, escape
- string-special, string-special-path, string-special-uri
- punctuation-special

Color palette (Dracula-inspired):
- Pink (#ff79c6): keywords, operators, tags, punctuation-special
- Yellow (#f1fa8c): strings
- Green (#50fa7b): functions, constructors
- Cyan (#8be9fd): types, properties, attributes
- Purple (#bd93f9): numbers, constants
- Orange (#ffb86c): builtins, parameters, escapes
- Muted (#6272a4): comments
This commit is contained in:
Timothy DeHerrera
2026-01-31 17:38:54 -07:00
parent 10fd93452b
commit 013786faa6

83
docs/static/style.css vendored
View File

@@ -150,64 +150,109 @@ pre code {
padding: 0;
}
/* Syntax highlighting (tree-sitter classes) */
/* Syntax highlighting (tree-sitter classes)
* Dracula-inspired color scheme with full coverage
* All colors chosen to work well on dark backgrounds
*/
/* Keywords: control flow, declarations - Pink */
.hl-keyword {
color: #ff79c6;
}
.hl-string {
/* Strings and literals - Yellow */
.hl-string,
.hl-string-special {
color: #f1fa8c;
}
.hl-function {
.hl-string-escape {
color: #ffb86c;
}
.hl-string-special-path,
.hl-string-special-uri {
color: #8be9fd;
text-decoration: underline;
}
/* Functions and methods - Green */
.hl-function,
.hl-function-builtin {
color: #50fa7b;
}
/* Comments - Muted blue-gray */
.hl-comment {
color: #6272a4;
font-style: italic;
}
.hl-number {
/* Numbers and constants - Purple */
.hl-number,
.hl-constant,
.hl-constant-builtin {
color: #bd93f9;
}
/* Operators - Pink (same as keywords for visual consistency) */
.hl-operator {
color: #ff79c6;
}
.hl-punctuation {
/* Punctuation - Subtle muted */
.hl-punctuation,
.hl-punctuation-bracket,
.hl-punctuation-delimiter {
color: var(--fg-muted);
}
.hl-punctuation-bracket {
color: var(--fg-muted);
.hl-punctuation-special {
color: #ff79c6;
}
/* Types - Cyan */
.hl-type,
.hl-type-builtin {
color: #8be9fd;
}
/* Variables - Light foreground */
.hl-variable {
color: var(--fg);
}
.hl-type {
.hl-variable-builtin {
color: #ffb86c;
}
.hl-variable-parameter {
color: #ffb86c;
font-style: italic;
}
/* Properties and attributes - Cyan */
.hl-property,
.hl-attribute {
color: #8be9fd;
}
.hl-constant {
color: #bd93f9;
}
.hl-attribute {
/* Constructors - Green */
.hl-constructor {
color: #50fa7b;
}
.hl-property {
color: #66d9ef;
}
/* HTML/XML tags - Pink */
.hl-tag {
color: #ff79c6;
}
/* Embedded/escape content - Orange */
.hl-embedded,
.hl-escape {
color: #ffb86c;
}
/* Markdown-specific text highlighting */
.hl-text-title {
color: #ff79c6;
@@ -227,10 +272,6 @@ pre code {
color: #bd93f9;
}
.hl-string-escape {
color: #ffb86c;
}
/* Section navigation */
.section-nav {
display: flex;