v9 (#64)

* Work on improving examples
* Fix toggles
* Create the `unpkgTargets` and `yarnTargets` variables
* Allow interaction again
* Add media screen to color rules
* Configure default colors and fonts
* Configure panel min-width in the example page
* Remove the need for a examples index.css
* Place selectorsets in the same chapter as rulesets
* Rework images and build script
* Tweak todo rendering
* Do not bother styling range
* Create layouts and fix bold code
* Update text and readme

.idea/inspectionProfiles/Project_Default.xml

@@ -54,7 +54,7 @@
     <inspection_tool class="PyStringFormatInspection" enabled="true" level="ERROR" enabled_by_default="true" />
     <inspection_tool class="PyTrailingSemicolonInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
     <inspection_tool class="PyUnnecessaryBackslashInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
-    <inspection_tool class="RegExpAnonymousGroup" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="RegExpAnonymousGroup" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="RegExpEscapedMetaCharacter" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
     <inspection_tool class="RegExpOctalEscape" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
     <inspection_tool class="RegExpRedundantEscape" enabled="true" level="WEAK WARNING" enabled_by_default="true" />

README.md

@@ -1,9 +1,38 @@
-# Bluelib
+<center>
 
-Customizable, flexible and modular CSS library
+# ![](media/icon.png)<br>Bluelib
 
-\[ [**Demo + Documentation**](https://gh.steffo.eu/bluelib/examples/index.html) | [**npm**](https://www.npmjs.com/package/@steffo/bluelib) \]
+Customizable, flexible and modular CSS library.
 
-![Screenshot](media/screenshot-1.png)
+</center>
 
-_Background image is [**Nebula Galaxy Photo** by Fabrice Nerfin on Unsplash](https://unsplash.com/photos/puHQJZd3MDg)._
+## Links
+
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fbluelib.steffo.eu%2Fexamples%2Findex.html)](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fbluelib.steffo.eu%2Fexamples%2Findex.html)
+ 
+[![On NPM](https://img.shields.io/npm/v/@steffo/bluelib)](https://www.npmjs.com/package/@steffo/bluelib)
+ 
+[![Chat](https://img.shields.io/matrix/bluelib:ryg.one?server_fqdn=matrix.ryg.one)](https://matrix.to/#/#bluelib:ryg.one)
+
+## Screenshots
+
+![Screenshot of the Royal Blue color theme](media/screenshot-1.png)
+![Screenshot of the Pixel Dawn color theme](media/screenshot-2.png)
+
+## Credits
+
+### Royal Blue
+
+- Background image: [**Nebula galaxy photo** by Fabrice Nerfin on Unsplash](https://unsplash.com/photos/puHQJZd3MDg)
+
+### Gestione Amber
+
+- Background image: [**Brown coffee beans on brown wooden table photo** by Anastasiia Chepinska on Unsplash](https://unsplash.com/photos/lcfH0p6emhw)
+
+### Pixel Dawn
+
+- Background image: **Pixel Dawn** by [Viktya](https://viktya.github.io) (original)
+
+### Purple Star
+
+- Background image: [**Calm body of water near alp mountains during nighttime photo** by kazuend on Unsplash](https://unsplash.com/photos/2KXEb_8G5vo)

_build.sh

@@ -1,6 +1,12 @@
 #!/bin/bash
 # Maybe a Makefile would be better...
 
+origin=$(pwd)
+cd "dist"
+
+echo "Cleaning dist:" *
+rm -I *
+
 echo "Finding mixins..."
 mixins=$(ls ../src/mixins/**.less)
 echo "Mixins:"
@@ -54,3 +60,4 @@ lessc "$base.less" --clean-css "$base.min.css"
 done
 done
 
+cd "$origin"

dist/base.module.css

@@ -3,10 +3,145 @@
  * by <me@steffo.eu>
  */
 :where(.bluelib) {
+  --bhsl-background-hue: 0deg;
+  --bhsl-background-saturation: 0%;
+  --bhsl-background-lightness: 100%;
+  --bhsl-foreground-hue: 0deg;
+  --bhsl-foreground-saturation: 0%;
+  --bhsl-foreground-lightness: 15%;
+  --bhsl-primary-hue: 0deg;
+  --bhsl-primary-saturation: 0%;
+  --bhsl-primary-lightness: 0%;
+  --bhsl-link-hue: 210deg;
+  --bhsl-link-saturation: 100%;
+  --bhsl-link-lightness: 30%;
+  --bhsl-mark-foreground-hue: 0deg;
+  --bhsl-mark-foreground-saturation: 0%;
+  --bhsl-mark-foreground-lightness: 0%;
+  --bhsl-mark-background-hue: 60deg;
+  --bhsl-mark-background-saturation: 100%;
+  --bhsl-mark-background-lightness: 75%;
+  --bhsl-todo-foreground-hue: 204deg;
+  --bhsl-todo-foreground-saturation: 11%;
+  --bhsl-todo-foreground-lightness: 18%;
+  --bhsl-todo-background-hue: 43deg;
+  --bhsl-todo-background-saturation: 100%;
+  --bhsl-todo-background-lightness: 65%;
+  --bhsl-sample-input-hue: 0deg;
+  --bhsl-sample-input-saturation: 100%;
+  --bhsl-sample-input-lightness: 0%;
+  --bhsl-sample-output-hue: 0deg;
+  --bhsl-sample-output-saturation: 100%;
+  --bhsl-sample-output-lightness: 100%;
+  --bhsl-red-hue: 0deg;
+  --bhsl-red-saturation: 100%;
+  --bhsl-red-lightness: 30%;
+  --bhsl-yellow-hue: 60deg;
+  --bhsl-yellow-saturation: 100%;
+  --bhsl-yellow-lightness: 30%;
+  --bhsl-green-hue: 120deg;
+  --bhsl-green-saturation: 100%;
+  --bhsl-green-lightness: 30%;
+  --bhsl-cyan-hue: 180deg;
+  --bhsl-cyan-saturation: 100%;
+  --bhsl-cyan-lightness: 30%;
+  --bhsl-blue-hue: 240deg;
+  --bhsl-blue-saturation: 100%;
+  --bhsl-blue-lightness: 30%;
+  --bhsl-magenta-hue: 300deg;
+  --bhsl-magenta-saturation: 100%;
+  --bhsl-magenta-lightness: 30%;
+  --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);
+  --bfont-text-style: normal;
+  --bfont-text-variant: normal;
+  --bfont-text-weight: 400;
+  --bfont-text-stretch: normal;
+  --bfont-text-height: 1.3;
+  --bfont-text-family: sans-serif;
+  --bfont-header-style: normal;
+  --bfont-header-variant: normal;
+  --bfont-header-weight: 600;
+  --bfont-header-stretch: normal;
+  --bfont-header-height: 1.7;
+  --bfont-header-family: sans-serif;
+  --bfont-code-style: normal;
+  --bfont-code-variant: normal;
+  --bfont-code-weight: 400;
+  --bfont-code-stretch: normal;
+  --bfont-code-height: 1.3;
+  --bfont-code-family: monospace;
+  --bfont-boldcode-style: normal;
+  --bfont-boldcode-variant: normal;
+  --bfont-boldcode-weight: 700;
+  --bfont-boldcode-stretch: normal;
+  --bfont-boldcode-height: 1.3;
+  --bfont-boldcode-family: monospace;
+  --bfont-term-style: italic;
+  --bfont-term-variant: normal;
+  --bfont-term-weight: 700;
+  --bfont-term-stretch: normal;
+  --bfont-term-height: 1.3;
+  --bfont-term-family: sans-serif;
+  --bfont-summary-style: italic;
+  --bfont-summary-variant: normal;
+  --bfont-summary-weight: 400;
+  --bfont-summary-stretch: normal;
+  --bfont-summary-height: 1.3;
+  --bfont-summary-family: sans-serif;
+  --bfont-idiomatic-style: italic;
+  --bfont-idiomatic-variant: normal;
+  --bfont-idiomatic-weight: 400;
+  --bfont-idiomatic-stretch: normal;
+  --bfont-idiomatic-height: 1.3;
+  --bfont-idiomatic-family: sans-serif;
+  --bfont-emphasis-style: italic;
+  --bfont-emphasis-variant: normal;
+  --bfont-emphasis-weight: 400;
+  --bfont-emphasis-stretch: normal;
+  --bfont-emphasis-height: 1.3;
+  --bfont-emphasis-family: sans-serif;
+  --bfont-attention-style: normal;
+  --bfont-attention-variant: normal;
+  --bfont-attention-weight: 700;
+  --bfont-attention-stretch: normal;
+  --bfont-attention-height: 1.3;
+  --bfont-attention-family: sans-serif;
+  --bfont-strong-style: normal;
+  --bfont-strong-variant: normal;
+  --bfont-strong-weight: 700;
+  --bfont-strong-stretch: normal;
+  --bfont-strong-height: 1.3;
+  --bfont-strong-family: sans-serif;
+  --bfont-variable-style: normal;
+  --bfont-variable-variant: normal;
+  --bfont-variable-weight: 400;
+  --bfont-variable-stretch: normal;
+  --bfont-variable-height: 1.3;
+  --bfont-variable-family: sans-serif;
+  --bfont-citation-style: normal;
+  --bfont-citation-variant: small-caps;
+  --bfont-citation-weight: 400;
+  --bfont-citation-stretch: normal;
+  --bfont-citation-height: 1.3;
+  --bfont-citation-family: sans-serif;
+  --bfont-label-style: normal;
+  --bfont-label-variant: normal;
+  --bfont-label-weight: 400;
+  --bfont-label-stretch: normal;
+  --bfont-label-height: 1.3;
+  --bfont-label-family: sans-serif;
   --bhsl-current-hue: var(--bhsl-foreground-hue);
   --bhsl-current-saturation: var(--bhsl-foreground-saturation);
   --bhsl-current-lightness: var(--bhsl-foreground-lightness);
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
+  background-position: center;
+  background-size: cover;
+  background-attachment: fixed;
   width: 100%;
   height: 100%;
   font-style: var(--bfont-text-style);
@@ -16,6 +151,36 @@
   line-height: var(--bfont-text-height);
   font-family: var(--bfont-text-family);
 }
+@media screen {
+  :where(.bluelib) {
+    background-image: var(--burl-background-full);
+  }
+}
+@media screen and (max-width: 3840px) {
+  :where(.bluelib) {
+    background-image: var(--burl-background-3840);
+  }
+}
+@media screen and (max-width: 1920px) {
+  :where(.bluelib) {
+    background-image: var(--burl-background-1920);
+  }
+}
+@media screen and (max-width: 1366px) {
+  :where(.bluelib) {
+    background-image: var(--burl-background-1366);
+  }
+}
+@media screen and (max-width: 640px) {
+  :where(.bluelib) {
+    background-image: var(--burl-background-640);
+  }
+}
+@media screen and (max-width: 360px) {
+  :where(.bluelib) {
+    background-image: var(--burl-background-360);
+  }
+}
 :where(.bluelib),
 :where(.bluelib) :where(*) {
   margin: 0;
@@ -99,6 +264,16 @@
   gap: 8px;
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
+@media (max-width: 492px) {
+  :where(.bluelib) :where(.panel) {
+    min-width: calc(100vw - 16px);
+  }
+}
+@media (min-width: 493px) {
+  :where(.bluelib) :where(.panel) {
+    min-width: 476px;
+  }
+}
 :where(.bluelib) :where(.panel):where(.border-top),
 :where(.bluelib) :where(.panel):where(.panel-box) {
   border-top-width: 2px;
@@ -123,6 +298,9 @@
 :where(.bluelib) :where(.panel):where(.panel-parenthesis) {
   font-size: smaller;
 }
+:where(.bluelib) :where(.panel) :where(.panel) {
+  min-width: unset;
+}
 :where(.bluelib) :where(.chapter-0) {
   flex-wrap: nowrap;
 }
@@ -617,15 +795,35 @@
   line-height: var(--bfont-code-height);
   font-family: var(--bfont-code-family);
 }
+:where(.bluelib) :where(.text-code) :where(.text-attention),
+:where(.bluelib) :where(.text-preformatted) :where(.text-attention),
+:where(.bluelib) :where(.text-input) :where(.text-attention),
+:where(.bluelib) :where(.text-output) :where(.text-attention) {
+  font-style: var(--bfont-boldcode-style);
+  font-variant: var(--bfont-boldcode-variant);
+  font-weight: var(--bfont-boldcode-weight);
+  font-stretch: var(--bfont-boldcode-stretch);
+  line-height: var(--bfont-boldcode-height);
+  font-family: var(--bfont-boldcode-family);
+}
 :where(.bluelib) :where(.text-preformatted) {
   overflow-x: scroll;
 }
 :where(.bluelib) :where(.text-input),
 :where(.bluelib) :where(.text-output) {
-  padding: 0 0.25ex;
+  padding: 0 0.35ex;
+  border-width: 1px;
+  border-style: solid;
+}
+:where(.bluelib) :where(.text-input) :where(.text-input),
+:where(.bluelib) :where(.text-output) :where(.text-input),
+:where(.bluelib) :where(.text-input) :where(.text-output),
+:where(.bluelib) :where(.text-output) :where(.text-output) {
+  border-width: 0;
 }
 :where(.bluelib) :where(.text-input) {
   background-color: hsl(var(--bhsl-sample-output-hue) var(--bhsl-sample-output-saturation) var(--bhsl-sample-output-lightness));
+  border-color: hsl(var(--bhsl-sample-input-hue) var(--bhsl-sample-input-saturation) var(--bhsl-sample-input-lightness));
   --bhsl-current-hue: var(--bhsl-sample-input-hue);
   --bhsl-current-saturation: var(--bhsl-sample-input-saturation);
   --bhsl-current-lightness: var(--bhsl-sample-input-lightness);
@@ -640,6 +838,7 @@
 }
 :where(.bluelib) :where(.text-output) {
   background-color: hsl(var(--bhsl-sample-input-hue) var(--bhsl-sample-input-saturation) var(--bhsl-sample-input-lightness));
+  border-color: hsl(var(--bhsl-sample-output-hue) var(--bhsl-sample-output-saturation) var(--bhsl-sample-output-lightness));
   --bhsl-current-hue: var(--bhsl-sample-output-hue);
   --bhsl-current-saturation: var(--bhsl-sample-output-saturation);
   --bhsl-current-lightness: var(--bhsl-sample-output-lightness);

dist/base.module.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/base.root.css

@@ -3,10 +3,145 @@
  * by <me@steffo.eu>
  */
 :where(body) {
+  --bhsl-background-hue: 0deg;
+  --bhsl-background-saturation: 0%;
+  --bhsl-background-lightness: 100%;
+  --bhsl-foreground-hue: 0deg;
+  --bhsl-foreground-saturation: 0%;
+  --bhsl-foreground-lightness: 15%;
+  --bhsl-primary-hue: 0deg;
+  --bhsl-primary-saturation: 0%;
+  --bhsl-primary-lightness: 0%;
+  --bhsl-link-hue: 210deg;
+  --bhsl-link-saturation: 100%;
+  --bhsl-link-lightness: 30%;
+  --bhsl-mark-foreground-hue: 0deg;
+  --bhsl-mark-foreground-saturation: 0%;
+  --bhsl-mark-foreground-lightness: 0%;
+  --bhsl-mark-background-hue: 60deg;
+  --bhsl-mark-background-saturation: 100%;
+  --bhsl-mark-background-lightness: 75%;
+  --bhsl-todo-foreground-hue: 204deg;
+  --bhsl-todo-foreground-saturation: 11%;
+  --bhsl-todo-foreground-lightness: 18%;
+  --bhsl-todo-background-hue: 43deg;
+  --bhsl-todo-background-saturation: 100%;
+  --bhsl-todo-background-lightness: 65%;
+  --bhsl-sample-input-hue: 0deg;
+  --bhsl-sample-input-saturation: 100%;
+  --bhsl-sample-input-lightness: 0%;
+  --bhsl-sample-output-hue: 0deg;
+  --bhsl-sample-output-saturation: 100%;
+  --bhsl-sample-output-lightness: 100%;
+  --bhsl-red-hue: 0deg;
+  --bhsl-red-saturation: 100%;
+  --bhsl-red-lightness: 30%;
+  --bhsl-yellow-hue: 60deg;
+  --bhsl-yellow-saturation: 100%;
+  --bhsl-yellow-lightness: 30%;
+  --bhsl-green-hue: 120deg;
+  --bhsl-green-saturation: 100%;
+  --bhsl-green-lightness: 30%;
+  --bhsl-cyan-hue: 180deg;
+  --bhsl-cyan-saturation: 100%;
+  --bhsl-cyan-lightness: 30%;
+  --bhsl-blue-hue: 240deg;
+  --bhsl-blue-saturation: 100%;
+  --bhsl-blue-lightness: 30%;
+  --bhsl-magenta-hue: 300deg;
+  --bhsl-magenta-saturation: 100%;
+  --bhsl-magenta-lightness: 30%;
+  --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);
+  --bfont-text-style: normal;
+  --bfont-text-variant: normal;
+  --bfont-text-weight: 400;
+  --bfont-text-stretch: normal;
+  --bfont-text-height: 1.3;
+  --bfont-text-family: sans-serif;
+  --bfont-header-style: normal;
+  --bfont-header-variant: normal;
+  --bfont-header-weight: 600;
+  --bfont-header-stretch: normal;
+  --bfont-header-height: 1.7;
+  --bfont-header-family: sans-serif;
+  --bfont-code-style: normal;
+  --bfont-code-variant: normal;
+  --bfont-code-weight: 400;
+  --bfont-code-stretch: normal;
+  --bfont-code-height: 1.3;
+  --bfont-code-family: monospace;
+  --bfont-boldcode-style: normal;
+  --bfont-boldcode-variant: normal;
+  --bfont-boldcode-weight: 700;
+  --bfont-boldcode-stretch: normal;
+  --bfont-boldcode-height: 1.3;
+  --bfont-boldcode-family: monospace;
+  --bfont-term-style: italic;
+  --bfont-term-variant: normal;
+  --bfont-term-weight: 700;
+  --bfont-term-stretch: normal;
+  --bfont-term-height: 1.3;
+  --bfont-term-family: sans-serif;
+  --bfont-summary-style: italic;
+  --bfont-summary-variant: normal;
+  --bfont-summary-weight: 400;
+  --bfont-summary-stretch: normal;
+  --bfont-summary-height: 1.3;
+  --bfont-summary-family: sans-serif;
+  --bfont-idiomatic-style: italic;
+  --bfont-idiomatic-variant: normal;
+  --bfont-idiomatic-weight: 400;
+  --bfont-idiomatic-stretch: normal;
+  --bfont-idiomatic-height: 1.3;
+  --bfont-idiomatic-family: sans-serif;
+  --bfont-emphasis-style: italic;
+  --bfont-emphasis-variant: normal;
+  --bfont-emphasis-weight: 400;
+  --bfont-emphasis-stretch: normal;
+  --bfont-emphasis-height: 1.3;
+  --bfont-emphasis-family: sans-serif;
+  --bfont-attention-style: normal;
+  --bfont-attention-variant: normal;
+  --bfont-attention-weight: 700;
+  --bfont-attention-stretch: normal;
+  --bfont-attention-height: 1.3;
+  --bfont-attention-family: sans-serif;
+  --bfont-strong-style: normal;
+  --bfont-strong-variant: normal;
+  --bfont-strong-weight: 700;
+  --bfont-strong-stretch: normal;
+  --bfont-strong-height: 1.3;
+  --bfont-strong-family: sans-serif;
+  --bfont-variable-style: normal;
+  --bfont-variable-variant: normal;
+  --bfont-variable-weight: 400;
+  --bfont-variable-stretch: normal;
+  --bfont-variable-height: 1.3;
+  --bfont-variable-family: sans-serif;
+  --bfont-citation-style: normal;
+  --bfont-citation-variant: small-caps;
+  --bfont-citation-weight: 400;
+  --bfont-citation-stretch: normal;
+  --bfont-citation-height: 1.3;
+  --bfont-citation-family: sans-serif;
+  --bfont-label-style: normal;
+  --bfont-label-variant: normal;
+  --bfont-label-weight: 400;
+  --bfont-label-stretch: normal;
+  --bfont-label-height: 1.3;
+  --bfont-label-family: sans-serif;
   --bhsl-current-hue: var(--bhsl-foreground-hue);
   --bhsl-current-saturation: var(--bhsl-foreground-saturation);
   --bhsl-current-lightness: var(--bhsl-foreground-lightness);
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
+  background-position: center;
+  background-size: cover;
+  background-attachment: fixed;
   width: 100%;
   height: 100%;
   font-style: var(--bfont-text-style);
@@ -16,6 +151,36 @@
   line-height: var(--bfont-text-height);
   font-family: var(--bfont-text-family);
 }
+@media screen {
+  :where(body) {
+    background-image: var(--burl-background-full);
+  }
+}
+@media screen and (max-width: 3840px) {
+  :where(body) {
+    background-image: var(--burl-background-3840);
+  }
+}
+@media screen and (max-width: 1920px) {
+  :where(body) {
+    background-image: var(--burl-background-1920);
+  }
+}
+@media screen and (max-width: 1366px) {
+  :where(body) {
+    background-image: var(--burl-background-1366);
+  }
+}
+@media screen and (max-width: 640px) {
+  :where(body) {
+    background-image: var(--burl-background-640);
+  }
+}
+@media screen and (max-width: 360px) {
+  :where(body) {
+    background-image: var(--burl-background-360);
+  }
+}
 :where(body),
 :where(body) :where(*) {
   margin: 0;
@@ -99,6 +264,16 @@
   gap: 8px;
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
+@media (max-width: 492px) {
+  :where(body) :where(.panel) {
+    min-width: calc(100vw - 16px);
+  }
+}
+@media (min-width: 493px) {
+  :where(body) :where(.panel) {
+    min-width: 476px;
+  }
+}
 :where(body) :where(.panel):where(.border-top),
 :where(body) :where(.panel):where(.box) {
   border-top-width: 2px;
@@ -123,6 +298,9 @@
 :where(body) :where(.panel):where(.parenthesis) {
   font-size: smaller;
 }
+:where(body) :where(.panel) :where(.panel) {
+  min-width: unset;
+}
 :where(body) :where(.chapter-0) {
   flex-wrap: nowrap;
 }
@@ -617,15 +795,35 @@
   line-height: var(--bfont-code-height);
   font-family: var(--bfont-code-family);
 }
+:where(body) :where(code) :where(b),
+:where(body) :where(pre) :where(b),
+:where(body) :where(kbd) :where(b),
+:where(body) :where(samp) :where(b) {
+  font-style: var(--bfont-boldcode-style);
+  font-variant: var(--bfont-boldcode-variant);
+  font-weight: var(--bfont-boldcode-weight);
+  font-stretch: var(--bfont-boldcode-stretch);
+  line-height: var(--bfont-boldcode-height);
+  font-family: var(--bfont-boldcode-family);
+}
 :where(body) :where(pre) {
   overflow-x: scroll;
 }
 :where(body) :where(kbd),
 :where(body) :where(samp) {
-  padding: 0 0.25ex;
+  padding: 0 0.35ex;
+  border-width: 1px;
+  border-style: solid;
+}
+:where(body) :where(kbd) :where(kbd),
+:where(body) :where(samp) :where(kbd),
+:where(body) :where(kbd) :where(samp),
+:where(body) :where(samp) :where(samp) {
+  border-width: 0;
 }
 :where(body) :where(kbd) {
   background-color: hsl(var(--bhsl-sample-output-hue) var(--bhsl-sample-output-saturation) var(--bhsl-sample-output-lightness));
+  border-color: hsl(var(--bhsl-sample-input-hue) var(--bhsl-sample-input-saturation) var(--bhsl-sample-input-lightness));
   --bhsl-current-hue: var(--bhsl-sample-input-hue);
   --bhsl-current-saturation: var(--bhsl-sample-input-saturation);
   --bhsl-current-lightness: var(--bhsl-sample-input-lightness);
@@ -640,6 +838,7 @@
 }
 :where(body) :where(samp) {
   background-color: hsl(var(--bhsl-sample-input-hue) var(--bhsl-sample-input-saturation) var(--bhsl-sample-input-lightness));
+  border-color: hsl(var(--bhsl-sample-output-hue) var(--bhsl-sample-output-saturation) var(--bhsl-sample-output-lightness));
   --bhsl-current-hue: var(--bhsl-sample-output-hue);
   --bhsl-current-saturation: var(--bhsl-sample-output-saturation);
   --bhsl-current-lightness: var(--bhsl-sample-output-lightness);

dist/base.root.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/classic.module.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/classic.root.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/colors-amber.module.css

@@ -3,59 +3,67 @@
  * by <lorenzo.balugani@gmail.com>
  * ported to v5 by <me@steffo.eu>
  */
-:where(.bluelib) {
-  --bhsl-background-hue: 0deg;
-  --bhsl-background-saturation: 8%;
-  --bhsl-background-lightness: 14%;
-  --bhsl-foreground-hue: 19deg;
-  --bhsl-foreground-saturation: 91%;
-  --bhsl-foreground-lightness: 46%;
-  --bhsl-primary-hue: 0deg;
-  --bhsl-primary-saturation: 42%;
-  --bhsl-primary-lightness: 94%;
-  --bhsl-link-hue: 50deg;
-  --bhsl-link-saturation: 100%;
-  --bhsl-link-lightness: 80%;
-  --bhsl-mark-foreground-hue: 19deg;
-  --bhsl-mark-foreground-saturation: 64%;
-  --bhsl-mark-foreground-lightness: 14%;
-  --bhsl-mark-background-hue: 19deg;
-  --bhsl-mark-background-saturation: 100%;
-  --bhsl-mark-background-lightness: 81%;
-  --bhsl-todo-foreground-hue: 43deg;
-  --bhsl-todo-foreground-saturation: 100%;
-  --bhsl-todo-foreground-lightness: 65%;
-  --bhsl-todo-background-hue: 204deg;
-  --bhsl-todo-background-saturation: 11%;
-  --bhsl-todo-background-lightness: 18%;
-  --bhsl-sample-input-hue: 0deg;
-  --bhsl-sample-input-saturation: 100%;
-  --bhsl-sample-input-lightness: 0%;
-  --bhsl-sample-output-hue: 0deg;
-  --bhsl-sample-output-saturation: 100%;
-  --bhsl-sample-output-lightness: 100%;
-  --bhsl-red-hue: 0deg;
-  --bhsl-red-saturation: 100%;
-  --bhsl-red-lightness: 66%;
-  --bhsl-yellow-hue: 60deg;
-  --bhsl-yellow-saturation: 100%;
-  --bhsl-yellow-lightness: 66%;
-  --bhsl-green-hue: 120deg;
-  --bhsl-green-saturation: 100%;
-  --bhsl-green-lightness: 66%;
-  --bhsl-cyan-hue: 180deg;
-  --bhsl-cyan-saturation: 100%;
-  --bhsl-cyan-lightness: 66%;
-  --bhsl-blue-hue: 240deg;
-  --bhsl-blue-saturation: 100%;
-  --bhsl-blue-lightness: 66%;
-  --bhsl-magenta-hue: 300deg;
-  --bhsl-magenta-saturation: 100%;
-  --bhsl-magenta-lightness: 66%;
-  --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);
+@media screen {
+  :where(.bluelib) {
+    --burl-background-full: url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/.jpg);
+    --burl-background-3840: url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/3840.jpg);
+    --burl-background-1920: url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/1920.jpg);
+    --burl-background-1366: url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/1366.jpg);
+    --burl-background-640: url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/640.jpg);
+    --burl-background-360: url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/360.jpg);
+    --bhsl-background-hue: 0deg;
+    --bhsl-background-saturation: 8%;
+    --bhsl-background-lightness: 14%;
+    --bhsl-foreground-hue: 19deg;
+    --bhsl-foreground-saturation: 91%;
+    --bhsl-foreground-lightness: 46%;
+    --bhsl-primary-hue: 0deg;
+    --bhsl-primary-saturation: 42%;
+    --bhsl-primary-lightness: 94%;
+    --bhsl-link-hue: 50deg;
+    --bhsl-link-saturation: 100%;
+    --bhsl-link-lightness: 80%;
+    --bhsl-mark-foreground-hue: 19deg;
+    --bhsl-mark-foreground-saturation: 64%;
+    --bhsl-mark-foreground-lightness: 14%;
+    --bhsl-mark-background-hue: 19deg;
+    --bhsl-mark-background-saturation: 100%;
+    --bhsl-mark-background-lightness: 81%;
+    --bhsl-todo-foreground-hue: 43deg;
+    --bhsl-todo-foreground-saturation: 100%;
+    --bhsl-todo-foreground-lightness: 65%;
+    --bhsl-todo-background-hue: 204deg;
+    --bhsl-todo-background-saturation: 11%;
+    --bhsl-todo-background-lightness: 18%;
+    --bhsl-sample-input-hue: 0deg;
+    --bhsl-sample-input-saturation: 100%;
+    --bhsl-sample-input-lightness: 0%;
+    --bhsl-sample-output-hue: 0deg;
+    --bhsl-sample-output-saturation: 100%;
+    --bhsl-sample-output-lightness: 100%;
+    --bhsl-red-hue: 0deg;
+    --bhsl-red-saturation: 100%;
+    --bhsl-red-lightness: 66%;
+    --bhsl-yellow-hue: 60deg;
+    --bhsl-yellow-saturation: 100%;
+    --bhsl-yellow-lightness: 66%;
+    --bhsl-green-hue: 120deg;
+    --bhsl-green-saturation: 100%;
+    --bhsl-green-lightness: 66%;
+    --bhsl-cyan-hue: 180deg;
+    --bhsl-cyan-saturation: 100%;
+    --bhsl-cyan-lightness: 66%;
+    --bhsl-blue-hue: 240deg;
+    --bhsl-blue-saturation: 100%;
+    --bhsl-blue-lightness: 66%;
+    --bhsl-magenta-hue: 300deg;
+    --bhsl-magenta-saturation: 100%;
+    --bhsl-magenta-lightness: 66%;
+    --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-amber.module.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/colors-amber.module.min.css

@@ -1 +1 @@
-:where(.bluelib){--bhsl-background-hue:0deg;--bhsl-background-saturation:8%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:19deg;--bhsl-foreground-saturation:91%;--bhsl-foreground-lightness:46%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:42%;--bhsl-primary-lightness:94%;--bhsl-link-hue:50deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:80%;--bhsl-mark-foreground-hue:19deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:19deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:66%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:66%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:66%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:66%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:66%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:66%;--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)}
+@media screen{:where(.bluelib){--burl-background-full:url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/.jpg);--burl-background-3840:url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/3840.jpg);--burl-background-1920:url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/1920.jpg);--burl-background-1366:url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/1366.jpg);--burl-background-640:url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/640.jpg);--burl-background-360:url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/360.jpg);--bhsl-background-hue:0deg;--bhsl-background-saturation:8%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:19deg;--bhsl-foreground-saturation:91%;--bhsl-foreground-lightness:46%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:42%;--bhsl-primary-lightness:94%;--bhsl-link-hue:50deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:80%;--bhsl-mark-foreground-hue:19deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:19deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:66%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:66%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:66%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:66%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:66%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:66%;--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-amber.root.css

@@ -3,59 +3,67 @@
  * by <lorenzo.balugani@gmail.com>
  * ported to v5 by <me@steffo.eu>
  */
-:where(body) {
-  --bhsl-background-hue: 0deg;
-  --bhsl-background-saturation: 8%;
-  --bhsl-background-lightness: 14%;
-  --bhsl-foreground-hue: 19deg;
-  --bhsl-foreground-saturation: 91%;
-  --bhsl-foreground-lightness: 46%;
-  --bhsl-primary-hue: 0deg;
-  --bhsl-primary-saturation: 42%;
-  --bhsl-primary-lightness: 94%;
-  --bhsl-link-hue: 50deg;
-  --bhsl-link-saturation: 100%;
-  --bhsl-link-lightness: 80%;
-  --bhsl-mark-foreground-hue: 19deg;
-  --bhsl-mark-foreground-saturation: 64%;
-  --bhsl-mark-foreground-lightness: 14%;
-  --bhsl-mark-background-hue: 19deg;
-  --bhsl-mark-background-saturation: 100%;
-  --bhsl-mark-background-lightness: 81%;
-  --bhsl-todo-foreground-hue: 43deg;
-  --bhsl-todo-foreground-saturation: 100%;
-  --bhsl-todo-foreground-lightness: 65%;
-  --bhsl-todo-background-hue: 204deg;
-  --bhsl-todo-background-saturation: 11%;
-  --bhsl-todo-background-lightness: 18%;
-  --bhsl-sample-input-hue: 0deg;
-  --bhsl-sample-input-saturation: 100%;
-  --bhsl-sample-input-lightness: 0%;
-  --bhsl-sample-output-hue: 0deg;
-  --bhsl-sample-output-saturation: 100%;
-  --bhsl-sample-output-lightness: 100%;
-  --bhsl-red-hue: 0deg;
-  --bhsl-red-saturation: 100%;
-  --bhsl-red-lightness: 66%;
-  --bhsl-yellow-hue: 60deg;
-  --bhsl-yellow-saturation: 100%;
-  --bhsl-yellow-lightness: 66%;
-  --bhsl-green-hue: 120deg;
-  --bhsl-green-saturation: 100%;
-  --bhsl-green-lightness: 66%;
-  --bhsl-cyan-hue: 180deg;
-  --bhsl-cyan-saturation: 100%;
-  --bhsl-cyan-lightness: 66%;
-  --bhsl-blue-hue: 240deg;
-  --bhsl-blue-saturation: 100%;
-  --bhsl-blue-lightness: 66%;
-  --bhsl-magenta-hue: 300deg;
-  --bhsl-magenta-saturation: 100%;
-  --bhsl-magenta-lightness: 66%;
-  --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);
+@media screen {
+  :where(body) {
+    --burl-background-full: url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/.jpg);
+    --burl-background-3840: url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/3840.jpg);
+    --burl-background-1920: url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/1920.jpg);
+    --burl-background-1366: url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/1366.jpg);
+    --burl-background-640: url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/640.jpg);
+    --burl-background-360: url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/360.jpg);
+    --bhsl-background-hue: 0deg;
+    --bhsl-background-saturation: 8%;
+    --bhsl-background-lightness: 14%;
+    --bhsl-foreground-hue: 19deg;
+    --bhsl-foreground-saturation: 91%;
+    --bhsl-foreground-lightness: 46%;
+    --bhsl-primary-hue: 0deg;
+    --bhsl-primary-saturation: 42%;
+    --bhsl-primary-lightness: 94%;
+    --bhsl-link-hue: 50deg;
+    --bhsl-link-saturation: 100%;
+    --bhsl-link-lightness: 80%;
+    --bhsl-mark-foreground-hue: 19deg;
+    --bhsl-mark-foreground-saturation: 64%;
+    --bhsl-mark-foreground-lightness: 14%;
+    --bhsl-mark-background-hue: 19deg;
+    --bhsl-mark-background-saturation: 100%;
+    --bhsl-mark-background-lightness: 81%;
+    --bhsl-todo-foreground-hue: 43deg;
+    --bhsl-todo-foreground-saturation: 100%;
+    --bhsl-todo-foreground-lightness: 65%;
+    --bhsl-todo-background-hue: 204deg;
+    --bhsl-todo-background-saturation: 11%;
+    --bhsl-todo-background-lightness: 18%;
+    --bhsl-sample-input-hue: 0deg;
+    --bhsl-sample-input-saturation: 100%;
+    --bhsl-sample-input-lightness: 0%;
+    --bhsl-sample-output-hue: 0deg;
+    --bhsl-sample-output-saturation: 100%;
+    --bhsl-sample-output-lightness: 100%;
+    --bhsl-red-hue: 0deg;
+    --bhsl-red-saturation: 100%;
+    --bhsl-red-lightness: 66%;
+    --bhsl-yellow-hue: 60deg;
+    --bhsl-yellow-saturation: 100%;
+    --bhsl-yellow-lightness: 66%;
+    --bhsl-green-hue: 120deg;
+    --bhsl-green-saturation: 100%;
+    --bhsl-green-lightness: 66%;
+    --bhsl-cyan-hue: 180deg;
+    --bhsl-cyan-saturation: 100%;
+    --bhsl-cyan-lightness: 66%;
+    --bhsl-blue-hue: 240deg;
+    --bhsl-blue-saturation: 100%;
+    --bhsl-blue-lightness: 66%;
+    --bhsl-magenta-hue: 300deg;
+    --bhsl-magenta-saturation: 100%;
+    --bhsl-magenta-lightness: 66%;
+    --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-amber.root.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/colors-amber.root.min.css

