Attempt to implement Rosé Pine, but fail horribly

dist/colors-rosepine.module.css

@@ -0,0 +1,44 @@
+/*
+ * Bluelib Royal Blue Colors
+ * by <me@steffo.eu>
+ */
+@media screen {
+  :where(.bluelib) {
+    --burl-background-full: url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/.jpg);
+    --burl-background-3840: url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/3840.jpg);
+    --burl-background-1920: url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/1920.jpg);
+    --burl-background-1366: url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/1366.jpg);
+    --burl-background-640: url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/640.jpg);
+    --burl-background-360: url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/360.jpg);
+    --bhsl-background-hue: 249deg;
+    --bhsl-background-saturation: 22%;
+    --bhsl-background-lightness: 12%;
+    --bhsl-foreground-hue: 248deg;
+    --bhsl-foreground-saturation: 15%;
+    --bhsl-foreground-lightness: 61%;
+    --bhsl-primary-hue: 245deg;
+    --bhsl-primary-saturation: 50%;
+    --bhsl-primary-lightness: 91%;
+    --bhsl-red-hue: 343deg;
+    --bhsl-red-saturation: 76%;
+    --bhsl-red-lightness: 68%;
+    --bhsl-yellow-hue: 35deg;
+    --bhsl-yellow-saturation: 88%;
+    --bhsl-yellow-lightness: 72%;
+    --bhsl-cyan-hue: 189deg;
+    --bhsl-cyan-saturation: 43%;
+    --bhsl-cyan-lightness: 73%;
+    --bhsl-blue-hue: 197deg;
+    --bhsl-blue-saturation: 49%;
+    --bhsl-blue-lightness: 38%;
+    --bhsl-magenta-hue: 267deg;
+    --bhsl-magenta-saturation: 57%;
+    --bhsl-magenta-lightness: 78%;
+    --bhsl-inserted-hue: var(--bhsl-green-hue);
+    --bhsl-inserted-saturation: var(--bhsl-green-saturation);
+    --bhsl-inserted-lightness: var(--bhsl-green-lightness);
+    --bhsl-deleted-hue: var(--bhsl-red-hue);
+    --bhsl-deleted-saturation: var(--bhsl-red-saturation);
+    --bhsl-deleted-lightness: var(--bhsl-red-lightness);
+  }
+}

dist/colors-rosepine.module.less

@@ -0,0 +1,11 @@
+// Mixins
+@import (less) "../src/mixins/bg.less";
+@import (less) "../src/mixins/fonts.less";
+@import (less) "../src/mixins/hsl.less";
+
+// Selector
+@import (less) "../src/selectorsets/module.less";
+
+// Rule
+@import (less) "../src/rulesets/colors/colors-rosepine.less";
+

dist/colors-rosepine.module.min.css

@@ -0,0 +1 @@
+@media screen{:where(.bluelib){--burl-background-full:url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/.jpg);--burl-background-3840:url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/3840.jpg);--burl-background-1920:url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/1920.jpg);--burl-background-1366:url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/1366.jpg);--burl-background-640:url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/640.jpg);--burl-background-360:url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/360.jpg);--bhsl-background-hue:249deg;--bhsl-background-saturation:22%;--bhsl-background-lightness:12%;--bhsl-foreground-hue:248deg;--bhsl-foreground-saturation:15%;--bhsl-foreground-lightness:61%;--bhsl-primary-hue:245deg;--bhsl-primary-saturation:50%;--bhsl-primary-lightness:91%;--bhsl-red-hue:343deg;--bhsl-red-saturation:76%;--bhsl-red-lightness:68%;--bhsl-yellow-hue:35deg;--bhsl-yellow-saturation:88%;--bhsl-yellow-lightness:72%;--bhsl-cyan-hue:189deg;--bhsl-cyan-saturation:43%;--bhsl-cyan-lightness:73%;--bhsl-blue-hue:197deg;--bhsl-blue-saturation:49%;--bhsl-blue-lightness:38%;--bhsl-magenta-hue:267deg;--bhsl-magenta-saturation:57%;--bhsl-magenta-lightness:78%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}}

