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:
Timothy DeHerrera
2026-02-05 12:19:47 -07:00
parent f9a978bdd6
commit caf2d506a7
10 changed files with 2083 additions and 172 deletions

282
themes/default.css Normal file
View File

@@ -0,0 +1,282 @@
/* Sukr Default Theme (Dracula-inspired)
* Syntax highlighting for code blocks
*
* Use with: @import 'themes/default.css';
* Or copy to your site's static/style.css
*/
:root {
/* Dracula Palette */
--hl-bg: #282a36;
--hl-fg: #f8f8f2;
--hl-comment: #6272a4;
--hl-cyan: #8be9fd;
--hl-green: #50fa7b;
--hl-orange: #ffb86c;
--hl-pink: #ff79c6;
--hl-purple: #bd93f9;
--hl-red: #ff5555;
--hl-yellow: #f1fa8c;
}
/* Keywords */
.hl-keyword {
color: var(--hl-pink);
}
.hl-keyword-control {
color: var(--hl-pink);
}
.hl-keyword-control-conditional {
color: var(--hl-pink);
}
.hl-keyword-control-repeat {
color: var(--hl-pink);
}
.hl-keyword-control-import {
color: var(--hl-pink);
}
.hl-keyword-control-return {
color: var(--hl-pink);
}
.hl-keyword-control-exception {
color: var(--hl-purple);
}
.hl-keyword-operator {
color: var(--hl-pink);
}
.hl-keyword-directive {
color: var(--hl-green);
}
.hl-keyword-function {
color: var(--hl-pink);
}
.hl-keyword-return {
color: var(--hl-pink);
}
.hl-keyword-storage {
color: var(--hl-pink);
}
.hl-keyword-storage-type {
color: var(--hl-cyan);
font-style: italic;
}
.hl-keyword-storage-modifier {
color: var(--hl-pink);
}
.hl-keyword-storage-modifier-mut {
color: var(--hl-pink);
}
.hl-keyword-storage-modifier-ref {
color: var(--hl-pink);
}
.hl-keyword-special {
color: var(--hl-pink);
}
/* Functions */
.hl-function {
color: var(--hl-green);
}
.hl-function-builtin {
color: var(--hl-green);
}
.hl-function-call {
color: var(--hl-green);
}
.hl-function-macro {
color: var(--hl-purple);
}
.hl-function-method {
color: var(--hl-green);
}
/* Types */
.hl-type {
color: var(--hl-cyan);
font-style: italic;
}
.hl-type-builtin {
color: var(--hl-cyan);
}
.hl-type-parameter {
color: var(--hl-cyan);
font-style: italic;
}
.hl-type-enum-variant {
color: var(--hl-fg);
font-style: italic;
}
.hl-type-enum-variant-builtin {
color: var(--hl-fg);
font-style: italic;
}
/* Constants */
.hl-constant {
color: var(--hl-purple);
}
.hl-constant-builtin {
color: var(--hl-purple);
}
.hl-constant-builtin-boolean {
color: var(--hl-purple);
}
.hl-constant-character {
color: var(--hl-cyan);
}
.hl-constant-character-escape {
color: var(--hl-pink);
}
.hl-constant-macro {
color: var(--hl-purple);
}
.hl-constant-numeric {
color: var(--hl-purple);
}
.hl-constant-numeric-integer {
color: var(--hl-purple);
}
.hl-constant-numeric-float {
color: var(--hl-purple);
}
/* Strings */
.hl-string {
color: var(--hl-yellow);
}
.hl-string-regexp {
color: var(--hl-red);
}
.hl-string-special {
color: var(--hl-orange);
}
.hl-string-special-path {
color: var(--hl-orange);
}
.hl-string-special-symbol {
color: var(--hl-yellow);
}
/* Variables */
.hl-variable {
color: var(--hl-fg);
}
.hl-variable-builtin {
color: var(--hl-purple);
font-style: italic;
}
.hl-variable-parameter {
color: var(--hl-orange);
font-style: italic;
}
.hl-variable-other {
color: var(--hl-fg);
}
.hl-variable-other-member {
color: var(--hl-fg);
}
/* Comments */
.hl-comment {
color: var(--hl-comment);
}
.hl-comment-line {
color: var(--hl-comment);
}
.hl-comment-block {
color: var(--hl-comment);
}
.hl-comment-block-documentation {
color: var(--hl-comment);
}
.hl-comment-line-documentation {
color: var(--hl-comment);
}
.hl-comment-unused {
color: var(--hl-comment);
opacity: 0.6;
}
/* Punctuation */
.hl-punctuation {
color: var(--hl-fg);
}
.hl-punctuation-bracket {
color: var(--hl-fg);
}
.hl-punctuation-delimiter {
color: var(--hl-fg);
}
.hl-punctuation-special {
color: var(--hl-pink);
}
/* Operators */
.hl-operator {
color: var(--hl-pink);
}
/* Other */
.hl-attribute {
color: var(--hl-green);
font-style: italic;
}
.hl-label {
color: var(--hl-cyan);
}
.hl-namespace {
color: var(--hl-fg);
}
.hl-constructor {
color: var(--hl-purple);
}
.hl-special {
color: var(--hl-pink);
}
.hl-tag {
color: var(--hl-pink);
}
.hl-tag-attribute {
color: var(--hl-purple);
}
.hl-tag-delimiter {
color: var(--hl-fg);
}
/* Markup (Markdown) */
.hl-markup-bold {
color: var(--hl-orange);
font-weight: bold;
}
.hl-markup-italic {
color: var(--hl-yellow);
font-style: italic;
}
.hl-markup-strikethrough {
text-decoration: line-through;
}
.hl-markup-heading {
color: var(--hl-purple);
font-weight: bold;
}
.hl-markup-link-text {
color: var(--hl-pink);
}
.hl-markup-link-url {
color: var(--hl-cyan);
}
.hl-markup-list {
color: var(--hl-cyan);
}
.hl-markup-quote {
color: var(--hl-yellow);
font-style: italic;
}
.hl-markup-raw {
color: var(--hl-fg);
}
/* Unknown scope fallback */
.hl-unknown {
color: var(--hl-fg);
}