@@ -1 +1 @@
-:where(body){--bhsl-background-hue:0deg;--bhsl-background-saturation:8%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:19deg;--bhsl-foreground-saturation:91%;--bhsl-foreground-lightness:46%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:42%;--bhsl-primary-lightness:94%;--bhsl-link-hue:50deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:80%;--bhsl-mark-foreground-hue:19deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:19deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:66%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:66%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:66%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:66%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:66%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:66%;--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)}
+@media screen{:where(body){--burl-background-full:url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/.jpg);--burl-background-3840:url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/3840.jpg);--burl-background-1920:url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/1920.jpg);--burl-background-1366:url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/1366.jpg);--burl-background-640:url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/640.jpg);--burl-background-360:url(../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/360.jpg);--bhsl-background-hue:0deg;--bhsl-background-saturation:8%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:19deg;--bhsl-foreground-saturation:91%;--bhsl-foreground-lightness:46%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:42%;--bhsl-primary-lightness:94%;--bhsl-link-hue:50deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:80%;--bhsl-mark-foreground-hue:19deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:19deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:66%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:66%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:66%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:66%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:66%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:66%;--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-pixeldawn.module.css

@@ -2,94 +2,102 @@
  * Bluelib Royal Dawn Colors
  * by <me@steffo.eu>
  */