dist/colors-rosepine.root.css

@@ -0,0 +1,44 @@
+/*
+ * Bluelib Royal Blue Colors
+ * by <me@steffo.eu>
+ */
+@media screen {
+  :where(body) {
+    --burl-background-full: url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/.jpg);
+    --burl-background-3840: url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/3840.jpg);
+    --burl-background-1920: url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/1920.jpg);
+    --burl-background-1366: url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/1366.jpg);
+    --burl-background-640: url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/640.jpg);
+    --burl-background-360: url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/360.jpg);
+    --bhsl-background-hue: 249deg;
+    --bhsl-background-saturation: 22%;
+    --bhsl-background-lightness: 12%;
+    --bhsl-foreground-hue: 248deg;
+    --bhsl-foreground-saturation: 15%;
+    --bhsl-foreground-lightness: 61%;
+    --bhsl-primary-hue: 245deg;
+    --bhsl-primary-saturation: 50%;
+    --bhsl-primary-lightness: 91%;
+    --bhsl-red-hue: 343deg;
+    --bhsl-red-saturation: 76%;
+    --bhsl-red-lightness: 68%;
+    --bhsl-yellow-hue: 35deg;
+    --bhsl-yellow-saturation: 88%;
+    --bhsl-yellow-lightness: 72%;
+    --bhsl-cyan-hue: 189deg;
+    --bhsl-cyan-saturation: 43%;
+    --bhsl-cyan-lightness: 73%;
+    --bhsl-blue-hue: 197deg;
+    --bhsl-blue-saturation: 49%;
+    --bhsl-blue-lightness: 38%;
+    --bhsl-magenta-hue: 267deg;
+    --bhsl-magenta-saturation: 57%;
+    --bhsl-magenta-lightness: 78%;
+    --bhsl-inserted-hue: var(--bhsl-green-hue);
+    --bhsl-inserted-saturation: var(--bhsl-green-saturation);
+    --bhsl-inserted-lightness: var(--bhsl-green-lightness);
+    --bhsl-deleted-hue: var(--bhsl-red-hue);
+    --bhsl-deleted-saturation: var(--bhsl-red-saturation);
+    --bhsl-deleted-lightness: var(--bhsl-red-lightness);
+  }
+}

dist/colors-rosepine.root.less

@@ -0,0 +1,11 @@
+// Mixins
+@import (less) "../src/mixins/bg.less";
+@import (less) "../src/mixins/fonts.less";
+@import (less) "../src/mixins/hsl.less";
+
+// Selector
+@import (less) "../src/selectorsets/root.less";
+
+// Rule
+@import (less) "../src/rulesets/colors/colors-rosepine.less";
+

dist/colors-rosepine.root.min.css

@@ -0,0 +1 @@
+@media screen{:where(body){--burl-background-full:url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/.jpg);--burl-background-3840:url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/3840.jpg);--burl-background-1920:url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/1920.jpg);--burl-background-1366:url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/1366.jpg);--burl-background-640:url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/640.jpg);--burl-background-360:url(https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/360.jpg);--bhsl-background-hue:249deg;--bhsl-background-saturation:22%;--bhsl-background-lightness:12%;--bhsl-foreground-hue:248deg;--bhsl-foreground-saturation:15%;--bhsl-foreground-lightness:61%;--bhsl-primary-hue:245deg;--bhsl-primary-saturation:50%;--bhsl-primary-lightness:91%;--bhsl-red-hue:343deg;--bhsl-red-saturation:76%;--bhsl-red-lightness:68%;--bhsl-yellow-hue:35deg;--bhsl-yellow-saturation:88%;--bhsl-yellow-lightness:72%;--bhsl-cyan-hue:189deg;--bhsl-cyan-saturation:43%;--bhsl-cyan-lightness:73%;--bhsl-blue-hue:197deg;--bhsl-blue-saturation:49%;--bhsl-blue-lightness:38%;--bhsl-magenta-hue:267deg;--bhsl-magenta-saturation:57%;--bhsl-magenta-lightness:78%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}}

