fix: different colours for code blocks and inline code

I'm unsure why ".mocha code" seems to
works instead of ".mocha code.hljs?" in
this port. For now, I am manually deleting the erroneous lines of code
generated by catppuccin/highlightjs

It's worth mentioning that this might
not be upstream's "fault" but merely an
implementation bug on mdBook's side.

cc: @nekowinston

palette/catppuccin-highlight.scss

@@ -1,26 +1,32 @@
-// https://github.com/catppuccin/highlightjs/pull/1
+// FIXME: Go upstream to catppuccin/highlightjs and fix the problem OR alteast understand the problem right now
+// The problem is that `.mocha code.hljs` is overriding the colours but `.mocha code` works perfectly
+// Until then, make sure you manually edit the files to remove that properly
 
 .mocha {
-  @import "@catppuccin/highlightjs/sass/catppuccin-mocha";
-  code.hljs {
+  code {
+    color: #cdd6f4;
     background: #181825;
   }
+  @import "@catppuccin/highlightjs/sass/catppuccin-mocha";
 }
 .macchiato {
-  @import "@catppuccin/highlightjs/sass/catppuccin-macchiato";
-  code.hljs {
+  code {
+    color: #cad3f5;
     background: #1e2030;
   }
+  @import "@catppuccin/highlightjs/sass/catppuccin-macchiato";
 }
 .frappe {
-  @import "@catppuccin/highlightjs/sass/catppuccin-frappe";
-  code.hljs {
+  code {
+    color: #c6d0f5;
     background: #292c3c;
   }
+  @import "@catppuccin/highlightjs/sass/catppuccin-frappe";
 }
 .latte {
-  @import "@catppuccin/highlightjs/sass/catppuccin-latte";
-  code.hljs {
+  code {
+    color: #4c4f69;
     background: #e6e9ef;
   }
+  @import "@catppuccin/highlightjs/sass/catppuccin-latte";
 }

src/bin/assets/catppuccin-highlight.css

@@ -1,6 +1,6 @@
-.mocha code.hljs {
+.mocha code {
   color: #cdd6f4;
-  background: #1e1e2e;
+  background: #181825;
 }
 .mocha code .hljs-keyword {
   color: #cba6f7;
@@ -140,13 +140,10 @@
   color: #f38ba8;
   background: rgba(243, 139, 168, 0.15);
 }
-.mocha code.hljs {
-  background: #181825;
-}
 
-.macchiato code.hljs {
+.macchiato code {
   color: #cad3f5;
-  background: #24273a;
+  background: #1e2030;
 }
 .macchiato code .hljs-keyword {
   color: #c6a0f6;
@@ -286,13 +283,10 @@
   color: #ed8796;
   background: rgba(237, 135, 150, 0.15);
 }
-.macchiato code.hljs {
-  background: #1e2030;
-}
 
-.frappe code.hljs {
+.frappe code {
   color: #c6d0f5;
-  background: #303446;
+  background: #292c3c;
 }
 .frappe code .hljs-keyword {
   color: #ca9ee6;
@@ -432,13 +426,10 @@
   color: #e78284;
   background: rgba(231, 130, 132, 0.15);
 }
-.frappe code.hljs {
-  background: #292c3c;
-}
 
-.latte code.hljs {
+.latte code {
   color: #4c4f69;
-  background: #eff1f5;
+  background: #e6e9ef;
 }
 .latte code .hljs-keyword {
   color: #8839ef;
@@ -578,6 +569,3 @@
   color: #d20f39;
   background: rgba(210, 15, 57, 0.15);
 }
-.latte code.hljs {
-  background: #e6e9ef;
-}