341
themes/dracula.css Normal file
View File

@@ -0,0 +1,341 @@
/* Dracula Theme for Sukr
* Based on https://draculatheme.com/
* Ported from Helix editor theme
*/
:root {
--hl-bg: #282a36;
--hl-fg: #f8f8f2;
--hl-comment: #6272a4;
--hl-cyan: #8be9fd;
--hl-green: #50fa7b;
--hl-orange: #ffb86c;
--hl-pink: #ff79c6;
--hl-purple: #bd93f9;
--hl-red: #ff5555;
--hl-yellow: #f1fa8c;
}
/* Keywords */
.hl-keyword {
color: var(--hl-pink);
}
.hl-keyword-control {
color: var(--hl-pink);
}
.hl-keyword-control-conditional {
color: var(--hl-pink);
}
.hl-keyword-control-repeat {
color: var(--hl-pink);
}
.hl-keyword-control-import {
color: var(--hl-pink);
}
.hl-keyword-control-return {
color: var(--hl-pink);
}
.hl-keyword-control-exception {
color: var(--hl-purple);
}
.hl-keyword-operator {
color: var(--hl-pink);
}
.hl-keyword-directive {
color: var(--hl-green);
}
.hl-keyword-function {
color: var(--hl-pink);
}
.hl-keyword-return {
color: var(--hl-pink);
}
.hl-keyword-storage {
color: var(--hl-pink);
}
.hl-keyword-storage-type {
color: var(--hl-cyan);
font-style: italic;
}
.hl-keyword-storage-modifier {
color: var(--hl-pink);
}
.hl-keyword-storage-modifier-mut {
color: var(--hl-pink);
}
.hl-keyword-storage-modifier-ref {
color: var(--hl-pink);
}
.hl-keyword-special {
color: var(--hl-pink);
}
/* Functions */
.hl-function {
color: var(--hl-green);
}
.hl-function-builtin {
color: var(--hl-green);
}
.hl-function-call {
color: var(--hl-green);
}
.hl-function-macro {
color: var(--hl-purple);
}
.hl-function-method {
color: var(--hl-green);
}
/* Types */
.hl-type {
color: var(--hl-cyan);
font-style: italic;
}
.hl-type-builtin {
color: var(--hl-cyan);
}
.hl-type-parameter {
color: var(--hl-cyan);
font-style: italic;
}
.hl-type-enum-variant {
color: var(--hl-fg);
font-style: italic;
}
.hl-type-enum-variant-builtin {
color: var(--hl-fg);
font-style: italic;
}
/* Constants */
.hl-constant {
color: var(--hl-purple);
}
.hl-constant-builtin {
color: var(--hl-purple);
}
.hl-constant-builtin-boolean {
color: var(--hl-purple);
}
.hl-constant-character {
color: var(--hl-cyan);
}
.hl-constant-character-escape {
color: var(--hl-pink);
}
.hl-constant-macro {
color: var(--hl-purple);
}
.hl-constant-numeric {
color: var(--hl-purple);
}
.hl-constant-numeric-integer {
color: var(--hl-purple);
}
.hl-constant-numeric-float {
color: var(--hl-purple);
}
/* Strings */
.hl-string {
color: var(--hl-yellow);
}
.hl-string-regexp {
color: var(--hl-red);
}
.hl-string-special {
color: var(--hl-orange);
}
.hl-string-special-path {
color: var(--hl-orange);
}
.hl-string-special-symbol {
color: var(--hl-yellow);
}
/* Variables */
.hl-variable {
color: var(--hl-fg);
}
.hl-variable-builtin {
color: var(--hl-purple);
font-style: italic;
}
.hl-variable-parameter {
color: var(--hl-orange);
font-style: italic;
}
.hl-variable-other {
color: var(--hl-fg);
}
.hl-variable-other-member {
color: var(--hl-fg);
}
/* Comments */
.hl-comment {
color: var(--hl-comment);
}
.hl-comment-line {
color: var(--hl-comment);
}
.hl-comment-block {
color: var(--hl-comment);
}
.hl-comment-block-documentation {
color: var(--hl-comment);
}
.hl-comment-line-documentation {
color: var(--hl-comment);
}
.hl-comment-unused {
color: var(--hl-comment);
opacity: 0.6;
}
/* Punctuation */
.hl-punctuation {
color: var(--hl-fg);
}
.hl-punctuation-bracket {
color: var(--hl-fg);
}
.hl-punctuation-delimiter {
color: var(--hl-fg);
}
.hl-punctuation-special {
color: var(--hl-pink);
}
/* Operators */
.hl-operator {
color: var(--hl-pink);
}
/* Other */
.hl-attribute {
color: var(--hl-green);
font-style: italic;
}
.hl-label {
color: var(--hl-cyan);
}
.hl-namespace {
color: var(--hl-fg);
}
.hl-constructor {
color: var(--hl-purple);
}
.hl-special {
color: var(--hl-pink);
}
.hl-tag {
color: var(--hl-pink);
}
.hl-tag-attribute {
color: var(--hl-purple);
}
.hl-tag-delimiter {
color: var(--hl-fg);
}
/* Markup */
.hl-markup-bold {
color: var(--hl-orange);
font-weight: bold;
}
.hl-markup-italic {
color: var(--hl-yellow);
font-style: italic;
}
.hl-markup-strikethrough {
text-decoration: line-through;
}
.hl-markup-heading {
color: var(--hl-purple);
font-weight: bold;
}
.hl-markup-link-text {
color: var(--hl-pink);
}
.hl-markup-link-url {
color: var(--hl-cyan);
}
.hl-markup-list {
color: var(--hl-cyan);
}
.hl-markup-quote {
color: var(--hl-yellow);
font-style: italic;
}
.hl-markup-raw {
color: var(--hl-fg);
}
.hl-unknown {
color: var(--hl-fg);
}

