Merge pull request #4 from xaviervalarino/easy-build

Easy build: make modifying the CSS centralized

README.md

@@ -38,11 +38,11 @@
 
 1. Open Vimum addon's preferences
 2. Activate advanced options
-3. Copy the content of selected file from `src` folder into the custom CSS field:
+3. Copy the content of selected file from `dist` folder into the custom CSS field:
-    - 🌻 catppuccin-vimium-latte.css
+    - 🌻 [catppuccin-vimium-latte.css](./dist/catppuccin-vimium-latte.css)
-    - 🪴 catppuccin-vimium-frappe.css
+    - 🪴 [catppuccin-vimium-frappe.css](./dist/catppuccin-vimium-frappe.css)
-    - 🌺 catppuccin-vimium-macchiato.css
+    - 🌺 [catppuccin-vimium-macchiato.css](./dist/catppuccin-vimium-macchiato.css)
-    - 🌿 catppuccin-vimium-mocha.css
+    - 🌿 [catppuccin-vimium-mocha.css](./dist/catppuccin-vimium-mocha.css)
 4. Save changes and reload pages
 
 ## 💝 Thanks to

build.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+
+src='./src/'
+dist='./dist/'
+
+if [ ! -d "$dist" ]; then
+  mkdir -v $dist
+fi
+
+for f in "$src"/palettes/*.css; do
+  filename=$(basename "$f")
+  palette=${filename%.css}
+  basefile=catppuccin-vimium-base.css
+  filename=${basefile/base/$palette}
+  echo "Creating $dist$filename"
+  cat  "$f" "$src$basefile" > "$dist$filename"
+done

dist/catppuccin-vimium-frappe.css

@@ -1,13 +1,27 @@
+/* Frappe palette */
+
+:root {
+  --rosewater: #f2d5cf;
+  --peach: #ef9f76;
+  --blue: #8caaee;
+  --lavender: #babbf1;
+  --green: #a6d189;
+  --text: #c6d0f5;
+  --surface2: #626880;
+  --surface0: #414559;
+  --base: #303446;
+  --mantle: #292c3c;
+}
 #vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
   padding: 3px 4px;
-  background: #F5A97F; /* peach */
+  background: var(--peach);
   border: 1;
-  border-color: #1E2030; /* 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: #1E2030; /* mantle */
+  color: var(--mantle);
   text-shadow: none;
 }
 
@@ -16,12 +30,12 @@
 }
 
 #vimiumHintMarkerContainer div > .matchingCharacter ~ span {
-  color: #5B6078; /* surface2 */
+  color: var(--surface2);
 }
 
 #vomnibar {
-  background: #24273A; /* base */
+  background: var(--base);
-  border: 2px solid #B7BDF8; /* lavender */
+  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 +53,8 @@
 }
 
 #vomnibar input {
-  color: #CAD3F5; /* text */
+  color: var(--text);
-  background: #24273A; /* base */
+  background: var(--base);
   border: none;
   height: unset;
   padding: 16px 30px;
@@ -49,19 +63,19 @@
 #vomnibar .vomnibarSearchArea {
   border: none;
   padding: unset;
-  background: #24273A; /* base */
+  background: var(--base)
 }
 
 #vomnibar ul {
   padding: 0;
   margin: 0;
-  background: #24273A; /* base */
+  background: var(--base);
-  border-top: 1px solid #363A4F; /* surface0 */
+  border-top: 1px solid var(--surface0);
 }
 
 #vomnibar li {
   padding: 10px;
-  border-bottom: 1px solid #363A4F; /* surface0 */
+  border-bottom: 1px solid var(--surface0)
 }
 
 #vomnibar li .vomnibarTopHalf,
@@ -70,48 +84,48 @@
 }
 
 #vomnibar li .vomnibarSource {
-  color: #F5A97F; /* peach */
+  color: var(--peach);
 }
 
 #vomnibar li em,
 #vomnibar li .vomnibarTitle {
-  color: #8AADF4; /* blue */
+  color: var(--blue);
   font-weight: bold;
 }
 
 #vomnibar li .vomnibarUrl {
-  color: #F4DBD6; /* rosewater */
+  color: var(--rosewater);
 }
 
 #vomnibar li .vomnibarMatch {
