[design] improve link item name colour

Author: zombieFox

src/js/link.js

@@ -1360,18 +1360,23 @@ var link = (function(){
 };
 if(stagedLink.link.color.by=="custom"){
 varhsl=helper.convertColor.rgb.hsl(stagedLink.link.color.rgb);
-varshades=theme.mod.color.shades(stagedLink.link.color.rgb);
+
+varshades=theme.mod.color.shades({
+rgb: stagedLink.link.color.rgb,
+contrastNegative: 8,
+contrastPositive: 8
+});
+
 varrgb;
-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+"");

src/js/theme.js

@@ -741,12 +741,28 @@ var theme = (function(){
 }
 });
 },
-shades: function(rgb){
+shades: function(override){
+varoptions={
+rgb: null,
+contrastNegative: null,
+contrastPositive: null
+};
+if(override){
+options=helper.applyOptions(options,override);
+};
+
 varshadeMax=10;
 varshadeMin=1;
-varcontrastNeg=state.get.current().theme.color.contrast.dark;
-varcontrastPos=state.get.current().theme.color.contrast.light;
-varhsl=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;
+};
+
+varhsl=helper.convertColor.rgb.hsl(options.rgb);
+
 varvalidateRGBNumber=function(rgb){
 for(varkeyinrgb){
 if(rgb[key]<0){
@@ -764,11 +780,12 @@ var theme = (function(){
 positive: {}
 };
 
+// set light theme shades
 for(vari=shadeMax;i>=shadeMin;i--){
 varrgb=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,15 +795,19 @@ var theme = (function(){
 varrgb=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);
 };
 
 returnshadeColors;
 },
 generated: function(){
-varshades=mod.color.shades(state.get.current().theme.color.rgb);
+varshades=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",