-:where(.bluelib) {
-  --bhsl-background-hue: 14deg;
-  --bhsl-background-saturation: 85%;
-  --bhsl-background-lightness: 74%;
-  --bhsl-foreground-hue: 340deg;
-  --bhsl-foreground-saturation: 40%;
-  --bhsl-foreground-lightness: 20%;
-  --bhsl-primary-hue: 220deg;
-  --bhsl-primary-saturation: 92%;
-  --bhsl-primary-lightness: 11%;
-  --bhsl-link-hue: 237deg;
-  --bhsl-link-saturation: 80%;
-  --bhsl-link-lightness: 41%;
-  --bhsl-mark-foreground-hue: 194deg;
-  --bhsl-mark-foreground-saturation: 64%;
-  --bhsl-mark-foreground-lightness: 14%;
-  --bhsl-mark-background-hue: 194deg;
-  --bhsl-mark-background-saturation: 100%;
-  --bhsl-mark-background-lightness: 81%;
-  --bhsl-todo-foreground-hue: 43deg;
-  --bhsl-todo-foreground-saturation: 100%;
-  --bhsl-todo-foreground-lightness: 65%;
-  --bhsl-todo-background-hue: 204deg;
-  --bhsl-todo-background-saturation: 11%;
-  --bhsl-todo-background-lightness: 18%;
-  --bhsl-sample-input-hue: 0deg;
-  --bhsl-sample-input-saturation: 100%;
-  --bhsl-sample-input-lightness: 0%;
-  --bhsl-sample-output-hue: 0deg;
-  --bhsl-sample-output-saturation: 100%;
-  --bhsl-sample-output-lightness: 100%;
-  --bhsl-red-hue: 0deg;
-  --bhsl-red-saturation: 100%;
-  --bhsl-red-lightness: 15%;
-  --bhsl-yellow-hue: 60deg;
-  --bhsl-yellow-saturation: 100%;
-  --bhsl-yellow-lightness: 15%;
-  --bhsl-green-hue: 120deg;
-  --bhsl-green-saturation: 100%;
-  --bhsl-green-lightness: 15%;
-  --bhsl-cyan-hue: 180deg;
-  --bhsl-cyan-saturation: 100%;
-  --bhsl-cyan-lightness: 15%;
-  --bhsl-blue-hue: 240deg;
-  --bhsl-blue-saturation: 100%;
-  --bhsl-blue-lightness: 15%;
-  --bhsl-magenta-hue: 300deg;
-  --bhsl-magenta-saturation: 100%;
-  --bhsl-magenta-lightness: 15%;
-  --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);
-  /*
-    @{panel} {
-        
-        @{panel} {
-            background-color: .hsl-group(background; 0; - 8%; - 5%; 1.0)[@c] !important;
-
-            @{panel} {
-                background-color: .hsl-group(background; 0; - 16%; - 10%; 1.0)[@c] !important;
-            }
-        }
-    }
-    */
-}
-:where(.bluelib):is(:where(.bluelib)) {
-  --b-panel-initial-opacity: 0.5;
-  --b-border-radius: 0;
-  --b-outer-shadow: none;
-}
-:where(.bluelib):is(:where(.bluelib)) :where(.header-1),
-:where(.bluelib):is(:where(.bluelib)) :where(.header-2),
-:where(.bluelib):is(:where(.bluelib)) :where(.header-3),
-:where(.bluelib):is(:where(.bluelib)) :where(.header-4),
-:where(.bluelib):is(:where(.bluelib)) :where(.header-5),
-:where(.bluelib):is(:where(.bluelib)) :where(.header-6) {
-  color: white;
-  text-shadow: 2px 2px 0 #9832ce;
-}
-:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-1),
-:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-2),
-:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-3),
-:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-4),
-:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-5),
-:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-6) {
-  color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
-  text-shadow: none;
+@media screen {
+  :where(.bluelib) {
+    --burl-background-full: url(../images/viktya-pixeldawn/full.png);
+    --burl-background-3840: url(../images/viktya-pixeldawn/full.png);
+    --burl-background-1920: url(../images/viktya-pixeldawn/full.png);
+    --burl-background-1366: url(../images/viktya-pixeldawn/full.png);
+    --burl-background-640: url(../images/viktya-pixeldawn/full.png);
+    --burl-background-360: url(../images/viktya-pixeldawn/full.png);
+    --bhsl-background-hue: 14deg;
+    --bhsl-background-saturation: 85%;
+    --bhsl-background-lightness: 74%;
+    --bhsl-foreground-hue: 340deg;
+    --bhsl-foreground-saturation: 40%;
+    --bhsl-foreground-lightness: 20%;
+    --bhsl-primary-hue: 220deg;
+    --bhsl-primary-saturation: 92%;
+    --bhsl-primary-lightness: 11%;
+    --bhsl-link-hue: 237deg;
+    --bhsl-link-saturation: 80%;
+    --bhsl-link-lightness: 41%;
+    --bhsl-mark-foreground-hue: 194deg;
+    --bhsl-mark-foreground-saturation: 64%;
+    --bhsl-mark-foreground-lightness: 14%;
+    --bhsl-mark-background-hue: 194deg;
+    --bhsl-mark-background-saturation: 100%;
+    --bhsl-mark-background-lightness: 81%;
+    --bhsl-todo-foreground-hue: 43deg;
+    --bhsl-todo-foreground-saturation: 100%;
+    --bhsl-todo-foreground-lightness: 65%;
+    --bhsl-todo-background-hue: 204deg;
+    --bhsl-todo-background-saturation: 11%;
+    --bhsl-todo-background-lightness: 18%;
+    --bhsl-sample-input-hue: 0deg;
+    --bhsl-sample-input-saturation: 100%;
+    --bhsl-sample-input-lightness: 0%;
+    --bhsl-sample-output-hue: 0deg;
+    --bhsl-sample-output-saturation: 100%;
+    --bhsl-sample-output-lightness: 100%;
+    --bhsl-red-hue: 0deg;
+    --bhsl-red-saturation: 100%;
+    --bhsl-red-lightness: 15%;
+    --bhsl-yellow-hue: 60deg;
+    --bhsl-yellow-saturation: 100%;
+    --bhsl-yellow-lightness: 15%;
+    --bhsl-green-hue: 120deg;
+    --bhsl-green-saturation: 100%;
+    --bhsl-green-lightness: 15%;
+    --bhsl-cyan-hue: 180deg;
+    --bhsl-cyan-saturation: 100%;
+    --bhsl-cyan-lightness: 15%;
+    --bhsl-blue-hue: 240deg;
+    --bhsl-blue-saturation: 100%;
+    --bhsl-blue-lightness: 15%;
+    --bhsl-magenta-hue: 300deg;
+    --bhsl-magenta-saturation: 100%;
+    --bhsl-magenta-lightness: 15%;
+    --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);
+    /*
+		@{panel} {
+	
+			@{panel} {
+				background-color: .hsl-group(background; 0; - 8%; - 5%; 1.0)[@c] !important;
+	
+				@{panel} {
+					background-color: .hsl-group(background; 0; - 16%; - 10%; 1.0)[@c] !important;
+				}
+			}
+		}
+		*/
+  }
+  :where(.bluelib):is(:where(.bluelib)) {
+    --b-panel-initial-opacity: 0.5;
+    --b-border-radius: 0;
+    --b-outer-shadow: none;
+  }
+  :where(.bluelib):is(:where(.bluelib)) :where(.header-1),
+  :where(.bluelib):is(:where(.bluelib)) :where(.header-2),
+  :where(.bluelib):is(:where(.bluelib)) :where(.header-3),
+  :where(.bluelib):is(:where(.bluelib)) :where(.header-4),
+  :where(.bluelib):is(:where(.bluelib)) :where(.header-5),
+  :where(.bluelib):is(:where(.bluelib)) :where(.header-6) {
+    color: white;
+    text-shadow: 2px 2px 0 #9832ce;
+  }
+  :where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-1),
+  :where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-2),
+  :where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-3),
+  :where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-4),
+  :where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-5),
+  :where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-6) {
+    color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
+    text-shadow: none;
+  }
 }

dist/colors-pixeldawn.module.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/colors-pixeldawn.module.min.css