examples/index.html

@@ -18,6 +18,7 @@
 		<link rel="stylesheet/less" type="text/css" href="../dist/colors-amber.root.less">
 		<link rel="stylesheet/less" type="text/css" href="../dist/colors-pixeldawn.root.less">
 		<link rel="stylesheet/less" type="text/css" href="../dist/colors-purplestar.root.less">
+		<link rel="stylesheet/less" type="text/css" href="../dist/colors-rosepine.root.less">
 		<link rel="stylesheet/less" type="text/css" href="../dist/fonts-fira-ghpages.root.less">
 		<link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less">
 		<link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less">
@@ -264,6 +265,13 @@
 						<dd>
 							A ruleset with a purple-yellow palette for <a href="https://www.starshard.studio">Star Shard Studio</a>.
 						</dd>
+						<dt>
+							<label class="fade" title="colors-rosepine"><input type="radio" autocomplete="off" disabled name="ruleset-colors" value="rosepine"> Rosé Pine</label>
+						</dt>
+						<dd>
+							<mark>Experimental.</mark>
+							An attempt at mimicking <a href="https://rosepinetheme.com">Rosé Pine</a>.
+						</dd>
 					</dl>
 				</form>
 				<form class="panel box" id="panel-rulesets-fonts" name="rulesets-fonts">

examples/index.js

@@ -133,6 +133,7 @@ const rulesets = [
 	"colors-amber",
 	"colors-pixeldawn",
 	"colors-purplestar",
+	"colors-rosepine",
 	"fonts-fira-ghpages",
 ]
 

src/rulesets/colors/colors-rosepine.less

@@ -0,0 +1,39 @@
+/*
+ * Bluelib Rosé Pine Colors
+ * by <me@steffo.eu>
+ * inspired by https://rosepinetheme.com/
+ */
+
+@media screen {
+	@{bluelib} {
+		// .create-background-images("https://gh.steffo.eu/bluelib-images/fabrice-nerfin-puHQJZd3MDg-unsplash/", "jpg");
+
+		.create-hsl-group(background; 249deg; 22%; 12%);
+		.create-hsl-group(foreground; 245deg; 50%; 91%);
+		.create-hsl-group(primary; 245deg; 50%; 91%);
+		// .create-hsl-group(link; 180deg; 100%; 40%);
+
+		.map-hsl-group(mark-foreground; background);
+		.map-hsl-group(mark-background; foreground);
+		// .create-hsl-group(mark-foreground; 249deg; 15%; 28%);
+		// .create-hsl-group(mark-background; 32deg; 100%; 81%);
+
+		.map-hsl-group(todo-foreground; background);
+		.map-hsl-group(todo-background; yellow);
+		// .create-hsl-group(todo-foreground; 43deg; 100%; 65%);
+		// .create-hsl-group(todo-background; 204deg; 11%; 18%);
+
+		// .create-hsl-group(sample-input; 0deg; 100%; 0%);
+		// .create-hsl-group(sample-output; 0deg; 100%; 100%);
+
+		.create-hsl-group(red; 343deg; 76%; 68%);
+		.create-hsl-group(yellow; 35deg; 88%; 72%);
+		.create-hsl-group(green; 197deg; 49%; 38%);
+		.create-hsl-group(cyan; 2deg; 66%; 75%);
+		.create-hsl-group(blue; 189deg; 43%; 73%);
+		.create-hsl-group(magenta; 267deg; 57%; 78%);
+
+		.map-hsl-group(inserted; green);
+		.map-hsl-group(deleted; red);
+	}
+}