assets/css/prism.css: update to match theme

assets/css/prism.css

@@ -1,16 +1,57 @@
 /**
- * Gruvbox dark theme
  *
- * Adapted from a theme based on:
+ * Gruvbox-material medium dark
- * Vim Gruvbox dark Theme (https://github.com/morhetz/gruvbox)
  *
- * @author Azat S. <to@azat.io>
+ * Adapted from a prismjs theme by Azat S. <to@azat.io>
+ * With an attempt to match colours from https://github.com/sainnhe/gruvbox-material/blob/master/colors/gruvbox-material.vim
+ * by sainnhe <i@sainnhe.dev>, with creative liberties according to my taste
+ *
+ * @author revsuine < pid1 at revsuine dot xyz >
  * @version 1.0
+ *
  */
 
+/* COLOURS */
+pre[class*="language-"] {
+    /* gruvbox material medium dark https://github.com/sainnhe/gruvbox-material */
+    --bg_dim: #1b1b1b;
+    --bg0: #282828;
+    --bg1: #32302f;
+    --bg2: #32302f;
+    --bg3: #45403d;
+    --bg4: #45403d;
+    --bg5: #5a524c;
+    --bg_statusline1: #32302f;
+    --bg_statusline2: #313735;
+    --bg_statusline3: #504945;
+    --bg_diff_green: #34381b;
+    --bg_visual_green: #3b4439;
+    --bg_diff_red: #402120;
+    --bg_visual_red: #4c3432;
+    --bg_diff_blue: #0e363e;
+    --bg_visual_blue: #373131;
+    --bg_visual_yellow: #4f422e;
+    --bg_current_word: #3c3836;
+    --fg0: #d4be98;
+    --fg1: #ddc7a1;
+    --red: #ea6962;
+    --orange: #e78a4e;
+    --yellow: #d8a657;
+    --green: #a9b665;
+    --aqua: #89b482;
+    --blue: #7daea3;
+    --purple: #d3869b;
+    --bg_red: #ea6962;
+    --bg_green: #a9b665;
+    --bg_yellow: #d8a657;
+    --grey0: #7c6f64;
+    --grey1: #928374;
+    --grey2: #a89984;
+}
+
 code[class*="language-"],
 pre[class*="language-"] {
-	color: #ebdbb2; /* fg1 / fg */
+	color: var(--fg0);
 	font-family: "Fira Code", "Ubuntu Mono", Consolas, Monaco, "Andale Mono", monospace;
 	direction: ltr;
 	text-align: left;
@@ -33,16 +74,16 @@ pre[class*="language-"]::-moz-selection,
 pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection,
 code[class*="language-"] ::-moz-selection {
-	color: #fbf1c7; /* fg0 */
+	color: var(--fg0);
-	background: #7c6f64; /* bg4 */
+	background: var(--bg3);
 }
 
 pre[class*="language-"]::selection,
 pre[class*="language-"] ::selection,
 code[class*="language-"]::selection,
 code[class*="language-"] ::selection {
-	color: #fbf1c7; /* fg0 */
+	color: var(--fg0);
-	background: #7c6f64; /* bg4 */
+	background: var(--bg3);
 }
 
 /* Code blocks */
@@ -54,19 +95,18 @@ pre[class*="language-"] {
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-	background: #1d2021; /* bg0_h */
+	background: var(--bg_dim);
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
 	padding: 0.1em;
-	border-radius: 0.3em;
 }
 
 .token.comment,
 .token.prolog,
 .token.cdata {
-	color: #a89984; /* fg4 / gray1 */
+	color: var(--grey0);
 }
 
 .token.delimiter,
@@ -75,55 +115,52 @@ pre[class*="language-"] {
 .token.selector,
 .token.important,
 .token.atrule {
-	color: #fb4934; /* red2 */
+	color: var(--red);
 }
 
 .token.operator,
 .token.punctuation,
 .token.attr-name {
-	color: #a89984; /* fg4 / gray1 */
+	color: var(--grey2);
 }
 
 .token.tag,
 .token.tag .punctuation,
 .token.doctype,
 .token.builtin {
-	color: #fabd2f; /* yellow2 */
+	color: var(--yellow);
 }
 
 .token.entity,
 .token.number,
 .token.symbol {
-	color: #d3869b; /* purple2 */
+	color: var(--aqua);
 }
 
 .token.property,
 .token.constant,
 .token.variable {
-	color: #fb4934; /* red2 */
+	color: var(--blue);
 }
 
 .token.string,
-.token.char {
+.token.char,
-	color: #b8bb26; /* green2 */
-}
-
 .token.attr-value,
 .token.attr-value .punctuation {
-	color: #a89984; /* fg4 / gray1 */
+	color: var(--green);
 }
 
 .token.url {
-	color: #b8bb26; /* green2 */
+	color: var(--green);
 	text-decoration: underline;
 }
 
 .token.function {
-	color: #fabd2f; /* yellow2 */
+	color: var(--yellow);
 }
 
 .token.regex {
-	background: #b8bb26; /* green2 */
+	background: var(--green);
 }
 
 .token.bold {
@@ -135,11 +172,11 @@ pre[class*="language-"] {
 }
 
 .token.inserted {
-	background: #a89984; /* fg4 / gray1 */
+	background: var(--bg_diff_green);
 }
 
 .token.deleted {
-	background: #fb4934; /* red2 */
+	background: var(--bg_diff_red);
 }
 
 /* css for hover button from https://github.com/panr/hugo-theme-terminal/blob/master/assets/css/prism.css */