Modernizing the theming template

[HM100]

As many know, Evelution is powered up by CPE Language, allowing up theming. Currently, theming is done by these variables:

--background-image:url("loadbg_dev.png");
--background-color:#441177;
--body-display:modern;
--background-va:top;
--background-size:cover;
--background-no-tiling:false;
--link-color:#dd2300;
--content-bg:#f1f2f3;
--content-border:auto;
--content-color:auto;
--button-color:#dd8300;
--community-header-bg:#b88300;
--floating-header-bg:auto;
--caret-color:auto;
--custom-secondary-font:"";
--border-radius:3px;
--wordmark-filter:;
--wordmark-filter2:;
--wordmark-filter-duration:300ms;
--wordmark-filter-delay:0;

And by those dynamicals:

    --dropdown-bg: #d1d8dd;
    --content-color-blend-light: #376266;
    --content-color-blend: #0e191a;
    --content-bg-dark: #b0b5bb;
    --content-bg-dark-super: #7f8791;
    --content-color-dark: #376266;
    --content-color-dark-super: #56999f;
    --content-color-text: #ffffff;
    --content-color-text-inverted: #0e191a;
    --content-color-text-dark: #bfbfbf;
    --content-color-content-bg-mix-light: #c4c7c8;
    --content-color-content-bg-mix: #969b9c;
    --dropdown-bg-rgb: 209,216,221;
    --content-bg-rgb: 241,242,243;
    --content-bg-dark-rgb: 176,181,187;
    --content-bg-dark-super-rgb: 127,135,145;
    --content-color-rgb: 14,25,26;
    --content-color-dark-rgb: 55,98,102;
    --content-color-dark-super-rgb: 86,153,159;
    --content-color-text-rgb: 255,255,255;
    --content-color-text-inverted-rgb: 14,25,26;
    --content-color-text-dark-rgb: 191,191,191;
    --content-color-blend-light-rgb: 55,98,102;
    --content-color-blend-rgb: 14,25,26;
    --button-color-blend-light: #dd8300;
    --button-color-blend: #a66200;
    --button-color-dark: #a66200;
    --button-color-dark-super: #7d4a00;
    --button-color-text: #0e191a;
    --button-color-text-inverted: #ffffff;
    --button-color-text-dark: #376266;
    --button-color-content-bg-mix-light: #eddcc2;
    --button-color-content-bg-mix: #e9c692;
    --button-color-rgb: 221,131,0;
    --button-color-dark-rgb: 166,98,0;
    --button-color-dark-super-rgb: 125,74,0;
    --button-color-text-rgb: 14,25,26;
    --button-color-text-inverted-rgb: 255,255,255;
    --button-color-text-dark-rgb: 55,98,102;
    --button-color-blend-light-rgb: 221,131,0;
    --button-color-blend-rgb: 166,98,0;
    --community-header-bg-blend-light: #b88300;
    --community-header-bg-blend: #8a6200;
    --community-header-dark: #8a6200;
    --community-header-dark-super: #684a00;
    --community-header-text: #0e191a;
    --community-header-text-inverted: #ffffff;
    --community-header-text-dark: #376266;
    --community-header-bg-content-bg-mix-light: #e6dcc2;
    --community-header-bg-content-bg-mix: #dac692;
    --community-header-bg-rgb: 184,131,0;
    --community-header-dark-rgb: 138,98,0;
    --community-header-dark-super-rgb: 104,74,0;
    --community-header-text-rgb: 14,25,26;
    --community-header-text-inverted-rgb: 255,255,255;
    --community-header-text-dark-rgb: 55,98,102;
    --community-header-bg-blend-light-rgb: 184,131,0;
    --community-header-bg-blend-rgb: 138,98,0;
    --link-color-blend-light: #ff4926;
    --link-color-blend: #dd2300;
    --link-color-dark: #ff4926;
    --link-color-dark-super: #ff775c;
    --link-color-text: #ffffff;
    --link-color-text-inverted: #0e191a;
    --link-color-text-dark: #bfbfbf;
    --link-color-content-bg-mix-light: #edc9c2;
    --link-color-content-bg-mix: #e99f92;
    --link-color-rgb: 221,35,0;
    --link-color-dark-rgb: 255,73,38;
    --link-color-dark-super-rgb: 255,119,92;
    --link-color-text-rgb: 255,255,255;
    --link-color-text-inverted-rgb: 14,25,26;
    --link-color-text-dark-rgb: 191,191,191;
    --link-color-blend-light-rgb: 255,73,38;
    --link-color-blend-rgb: 221,35,0;
    --content-border-blend-light: #75929c;
    --content-border-blend: #516971;
    --content-border-dark: #75929c;
    --content-border-dark-super: #98adb5;
    --content-border-text: #ffffff;
    --content-border-text-inverted: #0e191a;
    --content-border-text-dark: #bfbfbf;
    --content-border-content-bg-mix-light: #d1d7d9;
    --content-border-content-bg-mix: #b1bbbf;
    --content-border-rgb: 81,105,113;
    --content-border-dark-rgb: 117,146,156;
    --content-border-dark-super-rgb: 152,173,181;
    --content-border-text-rgb: 255,255,255;
    --content-border-text-inverted-rgb: 14,25,26;
    --content-border-text-dark-rgb: 191,191,191;
    --content-border-blend-light-rgb: 117,146,156;
    --content-border-blend-rgb: 81,105,113;
    --background-color-blend-light: #731dc9;
    --background-color-blend: #441177;
    --background-color-dark: #731dc9;
    --background-color-dark-super: #9647e5;
    --background-color-text: #ffffff;
    --background-color-text-inverted: #0e191a;
    --background-color-text-dark: #bfbfbf;
    --background-color-content-bg-mix-light: #cec5da;
    --background-color-content-bg-mix: #ac98c1;
    --background-color-rgb: 68,17,119;
    --background-color-dark-rgb: 115,29,201;
    --background-color-dark-super-rgb: 150,71,229;
    --background-color-text-rgb: 255,255,255;
    --background-color-text-inverted-rgb: 14,25,26;
    --background-color-text-dark-rgb: 191,191,191;
    --background-color-blend-light-rgb: 115,29,201;
    --background-color-blend-rgb: 68,17,119;
    --floating-header-bg-blend-light: #d3ad5b;
    --floating-header-bg-blend: #b38930;
    --floating-header-dark: #b38930;
    --floating-header-dark-super: #866724;
    --floating-header-text: #0e191a;
    --floating-header-text-inverted: #ffffff;
    --floating-header-text-dark: #376266;
    --floating-header-bg-content-bg-mix-light: #ebe4d5;
    --floating-header-bg-content-bg-mix: #e5d6b6;
    --floating-header-bg-rgb: 211,173,91;
    --floating-header-dark-rgb: 179,137,48;
    --floating-header-dark-super-rgb: 134,103,36;
    --floating-header-text-rgb: 14,25,26;
    --floating-header-text-inverted-rgb: 255,255,255;
    --floating-header-text-dark-rgb: 55,98,102;
    --floating-header-bg-blend-light-rgb: 211,173,91;
    --floating-header-bg-blend-rgb: 179,137,48;
    --info-color-content-bg-mix-light: #d2d3d4;
    --info-color-content-bg-mix: #b3b4b5;
    --success-color-content-bg-mix-light: #c5dcd8;
    --success-color-content-bg-mix: #99c7bd;
    --warning-color-content-bg-mix-light: #f4eacd;
    --warning-color-content-bg-mix: #f7e3a6;
    --alert-color-content-bg-mix-light: #edcccd;
    --alert-color-content-bg-mix: #e9a6a6;
    --emphasis-bg: #ce9e9f;
    --emphasis-bg-text: #0e191a;
    --emphasis-bg-text-inverted: #ffffff;
    --emphasis-bg-text-dark: #376266;
    --accent-bg: #c9936a;
    --accent-bg-text: #0e191a;
    --accent-bg-text-inverted: #ffffff;
    --accent-bg-text-dark: #376266;
    --emphasis-bg-rgb: 206,158,159;
    --emphasis-bg-text-rgb: 14,25,26;
    --emphasis-bg-text-inverted-rgb: 255,255,255;
    --emphasis-bg-text-dark-rgb: 55,98,102;
    --accent-bg-rgb: 201,147,106;
    --accent-bg-text-rgb: 14,25,26;
    --accent-bg-text-inverted-rgb: 255,255,255;
    --accent-bg-text-dark-rgb: 55,98,102;

