extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-12-27 00:59:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add theme colour contrast controls

Browse Source
This commit is contained in:
zombieFox 2020-01-06 16:55:55 -07:00
parent dede8e43b3
commit 0137d1567d
9 changed files with 234 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "nighttab", "name": "nighttab",
"version": "4.8.3", "version": "4.9.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "nighttab", "name": "nighttab",
"version": "4.8.3", "version": "4.9.0",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

21
src/index.html
View File

@ -1484,6 +1484,27 @@
</div> </div>
</div> </div>
<hr> <hr>
<div class="input-wrap">
<label for="control-theme-color-contrast-light">Light shade contrast</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-color-contrast-light" class="control-theme-color-contrast-light mr-3" type="range" min="100" max="800" value="400" step="10" tabindex="-1">
<div class="control-theme-color-contrast-light-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-theme-color-contrast-light-default button mb-0" tabindex="-1">Default light shade contrast</button>
</div>
<div class="input-wrap">
<label for="control-theme-color-contrast-dark">Dark shade contrast</label>
<div class="form-group form-group-block mb-0">
<input id="control-theme-color-contrast-dark" class="control-theme-color-contrast-dark mr-3" type="range" min="100" max="800" value="400" step="10" tabindex="-1">
<div class="control-theme-color-contrast-dark-count form-group-text form-group-item-medium form-group-radius-left"></div>
</div>
</div>
<div class="button-wrap">
<button class="control-theme-color-contrast-dark-default button mb-0" tabindex="-1">Default dark shade contrast</button>
</div>
<hr>
<div class="form-group form-group-block form-group-border form-group-border-theme-color"> <div class="form-group form-group-block form-group-border form-group-border-theme-color">
<div class="form-group-text form-group-text-borderless"> <div class="form-group-text form-group-text-borderless">
<div class="theme-color-box theme-color-neg-10"></div> <div class="theme-color-box theme-color-neg-10"></div>

44
src/js/control.js
View File

