From 5a8be818358a744228c01e7163b9557705cb4242 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Fri, 15 Nov 2019 14:25:36 +0000
Subject: [PATCH] [design] improve style guide accent colour

---
 src/css/form.css     | 74 ++------------------------------------------
 src/style-guide.html | 22 +++++++++++--
 2 files changed, 22 insertions(+), 74 deletions(-)

diff --git a/src/css/form.css b/src/css/form.css
index 02b0f799..91afd7be 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -439,7 +439,7 @@ input[type="radio"]+label .label-icon:after {
   transform: scale(0.7);
   transform-origin: center;
   z-index: 3;
-  transition: background-color var(--layout-timing-extra-fast), border-radius  var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast);
+  transition: background-color var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast);
   /* transition: background-color var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast), clip-path var(--layout-timing-extra-fast); */
 }
 
@@ -503,6 +503,7 @@ input[type="color"] {
   padding: 0;
   margin: 0 0 1em 0;
   width: 100%;
+  min-width: 3em;
   height: 2.5em;
   display: block;
   border: 0;
@@ -1012,6 +1013,7 @@ input[type="range"]:disabled::-moz-range-progress {
   right: 1em;
   width: calc(var(--form-thumb-size) * 0.8);
   height: calc(var(--form-thumb-size) * 0.8);
+  min-width: inherit;
   z-index: 1;
   border-radius: 50%;
   transform: translateY(-50%);
@@ -1135,76 +1137,6 @@ input[type="range"]:disabled::-moz-range-progress {
   transform: translate(-50%, -50%);
 }
 
-/* .form-grid input[type="checkbox"]+label:before,
-.form-grid input[type="radio"]+label:before {
-  content: "";
-  background-color: rgb(var(--form-grid-input-background));
-  margin: 0;
-  font-size: 1em;
-  display: block;
-  border-radius: 50%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: calc(var(--form-thumb-size) / 2);
-  height: calc(var(--form-thumb-size) / 2);
-  transform: scale(1) translate(-50%, -50%);
-  transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), width var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
-}
-
-.form-grid input[type="checkbox"]:focus+label:before,
-.form-grid input[type="checkbox"]:hover+label:before,
-.form-grid input[type="radio"]:focus+label:before,
-.form-grid input[type="radio"]:hover+label:before {
-  background-color: rgb(var(--form-grid-input-background-focus-hover));
-  box-shadow: var(--form-hover-ring);
-  transform: scale(1) translate(-50%, -50%);
-}
-
-.form-grid input[type="checkbox"]:active+label:before,
-.form-grid input[type="radio"]:active+label:before {
-  background-color: rgb(var(--form-grid-input-background-active));
-  width: var(--form-thumb-size);
-  height: var(--form-thumb-size);
-  box-shadow: var(--form-focus-ring-accent);
-  transform: scale(1) translate(-50%, -50%);
-}
-
-.form-grid input[type="checkbox"]:checked+label:before,
-.form-grid input[type="radio"]:checked+label:before {
-  background-color: rgb(var(--form-grid-input-background-checked));
-  width: var(--form-thumb-size);
-  height: var(--form-thumb-size);
-  transform: scale(1) translate(-50%, -50%);
-}
-
-.form-grid input[type="checkbox"]:checked:active+label:before,
-.form-grid input[type="radio"]:checked:active+label:before {
-  background-color: rgb(var(--form-grid-input-background-active));
-  transform: scale(1) translate(-50%, -50%);
-}
-
-.form-grid input[type="checkbox"]:disabled+label:before,
-.form-grid input[type="checkbox"]:disabled:focus+label:before,
-.form-grid input[type="checkbox"]:disabled:hover+label:before,
-.form-grid input[type="checkbox"]:disabled:active+label:before,
-.form-grid input[type="radio"]:disabled+label:before,
-.form-grid input[type="radio"]:disabled:focus+label:before,
-.form-grid input[type="radio"]:disabled:hover+label:before,
-.form-grid input[type="radio"]:disabled:active+label:before {
-  background-color: rgb(var(--form-grid-input-background-disabled));
-  width: calc(var(--form-thumb-size) / 2);
-  height: calc(var(--form-thumb-size) / 2);
-  box-shadow: none;
-}
-
-.form-grid input[type="checkbox"]:disabled:checked+label:before,
-.form-grid input[type="radio"]:disabled:checked+label:before {
-  background-color: rgb(var(--form-grid-input-background-disabled));
-  width: var(--form-thumb-size);
-  height: var(--form-thumb-size);
-  box-shadow: none;
-} */
 .form-indent {
   margin-left: 2.25em;
 }
diff --git a/src/style-guide.html b/src/style-guide.html
index 95c9895c..905efb5d 100644
--- a/src/style-guide.html
+++ b/src/style-guide.html
@@ -48,6 +48,10 @@
       <button class="button mb-0 style-guide-control theme-dark" tabindex="1">Dark</button>
       <button class="button mb-0 style-guide-control theme-light" tabindex="1">Light</button>
     </div>
+    <div class="input-wrap">
+      <label for="style-guide-control-theme-color">Accent Colour</label>
+      <input id="style-guide-control-theme-color" class="style-guide-control theme-color" class="form-group-item-half mb-0" type="color" value="#fa8200" tabindex="1">
+    </div>
     <div class="input-wrap">
       <label for="radius" class="style-guide-control">Radius</label>
       <input id="radius" class="style-guide-control radius" type="range" min="0" max="600" value="0" step="1" tabindex="1">
@@ -128,11 +132,19 @@
     </div>
     <hr>
     <div class="input-wrap">
-      <input id="style-guide-checkbox" type="checkbox" tabindex="1">
-      <label for="style-guide-checkbox"><span class="label-icon"></span> Checkbox</label>
+      <input id="style-guide-checkbox-1" type="checkbox" tabindex="1" checked>
+      <label for="style-guide-checkbox-1"><span class="label-icon"></span> Checkbox 1</label>
     </div>
     <div class="input-wrap">
-      <input id="style-guide-radio-7" type="radio" name="style-guide-radio-3" tabindex="1">
+      <input id="style-guide-checkbox-2" type="checkbox" tabindex="1">
+      <label for="style-guide-checkbox-2"><span class="label-icon"></span> Checkbox 2</label>
+    </div>
+    <div class="input-wrap">
+      <input id="style-guide-checkbox-3" type="checkbox" tabindex="1">
+      <label for="style-guide-checkbox-3"><span class="label-icon"></span> Checkbox 3</label>
+    </div>
+    <div class="input-wrap">
+      <input id="style-guide-radio-7" type="radio" name="style-guide-radio-3" tabindex="1" checked>
       <label for="style-guide-radio-7"><span class="label-icon"></span> Radio 1</label>
     </div>
     <div class="input-wrap">
@@ -313,6 +325,10 @@
     helper.e(".style-guide-form-dropdown").addEventListener("click", function() {
       helper.toggleClass(helper.e(".form-dropdown"), "form-dropdown-open");
     }, false);
+    helper.e(".theme-color").addEventListener("change", function() {
+      var color = helper.hexToRgb(this.value);
+      helper.e("html").style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
+    }, false);
   </script>
 
 </body>