Catppuccin skins

README.md

@@ -31,7 +31,7 @@ Minimal Mistakes is a flexible two-column Jekyll theme, perfect for building per
 
 ## Skins (color variations)
 
-This theme comes in nine different skins (in addition to the default one).
+This theme comes in 11 different skins (in addition to the default one).
 
 | `air` | `contrast` | `dark` |
 | --- | --- | --- |
@@ -45,6 +45,9 @@ This theme comes in nine different skins (in addition to the default one).
 | --- | --- | --- |
 | [![aqua skin](https://mmistakes.github.io/minimal-mistakes/assets/images/aqua-skin-archive.png)](https://mmistakes.github.io/minimal-mistakes/assets/images/aqua-skin-archive-large.png) | [![neon skin](https://mmistakes.github.io/minimal-mistakes/assets/images/neon-skin-archive.png)](https://mmistakes.github.io/minimal-mistakes/assets/images/neon-skin-archive-large.png) | [![plum skin](https://mmistakes.github.io/minimal-mistakes/assets/images/plum-skin-archive.png)](https://mmistakes.github.io/minimal-mistakes/assets/images/plum-skin-archive-large.png) |
 
+| `catppuccin_latte` | `catppuccin_mocha` |
+| --- | --- |
+| ![catppuccin_latte skin](./assets/images/catppuccin_latte-skin-archive-large.png) | ![catppuccin_mocha skin](./assets/images/catppuccin_mocha-skin-archive-large.png) |
 ## Demo pages
 
 | Name                                        | Description                                           |
@@ -286,4 +289,4 @@ Lunr is distributed under the terms of the [MIT License](http://opensource.org/l
 
 Minimal Mistakes incorporates [clipboard.js](https://clipboardjs.com/),
 Copyright (c) 2021 Zeno Rocha.
-Clipboard.js is distributed under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+Clipboard.js is distributed under the terms of the [MIT License](https://opensource.org/licenses/MIT).

_config.yml

@@ -12,7 +12,7 @@
 
 # theme                  : "minimal-mistakes-jekyll"
 # remote_theme           : "mmistakes/minimal-mistakes"
-minimal_mistakes_skin    : "default" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
+minimal_mistakes_skin    : "default" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise", "catppuccin_latte", "catppuccin_mocha"
 
 # Site Settings
 locale                   : "en-US"
@@ -325,3 +325,4 @@ defaults:
       comments: # true
       share: true
       related: true
+

_sass/minimal-mistakes/skins/_catppuccin_latte.scss

@@ -0,0 +1,93 @@
+/* ==========================================================================
+   Catppuccin Latte skin
+   ========================================================================== */
+
+/* Colors */
+$palette: (
+  "latte": (
+    "rosewater": #dc8a78,
+    "flamingo": #dd7878,
+    "pink": #ea76cb,
+    "mauve": #8839ef,
+    "red": #d20f39,
+    "maroon": #e64553,
+    "peach": #fe640b,
+    "yellow": #df8e1d,
+    "green": #40a02b,
+    "teal": #179299,
+    "sky": #04a5e5,
+    "sapphire": #209fb5,
+    "blue": #1e66f5,
+    "lavender": #7287fd,
+    "text": #4c4f69,
+    "subtext1": #5c5f77,
+    "subtext0": #6c6f85,
+    "overlay2": #7c7f93,
+    "overlay1": #8c8fa1,
+    "overlay0": #9ca0b0,
+    "surface2": #acb0be,
+    "surface1": #bcc0cc,
+    "surface0": #ccd0da,
+    "crust": #dce0e8,
+    "mantle": #e6e9ef,
+    "base": #eff1f5,
+  )
+);
+
+/*
+   Colors
+   ========================================================================== */
+
+$background-color: map-get(map-get($palette, "latte"), "base") !default;
+$text-color: map-get(map-get($palette, "latte"), "text") !default;
+$primary-color: map-get(map-get($palette, "latte"), "red") !default;
+
+$border-color: transparent !default;
+$code-background-color: mix2(#000, $background-color, 15%) !default;
+$code-background-color-dark: mix(#000, $background-color, 20%) !default;
+$form-background-color: mix(#000, $background-color, 15%) !default;
+$footer-background-color: map-get(map-get($palette, "latte"), "mantle") !default;
+$masthead-link-color: $text-color !default;
+$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
+$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
+
+
+$gray: map-get(map-get($palette, "latte"), "crust") !default;
+$dark-gray: mix(#000, $gray, 50%) !default;
+$darker-gray: mix(#000, $gray, 60%) !default;
+$light-gray: mix(#fff, $gray, 50%) !default;
+$lighter-gray: mix(#fff, $gray, 90%) !default;
+
+$code-background-color: #fafafa !default;
+$code-background-color-dark: $light-gray !default;
+$text-color: map-get(map-get($palette, "latte"), "text") !default;
+$muted-text-color: mix(#fff, $text-color, 20%) !default;
+$border-color: $lighter-gray !default;
+$form-background-color: $lighter-gray !default;
+
+$primary-color: map-get(map-get($palette, "latte"), "flamingo") !default;
+$success-color: map-get(map-get($palette, "latte"), "green") !default;
+$warning-color: map-get(map-get($palette, "latte"), "peach") !default;
+$danger-color: map-get(map-get($palette, "latte"), "red") !default;
+$info-color: map-get(map-get($palette, "latte"), "sky") !default;
+$focus-color: $primary-color !default;
+$active-color: mix(#fff, $primary-color, 80%) !default;
+
+/* links */
+$link-color: mix(#000, $info-color, 20%) !default;
+$link-color-hover: mix(#000, $link-color, 25%) !default;
+$link-color-visited: mix(#fff, $link-color, 15%) !default;
+$masthead-link-color: $primary-color !default;
+$masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
+$navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
+
+.author__urls.social-icons i,
+.author__urls.social-icons .svg-inline--fa,
+.page__footer-follow .social-icons i,
+.page__footer-follow .social-icons .svg-inline--fa  {
+  color: inherit;
+}
+
+.ais-search-box .ais-search-box--input {
+  background-color: $form-background-color;
+}

_sass/minimal-mistakes/skins/_catppuccin_mocha.scss

@@ -0,0 +1,101 @@
+/* ==========================================================================
+   Catppuccin Mocha skin
+   ========================================================================== */
+
+/* Colors */
+$palette: (
+  "mocha": (
+    "rosewater": #f5e0dc,
+    "flamingo": #f2cdcd,
+    "pink": #f5c2e7,
+    "mauve": #cba6f7,
+    "red": #f38ba8,
+    "maroon": #eba0ac,
+    "peach": #fab387,
+    "yellow": #f9e2af,
+    "green": #a6e3a1,
+    "teal": #94e2d5,
+    "sky": #89dceb,
+    "sapphire": #74c7ec,
+    "blue": #89b4fa,
+    "lavender": #b4befe,
+    "text": #cdd6f4,
+    "subtext1": #bac2de,
+    "subtext0": #a6adc8,
+    "overlay2": #9399b2,
+    "overlay1": #7f849c,
+    "overlay0": #6c7086,
+    "surface2": #585b70,
+    "surface1": #45475a,
+    "surface0": #313244,
+    "base": #1e1e2e,
+    "mantle": #181825,
+    "crust": #11111b,
+  )
+);
+
+$background-color: map-get(map-get($palette, "mocha"), "base") !default;
+$text-color: map-get(map-get($palette, "mocha"), "text") !default;
+$primary-color: map-get(map-get($palette, "mocha"), "red") !default;
+
+$border-color: transparent !default;
+$code-background-color: mix(#000, $background-color, 15%) !default;
+$code-background-color-dark: mix(#000, $background-color, 20%) !default;
+$form-background-color: mix(#000, $background-color, 15%) !default;
+$footer-background-color: map-get(map-get($palette, "mocha"), "mantle") !default;
+$link-color: $primary-color !default;
+$link-color-hover: mix(#fff, $link-color, 25%) !default;
+$link-color-visited: mix(#000, $link-color, 25%) !default;
+$masthead-link-color: $text-color !default;
+$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
+$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
+
+/* notices */
+$notice-background-mix: 90% !default;
+$code-notice-background-mix: 95% !default;
+
+/* neon syntax highlighting (base16) */
+$base00: #1e1e2e !default;
+$base01: #181825 !default;
+$base02: #313244 !default;
+$base03: #45475a !default;
+$base04: #585b70 !default;
+$base05: #cdd6f4 !default;
+$base06: #f5e0dc !default;
+$base07: #b4befe !default;
+$base08: #f38ba8 !default;
+$base09: #fab387 !default;
+$base0a: #f9e2af !default;
+$base0b: #a6e3a1 !default;
+$base0c: #94e2d5 !default;
+$base0d: #89b4fa !default;
+$base0e: #cba6f7 !default;
+$base0f: #f2cdcd !default;
+
+.author__urls.social-icons i,
+.author__urls.social-icons .svg-inline--fa,
+.page__footer-follow .social-icons i,
+.page__footer-follow .social-icons .svg-inline--fa  {
+  color: inherit;
+}
+
+/* next/previous buttons */
+.pagination--pager {
+  color: $text-color;
+  background-color: $primary-color;
+  border-color: transparent;
+
+  &:visited {
+    color: $text-color;
+  }
+}
+
+.ais-search-box .ais-search-box--input {
+  background-color: $form-background-color;
+}
+
+
+::selection {
+  background:  $primary-color !important;
+  color: $background-color !important;
+}