Repair customization JS in docs

docs/css/pico.docs.css

@@ -7,6 +7,7 @@
 :root {
   --icon-external:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
   --icon-check:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
 [data-theme="light"],
@@ -243,6 +244,10 @@ main > aside details[open] summary {
   box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
 }
 
+#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked {
+  background-image: var(--icon-check-dark);
+}
+
 #customization h4 {
   transition: color var(--transition);
 }

docs/index.html

@@ -202,7 +202,7 @@
 
             <p>CSS:</p>
 
-<pre><code><em>/* <span class="name"></span>Light theme (Default) */
+<pre><code><em>/* <span class="name"></span>Light scheme (Default) */
 /* Can be forced with data-theme="light" */</em>
 <b>[data-theme=<u>"light"</u>]</b>,
 <b>:root:not([data-theme=<u>"dark"</u>])</b> {
@@ -213,7 +213,7 @@
 }
 
 
-<em>/* <span class="name"></span>Dark theme (Auto) */
+<em>/* <span class="name"></span>Dark scheme (Auto) */
 /* Automatically enabled if user has Dark mode enabled */</em>
 <i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
   <b>:root:not([data-theme="light"])</b> {
@@ -224,7 +224,7 @@
 }
 
 
-<em>/* <span class="name"></span>Dark theme (Forced) */
+<em>/* <span class="name"></span>Dark scheme (Forced) */
 /* Enabled if forced with data-theme="dark" */</em>
 <b>[data-theme="<u>dark</u>"]</b> {
   <i>--primary</i>:            <u class="c600">...</u>;

docs/js/src/color-picker.js

@@ -221,7 +221,7 @@
         "a200": "#eeff41",
         "a400": "#c6ff00",
         "a700": "#aeea00",
-        "inverse": "#000"
+        "inverse": "rgba(0, 0, 0, 0.75)"
       },
       "yellow": {
         "50": "#fffde7",
@@ -238,7 +238,7 @@
         "a200": "#ffff00",
         "a400": "#ffea00",
         "a700": "#ffd600",
-        "inverse": "#000"
+        "inverse": "rgba(0, 0, 0, 0.75)"
       },
       "amber": {
         "50": "#fff8e1",
@@ -255,7 +255,7 @@
         "a200": "#ffd740",
         "a400": "#ffc400",
         "a700": "#ffab00",
-        "inverse": "#000"
+        "inverse": "rgba(0, 0, 0, 0.75)"
       },
       "orange": {
         "50": "#fff3e0",
@@ -377,7 +377,7 @@
                       +  '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
                       +  '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
                       +    'background-color: '+ data[color]['500'] +'; '
-                      + '}'
+                      +  '}';
       }
     }
 
@@ -438,41 +438,28 @@
 
   function generateTheme(name, data) {
 
-    // Code and Color name
+    // Update name and colors in demo code
-    // TODO: Create a function
+    var swap = {
-    var cName = document.querySelectorAll(colors.selectorTheme + ' .name');
+      '.name' : name.charAt(0).toUpperCase() + name.substring(1) + ' ',
-    for (var i = 0; i < cName.length; ++i) {
+      '.c500' : data[500],
-      cName[i].innerHTML = name.charAt(0).toUpperCase() + name.substring(1) + ' ';
+      '.c600' : data[600],
-    }
+      '.c700' : data[700],
-    var c500 = document.querySelectorAll(colors.selectorTheme + ' .c500');
+      '.c600-outline-light' : hexToRgbA(data[600], .125),
-    for (var i = 0; i < c500.length; ++i) {
+      '.c600-outline-dark'  : hexToRgbA(data[600], .25),
-      c500[i].innerHTML = data[500];
+      '.inverse' : data['inverse'],
-    }
-    var c600 = document.querySelectorAll(colors.selectorTheme + ' .c600');
-    for (var i = 0; i < c600.length; ++i) {
-      c600[i].innerHTML = data[600];
-    }
-    var c700 = document.querySelectorAll(colors.selectorTheme + ' .c700');
-    for (var i = 0; i < c700.length; ++i) {
-      c700[i].innerHTML = data[700];
-    }
-    var c600OutlineLight = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-light');
-    for (var i = 0; i < c600OutlineLight.length; ++i) {
-      c600OutlineLight[i].innerHTML = hexToRgbA(data[600], .125);
-    }
-    var c600OutlineDark = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-dark');
-    for (var i = 0; i < c600OutlineDark.length; ++i) {
-      c600OutlineDark[i].innerHTML = hexToRgbA(data[600], .25);
-    }
-    var inverse = document.querySelectorAll(colors.selectorTheme + ' .inverse');
-    for (var i = 0; i < inverse.length; ++i) {
-      inverse[i].innerHTML = data['inverse'];
     }
 
-    // CSS Style
+    Object.keys(swap).forEach(function(key) {
+      var target = document.querySelectorAll(colors.selectorTheme + ' ' + key);
+      for (var i = 0; i < target.length; ++i) {
+        target[i].innerHTML = swap[key];
+      }
+    });
+
+    // Update CSS Style
     var generatedStyles = '[data-theme="generated"] {'
-                        +   '--primary:' + data[600] + ';'
                         +   '--h4:' + data[700] + ';'
+                        +   '--primary:' + data[600] + ';'
                         +   '--primary-hover:' + data[700] + ';'
                         +   '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
                         +   '--primary-inverse:' + data['inverse'] + ';'
@@ -480,8 +467,8 @@
 
                         + '@media only screen and (prefers-color-scheme: dark) {'
                         +    ':root:not([data-theme="light"]) [data-theme="generated"] {'
-                        +     '--primary:' + data[600] + ';'
                         +     '--h4:' + data[400] + ';'
+                        +     '--primary:' + data[600] + ';'
                         +     '--primary-hover:' + data[500] + ';'
                         +     '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
                         +     '--primary-inverse:' + data['inverse'] + ';'
@@ -489,11 +476,19 @@
                         + '}'
 
                         + '[data-theme="dark"] [data-theme="generated"] {'
-                        +   '--primary:' + data[600] + ';'
                         +   '--h4:' + data[500] + ';'
+                        +   '--primary:' + data[600] + ';'
                         +   '--primary-hover:' + data[500] + ';'
                         +   '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
                         +   '--primary-inverse:' + data['inverse'] + ';'
+                        + '}'
+
+                        + '[data-theme="generated"] {'
+                        +   '--primary-border: var(--primary);'
+                        +   '--primary-hover-border: var(--primary-hover);'
+                        +   '--input-hover-border: var(--primary-hover);'
+                        +   '--input-focus: var(--primary-focus);'
+                        +   '--input-inverse: var(--primary-inverse);'
                         + '}';
 
     // Insert CSS Styles
@@ -518,7 +513,7 @@
         c= [c[0], c[0], c[1], c[1], c[2], c[2]];
       }
       c= '0x' + c.join('');
-      return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(',') + ',' + alpha + ')';
+      return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(', ') + ', ' + alpha + ')';
     }
     throw new Error('Bad Hex');
   }

docs/scss/layout/_documentation.scss

@@ -58,7 +58,7 @@
       &[data-color="yellow"],
       &[data-color="amber"] {
         &.picked {
-          // TODO
+          background-image: var(--icon-check-dark);
         }
       }
     }

docs/scss/themes/docs/_icons.scss

@@ -4,4 +4,5 @@
 :root {
   --icon-external:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
   --icon-check:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
 }