[design] improve link item name colour

zombieFox · zombieFox · commit 2dbf22c1dc1f · 2020-07-23T10:56:16.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1291,103 +1291,102 @@ 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) + ");");
 };
 };
 
 var linkItemOptions ={
 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
@@ -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
@@ -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"

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "nightTab",`
`3`		`-"version": "5.62.0",`
	`3`	`+"version": "5.63.0",`
`4`	`4`	`"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"scripts":{`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ fieldset:not(:only-child):not(:last-child),`
`5`	`5`	`position: relative;`
`6`	`6`	`width:100%;`
`7`	`7`	`display: block;`
	`8`	`+transition: border-color var(--layout-transition-extra-fast);`
`8`	`9`	`}`
`9`	`10`
`10`	`11`	`fieldset:not(:first-child),`
Original file line number	Diff line number	Diff line change
`@@ -681,14 +681,14 @@`
`681`	`681`	`font-family:var(--theme-font-display-name);`
`682`	`682`	`font-weight:var(--theme-font-display-weight);`
`683`	`683`	`font-style:var(--theme-font-display-style);`
`684`		`-color:rgb(var(--theme-accent));`
	`684`	`+color:rgb(var(--link-item-visual-element-color));`
`685`	`685`	`line-height:1;`
`686`	`686`	`white-space: nowrap;`
`687`	`687`	`transition: color var(--layout-transition-extra-fast);`
`688`	`688`	`}`
`689`	`689`
`690`	`690`	`.link-display-icon{`
`691`		`-color:rgb(var(--theme-accent));`
	`691`	`+color:rgb(var(--link-item-visual-element-color));`
`692`	`692`	`transition: color var(--layout-transition-extra-fast);`
`693`	`693`	`}`
`694`	`694`
`@@ -725,12 +725,12 @@`
`725`	`725`	`.link-item:focus .link-display-letter,`
`726`	`726`	`.link-item:hover .link-display-icon,`
`727`	`727`	`.link-item:focus .link-display-icon{`
`728`		`-color:rgb(var(--theme-style-text));`
	`728`	`+color:rgb(var(--link-item-visual-element-color-focus-hover));`
`729`	`729`	`}`
`730`	`730`
`731`	`731`	`.link-panel-front:focus .link-display-letter,`
`732`	`732`	`.link-panel-front:focus .link-display-icon{`
`733`		`-color:rgb(var(--theme-style-text));`
	`733`	`+color:rgb(var(--link-item-visual-element-color-focus-hover));`
`734`	`734`	`}`
`735`	`735`
`736`	`736`	`/* link name */`
`@@ -778,7 +778,7 @@`
`778`	`778`	`}`
`779`	`779`
`780`	`780`	`.link-panel-front:focus .link-display-name{`
`781`		`-color:rgb(var(--link-item-mame-color-focus-hover));`
	`781`	`+color:rgb(var(--link-item-name-color-focus-hover));`
`782`	`782`	`}`
`783`	`783`
`784`	`784`	`/* link panel back */`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@`
`34`	`34`	`grid-template-rows:1fr auto;`
`35`	`35`	`justify-items: stretch;`
`36`	`36`	`align-items: stretch;`
`37`		`-transition: opacity var(--layout-transition-extra-fast);`
	`37`	`+transition:background-color var(--layout-transition-extra-fast),opacity var(--layout-transition-extra-fast);`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`.modal-wrapper .container{`
`@@ -63,6 +63,7 @@`
`63`	`63`	`position: relative;`
`64`	`64`	`z-index:2;`
`65`	`65`	`display: flex;`
	`66`	`+transition: background-color var(--layout-transition-extra-fast);`
`66`	`67`	`}`
`67`	`68`
`68`	`69`	`.modal-button{`
-Original file line number
+Diff line change
 --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;
-Original file line number
+Diff line change
@@ @@ -1,6 +1,6 @@ @@
 varversion=(function(){
 -varcurrent="5.62.0";
 +varcurrent="5.63.0";
 varname="Jaded Raven";