332
themes/github_dark.css Normal file
View File

@@ -0,0 +1,332 @@
/* GitHub Dark Theme for Sukr
* Based on https://primer.style/primitives/colors
* Ported from Helix editor theme
*/
:root {
/* GitHub Dark Palette */
--hl-bg: #0d1117;
--hl-fg: #c9d1d9;
--hl-muted: #8b949e;
--hl-red: #ff7b72;
--hl-orange: #ffa657;
--hl-blue-light: #a5d6ff;
--hl-blue: #79c0ff;
--hl-purple: #d2a8ff;
--hl-green: #7ee787;
}
/* Keywords */
.hl-keyword {
color: var(--hl-red);
}
.hl-keyword-control {
color: var(--hl-red);
}
.hl-keyword-control-conditional {
color: var(--hl-red);
}
.hl-keyword-control-repeat {
color: var(--hl-red);
}
.hl-keyword-control-import {
color: var(--hl-red);
}
.hl-keyword-control-return {
color: var(--hl-red);
}
.hl-keyword-control-exception {
color: var(--hl-red);
}
.hl-keyword-operator {
color: var(--hl-red);
}
.hl-keyword-directive {
color: var(--hl-red);
}
.hl-keyword-function {
color: var(--hl-red);
}
.hl-keyword-return {
color: var(--hl-red);
}
.hl-keyword-storage {
color: var(--hl-red);
}
.hl-keyword-storage-type {
color: var(--hl-blue);
}
.hl-keyword-storage-modifier {
color: var(--hl-red);
}
.hl-keyword-storage-modifier-mut {
color: var(--hl-red);
}
.hl-keyword-storage-modifier-ref {
color: var(--hl-red);
}
.hl-keyword-special {
color: var(--hl-red);
}
/* Functions */
.hl-function {
color: var(--hl-purple);
}
.hl-function-builtin {
color: var(--hl-purple);
}
.hl-function-call {
color: var(--hl-purple);
}
.hl-function-macro {
color: var(--hl-purple);
}
.hl-function-method {
color: var(--hl-purple);
}
/* Types */
.hl-type {
color: var(--hl-orange);
}
.hl-type-builtin {
color: var(--hl-blue);
}
.hl-type-parameter {
color: var(--hl-orange);
}
.hl-type-enum-variant {
color: var(--hl-fg);
font-style: italic;
}
.hl-type-enum-variant-builtin {
color: var(--hl-fg);
font-style: italic;
}
/* Constants */
.hl-constant {
color: var(--hl-blue);
}
.hl-constant-builtin {
color: var(--hl-blue);
}
.hl-constant-builtin-boolean {
color: var(--hl-blue);
}
.hl-constant-character {
color: var(--hl-blue);
}
.hl-constant-character-escape {
color: var(--hl-blue);
}
.hl-constant-macro {
color: var(--hl-blue);
}
.hl-constant-numeric {
color: var(--hl-blue);
}
.hl-constant-numeric-integer {
color: var(--hl-blue);
}
.hl-constant-numeric-float {
color: var(--hl-blue);
}
/* Strings */
.hl-string {
color: var(--hl-blue-light);
}
.hl-string-regexp {
color: var(--hl-blue-light);
}
.hl-string-special {
color: var(--hl-blue-light);
}
.hl-string-special-path {
color: var(--hl-blue-light);
}
.hl-string-special-symbol {
color: var(--hl-blue-light);
}
/* Variables */
.hl-variable {
color: var(--hl-fg);
}
.hl-variable-builtin {
color: var(--hl-red);
}
.hl-variable-parameter {
color: var(--hl-orange);
}
.hl-variable-other {
color: var(--hl-fg);
}
.hl-variable-other-member {
color: var(--hl-blue-light);
}
/* Comments */
.hl-comment {
color: var(--hl-muted);
}
.hl-comment-line {
color: var(--hl-muted);
}
.hl-comment-block {
color: var(--hl-muted);
}
.hl-comment-block-documentation {
color: var(--hl-muted);
}
.hl-comment-line-documentation {
color: var(--hl-muted);
}
.hl-comment-unused {
color: var(--hl-muted);
opacity: 0.6;
}
/* Punctuation */
.hl-punctuation {
color: var(--hl-fg);
}
.hl-punctuation-bracket {
color: var(--hl-fg);
}
.hl-punctuation-delimiter {
color: var(--hl-fg);
}
.hl-punctuation-special {
color: var(--hl-blue-light);
}
/* Operators */
.hl-operator {
color: var(--hl-blue-light);
}
/* Other */
.hl-attribute {
color: var(--hl-fg);
}
.hl-label {
color: var(--hl-red);
}
.hl-namespace {
color: var(--hl-orange);
}
.hl-constructor {
color: var(--hl-purple);
}
.hl-special {
color: var(--hl-blue-light);
}
.hl-tag {
color: var(--hl-green);
}
.hl-tag-attribute {
color: var(--hl-purple);
}
.hl-tag-delimiter {
color: var(--hl-fg);
}
/* Markup */
.hl-markup-bold {
font-weight: bold;
}
.hl-markup-italic {
font-style: italic;
}
.hl-markup-strikethrough {
text-decoration: line-through;
}
.hl-markup-heading {
color: var(--hl-blue);
}
.hl-markup-link-text {
color: var(--hl-blue-light);
text-decoration: underline;
}
.hl-markup-link-url {
text-decoration: underline;
}
.hl-markup-list {
color: var(--hl-red);
}
.hl-markup-quote {
font-style: italic;
}
.hl-markup-raw {
color: var(--hl-blue);
}
.hl-unknown {
color: var(--hl-fg);
}

