From e19036270148d82eb55968b512b938a15a8d602f Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Fri, 3 Jan 2025 17:46:15 +0100
Subject: [PATCH] Reduce repeated code in secondary theme colours

---
 src/renderer/themes.css | 384 ++++++++--------------------------------
 1 file changed, 74 insertions(+), 310 deletions(-)

diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 2b8426dee8358..fee38a6092ea9 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -4,6 +4,18 @@ body {
   color: var(--primary-text-color);
   background-color: var(--bg-color);
 
+  /*
+    This works because CSS variables are just a find and replace and
+    are replaced before the expressions are evaluated
+  */
+  --accent-color: rgb(var(--accent-color-rgb));
+  --accent-color-opacity1: rgb(var(--accent-color-rgb) / 4%);
+  --accent-color-opacity2: rgb(var(--accent-color-rgb) / 12%);
+  --accent-color-opacity3: rgb(var(--accent-color-rgb) / 16%);
+  --accent-color-opacity4: rgb(var(--accent-color-rgb) / 24%);
+
+  /* divider */
+
   --primary-input-color: rgb(0 0 0 / 50%);
   --link-color: var(--accent-color);
   --link-visited-color: var(--accent-color-visited);
@@ -991,195 +1003,131 @@ it can be safely elided. This looks quite pleasant on this theme. */
 }
 
 .secRed {
-  --accent-color: #f44336;
+  --accent-color-rgb: 244 67 54;
   --accent-color-hover: #e53935;
   --accent-color-active: #c62828;
   --accent-color-light: #ef9a9a;
   --accent-color-visited: #b71c1c;
-  --accent-color-opacity1: rgb(244 67 54 / 4%);
-  --accent-color-opacity2: rgb(244 67 54 / 12%);
-  --accent-color-opacity3: rgb(244 67 54 / 16%);
-  --accent-color-opacity4: rgb(244 67 54 / 24%);
 }
 
 .secPink {
-  --accent-color: #e91e63;
+  --accent-color-rgb: 233 30 99;
   --accent-color-hover: #d81b60;
   --accent-color-active: #ad1457;
   --accent-color-light: #f48fb1;
   --accent-color-visited: #880e4f;
-  --accent-color-opacity1: rgb(233 30 99 / 4%);
-  --accent-color-opacity2: rgb(233 30 99 / 12%);
-  --accent-color-opacity3: rgb(233 30 99 / 16%);
-  --accent-color-opacity4: rgb(233 30 99 / 24%);
 }
 
 .secPurple {
-  --accent-color: #9c27b0;
+  --accent-color-rgb: 156 39 176;
   --accent-color-hover: #8e24aa;
   --accent-color-active: #6a1b9a;
   --accent-color-light: #ce93d8;
   --accent-color-visited: #4a148c;
-  --accent-color-opacity1: rgb(156 39 176 / 4%);
-  --accent-color-opacity2: rgb(156 39 176 / 12%);
-  --accent-color-opacity3: rgb(156 39 176 / 16%);
-  --accent-color-opacity4: rgb(156 39 176 / 24%);
 }
 
 .secDeepPurple {
-  --accent-color: #673ab7;
+  --accent-color-rgb: 103 58 183;
   --accent-color-hover: #5e35b1;
   --accent-color-active: #4527a0;
   --accent-color-light: #b39ddb;
   --accent-color-visited: #311b92;
-  --accent-color-opacity1: rgb(103 58 183 / 4%);
-  --accent-color-opacity2: rgb(103 58 183 / 12%);
-  --accent-color-opacity3: rgb(103 58 183 / 16%);
-  --accent-color-opacity4: rgb(103 58 183 / 24%);
 }
 
 .secIndigo {
-  --accent-color: #3f51b5;
+  --accent-color-rgb: 63 81 181;
   --accent-color-hover: #3949ab;
   --accent-color-active: #283593;
   --accent-color-light: #9fa8da;
   --accent-color-visited: #1a237e;
-  --accent-color-opacity1: rgb(63 81 181 / 4%);
-  --accent-color-opacity2: rgb(63 81 181 / 12%);
-  --accent-color-opacity3: rgb(63 81 181 / 16%);
-  --accent-color-opacity4: rgb(63 81 181 / 24%);
 }
 
 .secBlue {
-  --accent-color: #2196f3;
+  --accent-color-rgb: 33 150 243;
   --accent-color-hover: #1e88e5;
   --accent-color-active: #1565c0;
   --accent-color-light: #90caf9;
   --accent-color-visited: #0d47a1;
-  --accent-color-opacity1: rgb(33 150 243 / 4%);
-  --accent-color-opacity2: rgb(33 150 243 / 12%);
-  --accent-color-opacity3: rgb(33 150 243 / 16%);
-  --accent-color-opacity4: rgb(33 150 243 / 24%);
 }
 
 .secLightBlue {
-  --accent-color: #03a9f4;
+  --accent-color-rgb: 3 169 244;
   --accent-color-hover: #039be5;
   --accent-color-active: #0277bd;
   --accent-color-light: #81d4fa;
   --accent-color-visited: #01579b;
-  --accent-color-opacity1: rgb(3 169 244 / 4%);
-  --accent-color-opacity2: rgb(3 169 244 / 12%);
-  --accent-color-opacity3: rgb(3 169 244 / 16%);
-  --accent-color-opacity4: rgb(3 169 244 / 24%);
 }
 
 .secCyan {
-  --accent-color: #00bcd4;
+  --accent-color-rgb: 0 188 212;
   --accent-color-hover: #00acc1;
   --accent-color-active: #00838f;
   --accent-color-light: #80deea;
   --accent-color-visited: #006064;
-  --accent-color-opacity1: rgb(0 188 212 / 4%);
-  --accent-color-opacity2: rgb(0 188 212 / 12%);
-  --accent-color-opacity3: rgb(0 188 212 / 16%);
-  --accent-color-opacity4: rgb(0 188 212 / 24%);
 }
 
 .secTeal {
-  --accent-color: #009688;
+  --accent-color-rgb: 0 150 136;
   --accent-color-hover: #00897b;
   --accent-color-active: #00695c;
   --accent-color-light: #80cbc4;
   --accent-color-visited: #004d40;
-  --accent-color-opacity1: rgb(0 150 136 / 4%);
-  --accent-color-opacity2: rgb(0 150 136 / 12%);
-  --accent-color-opacity3: rgb(0 150 136 / 16%);
-  --accent-color-opacity4: rgb(0 150 136 / 24%);
 }
 
 .secGreen {
-  --accent-color: #4caf50;
+  --accent-color-rgb: 76 175 80;
   --accent-color-hover: #43a047;
   --accent-color-active: #2e7d32;
   --accent-color-light: #a5d6a7;
   --accent-color-visited: #1b5e20;
-  --accent-color-opacity1: rgb(76 175 80 / 4%);
-  --accent-color-opacity2: rgb(76 175 80 / 12%);
-  --accent-color-opacity3: rgb(76 175 80 / 16%);
-  --accent-color-opacity4: rgb(76 175 80 / 24%);
 }
 
 .secLightGreen {
-  --accent-color: #8bc34a;
+  --accent-color-rgb: 139 195 74;
   --accent-color-hover: #7cb342;
   --accent-color-active: #558b2f;
   --accent-color-light: #c5e1a5;
   --accent-color-visited: #33691e;
-  --accent-color-opacity1: rgb(139 195 74 / 4%);
-  --accent-color-opacity2: rgb(139 195 74 / 12%);
-  --accent-color-opacity3: rgb(139 195 74 / 16%);
-  --accent-color-opacity4: rgb(139 195 74 / 24%);
 }
 
 .secLime {
-  --accent-color: #cddc39;
+  --accent-color-rgb: 205 220 57;
   --accent-color-hover: #c0ca33;
   --accent-color-active: #9e9d24;
   --accent-color-light: #e6ee9c;
   --accent-color-visited: #827717;
-  --accent-color-opacity1: rgb(205 220 57 / 4%);
-  --accent-color-opacity2: rgb(205 220 57 / 12%);
-  --accent-color-opacity3: rgb(205 220 57 / 16%);
-  --accent-color-opacity4: rgb(205 220 57 / 24%);
 }
 
 .secYellow {
-  --accent-color: #ffeb3b;
+  --accent-color-rgb: 255 235 59;
   --accent-color-hover: #fdd835;
   --accent-color-active: #f9a825;
   --accent-color-light: #fff59d;
   --accent-color-visited: #f57f17;
-  --accent-color-opacity1: rgb(255 235 59 / 4%);
-  --accent-color-opacity2: rgb(255 235 59 / 12%);
-  --accent-color-opacity3: rgb(255 235 59 / 16%);
-  --accent-color-opacity4: rgb(255 235 59 / 24%);
 }
 
 .secAmber {
-  --accent-color: #ffc107;
+  --accent-color-rgb: 255 193 7;
   --accent-color-hover: #ffb300;
   --accent-color-active: #ff8f00;
   --accent-color-light: #ffe082;
   --accent-color-visited: #ff6f00;
-  --accent-color-opacity1: rgb(255 193 7 / 4%);
-  --accent-color-opacity2: rgb(255 193 7 / 12%);
-  --accent-color-opacity3: rgb(255 193 7 / 16%);
-  --accent-color-opacity4: rgb(255 193 7 / 24%);
 }
 
 .secOrange {
-  --accent-color: #ff9800;
+  --accent-color-rgb: 255 152 0;
   --accent-color-hover: #fb8c00;
   --accent-color-active: #ef6c00;
   --accent-color-light: #ffcc80;
   --accent-color-visited: #e65100;
-  --accent-color-opacity1: rgb(255 152 0 / 4%);
-  --accent-color-opacity2: rgb(255 152 0 / 12%);
-  --accent-color-opacity3: rgb(255 152 0 / 16%);
-  --accent-color-opacity4: rgb(255 152 0 / 24%);
 }
 
 .secDeepOrange {
-  --accent-color: #ff5722;
+  --accent-color-rgb: 255 87 34;
   --accent-color-hover: #f4511e;
   --accent-color-active: #d84315;
   --accent-color-light: #ffab91;
   --accent-color-visited: #bf360c;
-  --accent-color-opacity1: rgb(255 87 34 / 4%);
-  --accent-color-opacity2: rgb(255 87 34 / 12%);
-  --accent-color-opacity3: rgb(255 87 34 / 16%);
-  --accent-color-opacity4: rgb(255 87 34 / 24%);
 }
 
 