-  color: #A6DA95; /* green */
+  color: var(--green);
   font-weight: bold;
 }
 
 #vomnibar li .vomnibarTitle .vomnibarMatch {
-  color: #8AADF4; /* blue */
+  color: var(--blue);
 }
 
 #vomnibar li.vomnibarSelected {
-  background-color: #363A4F; /* surface0 */
+  background-color: var(--surface0);
 }
 
 div.vimiumHUD {
-  background: #24273A; /* 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: #CAD3F5; /* text */
+  color: var(--text)
 }
 
 div.vimiumHUD .hud-find {
-  background-color: #24273A; /* base */
+  background-color: var(--base);
   border: none;
 }
 
 div.vimiumHUD .vimiumHUDSearchArea {
-  background-color: #24273A; /* base */
+  background-color: var(--base);
 }

dist/catppuccin-vimium-latte.css

@@ -1,13 +1,27 @@
+/* Latte palette */
+
+:root {
+  --rosewater: #dc8a78;
+  --peach: #fe640b;
+  --green: #40a02b;
+  --blue: #1e66f5;
+  --lavender: #7287fd;
+  --text: #4c4f69;
+  --surface2: #acb0be;
+  --surface0: #ccd0da;
+  --base: #eff1f5;
+  --mantle: #e6e9ef;
+}
 #vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
   padding: 3px 4px;
-  background: #FE640B; /* peach */
+  background: var(--peach);
   border: 1;
-  border-color: #E6E9EF; /* 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: #E6E9EF; /* mantle */
+  color: var(--mantle);
   text-shadow: none;
 }
 
@@ -16,12 +30,12 @@
 }
 
 #vimiumHintMarkerContainer div > .matchingCharacter ~ span {
-  color: #ACB0BE; /* surface2 */
+  color: var(--surface2);
 }
 
 #vomnibar {
-  background: #EFF1F5; /* base */
+  background: var(--base);
-  border: 2px solid #7287FD; /* lavender */
+  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 +53,8 @@
 }
 
 #vomnibar input {
-  color: #4C4F69; /* text */
+  color: var(--text);
-  background: #EFF1F5; /* base */
+  background: var(--base);
   border: none;
   height: unset;
   padding: 16px 30px;
@@ -49,19 +63,19 @@
 #vomnibar .vomnibarSearchArea {
   border: none;
   padding: unset;
-  background: #EFF1F5; /* base */
+  background: var(--base)
 }
 
 #vomnibar ul {
   padding: 0;
   margin: 0;
-  background: #EFF1F5; /* base */
+  background: var(--base);
-  border-top: 1px solid #CCD0DA; /* surface0 */
+  border-top: 1px solid var(--surface0);
 }
 
 #vomnibar li {
   padding: 10px;
-  border-bottom: 1px solid #CCD0DA; /* surface0 */
+  border-bottom: 1px solid var(--surface0)
 }
 
 #vomnibar li .vomnibarTopHalf,
@@ -70,48 +84,48 @@
 }
 
 #vomnibar li .vomnibarSource {
-  color: #FE640B; /* peach */
+  color: var(--peach);
 }
 
 #vomnibar li em,
 #vomnibar li .vomnibarTitle {
-  color: #1E66F5; /* blue */
+  color: var(--blue);
   font-weight: bold;
 }
 
 #vomnibar li .vomnibarUrl {
-  color: #DC8A78; /* rosewater */
+  color: var(--rosewater);
 }
 
 #vomnibar li .vomnibarMatch {
-  color: #40A02B; /* green */
+  color: var(--green);
   font-weight: bold;
 }
 
 #vomnibar li .vomnibarTitle .vomnibarMatch {
-  color: #1E66F5; /* blue */
+  color: var(--blue);
 }
 
 #vomnibar li.vomnibarSelected {
-  background-color: #CCD0DA; /* surface0 */
+  background-color: var(--surface0);
 }
 
 div.vimiumHUD {
-  background: #EFF1F5; /* 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: #4C4F69; /* text */
+  color: var(--text)
 }
 
 div.vimiumHUD .hud-find {
-  background-color: #EFF1F5; /* base */
+  background-color: var(--base);
   border: none;
 }
 
 div.vimiumHUD .vimiumHUDSearchArea {
-  background-color: #EFF1F5; /* base */
+  background-color: var(--base);
 }

