[feature] add theme accent preset colours

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.15.0",
+  "version": "5.16.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.15.0",
+  "version": "5.16.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": {

src/css/button.css

@@ -191,6 +191,19 @@ button [class*=" button-"]:last-child,
   margin-right: 0;
 }
 
+.button-ring {
+  transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+}
+
+.button-ring:hover {
+  box-shadow: var(--form-ring-hover);
+}
+
+.button-ring:focus,
+.button-ring:active {
+  box-shadow: var(--form-ring-accent);
+}
+
 .button-link {
   background-color: transparent;
   border: 0;

src/css/theme.css

@@ -2,25 +2,22 @@
 .theme-custom-item {
   width: var(--theme-preview-size);
   height: var(--theme-preview-size);
-  border-radius: var(--theme-radius);
   position: relative;
-  overflow: hidden;
 }
 
 .theme-preset-button,
 .theme-custom-button {
   padding: 0;
-  border-radius: 0;
+  border-radius: var(--theme-radius);
-  width: var(--theme-preview-size);
+  width: 100%;
-  height: var(--theme-preview-size);
+  height: 100%;
   line-height: 1.6;
   position: absolute;
   top: 0;
   left: 0;
   display: block;
-  overflow: hidden;
   z-index: 2;
-  transition: height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+  transition: height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
 }
 
 .theme-preset-button:after,
@@ -29,10 +26,12 @@
 }
 
 .theme-custom-control {
-  width: var(--theme-preview-size);
+  border-radius: 0 0 var(--theme-radius) var(--theme-radius);
+  width: 100%;
   height: 0;
   position: absolute;
   bottom: 0;
+  overflow: hidden;
   display: flex;
   justify-content: flex-start;
   align-items: stretch;
@@ -51,21 +50,38 @@
 }
 
 .is-theme-custom-edit .theme-custom-button {
-  height: calc(var(--theme-preview-size) - var(--theme-custom-edit-height));
+  border-radius: var(--theme-radius) var(--theme-radius) 0 0;
+  height: calc(100% - var(--theme-custom-edit-height));
   box-shadow: var(--theme-shadow-bottom-medium);
 }
 
+.is-theme-custom-edit .theme-custom-button:hover {
+  box-shadow: var(--form-ring-hover);
+}
+
+.is-theme-custom-edit .theme-custom-button:focus,
+.is-theme-custom-edit .theme-custom-button:active {
+  box-shadow: var(--form-ring-accent);
+}
+
 .is-theme-custom-edit .theme-custom-control {
   height: var(--theme-custom-edit-height);
 }
 
 .theme-preset-preview,
 .theme-custom-preview {
-  width: var(--theme-preview-size);
+  border-radius: var(--theme-radius);
-  height: var(--theme-preview-size);
+  width: 100%;
+  height: 100%;
   position: absolute;
   top: 0;
   left: 0;
+  overflow: hidden;
+  transition: border-radius var(--layout-timing-extra-fast);
+}
+
+.is-theme-custom-edit .theme-custom-preview {
+  border-radius: var(--theme-radius) var(--theme-radius) 0 0;
 }
 
 .theme-preset-background-01,
@@ -265,27 +281,48 @@
   background-color: rgb(var(--theme-color-20));
 }
 
