From 8461e4e7b4e96269386ad0c4e8497bc398fe93c2 Mon Sep 17 00:00:00 2001
From: Leo <contact@leonguyen.com>
Date: Wed, 11 Sep 2024 15:10:02 -0500
Subject: [PATCH] Improve colors of Prism theme.

---
 scss/vendors/_prismjs.scss | 211 +++++++++++++++++++------------------
 1 file changed, 106 insertions(+), 105 deletions(-)

diff --git a/scss/vendors/_prismjs.scss b/scss/vendors/_prismjs.scss
index c8a5e2e..633eb2b 100644
--- a/scss/vendors/_prismjs.scss
+++ b/scss/vendors/_prismjs.scss
@@ -1,16 +1,16 @@
 /**
- * Prism Essence Theme, based on Material Theme.
+ * Essence's Prism Theme, based on Material Theme, but brighter.
  *
  * Author: Leo Nguyen
  */
-$prism-bg:     hsl(220, 25%, 25%);
-$prism-gray:   hsl(230, 40%, 70%);
-$prism-red:    hsl(0, 100%, 80%);
-$prism-orange: hsl(15, 90%, 70%);
-$prism-yellow: hsl(50, 100%, 75%);
-$prism-green:  hsl(100, 80%, 80%);
-$prism-cyan:   hsl(200, 100%, 80%);
-$prism-blue:   hsl(230, 100%, 80%);
+$prism-bg: hsl(220, 15%, 20%);
+$prism-gray: hsl(210, 30%, 65%);
+$prism-red: hsl(0, 100%, 80%);
+$prism-orange: hsl(25, 100%, 70%);
+$prism-yellow: hsl(50, 100%, 70%);
+$prism-green: hsl(100, 80%, 80%);
+$prism-cyan: hsl(190, 100%, 80%);
+$prism-blue: hsl(230, 100%, 80%);
 $prism-purple: hsl(275, 100%, 80%);
 
 pre {
@@ -18,14 +18,10 @@ pre {
   padding: 1.5rem;
   border-radius: 0.5rem;
   background: $prism-bg;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  font-size: 1rem;
   line-height: 1.5;
   overflow: auto;
   white-space: pre;
   word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
   tab-size: 4;
   hyphens: none;
 
@@ -36,100 +32,105 @@ pre {
   }
 }
 
-/* Purple (keyword) */
-.token.keyword,
-.token.important,
-.token.builtin,
-.token.atrule {
-  color: $prism-purple;
-}
-
-/* Yellow (entity, class) */
-.token.entity,
-.token.class,
-.token.name,
-.token.class-name,
-.token.package,
-.token.scope,
-.token.attr-name {
-  color: $prism-yellow;
-}
-
-/* Blue (function) */
-.token.function-name,
-.token.function {
-  color: $prism-blue;
-}
-
-/* Red (tag) */
-.token.tag,
-.token.namespace,
-.token.selector,
-.token.deleted {
-  color: $prism-red;
-}
-
-/* Green (string, attribute) */
-.token.string,
-.token.char,
-.token.property,
-.token.attr-value,
-.token.regex {
-  color: $prism-green;
-}
-
-/* Orange (number, literal) */
-.token.number,
-.token.boolean,
-.token.constant {
-  color: $prism-orange;
-}
-
-/* Cyan (sign) */
-.token.symbol,
-.token.punctuation,
-.token.operator,
-.token.url,
-.token.unit,
-.token.hexcode,
-.token.doctype-tag {
-  color: $prism-cyan;
-}
-
-/* White (variable, CSS pseudo class) */
-.token.variable,
-.token.pseudo-class {
-  color: #fff;
-}
-
-/* Gray (comment) */
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: $prism-gray;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.inserted {
-  color: green;
-}
-
-div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > span {
+div.code-toolbar > .toolbar > .toolbar-item > a,
+div.code-toolbar > .toolbar > .toolbar-item > button,
+div.code-toolbar > .toolbar > .toolbar-item > span {
   padding: 0.5em 1em;
   margin: 0.25em 0.5em;
   font-size: 0.9em;
   color: #eee;
 }
+
+.token {
+  /* Red (constant, tag, selector) */
+  &.constant,
+  &.tag,
+  &.selector,
+  &.namespace,
+  &.deleted {
+    color: $prism-red;
+  }
+
+  /* Orange/Red (number, boolean, constant) */
+  &.number,
+  &.boolean {
+    color: $prism-orange;
+  }
+
+  /* Yellow (entity, class) */
+  &.entity,
+  &.class,
+  &.name,
+  &.class-name,
+  &.package,
+  &.scope,
+  &.attr-name {
+    color: $prism-yellow;
+  }
+
+  /* Green (string, attribute) */
+  &.string,
+  &.char,
+  &.property,
+  &.attr-value,
+  &.regex {
+    color: $prism-green;
+  }
+
+  /* Cyan (symbol) */
+  &.symbol,
+  &.punctuation,
+  &.operator,
+  &.url,
+  &.unit,
+  &.hexcode,
+  &.doctype-tag {
+    color: $prism-cyan;
+  }
+
+  /* Blue (function) */
+  &.function-name,
+  &.function {
+    color: $prism-blue;
+  }
+
+  /* Purple (keyword) */
+  &.keyword,
+  &.important,
+  &.builtin,
+  &.atrule {
+    color: $prism-purple;
+  }
+
+  /* White (variable, CSS pseudo class) */
+  &.variable,
+  &.pseudo-class {
+    color: #fff;
+  }
+
+  /* Gray (comment) */
+  &.comment,
+  &.block-comment,
+  &.prolog,
+  &.doctype,
+  &.cdata {
+    color: $prism-gray;
+  }
+
+  // &.important,
+  &.bold {
+    font-weight: bold;
+  }
+
+  &.italic {
+    font-style: italic;
+  }
+
+  &.entity {
+    cursor: help;
+  }
+
+  &.inserted {
+    color: green;
+  }
+}