@ -2799,6 +2799,50 @@ var control = (function() {
render.range.count(this); render.range.count(this);
render.update(); render.update();
} }
}, {
element: helper.e(".control-theme-color-contrast-light"),
path: "theme.color.contrast.light",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-theme-color-contrast-light-count"),
func: function() {
theme.render.color.shade();
render.range.count(this);
render.update();
}
}, {
element: helper.e(".control-theme-color-contrast-light-default"),
type: "button",
func: function() {
mod.setValue("theme.color.contrast.light", helper.getObject({
object: state.get.default(),
path: "theme.color.contrast.light"
}));
theme.render.color.shade();
render.update();
}
}, {
element: helper.e(".control-theme-color-contrast-dark"),
path: "theme.color.contrast.dark",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-theme-color-contrast-dark-count"),
func: function() {
theme.render.color.shade();
render.range.count(this);
render.update();
}
}, {
element: helper.e(".control-theme-color-contrast-dark-default"),
type: "button",
func: function() {
mod.setValue("theme.color.contrast.dark", helper.getObject({
object: state.get.default(),
path: "theme.color.contrast.dark"
}));
theme.render.color.shade();
render.update();
}
}, { }, {
element: helper.e(".control-theme-accent-current-picker"), element: helper.e(".control-theme-accent-current-picker"),
path: "theme.accent.current", path: "theme.accent.current",

8
src/js/state.js
View File

@ -241,6 +241,10 @@ var state = (function() {
r: 129, r: 129,
g: 138, g: 138,
b: 160 b: 160
},
contrast: {
light: 4,
dark: 4
} }
}, },
font: { font: {
@ -374,6 +378,10 @@ var state = (function() {
r: 129, r: 129,
g: 138, g: 138,
b: 160 b: 160
},
contrast: {
light: 4,
dark: 4
} }
}, },
font: { font: {

201
src/js/theme.js
View File

@ -189,6 +189,10 @@ var theme = (function() {
r: 129, r: 129,
g: 138, g: 138,
b: 160 b: 160
},
contrast: {
light: 4,
dark: 4
} }
}, },
accent: { accent: {
@ -222,6 +226,10 @@ var theme = (function() {
r: 73, r: 73,
g: 104, g: 104,
b: 171 b: 171
},
contrast: {
light: 4,
dark: 3.5
} }
}, },
accent: { accent: {
@ -255,6 +263,10 @@ var theme = (function() {
r: 153, r: 153,
g: 34, g: 34,
b: 221 b: 221
},
contrast: {
light: 4,
dark: 4
} }
}, },
accent: { accent: {
@ -288,6 +300,10 @@ var theme = (function() {
r: 106, r: 106,
g: 142, g: 142,
b: 199 b: 199
},
contrast: {
light: 4,
dark: 4
} }
}, },
accent: { accent: {
@ -321,6 +337,10 @@ var theme = (function() {
r: 63, r: 63,
g: 191, g: 191,
b: 143 b: 143
},
contrast: {
light: 4,
dark: 4
} }
}, },
accent: { accent: {
@ -354,6 +374,10 @@ var theme = (function() {
r: 98, r: 98,
g: 136, g: 136,
b: 197 b: 197
},
contrast: {
light: 4.4,
dark: 1.5
} }
}, },
accent: { accent: {
@ -387,6 +411,10 @@ var theme = (function() {
r: 159, r: 159,
g: 118, g: 118,
b: 87 b: 87
},
contrast: {
light: 5,
dark: 3.5
} }
}, },
accent: { accent: {
@ -412,20 +440,24 @@ var theme = (function() {
}, },
color: { color: {
hsl: { hsl: {
h: 54, h: 56,
s: 78, s: 100,
l: 47 l: 30
}, },
rgb: { rgb: {
r: 213, r: 153,
g: 194, g: 142,
b: 26 b: 0
},
contrast: {
light: 2,
dark: 1
} }
}, },
accent: { accent: {
r: 255, r: 255,
g: 220, g: 185,
b: 22 b: 0
}, },
radius: 0.5, radius: 0.5,
style: "light" style: "light"
@ -453,6 +485,10 @@ var theme = (function() {
r: 119, r: 119,
g: 188, g: 188,
b: 194 b: 194
},
contrast: {
light: 1,
dark: 4
} }
}, },
accent: { accent: {
@ -486,6 +522,10 @@ var theme = (function() {
r: 105, r: 105,
g: 94, g: 94,
b: 109 b: 109
},
contrast: {
light: 7,
dark: 2
} }
}, },
accent: { accent: {
@ -519,6 +559,10 @@ var theme = (function() {
r: 175, r: 175,
g: 112, g: 112,
b: 173 b: 173
},
contrast: {
light: 3,
dark: 2
} }
}, },
accent: { accent: {
@ -552,6 +596,10 @@ var theme = (function() {
r: 224, r: 224,
g: 91, g: 91,
b: 91 b: 91
},
contrast: {
light: 3.5,
dark: 4.5
} }
}, },
accent: { accent: {
@ -578,13 +626,17 @@ var theme = (function() {
color: { color: {
hsl: { hsl: {
h: 214, h: 214,
s: 25, s: 30,
l: 44 l: 44
}, },
rgb: { rgb: {
r: 85, r: 78,
g: 110, g: 107,
b: 143 b: 145
},
contrast: {
light: 3.5,
dark: 3
} }
}, },
accent: { accent: {
@ -618,6 +670,10 @@ var theme = (function() {
r: 80, r: 80,
g: 106, g: 106,
b: 199 b: 199
},
contrast: {
light: 4,
dark: 4
} }
}, },
accent: { accent: {
@ -651,6 +707,10 @@ var theme = (function() {
r: 117, r: 117,
g: 117, g: 117,
b: 117 b: 117
},
contrast: {
light: 5,
dark: 3.5
} }
}, },
accent: { accent: {
@ -684,6 +744,10 @@ var theme = (function() {
r: 254, r: 254,
g: 45, g: 45,
b: 230 b: 230
},
contrast: {
light: 4,
dark: 4
} }
}, },
accent: { accent: {
@ -709,14 +773,18 @@ var theme = (function() {
}, },
color: { color: {
hsl: { hsl: {
h: 193, h: 191,
s: 50, s: 86,
l: 46 l: 46
}, },
rgb: { rgb: {
r: 58, r: 16,
g: 150, g: 181,
b: 175 b: 218
},
contrast: {
light: 5,
dark: 4
} }
}, },
accent: { accent: {
@ -750,6 +818,10 @@ var theme = (function() {
r: 127, r: 127,
g: 127, g: 127,
b: 127 b: 127
},
contrast: {
light: 5.3,
dark: 4
} }
}, },
accent: { accent: {
@ -777,12 +849,16 @@ var theme = (function() {
hsl: { hsl: {
h: 194, h: 194,
s: 77, s: 77,
l: 51 l: 50
}, },
rgb: { rgb: {
r: 33, r: 29,
g: 181, g: 179,
b: 226 b: 225
},
contrast: {
light: 4.5,
dark: 2.6
} }
}, },
accent: { accent: {
@ -809,13 +885,17 @@ var theme = (function() {
color: { color: {
hsl: { hsl: {
h: 211, h: 211,
s: 7, s: 10,
l: 53 l: 50
}, },
rgb: { rgb: {
r: 126, r: 114,
g: 134, g: 127,
b: 143 b: 140
},
contrast: {
light: 5,
dark: 2
} }
}, },
accent: { accent: {
@ -849,6 +929,10 @@ var theme = (function() {
r: 100, r: 100,
g: 95, g: 95,
b: 87 b: 87
},
contrast: {
light: 5.2,
dark: 3.2
} }
}, },
accent: { accent: {
@ -876,12 +960,16 @@ var theme = (function() {
hsl: { hsl: {
h: 228, h: 228,
s: 71, s: 71,
l: 47 l: 50
}, },
rgb: { rgb: {
r: 34, r: 36,
g: 68, g: 73,
b: 204 b: 218
},
contrast: {
light: 4.2,
dark: 3.9
} }
}, },
accent: { accent: {
@ -915,6 +1003,10 @@ var theme = (function() {
r: 98, r: 98,
g: 113, g: 113,
b: 120 b: 120
},
contrast: {
light: 4,
dark: 4
} }
}, },
accent: { accent: {
@ -940,19 +1032,23 @@ var theme = (function() {
}, },
color: { color: {
hsl: { hsl: {
h: 31, h: 0,
s: 22, s: 13,
l: 48 l: 37
}, },
rgb: { rgb: {
r: 149, r: 106,
g: 123, g: 82,
b: 95 b: 82
},
contrast: {
light: 6.3,
dark: 2
} }
}, },
accent: { accent: {
r: 241, r: 255,
g: 255, g: 204,
b: 0 b: 0
}, },
radius: 0.80, radius: 0.80,
@ -1040,11 +1136,12 @@ var theme = (function() {
render.color = { render.color = {
shade: function() { shade: function() {
var shadeSteps = 10; var shadeMax = 10;
var lightShift = 4; var shadeMin = 1;
var contrastNeg = state.get.current().theme.color.contrast.dark;
var contrastPos = state.get.current().theme.color.contrast.light;
var html = helper.e("html"); var html = helper.e("html");
var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb); var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb);
html.style.setProperty("--theme-shade", state.get.current().theme.color.rgb.r + ", " + state.get.current().theme.color.rgb.g + ", " + state.get.current().theme.color.rgb.b);
var renderShade = function(name, index, rgb) { var renderShade = function(name, index, rgb) {
for (var key in rgb) { for (var key in rgb) {
if (rgb[key] < 0) { if (rgb[key] < 0) {
@ -1059,19 +1156,23 @@ var theme = (function() {
}; };
html.style.setProperty(name + index, rgb.r + ", " + rgb.g + ", " + rgb.b); html.style.setProperty(name + index, rgb.r + ", " + rgb.g + ", " + rgb.b);
}; };
for (var i = 1; i <= shadeSteps; i++) { // set light theme shades
for (var i = shadeMax; i >= shadeMin; i--) {
var rgb = helper.convertColor.hsl.rgb({ var rgb = helper.convertColor.hsl.rgb({
h: hsl.h, h: hsl.h,
s: hsl.s, s: hsl.s,
l: hsl.l - (lightShift * i) l: hsl.l - (contrastNeg * i)
}); });
renderShade("--theme-shade-neg-", i, rgb); renderShade("--theme-shade-neg-", i, rgb);
}; };
for (var i = 1; i <= shadeSteps; i++) { // set primary theme shades
html.style.setProperty("--theme-shade", state.get.current().theme.color.rgb.r + ", " + state.get.current().theme.color.rgb.g + ", " + state.get.current().theme.color.rgb.b);
// set dark theme shades
for (var i = shadeMin; i <= shadeMax; i++) {
var rgb = helper.convertColor.hsl.rgb({ var rgb = helper.convertColor.hsl.rgb({
h: hsl.h, h: hsl.h,
s: hsl.s, s: hsl.s,
l: hsl.l + (lightShift * i) l: hsl.l + (contrastPos * i)
}); });
renderShade("--theme-shade-pos-", i, rgb); renderShade("--theme-shade-pos-", i, rgb);
}; };
@ -1220,7 +1321,6 @@ var theme = (function() {
var themePresetButton = helper.node("button|class:theme-preset-button button mb-0,tabindex:-1"); var themePresetButton = helper.node("button|class:theme-preset-button button mb-0,tabindex:-1");
var themePresetPreview = helper.node("span|class:theme-preset-preview"); var themePresetPreview = helper.node("span|class:theme-preset-preview");
var shadeSteps = 4; var shadeSteps = 4;
var lightShift = 12;
var rgb = arrayItem.color.rgb; var rgb = arrayItem.color.rgb;
var hsl = helper.convertColor.rgb.hsl(rgb); var hsl = helper.convertColor.rgb.hsl(rgb);
for (var i = 1; i <= shadeSteps; i++) { for (var i = 1; i <= shadeSteps; i++) {
@ -1229,13 +1329,13 @@ var theme = (function() {
rgb = helper.convertColor.hsl.rgb({ rgb = helper.convertColor.hsl.rgb({
h: hsl.h, h: hsl.h,
s: hsl.s, s: hsl.s,
l: hsl.l - (lightShift * (i - 1)) l: hsl.l - ((arrayItem.color.contrast.dark) * (i * 2))
}); });
} else if (arrayItem.style == "light") { } else if (arrayItem.style == "light") {
rgb = helper.convertColor.hsl.rgb({ rgb = helper.convertColor.hsl.rgb({
h: hsl.h, h: hsl.h,
s: hsl.s, s: hsl.s,
l: hsl.l + (lightShift * (i - 1)) l: hsl.l + ((arrayItem.color.contrast.light) * (i * 2))
}); });
}; };
}; };
@ -1300,7 +1400,6 @@ var theme = (function() {
var themeCustomRemove = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button mb-0,tabindex:-2"); var themeCustomRemove = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button mb-0,tabindex:-2");
var themeCustomRemoveIcon = helper.node("spa|class:button-icon icon-close"); var themeCustomRemoveIcon = helper.node("spa|class:button-icon icon-close");
var shadeSteps = 4; var shadeSteps = 4;
var lightShift = 12;
var rgb = arrayItem.color.rgb; var rgb = arrayItem.color.rgb;
var hsl = helper.convertColor.rgb.hsl(rgb); var hsl = helper.convertColor.rgb.hsl(rgb);
for (var i = 1; i <= shadeSteps; i++) { for (var i = 1; i <= shadeSteps; i++) {
@ -1309,13 +1408,13 @@ var theme = (function() {
rgb = helper.convertColor.hsl.rgb({ rgb = helper.convertColor.hsl.rgb({
h: hsl.h, h: hsl.h,
s: hsl.s, s: hsl.s,
l: hsl.l - (lightShift * (i - 1)) l: hsl.l - ((arrayItem.color.contrast.dark) * (i * 2))
}); });
} else if (arrayItem.style == "light") { } else if (arrayItem.style == "light") {
rgb = helper.convertColor.hsl.rgb({ rgb = helper.convertColor.hsl.rgb({
h: hsl.h, h: hsl.h,
s: hsl.s, s: hsl.s,
l: hsl.l + (lightShift * (i - 1)) l: hsl.l + ((arrayItem.color.contrast.light) * (i * 2))
}); });
}; };
}; };

7
src/js/update.js
View File

@ -746,6 +746,13 @@ var update = (function() {
"4.8.0": function(data) { "4.8.0": function(data) {
data.state.theme.custom = []; data.state.theme.custom = [];
return data; return data;
},
"4.9.0": function(data) {
data.state.theme.color.contrast = {
light: 4,
dark: 4
};
return data;
} }
}; };

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "4.8.3"; var current = "4.9.0";
var name = "Naughty Goose"; var name = "Naughty Goose";

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_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.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "4.8.3", "version": "4.9.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"