From 5a160cd7e9a8ba21fc4cb4c884e3a664fcf715ea Mon Sep 17 00:00:00 2001
From: sgoudham <sgoudham@gmail.com>
Date: Sat, 16 Sep 2023 19:53:20 +0100
Subject: [PATCH] refactor!: merge css files and separate admonish

This commit merges the existing
"catppuccin.css" and "catppuccin-highlight.css"
files. It also separates out the admonishments
into its own "catppuccin-admonish.css" file.

This leaves us with two files - "catppuccin.css"
and "catppuccin-admonish.css"

Both files are packaged and shipped by default,
however, it's worth mentioning that the
admonish file is NOT required unless the end user
is using the "mdbook-admonish" plugin.
---
 README.md                                     |  88 +-
 example/book.toml                             |   6 +-
 example/theme/catppuccin-admonish.css         |   1 +
 example/theme/catppuccin-highlight.css        |   1 -
 ...admonish.scss => catppuccin-admonish.scss} |   6 +
 palette/catppuccin-highlight.scss             |  20 -
 palette/catppuccin.scss                       |  22 +-
 src/bin/assets/catppuccin-admonish.css        | 363 +++++++
 src/bin/assets/catppuccin-highlight.css       | 619 -----------
 src/bin/assets/catppuccin.css                 | 972 +++++++++++-------
 src/bin/mdbook-catppuccin.rs                  |   4 +-
 11 files changed, 1076 insertions(+), 1026 deletions(-)
 create mode 120000 example/theme/catppuccin-admonish.css
 delete mode 120000 example/theme/catppuccin-highlight.css
 rename palette/{_admonish.scss => catppuccin-admonish.scss} (92%)
 delete mode 100644 palette/catppuccin-highlight.scss
 create mode 100644 src/bin/assets/catppuccin-admonish.css
 delete mode 100644 src/bin/assets/catppuccin-highlight.css

diff --git a/README.md b/README.md
index 13dd0a5..7821201 100644
--- a/README.md
+++ b/README.md
@@ -52,37 +52,77 @@
 1. Navigate to `src/bin/assets` within this repository
 
 2. Download all assets: `index.hbs`, `catppuccin.css` and
-   `catppuccin-highlight.css`
+   `catppuccin-admonish.css`
 
-3. Transfer downloaded assets to your mdBook theme directory (the default
-   directory would be `theme/` from the mdBook root if not already specified
-   within the `book.toml`)
+   > [!NOTE]
+   > The `catppuccin-admonish.css` file is **NOT** required if you are not using
+   > the [mdbook-admonish](https://github.com/tommilligan/mdbook-admonish) plugin.
+
+3. Transfer downloaded assets to your mdBook's theme directory (the default
+   directory is `./theme` beside `book.toml`)
 
 4. Update `additional-css` key within the `book.toml` as shown below
 
    ```diff
    [output.html]
    -additional-css = []
-   +additional-css = ["./theme/catppuccin.css", "./theme/catppuccin-highlight.css"]
+   +additional-css = ["./theme/catppuccin.css", "./theme/catppuccin-admonish.css"]
    ```
 
 5. Build your mdBook using `mdbook build` and enjoy your new catppuccin
    flavours!
 
-### Building Locally
+### Development
+
+1. Clone the repository and navigate to the repository root.
+
+   ```shell
+   git clone https://github.com/catppuccin/mdbook
+   cd mdbook
+   ```
+
+2. Run the following command to generate the CSS files that will be packaged by the rust binary:
 
-**Minimum Rust Version:** 1.63.0
+   ```shell
+   npm run build
+   ```
+
+3. Build the rust binary using the following command:
+
+   Note that the **Minimum Rust Version** is 1.63.0
+
+   ```shell
+   cargo build --release
+   ```
 
-```shell
-git clone https://github.com/catppuccin/mdbook
-cd mdbook
-cargo build --release
-```
+4. Test the binary by installing the new assets on the [`example`](./example/) directory:
+
+   ```shell
+   cd example
+   ../../target/release/mdbook-catppuccin install
+   mdbook serve
+   ```
 
 ## 🙋 FAQ
 
 - Q: **_"What's the point of the `mdbook-catppuccin` binary?"_**\
-  A: Arguably, it's better to transfer over the files manually to avoid installing another tool. However, the assets will **NOT** be managed for you. It is also worth mentioning that the binary will be able to detect differences in versions of assets.
+  A: Arguably, it's better to transfer over the files manually to avoid
+  installing another tool. However, the assets will **NOT** be managed for you.
+  It is also worth mentioning that the binary will be able to detect differences
+  in versions of assets.
+
+- Q: **_"What's the `catppuccin-admonish.css` file?"_**\
+  A: It is a CSS file that is used to style the admonishments that are generated
+  by the [mdbook-admonish](https://github.com/tommilligan/mdbook-admonish).
+  **You can remove this file if you are not using this plugin.**
+
+  E.g.
+  ```diff
+  [output.html]
+  -additional-css = ["./theme/catppuccin.css", "./theme/catppuccin-admonish.css"]
+  +additional-css = ["./theme/catppuccin.css"]
+  ```
+
 - Q: **_"How can I remove the default themes?"_**\
   A:
 
@@ -91,17 +131,17 @@ cargo build --release
     and remove the themes that you don't want. Remember to run `mdbook build` again!
   - E.g. To remove all default themes:
 
-  ```diff
-  - <li role="none"><button role="menuitem" class="theme" id="light">{{ theme_option "Light" }}</button></li>
-  - <li role="none"><button role="menuitem" class="theme" id="rust">{{ theme_option "Rust" }}</button></li>
-  - <li role="none"><button role="menuitem" class="theme" id="coal">{{ theme_option "Coal" }}</button></li>
-  - <li role="none"><button role="menuitem" class="theme" id="navy">{{ theme_option "Navy" }}</button></li>
-  - <li role="none"><button role="menuitem" class="theme" id="ayu">{{ theme_option "Ayu" }}</button></li>
-  + <li role="none"><button role="menuitem" class="theme" id="latte">{{ theme_option "Latte" }}</button></li>
-  + <li role="none"><button role="menuitem" class="theme" id="frappe">{{ theme_option "Frappé" }}</button></li>
-  + <li role="none"><button role="menuitem" class="theme" id="macchiato">{{ theme_option "Macchiato" }}</button></li>
-  + <li role="none"><button role="menuitem" class="theme" id="mocha">{{ theme_option "Mocha" }}</button></li>
-  ```
+    ```diff
+    - <li role="none"><button role="menuitem" class="theme" id="light">{{ theme_option "Light" }}</button></li>
+    - <li role="none"><button role="menuitem" class="theme" id="rust">{{ theme_option "Rust" }}</button></li>
+    - <li role="none"><button role="menuitem" class="theme" id="coal">{{ theme_option "Coal" }}</button></li>
+    - <li role="none"><button role="menuitem" class="theme" id="navy">{{ theme_option "Navy" }}</button></li>
+    - <li role="none"><button role="menuitem" class="theme" id="ayu">{{ theme_option "Ayu" }}</button></li>
+    + <li role="none"><button role="menuitem" class="theme" id="latte">{{ theme_option "Latte" }}</button></li>
+    + <li role="none"><button role="menuitem" class="theme" id="frappe">{{ theme_option "Frappé" }}</button></li>
+    + <li role="none"><button role="menuitem" class="theme" id="macchiato">{{ theme_option "Macchiato" }}</button></li>
+    + <li role="none"><button role="menuitem" class="theme" id="mocha">{{ theme_option "Mocha" }}</button></li>
+    ```
 
 ## Acknowledgement
 
diff --git a/example/book.toml b/example/book.toml
index 5139975..02382a1 100644
--- a/example/book.toml
+++ b/example/book.toml
@@ -17,7 +17,11 @@ assets_version = "2.0.2" # do not edit: managed by `mdbook-admonish install`
 [output.html]
 default-theme = "mocha"
 preferred-dark-theme = "mocha"
-additional-css = ["./theme/catppuccin.css", "./theme/catppuccin-highlight.css", "./theme/mdbook-admonish.css"]
+additional-css = [
+  "./theme/catppuccin.css",
+  "./theme/catppuccin-admonish.css",
+  "./theme/mdbook-admonish.css",
+]
 no-section-label = true
 git-repository-url = "https://github.com/catppuccin/mdBook"
 git-repository-icon = "fa-github"
diff --git a/example/theme/catppuccin-admonish.css b/example/theme/catppuccin-admonish.css
new file mode 120000
index 0000000..889b9e3
--- /dev/null
+++ b/example/theme/catppuccin-admonish.css
@@ -0,0 +1 @@
+../../src/bin/assets/catppuccin-admonish.css
\ No newline at end of file
diff --git a/example/theme/catppuccin-highlight.css b/example/theme/catppuccin-highlight.css
deleted file mode 120000
index 07858dd..0000000
--- a/example/theme/catppuccin-highlight.css
+++ /dev/null
@@ -1 +0,0 @@
-../../src/bin/assets/catppuccin-highlight.css
\ No newline at end of file
diff --git a/palette/_admonish.scss b/palette/catppuccin-admonish.scss
similarity index 92%
rename from palette/_admonish.scss
rename to palette/catppuccin-admonish.scss
index 5093fbd..741b15b 100644
--- a/palette/_admonish.scss
+++ b/palette/catppuccin-admonish.scss
@@ -69,3 +69,9 @@ $mappings: (
     @include level($palette, $classes, $color);
   }
 }