@@ -1203,171 +1151,115 @@ it can be safely elided. This looks quite pleasant on this theme. */
 }
 
 .secCatppuccinMochaRosewater {
-  --accent-color: #f5e0dc;
+  --accent-color-rgb: 245 224 220;
   --accent-color-hover: #fceeec;
   --accent-color-active: #e1c8c3;
   --accent-color-light: #f8eae7;
   --accent-color-visited: #d3a197;
-  --accent-color-opacity1: rgb(245 224 220 / 4%);
-  --accent-color-opacity2: rgb(245 224 220 / 12%);
-  --accent-color-opacity3: rgb(245 224 220 / 16%);
-  --accent-color-opacity4: rgb(245 224 220 / 24%);
 }
 
 .secCatppuccinMochaFlamingo {
-  --accent-color: #f2cdcd;
+  --accent-color-rgb: 242 205 205;
   --accent-color-hover: #f3d7d7;
   --accent-color-active: #ddb7b7;
   --accent-color-light: #f7dfdf;
   --accent-color-visited: #cf9898;
-  --accent-color-opacity1: rgb(242 205 205 / 4%);
-  --accent-color-opacity2: rgb(242 205 205 / 12%);
-  --accent-color-opacity3: rgb(242 205 205 / 16%);
-  --accent-color-opacity4: rgb(242 205 205 / 24%);
 }
 
 .secCatppuccinMochaPink {
-  --accent-color: #f5c2e7;
+  --accent-color-rgb: 245 194 231;
   --accent-color-hover: #f3cee9;
   --accent-color-active: #dca3cd;
   --accent-color-light: #f4dbed;
   --accent-color-visited: #d28fc0;
-  --accent-color-opacity1: rgb(245 194 231 / 4%);
-  --accent-color-opacity2: rgb(245 194 231 / 12%);
-  --accent-color-opacity3: rgb(245 194 231 / 16%);
-  --accent-color-opacity4: rgb(245 194 231 / 24%);
 }
 
 .secCatppuccinMochaMauve {
-  --accent-color: #cba6f7;
+  --accent-color-rgb: 203 166 247;
   --accent-color-hover: #d4b7f8;
   --accent-color-active: #b38fdf;
   --accent-color-light: #d6b9f9;
   --accent-color-visited: #a171da;
-  --accent-color-opacity1: rgb(203 166 247 / 4%);
-  --accent-color-opacity2: rgb(203 166 247 / 12%);
-  --accent-color-opacity3: rgb(203 166 247 / 16%);
-  --accent-color-opacity4: rgb(203 166 247 / 24%);
 }
 
 .secCatppuccinMochaRed {
-  --accent-color: #f38ba8;
+  --accent-color-rgb: 243 139 168;
   --accent-color-hover: #f399b2;
   --accent-color-active: #de7693;
   --accent-color-light: #f5a3ba;
   --accent-color-visited: #d56c89;
-  --accent-color-opacity1: rgb(243 139 168 / 4%);
-  --accent-color-opacity2: rgb(243 139 168 / 12%);
-  --accent-color-opacity3: rgb(243 139 168 / 16%);
-  --accent-color-opacity4: rgb(243 139 168 / 24%);
 }
 
 .secCatppuccinMochaMaroon {
-  --accent-color: #eba0ac;
+  --accent-color-rgb: 235 160 172;
   --accent-color-hover: #ebb4bd;
   --accent-color-active: #d68895;
   --accent-color-light: #f0b7c0;
   --accent-color-visited: #c86a79;
-  --accent-color-opacity1: rgb(235 160 172 / 4%);
-  --accent-color-opacity2: rgb(235 160 172 / 12%);
-  --accent-color-opacity3: rgb(235 160 172 / 16%);
-  --accent-color-opacity4: rgb(235 160 172 / 24%);
 }
 
 .secCatppuccinMochaPeach {
-  --accent-color: #fab387;
+  --accent-color-rgb: 250 179 135;
   --accent-color-hover: #f7bd99;
   --accent-color-active: #e1996d;
   --accent-color-light: #fbc4a2;
   --accent-color-visited: #d78a5b;
-  --accent-color-opacity1: rgb(250 179 135 / 4%);
-  --accent-color-opacity2: rgb(250 179 135 / 12%);
-  --accent-color-opacity3: rgb(250 179 135 / 16%);
-  --accent-color-opacity4: rgb(250 179 135 / 24%);
 }
 
 .secCatppuccinMochaYellow {
-  --accent-color: #f9e2af;
+  --accent-color-rgb: 249 226 175;
   --accent-color-hover: #f9e7bf;
   --accent-color-active: #dec48d;
   --accent-color-light: #fbeccb;
   --accent-color-visited: #d5b05d;
-  --accent-color-opacity1: rgb(249 226 175 / 4%);
-  --accent-color-opacity2: rgb(249 226 175 / 12%);
-  --accent-color-opacity3: rgb(249 226 175 / 16%);
-  --accent-color-opacity4: rgb(249 226 175 / 24%);
 }
 
 .secCatppuccinMochaGreen {
-  --accent-color: #a6e3a1;
+  --accent-color-rgb: 166 227 161;
   --accent-color-hover: #b6e3b2;
   --accent-color-active: #86c780;
   --accent-color-light: #bceab8;
   --accent-color-visited: #6ed166;
-  --accent-color-opacity1: rgb(166 227 161 / 4%);
-  --accent-color-opacity2: rgb(166 227 161 / 12%);
-  --accent-color-opacity3: rgb(166 227 161 / 16%);
-  --accent-color-opacity4: rgb(166 227 161 / 24%);
 }
 
 .secCatppuccinMochaTeal {
-  --accent-color: #94e2d5;
+  --accent-color-rgb: 148 226 213;
   --accent-color-hover: #a1dfd5;
   --accent-color-active: #6fc5b7;
   --accent-color-light: #afe9df;
   --accent-color-visited: #5cccb9;
-  --accent-color-opacity1: rgb(148 226 213 / 4%);
-  --accent-color-opacity2: rgb(148 226 213 / 12%);
-  --accent-color-opacity3: rgb(148 226 213 / 16%);
-  --accent-color-opacity4: rgb(148 226 213 / 24%);
 }
 
 .secCatppuccinMochaSky {
-  --accent-color: #89dceb;
+  --accent-color-rgb: 137 220 235;
   --accent-color-hover: #99dfeb;
   --accent-color-active: #68bcca;
   --accent-color-light: #9fe3ef;
   --accent-color-visited: #64c2d3;
-  --accent-color-opacity1: rgb(137 220 235 / 4%);
-  --accent-color-opacity2: rgb(137 220 235 / 12%);
-  --accent-color-opacity3: rgb(137 220 235 / 16%);
-  --accent-color-opacity4: rgb(137 220 235 / 24%);
 }
 
 .secCatppuccinMochaSapphire {
-  --accent-color: #74c7ec;
+  --accent-color-rgb: 116 199 236;
   --accent-color-hover: #84c7e6;
   --accent-color-active: #59a9cf;
   --accent-color-light: #93d4f0;
   --accent-color-visited: #6ab6d7;
-  --accent-color-opacity1: rgb(116 199 236 / 4%);
-  --accent-color-opacity2: rgb(116 199 236 / 12%);
-  --accent-color-opacity3: rgb(116 199 236 / 16%);
-  --accent-color-opacity4: rgb(116 199 236 / 24%);
 }
 
 .secCatppuccinMochaBlue {
-  --accent-color: #89b4fa;
+  --accent-color-rgb: 137 220 235;
   --accent-color-hover: #9bbef6;
   --accent-color-active: #6593df;
   --accent-color-light: #a7c7fb;
   --accent-color-visited: #739cdd;
-  --accent-color-opacity1: rgb(137 220 235 / 4%);
-  --accent-color-opacity2: rgb(137 220 235 / 12%);
-  --accent-color-opacity3: rgb(137 220 235 / 16%);
-  --accent-color-opacity4: rgb(137 220 235 / 24%);
 }
 
 .secCatppuccinMochaLavender {
-  --accent-color: #b4befe;
+  --accent-color-rgb: 180 190 254;
   --accent-color-hover: #c9d0ff;
   --accent-color-active: #8d98e4;
   --accent-color-light: #d2d8fe;
   --accent-color-visited: #96a1e9;
-  --accent-color-opacity1: rgb(180 190 254 / 4%);
-  --accent-color-opacity2: rgb(180 190 254 / 12%);
-  --accent-color-opacity3: rgb(180 190 254 / 16%);
-  --accent-color-opacity4: rgb(180 190 254 / 24%);
 }
 
 .secDraculaCyan,
