From 0137d1567d04822c48fe2b51411066daeca533d0 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Mon, 6 Jan 2020 16:55:55 -0700
Subject: [PATCH] [feature] add theme colour contrast controls

---
 package-lock.json |   2 +-
 package.json      |   2 +-
 src/index.html    |  21 +++++
 src/js/control.js |  44 ++++++++++
 src/js/state.js   |   8 ++
 src/js/theme.js   | 201 ++++++++++++++++++++++++++++++++++------------
 src/js/update.js  |   7 ++
 src/js/version.js |   2 +-
 src/manifest.json |   2 +-
 9 files changed, 234 insertions(+), 55 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f462bbac..9e6edee7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.8.3",
+  "version": "4.9.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 34da1b23..077f7eb3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.8.3",
+  "version": "4.9.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {
diff --git a/src/index.html b/src/index.html
index d73dcbf5..f2999b63 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1484,6 +1484,27 @@
                 </div>
               </div>
               <hr>
+              <div class="input-wrap">
+                <label for="control-theme-color-contrast-light">Light shade contrast</label>
+                <div class="form-group form-group-block mb-0">
+                  <input id="control-theme-color-contrast-light" class="control-theme-color-contrast-light mr-3" type="range" min="100" max="800" value="400" step="10" tabindex="-1">
+                  <div class="control-theme-color-contrast-light-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                </div>
+              </div>
+              <div class="button-wrap">
+                <button class="control-theme-color-contrast-light-default button mb-0" tabindex="-1">Default light shade contrast</button>
+              </div>
+              <div class="input-wrap">
+                <label for="control-theme-color-contrast-dark">Dark shade contrast</label>
+                <div class="form-group form-group-block mb-0">
+                  <input id="control-theme-color-contrast-dark" class="control-theme-color-contrast-dark mr-3" type="range" min="100" max="800" value="400" step="10" tabindex="-1">
+                  <div class="control-theme-color-contrast-dark-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                </div>
+              </div>
+              <div class="button-wrap">
+                <button class="control-theme-color-contrast-dark-default button mb-0" tabindex="-1">Default dark shade contrast</button>
+              </div>
+              <hr>
               <div class="form-group form-group-block form-group-border form-group-border-theme-color">
                 <div class="form-group-text form-group-text-borderless">
                   <div class="theme-color-box theme-color-neg-10"></div>
