Add pixeldawn

dist/colors-pixeldawn.module.css

@@ -0,0 +1,63 @@
+/*
+ * Bluelib Royal Dawn Colors
+ * by <me@steffo.eu>
+ */
+.bluelib {
+  --bhsl-background-hue: 14deg;
+  --bhsl-background-saturation: 85%;
+  --bhsl-background-lightness: 74%;
+  --bhsl-foreground-hue: 0deg;
+  --bhsl-foreground-saturation: 0%;
+  --bhsl-foreground-lightness: 0%;
+  --bhsl-primary-hue: 0deg;
+  --bhsl-primary-saturation: 0%;
+  --bhsl-primary-lightness: 0%;
+  --bhsl-link-hue: 237deg;
+  --bhsl-link-saturation: 91%;
+  --bhsl-link-lightness: 59%;
+  --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: 60%;
+  --bhsl-yellow-hue: 60deg;
+  --bhsl-yellow-saturation: 100%;
+  --bhsl-yellow-lightness: 60%;
+  --bhsl-green-hue: 120deg;
+  --bhsl-green-saturation: 100%;
+  --bhsl-green-lightness: 60%;
+  --bhsl-cyan-hue: 180deg;
+  --bhsl-cyan-saturation: 100%;
+  --bhsl-cyan-lightness: 60%;
+  --bhsl-blue-hue: 240deg;
+  --bhsl-blue-saturation: 100%;
+  --bhsl-blue-lightness: 60%;
+  --bhsl-magenta-hue: 300deg;
+  --bhsl-magenta-saturation: 100%;
+  --bhsl-magenta-lightness: 60%;
+  --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);
+}
+.bluelib:is(.bluelib) {
+  --b-panel-initial-opacity: 0.5;
+}

dist/colors-pixeldawn.module.less

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

dist/colors-pixeldawn.root.css

@@ -0,0 +1,63 @@
+/*
+ * Bluelib Royal Dawn Colors
+ * by <me@steffo.eu>
+ */
+body {
+  --bhsl-background-hue: 14deg;
+  --bhsl-background-saturation: 85%;
+  --bhsl-background-lightness: 74%;
+  --bhsl-foreground-hue: 0deg;
+  --bhsl-foreground-saturation: 0%;
+  --bhsl-foreground-lightness: 0%;
+  --bhsl-primary-hue: 0deg;
+  --bhsl-primary-saturation: 0%;
+  --bhsl-primary-lightness: 0%;
+  --bhsl-link-hue: 237deg;
+  --bhsl-link-saturation: 91%;
+  --bhsl-link-lightness: 59%;
+  --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: 60%;
+  --bhsl-yellow-hue: 60deg;
+  --bhsl-yellow-saturation: 100%;
+  --bhsl-yellow-lightness: 60%;
+  --bhsl-green-hue: 120deg;
+  --bhsl-green-saturation: 100%;
+  --bhsl-green-lightness: 60%;
+  --bhsl-cyan-hue: 180deg;
+  --bhsl-cyan-saturation: 100%;
+  --bhsl-cyan-lightness: 60%;
+  --bhsl-blue-hue: 240deg;
+  --bhsl-blue-saturation: 100%;
+  --bhsl-blue-lightness: 60%;
+  --bhsl-magenta-hue: 300deg;
+  --bhsl-magenta-saturation: 100%;
+  --bhsl-magenta-lightness: 60%;
+  --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);
+}
+body:is(body) {
+  --b-panel-initial-opacity: 0.5;
+}

dist/colors-pixeldawn.root.less

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

examples/index.html

@@ -15,7 +15,7 @@
     <link rel="stylesheet/less" type="text/css" href="../dist/base.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-royaldawn.root.less">
+    <link rel="stylesheet/less" type="text/css" href="../dist/colors-pixeldawn.root.less">
     <link rel="stylesheet/less" type="text/css" href="../dist/fonts-fira-ghpages.root.less">
     <link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less">
     <link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less">
@@ -31,7 +31,7 @@
     <title>Bluelib</title>
 </head>
 <body id="body" class="theme-bluelib">
-    <img id="background" alt="" src="">
+    <img id="background" alt="" src="rygbg.png" style="image-rendering: pixelated;">
     <main>
         <article>
             <h1>
@@ -189,43 +189,43 @@
                         Available rulesets
                     </h3>
                     <dl>