-.theme-shadow-box {
+.theme-accent-preset-grid {
-  background-color: rgb(var(--theme-color-02));
+  display: grid;
-  border-radius: var(--theme-radius);
+  grid-gap: var(--form-wrap-space);
-  padding: 0.5em;
+  grid-template-columns: repeat(7, 1fr);
-  width: 5em;
+  grid-template-rows: repeat(5, 1fr);
-  height: 5em;
+  justify-items: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  white-space: normal;
 }
 
-.theme-shadow-box-small {
+.theme-accent-preset-item {
-  box-shadow: var(--theme-shadow-bottom-small);
+  background-color: hsl(var(--theme-accent-preset-item-color-h), calc(var(--theme-accent-preset-item-color-s) * 1%), calc(var(--theme-accent-preset-item-color-l) * 1%));
+  padding: 0;
+  width: 1.5em;
+  height: 1.5em;
+  min-width: 1.5em;
+  min-height: 1.5em;
+  min-height: initial;
 }
 
-.theme-shadow-box-medium {
+.theme-accent-preset-item:focus,
-  box-shadow: var(--theme-shadow-bottom-medium);
+.theme-accent-preset-item:hover,
+.theme-accent-preset-item:active {
+  background-color: hsl(var(--theme-accent-preset-item-color-h), calc(var(--theme-accent-preset-item-color-s) * 1%), calc(var(--theme-accent-preset-item-color-l) * 1%));
 }
 
-.theme-shadow-box-large {
+.theme-accent-preset-item:after {
-  box-shadow: var(--theme-shadow-bottom-large);
+  content: none;
+}
+
+@media (min-width: 700px) {
+  .theme-accent-preset-item {
+    width: 2em;
+    height: 2em;
+    min-width: 2em;
+    min-height: 2em;
+  }
+}
+
+@media (min-width: 900px) {
+  .theme-accent-preset-item {
+    width: 2.5em;
+    height: 2.5em;
+    min-width: 2.5em;
+    min-height: 2.5em;
+  }
 }

src/html/menu/content/theme/accent.html

@@ -3,6 +3,8 @@
     <h1 class="menu-item-header-text">Accent</h1>
   </div>
   <div class="menu-item-form">
+    <div class="theme-accent-preset"></div>
+    <hr>
     <div class="form-wrap">
       <label for="control-theme-accent-rgb-color">Colour</label>
       <div class="form-group form-group-block">

src/js/theme.js

@@ -265,6 +265,176 @@ var theme = (function() {
           l: Math.round(hsl.l)
         }
       });
+    },
+    preset: {
+      all: [
+        [{
+          h: 0,
+          s: 0,
+          l: 90
+        }, {
+          h: 0,
+          s: 80,
+          l: 90
+        }, {
+          h: 60,
+          s: 80,
+          l: 90
+        }, {
+          h: 120,
+          s: 80,
+          l: 90
+        }, {
+          h: 180,
+          s: 80,
+          l: 90
+        }, {
+          h: 240,
+          s: 80,
+          l: 90
+        }, {
+          h: 300,
+          s: 80,
+          l: 90
+        }],
+        [{
+          h: 0,
+          s: 0,
+          l: 70
+        }, {
+          h: 0,
+          s: 80,
+          l: 70
+        }, {
+          h: 60,
+          s: 80,
+          l: 70
+        }, {
+          h: 120,
+          s: 80,
+          l: 70
+        }, {
+          h: 180,
+          s: 80,
+          l: 70
+        }, {
+          h: 240,
+          s: 80,
+          l: 70
+        }, {
+          h: 300,
+          s: 80,
+          l: 70
+        }],
+        [{
+          h: 0,
+          s: 0,
+          l: 50
+        }, {
+          h: 0,
+          s: 80,
+          l: 50
+        }, {
+          h: 60,
+          s: 80,
+          l: 50
+        }, {
+          h: 120,
+          s: 80,
+          l: 50
+        }, {
+          h: 180,
+          s: 80,
+          l: 50
+        }, {
+          h: 240,
+          s: 80,
+          l: 50
+        }, {
+          h: 300,
+          s: 80,
+          l: 50
+        }],
+        [{
+          h: 0,
+          s: 0,
+          l: 30
+        }, {
+          h: 0,
+          s: 60,
+          l: 30
+        }, {
+          h: 60,
+          s: 60,
+          l: 30
+        }, {
+          h: 120,
+          s: 60,
+          l: 30
+        }, {
+          h: 180,
+          s: 60,
+          l: 30
+        }, {
+          h: 240,
+          s: 60,
+          l: 30
+        }, {
+          h: 300,
+          s: 60,
+          l: 30
+        }],
+        [{
+          h: 0,
+          s: 0,
+          l: 10
+        }, {
+          h: 0,
+          s: 20,
+          l: 10
+        }, {
+          h: 60,
+          s: 20,
+          l: 10
+        }, {
+          h: 120,
+          s: 20,
+          l: 10
+        }, {
+          h: 180,
+          s: 20,
+          l: 10
+        }, {
+          h: 240,
+          s: 20,
+          l: 10
+        }, {
+          h: 300,
+          s: 20,
+          l: 10
+        }]
+      ],
+      set: function(hsl) {
+        var rgb = helper.convertColor.hsl.rgb(hsl);
+        helper.setObject({
+          object: state.get.current(),
+          path: "theme.accent.hsl",
+          newValue: {
+            h: hsl.h,
+            s: hsl.s,
+            l: hsl.l
+          }
+        });
+        helper.setObject({
+          object: state.get.current(),
+          path: "theme.accent.rgb",
+          newValue: {
+            r: Math.round(rgb.r),
+            g: Math.round(rgb.g),
+            b: Math.round(rgb.b)
+          }
+        });
+      }
     }
   };
 
@@ -1730,6 +1900,31 @@ var theme = (function() {
       html.style.setProperty("--theme-accent-r", rgb.r);
       html.style.setProperty("--theme-accent-g", rgb.g);
       html.style.setProperty("--theme-accent-b", rgb.b);
+    },
+    preset: function() {
+      var themeAccentPreset = helper.e(".theme-accent-preset");
+      var formWrap = helper.node("div|class:form-wrap");
+      var themeAccentPresetGrid = helper.node("div|class:theme-accent-preset-grid");
+
+      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);
+          themeAccentPresetItem.addEventListener("click", function() {
+            mod.accent.preset.set(arrayItem);
+            data.save();
+            render.accent.color();
+            control.render.update.control.header();
+            control.render.update.control.menu();
+          });
+          themeAccentPresetGrid.appendChild(themeAccentPresetItem);
+        });
+      });
+
+      formWrap.appendChild(themeAccentPresetGrid);
+      themeAccentPreset.appendChild(formWrap);
     }
   };
 
