[design] improve link item name colour

This commit is contained in:
zombieFox
2020-07-23 15:52:14 +01:00
parent 7574b148ee
commit 9456fd3205
2 changed files with 40 additions and 14 deletions

View File

@ -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 + ";");

View File

@ -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",