From 7f40ce1418ab63f6d5ecb0e139f815b3c0b35a0f Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Sun, 11 Jun 2023 20:32:25 +0200 Subject: [PATCH] =?UTF-8?q?Attempt=20to=20implement=20Ros=C3=A9=20Pine,=20?= =?UTF-8?q?but=20fail=20horribly?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/colors-rosepine.module.css | 44 ++++++++++++++++++++++++ dist/colors-rosepine.module.less | 11 ++++++ dist/colors-rosepine.module.min.css | 1 + dist/colors-rosepine.root.css | 44 ++++++++++++++++++++++++ dist/colors-rosepine.root.less | 11 ++++++ dist/colors-rosepine.root.min.css | 1 + examples/index.html | 8 +++++ examples/index.js | 1 + src/rulesets/colors/colors-rosepine.less | 39 +++++++++++++++++++++ 9 files changed, 160 insertions(+) create mode 100644 dist/colors-rosepine.module.css create mode 100644 dist/colors-rosepine.module.less create mode 100644 dist/colors-rosepine.module.min.css create mode 100644 dist/colors-rosepine.root.css create mode 100644 dist/colors-rosepine.root.less create mode 100644 dist/colors-rosepine.root.min.css create mode 100644 src/rulesets/colors/colors-rosepine.less diff --git a/dist/colors-rosepine.module.css b/dist/colors-rosepine.module.css new file mode 100644 index 0000000..6a5e07b --- /dev/null +++ b/dist/colors-rosepine.module.css @@ -0,0 +1,44 @@ +/* + * Bluelib Royal Blue Colors + * by + */ +@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); + } +} diff --git a/dist/colors-rosepine.module.less b/dist/colors-rosepine.module.less new file mode 100644 index 0000000..aedd3f4 --- /dev/null +++ b/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"; + diff --git a/dist/colors-rosepine.module.min.css b/dist/colors-rosepine.module.min.css new file mode 100644 index 0000000..ec4a21a --- /dev/null +++ b/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)}} \ No newline at end of file diff --git a/dist/colors-rosepine.root.css b/dist/colors-rosepine.root.css new file mode 100644 index 0000000..9f0eaa1 --- /dev/null +++ b/dist/colors-rosepine.root.css @@ -0,0 +1,44 @@ +/* + * Bluelib Royal Blue Colors + * by + */ +@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); + } +} diff --git a/dist/colors-rosepine.root.less b/dist/colors-rosepine.root.less new file mode 100644 index 0000000..abcb9bf --- /dev/null +++ b/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"; + diff --git a/dist/colors-rosepine.root.min.css b/dist/colors-rosepine.root.min.css new file mode 100644 index 0000000..905a880 --- /dev/null +++ b/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)}} \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 2c15400..45e8c84 100644 --- a/examples/index.html +++ b/examples/index.html @@ -18,6 +18,7 @@ + @@ -264,6 +265,13 @@
A ruleset with a purple-yellow palette for Star Shard Studio.
+
+ +
+
+ Experimental. + An attempt at mimicking Rosé Pine. +
diff --git a/examples/index.js b/examples/index.js index d008807..61b287b 100644 --- a/examples/index.js +++ b/examples/index.js @@ -133,6 +133,7 @@ const rulesets = [ "colors-amber", "colors-pixeldawn", "colors-purplestar", + "colors-rosepine", "fonts-fira-ghpages", ] diff --git a/src/rulesets/colors/colors-rosepine.less b/src/rulesets/colors/colors-rosepine.less new file mode 100644 index 0000000..8bd2c86 --- /dev/null +++ b/src/rulesets/colors/colors-rosepine.less @@ -0,0 +1,39 @@ +/* + * Bluelib Rosé Pine Colors + * by + * 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); + } +}