diff --git a/src/js/control.js b/src/js/control.js
index 51ab303a..61995c57 100644
--- a/src/js/control.js
+++ b/src/js/control.js
@@ -2799,6 +2799,50 @@ var control = (function() {
       render.range.count(this);
       render.update();
     }
+  }, {
+    element: helper.e(".control-theme-color-contrast-light"),
+    path: "theme.color.contrast.light",
+    type: "range",
+    valueMod: ["float"],
+    rangeCountElement: helper.e(".control-theme-color-contrast-light-count"),
+    func: function() {
+      theme.render.color.shade();
+      render.range.count(this);
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-color-contrast-light-default"),
+    type: "button",
+    func: function() {
+      mod.setValue("theme.color.contrast.light", helper.getObject({
+        object: state.get.default(),
+        path: "theme.color.contrast.light"
+      }));
+      theme.render.color.shade();
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-color-contrast-dark"),
+    path: "theme.color.contrast.dark",
+    type: "range",
+    valueMod: ["float"],
+    rangeCountElement: helper.e(".control-theme-color-contrast-dark-count"),
+    func: function() {
+      theme.render.color.shade();
+      render.range.count(this);
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-color-contrast-dark-default"),
+    type: "button",
+    func: function() {
+      mod.setValue("theme.color.contrast.dark", helper.getObject({
+        object: state.get.default(),
+        path: "theme.color.contrast.dark"
+      }));
+      theme.render.color.shade();
+      render.update();
+    }
   }, {
     element: helper.e(".control-theme-accent-current-picker"),
     path: "theme.accent.current",
diff --git a/src/js/state.js b/src/js/state.js
index a6f145d9..f82a1396 100644
--- a/src/js/state.js
+++ b/src/js/state.js
@@ -241,6 +241,10 @@ var state = (function() {
           r: 129,
           g: 138,
           b: 160
+        },
+        contrast: {
+          light: 4,
+          dark: 4
         }
       },
       font: {
@@ -374,6 +378,10 @@ var state = (function() {
           r: 129,
           g: 138,
           b: 160
+        },
+        contrast: {
+          light: 4,
+          dark: 4
         }
       },
       font: {
diff --git a/src/js/theme.js b/src/js/theme.js
index fa26846a..4327cb00 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -189,6 +189,10 @@ var theme = (function() {
           r: 129,
           g: 138,
           b: 160
+        },
+        contrast: {
+          light: 4,
+          dark: 4
         }
       },
       accent: {
@@ -222,6 +226,10 @@ var theme = (function() {
           r: 73,
           g: 104,
           b: 171
+        },
+        contrast: {
+          light: 4,
+          dark: 3.5
         }
       },
       accent: {
@@ -255,6 +263,10 @@ var theme = (function() {
           r: 153,
           g: 34,
           b: 221
+        },
+        contrast: {
+          light: 4,
+          dark: 4
         }
       },
       accent: {
@@ -288,6 +300,10 @@ var theme = (function() {
           r: 106,
           g: 142,
           b: 199
+        },
+        contrast: {
+          light: 4,
+          dark: 4
         }
       },
       accent: {
@@ -321,6 +337,10 @@ var theme = (function() {
           r: 63,
           g: 191,
           b: 143
+        },
+        contrast: {
+          light: 4,
+          dark: 4
         }
       },
       accent: {
@@ -354,6 +374,10 @@ var theme = (function() {
           r: 98,
           g: 136,
           b: 197
+        },
+        contrast: {
+          light: 4.4,
+          dark: 1.5
         }
       },
       accent: {
@@ -387,6 +411,10 @@ var theme = (function() {
           r: 159,
           g: 118,
           b: 87
+        },
+        contrast: {
+          light: 5,
+          dark: 3.5
         }
       },
       accent: {
@@ -412,20 +440,24 @@ var theme = (function() {
       },
       color: {
         hsl: {
-          h: 54,
-          s: 78,
-          l: 47
+          h: 56,
+          s: 100,
+          l: 30
         },
         rgb: {
-          r: 213,
-          g: 194,
-          b: 26
+          r: 153,
+          g: 142,
+          b: 0
+        },
+        contrast: {
+          light: 2,
+          dark: 1
         }
       },
       accent: {
         r: 255,
-        g: 220,
-        b: 22
+        g: 185,
+        b: 0
       },
       radius: 0.5,
       style: "light"
@@ -453,6 +485,10 @@ var theme = (function() {
           r: 119,
           g: 188,
           b: 194
+        },
+        contrast: {
+          light: 1,
+          dark: 4
         }
       },
       accent: {
@@ -486,6 +522,10 @@ var theme = (function() {
           r: 105,
           g: 94,
           b: 109
+        },
+        contrast: {
+          light: 7,
+          dark: 2
         }
       },
       accent: {
@@ -519,6 +559,10 @@ var theme = (function() {
           r: 175,
           g: 112,
           b: 173
+        },
+        contrast: {
+          light: 3,
+          dark: 2
         }
       },
       accent: {
@@ -552,6 +596,10 @@ var theme = (function() {
           r: 224,
           g: 91,
           b: 91
+        },
+        contrast: {
+          light: 3.5,
+          dark: 4.5
         }
       },
       accent: {
@@ -578,13 +626,17 @@ var theme = (function() {
       color: {
         hsl: {
           h: 214,
-          s: 25,
+          s: 30,
           l: 44
         },
         rgb: {
-          r: 85,
-          g: 110,
-          b: 143
+          r: 78,
+          g: 107,
+          b: 145
+        },
+        contrast: {
+          light: 3.5,
+          dark: 3
         }
       },
       accent: {
@@ -618,6 +670,10 @@ var theme = (function() {
           r: 80,
           g: 106,
           b: 199
+        },
+        contrast: {
+          light: 4,
+          dark: 4
         }
       },
       accent: {
@@ -651,6 +707,10 @@ var theme = (function() {
           r: 117,
           g: 117,
           b: 117
+        },
+        contrast: {
+          light: 5,
+          dark: 3.5
         }
       },
       accent: {
@@ -684,6 +744,10 @@ var theme = (function() {
           r: 254,
           g: 45,
           b: 230
+        },
+        contrast: {
+          light: 4,
+          dark: 4
         }
       },
       accent: {
@@ -709,14 +773,18 @@ var theme = (function() {
       },
       color: {
         hsl: {
-          h: 193,
-          s: 50,
+          h: 191,
+          s: 86,
           l: 46
         },
         rgb: {
-          r: 58,
-          g: 150,
-          b: 175
+          r: 16,
+          g: 181,
+          b: 218
+        },
+        contrast: {
+          light: 5,
+          dark: 4
         }
       },
       accent: {
@@ -750,6 +818,10 @@ var theme = (function() {
           r: 127,
           g: 127,
           b: 127
+        },
+        contrast: {
+          light: 5.3,
+          dark: 4
         }
       },
       accent: {
@@ -777,12 +849,16 @@ var theme = (function() {
         hsl: {
           h: 194,
           s: 77,
-          l: 51
+          l: 50
         },
         rgb: {
-          r: 33,
-          g: 181,
-          b: 226
+          r: 29,
+          g: 179,
+          b: 225
+        },
+        contrast: {
+          light: 4.5,
+          dark: 2.6
         }
       },
       accent: {
@@ -809,13 +885,17 @@ var theme = (function() {
       color: {
         hsl: {
           h: 211,
-          s: 7,
-          l: 53
+          s: 10,
+          l: 50
         },
         rgb: {
-          r: 126,
-          g: 134,
-          b: 143
+          r: 114,
+          g: 127,
+          b: 140
+        },
+        contrast: {
+          light: 5,
+          dark: 2
         }
       },
       accent: {
@@ -849,6 +929,10 @@ var theme = (function() {
           r: 100,
           g: 95,
           b: 87
+        },
+        contrast: {
+          light: 5.2,
+          dark: 3.2
         }
       },
       accent: {
@@ -876,12 +960,16 @@ var theme = (function() {
         hsl: {
           h: 228,
           s: 71,
-          l: 47
+          l: 50
         },
         rgb: {
-          r: 34,
-          g: 68,
-          b: 204
+          r: 36,
+          g: 73,
+          b: 218
+        },
+        contrast: {
+          light: 4.2,
+          dark: 3.9
         }
       },
       accent: {
@@ -915,6 +1003,10 @@ var theme = (function() {
           r: 98,
           g: 113,
           b: 120
+        },
+        contrast: {
+          light: 4,
+          dark: 4
         }
       },
       accent: {
@@ -940,19 +1032,23 @@ var theme = (function() {
       },
       color: {
         hsl: {
-          h: 31,
-          s: 22,
-          l: 48
+          h: 0,
+          s: 13,
+          l: 37
         },
         rgb: {
-          r: 149,
-          g: 123,
-          b: 95
+          r: 106,
+          g: 82,
+          b: 82
+        },
+        contrast: {
+          light: 6.3,
+          dark: 2
         }
       },
       accent: {
-        r: 241,
-        g: 255,
+        r: 255,
+        g: 204,
         b: 0
       },
       radius: 0.80,
@@ -1040,11 +1136,12 @@ var theme = (function() {
 
   render.color = {
     shade: function() {
-      var shadeSteps = 10;
-      var lightShift = 4;
+      var shadeMax = 10;
+      var shadeMin = 1;
+      var contrastNeg = state.get.current().theme.color.contrast.dark;
+      var contrastPos = state.get.current().theme.color.contrast.light;
       var html = helper.e("html");
       var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb);
-      html.style.setProperty("--theme-shade", state.get.current().theme.color.rgb.r + ", " + state.get.current().theme.color.rgb.g + ", " + state.get.current().theme.color.rgb.b);
       var renderShade = function(name, index, rgb) {
         for (var key in rgb) {
           if (rgb[key] < 0) {
@@ -1059,19 +1156,23 @@ var theme = (function() {
         };
         html.style.setProperty(name + index, rgb.r + ", " + rgb.g + ", " + rgb.b);
       };
-      for (var i = 1; i <= shadeSteps; i++) {
+      // set light theme shades
+      for (var i = shadeMax; i >= shadeMin; i--) {
         var rgb = helper.convertColor.hsl.rgb({
           h: hsl.h,
           s: hsl.s,
-          l: hsl.l - (lightShift * i)
+          l: hsl.l - (contrastNeg * i)
         });
         renderShade("--theme-shade-neg-", i, rgb);
       };
-      for (var i = 1; i <= shadeSteps; i++) {
+      // set primary theme shades
+      html.style.setProperty("--theme-shade", state.get.current().theme.color.rgb.r + ", " + state.get.current().theme.color.rgb.g + ", " + state.get.current().theme.color.rgb.b);
+      // set dark theme shades
+      for (var i = shadeMin; i <= shadeMax; i++) {
         var rgb = helper.convertColor.hsl.rgb({
           h: hsl.h,
           s: hsl.s,
-          l: hsl.l + (lightShift * i)
+          l: hsl.l + (contrastPos * i)
         });
         renderShade("--theme-shade-pos-", i, rgb);
       };
@@ -1220,7 +1321,6 @@ var theme = (function() {
       var themePresetButton = helper.node("button|class:theme-preset-button button mb-0,tabindex:-1");
       var themePresetPreview = helper.node("span|class:theme-preset-preview");
       var shadeSteps = 4;
-      var lightShift = 12;
       var rgb = arrayItem.color.rgb;
       var hsl = helper.convertColor.rgb.hsl(rgb);
       for (var i = 1; i <= shadeSteps; i++) {
@@ -1229,13 +1329,13 @@ var theme = (function() {
             rgb = helper.convertColor.hsl.rgb({
               h: hsl.h,
               s: hsl.s,
-              l: hsl.l - (lightShift * (i - 1))
+              l: hsl.l - ((arrayItem.color.contrast.dark) * (i * 2))
             });
           } else if (arrayItem.style == "light") {
             rgb = helper.convertColor.hsl.rgb({
               h: hsl.h,
               s: hsl.s,
-              l: hsl.l + (lightShift * (i - 1))
+              l: hsl.l + ((arrayItem.color.contrast.light) * (i * 2))
             });
           };
         };
@@ -1300,7 +1400,6 @@ var theme = (function() {
           var themeCustomRemove = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button mb-0,tabindex:-2");
           var themeCustomRemoveIcon = helper.node("spa|class:button-icon icon-close");
           var shadeSteps = 4;
-          var lightShift = 12;
           var rgb = arrayItem.color.rgb;
           var hsl = helper.convertColor.rgb.hsl(rgb);
           for (var i = 1; i <= shadeSteps; i++) {
@@ -1309,13 +1408,13 @@ var theme = (function() {
                 rgb = helper.convertColor.hsl.rgb({
                   h: hsl.h,
                   s: hsl.s,
-                  l: hsl.l - (lightShift * (i - 1))
+                  l: hsl.l - ((arrayItem.color.contrast.dark) * (i * 2))
                 });
               } else if (arrayItem.style == "light") {
                 rgb = helper.convertColor.hsl.rgb({
                   h: hsl.h,
                   s: hsl.s,
-                  l: hsl.l + (lightShift * (i - 1))
+                  l: hsl.l + ((arrayItem.color.contrast.light) * (i * 2))
                 });
               };
             };
diff --git a/src/js/update.js b/src/js/update.js
index 9f494aaa..2ed05e6e 100644
--- a/src/js/update.js
+++ b/src/js/update.js
@@ -746,6 +746,13 @@ var update = (function() {
     "4.8.0": function(data) {
       data.state.theme.custom = [];
       return data;
+    },
+    "4.9.0": function(data) {
+      data.state.theme.color.contrast = {
+        light: 4,
+        dark: 4
+      };
+      return data;
     }
   };
 
diff --git a/src/js/version.js b/src/js/version.js
index 9e778685..78b56d12 100644
--- a/src/js/version.js
+++ b/src/js/version.js
@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "4.8.3";
+  var current = "4.9.0";
 
   var name = "Naughty Goose";
 
diff --git a/src/manifest.json b/src/manifest.json
index 80254423..829613db 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "4.8.3",
+  "version": "4.9.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"