@@ -1878,7 +2073,7 @@ var theme = (function() {
     allThemePreset.forEach(function(arrayItem, index) {
       var themePresetItem = helper.node("div|class:theme-preset-item");
       var themePresetTile = helper.node("div|class:theme-preset-tile");
-      var themePresetButton = helper.node("button|class:theme-preset-button button,tabindex:-1");
+      var themePresetButton = helper.node("button|class:theme-preset-button button button-block button-ring,tabindex:-1");
       var themePresetPreview = helper.node("span|class:theme-preset-preview");
       var shadeSteps = 4;
       var rgb = arrayItem.color.rgb;
@@ -1958,7 +2153,7 @@ var theme = (function() {
         allThemeCuston.forEach(function(arrayItem, index) {
           var themeCustomItem = helper.node("div|class:theme-custom-item");
           var themeCustomTile = helper.node("div|class:theme-custom-tile");
-          var themeCustomButton = helper.node("button|class:theme-custom-button button,tabindex:-1");
+          var themeCustomButton = helper.node("button|class:theme-custom-button button button-block button-ring,tabindex:-1");
           var themeCustomPreview = helper.node("span|class:theme-custom-preview");
           var themeCustomControl = helper.node("div|class:theme-custom-control");
           var themeCustomEdit = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small,tabindex:-2");
@@ -1970,19 +2165,31 @@ var theme = (function() {
           var hsl = arrayItem.color.hsl;
           for (var i = 1; i <= shadeSteps; i++) {
             if (i > 1) {
-              if (arrayItem.style == "dark") {
+              var shiftDark = function() {
                 rgb = helper.convertColor.hsl.rgb({
                   h: hsl.h,
                   s: hsl.s,
                   l: hsl.l - ((arrayItem.color.contrast.dark) * (i * 2))
                 });
-              } else if (arrayItem.style == "light") {
+              };
+              var shiftLight = function() {
                 rgb = helper.convertColor.hsl.rgb({
                   h: hsl.h,
                   s: hsl.s,
                   l: hsl.l + ((arrayItem.color.contrast.light) * (i * 2))
                 });
               };
+              if (arrayItem.style == "dark") {
+                shiftDark();
+              } else if (arrayItem.style == "light") {
+                shiftLight();
+              } else if (arrayItem.style == "system") {
+                if (window.matchMedia("(prefers-color-scheme:dark)").matches) {
+                  shiftDark();
+                } else if (window.matchMedia("(prefers-color-scheme:light)").matches) {
+                  shiftLight();
+                };
+              };
             };
             for (var colorKey in rgb) {
               if (rgb[colorKey] < 0) {
@@ -2361,6 +2568,7 @@ var theme = (function() {
     render.font.ui.style();
     render.color.shade();
     render.accent.color();
+    render.accent.preset();
     render.radius();
     render.shadow();
     render.shade.opacity();

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "5.15.0";
+  var current = "5.16.0";
 
   var name = "Zonked Tarsier";
 

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.15.0",
+  "version": "5.16.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"