332
themes/github_light.css Normal file
View File

@@ -0,0 +1,332 @@
/* GitHub Light Theme for Sukr
* Based on https://primer.style/primitives/colors
* Ported from Helix editor theme
*/
:root {
/* GitHub Light Palette */
--hl-bg: #ffffff;
--hl-fg: #24292f;
--hl-muted: #57606a;
--hl-red: #cf222e;
--hl-orange: #953800;
--hl-blue: #0550ae;
--hl-blue-dark: #0a3069;
--hl-purple: #8250df;
--hl-green: #116329;
}
/* Keywords */
.hl-keyword {
color: var(--hl-red);
}
.hl-keyword-control {
color: var(--hl-red);
}
.hl-keyword-control-conditional {
color: var(--hl-red);
}
.hl-keyword-control-repeat {
color: var(--hl-red);
}
.hl-keyword-control-import {
color: var(--hl-red);
}
.hl-keyword-control-return {
color: var(--hl-red);
}
.hl-keyword-control-exception {
color: var(--hl-red);
}
.hl-keyword-operator {
color: var(--hl-red);
}
.hl-keyword-directive {
color: var(--hl-red);
}
.hl-keyword-function {
color: var(--hl-red);
}
.hl-keyword-return {
color: var(--hl-red);
}
.hl-keyword-storage {
color: var(--hl-red);
}
.hl-keyword-storage-type {
color: var(--hl-blue);
}
.hl-keyword-storage-modifier {
color: var(--hl-red);
}
.hl-keyword-storage-modifier-mut {
color: var(--hl-red);
}
.hl-keyword-storage-modifier-ref {
color: var(--hl-red);
}
.hl-keyword-special {
color: var(--hl-red);
}
/* Functions */
.hl-function {
color: var(--hl-purple);
}
.hl-function-builtin {
color: var(--hl-purple);
}
.hl-function-call {
color: var(--hl-purple);
}
.hl-function-macro {
color: var(--hl-purple);
}
.hl-function-method {
color: var(--hl-purple);
}
/* Types */
.hl-type {
color: var(--hl-orange);
}
.hl-type-builtin {
color: var(--hl-blue);
}
.hl-type-parameter {
color: var(--hl-orange);
}
.hl-type-enum-variant {
color: var(--hl-fg);
font-style: italic;
}
.hl-type-enum-variant-builtin {
color: var(--hl-fg);
font-style: italic;
}
/* Constants */
.hl-constant {
color: var(--hl-blue);
}
.hl-constant-builtin {
color: var(--hl-blue);
}
.hl-constant-builtin-boolean {
color: var(--hl-blue);
}
.hl-constant-character {
color: var(--hl-blue);
}
.hl-constant-character-escape {
color: var(--hl-blue);
}
.hl-constant-macro {
color: var(--hl-blue);
}
.hl-constant-numeric {
color: var(--hl-blue);
}
.hl-constant-numeric-integer {
color: var(--hl-blue);
}
.hl-constant-numeric-float {
color: var(--hl-blue);
}
/* Strings */
.hl-string {
color: var(--hl-blue-dark);
}
.hl-string-regexp {
color: var(--hl-blue-dark);
}
.hl-string-special {
color: var(--hl-blue-dark);
}
.hl-string-special-path {
color: var(--hl-blue-dark);
}
.hl-string-special-symbol {
color: var(--hl-blue-dark);
}
/* Variables */
.hl-variable {
color: var(--hl-fg);
}
.hl-variable-builtin {
color: var(--hl-red);
}
.hl-variable-parameter {
color: var(--hl-orange);
}
.hl-variable-other {
color: var(--hl-fg);
}
.hl-variable-other-member {
color: var(--hl-blue-dark);
}
/* Comments */
.hl-comment {
color: var(--hl-muted);
}
.hl-comment-line {
color: var(--hl-muted);
}
.hl-comment-block {
color: var(--hl-muted);
}
.hl-comment-block-documentation {
color: var(--hl-muted);
}
.hl-comment-line-documentation {
color: var(--hl-muted);
}
.hl-comment-unused {
color: var(--hl-muted);
opacity: 0.6;
}
/* Punctuation */
.hl-punctuation {
color: var(--hl-fg);
}
.hl-punctuation-bracket {
color: var(--hl-fg);
}
.hl-punctuation-delimiter {
color: var(--hl-fg);
}
.hl-punctuation-special {
color: var(--hl-blue-dark);
}
/* Operators */
.hl-operator {
color: var(--hl-blue-dark);
}
/* Other */
.hl-attribute {
color: var(--hl-fg);
}
.hl-label {
color: var(--hl-red);
}
.hl-namespace {
color: var(--hl-orange);
}
.hl-constructor {
color: var(--hl-purple);
}
.hl-special {
color: var(--hl-blue-dark);
}
.hl-tag {
color: var(--hl-green);
}
.hl-tag-attribute {
color: var(--hl-purple);
}
.hl-tag-delimiter {
color: var(--hl-fg);
}
/* Markup */
.hl-markup-bold {
font-weight: bold;
}
.hl-markup-italic {
font-style: italic;
}
.hl-markup-strikethrough {
text-decoration: line-through;
}
.hl-markup-heading {
color: var(--hl-blue);
}
.hl-markup-link-text {
color: var(--hl-blue-dark);
text-decoration: underline;
}
.hl-markup-link-url {
text-decoration: underline;
}
.hl-markup-list {
color: var(--hl-red);
}
.hl-markup-quote {
font-style: italic;
}
.hl-markup-raw {
color: var(--hl-blue);
}
.hl-unknown {
color: var(--hl-fg);
}