@@ -1 +1 @@
-:where(.bluelib){--bhsl-background-hue:14deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:74%;--bhsl-foreground-hue:340deg;--bhsl-foreground-saturation:40%;--bhsl-foreground-lightness:20%;--bhsl-primary-hue:220deg;--bhsl-primary-saturation:92%;--bhsl-primary-lightness:11%;--bhsl-link-hue:237deg;--bhsl-link-saturation:80%;--bhsl-link-lightness:41%;--bhsl-mark-foreground-hue:194deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:194deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:15%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:15%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:15%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:15%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:15%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:15%;--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)}:where(.bluelib):is(:where(.bluelib)){--b-panel-initial-opacity:0.5;--b-border-radius:0;--b-outer-shadow:none}:where(.bluelib):is(:where(.bluelib)) :where(.header-1),:where(.bluelib):is(:where(.bluelib)) :where(.header-2),:where(.bluelib):is(:where(.bluelib)) :where(.header-3),:where(.bluelib):is(:where(.bluelib)) :where(.header-4),:where(.bluelib):is(:where(.bluelib)) :where(.header-5),:where(.bluelib):is(:where(.bluelib)) :where(.header-6){color:#fff;text-shadow:2px 2px 0 #9832ce}:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-1),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-2),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-3),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-4),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-5),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-6){color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));text-shadow:none}
+@media screen{:where(.bluelib){--burl-background-full:url(../images/viktya-pixeldawn/full.png);--burl-background-3840:url(../images/viktya-pixeldawn/full.png);--burl-background-1920:url(../images/viktya-pixeldawn/full.png);--burl-background-1366:url(../images/viktya-pixeldawn/full.png);--burl-background-640:url(../images/viktya-pixeldawn/full.png);--burl-background-360:url(../images/viktya-pixeldawn/full.png);--bhsl-background-hue:14deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:74%;--bhsl-foreground-hue:340deg;--bhsl-foreground-saturation:40%;--bhsl-foreground-lightness:20%;--bhsl-primary-hue:220deg;--bhsl-primary-saturation:92%;--bhsl-primary-lightness:11%;--bhsl-link-hue:237deg;--bhsl-link-saturation:80%;--bhsl-link-lightness:41%;--bhsl-mark-foreground-hue:194deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:194deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:15%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:15%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:15%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:15%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:15%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:15%;--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)}:where(.bluelib):is(:where(.bluelib)){--b-panel-initial-opacity:0.5;--b-border-radius:0;--b-outer-shadow:none}:where(.bluelib):is(:where(.bluelib)) :where(.header-1),:where(.bluelib):is(:where(.bluelib)) :where(.header-2),:where(.bluelib):is(:where(.bluelib)) :where(.header-3),:where(.bluelib):is(:where(.bluelib)) :where(.header-4),:where(.bluelib):is(:where(.bluelib)) :where(.header-5),:where(.bluelib):is(:where(.bluelib)) :where(.header-6){color:#fff;text-shadow:2px 2px 0 #9832ce}:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-1),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-2),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-3),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-4),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-5),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-6){color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));text-shadow:none}}

dist/colors-pixeldawn.root.css

@@ -2,94 +2,102 @@
  * Bluelib Royal Dawn Colors
  * by <me@steffo.eu>
  */
-:where(body) {
-  --bhsl-background-hue: 14deg;
-  --bhsl-background-saturation: 85%;
-  --bhsl-background-lightness: 74%;
-  --bhsl-foreground-hue: 340deg;
-  --bhsl-foreground-saturation: 40%;
-  --bhsl-foreground-lightness: 20%;
-  --bhsl-primary-hue: 220deg;
-  --bhsl-primary-saturation: 92%;
-  --bhsl-primary-lightness: 11%;
-  --bhsl-link-hue: 237deg;
-  --bhsl-link-saturation: 80%;
-  --bhsl-link-lightness: 41%;
-  --bhsl-mark-foreground-hue: 194deg;
-  --bhsl-mark-foreground-saturation: 64%;
-  --bhsl-mark-foreground-lightness: 14%;
-  --bhsl-mark-background-hue: 194deg;
-  --bhsl-mark-background-saturation: 100%;
-  --bhsl-mark-background-lightness: 81%;
-  --bhsl-todo-foreground-hue: 43deg;
-  --bhsl-todo-foreground-saturation: 100%;
-  --bhsl-todo-foreground-lightness: 65%;
-  --bhsl-todo-background-hue: 204deg;
-  --bhsl-todo-background-saturation: 11%;
-  --bhsl-todo-background-lightness: 18%;
-  --bhsl-sample-input-hue: 0deg;
-  --bhsl-sample-input-saturation: 100%;
-  --bhsl-sample-input-lightness: 0%;
-  --bhsl-sample-output-hue: 0deg;
-  --bhsl-sample-output-saturation: 100%;
-  --bhsl-sample-output-lightness: 100%;
-  --bhsl-red-hue: 0deg;
-  --bhsl-red-saturation: 100%;
-  --bhsl-red-lightness: 15%;
-  --bhsl-yellow-hue: 60deg;
-  --bhsl-yellow-saturation: 100%;
-  --bhsl-yellow-lightness: 15%;
-  --bhsl-green-hue: 120deg;
-  --bhsl-green-saturation: 100%;
-  --bhsl-green-lightness: 15%;
-  --bhsl-cyan-hue: 180deg;
-  --bhsl-cyan-saturation: 100%;
-  --bhsl-cyan-lightness: 15%;
-  --bhsl-blue-hue: 240deg;
-  --bhsl-blue-saturation: 100%;
-  --bhsl-blue-lightness: 15%;
-  --bhsl-magenta-hue: 300deg;
-  --bhsl-magenta-saturation: 100%;
-  --bhsl-magenta-lightness: 15%;
-  --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);
-  /*
-    @{panel} {
-        
-        @{panel} {
-            background-color: .hsl-group(background; 0; - 8%; - 5%; 1.0)[@c] !important;
-
-            @{panel} {
-                background-color: .hsl-group(background; 0; - 16%; - 10%; 1.0)[@c] !important;
-            }
-        }
-    }
-    */
-}
-:where(body):is(:where(body)) {
-  --b-panel-initial-opacity: 0.5;
-  --b-border-radius: 0;
-  --b-outer-shadow: none;
-}
-:where(body):is(:where(body)) :where(h1),
-:where(body):is(:where(body)) :where(h2),
-:where(body):is(:where(body)) :where(h3),
-:where(body):is(:where(body)) :where(h4),
-:where(body):is(:where(body)) :where(h5),
-:where(body):is(:where(body)) :where(h6) {
-  color: white;
-  text-shadow: 2px 2px 0 #9832ce;
-}
-:where(body):is(:where(body)) :where(.panel) :where(h1),
-:where(body):is(:where(body)) :where(.panel) :where(h2),
-:where(body):is(:where(body)) :where(.panel) :where(h3),
-:where(body):is(:where(body)) :where(.panel) :where(h4),
-:where(body):is(:where(body)) :where(.panel) :where(h5),
-:where(body):is(:where(body)) :where(.panel) :where(h6) {
-  color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
-  text-shadow: none;
+@media screen {
+  :where(body) {
+    --burl-background-full: url(../images/viktya-pixeldawn/full.png);
+    --burl-background-3840: url(../images/viktya-pixeldawn/full.png);
+    --burl-background-1920: url(../images/viktya-pixeldawn/full.png);
+    --burl-background-1366: url(../images/viktya-pixeldawn/full.png);
+    --burl-background-640: url(../images/viktya-pixeldawn/full.png);
+    --burl-background-360: url(../images/viktya-pixeldawn/full.png);
+    --bhsl-background-hue: 14deg;
+    --bhsl-background-saturation: 85%;
+    --bhsl-background-lightness: 74%;
+    --bhsl-foreground-hue: 340deg;
+    --bhsl-foreground-saturation: 40%;
+    --bhsl-foreground-lightness: 20%;
+    --bhsl-primary-hue: 220deg;
+    --bhsl-primary-saturation: 92%;
+    --bhsl-primary-lightness: 11%;
+    --bhsl-link-hue: 237deg;
+    --bhsl-link-saturation: 80%;
+    --bhsl-link-lightness: 41%;
+    --bhsl-mark-foreground-hue: 194deg;
+    --bhsl-mark-foreground-saturation: 64%;
+    --bhsl-mark-foreground-lightness: 14%;
+    --bhsl-mark-background-hue: 194deg;
+    --bhsl-mark-background-saturation: 100%;
+    --bhsl-mark-background-lightness: 81%;
+    --bhsl-todo-foreground-hue: 43deg;
+    --bhsl-todo-foreground-saturation: 100%;
+    --bhsl-todo-foreground-lightness: 65%;
+    --bhsl-todo-background-hue: 204deg;
+    --bhsl-todo-background-saturation: 11%;
+    --bhsl-todo-background-lightness: 18%;
+    --bhsl-sample-input-hue: 0deg;
+    --bhsl-sample-input-saturation: 100%;
+    --bhsl-sample-input-lightness: 0%;
+    --bhsl-sample-output-hue: 0deg;
+    --bhsl-sample-output-saturation: 100%;
+    --bhsl-sample-output-lightness: 100%;
+    --bhsl-red-hue: 0deg;
+    --bhsl-red-saturation: 100%;
+    --bhsl-red-lightness: 15%;
+    --bhsl-yellow-hue: 60deg;
+    --bhsl-yellow-saturation: 100%;
+    --bhsl-yellow-lightness: 15%;
+    --bhsl-green-hue: 120deg;
+    --bhsl-green-saturation: 100%;
+    --bhsl-green-lightness: 15%;
+    --bhsl-cyan-hue: 180deg;
+    --bhsl-cyan-saturation: 100%;
+    --bhsl-cyan-lightness: 15%;
+    --bhsl-blue-hue: 240deg;
+    --bhsl-blue-saturation: 100%;
+    --bhsl-blue-lightness: 15%;
+    --bhsl-magenta-hue: 300deg;
+    --bhsl-magenta-saturation: 100%;
+    --bhsl-magenta-lightness: 15%;
+    --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);
+    /*
+		@{panel} {
+	
+			@{panel} {
+				background-color: .hsl-group(background; 0; - 8%; - 5%; 1.0)[@c] !important;
+	
+				@{panel} {
+					background-color: .hsl-group(background; 0; - 16%; - 10%; 1.0)[@c] !important;
+				}
+			}
+		}
+		*/
+  }
+  :where(body):is(:where(body)) {
+    --b-panel-initial-opacity: 0.5;
+    --b-border-radius: 0;
+    --b-outer-shadow: none;
+  }
+  :where(body):is(:where(body)) :where(h1),
+  :where(body):is(:where(body)) :where(h2),
+  :where(body):is(:where(body)) :where(h3),
+  :where(body):is(:where(body)) :where(h4),
+  :where(body):is(:where(body)) :where(h5),
+  :where(body):is(:where(body)) :where(h6) {
+    color: white;
+    text-shadow: 2px 2px 0 #9832ce;
+  }
+  :where(body):is(:where(body)) :where(.panel) :where(h1),
+  :where(body):is(:where(body)) :where(.panel) :where(h2),
+  :where(body):is(:where(body)) :where(.panel) :where(h3),
+  :where(body):is(:where(body)) :where(.panel) :where(h4),
+  :where(body):is(:where(body)) :where(.panel) :where(h5),
+  :where(body):is(:where(body)) :where(.panel) :where(h6) {
+    color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
+    text-shadow: none;
+  }
 }

dist/colors-pixeldawn.root.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/colors-pixeldawn.root.min.css

@@ -1 +1 @@
-:where(body){--bhsl-background-hue:14deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:74%;--bhsl-foreground-hue:340deg;--bhsl-foreground-saturation:40%;--bhsl-foreground-lightness:20%;--bhsl-primary-hue:220deg;--bhsl-primary-saturation:92%;--bhsl-primary-lightness:11%;--bhsl-link-hue:237deg;--bhsl-link-saturation:80%;--bhsl-link-lightness:41%;--bhsl-mark-foreground-hue:194deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:194deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:15%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:15%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:15%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:15%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:15%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:15%;--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)}:where(body):is(:where(body)){--b-panel-initial-opacity:0.5;--b-border-radius:0;--b-outer-shadow:none}:where(body):is(:where(body)) :where(h1),:where(body):is(:where(body)) :where(h2),:where(body):is(:where(body)) :where(h3),:where(body):is(:where(body)) :where(h4),:where(body):is(:where(body)) :where(h5),:where(body):is(:where(body)) :where(h6){color:#fff;text-shadow:2px 2px 0 #9832ce}:where(body):is(:where(body)) :where(.panel) :where(h1),:where(body):is(:where(body)) :where(.panel) :where(h2),:where(body):is(:where(body)) :where(.panel) :where(h3),:where(body):is(:where(body)) :where(.panel) :where(h4),:where(body):is(:where(body)) :where(.panel) :where(h5),:where(body):is(:where(body)) :where(.panel) :where(h6){color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));text-shadow:none}
+@media screen{:where(body){--burl-background-full:url(../images/viktya-pixeldawn/full.png);--burl-background-3840:url(../images/viktya-pixeldawn/full.png);--burl-background-1920:url(../images/viktya-pixeldawn/full.png);--burl-background-1366:url(../images/viktya-pixeldawn/full.png);--burl-background-640:url(../images/viktya-pixeldawn/full.png);--burl-background-360:url(../images/viktya-pixeldawn/full.png);--bhsl-background-hue:14deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:74%;--bhsl-foreground-hue:340deg;--bhsl-foreground-saturation:40%;--bhsl-foreground-lightness:20%;--bhsl-primary-hue:220deg;--bhsl-primary-saturation:92%;--bhsl-primary-lightness:11%;--bhsl-link-hue:237deg;--bhsl-link-saturation:80%;--bhsl-link-lightness:41%;--bhsl-mark-foreground-hue:194deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:194deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:15%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:15%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:15%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:15%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:15%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:15%;--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)}:where(body):is(:where(body)){--b-panel-initial-opacity:0.5;--b-border-radius:0;--b-outer-shadow:none}:where(body):is(:where(body)) :where(h1),:where(body):is(:where(body)) :where(h2),:where(body):is(:where(body)) :where(h3),:where(body):is(:where(body)) :where(h4),:where(body):is(:where(body)) :where(h5),:where(body):is(:where(body)) :where(h6){color:#fff;text-shadow:2px 2px 0 #9832ce}:where(body):is(:where(body)) :where(.panel) :where(h1),:where(body):is(:where(body)) :where(.panel) :where(h2),:where(body):is(:where(body)) :where(.panel) :where(h3),:where(body):is(:where(body)) :where(.panel) :where(h4),:where(body):is(:where(body)) :where(.panel) :where(h5),:where(body):is(:where(body)) :where(.panel) :where(h6){color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));text-shadow:none}}

dist/colors-purplestar.module.css

@@ -2,59 +2,67 @@
  * Bluelib Purple Star Colors
  * by <me@steffo.eu>
  */
-:where(.bluelib) {
-  --bhsl-background-hue: 262deg;
-  --bhsl-background-saturation: 85%;
-  --bhsl-background-lightness: 13%;
-  --bhsl-foreground-hue: 262deg;
-  --bhsl-foreground-saturation: 100%;
-  --bhsl-foreground-lightness: 78%;
-  --bhsl-primary-hue: 53deg;
-  --bhsl-primary-saturation: 100%;
-  --bhsl-primary-lightness: 100%;
-  --bhsl-link-hue: 53deg;
-  --bhsl-link-saturation: 100%;
-  --bhsl-link-lightness: 72%;
-  --bhsl-mark-foreground-hue: 53deg;
-  --bhsl-mark-foreground-saturation: 64%;
-  --bhsl-mark-foreground-lightness: 14%;
-  --bhsl-mark-background-hue: 53deg;
-  --bhsl-mark-background-saturation: 100%;
-  --bhsl-mark-background-lightness: 72%;
-  --bhsl-todo-foreground-hue: 43deg;
-  --bhsl-todo-foreground-saturation: 100%;
-  --bhsl-todo-foreground-lightness: 65%;
-  --bhsl-todo-background-hue: 204deg;
-  --bhsl-todo-background-saturation: 11%;
-  --bhsl-todo-background-lightness: 18%;
-  --bhsl-sample-input-hue: 0deg;
-  --bhsl-sample-input-saturation: 100%;
-  --bhsl-sample-input-lightness: 0%;
-  --bhsl-sample-output-hue: 0deg;
-  --bhsl-sample-output-saturation: 100%;
-  --bhsl-sample-output-lightness: 100%;
-  --bhsl-red-hue: 0deg;
-  --bhsl-red-saturation: 100%;
-  --bhsl-red-lightness: 75%;
-  --bhsl-yellow-hue: 60deg;
-  --bhsl-yellow-saturation: 100%;
-  --bhsl-yellow-lightness: 75%;
-  --bhsl-green-hue: 120deg;
-  --bhsl-green-saturation: 100%;
-  --bhsl-green-lightness: 75%;
-  --bhsl-cyan-hue: 180deg;
-  --bhsl-cyan-saturation: 100%;
-  --bhsl-cyan-lightness: 75%;
-  --bhsl-blue-hue: 240deg;
-  --bhsl-blue-saturation: 100%;
-  --bhsl-blue-lightness: 75%;
-  --bhsl-magenta-hue: 300deg;
-  --bhsl-magenta-saturation: 100%;
-  --bhsl-magenta-lightness: 75%;
-  --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);
+@media screen {
+  :where(.bluelib) {
+    --burl-background-full: url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/.jpg);
+    --burl-background-3840: url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/3840.jpg);
+    --burl-background-1920: url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/1920.jpg);
+    --burl-background-1366: url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/1366.jpg);
+    --burl-background-640: url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/640.jpg);
+    --burl-background-360: url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/360.jpg);
+    --bhsl-background-hue: 262deg;
+    --bhsl-background-saturation: 85%;
+    --bhsl-background-lightness: 13%;
+    --bhsl-foreground-hue: 262deg;
+    --bhsl-foreground-saturation: 100%;
+    --bhsl-foreground-lightness: 78%;
+    --bhsl-primary-hue: 53deg;
+    --bhsl-primary-saturation: 100%;
+    --bhsl-primary-lightness: 100%;
+    --bhsl-link-hue: 53deg;
+    --bhsl-link-saturation: 100%;
+    --bhsl-link-lightness: 72%;
+    --bhsl-mark-foreground-hue: 53deg;
+    --bhsl-mark-foreground-saturation: 64%;
+    --bhsl-mark-foreground-lightness: 14%;
+    --bhsl-mark-background-hue: 53deg;
+    --bhsl-mark-background-saturation: 100%;
+    --bhsl-mark-background-lightness: 72%;
+    --bhsl-todo-foreground-hue: 43deg;
+    --bhsl-todo-foreground-saturation: 100%;
+    --bhsl-todo-foreground-lightness: 65%;
+    --bhsl-todo-background-hue: 204deg;
+    --bhsl-todo-background-saturation: 11%;
+    --bhsl-todo-background-lightness: 18%;
+    --bhsl-sample-input-hue: 0deg;
+    --bhsl-sample-input-saturation: 100%;
+    --bhsl-sample-input-lightness: 0%;
+    --bhsl-sample-output-hue: 0deg;
+    --bhsl-sample-output-saturation: 100%;
+    --bhsl-sample-output-lightness: 100%;
+    --bhsl-red-hue: 0deg;
+    --bhsl-red-saturation: 100%;
+    --bhsl-red-lightness: 75%;
+    --bhsl-yellow-hue: 60deg;
+    --bhsl-yellow-saturation: 100%;
+    --bhsl-yellow-lightness: 75%;
+    --bhsl-green-hue: 120deg;
+    --bhsl-green-saturation: 100%;
+    --bhsl-green-lightness: 75%;
+    --bhsl-cyan-hue: 180deg;
+    --bhsl-cyan-saturation: 100%;
+    --bhsl-cyan-lightness: 75%;
+    --bhsl-blue-hue: 240deg;
+    --bhsl-blue-saturation: 100%;
+    --bhsl-blue-lightness: 75%;
+    --bhsl-magenta-hue: 300deg;
+    --bhsl-magenta-saturation: 100%;
+    --bhsl-magenta-lightness: 75%;
+    --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-purplestar.module.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/colors-purplestar.module.min.css

@@ -1 +1 @@
-:where(.bluelib){--bhsl-background-hue:262deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:13%;--bhsl-foreground-hue:262deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:78%;--bhsl-primary-hue:53deg;--bhsl-primary-saturation:100%;--bhsl-primary-lightness:100%;--bhsl-link-hue:53deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:72%;--bhsl-mark-foreground-hue:53deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:53deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:72%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--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)}
+@media screen{:where(.bluelib){--burl-background-full:url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/.jpg);--burl-background-3840:url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/3840.jpg);--burl-background-1920:url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/1920.jpg);--burl-background-1366:url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/1366.jpg);--burl-background-640:url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/640.jpg);--burl-background-360:url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/360.jpg);--bhsl-background-hue:262deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:13%;--bhsl-foreground-hue:262deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:78%;--bhsl-primary-hue:53deg;--bhsl-primary-saturation:100%;--bhsl-primary-lightness:100%;--bhsl-link-hue:53deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:72%;--bhsl-mark-foreground-hue:53deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:53deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:72%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--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-purplestar.root.css

@@ -2,59 +2,67 @@
  * Bluelib Purple Star Colors
  * by <me@steffo.eu>
  */
-:where(body) {
-  --bhsl-background-hue: 262deg;
-  --bhsl-background-saturation: 85%;
-  --bhsl-background-lightness: 13%;
-  --bhsl-foreground-hue: 262deg;
-  --bhsl-foreground-saturation: 100%;
-  --bhsl-foreground-lightness: 78%;
-  --bhsl-primary-hue: 53deg;
-  --bhsl-primary-saturation: 100%;
-  --bhsl-primary-lightness: 100%;
-  --bhsl-link-hue: 53deg;
-  --bhsl-link-saturation: 100%;
-  --bhsl-link-lightness: 72%;
-  --bhsl-mark-foreground-hue: 53deg;
-  --bhsl-mark-foreground-saturation: 64%;
-  --bhsl-mark-foreground-lightness: 14%;
-  --bhsl-mark-background-hue: 53deg;
-  --bhsl-mark-background-saturation: 100%;
-  --bhsl-mark-background-lightness: 72%;
-  --bhsl-todo-foreground-hue: 43deg;
-  --bhsl-todo-foreground-saturation: 100%;
-  --bhsl-todo-foreground-lightness: 65%;
-  --bhsl-todo-background-hue: 204deg;
-  --bhsl-todo-background-saturation: 11%;
-  --bhsl-todo-background-lightness: 18%;
-  --bhsl-sample-input-hue: 0deg;
-  --bhsl-sample-input-saturation: 100%;
-  --bhsl-sample-input-lightness: 0%;
-  --bhsl-sample-output-hue: 0deg;
-  --bhsl-sample-output-saturation: 100%;
-  --bhsl-sample-output-lightness: 100%;
-  --bhsl-red-hue: 0deg;
-  --bhsl-red-saturation: 100%;
-  --bhsl-red-lightness: 75%;
-  --bhsl-yellow-hue: 60deg;
-  --bhsl-yellow-saturation: 100%;
-  --bhsl-yellow-lightness: 75%;
-  --bhsl-green-hue: 120deg;
-  --bhsl-green-saturation: 100%;
-  --bhsl-green-lightness: 75%;
-  --bhsl-cyan-hue: 180deg;
-  --bhsl-cyan-saturation: 100%;
-  --bhsl-cyan-lightness: 75%;
-  --bhsl-blue-hue: 240deg;
-  --bhsl-blue-saturation: 100%;
-  --bhsl-blue-lightness: 75%;
-  --bhsl-magenta-hue: 300deg;
-  --bhsl-magenta-saturation: 100%;
-  --bhsl-magenta-lightness: 75%;
-  --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);
+@media screen {
+  :where(body) {
+    --burl-background-full: url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/.jpg);
+    --burl-background-3840: url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/3840.jpg);
+    --burl-background-1920: url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/1920.jpg);
+    --burl-background-1366: url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/1366.jpg);
+    --burl-background-640: url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/640.jpg);
+    --burl-background-360: url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/360.jpg);
+    --bhsl-background-hue: 262deg;
+    --bhsl-background-saturation: 85%;
+    --bhsl-background-lightness: 13%;
+    --bhsl-foreground-hue: 262deg;
+    --bhsl-foreground-saturation: 100%;
+    --bhsl-foreground-lightness: 78%;
+    --bhsl-primary-hue: 53deg;
+    --bhsl-primary-saturation: 100%;
+    --bhsl-primary-lightness: 100%;
+    --bhsl-link-hue: 53deg;
+    --bhsl-link-saturation: 100%;
+    --bhsl-link-lightness: 72%;
+    --bhsl-mark-foreground-hue: 53deg;
+    --bhsl-mark-foreground-saturation: 64%;
+    --bhsl-mark-foreground-lightness: 14%;
+    --bhsl-mark-background-hue: 53deg;
+    --bhsl-mark-background-saturation: 100%;
+    --bhsl-mark-background-lightness: 72%;
+    --bhsl-todo-foreground-hue: 43deg;
+    --bhsl-todo-foreground-saturation: 100%;
+    --bhsl-todo-foreground-lightness: 65%;
+    --bhsl-todo-background-hue: 204deg;
+    --bhsl-todo-background-saturation: 11%;
+    --bhsl-todo-background-lightness: 18%;
+    --bhsl-sample-input-hue: 0deg;
+    --bhsl-sample-input-saturation: 100%;
+    --bhsl-sample-input-lightness: 0%;
+    --bhsl-sample-output-hue: 0deg;
+    --bhsl-sample-output-saturation: 100%;
+    --bhsl-sample-output-lightness: 100%;
+    --bhsl-red-hue: 0deg;
+    --bhsl-red-saturation: 100%;
+    --bhsl-red-lightness: 75%;
+    --bhsl-yellow-hue: 60deg;
+    --bhsl-yellow-saturation: 100%;
+    --bhsl-yellow-lightness: 75%;
+    --bhsl-green-hue: 120deg;
+    --bhsl-green-saturation: 100%;
+    --bhsl-green-lightness: 75%;
+    --bhsl-cyan-hue: 180deg;
+    --bhsl-cyan-saturation: 100%;
+    --bhsl-cyan-lightness: 75%;
+    --bhsl-blue-hue: 240deg;
+    --bhsl-blue-saturation: 100%;
+    --bhsl-blue-lightness: 75%;
+    --bhsl-magenta-hue: 300deg;
+    --bhsl-magenta-saturation: 100%;
+    --bhsl-magenta-lightness: 75%;
+    --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-purplestar.root.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/colors-purplestar.root.min.css

@@ -1 +1 @@
-:where(body){--bhsl-background-hue:262deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:13%;--bhsl-foreground-hue:262deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:78%;--bhsl-primary-hue:53deg;--bhsl-primary-saturation:100%;--bhsl-primary-lightness:100%;--bhsl-link-hue:53deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:72%;--bhsl-mark-foreground-hue:53deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:53deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:72%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--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)}
+@media screen{:where(body){--burl-background-full:url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/.jpg);--burl-background-3840:url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/3840.jpg);--burl-background-1920:url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/1920.jpg);--burl-background-1366:url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/1366.jpg);--burl-background-640:url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/640.jpg);--burl-background-360:url(../images/kazuend-2KXEb_8G5vo-edited-unsplash/360.jpg);--bhsl-background-hue:262deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:13%;--bhsl-foreground-hue:262deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:78%;--bhsl-primary-hue:53deg;--bhsl-primary-saturation:100%;--bhsl-primary-lightness:100%;--bhsl-link-hue:53deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:72%;--bhsl-mark-foreground-hue:53deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:53deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:72%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--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-royalblue.module.css

@@ -2,59 +2,67 @@
  * Bluelib Royal Blue Colors
  * by <me@steffo.eu>
  */