+
+@each $flavour, $color in catppuccin.$palette {
+  .#{$flavour} {
+    @include main($color);
+  }
+}
diff --git a/palette/catppuccin-highlight.scss b/palette/catppuccin-highlight.scss
deleted file mode 100644
index 077262a..0000000
--- a/palette/catppuccin-highlight.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use "@catppuccin/palette/scss/catppuccin";
-@use "@catppuccin/highlightjs/sass/_theme" as hljs;
-
-@each $flavour, $colour in catppuccin.$palette {
-  .#{$flavour} {
-    @include hljs.highlights($flavour, "hex");
-    code {
-      color: map-get($colour, "text");
-      background: map-get($colour, "mantle");
-    }
-    .ace_gutter {
-      color: map-get($colour, "overlay1");
-      background: map-get($colour, "mantle");
-    }
-    .ace_gutter-active-line.ace_gutter-cell {
-      color: map-get($colour, "pink");
-      background: map-get($colour, "mantle");
-    }
-  }
-}
diff --git a/palette/catppuccin.scss b/palette/catppuccin.scss
index c41b5d7..3048874 100644
--- a/palette/catppuccin.scss
+++ b/palette/catppuccin.scss
@@ -1,5 +1,23 @@
 @use "@catppuccin/palette/scss/catppuccin" as catppuccin;
-@use "admonish";
+@use "@catppuccin/highlightjs/sass/_theme" as hljs;
+
+@each $flavour, $colour in catppuccin.$palette {
+  .#{$flavour} {
+    @include hljs.highlights($flavour, "hex");
+    code {
+      color: map-get($colour, "text");
+      background: map-get($colour, "mantle");
+    }
+    .ace_gutter {
+      color: map-get($colour, "overlay1");
+      background: map-get($colour, "mantle");
+    }
+    .ace_gutter-active-line.ace_gutter-cell {
+      color: map-get($colour, "pink");
+      background: map-get($colour, "mantle");
+    }
+  }
+}
 
 @each $flavour, $color in catppuccin.$palette {
   .#{$flavour} {
@@ -31,7 +49,5 @@
     --searchresults-border-color: #{map-get($color, "crust")};
     --searchresults-li-bg: #{map-get($color, "base")};
     --search-mark-bg: #{map-get($color, "peach")};
-
-    @include admonish.main($color);
   }
 }
