@rose-pine/build

README.md

@@ -29,3 +29,15 @@
 
 - [elkrien](https://github.com/elkrien)
 - [ysjn](https://github.com/ysjn/vimium-simply-dark)
+
+### rose-pine-build
+
+<!-- #rose-pine-build -->
+
+```sh
+npx @rose-pine/build@0.8.2 -t template.css -o dist/
+```
+
+_Generated by [@rose-pine/build@0.8.2](https://github.com/rose-pine/build)_
+
+<!-- /rose-pine-build -->

dist/rose-pine-dawn.css

@@ -0,0 +1,135 @@
+:root {
+  --rosewater: #b4637a;
+  --peach: #ea9d34;
+  --green: #56949f;
+  --blue: #286983;
+  --lavender: #907aa9;
+  --text: #575279;
+  --surface2: #f2e9e1;
+  --surface0: #f4ede8;
+  --base: #faf4ed;
+  --mantle: #fffaf3;
+}
+
+#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;
+}
+
+#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/rose-pine-moon.css

@@ -0,0 +1,135 @@
+:root {
+  --rosewater: #eb6f92;
+  --peach: #f6c177;
+  --green: #9ccfd8;
+  --blue: #3e8fb0;
+  --lavender: #c4a7e7;
+  --text: #e0def4;
+  --surface2: #393552;
+  --surface0: #2a283e;
+  --base: #232136;
+  --mantle: #2a273f;
+}
+
+#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;
+}
+
+#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/rose-pine.css

@@ -0,0 +1,135 @@
+:root {
+  --rosewater: #eb6f92;
+  --peach: #f6c177;
+  --green: #9ccfd8;
+  --blue: #31748f;
+  --lavender: #c4a7e7;
+  --text: #e0def4;
+  --surface2: #26233a;
+  --surface0: #21202e;
+  --base: #191724;
+  --mantle: #1f1d2e;
+}
+
+#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;
+}
+
+#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);
+}

template.css

@@ -1,14 +1,14 @@
 :root {
-  --rosewater: #f5e0dc;
+  --rosewater: $love;
-  --peach: #fab387;
+  --peach: $gold;
-  --green: #a6e3a1;
+  --green: $foam;
-  --blue: #89b4fa;
+  --blue: $pine;
-  --lavender: #b4befe;
+  --lavender: $iris;
-  --text: #cdd6f4;
+  --text: $text;
-  --surface2: #585b70;
+  --surface2: $overlay;
-  --surface0: #313244;
+  --surface0: $highlightLow;
-  --base: #1e1e2e;
+  --base: $base;
-  --mantle: #181825;
+  --mantle: $surface;
 }
 
 #vimiumHintMarkerContainer div.internalVimiumHintMarker,