[refactor] improve theme accent hue cycle

Author: zombieFox

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,17 +639,14 @@
 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;
 color:rgb(var(--theme-accent));
 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));
-background-color:rgba(0,0,0,0.2);
+color:hsl(var(--theme-accent-accessible-color));
+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));
-background-color:rgba(0,0,0,0.1);
+color:hsl(var(--theme-accent-accessible-color));
+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;
-}
-
-.link-url-text{
-color:rgb(var(--theme-accent-text));
+color:hsl(var(--theme-accent-accessible-color));
 }
 
 .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-text:var(--theme-black);
+--theme-accent-r:250;
+--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 @@ <h1 class="menu-item-header-text">Accent</h1>
 </div>
 </div>
 <divclass="form-helper">
-<pclass="control-theme-accent-cycle-helper form-helper-item">A small delay and small step in Accent hue change may cause performance issues.</p>
+<pclass="control-theme-accent-cycle-helper form-helper-item">Take casre as a small delay in Accent hue change may cause performance issues.</p>
 </div>
 <divclass="form-helper">
 <pclass="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();
-render.update.control.menu();
+theme.bind.accent.cycle.remove();
+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);"
-}elseif(invert(stagedLink.link.accent.color,true)=="#ffffff"){
-linkItemOptions.attr[1].value=linkItemOptions.attr[1].value+" --theme-accent-text: var(--theme-white);"
-};
 };
 varlinkItem=helper.makeNode(linkItemOptions);
 varlinkPanelFrontOptions={

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(){
 varhtml=helper.e("html");
-varcolor=state.get.current().theme.accent.rgb;
-html.style.setProperty("--theme-accent",color.r+", "+color.g+", "+color.b);
-html.style.removeProperty("--theme-accent-text");
-if(invert(state.get.current().theme.accent.rgb,true)=="#000000"){
-html.style.setProperty("--theme-accent-text","var(--theme-black)");
-}elseif(invert(state.get.current().theme.accent.rgb,true)=="#ffffff"){
-html.style.setProperty("--theme-accent-text","var(--theme-white)");
-};
+varrgb=state.get.current().theme.accent.rgb;
+html.style.setProperty("--theme-accent-r",rgb.r);
+html.style.setProperty("--theme-accent-g",rgb.g);
+html.style.setProperty("--theme-accent-b",rgb.b);
 }
 };