diff --git a/src/bin/assets/catppuccin-admonish.css b/src/bin/assets/catppuccin-admonish.css
new file mode 100644
index 0000000..5efffe6
--- /dev/null
+++ b/src/bin/assets/catppuccin-admonish.css
@@ -0,0 +1,363 @@
+.mocha :is(.admonition):is(.hint, .important, .tip) {
+  border-color: #f9e2af;
+}
+.mocha :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(249, 226, 175, 0.2);
+}
+.mocha :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f9e2af;
+}
+.mocha :is(.admonition):is(.abstract, .summary, .tldr) {
+  border-color: #f2cdcd;
+}
+.mocha :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(242, 205, 205, 0.2);
+}
+.mocha :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f2cdcd;
+}
+.mocha :is(.admonition):is(.example) {
+  border-color: #cba6f7;
+}
+.mocha :is(.example) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(203, 166, 247, 0.2);
+}
+.mocha :is(.example) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #cba6f7;
+}
+.mocha :is(.admonition):is(.info, .todo) {
+  border-color: #89dceb;
+}
+.mocha :is(.info, .todo) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(137, 220, 235, 0.2);
+}
+.mocha :is(.info, .todo) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #89dceb;
+}
+.mocha :is(.admonition):is(.check, .done, .success) {
+  border-color: #a6e3a1;
+}
+.mocha :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(166, 227, 161, 0.2);
+}
+.mocha :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #a6e3a1;
+}
+.mocha :is(.admonition):is(.note) {
+  border-color: #89b4fa;
+}
+.mocha :is(.note) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(137, 180, 250, 0.2);
+}
+.mocha :is(.note) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #89b4fa;
+}
+.mocha :is(.admonition):is(.attention, .caution, .warning) {
+  border-color: #fab387;
+}
+.mocha :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(250, 179, 135, 0.2);
+}
+.mocha :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #fab387;
+}
+.mocha :is(.admonition):is(.faq, .help, .question) {
+  border-color: #94e2d5;
+}
+.mocha :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(148, 226, 213, 0.2);
+}
+.mocha :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #94e2d5;
+}
+.mocha :is(.admonition):is(.bug, .danger, .error, .fail, .failure, .missing) {
+  border-color: #f38ba8;
+}
+.mocha :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(243, 139, 168, 0.2);
+}
+.mocha :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f38ba8;
+}
+.mocha :is(.admonition):is(.cite, .quote) {
+  border-color: #f5c2e7;
+}
+.mocha :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(245, 194, 231, 0.2);
+}
+.mocha :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f5c2e7;
+}
+
+.macchiato :is(.admonition):is(.hint, .important, .tip) {
+  border-color: #eed49f;
+}
+.macchiato :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(238, 212, 159, 0.2);
+}
+.macchiato :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #eed49f;
+}
+.macchiato :is(.admonition):is(.abstract, .summary, .tldr) {
+  border-color: #f0c6c6;
+}
+.macchiato :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(240, 198, 198, 0.2);
+}
+.macchiato :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f0c6c6;
+}
+.macchiato :is(.admonition):is(.example) {
+  border-color: #c6a0f6;
+}
+.macchiato :is(.example) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(198, 160, 246, 0.2);
+}
+.macchiato :is(.example) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #c6a0f6;
+}
+.macchiato :is(.admonition):is(.info, .todo) {
+  border-color: #91d7e3;
+}
+.macchiato :is(.info, .todo) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(145, 215, 227, 0.2);
+}
+.macchiato :is(.info, .todo) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #91d7e3;
+}
+.macchiato :is(.admonition):is(.check, .done, .success) {
+  border-color: #a6da95;
+}
+.macchiato :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(166, 218, 149, 0.2);
+}
+.macchiato :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #a6da95;
+}
+.macchiato :is(.admonition):is(.note) {
+  border-color: #8aadf4;
+}
+.macchiato :is(.note) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(138, 173, 244, 0.2);
+}
+.macchiato :is(.note) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #8aadf4;
+}
+.macchiato :is(.admonition):is(.attention, .caution, .warning) {
+  border-color: #f5a97f;
+}
+.macchiato :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(245, 169, 127, 0.2);
+}
+.macchiato :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f5a97f;
+}
+.macchiato :is(.admonition):is(.faq, .help, .question) {
+  border-color: #8bd5ca;
+}
+.macchiato :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(139, 213, 202, 0.2);
+}
+.macchiato :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #8bd5ca;
+}
+.macchiato :is(.admonition):is(.bug, .danger, .error, .fail, .failure, .missing) {
+  border-color: #ed8796;
+}
+.macchiato :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(237, 135, 150, 0.2);
+}
+.macchiato :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #ed8796;
+}
+.macchiato :is(.admonition):is(.cite, .quote) {
+  border-color: #f5bde6;
+}
+.macchiato :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(245, 189, 230, 0.2);
+}
+.macchiato :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f5bde6;
+}
+
+.frappe :is(.admonition):is(.hint, .important, .tip) {
+  border-color: #e5c890;
+}
+.frappe :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(229, 200, 144, 0.2);
+}
+.frappe :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #e5c890;
+}
+.frappe :is(.admonition):is(.abstract, .summary, .tldr) {
+  border-color: #eebebe;
+}
+.frappe :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(238, 190, 190, 0.2);
+}
+.frappe :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #eebebe;
+}
+.frappe :is(.admonition):is(.example) {
+  border-color: #ca9ee6;
+}
+.frappe :is(.example) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(202, 158, 230, 0.2);
+}
+.frappe :is(.example) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #ca9ee6;
+}
+.frappe :is(.admonition):is(.info, .todo) {
+  border-color: #99d1db;
+}
+.frappe :is(.info, .todo) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(153, 209, 219, 0.2);
+}
+.frappe :is(.info, .todo) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #99d1db;
+}
+.frappe :is(.admonition):is(.check, .done, .success) {
+  border-color: #a6d189;
+}
+.frappe :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(166, 209, 137, 0.2);
+}
+.frappe :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #a6d189;
+}
+.frappe :is(.admonition):is(.note) {
+  border-color: #8caaee;
+}
+.frappe :is(.note) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(140, 170, 238, 0.2);
+}
+.frappe :is(.note) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #8caaee;
+}
+.frappe :is(.admonition):is(.attention, .caution, .warning) {
+  border-color: #ef9f76;
+}
+.frappe :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(239, 159, 118, 0.2);
+}
+.frappe :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #ef9f76;
+}
+.frappe :is(.admonition):is(.faq, .help, .question) {
+  border-color: #81c8be;
+}
+.frappe :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(129, 200, 190, 0.2);
+}
+.frappe :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #81c8be;
+}
+.frappe :is(.admonition):is(.bug, .danger, .error, .fail, .failure, .missing) {
+  border-color: #e78284;
+}
+.frappe :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(231, 130, 132, 0.2);
+}
+.frappe :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #e78284;
+}
+.frappe :is(.admonition):is(.cite, .quote) {
+  border-color: #f4b8e4;
+}
+.frappe :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(244, 184, 228, 0.2);
+}
+.frappe :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #f4b8e4;
+}
+
+.latte :is(.admonition):is(.hint, .important, .tip) {
+  border-color: #df8e1d;
+}
+.latte :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(223, 142, 29, 0.2);
+}
+.latte :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #df8e1d;
+}
+.latte :is(.admonition):is(.abstract, .summary, .tldr) {
+  border-color: #dd7878;
+}
+.latte :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(221, 120, 120, 0.2);
+}
+.latte :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #dd7878;
+}
+.latte :is(.admonition):is(.example) {
+  border-color: #8839ef;
+}
+.latte :is(.example) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(136, 57, 239, 0.2);
+}
+.latte :is(.example) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #8839ef;
+}
+.latte :is(.admonition):is(.info, .todo) {
+  border-color: #04a5e5;
+}
+.latte :is(.info, .todo) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(4, 165, 229, 0.2);
+}
+.latte :is(.info, .todo) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #04a5e5;
+}
+.latte :is(.admonition):is(.check, .done, .success) {
+  border-color: #40a02b;
+}
+.latte :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(64, 160, 43, 0.2);
+}
+.latte :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #40a02b;
+}
+.latte :is(.admonition):is(.note) {
+  border-color: #1e66f5;
+}
+.latte :is(.note) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(30, 102, 245, 0.2);
+}
+.latte :is(.note) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #1e66f5;
+}
+.latte :is(.admonition):is(.attention, .caution, .warning) {
+  border-color: #fe640b;
+}
+.latte :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(254, 100, 11, 0.2);
+}
+.latte :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #fe640b;
+}
+.latte :is(.admonition):is(.faq, .help, .question) {
+  border-color: #179299;
+}
+.latte :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(23, 146, 153, 0.2);
+}
+.latte :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #179299;
+}
+.latte :is(.admonition):is(.bug, .danger, .error, .fail, .failure, .missing) {
+  border-color: #d20f39;
+}
+.latte :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(210, 15, 57, 0.2);
+}
+.latte :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #d20f39;
+}
+.latte :is(.admonition):is(.cite, .quote) {
+  border-color: #ea76cb;
+}
+.latte :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title) {
+  background-color: rgba(234, 118, 203, 0.2);
+}
+.latte :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title)::before {
+  background-color: #ea76cb;
+}
diff --git a/src/bin/assets/catppuccin-highlight.css b/src/bin/assets/catppuccin-highlight.css
deleted file mode 100644
index 6d2f949..0000000
--- a/src/bin/assets/catppuccin-highlight.css
+++ /dev/null
@@ -1,619 +0,0 @@
-.mocha.hljs {
-  color: #cdd6f4;
-  background: #1e1e2e;
-}
-.mocha .hljs-keyword {
-  color: #cba6f7;
-}
-.mocha .hljs-built_in {
-  color: #f38ba8;
-}
-.mocha .hljs-type {
-  color: #f9e2af;
-}
-.mocha .hljs-literal {
-  color: #fab387;
-}
-.mocha .hljs-number {
-  color: #fab387;
-}
-.mocha .hljs-operator {
-  color: #94e2d5;
-}
-.mocha .hljs-punctuation {
-  color: #bac2de;
-}
-.mocha .hljs-property {
-  color: #94e2d5;
-}
-.mocha .hljs-regexp {
-  color: #f5c2e7;
-}
-.mocha .hljs-string {
-  color: #a6e3a1;
-}
-.mocha .hljs-char.escape_ {
-  color: #a6e3a1;
-}
-.mocha .hljs-subst {
-  color: #a6adc8;
-}
-.mocha .hljs-symbol {
-  color: #f2cdcd;
-}
-.mocha .hljs-variable {
-  color: #cba6f7;
-}
-.mocha .hljs-variable.language_ {
-  color: #cba6f7;
-}
-.mocha .hljs-variable.constant_ {
-  color: #fab387;
-}
-.mocha .hljs-title {
-  color: #89b4fa;
-}
-.mocha .hljs-title.class_ {
-  color: #f9e2af;
-}
-.mocha .hljs-title.function_ {
-  color: #89b4fa;
-}
-.mocha .hljs-params {
-  color: #cdd6f4;
-}
-.mocha .hljs-comment {
-  color: #585b70;
-}
-.mocha .hljs-doctag {
-  color: #f38ba8;
-}
-.mocha .hljs-meta {
-  color: #fab387;
-}
-.mocha .hljs-section {
-  color: #89b4fa;
-}
-.mocha .hljs-tag {
-  color: #a6adc8;
-}
-.mocha .hljs-name {
-  color: #cba6f7;
-}
-.mocha .hljs-attr {
-  color: #89b4fa;
-}
-.mocha .hljs-attribute {
-  color: #a6e3a1;
-}
-.mocha .hljs-bullet {
-  color: #94e2d5;
-}
-.mocha .hljs-code {
-  color: #a6e3a1;
-}
-.mocha .hljs-emphasis {
-  color: #f38ba8;
-  font-style: italic;
-}
-.mocha .hljs-strong {
-  color: #f38ba8;
-  font-weight: bold;
-}
-.mocha .hljs-formula {
-  color: #94e2d5;
-}
-.mocha .hljs-link {
-  color: #74c7ec;
-  font-style: italic;
-}
-.mocha .hljs-quote {
-  color: #a6e3a1;
-  font-style: italic;
-}
-.mocha .hljs-selector-tag {
-  color: #f9e2af;
-}
-.mocha .hljs-selector-id {
-  color: #89b4fa;
-}
-.mocha .hljs-selector-class {
-  color: #94e2d5;
-}
-.mocha .hljs-selector-attr {
-  color: #cba6f7;
-}
-.mocha .hljs-selector-pseudo {
-  color: #94e2d5;
-}
-.mocha .hljs-template-tag {
-  color: #f2cdcd;
-}
-.mocha .hljs-template-variable {
-  color: #f2cdcd;
-}
-.mocha .hljs-diff-addition {
-  color: #a6e3a1;
-  background: rgba(166, 227, 161, 0.15);
-}
-.mocha .hljs-diff-deletion {
-  color: #f38ba8;
-  background: rgba(243, 139, 168, 0.15);
-}
-.mocha code {
-  color: #cdd6f4;
-  background: #181825;
-}
-.mocha .ace_gutter {
-  color: #7f849c;
-  background: #181825;
-}
-.mocha .ace_gutter-active-line.ace_gutter-cell {
-  color: #f5c2e7;
-  background: #181825;
-}
-
-.macchiato.hljs {
-  color: #cad3f5;
-  background: #24273a;
-}
-.macchiato .hljs-keyword {
-  color: #c6a0f6;
-}
-.macchiato .hljs-built_in {
-  color: #ed8796;
-}
-.macchiato .hljs-type {
-  color: #eed49f;
-}
-.macchiato .hljs-literal {
-  color: #f5a97f;
-}
-.macchiato .hljs-number {
-  color: #f5a97f;
-}
-.macchiato .hljs-operator {
-  color: #8bd5ca;
-}
-.macchiato .hljs-punctuation {
-  color: #b8c0e0;
-}
-.macchiato .hljs-property {
-  color: #8bd5ca;
-}
-.macchiato .hljs-regexp {
-  color: #f5bde6;
-}
-.macchiato .hljs-string {
-  color: #a6da95;
-}
-.macchiato .hljs-char.escape_ {
-  color: #a6da95;
-}
-.macchiato .hljs-subst {
-  color: #a5adcb;
-}
-.macchiato .hljs-symbol {
-  color: #f0c6c6;
-}
-.macchiato .hljs-variable {
-  color: #c6a0f6;
-}
-.macchiato .hljs-variable.language_ {
-  color: #c6a0f6;
-}
-.macchiato .hljs-variable.constant_ {
-  color: #f5a97f;
-}
-.macchiato .hljs-title {
-  color: #8aadf4;
-}
-.macchiato .hljs-title.class_ {
-  color: #eed49f;
-}
-.macchiato .hljs-title.function_ {
-  color: #8aadf4;
-}
-.macchiato .hljs-params {
-  color: #cad3f5;
-}
-.macchiato .hljs-comment {
-  color: #5b6078;
-}
-.macchiato .hljs-doctag {
-  color: #ed8796;
-}
-.macchiato .hljs-meta {
-  color: #f5a97f;
-}
-.macchiato .hljs-section {
-  color: #8aadf4;
-}
-.macchiato .hljs-tag {
-  color: #a5adcb;
-}
-.macchiato .hljs-name {
-  color: #c6a0f6;
-}
-.macchiato .hljs-attr {
-  color: #8aadf4;
-}
-.macchiato .hljs-attribute {
-  color: #a6da95;
-}
-.macchiato .hljs-bullet {
-  color: #8bd5ca;
-}
-.macchiato .hljs-code {
-  color: #a6da95;
-}
-.macchiato .hljs-emphasis {
-  color: #ed8796;
-  font-style: italic;
-}
-.macchiato .hljs-strong {
-  color: #ed8796;
-  font-weight: bold;
-}
-.macchiato .hljs-formula {
-  color: #8bd5ca;
-}
-.macchiato .hljs-link {
-  color: #7dc4e4;
-  font-style: italic;
-}
-.macchiato .hljs-quote {
-  color: #a6da95;
-  font-style: italic;
-}
-.macchiato .hljs-selector-tag {
-  color: #eed49f;
-}
-.macchiato .hljs-selector-id {
-  color: #8aadf4;
-}
-.macchiato .hljs-selector-class {
-  color: #8bd5ca;
-}
-.macchiato .hljs-selector-attr {
-  color: #c6a0f6;
-}
-.macchiato .hljs-selector-pseudo {
-  color: #8bd5ca;
-}
-.macchiato .hljs-template-tag {
-  color: #f0c6c6;
-}
-.macchiato .hljs-template-variable {
-  color: #f0c6c6;
-}
-.macchiato .hljs-diff-addition {
-  color: #a6da95;
-  background: rgba(166, 218, 149, 0.15);
-}
-.macchiato .hljs-diff-deletion {
-  color: #ed8796;
-  background: rgba(237, 135, 150, 0.15);
-}
-.macchiato code {
-  color: #cad3f5;
-  background: #1e2030;
-}
-.macchiato .ace_gutter {
-  color: #8087a2;
-  background: #1e2030;
-}
-.macchiato .ace_gutter-active-line.ace_gutter-cell {
-  color: #f5bde6;
-  background: #1e2030;
-}
-
-.frappe.hljs {
-  color: #c6d0f5;
-  background: #303446;
-}
-.frappe .hljs-keyword {
-  color: #ca9ee6;
-}
-.frappe .hljs-built_in {
-  color: #e78284;
-}
-.frappe .hljs-type {
-  color: #e5c890;
-}
-.frappe .hljs-literal {
-  color: #ef9f76;
-}
-.frappe .hljs-number {
-  color: #ef9f76;
-}
-.frappe .hljs-operator {
-  color: #81c8be;
-}
-.frappe .hljs-punctuation {
-  color: #b5bfe2;
-}
-.frappe .hljs-property {
-  color: #81c8be;
-}
-.frappe .hljs-regexp {
-  color: #f4b8e4;
-}
-.frappe .hljs-string {
-  color: #a6d189;
-}
-.frappe .hljs-char.escape_ {
-  color: #a6d189;
-}
-.frappe .hljs-subst {
-  color: #a5adce;
-}
-.frappe .hljs-symbol {
-  color: #eebebe;
-}
-.frappe .hljs-variable {
-  color: #ca9ee6;
-}
-.frappe .hljs-variable.language_ {
-  color: #ca9ee6;
-}
-.frappe .hljs-variable.constant_ {
-  color: #ef9f76;
-}
-.frappe .hljs-title {
-  color: #8caaee;
-}
-.frappe .hljs-title.class_ {
-  color: #e5c890;
-}
-.frappe .hljs-title.function_ {
-  color: #8caaee;
-}
-.frappe .hljs-params {
-  color: #c6d0f5;
-}
-.frappe .hljs-comment {
-  color: #626880;
-}
-.frappe .hljs-doctag {
-  color: #e78284;
-}
-.frappe .hljs-meta {
-  color: #ef9f76;
-}
-.frappe .hljs-section {
-  color: #8caaee;
-}
-.frappe .hljs-tag {
-  color: #a5adce;
-}
-.frappe .hljs-name {
-  color: #ca9ee6;
-}
-.frappe .hljs-attr {
-  color: #8caaee;
-}
-.frappe .hljs-attribute {
-  color: #a6d189;
-}
-.frappe .hljs-bullet {
-  color: #81c8be;
-}
-.frappe .hljs-code {
-  color: #a6d189;
-}
-.frappe .hljs-emphasis {
-  color: #e78284;
-  font-style: italic;
-}
-.frappe .hljs-strong {
-  color: #e78284;
-  font-weight: bold;
-}
-.frappe .hljs-formula {
-  color: #81c8be;
-}
-.frappe .hljs-link {
-  color: #85c1dc;
-  font-style: italic;
-}
-.frappe .hljs-quote {
-  color: #a6d189;
-  font-style: italic;
-}
-.frappe .hljs-selector-tag {
-  color: #e5c890;
-}
-.frappe .hljs-selector-id {
-  color: #8caaee;
-}
-.frappe .hljs-selector-class {
-  color: #81c8be;
-}
-.frappe .hljs-selector-attr {
-  color: #ca9ee6;
-}
-.frappe .hljs-selector-pseudo {
-  color: #81c8be;
-}
-.frappe .hljs-template-tag {
-  color: #eebebe;
-}
-.frappe .hljs-template-variable {
-  color: #eebebe;
-}
-.frappe .hljs-diff-addition {
-  color: #a6d189;
-  background: rgba(166, 209, 137, 0.15);
-}
-.frappe .hljs-diff-deletion {
-  color: #e78284;
-  background: rgba(231, 130, 132, 0.15);
-}
-.frappe code {
-  color: #c6d0f5;
-  background: #292c3c;
-}
-.frappe .ace_gutter {
-  color: #838ba7;
-  background: #292c3c;
-}
-.frappe .ace_gutter-active-line.ace_gutter-cell {
-  color: #f4b8e4;
-  background: #292c3c;
-}
-
-.latte.hljs {
-  color: #4c4f69;
-  background: #eff1f5;
-}
-.latte .hljs-keyword {
-  color: #8839ef;
-}
-.latte .hljs-built_in {
-  color: #d20f39;
-}
-.latte .hljs-type {
-  color: #df8e1d;
-}
-.latte .hljs-literal {
-  color: #fe640b;
-}
-.latte .hljs-number {
-  color: #fe640b;
-}
-.latte .hljs-operator {
-  color: #179299;
-}
-.latte .hljs-punctuation {
-  color: #5c5f77;
-}
-.latte .hljs-property {
-  color: #179299;
-}
-.latte .hljs-regexp {
-  color: #ea76cb;
-}
-.latte .hljs-string {
-  color: #40a02b;
-}
-.latte .hljs-char.escape_ {
-  color: #40a02b;
-}
-.latte .hljs-subst {
-  color: #6c6f85;
-}
-.latte .hljs-symbol {
-  color: #dd7878;
-}
-.latte .hljs-variable {
-  color: #8839ef;
-}
-.latte .hljs-variable.language_ {
-  color: #8839ef;
-}
-.latte .hljs-variable.constant_ {
-  color: #fe640b;
-}
-.latte .hljs-title {
-  color: #1e66f5;
-}
-.latte .hljs-title.class_ {
-  color: #df8e1d;
-}
-.latte .hljs-title.function_ {
-  color: #1e66f5;
-}
-.latte .hljs-params {
-  color: #4c4f69;
-}
-.latte .hljs-comment {
-  color: #acb0be;
-}
-.latte .hljs-doctag {
-  color: #d20f39;
-}
-.latte .hljs-meta {
-  color: #fe640b;
-}
-.latte .hljs-section {
-  color: #1e66f5;
-}
-.latte .hljs-tag {
-  color: #6c6f85;
-}
-.latte .hljs-name {
-  color: #8839ef;
-}
-.latte .hljs-attr {
-  color: #1e66f5;
-}
-.latte .hljs-attribute {
-  color: #40a02b;
-}
-.latte .hljs-bullet {
-  color: #179299;
-}
-.latte .hljs-code {
-  color: #40a02b;
-}
-.latte .hljs-emphasis {
-  color: #d20f39;
-  font-style: italic;
-}
-.latte .hljs-strong {
-  color: #d20f39;
-  font-weight: bold;
-}
-.latte .hljs-formula {
-  color: #179299;
-}
-.latte .hljs-link {
-  color: #209fb5;
-  font-style: italic;
-}
-.latte .hljs-quote {
-  color: #40a02b;
-  font-style: italic;
-}
-.latte .hljs-selector-tag {
-  color: #df8e1d;
-}
-.latte .hljs-selector-id {
-  color: #1e66f5;
-}
-.latte .hljs-selector-class {
-  color: #179299;
-}
-.latte .hljs-selector-attr {
-  color: #8839ef;
-}
-.latte .hljs-selector-pseudo {
-  color: #179299;
-}
-.latte .hljs-template-tag {
-  color: #dd7878;
-}
-.latte .hljs-template-variable {
-  color: #dd7878;
-}
-.latte .hljs-diff-addition {
-  color: #40a02b;
-  background: rgba(64, 160, 43, 0.15);
-}
-.latte .hljs-diff-deletion {
-  color: #d20f39;
-  background: rgba(210, 15, 57, 0.15);
-}
-.latte code {
-  color: #4c4f69;
-  background: #e6e9ef;
-}
-.latte .ace_gutter {
-  color: #8c8fa1;
-  background: #e6e9ef;
-}
-.latte .ace_gutter-active-line.ace_gutter-cell {
-  color: #ea76cb;
-  background: #e6e9ef;
-}
diff --git a/src/bin/assets/catppuccin.css b/src/bin/assets/catppuccin.css
index 5a6133e..10501da 100644
--- a/src/bin/assets/catppuccin.css
+++ b/src/bin/assets/catppuccin.css
@@ -1,483 +1,743 @@
-.mocha {
-  --bg: #1e1e2e;
-  --fg: #cdd6f4;
-  --sidebar-bg: #181825;
-  --sidebar-fg: #cdd6f4;
-  --sidebar-non-existant: #6c7086;
-  --sidebar-active: #89b4fa;
-  --sidebar-spacer: #6c7086;
-  --scrollbar: #6c7086;
-  --icons: #6c7086;
-  --icons-hover: #7f849c;
-  --links: #89b4fa;
-  --inline-code-color: #fab387;
-  --theme-popup-bg: #181825;
-  --theme-popup-border: #6c7086;
-  --theme-hover: #6c7086;
-  --quote-bg: #181825;
-  --quote-border: #11111b;
-  --table-border-color: #11111b;
-  --table-header-bg: #181825;
-  --table-alternate-bg: #11111b;
-  --searchbar-border-color: #11111b;
-  --searchbar-bg: #181825;
-  --searchbar-fg: #cdd6f4;
-  --searchbar-shadow-color: #11111b;
-  --searchresults-header-fg: #cdd6f4;
-  --searchresults-border-color: #11111b;
-  --searchresults-li-bg: #1e1e2e;
-  --search-mark-bg: #fab387;
+.mocha.hljs {
+  color: #cdd6f4;
+  background: #1e1e2e;
+}
+.mocha .hljs-keyword {
+  color: #cba6f7;
+}
+.mocha .hljs-built_in {
+  color: #f38ba8;
+}
+.mocha .hljs-type {
+  color: #f9e2af;
+}
+.mocha .hljs-literal {
+  color: #fab387;
+}
+.mocha .hljs-number {
+  color: #fab387;
+}
+.mocha .hljs-operator {
+  color: #94e2d5;
+}
+.mocha .hljs-punctuation {
+  color: #bac2de;
+}
+.mocha .hljs-property {
+  color: #94e2d5;
+}
+.mocha .hljs-regexp {
+  color: #f5c2e7;
+}
+.mocha .hljs-string {
+  color: #a6e3a1;
 }
-.mocha :is(.admonition):is(.hint, .important, .tip) {
-  border-color: #f9e2af;
+.mocha .hljs-char.escape_ {
+  color: #a6e3a1;
 }
-.mocha :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(249, 226, 175, 0.2);
+.mocha .hljs-subst {
+  color: #a6adc8;
 }
-.mocha :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #f9e2af;
+.mocha .hljs-symbol {
+  color: #f2cdcd;
 }
-.mocha :is(.admonition):is(.abstract, .summary, .tldr) {
-  border-color: #f2cdcd;
+.mocha .hljs-variable {
+  color: #cba6f7;
 }
-.mocha :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(242, 205, 205, 0.2);
+.mocha .hljs-variable.language_ {
+  color: #cba6f7;
 }
-.mocha :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #f2cdcd;
+.mocha .hljs-variable.constant_ {
+  color: #fab387;
 }
-.mocha :is(.admonition):is(.example) {
-  border-color: #cba6f7;
+.mocha .hljs-title {
+  color: #89b4fa;
 }
-.mocha :is(.example) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(203, 166, 247, 0.2);
+.mocha .hljs-title.class_ {
+  color: #f9e2af;
 }
-.mocha :is(.example) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #cba6f7;
+.mocha .hljs-title.function_ {
+  color: #89b4fa;
 }
-.mocha :is(.admonition):is(.info, .todo) {
-  border-color: #89dceb;
+.mocha .hljs-params {
+  color: #cdd6f4;
 }
-.mocha :is(.info, .todo) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(137, 220, 235, 0.2);
+.mocha .hljs-comment {
+  color: #585b70;
 }
-.mocha :is(.info, .todo) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #89dceb;
+.mocha .hljs-doctag {
+  color: #f38ba8;
 }
-.mocha :is(.admonition):is(.check, .done, .success) {
-  border-color: #a6e3a1;
+.mocha .hljs-meta {
+  color: #fab387;
 }
-.mocha :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(166, 227, 161, 0.2);
+.mocha .hljs-section {
+  color: #89b4fa;
 }
-.mocha :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #a6e3a1;
+.mocha .hljs-tag {
+  color: #a6adc8;
 }
-.mocha :is(.admonition):is(.note) {
-  border-color: #89b4fa;
+.mocha .hljs-name {
+  color: #cba6f7;
 }
-.mocha :is(.note) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(137, 180, 250, 0.2);
+.mocha .hljs-attr {
+  color: #89b4fa;
 }
-.mocha :is(.note) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #89b4fa;
+.mocha .hljs-attribute {
+  color: #a6e3a1;
 }
-.mocha :is(.admonition):is(.attention, .caution, .warning) {
-  border-color: #fab387;
+.mocha .hljs-bullet {
+  color: #94e2d5;
 }
-.mocha :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(250, 179, 135, 0.2);
+.mocha .hljs-code {
+  color: #a6e3a1;
 }
-.mocha :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #fab387;
+.mocha .hljs-emphasis {
+  color: #f38ba8;
+  font-style: italic;
 }
-.mocha :is(.admonition):is(.faq, .help, .question) {
-  border-color: #94e2d5;
+.mocha .hljs-strong {
+  color: #f38ba8;
+  font-weight: bold;
 }
-.mocha :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(148, 226, 213, 0.2);
+.mocha .hljs-formula {
+  color: #94e2d5;
 }
-.mocha :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #94e2d5;
+.mocha .hljs-link {
+  color: #74c7ec;
+  font-style: italic;
 }
-.mocha :is(.admonition):is(.bug, .danger, .error, .fail, .failure, .missing) {
-  border-color: #f38ba8;
+.mocha .hljs-quote {
+  color: #a6e3a1;
+  font-style: italic;
 }
-.mocha :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(243, 139, 168, 0.2);
+.mocha .hljs-selector-tag {
+  color: #f9e2af;
 }
-.mocha :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #f38ba8;
+.mocha .hljs-selector-id {
+  color: #89b4fa;
 }
-.mocha :is(.admonition):is(.cite, .quote) {
-  border-color: #f5c2e7;
+.mocha .hljs-selector-class {
+  color: #94e2d5;
 }
-.mocha :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(245, 194, 231, 0.2);
+.mocha .hljs-selector-attr {
+  color: #cba6f7;
 }
-.mocha :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #f5c2e7;
+.mocha .hljs-selector-pseudo {
+  color: #94e2d5;
+}
+.mocha .hljs-template-tag {
+  color: #f2cdcd;
+}
+.mocha .hljs-template-variable {
+  color: #f2cdcd;
+}
+.mocha .hljs-diff-addition {
+  color: #a6e3a1;
+  background: rgba(166, 227, 161, 0.15);
+}
+.mocha .hljs-diff-deletion {
+  color: #f38ba8;
+  background: rgba(243, 139, 168, 0.15);
+}
+.mocha code {
+  color: #cdd6f4;
+  background: #181825;
+}
+.mocha .ace_gutter {
+  color: #7f849c;
+  background: #181825;
+}
+.mocha .ace_gutter-active-line.ace_gutter-cell {
+  color: #f5c2e7;
+  background: #181825;
 }
 
-.macchiato {
-  --bg: #24273a;
-  --fg: #cad3f5;
-  --sidebar-bg: #1e2030;
-  --sidebar-fg: #cad3f5;
-  --sidebar-non-existant: #6e738d;
-  --sidebar-active: #8aadf4;
-  --sidebar-spacer: #6e738d;
-  --scrollbar: #6e738d;
-  --icons: #6e738d;
-  --icons-hover: #8087a2;
-  --links: #8aadf4;
-  --inline-code-color: #f5a97f;
-  --theme-popup-bg: #1e2030;
-  --theme-popup-border: #6e738d;
-  --theme-hover: #6e738d;
-  --quote-bg: #1e2030;
-  --quote-border: #181926;
-  --table-border-color: #181926;
-  --table-header-bg: #1e2030;
-  --table-alternate-bg: #181926;
-  --searchbar-border-color: #181926;
-  --searchbar-bg: #1e2030;
-  --searchbar-fg: #cad3f5;
-  --searchbar-shadow-color: #181926;
-  --searchresults-header-fg: #cad3f5;
-  --searchresults-border-color: #181926;
-  --searchresults-li-bg: #24273a;
-  --search-mark-bg: #f5a97f;
+.macchiato.hljs {
+  color: #cad3f5;
+  background: #24273a;
+}
+.macchiato .hljs-keyword {
+  color: #c6a0f6;
+}
+.macchiato .hljs-built_in {
+  color: #ed8796;
 }
-.macchiato :is(.admonition):is(.hint, .important, .tip) {
-  border-color: #eed49f;
+.macchiato .hljs-type {
+  color: #eed49f;
 }
-.macchiato :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(238, 212, 159, 0.2);
+.macchiato .hljs-literal {
+  color: #f5a97f;
 }
-.macchiato :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #eed49f;
+.macchiato .hljs-number {
+  color: #f5a97f;
 }
-.macchiato :is(.admonition):is(.abstract, .summary, .tldr) {
-  border-color: #f0c6c6;
+.macchiato .hljs-operator {
+  color: #8bd5ca;
 }
-.macchiato :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(240, 198, 198, 0.2);
+.macchiato .hljs-punctuation {
+  color: #b8c0e0;
 }
-.macchiato :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #f0c6c6;
+.macchiato .hljs-property {
+  color: #8bd5ca;
 }
-.macchiato :is(.admonition):is(.example) {
-  border-color: #c6a0f6;
+.macchiato .hljs-regexp {
+  color: #f5bde6;
 }
-.macchiato :is(.example) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(198, 160, 246, 0.2);
+.macchiato .hljs-string {
+  color: #a6da95;
 }
-.macchiato :is(.example) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #c6a0f6;
+.macchiato .hljs-char.escape_ {
+  color: #a6da95;
 }
-.macchiato :is(.admonition):is(.info, .todo) {
-  border-color: #91d7e3;
+.macchiato .hljs-subst {
+  color: #a5adcb;
 }
-.macchiato :is(.info, .todo) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(145, 215, 227, 0.2);
+.macchiato .hljs-symbol {
+  color: #f0c6c6;
 }
-.macchiato :is(.info, .todo) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #91d7e3;
+.macchiato .hljs-variable {
+  color: #c6a0f6;
 }
-.macchiato :is(.admonition):is(.check, .done, .success) {
-  border-color: #a6da95;
+.macchiato .hljs-variable.language_ {
+  color: #c6a0f6;
 }
-.macchiato :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(166, 218, 149, 0.2);
+.macchiato .hljs-variable.constant_ {
+  color: #f5a97f;
 }
-.macchiato :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #a6da95;
+.macchiato .hljs-title {
+  color: #8aadf4;
 }
-.macchiato :is(.admonition):is(.note) {
-  border-color: #8aadf4;
+.macchiato .hljs-title.class_ {
+  color: #eed49f;
 }
-.macchiato :is(.note) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(138, 173, 244, 0.2);
+.macchiato .hljs-title.function_ {
+  color: #8aadf4;
 }
-.macchiato :is(.note) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #8aadf4;
+.macchiato .hljs-params {
+  color: #cad3f5;
 }
-.macchiato :is(.admonition):is(.attention, .caution, .warning) {
-  border-color: #f5a97f;
+.macchiato .hljs-comment {
+  color: #5b6078;
 }
-.macchiato :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(245, 169, 127, 0.2);
+.macchiato .hljs-doctag {
+  color: #ed8796;
 }
-.macchiato :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #f5a97f;
+.macchiato .hljs-meta {
+  color: #f5a97f;
 }
-.macchiato :is(.admonition):is(.faq, .help, .question) {
-  border-color: #8bd5ca;
+.macchiato .hljs-section {
+  color: #8aadf4;
 }
-.macchiato :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(139, 213, 202, 0.2);
+.macchiato .hljs-tag {
+  color: #a5adcb;
 }
-.macchiato :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #8bd5ca;
+.macchiato .hljs-name {
+  color: #c6a0f6;
 }
-.macchiato :is(.admonition):is(.bug, .danger, .error, .fail, .failure, .missing) {
-  border-color: #ed8796;
+.macchiato .hljs-attr {
+  color: #8aadf4;
 }
-.macchiato :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(237, 135, 150, 0.2);
+.macchiato .hljs-attribute {
+  color: #a6da95;
 }
-.macchiato :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #ed8796;
+.macchiato .hljs-bullet {
+  color: #8bd5ca;
 }
-.macchiato :is(.admonition):is(.cite, .quote) {
-  border-color: #f5bde6;
+.macchiato .hljs-code {
+  color: #a6da95;
 }
-.macchiato :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(245, 189, 230, 0.2);
+.macchiato .hljs-emphasis {
+  color: #ed8796;
+  font-style: italic;
 }
-.macchiato :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #f5bde6;
+.macchiato .hljs-strong {
+  color: #ed8796;
+  font-weight: bold;
+}
+.macchiato .hljs-formula {
+  color: #8bd5ca;
+}
+.macchiato .hljs-link {
+  color: #7dc4e4;
+  font-style: italic;
+}
+.macchiato .hljs-quote {
+  color: #a6da95;
+  font-style: italic;
+}
+.macchiato .hljs-selector-tag {
+  color: #eed49f;
+}
+.macchiato .hljs-selector-id {
+  color: #8aadf4;
+}
+.macchiato .hljs-selector-class {
+  color: #8bd5ca;
+}
+.macchiato .hljs-selector-attr {
+  color: #c6a0f6;
+}
+.macchiato .hljs-selector-pseudo {
+  color: #8bd5ca;
+}
+.macchiato .hljs-template-tag {
+  color: #f0c6c6;
+}
+.macchiato .hljs-template-variable {
+  color: #f0c6c6;
+}
+.macchiato .hljs-diff-addition {
+  color: #a6da95;
+  background: rgba(166, 218, 149, 0.15);
+}
+.macchiato .hljs-diff-deletion {
+  color: #ed8796;
+  background: rgba(237, 135, 150, 0.15);
+}
+.macchiato code {
+  color: #cad3f5;
+  background: #1e2030;
+}
+.macchiato .ace_gutter {
+  color: #8087a2;
+  background: #1e2030;
+}
+.macchiato .ace_gutter-active-line.ace_gutter-cell {
+  color: #f5bde6;
+  background: #1e2030;
 }
 
-.frappe {
-  --bg: #303446;
-  --fg: #c6d0f5;
-  --sidebar-bg: #292c3c;
-  --sidebar-fg: #c6d0f5;
-  --sidebar-non-existant: #737994;
-  --sidebar-active: #8caaee;
-  --sidebar-spacer: #737994;
-  --scrollbar: #737994;
-  --icons: #737994;
-  --icons-hover: #838ba7;
-  --links: #8caaee;
-  --inline-code-color: #ef9f76;
-  --theme-popup-bg: #292c3c;
-  --theme-popup-border: #737994;
-  --theme-hover: #737994;
-  --quote-bg: #292c3c;
-  --quote-border: #232634;
-  --table-border-color: #232634;
-  --table-header-bg: #292c3c;
-  --table-alternate-bg: #232634;
-  --searchbar-border-color: #232634;
-  --searchbar-bg: #292c3c;
-  --searchbar-fg: #c6d0f5;
-  --searchbar-shadow-color: #232634;
-  --searchresults-header-fg: #c6d0f5;
-  --searchresults-border-color: #232634;
-  --searchresults-li-bg: #303446;
-  --search-mark-bg: #ef9f76;
+.frappe.hljs {
+  color: #c6d0f5;
+  background: #303446;
+}
+.frappe .hljs-keyword {
+  color: #ca9ee6;
+}
+.frappe .hljs-built_in {
+  color: #e78284;
+}
+.frappe .hljs-type {
+  color: #e5c890;
+}
+.frappe .hljs-literal {
+  color: #ef9f76;
+}
+.frappe .hljs-number {
+  color: #ef9f76;
+}
+.frappe .hljs-operator {
+  color: #81c8be;
+}
+.frappe .hljs-punctuation {
+  color: #b5bfe2;
+}
+.frappe .hljs-property {
+  color: #81c8be;
+}
+.frappe .hljs-regexp {
+  color: #f4b8e4;
+}
+.frappe .hljs-string {
+  color: #a6d189;
+}
+.frappe .hljs-char.escape_ {
+  color: #a6d189;
+}
+.frappe .hljs-subst {
+  color: #a5adce;
+}
+.frappe .hljs-symbol {
+  color: #eebebe;
+}
+.frappe .hljs-variable {
+  color: #ca9ee6;
 }
-.frappe :is(.admonition):is(.hint, .important, .tip) {
-  border-color: #e5c890;
+.frappe .hljs-variable.language_ {
+  color: #ca9ee6;
 }
-.frappe :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(229, 200, 144, 0.2);
+.frappe .hljs-variable.constant_ {
+  color: #ef9f76;
 }
-.frappe :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #e5c890;
+.frappe .hljs-title {
+  color: #8caaee;
 }
-.frappe :is(.admonition):is(.abstract, .summary, .tldr) {
-  border-color: #eebebe;
+.frappe .hljs-title.class_ {
+  color: #e5c890;
 }
-.frappe :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(238, 190, 190, 0.2);
+.frappe .hljs-title.function_ {
+  color: #8caaee;
 }
-.frappe :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #eebebe;
+.frappe .hljs-params {
+  color: #c6d0f5;
 }
-.frappe :is(.admonition):is(.example) {
-  border-color: #ca9ee6;
+.frappe .hljs-comment {
+  color: #626880;
 }
-.frappe :is(.example) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(202, 158, 230, 0.2);
+.frappe .hljs-doctag {
+  color: #e78284;
 }
-.frappe :is(.example) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #ca9ee6;
+.frappe .hljs-meta {
+  color: #ef9f76;
 }
-.frappe :is(.admonition):is(.info, .todo) {
-  border-color: #99d1db;
+.frappe .hljs-section {
+  color: #8caaee;
 }
-.frappe :is(.info, .todo) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(153, 209, 219, 0.2);
+.frappe .hljs-tag {
+  color: #a5adce;
 }
-.frappe :is(.info, .todo) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #99d1db;
+.frappe .hljs-name {
+  color: #ca9ee6;
 }
-.frappe :is(.admonition):is(.check, .done, .success) {
-  border-color: #a6d189;
+.frappe .hljs-attr {
+  color: #8caaee;
 }
-.frappe :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(166, 209, 137, 0.2);
+.frappe .hljs-attribute {
+  color: #a6d189;
 }
-.frappe :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #a6d189;
+.frappe .hljs-bullet {
+  color: #81c8be;
 }
-.frappe :is(.admonition):is(.note) {
-  border-color: #8caaee;
+.frappe .hljs-code {
+  color: #a6d189;
 }
-.frappe :is(.note) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(140, 170, 238, 0.2);
+.frappe .hljs-emphasis {
+  color: #e78284;
+  font-style: italic;
 }
-.frappe :is(.note) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #8caaee;
+.frappe .hljs-strong {
+  color: #e78284;
+  font-weight: bold;
 }
-.frappe :is(.admonition):is(.attention, .caution, .warning) {
-  border-color: #ef9f76;
+.frappe .hljs-formula {
+  color: #81c8be;
 }
-.frappe :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(239, 159, 118, 0.2);
+.frappe .hljs-link {
+  color: #85c1dc;
+  font-style: italic;
 }
-.frappe :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #ef9f76;
+.frappe .hljs-quote {
+  color: #a6d189;
+  font-style: italic;
 }
-.frappe :is(.admonition):is(.faq, .help, .question) {
-  border-color: #81c8be;
+.frappe .hljs-selector-tag {
+  color: #e5c890;
 }
-.frappe :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(129, 200, 190, 0.2);
+.frappe .hljs-selector-id {
+  color: #8caaee;
 }
-.frappe :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #81c8be;
+.frappe .hljs-selector-class {
+  color: #81c8be;
 }
-.frappe :is(.admonition):is(.bug, .danger, .error, .fail, .failure, .missing) {
-  border-color: #e78284;
+.frappe .hljs-selector-attr {
+  color: #ca9ee6;
 }
-.frappe :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(231, 130, 132, 0.2);
+.frappe .hljs-selector-pseudo {
+  color: #81c8be;
 }
-.frappe :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #e78284;
+.frappe .hljs-template-tag {
+  color: #eebebe;
 }
-.frappe :is(.admonition):is(.cite, .quote) {
-  border-color: #f4b8e4;
+.frappe .hljs-template-variable {
+  color: #eebebe;
 }
-.frappe :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(244, 184, 228, 0.2);
+.frappe .hljs-diff-addition {
+  color: #a6d189;
+  background: rgba(166, 209, 137, 0.15);
 }
-.frappe :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #f4b8e4;
+.frappe .hljs-diff-deletion {
+  color: #e78284;
+  background: rgba(231, 130, 132, 0.15);
+}
+.frappe code {
+  color: #c6d0f5;
+  background: #292c3c;
+}
+.frappe .ace_gutter {
+  color: #838ba7;
+  background: #292c3c;
+}
+.frappe .ace_gutter-active-line.ace_gutter-cell {
+  color: #f4b8e4;
+  background: #292c3c;
 }
 
-.latte {
-  --bg: #eff1f5;
-  --fg: #4c4f69;
-  --sidebar-bg: #e6e9ef;
-  --sidebar-fg: #4c4f69;
-  --sidebar-non-existant: #9ca0b0;
-  --sidebar-active: #1e66f5;
-  --sidebar-spacer: #9ca0b0;
-  --scrollbar: #9ca0b0;
-  --icons: #9ca0b0;
-  --icons-hover: #8c8fa1;
-  --links: #1e66f5;
-  --inline-code-color: #fe640b;
-  --theme-popup-bg: #e6e9ef;
-  --theme-popup-border: #9ca0b0;
-  --theme-hover: #9ca0b0;
-  --quote-bg: #e6e9ef;
-  --quote-border: #dce0e8;
-  --table-border-color: #dce0e8;
-  --table-header-bg: #e6e9ef;
-  --table-alternate-bg: #dce0e8;
-  --searchbar-border-color: #dce0e8;
-  --searchbar-bg: #e6e9ef;
-  --searchbar-fg: #4c4f69;
-  --searchbar-shadow-color: #dce0e8;
-  --searchresults-header-fg: #4c4f69;
-  --searchresults-border-color: #dce0e8;
-  --searchresults-li-bg: #eff1f5;
-  --search-mark-bg: #fe640b;
+.latte.hljs {
+  color: #4c4f69;
+  background: #eff1f5;
+}
+.latte .hljs-keyword {
+  color: #8839ef;
+}
+.latte .hljs-built_in {
+  color: #d20f39;
+}
+.latte .hljs-type {
+  color: #df8e1d;
+}
+.latte .hljs-literal {
+  color: #fe640b;
+}
+.latte .hljs-number {
+  color: #fe640b;
+}
+.latte .hljs-operator {
+  color: #179299;
+}
+.latte .hljs-punctuation {
+  color: #5c5f77;
 }
-.latte :is(.admonition):is(.hint, .important, .tip) {
-  border-color: #df8e1d;
+.latte .hljs-property {
+  color: #179299;
 }
-.latte :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(223, 142, 29, 0.2);
+.latte .hljs-regexp {
+  color: #ea76cb;
 }
-.latte :is(.hint, .important, .tip) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #df8e1d;
+.latte .hljs-string {
+  color: #40a02b;
 }
-.latte :is(.admonition):is(.abstract, .summary, .tldr) {
-  border-color: #dd7878;
+.latte .hljs-char.escape_ {
+  color: #40a02b;
 }
-.latte :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(221, 120, 120, 0.2);
+.latte .hljs-subst {
+  color: #6c6f85;
 }
-.latte :is(.abstract, .summary, .tldr) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #dd7878;
+.latte .hljs-symbol {
+  color: #dd7878;
 }
-.latte :is(.admonition):is(.example) {
-  border-color: #8839ef;
+.latte .hljs-variable {
+  color: #8839ef;
 }
-.latte :is(.example) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(136, 57, 239, 0.2);
+.latte .hljs-variable.language_ {
+  color: #8839ef;
 }
-.latte :is(.example) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #8839ef;
+.latte .hljs-variable.constant_ {
+  color: #fe640b;
 }
-.latte :is(.admonition):is(.info, .todo) {
-  border-color: #04a5e5;
+.latte .hljs-title {
+  color: #1e66f5;
 }
-.latte :is(.info, .todo) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(4, 165, 229, 0.2);
+.latte .hljs-title.class_ {
+  color: #df8e1d;
 }
-.latte :is(.info, .todo) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #04a5e5;
+.latte .hljs-title.function_ {
+  color: #1e66f5;
 }
-.latte :is(.admonition):is(.check, .done, .success) {
-  border-color: #40a02b;
+.latte .hljs-params {
+  color: #4c4f69;
 }
-.latte :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(64, 160, 43, 0.2);
+.latte .hljs-comment {
+  color: #acb0be;
 }
-.latte :is(.check, .done, .success) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #40a02b;
+.latte .hljs-doctag {
+  color: #d20f39;
 }
-.latte :is(.admonition):is(.note) {
-  border-color: #1e66f5;
+.latte .hljs-meta {
+  color: #fe640b;
 }
-.latte :is(.note) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(30, 102, 245, 0.2);
+.latte .hljs-section {
+  color: #1e66f5;
 }
-.latte :is(.note) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #1e66f5;
+.latte .hljs-tag {
+  color: #6c6f85;
 }
-.latte :is(.admonition):is(.attention, .caution, .warning) {
-  border-color: #fe640b;
+.latte .hljs-name {
+  color: #8839ef;
 }
-.latte :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(254, 100, 11, 0.2);
+.latte .hljs-attr {
+  color: #1e66f5;
 }
-.latte :is(.attention, .caution, .warning) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #fe640b;
+.latte .hljs-attribute {
+  color: #40a02b;
 }
-.latte :is(.admonition):is(.faq, .help, .question) {
-  border-color: #179299;
+.latte .hljs-bullet {
+  color: #179299;
 }
-.latte :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(23, 146, 153, 0.2);
+.latte .hljs-code {
+  color: #40a02b;
 }
-.latte :is(.faq, .help, .question) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #179299;
+.latte .hljs-emphasis {
+  color: #d20f39;
+  font-style: italic;
 }
-.latte :is(.admonition):is(.bug, .danger, .error, .fail, .failure, .missing) {
-  border-color: #d20f39;
+.latte .hljs-strong {
+  color: #d20f39;
+  font-weight: bold;
 }
-.latte :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(210, 15, 57, 0.2);
+.latte .hljs-formula {
+  color: #179299;
 }
-.latte :is(.bug, .danger, .error, .fail, .failure, .missing) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #d20f39;
+.latte .hljs-link {
+  color: #209fb5;
+  font-style: italic;
 }
-.latte :is(.admonition):is(.cite, .quote) {
-  border-color: #ea76cb;
+.latte .hljs-quote {
+  color: #40a02b;
+  font-style: italic;
+}
+.latte .hljs-selector-tag {
+  color: #df8e1d;
+}
+.latte .hljs-selector-id {
+  color: #1e66f5;
+}
+.latte .hljs-selector-class {
+  color: #179299;
+}
+.latte .hljs-selector-attr {
+  color: #8839ef;
+}
+.latte .hljs-selector-pseudo {
+  color: #179299;
+}
+.latte .hljs-template-tag {
+  color: #dd7878;
+}
+.latte .hljs-template-variable {
+  color: #dd7878;
+}
+.latte .hljs-diff-addition {
+  color: #40a02b;
+  background: rgba(64, 160, 43, 0.15);
+}
+.latte .hljs-diff-deletion {
+  color: #d20f39;
+  background: rgba(210, 15, 57, 0.15);
+}
+.latte code {
+  color: #4c4f69;
+  background: #e6e9ef;
+}
+.latte .ace_gutter {
+  color: #8c8fa1;
+  background: #e6e9ef;
+}
+.latte .ace_gutter-active-line.ace_gutter-cell {
+  color: #ea76cb;
+  background: #e6e9ef;
+}
+
+.mocha {
+  --bg: #1e1e2e;
+  --fg: #cdd6f4;
+  --sidebar-bg: #181825;
+  --sidebar-fg: #cdd6f4;
+  --sidebar-non-existant: #6c7086;
+  --sidebar-active: #89b4fa;
+  --sidebar-spacer: #6c7086;
+  --scrollbar: #6c7086;
+  --icons: #6c7086;
+  --icons-hover: #7f849c;
+  --links: #89b4fa;
+  --inline-code-color: #fab387;
+  --theme-popup-bg: #181825;
+  --theme-popup-border: #6c7086;
+  --theme-hover: #6c7086;
+  --quote-bg: #181825;
+  --quote-border: #11111b;
+  --table-border-color: #11111b;
+  --table-header-bg: #181825;
+  --table-alternate-bg: #11111b;
+  --searchbar-border-color: #11111b;
+  --searchbar-bg: #181825;
+  --searchbar-fg: #cdd6f4;
+  --searchbar-shadow-color: #11111b;
+  --searchresults-header-fg: #cdd6f4;
+  --searchresults-border-color: #11111b;
+  --searchresults-li-bg: #1e1e2e;
+  --search-mark-bg: #fab387;
+}
+
+.macchiato {
+  --bg: #24273a;
+  --fg: #cad3f5;
+  --sidebar-bg: #1e2030;
+  --sidebar-fg: #cad3f5;
+  --sidebar-non-existant: #6e738d;
+  --sidebar-active: #8aadf4;
+  --sidebar-spacer: #6e738d;
+  --scrollbar: #6e738d;
+  --icons: #6e738d;
+  --icons-hover: #8087a2;
+  --links: #8aadf4;
+  --inline-code-color: #f5a97f;
+  --theme-popup-bg: #1e2030;
+  --theme-popup-border: #6e738d;
+  --theme-hover: #6e738d;
+  --quote-bg: #1e2030;
+  --quote-border: #181926;
+  --table-border-color: #181926;
+  --table-header-bg: #1e2030;
+  --table-alternate-bg: #181926;
+  --searchbar-border-color: #181926;
+  --searchbar-bg: #1e2030;
+  --searchbar-fg: #cad3f5;
+  --searchbar-shadow-color: #181926;
+  --searchresults-header-fg: #cad3f5;
+  --searchresults-border-color: #181926;
+  --searchresults-li-bg: #24273a;
+  --search-mark-bg: #f5a97f;
 }
-.latte :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title) {
-  background-color: rgba(234, 118, 203, 0.2);
+
+.frappe {
+  --bg: #303446;
+  --fg: #c6d0f5;
+  --sidebar-bg: #292c3c;
+  --sidebar-fg: #c6d0f5;
+  --sidebar-non-existant: #737994;
+  --sidebar-active: #8caaee;
+  --sidebar-spacer: #737994;
+  --scrollbar: #737994;
+  --icons: #737994;
+  --icons-hover: #838ba7;
+  --links: #8caaee;
+  --inline-code-color: #ef9f76;
+  --theme-popup-bg: #292c3c;
+  --theme-popup-border: #737994;
+  --theme-hover: #737994;
+  --quote-bg: #292c3c;
+  --quote-border: #232634;
+  --table-border-color: #232634;
+  --table-header-bg: #292c3c;
+  --table-alternate-bg: #232634;
+  --searchbar-border-color: #232634;
+  --searchbar-bg: #292c3c;
+  --searchbar-fg: #c6d0f5;
+  --searchbar-shadow-color: #232634;
+  --searchresults-header-fg: #c6d0f5;
+  --searchresults-border-color: #232634;
+  --searchresults-li-bg: #303446;
+  --search-mark-bg: #ef9f76;
 }
-.latte :is(.cite, .quote) > :is(.admonition-title, summary.admonition-title)::before {
-  background-color: #ea76cb;
+
+.latte {
+  --bg: #eff1f5;
+  --fg: #4c4f69;
+  --sidebar-bg: #e6e9ef;
+  --sidebar-fg: #4c4f69;
+  --sidebar-non-existant: #9ca0b0;
+  --sidebar-active: #1e66f5;
+  --sidebar-spacer: #9ca0b0;
+  --scrollbar: #9ca0b0;
+  --icons: #9ca0b0;
+  --icons-hover: #8c8fa1;
+  --links: #1e66f5;
+  --inline-code-color: #fe640b;
+  --theme-popup-bg: #e6e9ef;
+  --theme-popup-border: #9ca0b0;
+  --theme-hover: #9ca0b0;
+  --quote-bg: #e6e9ef;
+  --quote-border: #dce0e8;
+  --table-border-color: #dce0e8;
+  --table-header-bg: #e6e9ef;
+  --table-alternate-bg: #dce0e8;
+  --searchbar-border-color: #dce0e8;
+  --searchbar-bg: #e6e9ef;
+  --searchbar-fg: #4c4f69;
+  --searchbar-shadow-color: #dce0e8;
+  --searchresults-header-fg: #4c4f69;
+  --searchresults-border-color: #dce0e8;
+  --searchresults-li-bg: #eff1f5;
+  --search-mark-bg: #fe640b;
 }
diff --git a/src/bin/mdbook-catppuccin.rs b/src/bin/mdbook-catppuccin.rs
index bb9aa9c..9aa8ce1 100644
--- a/src/bin/mdbook-catppuccin.rs
+++ b/src/bin/mdbook-catppuccin.rs
@@ -99,9 +99,9 @@ mod install {
             include_bytes!("./assets/catppuccin.css"),
         ),
         (
-            "catppuccin-highlight.css",
+            "catppuccin-admonish.css",
             TomlPath::Path("additional-css"),
-            include_bytes!("./assets/catppuccin-highlight.css"),
+            include_bytes!("./assets/catppuccin-admonish.css"),
         ),
         (
             "index.hbs",