-:where(.bluelib) {
-  --bhsl-background-hue: 224deg;
-  --bhsl-background-saturation: 64%;
-  --bhsl-background-lightness: 14%;
-  --bhsl-foreground-hue: 212deg;
-  --bhsl-foreground-saturation: 100%;
-  --bhsl-foreground-lightness: 81%;
-  --bhsl-primary-hue: 0deg;
-  --bhsl-primary-saturation: 0%;
-  --bhsl-primary-lightness: 100%;
-  --bhsl-link-hue: 180deg;
-  --bhsl-link-saturation: 100%;
-  --bhsl-link-lightness: 40%;
-  --bhsl-mark-foreground-hue: 32deg;
-  --bhsl-mark-foreground-saturation: 64%;
-  --bhsl-mark-foreground-lightness: 14%;
-  --bhsl-mark-background-hue: 32deg;
-  --bhsl-mark-background-saturation: 100%;
-  --bhsl-mark-background-lightness: 81%;
-  --bhsl-todo-foreground-hue: 43deg;
-  --bhsl-todo-foreground-saturation: 100%;
-  --bhsl-todo-foreground-lightness: 65%;
-  --bhsl-todo-background-hue: 204deg;
-  --bhsl-todo-background-saturation: 11%;
-  --bhsl-todo-background-lightness: 18%;
-  --bhsl-sample-input-hue: 0deg;
-  --bhsl-sample-input-saturation: 100%;
-  --bhsl-sample-input-lightness: 0%;
-  --bhsl-sample-output-hue: 0deg;
-  --bhsl-sample-output-saturation: 100%;
-  --bhsl-sample-output-lightness: 100%;
-  --bhsl-red-hue: 0deg;
-  --bhsl-red-saturation: 100%;
-  --bhsl-red-lightness: 75%;
-  --bhsl-yellow-hue: 60deg;
-  --bhsl-yellow-saturation: 100%;
-  --bhsl-yellow-lightness: 75%;
-  --bhsl-green-hue: 120deg;
-  --bhsl-green-saturation: 100%;
-  --bhsl-green-lightness: 75%;
-  --bhsl-cyan-hue: 180deg;
-  --bhsl-cyan-saturation: 100%;
-  --bhsl-cyan-lightness: 75%;
-  --bhsl-blue-hue: 240deg;
-  --bhsl-blue-saturation: 100%;
-  --bhsl-blue-lightness: 75%;
-  --bhsl-magenta-hue: 300deg;
-  --bhsl-magenta-saturation: 100%;
-  --bhsl-magenta-lightness: 75%;
-  --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);
+@media screen {
+  :where(.bluelib) {
+    --burl-background-full: url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/.jpg);
+    --burl-background-3840: url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/3840.jpg);
+    --burl-background-1920: url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/1920.jpg);
+    --burl-background-1366: url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/1366.jpg);
+    --burl-background-640: url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/640.jpg);
+    --burl-background-360: url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/360.jpg);
+    --bhsl-background-hue: 224deg;
+    --bhsl-background-saturation: 64%;
+    --bhsl-background-lightness: 14%;
+    --bhsl-foreground-hue: 212deg;
+    --bhsl-foreground-saturation: 100%;
+    --bhsl-foreground-lightness: 81%;
+    --bhsl-primary-hue: 0deg;
+    --bhsl-primary-saturation: 0%;
+    --bhsl-primary-lightness: 100%;
+    --bhsl-link-hue: 180deg;
+    --bhsl-link-saturation: 100%;
+    --bhsl-link-lightness: 40%;
+    --bhsl-mark-foreground-hue: 32deg;
+    --bhsl-mark-foreground-saturation: 64%;
+    --bhsl-mark-foreground-lightness: 14%;
+    --bhsl-mark-background-hue: 32deg;
+    --bhsl-mark-background-saturation: 100%;
+    --bhsl-mark-background-lightness: 81%;
+    --bhsl-todo-foreground-hue: 43deg;
+    --bhsl-todo-foreground-saturation: 100%;
+    --bhsl-todo-foreground-lightness: 65%;
+    --bhsl-todo-background-hue: 204deg;
+    --bhsl-todo-background-saturation: 11%;
+    --bhsl-todo-background-lightness: 18%;
+    --bhsl-sample-input-hue: 0deg;
+    --bhsl-sample-input-saturation: 100%;
+    --bhsl-sample-input-lightness: 0%;
+    --bhsl-sample-output-hue: 0deg;
+    --bhsl-sample-output-saturation: 100%;
+    --bhsl-sample-output-lightness: 100%;
+    --bhsl-red-hue: 0deg;
+    --bhsl-red-saturation: 100%;
+    --bhsl-red-lightness: 75%;
+    --bhsl-yellow-hue: 60deg;
+    --bhsl-yellow-saturation: 100%;
+    --bhsl-yellow-lightness: 75%;
+    --bhsl-green-hue: 120deg;
+    --bhsl-green-saturation: 100%;
+    --bhsl-green-lightness: 75%;
+    --bhsl-cyan-hue: 180deg;
+    --bhsl-cyan-saturation: 100%;
+    --bhsl-cyan-lightness: 75%;
+    --bhsl-blue-hue: 240deg;
+    --bhsl-blue-saturation: 100%;
+    --bhsl-blue-lightness: 75%;
+    --bhsl-magenta-hue: 300deg;
+    --bhsl-magenta-saturation: 100%;
+    --bhsl-magenta-lightness: 75%;
+    --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-royalblue.module.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/colors-royalblue.module.min.css

@@ -1 +1 @@
-:where(.bluelib){--bhsl-background-hue:224deg;--bhsl-background-saturation:64%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:212deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:81%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:0%;--bhsl-primary-lightness:100%;--bhsl-link-hue:180deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:40%;--bhsl-mark-foreground-hue:32deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:32deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--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)}
+@media screen{:where(.bluelib){--burl-background-full:url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/.jpg);--burl-background-3840:url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/3840.jpg);--burl-background-1920:url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/1920.jpg);--burl-background-1366:url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/1366.jpg);--burl-background-640:url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/640.jpg);--burl-background-360:url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/360.jpg);--bhsl-background-hue:224deg;--bhsl-background-saturation:64%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:212deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:81%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:0%;--bhsl-primary-lightness:100%;--bhsl-link-hue:180deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:40%;--bhsl-mark-foreground-hue:32deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:32deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--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-royalblue.root.css

@@ -2,59 +2,67 @@
  * Bluelib Royal Blue Colors
  * by <me@steffo.eu>
  */
-:where(body) {
-  --bhsl-background-hue: 224deg;
-  --bhsl-background-saturation: 64%;
-  --bhsl-background-lightness: 14%;
-  --bhsl-foreground-hue: 212deg;
-  --bhsl-foreground-saturation: 100%;
-  --bhsl-foreground-lightness: 81%;
-  --bhsl-primary-hue: 0deg;
-  --bhsl-primary-saturation: 0%;
-  --bhsl-primary-lightness: 100%;
-  --bhsl-link-hue: 180deg;
-  --bhsl-link-saturation: 100%;
-  --bhsl-link-lightness: 40%;
-  --bhsl-mark-foreground-hue: 32deg;
-  --bhsl-mark-foreground-saturation: 64%;
-  --bhsl-mark-foreground-lightness: 14%;
-  --bhsl-mark-background-hue: 32deg;
-  --bhsl-mark-background-saturation: 100%;
-  --bhsl-mark-background-lightness: 81%;
-  --bhsl-todo-foreground-hue: 43deg;
-  --bhsl-todo-foreground-saturation: 100%;
-  --bhsl-todo-foreground-lightness: 65%;
-  --bhsl-todo-background-hue: 204deg;
-  --bhsl-todo-background-saturation: 11%;
-  --bhsl-todo-background-lightness: 18%;
-  --bhsl-sample-input-hue: 0deg;
-  --bhsl-sample-input-saturation: 100%;
-  --bhsl-sample-input-lightness: 0%;
-  --bhsl-sample-output-hue: 0deg;
-  --bhsl-sample-output-saturation: 100%;
-  --bhsl-sample-output-lightness: 100%;
-  --bhsl-red-hue: 0deg;
-  --bhsl-red-saturation: 100%;
-  --bhsl-red-lightness: 75%;
-  --bhsl-yellow-hue: 60deg;
-  --bhsl-yellow-saturation: 100%;
-  --bhsl-yellow-lightness: 75%;
-  --bhsl-green-hue: 120deg;
-  --bhsl-green-saturation: 100%;
-  --bhsl-green-lightness: 75%;
-  --bhsl-cyan-hue: 180deg;
-  --bhsl-cyan-saturation: 100%;
-  --bhsl-cyan-lightness: 75%;
-  --bhsl-blue-hue: 240deg;
-  --bhsl-blue-saturation: 100%;
-  --bhsl-blue-lightness: 75%;
-  --bhsl-magenta-hue: 300deg;
-  --bhsl-magenta-saturation: 100%;
-  --bhsl-magenta-lightness: 75%;
-  --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);
+@media screen {
+  :where(body) {
+    --burl-background-full: url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/.jpg);
+    --burl-background-3840: url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/3840.jpg);
+    --burl-background-1920: url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/1920.jpg);
+    --burl-background-1366: url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/1366.jpg);
+    --burl-background-640: url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/640.jpg);
+    --burl-background-360: url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/360.jpg);
+    --bhsl-background-hue: 224deg;
+    --bhsl-background-saturation: 64%;
+    --bhsl-background-lightness: 14%;
+    --bhsl-foreground-hue: 212deg;
+    --bhsl-foreground-saturation: 100%;
+    --bhsl-foreground-lightness: 81%;
+    --bhsl-primary-hue: 0deg;
+    --bhsl-primary-saturation: 0%;
+    --bhsl-primary-lightness: 100%;
+    --bhsl-link-hue: 180deg;
+    --bhsl-link-saturation: 100%;
+    --bhsl-link-lightness: 40%;
+    --bhsl-mark-foreground-hue: 32deg;
+    --bhsl-mark-foreground-saturation: 64%;
+    --bhsl-mark-foreground-lightness: 14%;
+    --bhsl-mark-background-hue: 32deg;
+    --bhsl-mark-background-saturation: 100%;
+    --bhsl-mark-background-lightness: 81%;
+    --bhsl-todo-foreground-hue: 43deg;
+    --bhsl-todo-foreground-saturation: 100%;
+    --bhsl-todo-foreground-lightness: 65%;
+    --bhsl-todo-background-hue: 204deg;
+    --bhsl-todo-background-saturation: 11%;
+    --bhsl-todo-background-lightness: 18%;
+    --bhsl-sample-input-hue: 0deg;
+    --bhsl-sample-input-saturation: 100%;
+    --bhsl-sample-input-lightness: 0%;
+    --bhsl-sample-output-hue: 0deg;
+    --bhsl-sample-output-saturation: 100%;
+    --bhsl-sample-output-lightness: 100%;
+    --bhsl-red-hue: 0deg;
+    --bhsl-red-saturation: 100%;
+    --bhsl-red-lightness: 75%;
+    --bhsl-yellow-hue: 60deg;
+    --bhsl-yellow-saturation: 100%;
+    --bhsl-yellow-lightness: 75%;
+    --bhsl-green-hue: 120deg;
+    --bhsl-green-saturation: 100%;
+    --bhsl-green-lightness: 75%;
+    --bhsl-cyan-hue: 180deg;
+    --bhsl-cyan-saturation: 100%;
+    --bhsl-cyan-lightness: 75%;
+    --bhsl-blue-hue: 240deg;
+    --bhsl-blue-saturation: 100%;
+    --bhsl-blue-lightness: 75%;
+    --bhsl-magenta-hue: 300deg;
+    --bhsl-magenta-saturation: 100%;
+    --bhsl-magenta-lightness: 75%;
+    --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-royalblue.root.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/colors-royalblue.root.min.css

@@ -1 +1 @@
-:where(body){--bhsl-background-hue:224deg;--bhsl-background-saturation:64%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:212deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:81%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:0%;--bhsl-primary-lightness:100%;--bhsl-link-hue:180deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:40%;--bhsl-mark-foreground-hue:32deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:32deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--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)}
+@media screen{:where(body){--burl-background-full:url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/.jpg);--burl-background-3840:url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/3840.jpg);--burl-background-1920:url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/1920.jpg);--burl-background-1366:url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/1366.jpg);--burl-background-640:url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/640.jpg);--burl-background-360:url(../images/fabrice-nerfin-puHQJZd3MDg-unsplash/360.jpg);--bhsl-background-hue:224deg;--bhsl-background-saturation:64%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:212deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:81%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:0%;--bhsl-primary-lightness:100%;--bhsl-link-hue:180deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:40%;--bhsl-mark-foreground-hue:32deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:32deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--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/fonts-fira-ghpages.module.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/fonts-fira-ghpages.root.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/fun.module.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/fun.root.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/glass.module.css

@@ -48,11 +48,4 @@
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
     backdrop-filter: none;
   }
-  :where(.bluelib) :where(.panel):where(.modifier-todo) {
-    background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / 0.3);
-    backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%);
-  }
-  :where(.bluelib) :where(.panel) :where(.panel):where(.modifier-todo) {
-    background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
-  }
 }

dist/glass.module.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/glass.module.min.css

@@ -1 +1 @@
-:where(.bluelib){--b-panel-blur:16px;--b-panel-initial-opacity:0.3;--b-panel-nested-opacity:0.075}@supports (backdrop-filter:blur(var(--b-panel-blur))){:where(.bluelib) :where(.panel),:where(.bluelib) :where(.table):where(.panel)>:where(.table-caption){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity));backdrop-filter:blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))}:where(.bluelib) :where(.panel) :where(.panel),:where(.bluelib) :where(.table):where(.panel)>:where(.table-caption) :where(.panel){background-color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));backdrop-filter:none}:where(.bluelib) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));backdrop-filter:none}:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness))}:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness))}:where(.bluelib) :where(.modifier-todo),:where(.bluelib) :where(.panel):where(.modifier-todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}:where(.bluelib) :where(.modifier-todo) :where(.panel),:where(.bluelib) :where(.panel):where(.modifier-todo) :where(.panel){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));backdrop-filter:none}:where(.bluelib) :where(.panel):where(.modifier-todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / .3);backdrop-filter:blur(var(--b-panel-blur)) grayscale(100%)}:where(.bluelib) :where(.panel) :where(.panel):where(.modifier-todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}}
+:where(.bluelib){--b-panel-blur:16px;--b-panel-initial-opacity:0.3;--b-panel-nested-opacity:0.075}@supports (backdrop-filter:blur(var(--b-panel-blur))){:where(.bluelib) :where(.panel),:where(.bluelib) :where(.table):where(.panel)>:where(.table-caption){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity));backdrop-filter:blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))}:where(.bluelib) :where(.panel) :where(.panel),:where(.bluelib) :where(.table):where(.panel)>:where(.table-caption) :where(.panel){background-color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));backdrop-filter:none}:where(.bluelib) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));backdrop-filter:none}:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness))}:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness))}:where(.bluelib) :where(.modifier-todo),:where(.bluelib) :where(.panel):where(.modifier-todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}:where(.bluelib) :where(.modifier-todo) :where(.panel),:where(.bluelib) :where(.panel):where(.modifier-todo) :where(.panel){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));backdrop-filter:none}}

dist/glass.root.css

@@ -48,11 +48,4 @@
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
     backdrop-filter: none;
   }
-  :where(body) :where(.panel):where(.todo) {
-    background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / 0.3);
-    backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%);
-  }
-  :where(body) :where(.panel) :where(.panel):where(.todo) {
-    background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
-  }
 }

dist/glass.root.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/glass.root.min.css

@@ -1 +1 @@
-:where(body){--b-panel-blur:16px;--b-panel-initial-opacity:0.3;--b-panel-nested-opacity:0.075}@supports (backdrop-filter:blur(var(--b-panel-blur))){:where(body) :where(.panel),:where(body) :where(table):where(.panel)>:where(caption){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity));backdrop-filter:blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))}:where(body) :where(.panel) :where(.panel),:where(body) :where(table):where(.panel)>:where(caption) :where(.panel){background-color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));backdrop-filter:none}:where(body) :where(.panel):where(mark,.mark),:where(body) :where(mark,.mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));backdrop-filter:none}:where(body) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(mark,.mark),:where(body) :where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(mark,.mark) :where(mark,.mark){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness))}:where(body) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark) :where(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(mark,.mark) :where(mark,.mark),:where(body) :where(mark,.mark) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(mark,.mark) :where(.panel):where(mark,.mark) :where(mark,.mark),:where(body) :where(mark,.mark) :where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(mark,.mark) :where(mark,.mark) :where(mark,.mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness))}:where(body) :where(.panel):where(.todo),:where(body) :where(.todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}:where(body) :where(.panel):where(.todo) :where(.panel),:where(body) :where(.todo) :where(.panel){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));backdrop-filter:none}:where(body) :where(.panel):where(.todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / .3);backdrop-filter:blur(var(--b-panel-blur)) grayscale(100%)}:where(body) :where(.panel) :where(.panel):where(.todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}}
+:where(body){--b-panel-blur:16px;--b-panel-initial-opacity:0.3;--b-panel-nested-opacity:0.075}@supports (backdrop-filter:blur(var(--b-panel-blur))){:where(body) :where(.panel),:where(body) :where(table):where(.panel)>:where(caption){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity));backdrop-filter:blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))}:where(body) :where(.panel) :where(.panel),:where(body) :where(table):where(.panel)>:where(caption) :where(.panel){background-color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));backdrop-filter:none}:where(body) :where(.panel):where(mark,.mark),:where(body) :where(mark,.mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));backdrop-filter:none}:where(body) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(mark,.mark),:where(body) :where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(mark,.mark) :where(mark,.mark){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness))}:where(body) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark) :where(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(mark,.mark) :where(mark,.mark),:where(body) :where(mark,.mark) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(mark,.mark) :where(.panel):where(mark,.mark) :where(mark,.mark),:where(body) :where(mark,.mark) :where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(mark,.mark) :where(mark,.mark) :where(mark,.mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness))}:where(body) :where(.panel):where(.todo),:where(body) :where(.todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}:where(body) :where(.panel):where(.todo) :where(.panel),:where(body) :where(.todo) :where(.panel){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));backdrop-filter:none}}

dist/layouts-center.module.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/layouts-center.root.less

@@ -1,4 +1,5 @@
 // Mixins
+@import (less) "../src/mixins/bg.less";
 @import (less) "../src/mixins/fonts.less";
 @import (less) "../src/mixins/hsl.less";
 

dist/layouts-flex.module.css

