Add experimental purplestar theme (#59)

dist/colors-purplestar.module.css

@@ -0,0 +1,60 @@
+/*
+ * Bluelib Purple Star Colors
+ * by <me@steffo.eu>
+ */
+:where(.bluelib) {
+  --bhsl-background-hue: 262deg;
+  --bhsl-background-saturation: 85%;
+  --bhsl-background-lightness: 40%;
+  --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-purplestar.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-purplestar.less";
+

dist/colors-purplestar.root.css

@@ -0,0 +1,60 @@
+/*
+ * Bluelib Purple Star Colors
+ * by <me@steffo.eu>
+ */
+:where(body) {
+  --bhsl-background-hue: 262deg;
+  --bhsl-background-saturation: 85%;
+  --bhsl-background-lightness: 40%;
+  --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-purplestar.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-purplestar.less";
+

examples/index.html

@@ -15,6 +15,7 @@
     <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">
+    <link rel="stylesheet/less" type="text/css" href="../dist/colors-purplestar.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">
@@ -202,24 +203,28 @@
                         </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></dt>
                         <dd>
-                            Experimental <i>ruleset</i> with bizzare or buggy but fun rules. Unsupported, do not use in production!
+                            <mark>Experimental.</mark> <i>Ruleset</i> with bizzare or buggy but fun rules.
                         </dd>
                         <dt>Colors</dt>
                         <dd>
-                           <dl>
+                            <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>
+                                <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>
+                                <dd>
-                                   <a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
+                                    <a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
-                               </dd>
+                                </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>
+                                <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>
+                                <dd>
-                                   <a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
+                                    <a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
-                               </dd>
+                                </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>
+                                <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>
+                                <dd>
-                                   A theme developed in collaboration with Viktya, featuring a pixelated beach-side sunrise.
+                                    A theme developed in collaboration with Viktya, featuring a pixelated beach-side sunrise.
-                               </dd>
+                                </dd>
-                           </dl>
+                                <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>
+                                    <mark>Experimental.</mark> A purple-ish theme for <a href="https://www.starshard.studio">Star Shard Studio</a>.
+                                </dd>
+                            </dl>
                         </dd>
                         <dt>Fonts</dt>
                         <dd>

src/rulesets/colors/colors-purplestar.less

@@ -0,0 +1,31 @@
+/*
+ * Bluelib Purple Star Colors
+ * 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%);
+
+    .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(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%);
+
+    .map-hsl-group(inserted; green);
+    .map-hsl-group(deleted; red);
+}