feat(themes): add decoupled CSS theme system with lightningcss bundling
- Add 6 syntax highlighting themes (dracula, gruvbox, nord, github) - Rewrite css.rs to use lightningcss bundler for @import resolution - Theme CSS is inlined at build time, producing single bundled output
This commit is contained in:
124
docs/static/style.css
vendored
124
docs/static/style.css
vendored
@@ -1,4 +1,6 @@
|
||||
/* sukr docs — clean documentation theme */
|
||||
@import "../../themes/default.css";
|
||||
/* Syntax highlighting theme - lightningcss inlines this at build time */
|
||||
|
||||
:root {
|
||||
--bg: #0d1117;
|
||||
@@ -313,128 +315,6 @@ pre code {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Strings and literals - Yellow */
|
||||
.hl-string,
|
||||
.hl-string-special {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Punctuation - Subtle muted */
|
||||
.hl-punctuation,
|
||||
.hl-punctuation-bracket,
|
||||
.hl-punctuation-delimiter {
|
||||
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-variable-builtin {
|
||||
color: #ffb86c;
|
||||
}
|
||||
|
||||
.hl-variable-parameter {
|
||||
color: #ffb86c;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Properties and attributes - Cyan */
|
||||
.hl-property,
|
||||
.hl-attribute {
|
||||
color: #8be9fd;
|
||||
}
|
||||
|
||||
/* Constructors - Green */
|
||||
.hl-constructor {
|
||||
color: #50fa7b;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-text-literal {
|
||||
color: #8be9fd;
|
||||
}
|
||||
|
||||
.hl-text-uri {
|
||||
color: #8be9fd;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hl-text-reference {
|
||||
color: #bd93f9;
|
||||
}
|
||||
|
||||
/* Mermaid diagrams */
|
||||
.mermaid-diagram {
|
||||
margin: 1.5rem 0;
|
||||
|
||||
Reference in New Issue
Block a user