@@ -0,0 +1,23 @@
+/**
+ * Bluelib Layouts Flex
+ * by <me@steffo.eu>
+ */
+:where(.bluelib) :where(.layout-flex-row),
+:where(.bluelib) :where(.layout-flex-rrow),
+:where(.bluelib) :where(.layout-flex-column),
+:where(.bluelib) :where(.layout-flex-rcolumn) {
+  display: flex;
+  gap: 8px;
+}
+:where(.bluelib) :where(.layout-flex-row) {
+  flex-direction: row;
+}
+:where(.bluelib) :where(.layout-flex-rrow) {
+  flex-direction: row-reverse;
+}
+:where(.bluelib) :where(.layout-flex-column) {
+  flex-direction: column;
+}
+:where(.bluelib) :where(.layout-flex-rcolumn) {
+  flex-direction: column-reverse;
+}

dist/layouts-flex.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/layouts/layouts-flex.less";
+

dist/layouts-flex.module.min.css

@@ -0,0 +1 @@
+:where(.bluelib) :where(.layout-flex-column),:where(.bluelib) :where(.layout-flex-rcolumn),:where(.bluelib) :where(.layout-flex-row),:where(.bluelib) :where(.layout-flex-rrow){display:flex;gap:8px}:where(.bluelib) :where(.layout-flex-row){flex-direction:row}:where(.bluelib) :where(.layout-flex-rrow){flex-direction:row-reverse}:where(.bluelib) :where(.layout-flex-column){flex-direction:column}:where(.bluelib) :where(.layout-flex-rcolumn){flex-direction:column-reverse}

dist/layouts-flex.root.css

@@ -0,0 +1,23 @@
+/**
+ * Bluelib Layouts Flex
+ * by <me@steffo.eu>
+ */
+:where(body) :where(.layout-flex-row),
+:where(body) :where(.layout-flex-rrow),
+:where(body) :where(.layout-flex-column),
+:where(body) :where(.layout-flex-rcolumn) {
+  display: flex;
+  gap: 8px;
+}
+:where(body) :where(.layout-flex-row) {
+  flex-direction: row;
+}
+:where(body) :where(.layout-flex-rrow) {
+  flex-direction: row-reverse;
+}
+:where(body) :where(.layout-flex-column) {
+  flex-direction: column;
+}
+:where(body) :where(.layout-flex-rcolumn) {
+  flex-direction: column-reverse;
+}

dist/layouts-flex.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/layouts/layouts-flex.less";
+

dist/layouts-flex.root.min.css

@@ -0,0 +1 @@
+:where(body) :where(.layout-flex-column),:where(body) :where(.layout-flex-rcolumn),:where(body) :where(.layout-flex-row),:where(body) :where(.layout-flex-rrow){display:flex;gap:8px}:where(body) :where(.layout-flex-row){flex-direction:row}:where(body) :where(.layout-flex-rrow){flex-direction:row-reverse}:where(body) :where(.layout-flex-column){flex-direction:column}:where(body) :where(.layout-flex-rcolumn){flex-direction:column-reverse}

examples/index.css

@@ -1,7 +0,0 @@
-#body :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
-	min-width: 360px;
-}
-
-#body .panel :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
-	min-width: unset;
-}

examples/index.html

@@ -13,6 +13,7 @@
 		<link rel="icon" type="image/x-icon" href="../favicon.ico">
 		<link rel="stylesheet/less" type="text/css" href="../dist/base.root.less">
 		<link rel="stylesheet/less" type="text/css" href="../dist/layouts-center.root.less">
+		<link rel="stylesheet/less" type="text/css" href="../dist/layouts-flex.root.less">
 		<link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less">
 		<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">
@@ -21,7 +22,6 @@
 		<link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less">
 		<link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less">
 		<link rel="stylesheet/less" type="text/css" href="../dist/fun.root.less">