dist/catppuccin-vimium-macchiato.css

@@ -0,0 +1,131 @@
+/* Macchiato palette */
+
+:root {
+  --rosewater: #f4dbd6;
+  --peach: #f5a97f;
+  --green: #a6da95;
+  --blue: #8aadf4;
+  --lavender: #b7bdf8;
+  --text: #cad3f5;
+  --surface2: #5b6078;
+  --surface0: #363a4f;
+  --base: #24273a;
+  --mantle: #1e2030;
+}
+#vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
+  padding: 3px 4px;
+  background: var(--peach);
+  border: 1;
+  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: var(--mantle);
+  text-shadow: none;
+}
+
+#vimiumHintMarkerContainer div > .matchingCharacter {
+  opacity: 1.0;
+}
+
+#vimiumHintMarkerContainer div > .matchingCharacter ~ span {
+  color: var(--surface2);
+}
+
+#vomnibar {
+  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;
+}
+
+@keyframes show {
+  0% {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+#vomnibar input {
+  color: var(--text);
+  background: var(--base);
+  border: none;
+  height: unset;
+  padding: 16px 30px;
+}
+
+#vomnibar .vomnibarSearchArea {
+  border: none;
+  padding: unset;
+  background: var(--base)
+}
+
+#vomnibar ul {
+  padding: 0;
+  margin: 0;
+  background: var(--base);
+  border-top: 1px solid var(--surface0);
+}
+
+#vomnibar li {
+  padding: 10px;
+  border-bottom: 1px solid var(--surface0)
+}
+
+#vomnibar li .vomnibarTopHalf,
+#vomnibar li .vomnibarBottomHalf {
+  padding: 3px 0;
+}
+
+#vomnibar li .vomnibarSource {
+  color: var(--peach);
+}
+
+#vomnibar li em,
+#vomnibar li .vomnibarTitle {
+  color: var(--blue);
+  font-weight: bold;
+}
+
+#vomnibar li .vomnibarUrl {
+  color: var(--rosewater);
+}
+
+#vomnibar li .vomnibarMatch {
+  color: var(--green);
+  font-weight: bold;
+}
+
+#vomnibar li .vomnibarTitle .vomnibarMatch {
+  color: var(--blue);
+}
+
+#vomnibar li.vomnibarSelected {
+  background-color: var(--surface0);
+}
+
+div.vimiumHUD {
+  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: var(--text)
+}
+
+div.vimiumHUD .hud-find {
+  background-color: var(--base);
+  border: none;
+}
+
+div.vimiumHUD .vimiumHUDSearchArea {
+  background-color: var(--base);
+}

dist/catppuccin-vimium-mocha.css

@@ -1,13 +1,27 @@
+/* Mocha palette */
+
+:root {
+  --rosewater: #f5e0dc;
+  --peach: #fab387;
+  --green: #a6e3a1;
+  --blue: #89b4fa;
+  --lavender: #b4befe;
+  --text: #cdd6f4;
+  --surface2: #585b70;
+  --surface0: #313244;
+  --base: #1e1e2e;
+  --mantle: #181825;
+}
 #vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
   padding: 3px 4px;
-  background: #FAB387; /* peach */
+  background: var(--peach);
   border: 1;
-  border-color: #181825; /* 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: #181825; /* mantle */
+  color: var(--mantle);
   text-shadow: none;
 }
 
@@ -16,12 +30,12 @@
 }
 
 #vimiumHintMarkerContainer div > .matchingCharacter ~ span {
-  color: #585B70; /* surface2 */
+  color: var(--surface2);
 }
 
 #vomnibar {
-  background: #1E1E2E; /* base */
+  background: var(--base);
-  border: 2px solid #B4BEFE; /* lavender */
+  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 +53,8 @@
 }
 
 #vomnibar input {
-  color: #CDD6F4; /* text */
+  color: var(--text);
-  background: #1E1E2E; /* base */
+  background: var(--base);
   border: none;
   height: unset;
   padding: 16px 30px;
