[refactor] improve theme accent hue cycle

src/css/animation.css

@@ -1,3 +1,88 @@
+@keyframes rainbow-variables {
+  0%, 100% {
+    --theme-accent: var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);
+    --theme-accent-accessible-threshold: 0.5;
+    --theme-accent-accessible-r: calc(var(--theme-accent-r) * 0.50);
+    --theme-accent-accessible-g: calc(var(--theme-accent-g) * 0.60);
+    --theme-accent-accessible-b: calc(var(--theme-accent-b) * 0.20);
+    --theme-accent-accessible-sum: calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));
+    --theme-accent-accessible-perceived-lightness: calc(var(--theme-accent-accessible-sum) / 255);
+    --theme-accent-accessible-color: 0, 0%, calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);
+  }
+
+  0% {
+    --theme-accent-r: 255;
+    --theme-accent-g: 0;
+    --theme-accent-b: 0;
+  }
+
+  16.666666666666668% {
+    --theme-accent-r: 255;
+    --theme-accent-g: 255;
+    --theme-accent-b: 0;
+  }
+
+  33.333333333333336% {
+    --theme-accent-r: 0;
+    --theme-accent-g: 255;
+    --theme-accent-b: 0;
+  }
+
+  50% {
+    --theme-accent-r: 0;
+    --theme-accent-g: 255;
+    --theme-accent-b: 255;
+  }
+
+  66.66666666666667% {
+    --theme-accent-r: 0;
+    --theme-accent-g: 0;
+    --theme-accent-b: 255;
+  }
+
+  83.33333333333334% {
+    --theme-accent-r: 255;
+    --theme-accent-g: 0;
+    --theme-accent-b: 255;
+  }
+
+  100% {
+    --theme-accent-r: 255;
+    --theme-accent-g: 0;
+    --theme-accent-b: 0;
+  }
+}
+
+@keyframes rainbow {
+  0% {
+    background-color: hsl(0, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
+  }
+
+  16.666666666666668% {
+    background-color: hsl(60, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
+  }
+
+  33.333333333333336% {
+    background-color: hsl(120, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
+  }
+
+  50% {
+    background-color: hsl(180, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
+  }
+
+  66.66666666666667% {
+    background-color: hsl(240, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
+  }
+
+  83.33333333333334% {
+    background-color: hsl(300, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
+  }
+
+  100% {
+    background-color: hsl(360, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
+  }
+}
+
 @keyframes appear {
   0% {
     opacity: 0;

src/css/link.css

@@ -639,10 +639,6 @@
   transition: color var(--layout-timing-extra-fast);
 }
 
-.is-theme-accent-cycle .link-display-letter {
-  transition: none;
-}
-
 .link-display-icon {
   font-weight: 400;
   font-style: normal;
@@ -650,6 +646,7 @@
   transition: color var(--layout-timing-extra-fast);
 }
 
+.is-theme-accent-cycle .link-display-letter,
 .is-theme-accent-cycle .link-display-icon {
   transition: none;
 }
@@ -842,31 +839,31 @@
 }
 
 .link-control-item {
-  color: rgb(var(--theme-accent-text));
+  color: hsl(var(--theme-accent-accessible-color));
 }
 
 .link-control-item:focus,
 .link-control-item:hover {
-  color: rgb(var(--theme-accent-text));
+  color: hsl(var(--theme-accent-accessible-color));
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: hsla(var(--theme-accent-accessible-color), 0.2);
 }
 
 .link-control-item.disabled:focus,
 .link-control-item.disabled:hover,
 .link-control-item:disabled:focus,
 .link-control-item:disabled:hover {
-  color: rgba(var(--theme-accent-text), 0.25);
+  color: hsla(var(--theme-accent-accessible-color), 0.25);
   background-color: transparent;
 }
 
 .link-control-item:active {
-  color: rgb(var(--theme-accent-text));
+  color: hsl(var(--theme-accent-accessible-color));
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: hsla(var(--theme-accent-accessible-color), 0.1);
 }
 
 .link-control-item.disabled,
 .link-control-item:disabled {
-  color: rgb(var(--theme-accent-text), 0.25);
+  color: hsla(var(--theme-accent-accessible-color), 0.25);
 }
 
 .is-link-orientation-top.is-link-style-list .link-control-item:nth-child(1) {
@@ -961,10 +958,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
+  color: hsl(var(--theme-accent-accessible-color));
-
-.link-url-text {
-  color: rgb(var(--theme-accent-text));
 }
 
 .is-edit.is-link-item-url-show .link-item:focus .link-panel-front,

src/css/variables.css

@@ -1,8 +1,17 @@
 :root {
   /* theme */
   --theme-root-font-size:                               14px;
-  --theme-accent:                                       250, 130, 0;
+  --theme-accent-r:                                     250;
-  --theme-accent-text:                                  var(--theme-black);
+  --theme-accent-g:                                     130;
+  --theme-accent-b:                                     0;
+  --theme-accent:                                       var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);
+  --theme-accent-accessible-threshold:                  0.5;
+  --theme-accent-accessible-r:                          calc(var(--theme-accent-r) * 0.50);
+  --theme-accent-accessible-g:                          calc(var(--theme-accent-g) * 0.60);
+  --theme-accent-accessible-b:                          calc(var(--theme-accent-b) * 0.20);
+  --theme-accent-accessible-sum:                        calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));
+  --theme-accent-accessible-perceived-lightness:        calc(var(--theme-accent-accessible-sum) / 255);
+  --theme-accent-accessible-color:                      0, 0%, calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);
   --theme-radius:                                       0.2rem;
   --theme-font-display-name:                            "Fjalla One", sans-serif;
   --theme-font-display-weight:                          400;

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

@@ -70,7 +70,7 @@
           </div>
         </div>
         <div class="form-helper">
-          <p class="control-theme-accent-cycle-helper form-helper-item">A small delay and small step in Accent hue change may cause performance issues.</p>
+          <p class="control-theme-accent-cycle-helper form-helper-item">Take casre as a small delay in Accent hue change may cause performance issues.</p>
         </div>
         <div class="form-helper">
           <p class="control-theme-accent-cycle-helper form-helper-item">Auto change Accent hue will not work when the Accent colour is a grey or black.</p>

src/js/control.js

@@ -5599,8 +5599,8 @@ var control = (function() {
           type: "button",
           func: function() {
             mod.default("theme.accent.cycle.step");
-            render.update.control.header();
+            theme.bind.accent.cycle.remove();
-            render.update.control.menu();
+            theme.bind.accent.cycle.add();
             render.update.control.header();
             render.update.control.menu();
           }

src/js/link.js

@@ -722,13 +722,18 @@ var link = (function() {
       if (stagedLink.link.accent.override) {
         linkItemOptions.attr.push({
           key: "style",
-          value: "--theme-accent: " + stagedLink.link.accent.color.r + ", " + stagedLink.link.accent.color.g + ", " + stagedLink.link.accent.color.b + ";"
+          value: "--theme-accent-r: " + stagedLink.link.accent.color.r + ";" +
+            "--theme-accent-g: " + stagedLink.link.accent.color.g + ";" +
+            "--theme-accent-b: " + stagedLink.link.accent.color.b + ";" +
+            "--theme-accent: var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);" +
+            "--theme-accent-accessible-threshold: 0.5;" +
+            "--theme-accent-accessible-r: calc(var(--theme-accent-r) * 0.50);" +
+            "--theme-accent-accessible-g: calc(var(--theme-accent-g) * 0.60);" +
+            "--theme-accent-accessible-b: calc(var(--theme-accent-b) * 0.20);" +
+            "--theme-accent-accessible-sum: calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));" +
+            "--theme-accent-accessible-perceived-lightness: calc(var(--theme-accent-accessible-sum) / 255);" +
+            "--theme-accent-accessible-color: 0, 0%, calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);"
         });
-        if (invert(stagedLink.link.accent.color, true) == "#000000") {
-          linkItemOptions.attr[1].value = linkItemOptions.attr[1].value + " --theme-accent-text: var(--theme-black);"
-        } else if (invert(stagedLink.link.accent.color, true) == "#ffffff") {
-          linkItemOptions.attr[1].value = linkItemOptions.attr[1].value + " --theme-accent-text: var(--theme-white);"
-        };
       };
       var linkItem = helper.makeNode(linkItemOptions);
       var linkPanelFrontOptions = {

src/js/state.js

@@ -266,7 +266,7 @@ var state = (function() {
         },
         cycle: {
           active: false,
-          speed: 150,
+          speed: 300,
           step: 10
         }
       },
@@ -436,7 +436,7 @@ var state = (function() {
           b: 255
         },
         cycle: {
-          speed: 150,
+          speed: 300,
           step: 10
         }
       },

src/js/theme.js

@@ -47,7 +47,7 @@ var theme = (function() {
       },
       add: function() {
         _timerAccentCycle = setInterval(function() {
-          theme.accent.cycle();
+          accent.cycle();
           control.render.update.control.header(control.mod.header[5]);
           control.render.update.control.menu(control.mod.menu.controls.theme.accent[0]);
           control.render.update.control.menu(control.mod.menu.controls.theme.accent[1]);
@@ -1452,14 +1452,10 @@ var theme = (function() {
   render.accent = {
     color: function() {
       var html = helper.e("html");
-      var color = state.get.current().theme.accent.rgb;
+      var rgb = state.get.current().theme.accent.rgb;
-      html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
+      html.style.setProperty("--theme-accent-r", rgb.r);
-      html.style.removeProperty("--theme-accent-text");
+      html.style.setProperty("--theme-accent-g", rgb.g);
-      if (invert(state.get.current().theme.accent.rgb, true) == "#000000") {
+      html.style.setProperty("--theme-accent-b", rgb.b);
-        html.style.setProperty("--theme-accent-text", "var(--theme-black)");
-      } else if (invert(state.get.current().theme.accent.rgb, true) == "#ffffff") {
-        html.style.setProperty("--theme-accent-text", "var(--theme-white)");
-      };
     }
   };