refactor(#120): extract syntax colors

jannis-baum · Aug 1, 2024 · d0b88ae · d0b88ae
1 parent ebe3639
commit d0b88ae
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 138 deletions.
diff --git a/static/colors.css b/static/colors.css
@@ -16,6 +16,25 @@
     --border-dark: #353535;
     --border-kbd: #242424;
 
+    --syntax-text: var(--text-primary);
+    --syntax-keyword: #aed7ff;
+    --syntax-entity: #aeafff;
+    --syntax-constant: #d1b0fa;
+    --syntax-string: #d787af;
+    --syntax-symbol: var(--syntax-constant);
+    --syntax-comment: #949494;
+    --syntax-entity-tag: #d7afd7;
+    --syntax-storage-modifier-import: var(--syntax-text);
+
+    --syntax-markup-heading: var(--syntax-text);
+    --syntax-markup-list: var(--syntax-text);
+    --syntax-markup-italic: var(--syntax-text);
+    --syntax-markup-bold: var(--syntax-text);
+    --syntax-markup-inserted-fg: #aff5b4;
+    --syntax-markup-inserted-bg: #033a16;
+    --syntax-markup-deleted-fg: #ffdcd7;
+    --syntax-markup-deleted-bg: #67060c;
+
     --alert-note: #a5d5fe;
     --alert-tip: #b4fa72;
     --alert-important: #ff8ffd;
@@ -42,7 +61,29 @@
         --border-dark: #d0d7de;
         --border-kbd: #eff1f3;
 
-        --alert-note: #0969da;
+        /* source for light mode syntax theme:
+         * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
+         * */
+        --syntax-text: #24292e;
+        --syntax-keyword: #d73a49;
+        --syntax-entity: #6f42c1;
+        --syntax-constant: #005cc5;
+        --syntax-string: #032f62;
+        --syntax-symbol: #e36209;
+        --syntax-comment: #6a737d;
+        --syntax-entity-tag: #22863a;
+        --syntax-storage-modifier-import: var(--syntax-text);
+
+        --syntax-markup-heading: #005cc5;
+        --syntax-markup-list: #735c0f;
+        --syntax-markup-italic: var(--syntax-text);
+        --syntax-markup-bold: var(--syntax-text);
+        --syntax-markup-inserted-fg: #22863a;
+        --syntax-markup-inserted-bg: #f0fff4;
+        --syntax-markup-deleted-fg: #b31d28;
+        --syntax-markup-deleted-bg: #ffeef0;
+
+        --alert-note: var(--text-link);
         --alert-tip: #1a7f37;
         --alert-important: #8250df;
         --alert-warning: #bf8700;

diff --git a/static/highlight.css b/static/highlight.css
@@ -1,163 +1,102 @@
-/* translucent dark */
-.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{
-    color: #aed7ff;
+.hljs {
+    color: var(--syntax-text);
 }
 
-.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{
-    color: #aeafff;
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+    color: var(--syntax-keyword);
 }
 
-.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{
-    color: #d1b0fa;
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+    color: var(--syntax-entity);
 }
 
-.hljs-meta .hljs-string,.hljs-regexp,.hljs-string,.hljs-subst{
-    color: #d787af;
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+    color: var(--syntax-constant);
 }
 
-.hljs-built_in,.hljs-symbol{
-    color: #d1b0fa;
-    font-weight: bold;
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+    color: var(--syntax-string);
 }
 
-.hljs-code,.hljs-comment,.hljs-formula{
-    color: #949494;
-    font-style: italic;
+.hljs-built_in,
+.hljs-symbol {
+    color: var(--syntax-symbol);
+    font-style: bold;
 }
 
-.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{
-    color: #d7afd7;
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+    color: var(--syntax-comment);
+    font-style: italic;
 }
 
-.hljs-strong,.hljs-emphasis{
-    font-weight: bold;
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+    color: var(--syntax-entity-tag);
 }
 
-.hljs-addition{
-    color: #aff5b4;
-    background-color: #033a16;
+.hljs-subst {
+    color: var(--syntax-storage-modifier-import);
 }
 
-.hljs-deletion{
-    color: #ffdcd7;
-    background-color: #67060c;
+.hljs-section {
+    color: var(--syntax-markup-heading);
+    font-weight: bold;
 }
 
-/* light mode */
-/* source: https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css */
-@media (prefers-color-scheme: light) {
-    .hljs {
-        color: #24292e;
-        background: #ffffff;
-    }
-
-    .hljs-doctag,
-    .hljs-keyword,
-    .hljs-meta .hljs-keyword,
-    .hljs-template-tag,
-    .hljs-template-variable,
-    .hljs-type,
-    .hljs-variable.language_ {
-        /* prettylights-syntax-keyword */
-        color: #d73a49;
-    }
-
-    .hljs-title,
-    .hljs-title.class_,
-    .hljs-title.class_.inherited__,
-    .hljs-title.function_ {
-        /* prettylights-syntax-entity */
-        color: #6f42c1;
-    }
-
-    .hljs-attr,
-    .hljs-attribute,
-    .hljs-literal,
-    .hljs-meta,
-    .hljs-number,
-    .hljs-operator,
-    .hljs-variable,
-    .hljs-selector-attr,
-    .hljs-selector-class,
-    .hljs-selector-id {
-        /* prettylights-syntax-constant */
-        color: #005cc5;
-    }
-
-    .hljs-regexp,
-    .hljs-string,
-    .hljs-meta .hljs-string {
-        /* prettylights-syntax-string */
-        color: #032f62;
-    }
-
-    .hljs-built_in,
-    .hljs-symbol {
-        /* prettylights-syntax-variable */
-        color: #e36209;
-    }
-
-    .hljs-comment,
-    .hljs-code,
-    .hljs-formula {
-        /* prettylights-syntax-comment */
-        color: #6a737d;
-    }
-
-    .hljs-name,
-    .hljs-quote,
-    .hljs-selector-tag,
-    .hljs-selector-pseudo {
-        /* prettylights-syntax-entity-tag */
-        color: #22863a;
-    }
-
-    .hljs-subst {
-        /* prettylights-syntax-storage-modifier-import */
-        color: #24292e;
-    }
-
-    .hljs-section {
-        /* prettylights-syntax-markup-heading */
-        color: #005cc5;
-        font-weight: bold;
-    }
-
-    .hljs-bullet {
-        /* prettylights-syntax-markup-list */
-        color: #735c0f;
-    }
+.hljs-bullet {
+    color: var(--syntax-markup-bullet);
+}
 
-    .hljs-emphasis {
-        /* prettylights-syntax-markup-italic */
-        color: #24292e;
-        font-style: italic;
-    }
+.hljs-emphasis {
+    color: var(--syntax-markup-italic);
+    font-style: italic;
+}
 
-    .hljs-strong {
-        /* prettylights-syntax-markup-bold */
-        color: #24292e;
-        font-weight: bold;
-    }
+.hljs-strong {
+    color: var(--syntax-markup-bold);
+    font-weight: bold;
+}
 
-    .hljs-addition {
-        /* prettylights-syntax-markup-inserted */
-        color: #22863a;
-        background-color: #f0fff4;
-    }
+.hljs-addition {
+    color: var(--syntax-markup-inserted-fg);
+    background-color: var(--syntax-markup-inserted-bg);
+}
 
-    .hljs-deletion {
-        /* prettylights-syntax-markup-deleted */
-        color: #b31d28;
-        background-color: #ffeef0;
-    }
+.hljs-deletion {
+    color: var(--syntax-markup-deleted-fg);
+    background-color: var(--syntax-markup-deleted-bg);
+}
 
-    .hljs-char.escape_,
-    .hljs-link,
-    .hljs-params,
-    .hljs-property,
-    .hljs-punctuation,
-    .hljs-tag {
-        /* purposely ignored */
-    }
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+    /* purposely ignored */
+    color: inherit;
 }