Create colors-royaldawn ruleset, along with some other improvements

dist/classic.module.css

@@ -4,6 +4,7 @@
  */
 .bluelib {
   --b-border-radius: 8px;
+  --b-outer-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
 .bluelib,
 .bluelib * {
@@ -15,7 +16,7 @@
 .bluelib .header-4,
 .bluelib .header-5,
 .bluelib .header-6 {
-  text-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
+  text-shadow: var(--b-outer-shadow);
 }
 .bluelib .panel .header-1,
 .bluelib .panel .header-2,
@@ -28,7 +29,7 @@
 .bluelib .panel,
 .bluelib .table.panel > .table-caption {
   border-radius: var(--b-border-radius);
-  box-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
+  box-shadow: var(--b-outer-shadow);
 }
 .bluelib .panel .panel,
 .bluelib .table.panel > .table-caption .panel {
@@ -96,7 +97,7 @@
 }
 .bluelib .table.panel > .table-caption {
   border-radius: 0;
-  box-shadow: 0.0625em 0 0.25em hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
+  box-shadow: var(--b-outer-shadow);
 }
 .bluelib .table.panel-dialog > .table-caption {
   border-bottom-width: 2px;

dist/classic.root.css

@@ -4,6 +4,7 @@
  */
 body {
   --b-border-radius: 8px;
+  --b-outer-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
 body,
 body * {
@@ -15,7 +16,7 @@ body h3,
 body h4,
 body h5,
 body h6 {
-  text-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
+  text-shadow: var(--b-outer-shadow);
 }
 body .panel h1,
 body .panel h2,
@@ -28,7 +29,7 @@ body .panel h6 {
 body .panel,
 body table.panel > caption {
   border-radius: var(--b-border-radius);
-  box-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
+  box-shadow: var(--b-outer-shadow);
 }
 body .panel .panel,
 body table.panel > caption .panel {
@@ -96,7 +97,7 @@ body table.panel {
 }
 body table.panel > caption {
   border-radius: 0;
-  box-shadow: 0.0625em 0 0.25em hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
+  box-shadow: var(--b-outer-shadow);
 }
 body table.dialog > caption {
   border-bottom-width: 2px;

dist/colors-royaldawn.module.css

@@ -0,0 +1,66 @@
+/*
+ * Bluelib Royal Dawn Colors
+ * by <me@steffo.eu>
+ */
+.bluelib {
+  --bhsl-background-hue: 31deg;
+  --bhsl-background-saturation: 100%;
+  --bhsl-background-lightness: 10%;
+  --bhsl-foreground-hue: 46deg;
+  --bhsl-foreground-saturation: 97%;
+  --bhsl-foreground-lightness: 85%;
+  --bhsl-primary-hue: 0deg;
+  --bhsl-primary-saturation: 0%;
+  --bhsl-primary-lightness: 100%;
+  --bhsl-link-hue: 195deg;
+  --bhsl-link-saturation: 97%;
+  --bhsl-link-lightness: 47%;
+  --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.75;
+}
+body {
+  background-image: linear-gradient(90deg, #E76608, #3C247F);
+}

dist/colors-royaldawn.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-royaldawn.less";
+

dist/colors-royaldawn.root.css

@@ -0,0 +1,66 @@
+/*
+ * Bluelib Royal Dawn Colors
+ * by <me@steffo.eu>
+ */
+body {
+  --bhsl-background-hue: 31deg;
+  --bhsl-background-saturation: 100%;
+  --bhsl-background-lightness: 10%;
+  --bhsl-foreground-hue: 46deg;
+  --bhsl-foreground-saturation: 97%;
+  --bhsl-foreground-lightness: 85%;
+  --bhsl-primary-hue: 0deg;
+  --bhsl-primary-saturation: 0%;
+  --bhsl-primary-lightness: 100%;
+  --bhsl-link-hue: 195deg;
+  --bhsl-link-saturation: 97%;
+  --bhsl-link-lightness: 47%;
+  --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.75;
+}
+body {
+  background-image: linear-gradient(90deg, #E76608, #3C247F);
+}

dist/colors-royaldawn.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-royaldawn.less";
+

dist/glass.module.css

@@ -4,16 +4,18 @@
  */
 .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))) {
   .bluelib .panel,
   .bluelib .table.panel > .table-caption {
-    background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / 0.3);
+    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)));
   }
   .bluelib .panel .panel,
   .bluelib .table.panel > .table-caption .panel {
-    background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
+    background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));
     backdrop-filter: none;
   }
   .bluelib .modifier-mark,

dist/glass.root.css

@@ -4,16 +4,18 @@
  */
 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))) {
   body .panel,
   body table.panel > caption {
-    background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / 0.3);
+    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)));
   }
   body .panel .panel,
   body table.panel > caption .panel {
-    background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
+    background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));
     backdrop-filter: none;
   }
   body .mark,