@@ -1468,228 +1360,156 @@ it can be safely elided. This looks quite pleasant on this theme. */
 }
 
 .secSolarizedYellow {
-  --accent-color: #7b5b00;
+  --accent-color-rgb: 165 165 0;
   --primary-color-hover: #a9a130;
   --accent-color-hover: #bb9f40;
   --accent-color-active: #897710;
   --accent-color-light: #dbc050;
   --accent-color-visited: #a9a130;
-  --accent-color-opacity1: rgb(165 165 0 / 4%);
-  --accent-color-opacity2: rgb(165 165 0 / 12%);
-  --accent-color-opacity3: rgb(165 165 0 / 16%);
-  --accent-color-opacity4: rgb(165 165 0 / 24%);
 }
 
 .secSolarizedOrange {
-  --accent-color: #8b3700;
+  --accent-color-rgb: 169 47 20;
   --primary-color-hover: #c94d34;
   --accent-color-hover: #db8140;
   --accent-color-active: #b35936;
   --accent-color-light: #eb8156;
   --accent-color-visited: #c94d34;
-  --accent-color-opacity1: rgb(169 47 20 / 4%);
-  --accent-color-opacity2: rgb(169 47 20 / 12%);
-  --accent-color-opacity3: rgb(169 47 20 / 16%);
-  --accent-color-opacity4: rgb(169 47 20 / 24%);
 }
 
 .secSolarizedRed {
-  --accent-color: #9a101d;
+  --accent-color-rgb: 186 16 29;
   --primary-color-hover: #d8302d;
   --accent-color-hover: #da504d;
   --accent-color-active: #b8282b;
   --accent-color-light: #fa726f;
   --accent-color-visited: #d8302d;
-  --accent-color-opacity1: rgb(186 16 29 / 4%);
-  --accent-color-opacity2: rgb(186 16 29 / 12%);
-  --accent-color-opacity3: rgb(186 16 29 / 16%);
-  --accent-color-opacity4: rgb(186 16 29 / 24%);
 }
 
 .secSolarizedMagenta {
-  --accent-color: #8e1060;
+  --accent-color-rgb: 176 20 96;
   --primary-color-hover: #d23480;
   --accent-color-hover: #dc5280;
   --accent-color-active: #b814a0;
   --accent-color-light: #fc5280;
   --accent-color-visited: #d23480;
-  --accent-color-opacity1: rgb(176 20 96 / 4%);
-  --accent-color-opacity2: rgb(176 20 96 / 12%);
-  --accent-color-opacity3: rgb(176 20 96 / 16%);
-  --accent-color-opacity4: rgb(176 20 96 / 24%);
 }
 
 .secSolarizedViolet {
-  --accent-color: #2e43a4;
+  --accent-color-rgb: 78 83 164;
   --primary-color-hover: #6e83c4;
   --accent-color-hover: #8e77c4;
   --accent-color-active: #5e63e4;
   --accent-color-light: #ae95f4;
   --accent-color-visited: #6e83c4;
-  --accent-color-opacity1: rgb(78 83 164 / 4%);
-  --accent-color-opacity2: rgb(78 83 164 / 12%);
-  --accent-color-opacity3: rgb(78 83 164 / 16%);
-  --accent-color-opacity4: rgb(78 83 164 / 24%);
 }
 
 .secSolarizedBlue {
-  --accent-color: #0283b2;
+  --accent-color-rgb: 4 131 178;
   --primary-color-hover: #4899d2;
   --accent-color-hover: #469fd2;
   --accent-color-active: #2483d4;
   --accent-color-light: #66b1f4;
   --accent-color-visited: #4899d2;
-  --accent-color-opacity1: rgb(4 131 178 / 4%);
-  --accent-color-opacity2: rgb(4 131 178 / 12%);
-  --accent-color-opacity3: rgb(4 131 178 / 16%);
-  --accent-color-opacity4: rgb(4 131 178 / 24%);
 }
 
 .secSolarizedCyan {
-  --accent-color: #008776;
+  --accent-color-rgb: 8 135 118;
   --primary-color-hover: #2ca998;
   --accent-color-hover: #4cb9b8;
   --accent-color-active: #1c9788;
   --accent-color-light: #6ce1d8;
   --accent-color-visited: #2ca998;
-  --accent-color-opacity1: rgb(8 135 118 / 4%);
-  --accent-color-opacity2: rgb(8 135 118 / 12%);
-  --accent-color-opacity3: rgb(8 135 118 / 16%);
-  --accent-color-opacity4: rgb(8 135 118 / 24%);
 }
 
 .secSolarizedGreen {
-  --accent-color: #657700;
+  --accent-color-rgb: 101 119 0;
   --primary-color-hover: #857720;
   --accent-color-hover: #a59640;
   --accent-color-active: #837720;
   --accent-color-light: #c5d940;
   --accent-color-visited: #857720;
-  --accent-color-opacity1: rgb(101 119 0 / 4%);
-  --accent-color-opacity2: rgb(101 119 0 / 12%);
-  --accent-color-opacity3: rgb(101 119 0 / 16%);
-  --accent-color-opacity4: rgb(101 119 0 / 24%);
 }
 
 .secGruvboxDarkGreen {
-  --accent-color: #98971a;
+  --accent-color-rgb: 152 151 26;
   --accent-color-hover: #b9b93a;
   --accent-color-active: #d9d95a;
   --accent-color-light: #b8bb26;
   --accent-color-visited: #98971a;
-  --accent-color-opacity1: rgb(152 151 26 / 4%);
-  --accent-color-opacity2: rgb(152 151 26 / 12%);
-  --accent-color-opacity3: rgb(152 151 26 / 16%);
-  --accent-color-opacity4: rgb(152 151 26 / 24%);
 }
 
 .secGruvboxDarkYellow {
-  --accent-color: #d79921;
+  --accent-color-rgb: 215 153 33;
   --accent-color-hover: #f0b839;
   --accent-color-active: #f0b839;
   --accent-color-light: #fabd2f;
   --accent-color-visited: #d79921;
-  --accent-color-opacity1: rgb(215 153 33 / 4%);
-  --accent-color-opacity2: rgb(215 153 33 / 12%);
-  --accent-color-opacity3: rgb(215 153 33 / 16%);
-  --accent-color-opacity4: rgb(215 153 33 / 24%);
 }
 
 .secGruvboxDarkBlue {
-  --accent-color: #458588;
+  --accent-color-rgb: 69 133 136;
   --accent-color-hover: #68948a;
   --accent-color-active: #68948a;
   --accent-color-light: #83a598;
   --accent-color-visited: #458588;
-  --accent-color-opacity1: rgb(69 133 136 / 4%);
-  --accent-color-opacity2: rgb(69 133 136 / 12%);
-  --accent-color-opacity3: rgb(69 133 136 / 16%);
-  --accent-color-opacity4: rgb(69 133 136 / 24%);
 }
 
 .secGruvboxDarkPurple {
-  --accent-color: #b16286;
+  --accent-color-rgb: 177 98 134;
   --accent-color-hover: #d3869b;
   --accent-color-active: #d3869b;
   --accent-color-light: #d3869b;
   --accent-color-visited: #b16286;
-  --accent-color-opacity1: rgb(177 98 134 / 4%);
-  --accent-color-opacity2: rgb(177 98 134 / 12%);
-  --accent-color-opacity3: rgb(177 98 134 / 16%);
-  --accent-color-opacity4: rgb(177 98 134 / 24%);
 }
 
 .secGruvboxDarkAqua {
-  --accent-color: #689d6a;
+  --accent-color-rgb: 104 157 106;
   --accent-color-hover: #8ec07c;
   --accent-color-active: #8ec07c;
   --accent-color-light: #8ec07c;
   --accent-color-visited: #689d6a;
-  --accent-color-opacity1: rgb(104 157 106 / 4%);
-  --accent-color-opacity2: rgb(104 157 106 / 12%);
-  --accent-color-opacity3: rgb(104 157 106 / 16%);
-  --accent-color-opacity4: rgb(104 157 106 / 24%);
 }
 
 .secGruvboxDarkOrange {
-  --accent-color: #d65d0e;
+  --accent-color-rgb: 214 93 14;
   --accent-color-hover: #f2804f;
   --accent-color-active: #f2804f;
   --accent-color-light: #fe8019;
   --accent-color-visited: #d65d0e;
-  --accent-color-opacity1: rgb(214 93 14 / 4%);
-  --accent-color-opacity2: rgb(214 93 14 / 12%);
-  --accent-color-opacity3: rgb(214 93 14 / 16%);
-  --accent-color-opacity4: rgb(214 93 14 / 24%);
 }
 
 .secGruvboxLightRed {
   --text-with-accent-color: #fbf1c7;
-  --accent-color: #cc241d;
+  --accent-color-rgb: 204 36 29;
   --accent-color-hover: #d23c2a;
   --accent-color-active: #a61f1f;
   --accent-color-light: #fb4934;
   --accent-color-visited: #a61f1f;
-  --accent-color-opacity1: rgb(204 36 29 / 4%);
-  --accent-color-opacity2: rgb(204 36 29 / 12%);
-  --accent-color-opacity3: rgb(204 36 29 / 16%);
-  --accent-color-opacity4: rgb(204 36 29 / 24%);
 }
 
 .secGruvboxLightBlue {
-  --accent-color: #458588;
+  --accent-color-rgb: 69 133 136;
   --accent-color-hover: #68948a;
   --accent-color-active: #68948a;
   --accent-color-light: #83a598;
   --accent-color-visited: #458588;
-  --accent-color-opacity1: rgb(69 133 136 / 4%);
-  --accent-color-opacity2: rgb(69 133 136 / 12%);
-  --accent-color-opacity3: rgb(69 133 136 / 16%);
-  --accent-color-opacity4: rgb(69 133 136 / 24%);
 }
 
 .secGruvboxLightPurple {
-  --accent-color: #b16286;
+  --accent-color-rgb: 177 98 134;
   --accent-color-hover: #d3869b;
   --accent-color-active: #d3869b;
   --accent-color-light: #d3869b;
   --accent-color-visited: #b16286;
-  --accent-color-opacity1: rgb(177 98 134 / 4%);
-  --accent-color-opacity2: rgb(177 98 134 / 12%);
-  --accent-color-opacity3: rgb(177 98 134 / 16%);
-  --accent-color-opacity4: rgb(177 98 134 / 24%);
 }
 
 .secGruvboxLightOrange {
-  --accent-color: #d65d0e;
+  --accent-color-rgb: 214 93 14;
   --accent-color-hover: #f2804f;
   --accent-color-active: #f2804f;
   --accent-color-light: #fe8019;
   --accent-color-visited: #d65d0e;
-  --accent-color-opacity1: rgb(214 93 14 / 4%);
-  --accent-color-opacity2: rgb(214 93 14 / 12%);
-  --accent-color-opacity3: rgb(214 93 14 / 16%);
-  --accent-color-opacity4: rgb(214 93 14 / 24%);
 }
 
 .secGruvboxLightOrange,
