Skip to content

Commit

Permalink
[design] add theme accent preset names
Browse files Browse the repository at this point in the history
  • Loading branch information
@zombieFox
zombieFox committed Apr 22, 2020
1 parent 494f1fc commit 48bdb6e
Show file tree
Hide file tree
Showing 5 changed files with 220 additions and 113 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "nightTab",
"version": "5.19.0",
"version": "5.20.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": {
Expand Down
325 changes: 216 additions & 109 deletions src/js/theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,149 +269,254 @@ var theme = (function() {
preset: {
all: [
[{
h: 0,
s: 0,
l: 90
name: "Extra light grey",
hsl: {
h: 0,
s: 0,
l: 90
}
}, {
h: 0,
s: 80,
l: 90
name: "Extra light red",
hsl: {
h: 0,
s: 80,
l: 90
}
}, {
h: 60,
s: 80,
l: 90
name: "Extra light yellow",
hsl: {
h: 60,
s: 80,
l: 90
}
}, {
h: 120,
s: 80,
l: 90
name: "Extra light green",
hsl: {
h: 120,
s: 80,
l: 90
}
}, {
h: 180,
s: 80,
l: 90
name: "Extra light cyan",
hsl: {
h: 180,
s: 80,
l: 90
}
}, {
h: 240,
s: 80,
l: 90
name: "Extra light blue",
hsl: {
h: 240,
s: 80,
l: 90
}
}, {
h: 300,
s: 80,
l: 90
name: "Extra light magenta",
hsl: {
h: 300,
s: 80,
l: 90
}
}],
[{
h: 0,
s: 0,
l: 70
name: "Light grey",
hsl: {
h: 0,
s: 0,
l: 70
}
}, {
h: 0,
s: 80,
l: 70
name: "Light red",
hsl: {
h: 0,
s: 80,
l: 70
}
}, {
h: 60,
s: 80,
l: 70
name: "Light yellow",
hsl: {
h: 60,
s: 80,
l: 70
}
}, {
h: 120,
s: 80,
l: 70
name: "Light green",
hsl: {
h: 120,
s: 80,
l: 70
}
}, {
h: 180,
s: 80,
l: 70
name: "Light cyan",
hsl: {
h: 180,
s: 80,
l: 70
}
}, {
h: 240,
s: 80,
l: 70
name: "Light blue",
hsl: {
h: 240,
s: 80,
l: 70
}
}, {
h: 300,
s: 80,
l: 70
name: "Light magenta",
hsl: {
h: 300,
s: 80,
l: 70
}
}],
[{
h: 0,
s: 0,
l: 50
name: "Grey",
hsl: {
h: 0,
s: 0,
l: 50
}
}, {
h: 0,
s: 80,
l: 50
name: "Red",
hsl: {
h: 0,
s: 80,
l: 50
}
}, {
h: 60,
s: 80,
l: 50
name: "Yellow",
hsl: {
h: 60,
s: 80,
l: 50
}
}, {
h: 120,
s: 80,
l: 50
name: "Green",
hsl: {
h: 120,
s: 80,
l: 50
}
}, {
h: 180,
s: 80,
l: 50
name: "Cyan",
hsl: {
h: 180,
s: 80,
l: 50
}
}, {
h: 240,
s: 80,
l: 50
name: "Blue",
hsl: {
h: 240,
s: 80,
l: 50
}
}, {
h: 300,
s: 80,
l: 50
name: "Magenta",
hsl: {
h: 300,
s: 80,
l: 50
}
}],
[{
h: 0,
s: 0,
l: 30
name: "Dark grey",
hsl: {
h: 0,
s: 0,
l: 30
}
}, {
h: 0,
s: 60,
l: 30
name: "Dark red",
hsl: {
h: 0,
s: 60,
l: 30
}
}, {
h: 60,
s: 60,
l: 30
name: "Dark yellow",
hsl: {
h: 60,
s: 60,
l: 30
}
}, {
h: 120,
s: 60,
l: 30
name: "Dark green",
hsl: {
h: 120,
s: 60,
l: 30
}
}, {
h: 180,
s: 60,
l: 30
name: "Dark cyan",
hsl: {
h: 180,
s: 60,
l: 30
}
}, {
h: 240,
s: 60,
l: 30
name: "Dark blue",
hsl: {
h: 240,
s: 60,
l: 30
}
}, {
h: 300,
s: 60,
l: 30
name: "Dark magenta",
hsl: {
h: 300,
s: 60,
l: 30
}
}],
[{
h: 0,
s: 0,
l: 10
name: "Extra dark grey",
hsl: {
h: 0,
s: 0,
l: 10
}
}, {
h: 0,
s: 20,
l: 10
name: "Extra dark red",
hsl: {
h: 0,
s: 20,
l: 10
}
}, {
h: 60,
s: 20,
l: 10
name: "Extra dark yellow",
hsl: {
h: 60,
s: 20,
l: 10
}
}, {
h: 120,
s: 20,
l: 10
name: "Extra dark green",
hsl: {
h: 120,
s: 20,
l: 10
}
}, {
h: 180,
s: 20,
l: 10
name: "Extra dark cyan",
hsl: {
h: 180,
s: 20,
l: 10
}
}, {
h: 240,
s: 20,
l: 10
name: "Extra dark blue",
hsl: {
h: 240,
s: 20,
l: 10
}
}, {
h: 300,
s: 20,
l: 10
name: "Extra dark magenta",
hsl: {
h: 300,
s: 20,
l: 10
}
}]
],
set: function(hsl) {
Expand Down Expand Up @@ -1909,11 +2014,13 @@ var theme = (function() {
mod.accent.preset.all.forEach(function(arrayItem, index) {
arrayItem.forEach(function(arrayItem, index) {
var themeAccentPresetItem = helper.node("button|class:theme-accent-preset-item button button-block button-ring,tabindex:-1");
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-h", arrayItem.h);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-s", arrayItem.s);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-l", arrayItem.l);
var themeAccentPresetItemName = helper.node("span:" + arrayItem.name + "|class:sr-only");
themeAccentPresetItem.appendChild(themeAccentPresetItemName);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-h", arrayItem.hsl.h);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-s", arrayItem.hsl.s);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-l", arrayItem.hsl.l);
themeAccentPresetItem.addEventListener("click", function() {
mod.accent.preset.set(arrayItem);
mod.accent.preset.set(arrayItem.hsl);
data.save();
render.accent.color();
control.render.update.control.header();
Expand Down
Loading

0 comments on commit 48bdb6e

Please sign in to comment.