From 2dbf22c1dc1fe0772e82b17079bd4a76245db467 Mon Sep 17 00:00:00 2001 From: zombieFox Date: Thu, 23 Jul 2020 10:56:16 +0100 Subject: [PATCH] [design] improve link item name colour --- package-lock.json | 2 +- package.json | 2 +- src/css/form.css | 1 + src/css/link.css | 10 ++-- src/css/modal.css | 3 +- src/css/variables.css | 6 ++- src/js/link.js | 105 +++++++++++++++++++++--------------------- src/js/version.js | 2 +- src/manifest.json | 2 +- 9 files changed, 68 insertions(+), 65 deletions(-) diff --git a/package-lock.json b/package-lock.json index 108574c2..ccccf6de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "5.62.0", + "version": "5.63.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 5d3700b8..1a1a1a28 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "5.62.0", + "version": "5.63.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/css/form.css b/src/css/form.css index 4ab01ce5..55155b2e 100755 --- a/src/css/form.css +++ b/src/css/form.css @@ -5,6 +5,7 @@ fieldset:not(:only-child):not(:last-child), position: relative; width: 100%; display: block; + transition: border-color var(--layout-transition-extra-fast); } fieldset:not(:first-child), diff --git a/src/css/link.css b/src/css/link.css index 268fdd0f..24e04fe7 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -681,14 +681,14 @@ font-family: var(--theme-font-display-name); font-weight: var(--theme-font-display-weight); font-style: var(--theme-font-display-style); - color: rgb(var(--theme-accent)); + color: rgb(var(--link-item-visual-element-color)); line-height: 1; white-space: nowrap; transition: color var(--layout-transition-extra-fast); } .link-display-icon { - color: rgb(var(--theme-accent)); + color: rgb(var(--link-item-visual-element-color)); transition: color var(--layout-transition-extra-fast); } @@ -725,12 +725,12 @@ .link-item:focus .link-display-letter, .link-item:hover .link-display-icon, .link-item:focus .link-display-icon { - color: rgb(var(--theme-style-text)); + color: rgb(var(--link-item-visual-element-color-focus-hover)); } .link-panel-front:focus .link-display-letter, .link-panel-front:focus .link-display-icon { - color: rgb(var(--theme-style-text)); + color: rgb(var(--link-item-visual-element-color-focus-hover)); } /* link name */ @@ -778,7 +778,7 @@ } .link-panel-front:focus .link-display-name { - color: rgb(var(--link-item-mame-color-focus-hover)); + color: rgb(var(--link-item-name-color-focus-hover)); } /* link panel back */ diff --git a/src/css/modal.css b/src/css/modal.css index 9dbe3bf3..97c60ac8 100755 --- a/src/css/modal.css +++ b/src/css/modal.css @@ -34,7 +34,7 @@ grid-template-rows: 1fr auto; justify-items: stretch; align-items: stretch; - transition: opacity var(--layout-transition-extra-fast); + transition: background-color var(--layout-transition-extra-fast), opacity var(--layout-transition-extra-fast); } .modal-wrapper .container { @@ -63,6 +63,7 @@ position: relative; z-index: 2; display: flex; + transition: background-color var(--layout-transition-extra-fast); } .modal-button { diff --git a/src/css/variables.css b/src/css/variables.css index cce86037..ec34def6 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -112,8 +112,10 @@ --link-item-color: var(--theme-color-02); --link-item-color-opacity: 1; --link-item-color-focus-hover: var(--theme-color-03); - --link-item-mame-color: var(--theme-color-18); - --link-item-mame-color-focus-hover: var(--theme-style-text); + --link-item-visual-element-color: var(--theme-accent); + --link-item-visual-element-color-focus-hover: var(--theme-style-text); + --link-item-name-color: var(--theme-color-19); + --link-item-name-color-focus-hover: var(--theme-style-text); --link-item-image-opacity: 1; --link-item-size: 1em; --link-item-display-space: 0.25em; diff --git a/src/js/link.js b/src/js/link.js index e4b85ea0..4e8886b9 100644 --- a/src/js/link.js +++ b/src/js/link.js @@ -1291,92 +1291,91 @@ var link = (function() { options = helper.applyOptions(options, override); }; - var liniItemClass = ["link-item"]; - var liniItemStyle = []; + var linkItemClass = ["link-item"]; + var linkItemStyle = []; if (options.preview) { - liniItemClass.push("link-item-preview"); + linkItemClass.push("link-item-preview"); }; if (stagedLink.link.display.visual.show) { - liniItemClass.push("link-item-visual"); + linkItemClass.push("link-item-visual"); }; if (stagedLink.link.display.name.show) { - liniItemClass.push("link-item-name"); + linkItemClass.push("link-item-name"); }; if (stagedLink.link.display.visual.show || stagedLink.link.display.name.show) { - liniItemClass.push("link-item-alignment-" + stagedLink.link.display.alignment); - liniItemClass.push("link-item-order-" + stagedLink.link.display.order); - liniItemClass.push("link-item-direction-" + stagedLink.link.display.direction); + linkItemClass.push("link-item-alignment-" + stagedLink.link.display.alignment); + linkItemClass.push("link-item-order-" + stagedLink.link.display.order); + linkItemClass.push("link-item-direction-" + stagedLink.link.display.direction); }; if (stagedLink.link.wide) { - liniItemClass.push("link-item-wide"); + linkItemClass.push("link-item-wide"); }; if (stagedLink.link.tall) { - liniItemClass.push("link-item-tall"); + linkItemClass.push("link-item-tall"); }; if (stagedLink.link.color.opacity < 1) { - liniItemStyle.push("--link-item-clip-padding: 0em;"); + linkItemStyle.push("--link-item-clip-padding: 0em;"); }; if (stagedLink.link.display.visual.shadow.size > 0) { - liniItemClass.push("link-item-display-visual-shadow"); - liniItemStyle.push("--link-item-display-visual-shadow-size: " + stagedLink.link.display.visual.shadow.size + ";"); - liniItemStyle.push("--link-item-display-visual-shadow-offset: 0.02em;"); - liniItemStyle.push("--link-item-display-visual-shadow-blur: 0.02em;"); - liniItemStyle.push("--link-item-display-visual-shadow-opacity: 0.01;"); - liniItemStyle.push("--link-item-display-visual-shadow: 0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 1)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 2)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 1))), 0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 2)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 2))), 0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 4)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 6)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 3)));"); + linkItemClass.push("link-item-display-visual-shadow"); + linkItemStyle.push("--link-item-display-visual-shadow-size: " + stagedLink.link.display.visual.shadow.size + ";"); + linkItemStyle.push("--link-item-display-visual-shadow-offset: 0.02em;"); + linkItemStyle.push("--link-item-display-visual-shadow-blur: 0.02em;"); + linkItemStyle.push("--link-item-display-visual-shadow-opacity: 0.01;"); + linkItemStyle.push("--link-item-display-visual-shadow: 0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 1)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 2)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 1))), 0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 2)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 2))), 0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 4)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 6)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 3)));"); }; - liniItemStyle.push("--link-item-color-opacity: " + stagedLink.link.color.opacity + ";"); - liniItemStyle.push("--link-item-image-opacity: " + stagedLink.link.image.opacity + ";"); - liniItemStyle.push("--link-item-display-rotate: " + stagedLink.link.display.rotate + "deg;"); - liniItemStyle.push("--link-item-display-gutter: " + stagedLink.link.display.gutter + ";"); - liniItemStyle.push("--link-item-display-translate-x: " + stagedLink.link.display.translate.x + "em;"); - liniItemStyle.push("--link-item-display-translate-y: " + stagedLink.link.display.translate.y + "em;"); + linkItemStyle.push("--link-item-color-opacity: " + stagedLink.link.color.opacity + ";"); + linkItemStyle.push("--link-item-image-opacity: " + stagedLink.link.image.opacity + ";"); + linkItemStyle.push("--link-item-display-rotate: " + stagedLink.link.display.rotate + "deg;"); + linkItemStyle.push("--link-item-display-gutter: " + stagedLink.link.display.gutter + ";"); + linkItemStyle.push("--link-item-display-translate-x: " + stagedLink.link.display.translate.x + "em;"); + linkItemStyle.push("--link-item-display-translate-y: " + stagedLink.link.display.translate.y + "em;"); if (stagedLink.link.display.visual.type == "letter") { - liniItemStyle.push("--link-item-display-visual-letter-size: " + stagedLink.link.display.visual.letter.size + "em;"); + linkItemStyle.push("--link-item-display-visual-letter-size: " + stagedLink.link.display.visual.letter.size + "em;"); } else if (stagedLink.link.display.visual.type == "icon") { - liniItemStyle.push("--link-item-display-visual-icon-size: " + stagedLink.link.display.visual.icon.size + "em;"); + linkItemStyle.push("--link-item-display-visual-icon-size: " + stagedLink.link.display.visual.icon.size + "em;"); } else if (stagedLink.link.display.visual.type == "image") { - liniItemStyle.push("--link-item-display-visual-image-size: " + stagedLink.link.display.visual.image.size + "em;"); + linkItemStyle.push("--link-item-display-visual-image-size: " + stagedLink.link.display.visual.image.size + "em;"); }; if (stagedLink.link.display.name.show) { - liniItemStyle.push("--link-item-display-name-size: " + stagedLink.link.display.name.size + "em;"); + linkItemStyle.push("--link-item-display-name-size: " + stagedLink.link.display.name.size + "em;"); }; if (stagedLink.link.accent.by == "custom" || stagedLink.link.color.by == "custom" || helper.checkIfValidString(stagedLink.link.image.url)) { if (stagedLink.link.accent.by == "custom") { - liniItemStyle.push("--theme-accent-r: " + stagedLink.link.accent.rgb.r + ";"); - liniItemStyle.push("--theme-accent-g: " + stagedLink.link.accent.rgb.g + ";"); - liniItemStyle.push("--theme-accent-b: " + stagedLink.link.accent.rgb.b + ";"); - liniItemStyle.push("--theme-accent: var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);"); - liniItemStyle.push("--theme-accent-accessible-threshold: 0.5;"); - liniItemStyle.push("--theme-accent-accessible-r: calc(var(--theme-accent-r) * 0.50);"); - liniItemStyle.push("--theme-accent-accessible-g: calc(var(--theme-accent-g) * 0.60);"); - liniItemStyle.push("--theme-accent-accessible-b: calc(var(--theme-accent-b) * 0.20);"); - liniItemStyle.push("--theme-accent-accessible-sum: calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));"); - liniItemStyle.push("--theme-accent-accessible-perceived-lightness: calc(var(--theme-accent-accessible-sum) / 255);"); - liniItemStyle.push("--theme-accent-accessible-color: 0, 0%, calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);"); + linkItemStyle.push("--theme-accent-r: " + stagedLink.link.accent.rgb.r + ";"); + linkItemStyle.push("--theme-accent-g: " + stagedLink.link.accent.rgb.g + ";"); + linkItemStyle.push("--theme-accent-b: " + stagedLink.link.accent.rgb.b + ";"); + linkItemStyle.push("--theme-accent: var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);"); + linkItemStyle.push("--theme-accent-accessible-threshold: 0.5;"); + linkItemStyle.push("--theme-accent-accessible-r: calc(var(--theme-accent-r) * 0.50);"); + linkItemStyle.push("--theme-accent-accessible-g: calc(var(--theme-accent-g) * 0.60);"); + linkItemStyle.push("--theme-accent-accessible-b: calc(var(--theme-accent-b) * 0.20);"); + linkItemStyle.push("--theme-accent-accessible-sum: calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));"); + linkItemStyle.push("--theme-accent-accessible-perceived-lightness: calc(var(--theme-accent-accessible-sum) / 255);"); + linkItemStyle.push("--theme-accent-accessible-color: 0, 0%, calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);"); + linkItemStyle.push("--link-item-visual-element-color: var(--theme-accent);"); }; 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 rgb; if (hsl.l < 50) { - hsl.l = hsl.l + 40; + rgb = shades.positive["9"]; + linkItemStyle.push("--theme-style-text: var(--theme-white);"); } else { - hsl.l = hsl.l - 40; + rgb = shades.negative["9"]; + linkItemStyle.push("--theme-style-text: var(--theme-black);"); }; - var rgb = helper.convertColor.hsl.rgb(hsl); - rgb = { - r: Math.round(rgb.r), - g: Math.round(rgb.g), - b: Math.round(rgb.b) - }; - liniItemStyle.push("--link-item-color: " + stagedLink.link.color.rgb.r + ", " + stagedLink.link.color.rgb.g + ", " + stagedLink.link.color.rgb.b + ";"); - liniItemStyle.push("--link-item-color-focus-hover: " + stagedLink.link.color.rgb.r + ", " + stagedLink.link.color.rgb.g + ", " + stagedLink.link.color.rgb.b + ";"); - liniItemStyle.push("--link-item-name-color: " + rgb.r + ", " + rgb.g + ", " + rgb.b + ";"); - liniItemStyle.push("--link-item-name-color-focus-hover: " + rgb.r + ", " + rgb.g + ", " + rgb.b + ";"); + 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 + ";"); + linkItemStyle.push("--link-item-name-color: " + rgb.r + ", " + rgb.g + ", " + rgb.b + ";"); }; if (helper.checkIfValidString(stagedLink.link.image.url)) { - liniItemStyle.push("--link-item-image-url: url(" + helper.trimString(stagedLink.link.image.url) + ");"); + linkItemStyle.push("--link-item-image-url: url(" + helper.trimString(stagedLink.link.image.url) + ");"); }; }; @@ -1384,10 +1383,10 @@ var link = (function() { tag: "div", attr: [{ key: "class", - value: liniItemClass.join(" ") + value: linkItemClass.join(" ") }, { key: "style", - value: liniItemStyle.join(" ") + value: linkItemStyle.join(" ") }] }; diff --git a/src/js/version.js b/src/js/version.js index 8eef9107..5663d9bc 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "5.62.0"; + var current = "5.63.0"; var name = "Jaded Raven"; diff --git a/src/manifest.json b/src/manifest.json index 2bec4059..536e8026 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": "5.62.0", + "version": "5.63.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"