@@ -1729,171 +1549,115 @@ it can be safely elided. This looks quite pleasant on this theme. */
 }
 
 .secCatppuccinFrappeRosewater {
-  --accent-color: #f3d6df;
+  --accent-color-rgb: 243 214 223;
   --accent-color-hover: #f3e0e8;
   --accent-color-active: #e0bfcf;
   --accent-color-light: #f8e9f2;
   --accent-color-visited: #d3a1b3;
-  --accent-color-opacity1: rgb(243 214 223 / 4%);
-  --accent-color-opacity2: rgb(243 214 223 / 12%);
-  --accent-color-opacity3: rgb(243 214 223 / 16%);
-  --accent-color-opacity4: rgb(243 214 223 / 24%);
 }
 
 .secCatppuccinFrappeFlamingo {
-  --accent-color: #efbfbf;
+  --accent-color-rgb: 239 191 191;
   --accent-color-hover: #f0c9c9;
   --accent-color-active: #dca8a8;
   --accent-color-light: #f7dada;
   --accent-color-visited: #cf8f8f;
-  --accent-color-opacity1: rgb(239 191 191 / 4%);
-  --accent-color-opacity2: rgb(239 191 191 / 12%);
-  --accent-color-opacity3: rgb(239 191 191 / 16%);
-  --accent-color-opacity4: rgb(239 191 191 / 24%);
 }
 
 .secCatppuccinFrappePink {
-  --accent-color: #f5b9e5;
+  --accent-color-rgb: 245 185 229;
   --accent-color-hover: #f5c5e9;
   --accent-color-active: #e0a0d0;
   --accent-color-light: #f8d4f0;
   --accent-color-visited: #d38cb7;
-  --accent-color-opacity1: rgb(245 185 229 / 4%);
-  --accent-color-opacity2: rgb(245 185 229 / 12%);
-  --accent-color-opacity3: rgb(245 185 229 / 16%);
-  --accent-color-opacity4: rgb(245 185 229 / 24%);
 }
 
 .secCatppuccinFrappeMauve {
-  --accent-color: #cb9fe7;
+  --accent-color-rgb: 203 159 231;
   --accent-color-hover: #d4b0e8;
   --accent-color-active: #b38fdf;
   --accent-color-light: #d6b9f9;
   --accent-color-visited: #a171da;
-  --accent-color-opacity1: rgb(203 159 231 / 4%);
-  --accent-color-opacity2: rgb(203 159 231 / 12%);
-  --accent-color-opacity3: rgb(203 159 231 / 16%);
-  --accent-color-opacity4: rgb(203 159 231 / 24%);
 }
 
 .secCatppuccinFrappeRed {
-  --accent-color: #e88385;
+  --accent-color-rgb: 232 131 133;
   --accent-color-hover: #f08b8d;
   --accent-color-active: #d86f71;
   --accent-color-light: #f7a0a2;
   --accent-color-visited: #d86f71;
-  --accent-color-opacity1: rgb(232 131 133 / 4%);
-  --accent-color-opacity2: rgb(232 131 133 / 12%);
-  --accent-color-opacity3: rgb(232 131 133 / 16%);
-  --accent-color-opacity4: rgb(232 131 133 / 24%);
 }
 
 .secCatppuccinFrappeMaroon {
-  --accent-color: #eb9a9d;
+  --accent-color-rgb: 235 154 157;
   --accent-color-hover: #f0a1a4;
   --accent-color-active: #d88b8e;
   --accent-color-light: #f7b0b3;
   --accent-color-visited: #d88b8e;
-  --accent-color-opacity1: rgb(235 154 157 / 4%);
-  --accent-color-opacity2: rgb(235 154 157 / 12%);
-  --accent-color-opacity3: rgb(235 154 157 / 16%);
-  --accent-color-opacity4: rgb(235 154 157 / 24%);
 }
 
 .secCatppuccinFrappePeach {
-  --accent-color: #ffaf77;
+  --accent-color-rgb: 255 175 119;
   --accent-color-hover: #ffbb8a;
   --accent-color-active: #e69e6b;
   --accent-color-light: #fc9;
   --accent-color-visited: #e69e6b;
-  --accent-color-opacity1: rgb(255 175 119 / 4%);
-  --accent-color-opacity2: rgb(255 175 119 / 12%);
-  --accent-color-opacity3: rgb(255 175 119 / 16%);
-  --accent-color-opacity4: rgb(255 175 119 / 24%);
 }
 
 .secCatppuccinFrappeYellow {
-  --accent-color: #e6c991;
+  --accent-color-rgb: 230 201 145;
   --accent-color-hover: #f0d8a1;
   --accent-color-active: #d8b07f;
   --accent-color-light: #f7e2b0;
   --accent-color-visited: #d8b07f;
-  --accent-color-opacity1: rgb(230 201 145 / 4%);
-  --accent-color-opacity2: rgb(230 201 145 / 12%);
-  --accent-color-opacity3: rgb(230 201 145 / 16%);
-  --accent-color-opacity4: rgb(230 201 145 / 24%);
 }
 
 .secCatppuccinFrappeGreen {
-  --accent-color: #a7d28a;
+  --accent-color-rgb: 167 210 138;
   --accent-color-hover: #b7d28f;
   --accent-color-active: #87b96f;
   --accent-color-light: #bde6a0;
   --accent-color-visited: #6fc75f;
-  --accent-color-opacity1: rgb(167 210 138 / 4%);
-  --accent-color-opacity2: rgb(167 210 138 / 12%);
-  --accent-color-opacity3: rgb(167 210 138 / 16%);
-  --accent-color-opacity4: rgb(167 210 138 / 24%);
 }
 
 .secCatppuccinFrappeTeal {
-  --accent-color: #82c9bf;
+  --accent-color-rgb: 130 201 191;
   --accent-color-hover: #92d0c6;
   --accent-color-active: #6eb5ab;
   --accent-color-light: #a0d6ce;
   --accent-color-visited: #6eb5ab;
-  --accent-color-opacity1: rgb(130 201 191 / 4%);
-  --accent-color-opacity2: rgb(130 201 191 / 12%);
-  --accent-color-opacity3: rgb(130 201 191 / 16%);
-  --accent-color-opacity4: rgb(130 201 191 / 24%);
 }
 
 .secCatppuccinFrappeSky {
-  --accent-color: #9ad2dc;
+  --accent-color-rgb: 154 210 220;
   --accent-color-hover: #a9d7e0;
   --accent-color-active: #7dbecb;
   --accent-color-light: #b4e6f0;
   --accent-color-visited: #6aaed0;
-  --accent-color-opacity1: rgb(154 210 220 / 4%);
-  --accent-color-opacity2: rgb(154 210 220 / 12%);
-  --accent-color-opacity3: rgb(154 210 220 / 16%);
-  --accent-color-opacity4: rgb(154 210 220 / 24%);
 }
 
 .secCatppuccinFrappeSapphire {
-  --accent-color: #86c2dd;
+  --accent-color-rgb: 134 194 221;
   --accent-color-hover: #96c9e1;
   --accent-color-active: #6aaed0;
   --accent-color-light: #a0d4e6;
   --accent-color-visited: #6aaed0;
-  --accent-color-opacity1: rgb(134 194 221 / 4%);
-  --accent-color-opacity2: rgb(134 194 221 / 12%);
-  --accent-color-opacity3: rgb(134 194 221 / 16%);
-  --accent-color-opacity4: rgb(134 194 221 / 24%);
 }
 
 .secCatppuccinFrappeBlue {
-  --accent-color: #8dabef;
+  --accent-color-rgb: 141 171 239;
   --accent-color-hover: #9dbbef;
   --accent-color-active: #6b8fcf;
   --accent-color-light: #a7c1f4;
   --accent-color-visited: #6b8fcf;
-  --accent-color-opacity1: rgb(141 171 239 / 4%);
-  --accent-color-opacity2: rgb(141 171 239 / 12%);
-  --accent-color-opacity3: rgb(141 171 239 / 16%);
-  --accent-color-opacity4: rgb(141 171 239 / 24%);
 }
 
 .secCatppuccinFrappeLavender {
-  --accent-color: #bbbcf2;
+  --accent-color-rgb: 187 188 242;
   --accent-color-hover: #c4c5f2;
   --accent-color-active: #a8a9f2;
   --accent-color-light: #c7c8f2;
   --accent-color-visited: #9a9bf2;
-  --accent-color-opacity1: rgb(187 188 242 / 4%);
-  --accent-color-opacity2: rgb(187 188 242 / 12%);
-  --accent-color-opacity3: rgb(187 188 242 / 16%);
-  --accent-color-opacity4: rgb(187 188 242 / 24%);
 }
 
 /*************** DESTRUCTIVE THEME COLOR OVERRIDES ***************/