From 9456fd3205ec93bd2ac64121cf39366cfac4316f Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Thu, 23 Jul 2020 15:52:14 +0100
Subject: [PATCH] [design] improve link item name colour

---
 src/js/link.js  | 19 ++++++++++++-------
 src/js/theme.js | 35 ++++++++++++++++++++++++++++-------
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/js/link.js b/src/js/link.js
index 255dfc77..179d878c 100644
--- a/src/js/link.js
+++ b/src/js/link.js
@@ -1360,18 +1360,23 @@ var link = (function() {
         };
         if (stagedLink.link.color.by == "custom") {
           var hsl = helper.convertColor.rgb.hsl(stagedLink.link.color.rgb);
-          var shades = theme.mod.color.shades(stagedLink.link.color.rgb);
+
+          var shades = theme.mod.color.shades({
+            rgb: stagedLink.link.color.rgb,
+            contrastNegative: 8,
+            contrastPositive: 8
+          });
+
           var rgb;
-          if (hsl.l < 50) {
-            rgb = shades.positive["10"];
-          } else {
-            rgb = shades.negative["10"];
-          };
-          if (hsl.l < 50) {
+
+          if (hsl.l <= 50) {
+            rgb = shades.positive["9"];
             linkItemStyle.push("--theme-style-text: var(--theme-white);");
           } else {
+            rgb = shades.negative["9"];
             linkItemStyle.push("--theme-style-text: var(--theme-black);");
           };
+
           linkItemStyle.push("--link-item-visual-element-color-focus-hover: var(--theme-style-text);");
           linkItemStyle.push("--link-item-color: " + stagedLink.link.color.rgb.r + ", " + stagedLink.link.color.rgb.g + ", " + stagedLink.link.color.rgb.b + ";");
           linkItemStyle.push("--link-item-color-focus-hover: " + stagedLink.link.color.rgb.r + ", " + stagedLink.link.color.rgb.g + ", " + stagedLink.link.color.rgb.b + ";");
diff --git a/src/js/theme.js b/src/js/theme.js
index f6c13213..598bd232 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -741,12 +741,28 @@ var theme = (function() {
         }
       });
     },
-    shades: function(rgb) {
+    shades: function(override) {
+      var options = {
+        rgb: null,
+        contrastNegative: null,
+        contrastPositive: null
+      };
+      if (override) {
+        options = helper.applyOptions(options, override);
+      };
+
       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 hsl = helper.convertColor.rgb.hsl(rgb);
+
+      if (options.contrastNegative == null || !options.contrastNegative) {
+        options.contrastNegative = state.get.default().theme.color.contrast.dark;
+      };
+      if (options.contrastPositive == null || !options.contrastPositive) {
+        options.contrastPositive = state.get.default().theme.color.contrast.light;
+      };
+
+      var hsl = helper.convertColor.rgb.hsl(options.rgb);
+
       var validateRGBNumber = function(rgb) {
         for (var key in rgb) {
           if (rgb[key] < 0) {
@@ -764,11 +780,12 @@ var theme = (function() {
         positive: {}
       };
 
+      // 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 - (contrastNeg * i)
+          l: hsl.l - (options.contrastNegative * i)
         });
         shadeColors.negative[i] = validateRGBNumber(rgb);
       };
@@ -778,7 +795,7 @@ var theme = (function() {
         var rgb = helper.convertColor.hsl.rgb({
           h: hsl.h,
           s: hsl.s,
-          l: hsl.l + (contrastPos * i)
+          l: hsl.l + (options.contrastPositive * i)
         });
         shadeColors.positive[i] = validateRGBNumber(rgb);
       };
@@ -786,7 +803,11 @@ var theme = (function() {
       return shadeColors;
     },
     generated: function() {
-      var shades = mod.color.shades(state.get.current().theme.color.rgb);
+      var shades = mod.color.shades({
+        rgb: state.get.current().theme.color.rgb,
+        contrastNegative: state.get.current().theme.color.contrast.dark,
+        contrastPositive: state.get.current().theme.color.contrast.light
+      });
       helper.setObject({
         object: state.get.current(),
         path: "theme.color.generated.negative",