examples/index.html

@@ -15,6 +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/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">
@@ -30,7 +31,7 @@
     <title>Bluelib</title>
 </head>
 <body id="body" class="theme-bluelib">
-    <img id="background" alt="" src="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg">
+    <img id="background" alt="" src="">
     <main>
         <article>
             <h1>
@@ -215,6 +216,10 @@
                                <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>
+                               <dd>
+                                   The palette of the <a href="https://www.ryg.one">RYG</a> community.
+                               </dd>
                            </dl>
                         </dd>
                         <dt>Fonts</dt>
@@ -935,7 +940,7 @@
                 </section>
                 <section class="panel box" id="panel-code">
                     <h3>
-                        Code
+                        <u>Code</u>
                     </h3>
                     <p>
                         A <dfn id="dfn-code">code</dfn> element denotes that its contents are some kind of <b>code</b> (probably belonging to a programming language).
@@ -956,7 +961,7 @@
                 </section>
                 <section class="panel box" id="panel-sample">
                     <h3>
-                        Sample input and output
+                        <u>K</u>ey<u>b</u>oar<u>d</u> input and <u>samp</u>le output
                     </h3>
                     <p>
                         <dfn id="dfn-sample-input">Input samples</dfn> and <dfn id="dfn-sample-output">output samples</dfn> from a computer have elements which denote them, and are formatted appropriately.

src/rulesets/classic.less

@@ -8,6 +8,9 @@
     & {
         // Sets the border radius of all panels
         --b-border-radius: 8px;
+
+        // Set the shadow drawn on element placed directly on the background
+        --b-outer-shadow: 2px 2px 4px .hsl-group(background)[@c];
     }
 
     &, @{all} {
@@ -17,7 +20,7 @@
 
     // Give headers a slight shadow so they are easier to read outside of panels
     @{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
-        text-shadow: 2px 2px 4px .hsl-group(background)[@c];
+        text-shadow: var(--b-outer-shadow);
     }
 
     // But do not give it to headers inside panels
@@ -31,7 +34,7 @@
         border-radius: var(--b-border-radius);
 
         // And a shadow effect
-        box-shadow: 2px 2px 4px .hsl-group(background)[@c];
+        box-shadow: var(--b-outer-shadow);
 
         // Do not give the same effects to nested panels
         @{panel} {
@@ -78,7 +81,7 @@
             border-radius: 0;
             
             // Minimize the visibility of the caption's box shadow to prevent overlap with the table itself
-            box-shadow: 0.0625em 0 0.25em .hsl-group(background)[@c];
+            box-shadow: var(--b-outer-shadow);
         }
     }
 

src/rulesets/colors/colors-royaldawn.less

@@ -0,0 +1,38 @@
+/*
+ * Bluelib Royal Dawn Colors
+ * by <me@steffo.eu>
+ */
+
+@{bluelib} {
+    .create-hsl-group(background; 31deg; 100%; 10%);
+    .create-hsl-group(foreground; 46deg; 97%; 85%);
+    .create-hsl-group(primary; 0deg; 0%; 100%);
+    .create-hsl-group(link; 195deg; 97%; 47%);
+
+    .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.750;
+    }
+}
+
+body {
+    background-image: linear-gradient(90deg, #E76608, #3C247F);
+}

src/rulesets/glass.less

@@ -9,21 +9,22 @@
         --b-panel-blur: 16px;
 
         // Set the opacity of the glass panels
-        --b-panel-opacity: 0.075;
+        --b-panel-initial-opacity: 0.300;
+        --b-panel-nested-opacity: 0.075;
     }
 
     // Ensure that browsers not supporting backdrop-filter do not apply this style
     @supports (backdrop-filter: blur(var(--b-panel-blur))) {
 
         @{panel}, @{table}@{panel} > @{table-caption} {
-            background-color: .hsl-group(background; calc(4 * var(--b-panel-opacity)))[@c];
+            background-color: .hsl-group(background; var(--b-panel-initial-opacity))[@c];
             backdrop-filter:
                 blur(var(--b-panel-blur))
                 hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))
             ;
 
             @{panel} {
-                background-color: .hsl-group(current; var(--b-panel-opacity))[@c];
+                background-color: .hsl-group(current; var(--b-panel-nested-opacity))[@c];
                 backdrop-filter: none;
             }
         }