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

@@ -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
 

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"

example/theme/catppuccin-admonish.css

@@ -0,0 +1 @@
+../../src/bin/assets/catppuccin-admonish.css

palette/_admonish.scss → palette/catppuccin-admonish.scss

@@ -69,3 +69,9 @@ $mappings: (
     @include level($palette, $classes, $color);
   }
 }
+
+@each $flavour, $color in catppuccin.$palette {
+  .#{$flavour} {
+    @include main($color);
+  }
+}

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);
   }
 }