Merge pull request #1 from mattstruble/feat/catpuccin

feat: catpuccin color theme
mattstruble · Apr 26, 2024 · eb01b4c · eb01b4c
2 parents dc3c0a8 + 1115e7a
commit eb01b4c
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 89 deletions.
diff --git a/assets/css/critical/15-colors.css b/assets/css/critical/15-colors.css
@@ -1,42 +1,34 @@
-{{ $themeContrast := .Param "themeContrast" | default "medium" }}
 {{ $backgroundColor := "bg0" }}
-{{ if eq $themeContrast "soft" }}
-  {{ $backgroundColor = "bg0_s" }}
-{{ else if eq $themeContrast "hard" }}
-  {{ $backgroundColor = "bg0_h" }}
-{{ end }}
 
 :root[data-theme="light"] {
   --bg: var(--{{ $backgroundColor }});
-  --bg0: #fbf1c7;
-  --bg0_h: #f9f5d7;
-  --bg0_s: #f2e5bc;
-  --bg1: #ebdbb2;
-  --bg2: #d5c4a1;
-  --bg3: #bdae93;
-  --bg4: #a89984;
+  --bg0: #eff1f5; /* base */
+  --bg1: #e6e9ef; /* mantle */
+  --bg2: #dce0e8; /* crust */
+  --bg3: #ccd9da; /* surface 0 */
+  --bg4: #bcc0cc; /* surface 1 */
   --fg: var(--fg1);
-  --fg0: #282828;
-  --fg1: #3c3836;
-  --fg2: #504945;
-  --fg3: #665c54;
-  --fg4: #7c6f64;
-  --gray1: var(--fg4);
-  --gray2: #928374;
-  --red1: #cc241d;
-  --red2: #9d0006;
-  --green1: #98971a;
-  --green2: #797403;
-  --yellow1: #d79921;
-  --yellow2: #b57614;
-  --blue1: #458588;
-  --blue2: #076678;
-  --purple1: #b16286;
-  --purple2: #8f3f71;
-  --aqua1: #689d6a;
-  --aqua2: #427b58;
-  --orange1: #d65d0e;
-  --orange2: #af3a03;
+  --fg0: #4c4f69; /* text */
+  --fg1: #4c4f69; /* text */
+  --fg2: #6c6f85; /* subtext 0 */
+  --fg3: #5c5f77; /* subtext 1 */
+  --gray1: #9ca0b0; /* overlay 0 */
+  --gray2: #8c8fa1; /* overlay 1 */
+  --gray3: #7c7f93; /* overlay 2 */
+  --red: #d20f39; /* red */
+  --maroon: #e64553; /* maroon */
+  --green: #40a02b; /* green */
+  --teal: #179299; /* teal */
+  --yellow: #df8e1d; /* yellow */
+  --peach: #fe640b; /* peach */
+  --blue: #1e66f5; /* blue */
+  --lavender: #7287fd; /* lavender */
+  --pink: #ea76cb; /* pink */
+  --muave: #8839ef; /* muave */
+  --sapphire: #209fb5; /* sapphire */
+  --sky: #03a4e4; /* sky */
+  --rosewater: #dc8a78; /* rosewater */
+  --flamingo: #dd7878; /* flamingo */
 
   & .light--hidden {
     display: none;
@@ -45,43 +37,35 @@
 
 :root[data-theme="dark"] {
   --bg: var(--{{ $backgroundColor }});
-  --bg0: #282828;
-  --bg0_h: #1d2021;
-  --bg0_s: #32302f;
-  --bg1: #3c3836;
-  --bg2: #504945;
-  --bg3: #665c54;
-  --bg4: #7c6f64;
+  --bg0: #24273a; /* base */
+  --bg1: #1e2030; /* mantle */
+  --bg2: #181926; /* crust */
+  --bg3: #363a4f; /* surface 0 */
+  --bg4: #494d64; /* surface 1 */
   --fg: var(--fg1);
-  --fg0: #fbf1c7;
-  --fg1: #ebdbb2;
-  --fg2: #d5c4a1;
-  --fg3: #bdae93;
-  --fg4: #a89984;
-  --gray1: var(--fg4);
-  --gray2: #928374;
-  --red1: #cc241d;
-  --red2: #fb4934;
-  --green1: #98971a;
-  --green2: #b8bb26;
-  --yellow1: #d79921;
-  --yellow2: #fabd2f;
-  --blue1: #458588;
-  --blue2: #83a598;
-  --purple1: #b16286;
-  --purple2: #d3869b;
-  --aqua1: #689d6a;
-  --aqua2: #8ec07c;
-  --orange1: #d65d0e;
-  --orange2: #fe8019;
+  --fg0: #cad3f5; /* text */
+  --fg1: #cad3f5; /* text */
+  --fg2: #a5adcb; /* subtext 0 */
+  --fg3: #b8c0e0; /* subtext 1 */
+  --gray1: #6e738d; /* overlay 0 */
+  --gray2: #8087a2; /* overlay 1 */
+  --gray3: #939ab7; /* overlay 2 */
+  --red: #ed8796; /* red */
+  --maroon: #ee99a0; /* maroon */
+  --green: #a6da95; /* green */
+  --teal: #8bd5ca; /* teal */
+  --yellow: #eed49f; /* yellow */
+  --peach: #f5a97f; /* peach */
+  --blue: #8aadf4; /* blue */
+  --lavender: #b7bdf8; /* lavender */
+  --pink: #f5bde6; /* pink */
+  --muave: #c6a0f6; /* muave */
+  --sapphire: #7dc4e4; /* sapphire */
+  --sky: #91d7e3; /* sky */
+  --rosewater: #f4dbd6; /* rosewater */
+  --flamingo: #f0c6c6; /* flamingo */
 
   & .dark--hidden {
     display: none;
   }
 }
-
-:root {
-  {{ $themeColor := .Param "themeColor" | default "blue" }}
-  --primary: var(--{{ $themeColor }}1);
-  --primary-alt: var(--{{ $themeColor }}2);
-}
diff --git a/assets/css/critical/20-base.css b/assets/css/critical/20-base.css
@@ -28,7 +28,7 @@ a {
 
 a.link--external::after {
   /* 2009 = Thin Space */
-  content: "\2009↗";
+  /* content: "\2009↗"; */
 }
 
 img,
@@ -49,8 +49,7 @@ figcaption {
 }
 
 *::selection {
-  color: var(--fg0);
-  background: var(--bg4);
+  background: color-mix(in srgb, var(--gray3) 20%, transparent);
 }
 
 h1,
@@ -59,7 +58,6 @@ h3,
 h4,
 h5,
 h6 {
-  color: var(--fg0);
   font-family: var(--font-monospace);
   font-weight: 300;
   line-height: 1.4;
@@ -69,6 +67,18 @@ h6 {
   }
 }
 
+h1 {
+  color: var(--fg0);
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--fg2);
+}
+
 h2,
 h3,
 h4,
@@ -143,7 +153,7 @@ hr {
 }
 
 mark {
-  background: var(--yellow1);
+  background: var(--yellow);
   color: var(--bg0);
 }
 
@@ -193,7 +203,6 @@ pre {
 }
 
 pre {
-  /* TODO is !important really needed because of Prism? */
   background: var(--bg1) !important;
   overflow: auto;
 
@@ -204,7 +213,7 @@ pre {
 
 blockquote,
 blockquote.twitter-tweet {
-  border-left: var(--primary-alt) 5px solid;
+  border-left: var(--lavender) 5px solid;
   margin: 0.5rem 0;
 
   & code {
@@ -221,18 +230,18 @@ blockquote.twitter-tweet {
 }
 
 blockquote.twitter-tweet {
-  border-color: var(--blue2);
+  border-color: var(--lavender);
   color: inherit;
   font: inherit;
   font-size: inherit;
   line-height: inherit;
 
   & a {
-    color: var(--blue2);
+    color: var(--blue);
   }
 
   & a:hover {
-    color: var(--blue1);
+    color: var(--lavender);
     text-decoration: none !important;
   }
 }
diff --git a/assets/css/critical/30-header.css b/assets/css/critical/30-header.css
@@ -141,14 +141,14 @@ header {
   align-items: center;
   background: none;
   border: none;
-  color: var(--yellow1);
+  color: var(--yellow);
   cursor: pointer;
   display: flex;
   grid-area: theme-toggle;
   margin: 0 1rem;
 
   &:hover {
-    color: var(--yellow2);
+    color: var(--peach);
   }
 
   & svg {

diff --git a/assets/css/critical/35-sidebar.css b/assets/css/critical/35-sidebar.css
@@ -20,11 +20,11 @@
 
 aside.toc {
   & a {
-    color: var(--primary-alt);
+    color: var(--blue);
   }
 
   & a:hover {
-    color: var(--primary);
+    color: var(--lavender);
   }
 
   & ul {

diff --git a/assets/css/critical/40-post.css b/assets/css/critical/40-post.css
@@ -27,18 +27,18 @@
 }
 
 .post-content__read-more {
-  color: var(--primary-alt);
+  color: var(--blue);
   margin-top: 1.3rem;
 }
 
 .post-header,
 .post-content {
   & a {
-    color: var(--primary-alt);
+    color: var(--blue);
   }
 
   & a:hover {
-    color: var(--primary);
+    color: var(--lavender);
   }
 }
 

diff --git a/assets/css/non-critical/20-pagination.css b/assets/css/non-critical/20-pagination.css
@@ -4,13 +4,13 @@
 }
 
 .pagination__button {
-  color: var(--primary-alt);
+  color: var(--blue);
   font-family: var(--font-monospace);
   font-size: 1.125rem;
 }
 
 .pagination__button:hover {
-  color: var(--primary);
+  color: var(--lavender);
 }
 
 .pagination__button--next {

diff --git a/layouts/partials/head/stylesheets.html b/layouts/partials/head/stylesheets.html
@@ -3,8 +3,8 @@
 
 {{ $critical := sort (resources.Match "css/critical/*.css") "Name" | resources.Concat nil | resources.ExecuteAsTemplate nil . | resources.PostCSS }}
 {{ $nonCritical := sort (resources.Match "css/non-critical/*.css") "Name" | resources.Concat "css/non-critical.css" | resources.ExecuteAsTemplate "css/non-critical.css" . | resources.PostCSS }}
-{{ $prismDark := resources.Get "prism-themes/prism-gruvbox-dark.css" }}
-{{ $prismLight := resources.Get "prism-themes/prism-gruvbox-light.css" }}
+{{ $prismDark := resources.Get "prism-themes/prism-coldark-dark.css" }}
+{{ $prismLight := resources.Get "prism-themes/prism-coldark-cold.css" }}
 
 {{ if hugo.IsProduction }}
   {{ $critical = $critical | resources.PostProcess }}