But unfortunately, this scheme is too similar to the ones used in Mpisto2017 and too few changes had happened in later Revisions (Such as Mpisto War, MpistoWar 2018, Qora Qore Web etc.) and it seems that the current naming conventions don't actually match the modern usage of these variables so things need to change.

In the next revision, theming will be done using the following variables:

--community-background-image:url("loadbg_dev.png");
--community-background-color:#441177;
--community-background-mode:modern;
--community-background-alignment:top;
--community-background-size:cover;
--community-background-no-tiling:false;
--anchor-background-color:#dd2300;
--page-background-color:#f1f2f3;
--page-border-background-color:auto;
--page-text-background-color:auto;
--accent-background-color:#dd8300;
--sticky-header-background-color:#b88300;
--toolbar-background-color:auto;
--caret-color:auto;
--custom-secondary-font:"";
--border-radius:3px;
--logo-filter:;
--logo-filter-hover:;
--logo-filter-duration:300ms;
--logo-filter-delay:0;

This is not only modern, but also matches the layout expectations. Their dynamical equivalents are the following ones:

    --page-secondary-background-color: #d1d8dd;
    --page-text-gradient-color: #376266;
    --page-text-gradient-color-hover: #0e191a;
    --page-background-color-hover: #b0b5bb;
    --page-background-color-active: #7f8791;
    --page-text-background-color-hover: #376266;
    --page-text-background-color-active: #56999f;
    --page-text-foreground-color: #ffffff;
    --page-text-foreground-color-inverted: #0e191a;
    --page-text-foreground-color-hover: #bfbfbf;
    --page-text-background-color-page-background-color-mix-light: #c4c7c8;
    --page-text-background-color-page-background-color-mix: #969b9c;
    --page-secondary-background-color-rgb: 209,216,221;
    --page-background-color-rgb: 241,242,243;
    --page-background-color-hover-rgb: 176,181,187;
    --page-background-color-active-rgb: 127,135,145;
    --page-text-background-color-rgb: 14,25,26;
    --page-text-background-color-hover-rgb: 55,98,102;
    --page-text-background-color-active-rgb: 86,153,159;
    --page-text-foreground-color-rgb: 255,255,255;
    --page-text-foreground-color-inverted-rgb: 14,25,26;
    --page-text-foreground-color-hover-rgb: 191,191,191;
    --page-text-gradient-color-rgb: 55,98,102;
    --page-text-gradient-color-hover-rgb: 14,25,26;
    --accent-gradient-color: #dd8300;
    --accent-gradient-color-hover: #a66200;
    --accent-background-color-hover: #a66200;
    --accent-background-color-active: #7d4a00;
    --accent-foreground-color: #0e191a;
    --accent-foreground-color-inverted: #ffffff;
    --accent-foreground-color-hover: #376266;
    --accent-background-color-page-background-color-mix-light: #eddcc2;
    --accent-background-color-page-background-color-mix: #e9c692;
    --accent-background-color-rgb: 221,131,0;
    --accent-background-color-hover-rgb: 166,98,0;
    --accent-background-color-active-rgb: 125,74,0;
    --accent-foreground-color-rgb: 14,25,26;
    --accent-foreground-color-inverted-rgb: 255,255,255;
    --accent-foreground-color-hover-rgb: 55,98,102;
    --accent-gradient-color-rgb: 221,131,0;
    --accent-gradient-color-hover-rgb: 166,98,0;
    --sticky-header-gradient-color: #b88300;
    --sticky-header-gradient-color-hover: #8a6200;
    --sticky-header-background-color-hover: #8a6200;
    --sticky-header-background-color-active: #684a00;
    --sticky-header-foreground-color: #0e191a;
    --sticky-header-foreground-color-inverted: #ffffff;
    --sticky-header-foreground-color-hover: #376266;
    --sticky-header-background-color-page-background-color-mix-light: #e6dcc2;
    --sticky-header-background-color-page-background-color-mix: #dac692;
    --sticky-header-background-color-rgb: 184,131,0;
    --sticky-header-background-color-hover-rgb: 138,98,0;
    --sticky-header-background-color-active-rgb: 104,74,0;
    --sticky-header-foreground-color-rgb: 14,25,26;
    --sticky-header-foreground-color-inverted-rgb: 255,255,255;
    --sticky-header-foreground-color-hover-rgb: 55,98,102;
    --sticky-header-gradient-color-rgb: 184,131,0;
    --sticky-header-gradient-color-hover-rgb: 138,98,0;
    --anchor-gradient-color: #ff4926;
    --anchor-gradient-color-hover: #dd2300;
    --anchor-background-color-hover: #ff4926;
    --anchor-background-color-active: #ff775c;
    --anchor-foreground-color: #ffffff;
    --anchor-foreground-color-inverted: #0e191a;
    --anchor-foreground-color-hover: #bfbfbf;
    --anchor-background-color-page-background-color-mix-light: #edc9c2;
    --anchor-background-color-page-background-color-mix: #e99f92;
    --anchor-background-color-rgb: 221,35,0;
    --anchor-background-color-hover-rgb: 255,73,38;
    --anchor-background-color-active-rgb: 255,119,92;
    --anchor-foreground-color-rgb: 255,255,255;
    --anchor-foreground-color-inverted-rgb: 14,25,26;
    --anchor-foreground-color-hover-rgb: 191,191,191;
    --anchor-gradient-color-rgb: 255,73,38;
    --anchor-gradient-color-hover-rgb: 221,35,0;
    --page-border-gradient-color: #75929c;
    --page-border-gradient-color-hover: #516971;
    --page-border-background-color-hover: #75929c;
    --page-border-background-color-active: #98adb5;
    --page-border-foreground-color: #ffffff;
    --page-border-foreground-color-inverted: #0e191a;
    --page-border-foreground-color-hover: #bfbfbf;
    --page-border-background-color-page-background-color-mix-light: #d1d7d9;
    --page-border-background-color-page-background-color-mix: #b1bbbf;
    --page-border-background-color-rgb: 81,105,113;
    --page-border-background-color-hover-rgb: 117,146,156;
    --page-border-background-color-active-rgb: 152,173,181;
    --page-border-foreground-color-rgb: 255,255,255;
    --page-border-foreground-color-inverted-rgb: 14,25,26;
    --page-border-foreground-color-hover-rgb: 191,191,191;
    --page-border-gradient-color-rgb: 117,146,156;
    --page-border-gradient-color-hover-rgb: 81,105,113;
    --community-gradient-color: #731dc9;
    --community-gradient-color-hover: #441177;
    --community-background-color-hover: #731dc9;
    --community-background-color-active: #9647e5;
    --community-foreground-color: #ffffff;
    --community-foreground-color-inverted: #0e191a;
    --community-foreground-color-hover: #bfbfbf;
    --community-background-color-page-background-color-mix-light: #cec5da;
    --community-background-color-page-background-color-mix: #ac98c1;
    --community-background-color-rgb: 68,17,119;
    --community-background-color-hover-rgb: 115,29,201;
    --community-background-color-active-rgb: 150,71,229;
    --community-foreground-color-rgb: 255,255,255;
    --community-foreground-color-inverted-rgb: 14,25,26;
    --community-foreground-color-hover-rgb: 191,191,191;
    --community-gradient-color-rgb: 115,29,201;
    --community-gradient-color-hover-rgb: 68,17,119;
    --toolbar-gradient-color: #d3ad5b;
    --toolbar-gradient-color-hover: #b38930;
    --toolbar-background-color-hover: #b38930;
    --toolbar-background-color-active: #866724;
    --toolbar-foreground-color: #0e191a;
    --toolbar-foreground-color-inverted: #ffffff;
    --toolbar-foreground-color-hover: #376266;
    --toolbar-background-color-page-background-color-mix-light: #ebe4d5;
    --toolbar-background-color-page-background-color-mix: #e5d6b6;
    --toolbar-background-color-rgb: 211,173,91;
    --toolbar-background-color-hover-rgb: 179,137,48;
    --toolbar-background-color-active-rgb: 134,103,36;
    --toolbar-foreground-color-rgb: 14,25,26;
    --toolbar-foreground-color-inverted-rgb: 255,255,255;
    --toolbar-foreground-color-hover-rgb: 55,98,102;
    --toolbar-gradient-color-rgb: 211,173,91;
    --toolbar-gradient-color-hover-rgb: 179,137,48;
    --info-background-color-page-background-color-mix-light: #d2d3d4;
    --info-background-color-page-background-color-mix: #b3b4b5;
    --success-background-color-page-background-color-mix-light: #c5dcd8;
    --success-background-color-page-background-color-mix: #99c7bd;
    --warning-background-color-page-background-color-mix-light: #f4eacd;
    --warning-background-color-page-background-color-mix: #f7e3a6;
    --alert-background-color-page-background-color-mix-light: #edcccd;
    --alert-background-color-page-background-color-mix: #e9a6a6;
    --page-emphasis-background-color: #ce9e9f;
    --page-emphasis-foreground-color: #0e191a;
    --page-emphasis-foreground-color-inverted: #ffffff;
    --page-emphasis-foreground-color-hover: #376266;
    --page-secondary-emphasis-background-color: #c9936a;
    --page-secondary-emphasis-foreground-color: #0e191a;
    --page-secondary-emphasis-foreground-color-inverted: #ffffff;
    --page-secondary-emphasis-foreground-color-hover: #376266;
    --page-emphasis-background-color-rgb: 206,158,159;
    --page-emphasis-foreground-color-rgb: 14,25,26;
    --page-emphasis-foreground-color-inverted-rgb: 255,255,255;
    --page-emphasis-foreground-color-hover-rgb: 55,98,102;
    --page-secondary-emphasis-background-color-rgb: 201,147,106;
    --page-secondary-emphasis-foreground-color-rgb: 14,25,26;
    --page-secondary-emphasis-foreground-color-inverted-rgb: 255,255,255;
    --page-secondary-emphasis-foreground-color-hover-rgb: 55,98,102;