340
themes/gruvbox.css Normal file
View File

@@ -0,0 +1,340 @@
/* Gruvbox Theme for Sukr
* Based on https://github.com/morhetz/gruvbox
* Ported from Helix editor theme
*/
:root {
--hl-bg: #282828;
--hl-fg: #ebdbb2;
--hl-gray: #928374;
--hl-red: #fb4934;
--hl-green: #b8bb26;
--hl-yellow: #fabd2f;
--hl-blue: #83a598;
--hl-purple: #d3869b;
--hl-aqua: #8ec07c;
--hl-orange: #fe8019;
}
/* Keywords */
.hl-keyword {
color: var(--hl-red);
}
.hl-keyword-control {
color: var(--hl-red);
}
.hl-keyword-control-conditional {
color: var(--hl-red);
}
.hl-keyword-control-repeat {
color: var(--hl-red);
}
.hl-keyword-control-import {
color: var(--hl-aqua);
}
.hl-keyword-control-return {
color: var(--hl-red);
}
.hl-keyword-control-exception {
color: var(--hl-red);
}
.hl-keyword-operator {
color: var(--hl-red);
}
.hl-keyword-directive {
color: var(--hl-aqua);
}
.hl-keyword-function {
color: var(--hl-red);
}
.hl-keyword-return {
color: var(--hl-red);
}
.hl-keyword-storage {
color: var(--hl-red);
}
.hl-keyword-storage-type {
color: var(--hl-yellow);
}
.hl-keyword-storage-modifier {
color: var(--hl-red);
}
.hl-keyword-storage-modifier-mut {
color: var(--hl-red);
}
.hl-keyword-storage-modifier-ref {
color: var(--hl-red);
}
.hl-keyword-special {
color: var(--hl-red);
}
/* Functions */
.hl-function {
color: var(--hl-green);
}
.hl-function-builtin {
color: var(--hl-yellow);
}
.hl-function-call {
color: var(--hl-green);
}
.hl-function-macro {
color: var(--hl-blue);
}
.hl-function-method {
color: var(--hl-green);
}
/* Types */
.hl-type {
color: var(--hl-yellow);
}
.hl-type-builtin {
color: var(--hl-yellow);
}
.hl-type-parameter {
color: var(--hl-yellow);
}
.hl-type-enum-variant {
color: var(--hl-fg);
font-style: italic;
}
.hl-type-enum-variant-builtin {
color: var(--hl-fg);
font-style: italic;
}
/* Constants */
.hl-constant {
color: var(--hl-purple);
}
.hl-constant-builtin {
color: var(--hl-purple);
}
.hl-constant-builtin-boolean {
color: var(--hl-purple);
}
.hl-constant-character {
color: var(--hl-aqua);
}
.hl-constant-character-escape {
color: var(--hl-orange);
}
.hl-constant-macro {
color: var(--hl-aqua);
}
.hl-constant-numeric {
color: var(--hl-purple);
}
.hl-constant-numeric-integer {
color: var(--hl-purple);
}
.hl-constant-numeric-float {
color: var(--hl-purple);
}
/* Strings */
.hl-string {
color: var(--hl-green);
}
.hl-string-regexp {
color: var(--hl-orange);
}
.hl-string-special {
color: var(--hl-orange);
}
.hl-string-special-path {
color: var(--hl-orange);
}
.hl-string-special-symbol {
color: var(--hl-yellow);
}
/* Variables */
.hl-variable {
color: var(--hl-fg);
}
.hl-variable-builtin {
color: var(--hl-orange);
font-style: italic;
}
.hl-variable-parameter {
color: var(--hl-blue);
font-style: italic;
}
.hl-variable-other {
color: var(--hl-fg);
}
.hl-variable-other-member {
color: var(--hl-blue);
}
/* Comments */
.hl-comment {
color: var(--hl-gray);
font-style: italic;
}
.hl-comment-line {
color: var(--hl-gray);
font-style: italic;
}
.hl-comment-block {
color: var(--hl-gray);
font-style: italic;
}
.hl-comment-block-documentation {
color: var(--hl-gray);
font-style: italic;
}
.hl-comment-line-documentation {
color: var(--hl-gray);
font-style: italic;
}
.hl-comment-unused {
color: var(--hl-gray);
opacity: 0.6;
}
/* Punctuation */
.hl-punctuation {
color: var(--hl-orange);
}
.hl-punctuation-bracket {
color: var(--hl-orange);
}
.hl-punctuation-delimiter {
color: var(--hl-orange);
}
.hl-punctuation-special {
color: var(--hl-orange);
}
/* Operators */
.hl-operator {
color: var(--hl-purple);
}
/* Other */
.hl-attribute {
color: var(--hl-aqua);
font-style: italic;
}
.hl-label {
color: var(--hl-red);
}
.hl-namespace {
color: var(--hl-fg);
}
.hl-constructor {
color: var(--hl-purple);
}
.hl-special {
color: var(--hl-purple);
}
.hl-tag {
color: var(--hl-aqua);
}
.hl-tag-attribute {
color: var(--hl-aqua);
}
.hl-tag-delimiter {
color: var(--hl-fg);
}
/* Markup */
.hl-markup-bold {
font-weight: bold;
}
.hl-markup-italic {
font-style: italic;
}
.hl-markup-strikethrough {
text-decoration: line-through;
}
.hl-markup-heading {
color: var(--hl-aqua);
}
.hl-markup-link-text {
color: var(--hl-red);
}
.hl-markup-link-url {
color: var(--hl-green);
text-decoration: underline;
}
.hl-markup-list {
color: var(--hl-aqua);
}
.hl-markup-quote {
font-style: italic;
}
.hl-markup-raw {
color: var(--hl-red);
}
.hl-unknown {
color: var(--hl-fg);
}

