refactor: use whiskers@v2 (#4)

refactor: update to whiskers v2 fix: don't always use mocha blue
catppuccin · Aug 31, 2024 · 7651123 · 7651123
1 parent 5d462d1
commit 7651123
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 49 deletions.
diff --git a/Makefile b/Makefile
diff --git a/justfile b/justfile
@@ -0,0 +1,5 @@
+_default:
+  @just --list
+
+build:
+  whiskers theme.park.tera
diff --git a/template/style.css b/template/style.css
diff --git a/theme.park.tera b/theme.park.tera
@@ -0,0 +1,46 @@
+---
+whiskers:
+  version: "2.3.0"
+  matrix:
+    - flavor
+  filename: "themes/{{ flavor.identifier }}.css"
+---
+
+{%- macro rgb(color) -%}
+{{ color.rgb.r }}, {{ color.rgb.g }}, {{ color.rgb.b }}
+{%- endmacro -%}
+
+:root {
+  --main-bg-color: #{{ base.hex }};
+
+  --modal-bg-color: #{{ mantle.hex }};
+  --modal-header-color: #{{ crust.hex }};
+  --modal-footer-color: #{{ crust.hex }};
+
+  --drop-down-menu-bg: #{{ surface0.hex }};
+
+  --button-color: #{{ surface0.hex }};
+  --button-color-hover: #{{ surface1.hex }};
+  --button-text: var(--text);
+  --button-text-hover: var(--text-hover);
+
+  --accent-color: {{ self::rgb(color=blue) }};
+  --accent-color-hover: rgb(var(--accent-color), 0.8);
+  --link-color: var(--text);
+  --link-color-hover: #{{ blue.hex }};
+  --label-text-color: #fff; /* have to break convention here */
+
+  --text: #{{ text.hex }};
+  --text-hover: var(--text);
+  --text-muted: {{ subtext0.hex }};
+
+  /* Specials */
+  --arr-queue-color: #{{ green.hex }}; /* Servarr apps + Bazarr */
+  --plex-poster-unwatched: #{{ peach.hex }};
+  --petio-spinner: invert(66%) sepia(15%) saturate(1451%) hue-rotate(185deg) brightness(105%) contrast(96%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ /* Blue */
+  --gitea-color-primary-dark-4: var(--accent-color);
+  --overseerr-gradient: linear-gradient(
+    var(--main-bg-color),
+    var(--main-bg-color)
+  ); /* Make sure this is compatible with whatever takes in the gradient */
+}
diff --git a/flavors/frappe.css → themes/frappe.css b/flavors/frappe.css → themes/frappe.css
@@ -12,7 +12,7 @@
   --button-text: var(--text);
   --button-text-hover: var(--text-hover);
 
-  --accent-color: 137, 180, 250; /* Mocha Blue */
+  --accent-color: 140, 170, 238;
   --accent-color-hover: rgb(var(--accent-color), 0.8);
   --link-color: var(--text);
   --link-color-hover: #8caaee;

diff --git a/flavors/latte.css → themes/latte.css b/flavors/latte.css → themes/latte.css
@@ -12,7 +12,7 @@
   --button-text: var(--text);
   --button-text-hover: var(--text-hover);
 
-  --accent-color: 137, 180, 250; /* Mocha Blue */
+  --accent-color: 30, 102, 245;
   --accent-color-hover: rgb(var(--accent-color), 0.8);
   --link-color: var(--text);
   --link-color-hover: #1e66f5;

diff --git a/flavors/macchiato.css → themes/macchiato.css b/flavors/macchiato.css → themes/macchiato.css
@@ -12,7 +12,7 @@
   --button-text: var(--text);
   --button-text-hover: var(--text-hover);
 
-  --accent-color: 137, 180, 250; /* Mocha Blue */
+  --accent-color: 138, 173, 244;
   --accent-color-hover: rgb(var(--accent-color), 0.8);
   --link-color: var(--text);
   --link-color-hover: #8aadf4;

diff --git a/flavors/mocha.css → themes/mocha.css b/flavors/mocha.css → themes/mocha.css
@@ -12,7 +12,7 @@
   --button-text: var(--text);
   --button-text-hover: var(--text-hover);
 
-  --accent-color: 137, 180, 250; /* Mocha Blue */
+  --accent-color: 137, 180, 250;
   --accent-color-hover: rgb(var(--accent-color), 0.8);
   --link-color: var(--text);
   --link-color-hover: #89b4fa;