From 9fc03cb21b1afdf0901369fd9baf6d9939fb9cc5 Mon Sep 17 00:00:00 2001
From: Xavier Valarino <xvalarino@gmail.com>
Date: Mon, 19 Dec 2022 22:07:45 -0800
Subject: [PATCH] Create a single base CSS file

---
 ...-frappe.css => catppuccin-vimium-base.css} |  44 +++----
 src/catppuccin-vimium-latte.css               | 117 ------------------
 src/catppuccin-vimium-macchiato.css           | 117 ------------------
 src/catppuccin-vimium-mocha.css               | 117 ------------------
 4 files changed, 22 insertions(+), 373 deletions(-)
 rename src/{catppuccin-vimium-frappe.css => catppuccin-vimium-base.css} (66%)
 delete mode 100644 src/catppuccin-vimium-latte.css
 delete mode 100644 src/catppuccin-vimium-macchiato.css
 delete mode 100644 src/catppuccin-vimium-mocha.css

diff --git a/src/catppuccin-vimium-frappe.css b/src/catppuccin-vimium-base.css
similarity index 66%
rename from src/catppuccin-vimium-frappe.css
rename to src/catppuccin-vimium-base.css
index 2f0e5ff..eea0b11 100644
--- a/src/catppuccin-vimium-frappe.css
+++ b/src/catppuccin-vimium-base.css
@@ -1,13 +1,13 @@
 #vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
   padding: 3px 4px;
-  background: #EF9F76; /* peach */
+  background: var(--peach);
   border: 1;
-  border-color: #292C3C; /* mantle */
+  border-color: var(--mantle);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 }
 
 #vimiumHintMarkerContainer div span {
-  color: #292C3C; /* mantle */
+  color: var(--mantle);
   text-shadow: none;
 }
 
@@ -16,12 +16,12 @@
 }
 
 #vimiumHintMarkerContainer div > .matchingCharacter ~ span {
-  color: #626880; /* surface2 */
+  color: var(--surface2);
 }
 
 #vomnibar {
-  background: #303446; /* base */
-  border: 2px solid #BABBF1; /* lavender */
+  background: var(--base);
+  border: 2px solid var(--lavender);
   animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
   max-height: calc(100vh - 70px);
   overflow: hidden;
@@ -39,8 +39,8 @@
 }
 
 #vomnibar input {
-  color: #C6D0F5; /* text */
-  background: #303446; /* base */
+  color: var(--text);
+  background: var(--base);
   border: none;
   height: unset;
   padding: 16px 30px;
@@ -49,19 +49,19 @@
 #vomnibar .vomnibarSearchArea {
   border: none;
   padding: unset;
-  background: #303446; /* base */
+  background: var(--base)
 }
 
 #vomnibar ul {
   padding: 0;
   margin: 0;
-  background: #303446; /* base */
-  border-top: 1px solid #414559; /* surface0 */
+  background: var(--base);
+  border-top: 1px solid var(--surface0);
 }
 
 #vomnibar li {
   padding: 10px;
-  border-bottom: 1px solid #414559; /* surface0 */
+  border-bottom: 1px solid var(--surface0)
 }
 
 #vomnibar li .vomnibarTopHalf,
@@ -70,48 +70,48 @@
 }
 
 #vomnibar li .vomnibarSource {
-  color: #EF9F76; /* peach */
+  color: var(--peach);
 }
 
 #vomnibar li em,
 #vomnibar li .vomnibarTitle {
-  color: #8CAAEE; /* blue */
+  color: var(--blue);
   font-weight: bold;
 }
 
 #vomnibar li .vomnibarUrl {
-  color: #F2D5CF; /* rosewater */
+  color: var(--rosewater);
 }
 
 #vomnibar li .vomnibarMatch {
-  color: #A6D189; /* green */
+  color: var(--green);
   font-weight: bold;
 }
 
 #vomnibar li .vomnibarTitle .vomnibarMatch {
-  color: #8CAAEE; /* blue */
+  color: var(--blue);
 }
 
 #vomnibar li.vomnibarSelected {
-  background-color: #414559; /* surface0 */
+  background-color: var(--surface0);
 }
 
 div.vimiumHUD {
-  background: #303446; /* base */
+  background: var(--base);
   border: none;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 }
 
 div.vimiumHUD span#hud-find-input,
 div.vimiumHUD .vimiumHUDSearchAreaInner {
-  color: #C6D0F5; /* text */
+  color: var(--text)
 }
 
 div.vimiumHUD .hud-find {
-  background-color: #303446; /* base */
+  background-color: var(--base);
   border: none;
 }
 
 div.vimiumHUD .vimiumHUDSearchArea {
-  background-color: #303446; /* base */
+  background-color: var(--base);
 }