-		<link rel="stylesheet" type="text/css" href="./index.css">
 		<script src="index.js"></script>
 		<script>
 			less = {
@@ -32,7 +32,6 @@
 		<title>Bluelib</title>
 	</head>
 	<body class="theme-bluelib layout-center">
-		<img class="layout-center-background" alt="" src="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg">
 		<header>
 			<h1>
 				Bluelib
@@ -75,8 +74,8 @@
 					</h3>
 					<ol>
 						<li><a href="#chapter-welcome">Welcome to Bluelib!</a></li>
-						<li><a href="#chapter-targets">Rulesets, selectorsets, targets</a></li>
-						<li><a href="#chapter-install">Installation and usage</a></li>
+						<li><a href="#chapter-configure">Configuration</a></li>
+						<li><a href="#chapter-install">Installation</a></li>
 						<li><a href="#chapter-panels">Panels</a></li>
 						<li><a href="#chapter-chapters">Chapters</a></li>
 						<li><a href="#chapter-modifiers">Modifiers</a></li>
@@ -154,139 +153,165 @@
 					</ul>
 				</section>
 			</div>
-			<div class="chapter-3" id="chapter-targets">
+			<div class="chapter-1" id="chapter-configure">
 				<h2>
-					Rulesets, selectorsets, targets
+					Configuration
 				</h2>
 				<section class="panel box" id="panel-targets">
 					<h3>
 						Targets
 					</h3>
 					<p>
-						A Bluelib <dfn id="dfn-target">target</dfn> is a CSS document where CSS rulesets of a certain type are grouped together.
+						Bluelib is composed by many separate CSS documents, each one providing different features which may or may not be desired in a certain website.
 					</p>
 					<p>
-						It is composed by two parts: the <dfn id="dfn-ruleset">ruleset</dfn>, determining the CSS rules to use, and the
-						<dfn id="dfn-selectorset">selectorset</dfn>, determining the elements to apply the CSS rules on.
-					</p>
-					<hr/>
-					<p>
-						<i>Targets</i> always have a predictable name, which is:
-					</p>
-					<div class="panel">
-						<p>
-							<code>dist/<var>RULESET</var>.<var>SELECTORSET</var>.css</code>
-						</p>
-					</div>
-					<p>
-						Be sure to choose the ones matching your needs!
-					</p>
-					<hr/>
-					<p>
-						By running <code>dist/_build.sh</code>, new targets are generated and compiled from <a href="https://lesscss.org/">Less</a> to CSS.
+						A single one of these documents is called a <dfn id="dfn-target">target</dfn>.
 					</p>
 					<p>
-						The <a href="https://en.wikipedia.org/wiki/Cartesian_product">cartesian product</a> is applied between all <i>rulesets</i> in
-						<code>src/rulesets</code> and all <i>selectorsets</i> in <code>src/selectorsets</code>, compiling a new target for each pair.
+						A <i>target</i> is composed by two parts:
 					</p>
+					<ul>
+						<li>a <dfn id="dfn-ruleset">ruleset</dfn>, which defines <b>which rules</b> should apply to the page;</li>
+						<li>a <dfn id="dfn-selectorset">selectorset</dfn>, which defines <b>on which elements</b> the changes should be applied to.</li>
+					</ul>
 				</section>
-				<section class="panel box rainbow" id="panel-rulesets todo">
+			</div>
+			<div class="chapter-3" id="chapter-rulesets">
+				<form class="panel box" id="panel-rulesets-toggleable" name="rulesets-toggleable">
 					<h3>
-						Available rulesets
+						Generic rulesets
 					</h3>
+					<p>
+						Enable the rulesets providing the features you need, and opt out of the others to keep your page as lightweight as possible!
+					</p>
 					<dl>
 						<dt>
-							<label class="fade"><input type="checkbox" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-base" onclick="toggleStyle('less:dist-base:root')"> Base</label>
+							<label class="fade" title="base"><input type="checkbox" autocomplete="off" disabled checked name="ruleset-base" value="base"> Base</label>
 						</dt>
 						<dd>
 							The base <i>ruleset</i>, providing the layout and basic high contrast theming.
 						</dd>
 						<dt>
-							<label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-classic" onclick="toggleStyle('less:dist-classic:root')"> Classic</label>
+							<label class="fade" title="layouts-center"><input type="checkbox" autocomplete="off" disabled checked name="ruleset-layouts-center" value="layouts-center"> Layout: Center</label>
+						</dt>
+						<dd>
+							<mark>Experimental.</mark>
+							Gives a header at the top, a footer at the bottom, and fits the content between the two.
+						</dd>
+						<dt>
+							<label class="fade" title="layouts-flex"><input type="checkbox" autocomplete="off" disabled name="ruleset-layouts-flex" value="layouts-flex"> Layout: Flex</label>
+						</dt>
+						<dd>
+							<mark>Experimental.</mark>
+							Allows you to quickly customize the positioning of panels via pre-made flex classes and the <code>flex-basis</code> property.
+						</dd>
+						<dt>
+							<label class="fade" title="classic"><input type="checkbox" autocomplete="off" disabled checked name="ruleset-classic" value="classic"> Classic</label>
 						</dt>
 						<dd>
 							Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders.
 						</dd>
 						<dt>
-							<label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-glass" onclick="toggleStyle('less:dist-glass:root')"> Glass</label>
+							<label class="fade" title="glass"><input type="checkbox" autocomplete="off" disabled checked name="ruleset-glass" value="glass"> Glass</label>
 						</dt>
 						<dd>
 							Made to celebrate the addition of <code>backdrop-filter</code> to Firefox, makes panels have a <q>stained glass</q> background.
 						</dd>
 						<dt>
-							<label class="fade"><input type="checkbox" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:dist-fun:root')"> Fun</label>
+							<label class="fade" title="fun"><input type="checkbox" autocomplete="off" disabled name="ruleset-fun" value="fun"> Fun</label>
 						</dt>
 						<dd>
 							<mark>Experimental.</mark>
 							<i>Ruleset</i> with bizzare or buggy but fun rules.
 						</dd>
-						<dt>Layouts</dt>
+					</dl>
+				</form>
+				<form class="panel box" id="panel-rulesets-colors" name="rulesets-colors">
+					<h3>
+						Color rulesets
+					</h3>
+					<p>
+						Pick your preferred color palette among these ones!
+					</p>
+					<dl>
+						<dt>
+							<label class="fade" title="<nothing>"><input type="radio" autocomplete="off" disabled checked name="ruleset-colors" value=""> None</label>
+						</dt>
 						<dd>
-							<dl>
-								<dt>
-									<label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:dist-layouts-center:root')"> Center</label>
-								</dt>
-								<dd>
-									Gives the page a background, a header at the top, a footer at the bottom, and fits the content between the two.
-								</dd>
-							</dl>
+							If no color ruleset is applied, Bluelib defaults to a plain black-on-white palette.
 						</dd>
-						<dt>Colors</dt>
+						<dt>
+							<label class="fade" title="colors-royalblue"><input type="radio" autocomplete="off" disabled checked name="ruleset-colors" value="royalblue"> Royal Blue</label>
+						</dt>
 						<dd>
-							<dl>
-								<dt>
-									<label class="fade"><input type="radio" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-royalblue:root', 'fabrice-nerfin-puHQJZd3MDg-unsplash.jpg')"> Royal Blue</label>
-								</dt>
-								<dd>
-									<a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
-								</dd>
-								<dt>
-									<label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-amber:root', 'anastasiia-chepinska-lcfH0p6emhw-unsplash-edited.jpg')"> Gestione Amber</label>
-								</dt>
-								<dd>
-									<a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
-								</dd>
-								<dt>
-									<label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-pixeldawn:root', 'pixeldawn-viktya.png')"> Pixel Dawn</label>
-								</dt>
-								<dd>
-									A theme developed in collaboration with Viktya, featuring a pixelated beach-side sunrise.
-								</dd>
-								<dt>
-									<label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-purplestar:root', 'kazuend-2KXEb_8G5vo-unsplash-edited.jpg')"> Purple Star</label>
-								</dt>
-								<dd>
-									A purple-ish theme for <a href="https://www.starshard.studio">Star Shard Studio</a>.
-								</dd>
-							</dl>
+							<a href="https://github.com/Steffo99">Steffo</a>'s signature color palette, based upon RYG⁵'s logo colors.
 						</dd>
-						<dt>Fonts</dt>
+						<dt>
+							<label class="fade" title="colors-amber"><input type="radio" autocomplete="off" disabled name="ruleset-colors" value="amber"> Gestione Amber</label>
+						</dt>
 						<dd>
-							<dl>
-								<dt><label class="fade"><input type="radio" autocomplete="off" disabled checked name="ruleset-fonts"> Fira</label></dt>
-								<dd>
-									Font theme based upon Mozilla's <a href="https://github.com/mozilla/Fira">Fira</a> font.
-								</dd>
-							</dl>
+							<a href="https://github.com/Nemesis-FT">Nemesis</a>' own color palette, with a "coffee-like" look.
+						</dd>
+						<dt>
+							<label class="fade" title="colors-pixeldawn"><input type="radio" autocomplete="off" disabled name="ruleset-colors" value="pixeldawn"> Pixel Dawn</label>
+						</dt>
+						<dd>
+							A ruleset developed in collaboration with <a href="https://viktya.github.io/">Viktya</a>, featuring a pixelated beach-side sunrise.
+						</dd>
+						<dt>
+							<label class="fade" title="colors-purplestar"><input type="radio" autocomplete="off" disabled name="ruleset-colors" value="purplestar"> Purple Star</label>
+						</dt>
+						<dd>
+							A ruleset with a purple-yellow palette for <a href="https://www.starshard.studio">Star Shard Studio</a>.
 						</dd>
 					</dl>
-				</section>
-				<section class="panel box" id="panel-selectorsets">
+				</form>
+				<form class="panel box" id="panel-rulesets-fonts" name="rulesets-fonts">
 					<h3>
-						Available selectorsets
+						Font rulesets
 					</h3>
+					<p>
+						Pick your preferred fonts among these ones!
+					</p>
 					<dl>
-						<dt><label class="fade"><input type="radio" autocomplete="off" disabled checked name="selectorset"> Root</label></dt>
+						<dt>
+							<label class="fade" title="fonts-fira-ghpages"><input type="radio" autocomplete="off" disabled checked name="ruleset-fonts" value=""> None</label>
+						</dt>
+						<dd>
+							If no font ruleset is applied, Bluelib defaults to using the browser's fonts.
+						</dd>
+						<dt>
+							<label class="fade" title="fonts-fira-ghpages"><input type="radio" autocomplete="off" disabled checked name="ruleset-fonts" value="fira-ghpages"> Fira</label>
+						</dt>
+						<dd>
+							Font theme based upon Mozilla's <a href="https://github.com/mozilla/Fira">Fira</a> fonts.
+						</dd>
+					</dl>
+				</form>
+				<form class="panel box" id="panel-selectorsets" name="selectorsets">
+					<h3>
+						Possible selectorsets
+					</h3>
+					<p>
+						Choose the selectorset which better suits your needs!
+					</p>
+					<dl>
+						<dt><label class="fade"><input type="radio" autocomplete="off" disabled checked name="selectorsets" value="root"> Root</label></dt>
 						<dd>
 							Simple selectors for usage in plain HTML pages, with short and human-friendly class names.
 						</dd>
-						<dt><label class="fade"><input type="radio" autocomplete="off" disabled name="selectorset"> Module</label></dt>
+						<dt><label class="fade"><input type="radio" autocomplete="off" disabled name="selectorsets" value="module"> Module</label></dt>
 						<dd>
 							All selectors use class names, allowing the usage of the target with
-							<a href="https://github.com/css-modules/css-modules">CSS Modules</a>. Useful for React or similar web app projects.
+							<a href="https://github.com/css-modules/css-modules">CSS Modules</a>. Useful to create React component packages or in any cases you want isolation between Bluelib and the rest of your page.
 						</dd>
 					</dl>
-				</section>
+					<div class="panel parenthesis">
+						<p>
+							Since it's not possible to preview selectorset changes, this page will always use the <b>Root</b> selectorset, and the toggle above will only influence the installation instructions below.
+						</p>
+					</div>
+				</form>
 			</div>
 			<div class="chapter-3" id="chapter-install">
 				<h2>
@@ -297,24 +322,46 @@
 						Via UNPKG
 					</h3>
 					<p>
-						The easiest way to use Bluelib on your website is by using <a href="https://unpkg.com/">UNPKG</a>.
-					</p>
-					<p>
-						Simply link the stylesheets in the header of your project like this:
+						You can quickly add Bluelib to a simple website by adding the targets using <code>&lt;link&gt;</code> tags and the <a href="https://unpkg.com/">UNPKG</a> CDN, like this:
 					</p>
 					<div class="panel">
 						<code>
 							&lt;link <wbr>rel=&quot;stylesheet&quot; <wbr>href=&quot;https://unpkg.com/@steffo/bluelib<wbr>@<var>VERSION</var><wbr>/dist/<wbr><var>RULESET</var>.<var>SELECTORSET</var>.min.css&quot;<wbr> type=&quot;text/css&quot;<wbr> /&gt;
 						</code>
 					</div>
+					<p>
+						To use the targets currently enabled in this page, you should use:
+					</p>
+					<div class="panel fade" id="js-unpkg-targets">
+						Waiting for JavaScript to load...
+					</div>
 				</section>
-				<section class="panel box todo" id="panel-installtbd">
+				<section class="panel box" id="panel-yarn">
 					<h3>
-						Coming soon
+						Via a bundler
 					</h3>
 					<p>
-						More installation methods coming soon!
+						If you're building a website with a framework such as <a href="https://nextjs.org/">Next.JS</a>, you'll want first to install Bluelib via your package manager:
 					</p>
+					<div class="panel">
+						<code>
+							$ yarn add <a href="https://www.npmjs.com/package/@steffo/bluelib">@steffo/bluelib</a>
+						</code>
+					</div>
+					<p>
+						Then, you'll want to import the targets you desire at your website's root:
+					</p>
+					<div class="panel">
+						<code>
+							import <wbr>"@steffo/bluelib/dist/<wbr><var>RULESET</var>.<var>SELECTORSET</var>.css";
+						</code>
+					</div>
+					<p>
+						To use the targets currently enabled in this page, you should use:
+					</p>
+					<div class="panel fade" id="js-yarn-targets">
+						Waiting for JavaScript to load...
+					</div>
 				</section>
 			</div>
 			<div class="chapter-4" id="chapter-panels">
@@ -1710,7 +1757,7 @@ Contents
 						</p>
 					</form>
 				</section>
-				<section class="panel box todo" id="panel-range">
+				<section class="panel box" id="panel-range">
 					<h3>
 						Range
 					</h3>

examples/index.js

@@ -1,85 +1,92 @@
+/**
+ * (Ab)use UNPKG to retrieve the latest Bluelib semantic version.
+ *
+ * @returns {Promise<string>}
+ */
+async function getLatestSemver() {
+	const resp = await fetch("https://unpkg.com/@steffo/bluelib/package.json")
+	const data = await resp.json()
+	return data.version
+}
+
+/**
+ * The latest version of Bluelib, or `undefined` if it has not been retrieved yet.
+ *
+ * @type {string | undefined}
+ */
+let version = undefined
+
+/**
+ * Initialize {@link version} by calling {@link getLatestSemver}.
+ */
+async function initVersion() {
+	console.debug("[Bluelib] Getting version info via UNPKG...")
+	version = await getLatestSemver()
+	console.info("[Bluelib] Latest Bluelib version is:", version)
+}
+
+
+/**
+ * {@link RegExp} to acquire the base name (`"classic"`) from a Less stylesheet id (`"less:dist-classic:root"`).
+ *
+ * @type {RegExp}
+ */
+const baseNameFromStyleIdRegex = new RegExp("^less:dist-([a-z-]+):root$")
+
+/**
+ * Acquire the base name (`"classic"`) from a Less stylesheet id (`"less:dist-classic:root"`).
+ *
+ * @param styleId The Less stylesheet id (`"less:dist-classic:root"`).
+ * @returns {string | undefined} The base name (`"classic"`).
+ */
+function getBaseNameFromStyleId(styleId) {
+	return styleId.match(baseNameFromStyleIdRegex)[1]
+}
+
+/**
+ * Generate the Less stylesheet id (`"less:dist-classic:root"`) from a base name (`"classic"`).
+ */
+function getStyleIdFromBaseName(baseName) {
+	return `less:dist-${baseName}:root`
+}
+
 /**
  * Check if the less compiler is done rendering Less stylesheets into CSS.
  *
  * @returns {boolean} `true` if the rendering is complete, `false` otherwise.
  */
 function isLessDone() {
-	const lessSheets = document.querySelectorAll("link[rel=\"stylesheet/less\"]")
-	const cssSheets = document.querySelectorAll("style")
+	const lessSheets = document.querySelectorAll("head link[rel=\"stylesheet/less\"]")
+	const cssSheets = document.querySelectorAll("head style")
 
 	return lessSheets.length === cssSheets.length
 }
 
-
 /**
  * Pause an async function until {@link isLessDone Less is done}.
  *
  * @returns {Promise<void>} Awaitable that waits until {@link isLessDone Less is done}.
  */
 async function sleepUntilLessIsDone() {
+	console.debug("[Bluelib] Waiting for Less to finish compiling stylesheets...")
 	while(!isLessDone()) {
 		await new Promise(resolve => setTimeout(resolve, 100))
-		console.debug("[Bluelib] Less seems to be done processing.")
 	}
+	console.debug("[Bluelib] Less seems to have finished compiling stylesheets.")
 }
 
 
 /**
- * List of stylesheet ids that should be enabled on page load.
+ * Return a map of base names to their corresponding {@link HTMLStyleElement}s.
  *
- * @type {string[]}
+ * @returns {{[string]: HTMLStyleElement}}
  */
-const enabledByDefault = [
-	"less:dist-base:root",
-	"less:dist-classic:root",
-	"less:dist-glass:root",
-	"less:dist-layouts-center:root",
-	"less:dist-colors-royalblue:root",
-	"less:dist-fonts-fira-ghpages:root",
-]
-
-
-/**
- * List of all `<style>` {@link HTMLElement}s with an id starting with `less:dist`.
- *
- * @type {{string: HTMLElement} | undefined}
- */
-let lessStyles = undefined
-
-/**
- * List of all `<style>` {@link HTMLElement}s with an id starting with `less:dist-colors`.
- *
- * @type {{string: HTMLElement} | undefined}
- */
-let lessColors = undefined
-
-/**
- * List of all `<style>` {@link HTMLElement}s with an id starting with `less:dist-fonts`.
- *
- * @type {{string: HTMLElement} | undefined}
- */
-let lessFonts = undefined
-
-/**
- * The background element.
- *
- * @type {HTMLElement | undefined}
- */
-let background = undefined
-
-
-/**
- * Find the `<style>` {@link HTMLElement}s with an id starting with `less:dist`, and compile them into a {`id`: `element`} object.
- *
- * @returns {{string: HTMLElement}}
- */
-function findLessStyles() {
-	// noinspection JSValidateTypes
+function getCompiledLessStylesheets() {
 	return [...document.styleSheets].filter(
 		(s) => s.ownerNode.id.startsWith("less:dist"),
 	).map(
 		(s) => (
-			{ [s.ownerNode.id]: s }
+			{ [getBaseNameFromStyleId(s.ownerNode.id)]: s }
 		),
 	).reduce(
 		(p, c) => (
@@ -90,128 +97,252 @@ function findLessStyles() {
 }
 
 /**
- * Find the `<style>` {@link HTMLElement}s with an id starting with `less:dist-colors`, and compile them into a {`id`: `element`} object.
+ * Object mapping base names to their corresponding {@link HTMLStyleElement}s. Needs to be initialized.
  *
- * @returns {{string: HTMLElement}}
+ * @type {{[string]: HTMLStyleElement} | undefined}
  */
-function findLessColors() {
-	// noinspection JSValidateTypes
-	return [...document.styleSheets].filter(
-		(s) => s.ownerNode.id.startsWith("less:dist-colors"),
-	).map(
-		(s) => (
-			{ [s.ownerNode.id]: s }
-		),
-	).reduce(
-		(p, c) => (
-			{ ...p, ...c }
-		),
-		{},
-	)
+let styleFromBaseName = undefined
+
+/**
+ * Initialize {@link styleFromBaseName} by calling {@link getCompiledLessStylesheets}.
+ */
+function initStyleFromBaseName() {
+	console.debug("[Bluelib] Detecting compiled styles...")
+	styleFromBaseName = getCompiledLessStylesheets()
+	console.info("[Bluelib] The following styles are available:", styleFromBaseName)
 }
 
 /**
- * Find the `<style>` {@link HTMLElement}s with an id starting with `less:dist-fonts`, and compile them into a {`id`: `element`} object.
- *
- * @returns {{string: HTMLElement}}
+ * The currently enabled selectorset.
+ * 
+ * @type {String}
  */
-function findLessFonts() {
-	// noinspection JSValidateTypes
-	return [...document.styleSheets].filter(
-		(s) => s.ownerNode.id.startsWith("less:dist-fonts"),
-	).map(
-		(s) => (
-			{ [s.ownerNode.id]: s }
-		),
-	).reduce(
-		(p, c) => (
-			{ ...p, ...c }
-		),
-		{},
-	)
+let selectorsetEnabled = "root";
+
+/**
+ * List of valid rulesets, in the order they should be enabled in.
+ */
+const rulesets = [
+	"base",
+	"classic",
+	"glass",
+	"fun",
+	"layouts-center",
+	"layouts-flex",
+	"colors-royalblue",
+	"colors-amber",
+	"colors-pixeldawn",
+	"colors-purplestar",
+	"fonts-fira-ghpages",
+]
+
+/**
+ * Function to pass to {@link sort} to sort a list of base names in the order of {@link rulesets}.
+ */
+function rulesetsSorter(a, b) {
+	return rulesets.indexOf(a) - rulesets.indexOf(b)
+}
+
+
+/**
+ * List of currently enabled rulesets, not in any particular order.
+ */
+const rulesetsEnabled = [
+	"base",
+	"classic",
+	"glass",
+	"layouts-center",
+	"colors-royalblue",
+	"fonts-fira-ghpages",
+]
+
+/**
+ * Sort {@link rulesetsEnabled} using {@link rulesetsSorter}.
+ */
+function sortRulesetsEnabled() {
+	console.debug("[Bluelib] Sorting rulesets:", rulesetsEnabled)
+	rulesetsEnabled.sort(rulesetsSorter)
+	console.debug("[Bluelib] Sorted rulesets:", rulesetsEnabled)
 }
 
 /**
- * Find and return the {@link HTMLElement} with the `layout-center-background` class.
- *
- * @returns {HTMLElement}
+ * Add a ruleset to {@link rulesetsEnabled}, if it doesn't already exist.
  */
-function findBackground() {
-	return document.getElementsByClassName("layout-center-background")[0]
+function enableRuleset(baseName) {
+	const pos = rulesetsEnabled.indexOf(baseName)
+	if(pos) {
+		rulesetsEnabled.push(baseName)
+	}
 }
 
 /**
- * Allows the user to dynamically interact with bluelib via the interactive components available on the page.
- *
- * Set the values of {@link lessStyles}, {@link lessColors}, {@link lessFonts} and {@link background}.
- *
- * Sets the enabled state of the all {@link lessStyles} depending on their inclusion in the {@link enabledByDefault} array.
- *
- * Enables and unfades all input elements with the class `ruleset-toggle`.
- *
- * @returns {Promise<void>}
+ * Remove a ruleset from {@link rulesetsEnabled}, if it exists.
  */
-async function enableChanges() {
+function disableRuleset(baseName) {
+	const pos = rulesetsEnabled.indexOf(baseName)
+	if(pos) {
+		rulesetsEnabled.splice(pos, 1)
+	}
+}
+
+/**
+ * {@link enableRuleset} or {@link disableRuleset}, based on the value of `shouldBeEnabled`.
+ */
+function setRuleset(baseName, shouldBeEnabled) {
+	if(shouldBeEnabled) {
+		enableRuleset(baseName)
+	}
+	else {
+		disableRuleset(baseName)
+	}
+}
+
+
+/**
+ * The `#js-unpkg-targets` element.
+ * 
+ * @type {HTMLDivElement | undefined}
+ */
+let unpkgTargets = undefined
+
+/**
+ * The `#js-yarn-targets` element.
+ * 
+ * @type {HTMLDivElement | undefined}
+ */
+let yarnTargets = undefined
+
+/**
+ * Initialize the {@link unpkgTargets} and {@link yarnTargets} variables.
+ */
+function initTargets() {
+	unpkgTargets = document.getElementById("js-unpkg-targets")
+	yarnTargets = document.getElementById("js-yarn-targets")
+}
+
+
+/**
+ * Synchronize {@link rulesetsEnabled} with the {@link document}.
+ */
+function sync() {
+	console.debug("[Bluelib] Syncing enabled rulesets:", rulesetsEnabled)
+	// Toggle Less-compiled stylesheets
+	for(const [baseName, element] of Object.entries(styleFromBaseName)) {
+		element.disabled = !rulesetsEnabled.includes(baseName)
+		console.debug("[Bluelib] State of", baseName, element, "changed to", !element.disabled)
+	}
+	unpkgTargets.innerHTML = rulesetsEnabled.map(baseName => `<code>&lt;link <wbr>rel=&quot;stylesheet&quot; <wbr>href=&quot;https://unpkg.com/@steffo/bluelib<wbr>@<b>${version}</b><wbr>/dist/<wbr><b>${baseName}</b>.<b>${selectorsetEnabled}</b>.min.css&quot;<wbr> type=&quot;text/css&quot; /&gt;</code>`).join("<br>")
+	yarnTargets.innerHTML = rulesetsEnabled.map(baseName => `<code>import &quot;@steffo/bluelib/dist/<wbr><b>${baseName}</b><wbr>.<b>${selectorsetEnabled}</b><wbr>.css&quot;;</code>`).join("<br>")
+	console.debug("[Bluelib] Done syncing enabled rulesets.")
+}
+
+/**
+ * Allow the user to interact with the various interactable components of the page.
+ */
+function allowInteraction() {
+	console.debug("[Bluelib] Enabling interaction on elements...")
+	for(const element of document.querySelectorAll("#panel-rulesets-toggleable input")) {
+		console.debug("[Bluelib] Enabling interaction on:", element)
+		element.disabled = false
+		element.addEventListener("input", onToggleableRulesetToggle)
+		element.parentElement.classList.remove("fade")
+	}
+	for(const element of document.querySelectorAll("#panel-rulesets-colors input")) {
+		console.debug("[Bluelib] Enabling interaction on:", element)
+		element.disabled = false
+		element.addEventListener("input", onColorRulesetSelection)
+		element.parentElement.classList.remove("fade")
+	}
+	for(const element of document.querySelectorAll("#panel-rulesets-fonts input")) {
+		console.debug("[Bluelib] Enabling interaction on:", element)
+		element.disabled = false
+		element.addEventListener("input", onFontRulesetSelection)
+		element.parentElement.classList.remove("fade")
+	}
+	for(const element of document.querySelectorAll("#panel-selectorsets input")) {
+		console.debug("[Bluelib] Enabling interaction on:", element)
+		element.disabled = false
+		element.addEventListener("input", onSelectorsetSelection)
+		element.parentElement.classList.remove("fade")
+	}
+	unpkgTargets.classList.remove("fade")
+	yarnTargets.classList.remove("fade")
+	console.info("[Bluelib] Example page is ready!")
+}
+
+
+/**
+ * Event callback for ruleset toggles in the page.
+ *
+ * @param event {Event} The triggering event.
+ */
+function onToggleableRulesetToggle(event) {
+	const baseName = event.target.value
+	const shouldBeEnabled = event.target.checked
+	console.debug("[Bluelib] Received onRulesetToggle ", baseName, shouldBeEnabled)
+	setRuleset(baseName, shouldBeEnabled)
+	sortRulesetsEnabled()
+	sync()
+}
+
+/**
+ * Event callback for color ruleset selections in the page.
+ * 
+ * @param event {Event} The triggering event.
+ */
+function onColorRulesetSelection(event) {
+	const old = rulesetsEnabled.find(v => v.startsWith("colors-"))
+	if(old) {
+		disableRuleset(old)
+	}
+	if(event.target.value) {
+		const baseName = `colors-${event.target.value}`
+		enableRuleset(baseName)
+	}
+	sync()
+}
+
+
+/**
+ * Event callback for font ruleset selections in the page.
+ * 
+ * @param event {Event} The triggering event.
+ */
+function onFontRulesetSelection(event) {
+	const old = rulesetsEnabled.find(v => v.startsWith("fonts-"))
+	if(old) {
+		disableRuleset(old)
+	}
+	if(event.target.value) {
+		const baseName = `fonts-${event.target.value}`
+		enableRuleset(baseName)
+	}
+	sync()
+}
+
+/**
+ * Event callback for selectorset selections in the page.
+ * 
+ * @param event {Event} The triggering event.
+ */
+function onSelectorsetSelection(event) {
+	selectorsetEnabled = event.target.value
+	console.debug("[Bluelib] Changed selectorset to:", selectorsetEnabled)
+	sync()
+}
+
+/**
+ * Event callback for {@link window} load.
+ */
+async function onWindowLoad() {
+	await initVersion()
 	await sleepUntilLessIsDone()
-
-	lessStyles = findLessStyles()
-	console.debug("Found Less stylesheets:", lessStyles)
-
-	lessColors = findLessColors()
-	console.debug("Found Less colors:", lessColors)
-
-	lessFonts = findLessFonts()
-	console.debug("Found Less fonts:", lessFonts)
-
-	background = findBackground()
-	console.debug("Found background:", background)
-
-	for(const [k, v] of Object.entries(lessStyles)) {
-		v.disabled = !enabledByDefault.includes(k)
-	}
-
-	for(const input of document.querySelectorAll(".ruleset-toggle")) {
-		input.disabled = false
-		input.parentElement.classList.remove("fade")
-	}
+	initStyleFromBaseName()
+	initTargets()
+	sortRulesetsEnabled()
+	sync()
+	allowInteraction()
 }
 
 
-function toggleStyle(name) {
-	if(lessStyles === undefined) {
-		console.error("Less stylesheets are not yet available.")
-		return
-	}
-
-	const style = lessStyles[name]
-	if(style === undefined) {
-		console.error("No such Less stylesheet.")
-		return
-	}
-
-	style.disabled = !style.disabled
-}
-
-
-function selectColor(name, bgsrc) {
-	if(lessColors === undefined) {
-		console.error("Less stylesheets are not yet available.")
-		return
-	}
-
-	const style = lessStyles[name]
-	if(style === undefined) {
-		console.error("No such Less stylesheet.")
-		return
-	}
-
-	for(const c of Object.values(lessColors)) {
-		c.disabled = true
-	}
-
-	style.disabled = false
-	background.src = bgsrc
-}
-
-
-enableChanges()
+window.onload = onWindowLoad

package.json

@@ -4,7 +4,7 @@
 	"description": "A stylesheet that supports fast dynamic recoloring via CSS variables",
 	"scripts": {
 		"dev": "web-dev-server --watch --port 8080",
-		"build": "cd dist && ./_build.sh && cd .."
+		"build": "./_build.sh && cd .."
 	},
 	"keywords": [
 		"bluelib",

src/mixins/bg.less

@@ -0,0 +1,42 @@
+.create-background-images(@base; @ext) {
+	--burl-background-full: url(~"@{base}.@{ext}");
+	--burl-background-3840: url(~"@{base}3840.@{ext}");
+	--burl-background-1920: url(~"@{base}1920.@{ext}");
+	--burl-background-1366: url(~"@{base}1366.@{ext}");
+	--burl-background-640: url(~"@{base}640.@{ext}");
+	--burl-background-360: url(~"@{base}360.@{ext}");
+}
+
+.create-background-image(@name) {
+	--burl-background-full: url(~"@{name}");
+	--burl-background-3840: url(~"@{name}");
+	--burl-background-1920: url(~"@{name}");
+	--burl-background-1366: url(~"@{name}");
+	--burl-background-640: url(~"@{name}");
+	--burl-background-360: url(~"@{name}");
+}
+
+.use-background-images() {
+	background-position: center;
+	background-size: cover;
+	background-attachment: fixed;
+
+	@media screen {
+		background-image: var(--burl-background-full);
+	}	
+	@media screen and (max-width: 3840px) {
+		background-image: var(--burl-background-3840);
+	}
+	@media screen and (max-width: 1920px) {
+		background-image: var(--burl-background-1920);
+	}
+	@media screen and (max-width: 1366px) {
+		background-image: var(--burl-background-1366);
+	}
+	@media screen and (max-width: 640px) {
+		background-image: var(--burl-background-640);
+	}
+	@media screen and (max-width: 360px) {
+		background-image: var(--burl-background-360);
+	}	
+}

src/rulesets/base.less

@@ -11,11 +11,52 @@
 	//<editor-fold desc="Rules: Body">
 
 	& {
+		// Set the default colors
+		.create-hsl-group(background; 0deg; 0%; 100%);
+		.create-hsl-group(foreground; 0deg; 0%; 15%);
+		.create-hsl-group(primary; 0deg; 0%; 0%);
+		.create-hsl-group(link; 210deg; 100%; 30%);
+	
+		.create-hsl-group(mark-foreground; 0deg; 0%; 0%);
+		.create-hsl-group(mark-background; 60deg; 100%; 75%);
+	
+		.create-hsl-group(todo-foreground; 204deg; 11%; 18%);
+		.create-hsl-group(todo-background; 43deg; 100%; 65%);
+	
+		.create-hsl-group(sample-input; 0deg; 100%; 0%);
+		.create-hsl-group(sample-output; 0deg; 100%; 100%);
+	
+		.create-hsl-group(red; 0deg; 100%; 30%);
+		.create-hsl-group(yellow; 60deg; 100%; 30%);
+		.create-hsl-group(green; 120deg; 100%; 30%);
+		.create-hsl-group(cyan; 180deg; 100%; 30%);
+		.create-hsl-group(blue; 240deg; 100%; 30%);
+		.create-hsl-group(magenta; 300deg; 100%; 30%);
+	
+		.map-hsl-group(inserted; green);
+		.map-hsl-group(deleted; red);
+		
+		// Set the default fonts
+		.create-font-group(text; normal; normal; 400; normal; regular; 1.3; sans-serif);
+		.create-font-group(header; normal; normal; 600; normal; regular; 1.7; sans-serif);
+		.create-font-group(code; normal; normal; 400; normal; regular; 1.3; monospace);
+		.create-font-group(boldcode; normal; normal; 700; normal; regular; 1.3; monospace);
+		.create-font-group(term; italic; normal; 700; normal; regular; 1.3; sans-serif);
+		.create-font-group(summary; italic; normal; 400; normal; regular; 1.3; sans-serif);
+		.create-font-group(idiomatic; italic; normal; 400; normal; regular; 1.3; sans-serif);
+		.create-font-group(emphasis; italic; normal; 400; normal; regular; 1.3; sans-serif);
+		.create-font-group(attention; normal; normal; 700; normal; regular; 1.3; sans-serif);
+		.create-font-group(strong; normal; normal; 700; normal; regular; 1.3; sans-serif);
+		.create-font-group(variable; normal; normal; 400; normal; regular; 1.3; sans-serif);
+		.create-font-group(citation; normal; small-caps; 400; normal; regular; 1.3; sans-serif);
+		.create-font-group(label; normal; normal; 400; normal; regular; 1.3; sans-serif);
+
 		// Set the current color
 		.map-hsl-group(current, foreground);
 
 		// Set the background defined in the palette
 		background-color: .hsl-group(background)[@c];
+		.use-background-images();
 
 		// Make the element fill all available space
 		width: 100%;
@@ -170,6 +211,14 @@
 		// Give the first panel in a stack a fixed background color, so it may be seen against a background
 		background-color: .hsl-group(background)[@c];
 
+		// Set a min-width for the first level panel
+		@media (max-width: 492px) {
+			min-width: calc(100vw - 16px);
+		}
+		@media (min-width: 493px) {
+			min-width: 476px;			
+		}
+
 		// Make borders togglable
 		&@{border-top}, &@{panel-box} {
 			border-top-width: 2px;
@@ -195,6 +244,11 @@
 		&@{panel-parenthesis} {
 			font-size: smaller;
 		}
+
+		// Do not set min-width for nested panels
+		@{panel} {
+			min-width: unset;
+		}
 	}
 
 	//</editor-fold>
@@ -738,29 +792,6 @@
 
 	@{input-range} {
 		padding: 0;
-
-		// appearance: none;
-		//
-		// &::-moz-range-thumb {
-		//     width: 0;
-		//     border-radius: 0;
-		//     border-style: outset;
-		//
-		//     border-color: .hsl-group(current)[@c];
-		//     border-width: 4px;
-		//
-		//     background-color: .hsl-group(primary)[@c];
-		// }
-		//
-		// &::-moz-range-track {
-		//     height: 0.125em;
-		//     background-color: .hsl-group(current)[@c];
-		// }
-		//
-		// &::-moz-range-progress {
-		//     height: 0.5em;
-		//     background-color: .hsl-group(current)[@c];
-		// }
 	}
 
 	@{input-button} {
@@ -888,6 +919,10 @@
 
 	@{text-code}, @{text-preformatted}, @{text-input}, @{text-output} {
 		.use-font-group(code);
+
+		@{text-attention} {
+			.use-font-group(boldcode);
+		}
 	}
 
 	@{text-preformatted} {
@@ -895,11 +930,18 @@
 	}
 
 	@{text-input}, @{text-output} {
-		padding: 0 0.25ex;
+		padding: 0 0.35ex;
+		border-width: 1px;
+		border-style: solid;
+
+		@{text-input}, @{text-output} {
+			border-width: 0;
+		}
 	}
 
 	@{text-input} {
 		background-color: .hsl-group(sample-output)[@c];
+		border-color: .hsl-group(sample-input)[@c];
 		.map-hsl-group(current; sample-input);
 
 		@{text-input} {
@@ -909,6 +951,7 @@
 
 	@{text-output} {
 		background-color: .hsl-group(sample-input)[@c];
+		border-color: .hsl-group(sample-output)[@c];
 		.map-hsl-group(current; sample-output);
 
 		@{text-output} {

src/rulesets/colors/colors-amber.less

@@ -4,28 +4,32 @@
  * ported to v5 by <me@steffo.eu>
  */
 
-@{bluelib} {
-	.create-hsl-group(background; 0deg; 8%; 14%);
-	.create-hsl-group(foreground; 19deg; 91%; 46%);
-	.create-hsl-group(primary; 0deg; 42%; 94%);
-	.create-hsl-group(link; 50deg; 100%; 80%);
+@media screen {
+	@{bluelib} {
+		.create-background-images("../images/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited/", "jpg");
 
-	.create-hsl-group(mark-foreground; 19deg; 64%; 14%);
-	.create-hsl-group(mark-background; 19deg; 100%; 81%);
-
-	.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; 0deg; 100%; 66%);
-	.create-hsl-group(yellow; 60deg; 100%; 66%);
-	.create-hsl-group(green; 120deg; 100%; 66%);
-	.create-hsl-group(cyan; 180deg; 100%; 66%);
-	.create-hsl-group(blue; 240deg; 100%; 66%);
-	.create-hsl-group(magenta; 300deg; 100%; 66%);
-
-	.map-hsl-group(inserted; green);
-	.map-hsl-group(deleted; red);
+		.create-hsl-group(background; 0deg; 8%; 14%);
+		.create-hsl-group(foreground; 19deg; 91%; 46%);
+		.create-hsl-group(primary; 0deg; 42%; 94%);
+		.create-hsl-group(link; 50deg; 100%; 80%);
+	
+		.create-hsl-group(mark-foreground; 19deg; 64%; 14%);
+		.create-hsl-group(mark-background; 19deg; 100%; 81%);
+	
+		.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; 0deg; 100%; 66%);
+		.create-hsl-group(yellow; 60deg; 100%; 66%);
+		.create-hsl-group(green; 120deg; 100%; 66%);
+		.create-hsl-group(cyan; 180deg; 100%; 66%);
+		.create-hsl-group(blue; 240deg; 100%; 66%);
+		.create-hsl-group(magenta; 300deg; 100%; 66%);
+	
+		.map-hsl-group(inserted; green);
+		.map-hsl-group(deleted; red);
+	}	
 }

src/rulesets/colors/colors-pixeldawn.less

@@ -3,59 +3,63 @@
  * by <me@steffo.eu>
  */
 
-@{bluelib} {
-	.create-hsl-group(background; 14deg; 85%; 74%);
-	.create-hsl-group(foreground; 340deg; 40%; 20%);
-	.create-hsl-group(primary; 220deg; 92%; 11%);
-	.create-hsl-group(link; 237deg; 80%; 41%);
+@media screen {
+	@{bluelib} {
+		.create-background-image("../images/viktya-pixeldawn/full.png");
 
-	.create-hsl-group(mark-foreground; 194deg; 64%; 14%);
-	.create-hsl-group(mark-background; 194deg; 100%; 81%);
+		.create-hsl-group(background; 14deg; 85%; 74%);
+		.create-hsl-group(foreground; 340deg; 40%; 20%);
+		.create-hsl-group(primary; 220deg; 92%; 11%);
+		.create-hsl-group(link; 237deg; 80%; 41%);
+	
+		.create-hsl-group(mark-foreground; 194deg; 64%; 14%);
+		.create-hsl-group(mark-background; 194deg; 100%; 81%);
 
-	.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; 0deg; 100%; 15%);
-	.create-hsl-group(yellow; 60deg; 100%; 15%);
-	.create-hsl-group(green; 120deg; 100%; 15%);
-	.create-hsl-group(cyan; 180deg; 100%; 15%);
-	.create-hsl-group(blue; 240deg; 100%; 15%);
-	.create-hsl-group(magenta; 300deg; 100%; 15%);
-
-	.map-hsl-group(inserted; green);
-	.map-hsl-group(deleted; red);
-
-	&:is(@{bluelib}) {
-		--b-panel-initial-opacity: 0.500;
-		--b-border-radius: 0;
-		--b-outer-shadow: none;
-
-		@{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
-			color: white;
-			text-shadow: 2px 2px 0 #9832ce;
-		}
-
-		@{panel} {
+		.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; 0deg; 100%; 15%);
+		.create-hsl-group(yellow; 60deg; 100%; 15%);
+		.create-hsl-group(green; 120deg; 100%; 15%);
+		.create-hsl-group(cyan; 180deg; 100%; 15%);
+		.create-hsl-group(blue; 240deg; 100%; 15%);
+		.create-hsl-group(magenta; 300deg; 100%; 15%);
+	
+		.map-hsl-group(inserted; green);
+		.map-hsl-group(deleted; red);
+	
+		&:is(@{bluelib}) {
+			--b-panel-initial-opacity: 0.500;
+			--b-border-radius: 0;
+			--b-outer-shadow: none;
+	
 			@{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
-				color: .hsl-group(current)[@c];
-				text-shadow: none;
+				color: white;
+				text-shadow: 2px 2px 0 #9832ce;
 			}
-		}
-	}
-
-	/*
-	@{panel} {
-
-		@{panel} {
-			background-color: .hsl-group(background; 0; - 8%; - 5%; 1.0)[@c] !important;
-
+	
 			@{panel} {
-				background-color: .hsl-group(background; 0; - 16%; - 10%; 1.0)[@c] !important;
+				@{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
+					color: .hsl-group(current)[@c];
+					text-shadow: none;
+				}
 			}
 		}
-	}
-	*/
+	
+		/*
+		@{panel} {
+	
+			@{panel} {
+				background-color: .hsl-group(background; 0; - 8%; - 5%; 1.0)[@c] !important;
+	
+				@{panel} {
+					background-color: .hsl-group(background; 0; - 16%; - 10%; 1.0)[@c] !important;
+				}
+			}
+		}
+		*/
+	}	
 }

src/rulesets/colors/colors-purplestar.less

@@ -3,29 +3,33 @@
  * by <me@steffo.eu>
  */
 
-@{bluelib} {
-	.create-hsl-group(background; 262deg; 85%; 13%);
-	.create-hsl-group(foreground; 262deg; 100%; 78%);
-	.create-hsl-group(primary; 53deg; 100%; 100%);
-	// .create-hsl-group(link; 292deg; 65%; 50%);
-	.create-hsl-group(link; 53deg; 100%; 72%);
+@media screen {
+	@{bluelib} {
+		.create-background-images("../images/kazuend-2KXEb_8G5vo-edited-unsplash/", "jpg");
+		
+		.create-hsl-group(background; 262deg; 85%; 13%);
+		.create-hsl-group(foreground; 262deg; 100%; 78%);
+		.create-hsl-group(primary; 53deg; 100%; 100%);
+		// .create-hsl-group(link; 292deg; 65%; 50%);
+		.create-hsl-group(link; 53deg; 100%; 72%);
 
-	.create-hsl-group(mark-foreground; 53deg; 64%; 14%);
-	.create-hsl-group(mark-background; 53deg; 100%; 72%);
+		.create-hsl-group(mark-foreground; 53deg; 64%; 14%);
+		.create-hsl-group(mark-background; 53deg; 100%; 72%);
 
-	.create-hsl-group(todo-foreground; 43deg; 100%; 65%);
-	.create-hsl-group(todo-background; 204deg; 11%; 18%);
+		.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(sample-input; 0deg; 100%; 0%);
+		.create-hsl-group(sample-output; 0deg; 100%; 100%);
 
-	.create-hsl-group(red; 0deg; 100%; 75%);
-	.create-hsl-group(yellow; 60deg; 100%; 75%);
-	.create-hsl-group(green; 120deg; 100%; 75%);
-	.create-hsl-group(cyan; 180deg; 100%; 75%);
-	.create-hsl-group(blue; 240deg; 100%; 75%);
-	.create-hsl-group(magenta; 300deg; 100%; 75%);
+		.create-hsl-group(red; 0deg; 100%; 75%);
+		.create-hsl-group(yellow; 60deg; 100%; 75%);
+		.create-hsl-group(green; 120deg; 100%; 75%);
+		.create-hsl-group(cyan; 180deg; 100%; 75%);
+		.create-hsl-group(blue; 240deg; 100%; 75%);
+		.create-hsl-group(magenta; 300deg; 100%; 75%);
 
-	.map-hsl-group(inserted; green);
-	.map-hsl-group(deleted; red);
+		.map-hsl-group(inserted; green);
+		.map-hsl-group(deleted; red);
+	}
 }

src/rulesets/colors/colors-royalblue.less

@@ -3,28 +3,33 @@
  * by <me@steffo.eu>
  */
 
-@{bluelib} {
-	.create-hsl-group(background; 224deg; 64%; 14%);
-	.create-hsl-group(foreground; 212deg; 100%; 81%);
-	.create-hsl-group(primary; 0deg; 0%; 100%);
-	.create-hsl-group(link; 180deg; 100%; 40%);
+@media screen {
+	@{bluelib} {
+		.create-background-images("../images/fabrice-nerfin-puHQJZd3MDg-unsplash/", "jpg");
+		// .create-background-images("https://bluelib.steffo.eu/images/fabrice-nerfin-puHQJZd3MDg-unsplash/", "jpg");
 
-	.create-hsl-group(mark-foreground; 32deg; 64%; 14%);
-	.create-hsl-group(mark-background; 32deg; 100%; 81%);
+		.create-hsl-group(background; 224deg; 64%; 14%);
+		.create-hsl-group(foreground; 212deg; 100%; 81%);
+		.create-hsl-group(primary; 0deg; 0%; 100%);
+		.create-hsl-group(link; 180deg; 100%; 40%);
 
-	.create-hsl-group(todo-foreground; 43deg; 100%; 65%);
-	.create-hsl-group(todo-background; 204deg; 11%; 18%);
+		.create-hsl-group(mark-foreground; 32deg; 64%; 14%);
+		.create-hsl-group(mark-background; 32deg; 100%; 81%);
 
-	.create-hsl-group(sample-input; 0deg; 100%; 0%);
-	.create-hsl-group(sample-output; 0deg; 100%; 100%);
+		.create-hsl-group(todo-foreground; 43deg; 100%; 65%);
+		.create-hsl-group(todo-background; 204deg; 11%; 18%);
 
-	.create-hsl-group(red; 0deg; 100%; 75%);
-	.create-hsl-group(yellow; 60deg; 100%; 75%);
-	.create-hsl-group(green; 120deg; 100%; 75%);
-	.create-hsl-group(cyan; 180deg; 100%; 75%);
-	.create-hsl-group(blue; 240deg; 100%; 75%);
-	.create-hsl-group(magenta; 300deg; 100%; 75%);
+		.create-hsl-group(sample-input; 0deg; 100%; 0%);
+		.create-hsl-group(sample-output; 0deg; 100%; 100%);
 
-	.map-hsl-group(inserted; green);
-	.map-hsl-group(deleted; red);
+		.create-hsl-group(red; 0deg; 100%; 75%);
+		.create-hsl-group(yellow; 60deg; 100%; 75%);
+		.create-hsl-group(green; 120deg; 100%; 75%);
+		.create-hsl-group(cyan; 180deg; 100%; 75%);
+		.create-hsl-group(blue; 240deg; 100%; 75%);
+		.create-hsl-group(magenta; 300deg; 100%; 75%);
+
+		.map-hsl-group(inserted; green);
+		.map-hsl-group(deleted; red);
+	}
 }

src/rulesets/glass.less

@@ -52,18 +52,5 @@
 				backdrop-filter: none;
 			}
 		}
-
-		// Make to-do have a glass background too
-		@{panel}@{modifier-todo} {
-			background-color: .hsl-group(todo-background; 0.3)[@c];
-			backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%);
-		}
-
-		@{panel} {
-			@{panel}@{modifier-todo} {
-				background-color: .hsl-group(todo-background)[@c];
-			}
-		}
-
 	}
 }

src/rulesets/layouts/layouts-flex.less

@@ -0,0 +1,27 @@
+/**
+ * Bluelib Layouts Flex
+ * by <me@steffo.eu>
+ */
+
+@{bluelib} {
+	@{layout-flex-row}, @{layout-flex-rrow}, @{layout-flex-column}, @{layout-flex-rcolumn} {
+		display: flex;
+		gap: 8px;
+	}
+
+	@{layout-flex-row} {
+		flex-direction: row;
+	}
+
+	@{layout-flex-rrow} {
+		flex-direction: row-reverse;
+	}
+
+	@{layout-flex-column} {
+		flex-direction: column;
+	}
+
+	@{layout-flex-rcolumn} {
+		flex-direction: column-reverse;
+	}
+}

src/selectorsets/module.less

@@ -8,6 +8,11 @@
 @layout-center-main: ~":where(.layout-center-main)";
 @layout-center-footer: ~":where(.layout-center-footer)";
 
+@layout-flex-row: ~":where(.layout-flex-row)";
+@layout-flex-rrow: ~":where(.layout-flex-rrow)";
+@layout-flex-column: ~":where(.layout-flex-column)";
+@layout-flex-rcolumn: ~":where(.layout-flex-rcolumn)";
+
 @page-main: ~":where(.page-main)";
 @page-aside: ~":where(.page-aside)";
 @page-header: ~":where(.page-header)";

src/selectorsets/root.less

@@ -8,6 +8,11 @@
 @layout-center-main: ~":where(main)";
 @layout-center-footer: ~":where(footer)";
 
+@layout-flex-row: ~":where(.layout-flex-row)";
+@layout-flex-rrow: ~":where(.layout-flex-rrow)";
+@layout-flex-column: ~":where(.layout-flex-column)";
+@layout-flex-rcolumn: ~":where(.layout-flex-rcolumn)";
+
 @page-main: ~":where(main)";
 @page-aside: ~":where(aside)";
 @page-header: ~":where(header)";