-                        <dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-base" onclick="toggleStyle('less:bluelib-dist-base:root')"> Base</label></dt>
+                        <dt><label class="fade"><input type="checkbox" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-base" onclick="toggleStyle('less:bluelib-dist-base:root')"> 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" disabled checked class="ruleset-toggle" name="ruleset-classic" onclick="toggleStyle('less:bluelib-dist-classic:root')"> Classic</label></dt>
+                        <dt><label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-classic" onclick="toggleStyle('less:bluelib-dist-classic:root')"> 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" disabled checked class="ruleset-toggle" name="ruleset-glass" onclick="toggleStyle('less:bluelib-dist-glass:root')"> Glass</label></dt>
+                        <dt><label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-glass" onclick="toggleStyle('less:bluelib-dist-glass:root')"> 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" disabled class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:bluelib-dist-fun:root')"> Fun</label></dt>
+                        <dt><label class="fade"><input type="checkbox" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:bluelib-dist-fun:root')"> Fun</label></dt>
                         <dd>
                             Experimental <i>ruleset</i> with bizzare or buggy but fun rules. Unsupported, do not use in production!
                         </dd>
                         <dt>Colors</dt>
                         <dd>
                            <dl>
-                               <dt><label class="fade"><input type="radio" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-royalblue:root', 'fabrice-nerfin-puHQJZd3MDg-unsplash.jpg')"> Royal Blue</label></dt>
+                               <dt><label class="fade"><input type="radio" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-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" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-amber:root', 'anastasiia-chepinska-lcfH0p6emhw-unsplash-edited.jpg')"> Gestione Amber</label></dt>
+                               <dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-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" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-royaldawn:root', '')"> Royal Dawn</label></dt>
+                               <dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-pixeldawn:root', 'pixeldawn-viktya.png')"> Pixel Dawn</label></dt>
                                <dd>
-                                   The palette of the <a href="https://www.ryg.one">RYG</a> community.
+                                   yes
                                </dd>
                            </dl>
                         </dd>
                         <dt>Fonts</dt>
                         <dd>
                             <dl>
-                                <dt><label class="fade"><input type="radio" disabled checked name="ruleset-fonts"> Fira</label></dt>
+                                <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>
@@ -238,11 +238,11 @@
                         Available selectorsets
                     </h3>
                     <dl>
-                        <dt><label class="fade"><input type="radio" disabled checked name="selectorset"> Root</label></dt>
+                        <dt><label class="fade"><input type="radio" autocomplete="off" disabled checked name="selectorset"> 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" disabled name="selectorset"> Module</label></dt>
+                        <dt><label class="fade"><input type="radio" autocomplete="off" disabled name="selectorset"> 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.
                         </dd>

examples/index.js

@@ -27,7 +27,7 @@ const enabledByDefault = [
     "less:bluelib-dist-base:root",
     "less:bluelib-dist-classic:root",
     "less:bluelib-dist-glass:root",
-    "less:bluelib-dist-colors-royalblue:root",
+    "less:bluelib-dist-colors-pixeldawn:root",
     "less:bluelib-dist-fonts-fira-ghpages:root",
 ]
 

src/rulesets/colors/colors-pixeldawn.less

@@ -0,0 +1,40 @@
+/*
+ * Bluelib Royal Dawn Colors
+ * by <me@steffo.eu>
+ */
+
+@{bluelib} {
+    // .create-hsl-group(background; 275deg; 69%; 80%);
+    // .create-hsl-group(foreground; 0deg; 0%; 0%);
+    // .create-hsl-group(primary; 0deg; 0%; 0%);
+    // .create-hsl-group(link; 237deg; 91%; 59%);
+
+    .create-hsl-group(background; 14deg; 85%; 74%);
+    .create-hsl-group(foreground; 0deg; 0%; 0%);
+    .create-hsl-group(primary; 0deg; 0%; 0%);
+    .create-hsl-group(link; 237deg; 80%; 41%);
+
+    .create-hsl-group(mark-foreground; 32deg; 64%; 14%);
+    .create-hsl-group(mark-background; 32deg; 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%; 60%);
+    .create-hsl-group(yellow; 60deg; 100%; 60%);
+    .create-hsl-group(green; 120deg; 100%; 60%);
+    .create-hsl-group(cyan; 180deg; 100%; 60%);
+    .create-hsl-group(blue; 240deg; 100%; 60%);
+    .create-hsl-group(magenta; 300deg; 100%; 60%);
+
+    .map-hsl-group(inserted; green);
+    .map-hsl-group(deleted; red);
+
+    &:is(@{bluelib}) {
+        --b-panel-initial-opacity: 0.500;
+        --b-border-radius: 0;
+    }
+}