diff --git a/src/catppuccin-vimium-latte.css b/src/catppuccin-vimium-latte.css
deleted file mode 100644
index fc0c6f3..0000000
--- a/src/catppuccin-vimium-latte.css
+++ /dev/null
@@ -1,117 +0,0 @@
-#vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
-  padding: 3px 4px;
-  background: #FE640B; /* peach */
-  border: 1;
-  border-color: #E6E9EF; /* mantle */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-#vimiumHintMarkerContainer div span {
-  color: #E6E9EF; /* mantle */
-  text-shadow: none;
-}
-
-#vimiumHintMarkerContainer div > .matchingCharacter {
-  opacity: 1.0;
-}
-
-#vimiumHintMarkerContainer div > .matchingCharacter ~ span {
-  color: #ACB0BE; /* surface2 */
-}
-
-#vomnibar {
-  background: #EFF1F5; /* base */
-  border: 2px solid #7287FD; /* lavender */
-  animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
-  max-height: calc(100vh - 70px);
-  overflow: hidden;
-}
-
-@keyframes show {
-  0% {
-    transform: translateY(50px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-#vomnibar input {
-  color: #4C4F69; /* text */
-  background: #EFF1F5; /* base */
-  border: none;
-  height: unset;
-  padding: 16px 30px;
-}
-
-#vomnibar .vomnibarSearchArea {
-  border: none;
-  padding: unset;
-  background: #EFF1F5; /* base */
-}
-
-#vomnibar ul {
-  padding: 0;
-  margin: 0;
-  background: #EFF1F5; /* base */
-  border-top: 1px solid #CCD0DA; /* surface0 */
-}
-
-#vomnibar li {
-  padding: 10px;
-  border-bottom: 1px solid #CCD0DA; /* surface0 */
-}
-
-#vomnibar li .vomnibarTopHalf,
-#vomnibar li .vomnibarBottomHalf {
-  padding: 3px 0;
-}
-
-#vomnibar li .vomnibarSource {
-  color: #FE640B; /* peach */
-}
-
-#vomnibar li em,
-#vomnibar li .vomnibarTitle {
-  color: #1E66F5; /* blue */
-  font-weight: bold;
-}
-
-#vomnibar li .vomnibarUrl {
-  color: #DC8A78; /* rosewater */
-}
-
-#vomnibar li .vomnibarMatch {
-  color: #40A02B; /* green */
-  font-weight: bold;
-}
-
-#vomnibar li .vomnibarTitle .vomnibarMatch {
-  color: #1E66F5; /* blue */
-}
-
-#vomnibar li.vomnibarSelected {
-  background-color: #CCD0DA; /* surface0 */
-}
-
-div.vimiumHUD {
-  background: #EFF1F5; /* base */
-  border: none;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-div.vimiumHUD span#hud-find-input,
-div.vimiumHUD .vimiumHUDSearchAreaInner {
-  color: #4C4F69; /* text */
-}
-
-div.vimiumHUD .hud-find {
-  background-color: #EFF1F5; /* base */
-  border: none;
-}
-
-div.vimiumHUD .vimiumHUDSearchArea {
-  background-color: #EFF1F5; /* base */
-}
diff --git a/src/catppuccin-vimium-macchiato.css b/src/catppuccin-vimium-macchiato.css
deleted file mode 100644
index b524178..0000000
--- a/src/catppuccin-vimium-macchiato.css
+++ /dev/null
@@ -1,117 +0,0 @@
-#vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
-  padding: 3px 4px;
-  background: #F5A97F; /* peach */
-  border: 1;
-  border-color: #1E2030; /* mantle */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-#vimiumHintMarkerContainer div span {
-  color: #1E2030; /* mantle */
-  text-shadow: none;
-}
-
-#vimiumHintMarkerContainer div > .matchingCharacter {
-  opacity: 1.0;
-}
-
-#vimiumHintMarkerContainer div > .matchingCharacter ~ span {
-  color: #5B6078; /* surface2 */
-}
-
-#vomnibar {
-  background: #24273A; /* base */
-  border: 2px solid #B7BDF8; /* lavender */
-  animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
-  max-height: calc(100vh - 70px);
-  overflow: hidden;
-}
-
-@keyframes show {
-  0% {
-    transform: translateY(50px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-#vomnibar input {
-  color: #CAD3F5; /* text */
-  background: #24273A; /* base */
-  border: none;
-  height: unset;
-  padding: 16px 30px;
-}
-
-#vomnibar .vomnibarSearchArea {
-  border: none;
-  padding: unset;
-  background: #24273A; /* base */
-}
-
-#vomnibar ul {
-  padding: 0;
-  margin: 0;
-  background: #24273A; /* base */
-  border-top: 1px solid #363A4F; /* surface0 */
-}
-
-#vomnibar li {
-  padding: 10px;
-  border-bottom: 1px solid #363A4F; /* surface0 */
-}
-
-#vomnibar li .vomnibarTopHalf,
-#vomnibar li .vomnibarBottomHalf {
-  padding: 3px 0;
-}
-
-#vomnibar li .vomnibarSource {
-  color: #F5A97F; /* peach */
-}
-
-#vomnibar li em,
-#vomnibar li .vomnibarTitle {
-  color: #8AADF4; /* blue */
-  font-weight: bold;
-}
-
-#vomnibar li .vomnibarUrl {
-  color: #F4DBD6; /* rosewater */
-}
-
-#vomnibar li .vomnibarMatch {
-  color: #A6DA95; /* green */
-  font-weight: bold;
-}
-
-#vomnibar li .vomnibarTitle .vomnibarMatch {
-  color: #8AADF4; /* blue */
-}
-
-#vomnibar li.vomnibarSelected {
-  background-color: #363A4F; /* surface0 */
-}
-
-div.vimiumHUD {
-  background: #24273A; /* base */
-  border: none;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-div.vimiumHUD span#hud-find-input,
-div.vimiumHUD .vimiumHUDSearchAreaInner {
-  color: #CAD3F5; /* text */
-}
-
-div.vimiumHUD .hud-find {
-  background-color: #24273A; /* base */
-  border: none;
-}
-
-div.vimiumHUD .vimiumHUDSearchArea {
-  background-color: #24273A; /* base */
-}
diff --git a/src/catppuccin-vimium-mocha.css b/src/catppuccin-vimium-mocha.css
deleted file mode 100644
index 47a87aa..0000000
--- a/src/catppuccin-vimium-mocha.css
+++ /dev/null
@@ -1,117 +0,0 @@
-#vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
-  padding: 3px 4px;
-  background: #FAB387; /* peach */
-  border: 1;
-  border-color: #181825; /* mantle */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-#vimiumHintMarkerContainer div span {
-  color: #181825; /* mantle */
-  text-shadow: none;
-}
-
-#vimiumHintMarkerContainer div > .matchingCharacter {
-  opacity: 1.0;
-}
-
-#vimiumHintMarkerContainer div > .matchingCharacter ~ span {
-  color: #585B70; /* surface2 */
-}
-
-#vomnibar {
-  background: #1E1E2E; /* base */
-  border: 2px solid #B4BEFE; /* lavender */
-  animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
-  max-height: calc(100vh - 70px);
-  overflow: hidden;
-}
-
-@keyframes show {
-  0% {
-    transform: translateY(50px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-#vomnibar input {
-  color: #CDD6F4; /* text */
-  background: #1E1E2E; /* base */
-  border: none;
-  height: unset;
-  padding: 16px 30px;
-}
-
-#vomnibar .vomnibarSearchArea {
-  border: none;
-  padding: unset;
-  background: #1E1E2E; /* base */
-}
-
-#vomnibar ul {
-  padding: 0;
-  margin: 0;
-  background: #1E1E2E; /* base */
-  border-top: 1px solid #313244; /* surface0 */
-}
-
-#vomnibar li {
-  padding: 10px;
-  border-bottom: 1px solid #313244; /* surface0 */
-}
-
-#vomnibar li .vomnibarTopHalf,
-#vomnibar li .vomnibarBottomHalf {
-  padding: 3px 0;
-}
-
-#vomnibar li .vomnibarSource {
-  color: #FAB387; /* peach */
-}
-
-#vomnibar li em,
-#vomnibar li .vomnibarTitle {
-  color: #89B4FA; /* blue */
-  font-weight: bold;
-}
-
-#vomnibar li .vomnibarUrl {
-  color: #F5E0DC; /* rosewater */
-}
-
-#vomnibar li .vomnibarMatch {
-  color: #A6E3A1; /* green */
-  font-weight: bold;
-}
-
-#vomnibar li .vomnibarTitle .vomnibarMatch {
-  color: #89B4FA; /* blue */
-}
-
-#vomnibar li.vomnibarSelected {
-  background-color: #313244; /* surface0 */
-}
-
-div.vimiumHUD {
-  background: #1E1E2E; /* base */
-  border: none;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-div.vimiumHUD span#hud-find-input,
-div.vimiumHUD .vimiumHUDSearchAreaInner {
-  color: #CDD6F4; /* text */
-}
-
-div.vimiumHUD .hud-find {
-  background-color: #1E1E2E; /* base */
-  border: none;
-}
-
-div.vimiumHUD .vimiumHUDSearchArea {
-  background-color: #1E1E2E; /* base */
-}