@@ -49,19 +63,19 @@
 #vomnibar .vomnibarSearchArea {
   border: none;
   padding: unset;
-  background: #1E1E2E; /* base */
+  background: var(--base)
 }
 
 #vomnibar ul {
   padding: 0;
   margin: 0;
-  background: #1E1E2E; /* base */
+  background: var(--base);
-  border-top: 1px solid #313244; /* surface0 */
+  border-top: 1px solid var(--surface0);
 }
 
 #vomnibar li {
   padding: 10px;
-  border-bottom: 1px solid #313244; /* surface0 */
+  border-bottom: 1px solid var(--surface0)
 }
 
 #vomnibar li .vomnibarTopHalf,
@@ -70,48 +84,48 @@
 }
 
 #vomnibar li .vomnibarSource {
-  color: #FAB387; /* peach */
+  color: var(--peach);
 }
 
 #vomnibar li em,
 #vomnibar li .vomnibarTitle {
-  color: #89B4FA; /* blue */
+  color: var(--blue);
   font-weight: bold;
 }
 
 #vomnibar li .vomnibarUrl {
-  color: #F5E0DC; /* rosewater */
+  color: var(--rosewater);
 }
 
 #vomnibar li .vomnibarMatch {
-  color: #A6E3A1; /* green */
+  color: var(--green);
   font-weight: bold;
 }
 
 #vomnibar li .vomnibarTitle .vomnibarMatch {
-  color: #89B4FA; /* blue */
+  color: var(--blue);
 }
 
 #vomnibar li.vomnibarSelected {
-  background-color: #313244; /* surface0 */
+  background-color: var(--surface0);
 }
 
 div.vimiumHUD {
-  background: #1E1E2E; /* 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: #CDD6F4; /* text */
+  color: var(--text)
 }
 
 div.vimiumHUD .hud-find {
-  background-color: #1E1E2E; /* base */
+  background-color: var(--base);
   border: none;
 }
 
 div.vimiumHUD .vimiumHUDSearchArea {
-  background-color: #1E1E2E; /* base */
+  background-color: var(--base);
 }

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 */
+  background: var(--base);
-  border: 2px solid #BABBF1; /* lavender */
+  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 */
+  color: var(--text);
-  background: #303446; /* base */
+  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 */
+  background: var(--base);
-  border-top: 1px solid #414559; /* surface0 */
+  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);
 }

src/palettes/frappe.css

@@ -0,0 +1,14 @@
+/* Frappe palette */
+
+:root {
+  --rosewater: #f2d5cf;
+  --peach: #ef9f76;
+  --blue: #8caaee;
+  --lavender: #babbf1;
+  --green: #a6d189;
+  --text: #c6d0f5;
+  --surface2: #626880;
+  --surface0: #414559;
+  --base: #303446;
+  --mantle: #292c3c;
+}

src/palettes/latte.css

@@ -0,0 +1,14 @@
+/* Latte palette */
+
+:root {
+  --rosewater: #dc8a78;
+  --peach: #fe640b;
+  --green: #40a02b;
+  --blue: #1e66f5;
+  --lavender: #7287fd;
+  --text: #4c4f69;
+  --surface2: #acb0be;
+  --surface0: #ccd0da;
+  --base: #eff1f5;
+  --mantle: #e6e9ef;
+}

src/palettes/macchiato.css

@@ -0,0 +1,14 @@
+/* Macchiato palette */
+
+:root {
+  --rosewater: #f4dbd6;
+  --peach: #f5a97f;
+  --green: #a6da95;
+  --blue: #8aadf4;
+  --lavender: #b7bdf8;
+  --text: #cad3f5;
+  --surface2: #5b6078;
+  --surface0: #363a4f;
+  --base: #24273a;
+  --mantle: #1e2030;
+}

src/palettes/mocha.css

@@ -0,0 +1,14 @@
+/* Mocha palette */
+
+:root {
+  --rosewater: #f5e0dc;
+  --peach: #fab387;
+  --green: #a6e3a1;
+  --blue: #89b4fa;
+  --lavender: #b4befe;
+  --text: #cdd6f4;
+  --surface2: #585b70;
+  --surface0: #313244;
+  --base: #1e1e2e;
+  --mantle: #181825;
+}