refactor: consistently use "flavor" and "color" spellings, update sas…

…s syntax (#138)
catppuccin · Nov 15, 2024 · fa0912e · fa0912e
1 parent dd6c2da
commit fa0912e
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -62,8 +62,8 @@
 
 3. Download the [catppuccin.css](https://github.com/catppuccin/mdBook/releases/latest/download/catppuccin.css)
    file from the [latest GitHub release](https://github.com/catppuccin/mdBook/releases/latest) to the `theme`
-   directory. 
-   
+   directory.
+
    See the [Supported Plugins](#supported-plugins) section below for integrations with other
    mdBook plugins.
 
@@ -75,7 +75,7 @@
    +additional-css = ["./theme/catppuccin.css"]
    ```
 
-5. Edit the `index.hbs` file to include the Catppuccin flavours:
+5. Edit the `index.hbs` file to include the Catppuccin flavors:
 
    ```diff
    - <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
@@ -103,7 +103,7 @@
    + preferred-dark-theme = "mocha"
    ```
 
-6. Build using `mdbook build` and enjoy your new Catppuccin flavours!
+6. Build using `mdbook build` and enjoy your new Catppuccin flavors!
 
 ### Supported Plugins
 

diff --git a/src/catppuccin-admonish.scss b/src/catppuccin-admonish.scss
@@ -1,16 +1,17 @@
 @use "sass:color";
 @use "sass:list";
+@use "sass:map";
 @use "@catppuccin/palette/scss/catppuccin" as catppuccin;
 
 @mixin level($palette, $classes, $color) {
   :is(.admonition):is(#{$classes}) {
-    border-color: #{map-get($palette, $color)};
+    border-color: #{map.get($palette, $color)};
   }
   :is(#{$classes}) > :is(.admonition-title, summary.admonition-title) {
-    background-color: #{color.change(map-get($palette, $color), $alpha: 0.2)};
+    background-color: #{color.change(map.get($palette, $color), $alpha: 0.2)};
   }
   :is(#{$classes}) > :is(.admonition-title, summary.admonition-title)::before {
-    background-color: #{map-get($palette, $color)};
+    background-color: #{map.get($palette, $color)};
   }
 }
 
@@ -70,8 +71,8 @@ $mappings: (
   }
 }
 
-@each $flavour, $color in catppuccin.$palette {
-  .#{$flavour} {
-    @include main($color);
+@each $flavor, $colors in catppuccin.$palette {
+  .#{$flavor} {
+    @include main($colors);
   }
 }
diff --git a/src/catppuccin-alerts.scss b/src/catppuccin-alerts.scss
@@ -1,21 +1,22 @@
+@use "sass:map";
 @use "@catppuccin/palette/scss/catppuccin" as catppuccin;
 
-@each $flavour, $color in catppuccin.$palette {
-  .#{$flavour} {
+@each $flavor, $colors in catppuccin.$palette {
+  .#{$flavor} {
     .mdbook-alerts-note {
-      --mdbook-alerts-color: #{map-get($color, "blue")};
+      --mdbook-alerts-color: #{map.get($colors, "blue")};
     }
     .mdbook-alerts-tip {
-      --mdbook-alerts-color: #{map-get($color, "green")};
+      --mdbook-alerts-color: #{map.get($colors, "green")};
     }
     .mdbook-alerts-important {
-      --mdbook-alerts-color: #{map-get($color, "mauve")};
+      --mdbook-alerts-color: #{map.get($colors, "mauve")};
     }
     .mdbook-alerts-warning {
-      --mdbook-alerts-color: #{map-get($color, "yellow")};
+      --mdbook-alerts-color: #{map.get($colors, "yellow")};
     }
     .mdbook-alerts-caution {
-      --mdbook-alerts-color: #{map-get($color, "red")};
+      --mdbook-alerts-color: #{map.get($colors, "red")};
     }
   }
 }
diff --git a/src/catppuccin.scss b/src/catppuccin.scss
@@ -1,72 +1,73 @@
+@use "sass:map";
 @use "@catppuccin/palette/scss/catppuccin" as catppuccin;
 @use "@catppuccin/highlightjs/sass/_theme" as hljs;
 
-@each $flavour, $colour in catppuccin.$palette {
-  .#{$flavour} {
-    @include hljs.highlights($flavour);
+@each $flavor, $colors in catppuccin.$palette {
+  .#{$flavor} {
+    @include hljs.highlights($flavor);
     code {
-      color: map-get($colour, "text");
-      background: map-get($colour, "mantle");
+      color: map.get($colors, "text");
+      background: map.get($colors, "mantle");
     }
     blockquote {
       blockquote {
-        border-top: 0.1em solid map-get($colour, "surface2");
-        border-bottom: 0.1em solid map-get($colour, "surface2");
+        border-top: 0.1em solid map.get($colors, "surface2");
+        border-bottom: 0.1em solid map.get($colors, "surface2");
       }
     }
     hr {
-      border-color: map-get($colour, "surface2");
+      border-color: map.get($colors, "surface2");
       border-style: solid;
     }
     del {
-      color: map-get($colour, "overlay2");
+      color: map.get($colors, "overlay2");
     }
     .ace_gutter {
-      color: map-get($colour, "overlay1");
-      background: map-get($colour, "mantle");
+      color: map.get($colors, "overlay1");
+      background: map.get($colors, "mantle");
     }
     .ace_gutter-active-line.ace_gutter-cell {
-      color: map-get($colour, "pink");
-      background: map-get($colour, "mantle");
+      color: map.get($colors, "pink");
+      background: map.get($colors, "mantle");
     }
     .tooltiptext {
-      background: map-get($colour, "mantle");
-      color: map-get($colour, "text");
+      background: map.get($colors, "mantle");
+      color: map.get($colors, "text");
     }
   }
 }
 
-@each $flavour, $color in catppuccin.$palette {
-  .#{$flavour} {
-    --bg: #{map-get($color, "base")};
-    --fg: #{map-get($color, "text")};
-    --sidebar-bg: #{map-get($color, "mantle")};
-    --sidebar-fg: #{map-get($color, "text")};
-    --sidebar-non-existant: #{map-get($color, "overlay0")};
-    --sidebar-active: #{map-get($color, "blue")};
-    --sidebar-spacer: #{map-get($color, "overlay0")};
-    --scrollbar: #{map-get($color, "overlay0")};
-    --icons: #{map-get($color, "overlay0")};
-    --icons-hover: #{map-get($color, "overlay1")};
-    --links: #{map-get($color, "blue")};
-    --inline-code-color: #{map-get($color, "peach")};
-    --theme-popup-bg: #{map-get($color, "mantle")};
-    --theme-popup-border: #{map-get($color, "overlay0")};
-    --theme-hover: #{map-get($color, "surface0")};
-    --quote-bg: #{map-get($color, "mantle")};
-    --quote-border: #{map-get($color, "crust")};
-    --table-border-color: #{map-get($color, "surface0")};
-    --table-header-bg: #{map-get($color, "mantle")};
-    --table-alternate-bg: #{map-get($color, "mantle")};
-    --searchbar-border-color: #{map-get($color, "surface0")};
-    --searchbar-bg: #{map-get($color, "mantle")};
-    --searchbar-fg: #{map-get($color, "text")};
-    --searchbar-shadow-color: #{map-get($color, "crust")};
-    --searchresults-header-fg: #{map-get($color, "text")};
-    --searchresults-border-color: #{map-get($color, "surface0")};
-    --searchresults-li-bg: #{map-get($color, "base")};
-    --search-mark-bg: #{map-get($color, "peach")};
-    --warning-border: #{map-get($color, "peach")};
-    --color-scheme: #{if($flavour == "latte", "light", "dark")};
+@each $flavor, $colors in catppuccin.$palette {
+  .#{$flavor} {
+    --bg: #{map.get($colors, "base")};
+    --fg: #{map.get($colors, "text")};
+    --sidebar-bg: #{map.get($colors, "mantle")};
+    --sidebar-fg: #{map.get($colors, "text")};
+    --sidebar-non-existant: #{map.get($colors, "overlay0")};
+    --sidebar-active: #{map.get($colors, "blue")};
+    --sidebar-spacer: #{map.get($colors, "overlay0")};
+    --scrollbar: #{map.get($colors, "overlay0")};
+    --icons: #{map.get($colors, "overlay0")};
+    --icons-hover: #{map.get($colors, "overlay1")};
+    --links: #{map.get($colors, "blue")};
+    --inline-code-color: #{map.get($colors, "peach")};
+    --theme-popup-bg: #{map.get($colors, "mantle")};
+    --theme-popup-border: #{map.get($colors, "overlay0")};
+    --theme-hover: #{map.get($colors, "surface0")};
+    --quote-bg: #{map.get($colors, "mantle")};
+    --quote-border: #{map.get($colors, "crust")};
+    --table-border-color: #{map.get($colors, "surface0")};
+    --table-header-bg: #{map.get($colors, "mantle")};
+    --table-alternate-bg: #{map.get($colors, "mantle")};
+    --searchbar-border-color: #{map.get($colors, "surface0")};
+    --searchbar-bg: #{map.get($colors, "mantle")};
+    --searchbar-fg: #{map.get($colors, "text")};
+    --searchbar-shadow-color: #{map.get($colors, "crust")};
+    --searchresults-header-fg: #{map.get($colors, "text")};
+    --searchresults-border-color: #{map.get($colors, "surface0")};
+    --searchresults-li-bg: #{map.get($colors, "base")};
+    --search-mark-bg: #{map.get($colors, "peach")};
+    --warning-border: #{map.get($colors, "peach")};
+    --color-scheme: #{if($flavor == "latte", "light", "dark")};
   }
 }