355
themes/nord.css Normal file
View File

@@ -0,0 +1,355 @@
/* Nord Theme for Sukr
* Based on https://www.nordtheme.com/
* Ported from Helix editor theme
*/
:root {
/* Polar Night */
--hl-nord0: #2e3440;
--hl-nord1: #3b4252;
--hl-nord2: #434c5e;
--hl-nord3: #4c566a;
--hl-nord3-bright: #616e88;
/* Snow Storm */
--hl-nord4: #d8dee9;
--hl-nord5: #e5e9f0;
--hl-nord6: #eceff4;
/* Frost */
--hl-nord7: #8fbcbb;
--hl-nord8: #88c0d0;
--hl-nord9: #81a1c1;
--hl-nord10: #5e81ac;
/* Aurora */
--hl-nord11: #bf616a;
--hl-nord12: #d08770;
--hl-nord13: #ebcb8b;
--hl-nord14: #a3be8c;
--hl-nord15: #b48ead;
/* Semantic aliases */
--hl-bg: var(--hl-nord0);
--hl-fg: var(--hl-nord4);
--hl-comment: var(--hl-nord3-bright);
}
/* Keywords */
.hl-keyword {
color: var(--hl-nord9);
}
.hl-keyword-control {
color: var(--hl-nord9);
}
.hl-keyword-control-conditional {
color: var(--hl-nord9);
}
.hl-keyword-control-repeat {
color: var(--hl-nord9);
}
.hl-keyword-control-import {
color: var(--hl-nord9);
}
.hl-keyword-control-return {
color: var(--hl-nord9);
}
.hl-keyword-control-exception {
color: var(--hl-nord9);
}
.hl-keyword-operator {
color: var(--hl-nord9);
}
.hl-keyword-directive {
color: var(--hl-nord9);
}
.hl-keyword-function {
color: var(--hl-nord9);
}
.hl-keyword-return {
color: var(--hl-nord9);
}
.hl-keyword-storage {
color: var(--hl-nord9);
}
.hl-keyword-storage-type {
color: var(--hl-nord9);
}
.hl-keyword-storage-modifier {
color: var(--hl-nord9);
}
.hl-keyword-storage-modifier-mut {
color: var(--hl-nord9);
}
.hl-keyword-storage-modifier-ref {
color: var(--hl-nord9);
}
.hl-keyword-special {
color: var(--hl-nord9);
}
/* Functions */
.hl-function {
color: var(--hl-nord8);
}
.hl-function-builtin {
color: var(--hl-nord7);
}
.hl-function-call {
color: var(--hl-nord8);
}
.hl-function-macro {
color: var(--hl-nord9);
}
.hl-function-method {
color: var(--hl-nord8);
}
/* Types */
.hl-type {
color: var(--hl-nord7);
}
.hl-type-builtin {
color: var(--hl-nord7);
}
.hl-type-parameter {
color: var(--hl-nord7);
}
.hl-type-enum-variant {
color: var(--hl-nord4);
font-style: italic;
}
.hl-type-enum-variant-builtin {
color: var(--hl-nord4);
font-style: italic;
}
/* Constants */
.hl-constant {
color: var(--hl-nord4);
}
.hl-constant-builtin {
color: var(--hl-nord9);
}
.hl-constant-builtin-boolean {
color: var(--hl-nord9);
}
.hl-constant-character {
color: var(--hl-nord15);
}
.hl-constant-character-escape {
color: var(--hl-nord13);
}
.hl-constant-macro {
color: var(--hl-nord9);
}
.hl-constant-numeric {
color: var(--hl-nord15);
}
.hl-constant-numeric-integer {
color: var(--hl-nord15);
}
.hl-constant-numeric-float {
color: var(--hl-nord15);
}
/* Strings */
.hl-string {
color: var(--hl-nord14);
}
.hl-string-regexp {
color: var(--hl-nord13);
}
.hl-string-special {
color: var(--hl-nord13);
}
.hl-string-special-path {
color: var(--hl-nord13);
}
.hl-string-special-symbol {
color: var(--hl-nord13);
}
/* Variables */
.hl-variable {
color: var(--hl-nord4);
}
.hl-variable-builtin {
color: var(--hl-nord9);
}
.hl-variable-parameter {
color: var(--hl-nord8);
}
.hl-variable-other {
color: var(--hl-nord4);
}
.hl-variable-other-member {
color: var(--hl-nord4);
}
/* Comments */
.hl-comment {
color: var(--hl-nord3-bright);
font-style: italic;
}
.hl-comment-line {
color: var(--hl-nord3-bright);
font-style: italic;
}
.hl-comment-block {
color: var(--hl-nord3-bright);
font-style: italic;
}
.hl-comment-block-documentation {
color: var(--hl-nord3-bright);
font-style: italic;
}
.hl-comment-line-documentation {
color: var(--hl-nord3-bright);
font-style: italic;
}
.hl-comment-unused {
color: var(--hl-nord3-bright);
opacity: 0.6;
}
/* Punctuation */
.hl-punctuation {
color: var(--hl-nord6);
}
.hl-punctuation-bracket {
color: var(--hl-nord6);
}
.hl-punctuation-delimiter {
color: var(--hl-nord6);
}
.hl-punctuation-special {
color: var(--hl-nord9);
}
/* Operators */
.hl-operator {
color: var(--hl-nord9);
}
/* Other */
.hl-attribute {
color: var(--hl-nord9);
}
.hl-label {
color: var(--hl-nord7);
}
.hl-namespace {
color: var(--hl-nord4);
}
.hl-constructor {
color: var(--hl-nord8);
}
.hl-special {
color: var(--hl-nord9);
}
.hl-tag {
color: var(--hl-nord7);
}
.hl-tag-attribute {
color: var(--hl-nord9);
}
.hl-tag-delimiter {
color: var(--hl-nord6);
}
/* Markup */
.hl-markup-bold {
font-weight: bold;
}
.hl-markup-italic {
font-style: italic;
}
.hl-markup-strikethrough {
text-decoration: line-through;
}
.hl-markup-heading {
color: var(--hl-nord8);
}
.hl-markup-link-text {
color: var(--hl-nord8);
}
.hl-markup-link-url {
color: var(--hl-nord9);
}
.hl-markup-list {
color: var(--hl-nord9);
}
.hl-markup-quote {
font-style: italic;
}
.hl-markup-raw {
color: var(--hl-nord7);
}
.hl-unknown {
color: var(--hl-nord4);
}