From 442a4f4832e6bb6f450bfc981db7958be4f8cdc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sun, 20 Feb 2022 23:58:16 +0100
Subject: [PATCH] variant: move scripts to own file #188

---
 .../content/basics/generator/_index.en.md     | 288 +------------
 layouts/partials/footer.html                  |   2 +-
 layouts/partials/menu.html                    |   8 +-
 layouts/partials/stylesheet.html              |  64 +--
 static/css/theme-neon.css                     |   2 +-
 static/css/theme-relearn-dark.css             |   2 +-
 static/css/theme-relearn-light.css            |   2 +-
 static/css/theme.css                          |  12 +-
 static/css/variant.css                        |   6 +-
 static/js/{relearn.js => theme.js}            |   0
 static/js/variant.js                          | 381 ++++++++++++++++++
 11 files changed, 408 insertions(+), 359 deletions(-)
 rename static/js/{relearn.js => theme.js} (100%)
 create mode 100644 static/js/variant.js

diff --git a/exampleSite/content/basics/generator/_index.en.md b/exampleSite/content/basics/generator/_index.en.md
index 4facb42129..c8b4d1e985 100644
--- a/exampleSite/content/basics/generator/_index.en.md
+++ b/exampleSite/content/basics/generator/_index.en.md
@@ -18,292 +18,8 @@ This is best seen in the `neon` variant with the differnet headings colors. Ther
 
 <div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);" align="center">Graph</div>
 
-<a id="vardownload" class="btn btn-default">Download color variant</a>
+<a class="vardownload btn btn-default">Download color variant</a>
 
 <script>
-function initGraph(){
-  var graphDefinition = generateGraph();
-  var element = document.querySelector( '#vargenerator' );
-  element.innerHTML = graphDefinition;
-
-  var interval_id = setInterval( function(){
-    if( document.querySelectorAll( '#vargenerator.mermaid > svg' ).length ){
-      clearInterval( interval_id );
-      generateGraphStyles();
-    }
-  }, 100 );
-
-  var btn = document.querySelector( '#vardownload' );
-  btn.addEventListener('click', getStylesheet);
-};
-
-function download(data, mimetype, filename){
-    var blob = new Blob([data], { type: mimetype });
-    var url = window.URL.createObjectURL(blob);
-    var a = document.createElement('a');
-    a.setAttribute('href', url);
-    a.setAttribute('download', filename);
-    a.click();
-}
-
-function getStylesheet(){
-  download( generateStylesheet(), 'text/css', 'theme-' + themename + '.css' );
-}
-
-function adjustCSSRules(selector, props, sheets){
-  // get stylesheet(s)
-  if (!sheets) sheets = [...document.styleSheets];
-  else if (sheets.sup){    // sheets is a string
-    let absoluteURL = new URL(sheets, document.baseURI).href;
-    sheets = [...document.styleSheets].filter(i => i.href == absoluteURL);
-  }
-  else sheets = [sheets];  // sheets is a stylesheet
-
-  // CSS (& HTML) reduce spaces in selector to one.
-  selector = selector.replace(/\s+/g, ' ');
-  const findRule = s => [...s.cssRules].reverse().find(i => i.selectorText == selector)
-  let rule = sheets.map(findRule).filter(i=>i).pop()
-
-  const propsArr = props.sup
-    ? props.split(/\s*;\s*/).map(i => i.split(/\s*:\s*/)) // from string
-    : Object.entries(props);                              // from Object
-
-  if (rule) for (let [prop, val] of propsArr){
-    // rule.style[prop] = val; is against the spec, and does not support !important.
-    rule.style.setProperty(prop, ...val.split(/ *!(?=important)/));
-  }
-  else {
-    sheet = sheets.pop();
-    if (!props.sup) props = propsArr.reduce((str, [k, v]) => `${str}; ${k}: ${v}`, '');
-    sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length);
-  }
-}
-
-function normalizeColor( c ){
-  c = c.trim();
-  c = c.replace( /\s*\(\s*/, "( " );
-  c = c.replace( /\s*\)\s*/, " )" );
-  c = c.replace( /\s*,\s*/, ", " );
-  c = c.replace( /0*\./, "." );
-  c = c.replace( / +/, " " );
-  return c;
-}
-function getColorValue( c ){
-  return normalizeColor( getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ) );
-}
-
-function changeColor( c ){
-  var style = null;
-  var theme = getTheme();
-  for( var n = 0; n < document.styleSheets.length; ++n ){
-    if( theme = parseTheme( document.styleSheets[n].href ) ){
-      var s = document.styleSheets[n];
-      for( var m = 0; m < s.rules.length; ++m ){
-        if( s.rules[m].selectorText == ':root' ){
-          style = s.rules[m].style;
-          break;
-        }
-      }
-      break;
-    }
-  }
-  if( !style ){
-    alert( 'Theme stylesheet for theme "' + theme + '" not set or found' );
-    return;
-  }
-
-  var r = document.querySelector( ':root' );
-  var v = getColorValue( c );
-  var n = prompt( '--'+c, v ).trim();
-  if( n ){
-    r = style.quer
-    style.setProperty( '--'+c, n );
-  }
-  else{
-    style.removeProperty( '--'+c );
-  }
-}
-
-function generateColorVariable( e ){
-  var v = '';
-  var gen = true;
-  if( e.fallback ){
-    f = variables.find( function( x ){
-      return x.name == e.fallback;
-    });
-    gen = getColorValue(f.name) != getColorValue(e.name);
-  }
-  else if( e.default ){
-    gen = e.default != getColorValue(e.name);
-  }
-  if( gen ){
-    v += '  --' + e.name + ': ' + getColorValue(e.name) + ';\n';
-  }
-  return v;
-}
-
-function generateStylesheet(){
-  var style =
-    '/* ' + themename + ' */\n' +
-    ':root {\n' +
-      variables.reduce( function( a, e ){ return a + generateColorVariable( e ); }, '' ) +
-    '}\n';
-  return style;
-}
-
-function styleGroup( selector, colorvar ){
-  adjustCSSRules( '#body svg '+selector+' > rect', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
-  adjustCSSRules( '#body svg '+selector+' > .label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
-  adjustCSSRules( '#body svg '+selector+' > .cluster-label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
-//  adjustCSSRules( '#body svg '+selector+' rect', 'stroke: #80808080;' );
-  adjustCSSRules( '#body svg '+selector+' .nodeLabel', 'filter: grayscale(1) invert(1) contrast(10000);' );
-}
-
-function generateGraphStyles(){
-  variables.forEach( function( e ){
-    styleGroup( '.'+e.name, e.name );
-  });
-  styleGroup( '#maincontent', 'MAIN-BG-color' )
-  styleGroup( '#mainheadings', 'MAIN-BG-color' )
-  styleGroup( '#inlinecode', 'CODE-INLINE-BG-color' )
-  styleGroup( '#blockcode', 'CODE-BLOCK-BG-color' )
-  styleGroup( '#coloredboxes', 'BOX-BG-color' );
-  styleGroup( '#menu', 'MENU-SECTIONS-BG-color' )
-  styleGroup( '#menuheader', 'MENU-HEADER-BG-color' )
-  styleGroup( '#menusections', 'MENU-SECTIONS-ACTIVE-BG-color' )
-}
-
-function generateEdge( e ){
-  var edge = '';
-  if( e.fallback ){
-    edge += e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name;
-  }
-  else{
-    edge += e.name+':::'+e.name;
-  }
-  return edge;
-}
-
-function generateGraph(){
-  var g_groups = {};
-  var g_handler = '';
-
-  variables.forEach( function( e ){
-    var group = e.group || ' ';
-    g_groups[ group ] = ( g_groups[ group ] || [] ).concat( e );
-    g_handler += '  click '+e.name+' changeColor\n';
-  });
-
-  var graph =
-    'flowchart LR\n' +
-    '  subgraph menu["menu"]\n' +
-    '    direction TB\n' +
-    '    subgraph menuheader["header"]\n' +
-    '      direction LR\n' +
-           g_groups[ 'header' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '    subgraph menusections["sections"]\n' +
-    '      direction LR\n' +
-           g_groups[ 'sections' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '  end\n' +
-    '  subgraph maincontent["content"]\n' +
-    '    direction TB\n' +
-         g_groups[ 'content' ].reduce( function( a, e ){ return a + '    ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    subgraph mainheadings["headings"]\n' +
-    '      direction LR\n' +
-           g_groups[ 'headings' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '    subgraph inlinecode["inline code"]\n' +
-    '      direction LR\n' +
-           g_groups[ 'inline code' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '    subgraph blockcode["code blocks"]\n' +
-    '      direction LR\n' +
-           g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '    subgraph coloredboxes["colored boxes"]\n' +
-    '      direction LR\n' +
-           g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '  end\n' +
-       g_handler;
-
-  console.log( graph );
-  return graph;
-}
-
-var themename = 'my-variant';
-var variables = [
-  { name: 'MAIN-TEXT-color',       group: 'content',  default: '#101010' },
-  { name: 'MAIN-LINK-color',       group: 'content',  default: '#486ac9' },
-  { name: 'MAIN-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color' },
-  { name: 'MAIN-ANCHOR-color',     group: 'content', fallback: 'MAIN-LINK-color' },
-  { name: 'MAIN-BG-color',         group: 'content',  default: '#ffffff' },
-  { name: 'TAG-BG-color',          group: 'content', fallback: 'MENU-HEADER-BG-color' },
-
-  { name: 'MAIN-TITLES-TEXT-color',  group: 'headings',  default: '#444753' },
-  { name: 'MAIN-TITLES-H1-color',    group: 'headings', fallback: 'MAIN-TEXT-color' },
-  { name: 'MAIN-TITLES-H2-color',    group: 'headings', fallback: 'MAIN-TITLES-TEXT-color' },
-  { name: 'MAIN-TITLES-H3-color',    group: 'headings', fallback: 'MAIN-TITLES-H2-color' },
-  { name: 'MAIN-TITLES-H4-color',    group: 'headings', fallback: 'MAIN-TITLES-H3-color' },
-  { name: 'MAIN-TITLES-H5-color',    group: 'headings', fallback: 'MAIN-TITLES-H4-color' },
-  { name: 'MAIN-TITLES-H6-color',    group: 'headings', fallback: 'MAIN-TITLES-H5-color' },
-
-  { name: 'CODE-BLOCK-color',        group: 'code blocks',  default: '#000000' },
-  { name: 'CODE-BLOCK-BG-color',     group: 'code blocks',  default: '#f8f8f8' },
-  { name: 'CODE-BLOCK-BORDER-color', group: 'code blocks', fallback: 'CODE-BLOCK-BG-color' },
-
-  { name: 'CODE-INLINE-color',        group: 'inline code',  default: '#5e5e5e' },
-  { name: 'CODE-INLINE-BG-color',     group: 'inline code',  default: '#fffae9' },
-  { name: 'CODE-INLINE-BORDER-color', group: 'inline code', fallback: 'CODE-INLINE-BG-color' },
-
-  { name: 'MENU-HEADER-BG-color',       group: 'header',  default: '#7dc903' },
-  { name: 'MENU-HEADER-BORDER-color',   group: 'header', fallback: 'MENU-HEADER-BG-color' },
-  { name: 'MENU-HOME-LINK-color',       group: 'header',  default: '#323232' },
-  { name: 'MENU-HOME-LINK-HOVER-color', group: 'header',  default: '#808080' },
-  { name: 'MENU-SEARCH-color',          group: 'header',  default: '#e0e0e0' },
-  { name: 'MENU-SEARCH-BG-color',       group: 'header',  default: '#323232' },
-  { name: 'MENU-SEARCH-BOX-color',      group: 'header', fallback: 'MENU-SEARCH-BG-color' },
-
-  { name: 'MENU-SECTIONS-BG-color',                group: 'sections',  default: '#282830' },
-  { name: 'MENU-SECTIONS-ACTIVE-BG-color',         group: 'sections',  default: '#202028' },
-  { name: 'MENU-SECTION-ACTIVE-CATEGORY-color',    group: 'sections',  default: '#444444' },
-  { name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections', fallback: 'MAIN-BG-color' },
-  { name: 'MENU-SECTIONS-LINK-color',              group: 'sections',  default: '#bababa' },
-  { name: 'MENU-SECTIONS-LINK-HOVER-color',        group: 'sections', fallback: 'MENU-SECTIONS-LINK-color' },
-  { name: 'MENU-VISITED-color',                    group: 'sections',  default: '#506397' },
-  { name: 'MENU-SECTION-HR-color',                 group: 'sections',  default: '#606060' },
-
-  { name: 'BOX-CAPTION-color',                 group: 'colored boxes',  default: 'rgba( 255, 255, 255, 1 )' },
-  { name: 'BOX-BG-color',                      group: 'colored boxes',  default: 'rgba( 255, 255, 255, .833 )' },
-  { name: 'BOX-TEXT-color',                    group: 'colored boxes',  default: 'rgba( 16, 16, 16, 1 )' },
-
-  { name: 'BOX-BLUE-color',                    group: 'colored boxes',  default: 'rgba( 48, 117, 229, 1 )' },
-  { name: 'BOX-INFO-color',                    group: 'colored boxes', fallback: 'BOX-BLUE-color' },
-  { name: 'BOX-BLUE-TEXT-color',               group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-INFO-TEXT-color',               group: 'colored boxes', fallback: 'BOX-BLUE-TEXT-color' },
-
-  { name: 'BOX-GREEN-color',                   group: 'colored boxes',  default: 'rgba( 42, 178, 24, 1 )' },
-  { name: 'BOX-TIP-color',                     group: 'colored boxes', fallback: 'BOX-GREEN-color' },
-  { name: 'BOX-GREEN-TEXT-color',              group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-TIP-TEXT-color',                group: 'colored boxes', fallback: 'BOX-GREEN-TEXT-color' },
-
-  { name: 'BOX-GREY-color',                    group: 'colored boxes',  default: 'rgba( 128, 128, 128, 1 )' },
-  { name: 'BOX-NEUTRAL-color',                 group: 'colored boxes', fallback: 'BOX-GREY-color' },
-  { name: 'BOX-GREY-TEXT-color',               group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-NEUTRAL-TEXT-color',            group: 'colored boxes', fallback: 'BOX-GREY-TEXT-color' },
-
-  { name: 'BOX-ORANGE-color',                  group: 'colored boxes',  default: 'rgba( 237, 153, 9, 1 )' },
-  { name: 'BOX-NOTE-color',                    group: 'colored boxes', fallback: 'BOX-ORANGE-color' },
-  { name: 'BOX-ORANGE-TEXT-color',             group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-NOTE-TEXT-color',               group: 'colored boxes', fallback: 'BOX-ORANGE-TEXT-color' },
-
-  { name: 'BOX-RED-color',                     group: 'colored boxes',  default: 'rgba( 224, 62, 62, 1 )' },
-  { name: 'BOX-WARNING-color',                 group: 'colored boxes', fallback: 'BOX-RED-color' },
-  { name: 'BOX-RED-TEXT-color',                group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-WARNING-TEXT-color',            group: 'colored boxes', fallback: 'BOX-RED-TEXT-color' },
-];
-
-initGraph();
+variants.generator( '#vargenerator', '.vardownload' );
 </script>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index aa9e4c6110..044c86c149 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -41,7 +41,7 @@
       window.T_Copy_link_to_clipboard = '{{ T "Copy-link-to-clipboard" | safeJS }}';
       window.T_Link_copied_to_clipboard = '{{ T "Link-copied-to-clipboard" | safeJS }}';
     </script>
-    <script src="{{"js/relearn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
+    <script src="{{"js/theme.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     {{- partial "custom-footer.html" . }}
   </body>
 </html>
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index 7ed997b5bc..4661be6291 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -65,7 +65,7 @@
         <div id="prefooter">
           <ul>
             {{- if $showlangswitch }}
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -92,12 +92,12 @@
             </li>
             {{- end }}
             {{- if $showthemeswitch }}
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     {{- $firsttheme := true }}
                     {{- range $themevariants }}
                       {{- $themevariant := . }}
@@ -113,7 +113,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             {{- end }}
             {{- if $showvisitedlinks }}
diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
index c49b874e74..f4114cd027 100644
--- a/layouts/partials/stylesheet.html
+++ b/layouts/partials/stylesheet.html
@@ -27,64 +27,12 @@
       }
     {{- end }}
     </style>
+    <script src="{{"js/variant.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script>
-      {{ "// we need to define this script in the head to avoid flickering" | safeJS }}
-      {{ "// on page load if the user has selected a non default variant" | safeJS }}
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        {{- $quotedthemevariants := slice }}
-        {{- range $themevariants }}
-          {{- $quotedthemevariants = $quotedthemevariants | append (printf "\"%s\"" .) }}
-        {{- end }}
-        var themes = [ {{ delimit $quotedthemevariants ", " | safeJS }} ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          {{ "// remove selection, because if some uses an arrow navigation" | safeJS }}
-          {{ "// by pressing the left or right cursor key, we will automatically" | safeJS }}
-          {{ "// select a different style" | safeJS }}
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      {{- $quotedthemevariants := slice }}
+      {{- range $themevariants }}
+        {{- $quotedthemevariants = $quotedthemevariants | append (printf "\"%s\"" .) }}
+      {{- end }}
+      variants.init( [ {{ delimit $quotedthemevariants ", " | safeJS }} ] );
     </script>
     <script src="{{"js/jquery.min.js"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
\ No newline at end of file
diff --git a/static/css/theme-neon.css b/static/css/theme-neon.css
index 532a0b2cec..d428436798 100644
--- a/static/css/theme-neon.css
+++ b/static/css/theme-neon.css
@@ -15,7 +15,7 @@
 
     --MAIN-LINK-color: #1c90f3; /* Color of links */
     --MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */
+    --MAIN-ANCHOR-color: #4cabff; /* color of anchors on titles */
     --MAIN-BG-color: #202020; /* color for code background */
 
     /* adjusted to neon chroma style */
diff --git a/static/css/theme-relearn-dark.css b/static/css/theme-relearn-dark.css
index 440d9c70ea..832f56f086 100644
--- a/static/css/theme-relearn-dark.css
+++ b/static/css/theme-relearn-dark.css
@@ -10,7 +10,7 @@
     --MAIN-TITLES-TEXT-color: #ffffff; /* Color of titles h2-h3-h4-h5-h6 */
     --MAIN-LINK-color: #1c90f3; /* Color of links */
     --MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */
+    --MAIN-ANCHOR-color: #4cabff; /* color of anchors on titles */
     --MAIN-BG-color: #202020; /* color for code background */
 
     /* adjusted to relearn-dark chroma style */
diff --git a/static/css/theme-relearn-light.css b/static/css/theme-relearn-light.css
index 1aa0096b4c..3b38078b8d 100644
--- a/static/css/theme-relearn-light.css
+++ b/static/css/theme-relearn-light.css
@@ -10,7 +10,7 @@
     --MAIN-TITLES-TEXT-color: #4a4a4a; /* Color of titles h2-h3-h4-h5-h6 */
     --MAIN-LINK-color: #486ac9; /* Color of links */
     --MAIN-LINK-HOVER-color: #134fbf; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */
+    --MAIN-ANCHOR-color: #134fbf; /* color of anchors on titles */
     --MAIN-BG-color: #ffffff; /* color of text by default */
 
     /* adjusted to relearn-light chroma style */
diff --git a/static/css/theme.css b/static/css/theme.css
index 497e966561..efbe52364c 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1133,7 +1133,7 @@ option {
     display: none;
 }
 
-/* expander expand collapsed marked, must override logic of expand.html, controlled by relearn.js */
+/* expander expand collapsed marked, must override logic of expand.html, controlled by theme.js */
 .expand:not(.expand-expanded).expand-marked > .expand-label > .fa-chevron-down {
     display: inline-block;
 }
@@ -1307,7 +1307,7 @@ option {
 
 /* anchors */
 .anchor {
-  color: #486ac9; /* var(--MAIN-ANCHOR-color) */
+  color: #134fbf; /* var(--MAIN-ANCHOR-color) */
   cursor: pointer;
   font-size: .5em;
   margin-left: .66em;
@@ -1441,10 +1441,14 @@ h6 a {
   }
 }
 
-/* turn off animiation in IE because this causes the menu
-to move in from the left on every page load */
 @media all and (-ms-high-contrast:none) {
+    /* turn off animiation in IE because this causes the menu
+    to move in from the left on every page load */
     .default-animation{
         transition: none;
     }
+    /* turn off variant selector as it uses modern stuff */
+    #select-variant-container{
+        display: none;
+    }
 }
diff --git a/static/css/variant.css b/static/css/variant.css
index 47c954bbc7..a32f154e58 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -1,9 +1,9 @@
 :root {
     --INTERNAL-MAIN-TEXT-color: var(--MAIN-TEXT-color, #101010);
-    --INTERNAL-MAIN-TITLES-TEXT-color: var(--MAIN-TITLES-TEXT-color, #444753);
+    --INTERNAL-MAIN-TITLES-TEXT-color: var(--MAIN-TITLES-TEXT-color, #4a4a4a);
     --INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, #486ac9);
     --INTERNAL-MAIN-LINK-HOVER-color: var(--MAIN-LINK-HOVER-color, var(--INTERNAL-MAIN-LINK-color));
-    --INTERNAL-MAIN-ANCHOR-color: var(--MAIN-ANCHOR-color, var(--INTERNAL-MAIN-LINK-color));
+    --INTERNAL-MAIN-ANCHOR-color: var(--MAIN-ANCHOR-color, var(--INTERNAL-MAIN-LINK-HOVER-color));
     --INTERNAL-MAIN-BG-color: var(--MAIN-BG-color, #ffffff);
 
     --INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color, var(--INTERNAL-MAIN-TEXT-color));
@@ -34,7 +34,7 @@
     --INTERNAL-MENU-SEARCH-BOX-color: var(--MENU-SEARCH-BOX-color, var(--INTERNAL-MENU-SEARCH-BG-color));
 
     --INTERNAL-MENU-SECTIONS-ACTIVE-BG-color: var(--MENU-SECTIONS-ACTIVE-BG-color, rgba( 0, 0, 0, .166 ));
-    --INTERNAL-MENU-SECTIONS-BG-color: var(--MENU-SECTIONS-BG-color, #282830);
+    --INTERNAL-MENU-SECTIONS-BG-color: var(--MENU-SECTIONS-BG-color, #282828);
     --INTERNAL-MENU-SECTIONS-LINK-color: var(--MENU-SECTIONS-LINK-color, #bababa);
     --INTERNAL-MENU-SECTIONS-LINK-HOVER-color: var(--MENU-SECTIONS-LINK-HOVER-color, var(--INTERNAL-MENU-SECTIONS-LINK-color));
     --INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color: var(--MENU-SECTION-ACTIVE-CATEGORY-color, #444444);
diff --git a/static/js/relearn.js b/static/js/theme.js
similarity index 100%
rename from static/js/relearn.js
rename to static/js/theme.js
diff --git a/static/js/variant.js b/static/js/variant.js
new file mode 100644
index 0000000000..59d94ad525
--- /dev/null
+++ b/static/js/variant.js
@@ -0,0 +1,381 @@
+// we need to load this script in the html head to avoid flickering
+// on page load if the user has selected a non default variant
+var variants = {
+	variant: '',
+	variants: [],
+	customvariant: 'my-variant',
+
+	init: function( variants ){
+		this.variants = variants;
+		var variant = window.localStorage.getItem( 'variant' ) || ( this.variants.length ? this.variants[0] : '' );
+		this.changeVariant( variant );
+		document.addEventListener( 'readystatechange', function(){
+			if( document.readyState == 'interactive' ){
+				this.markSelectedVariant( this.getVariant() );
+			}
+		}.bind( this ) );
+	},
+
+	parseVariantnameFromFilename: function ( s ){
+		if( !s || !s.match ){
+			return '';
+		}
+		var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
+		var variant = matches && matches.length == 2 ? matches[ 1 ] : '';
+		return variant;
+	},
+
+	getVariant: function(){
+		return this.variant;
+	},
+
+	setVariant: function( variant ){
+		this.variant = variant;
+		window.localStorage.setItem( 'variant', variant );
+	},
+
+	markSelectedVariant: function( variant ){
+		var select = document.querySelector( '#select-variant' );
+		if( !select ){
+			return;
+		}
+		if( select.value != variant ){
+			select.value = variant;
+		}
+	},
+
+	changeVariant: function( variant ){
+		if( this.variants.indexOf( variant ) < 0 ){
+			variant = this.variants.length ? this.variants[ 0 ] : '';
+		}
+		this.setVariant( variant );
+		if( !variant ){
+			return;
+		}
+		var link = document.querySelector( '#variant-style' );
+		if( !link ){
+			return;
+		}
+		var old_path = link.getAttribute( 'href' );
+		var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + variant + '$2' );
+		if( old_path != new_path ){
+			link.setAttribute( 'href', new_path );
+			this.markSelectedVariant( variant );
+			// remove selection, because if some uses an arrow navigation"
+			// by pressing the left or right cursor key, we will automatically
+			// select a different style
+			if( document.activeElement ){
+				document.activeElement.blur();
+			}
+		}
+	},
+
+	generator: function( vargenerator, vardownload ){
+		var graphDefinition = this.generateGraph();
+		var element = document.querySelector( vargenerator );
+		element.innerHTML = graphDefinition;
+
+		var interval_id = setInterval( function(){
+			if( document.querySelectorAll( vargenerator + '.mermaid > svg' ).length ){
+				clearInterval( interval_id );
+				this.styleGraph();
+			}
+		}.bind( this ), 100 );
+
+		var btn = document.querySelector( vardownload );
+		btn.addEventListener('click', this.getStylesheet.bind( this ) );
+	},
+
+	download: function(data, mimetype, filename){
+		var blob = new Blob([data], { type: mimetype });
+		var url = window.URL.createObjectURL(blob);
+		var a = document.createElement('a');
+		a.setAttribute('href', url);
+		a.setAttribute('download', filename);
+		a.click();
+	},
+
+	getStylesheet: function(){
+		this.download( this.generateStylesheet(), 'text/css', 'theme-' + this.customvariant + '.css' );
+	},
+
+	adjustCSSRules: function(selector, props, sheets){
+		// get stylesheet(s)
+		if (!sheets) sheets = [...document.styleSheets];
+		else if (sheets.sup){    // sheets is a string
+			let absoluteURL = new URL(sheets, document.baseURI).href;
+			sheets = [...document.styleSheets].filter(i => i.href == absoluteURL);
+		}
+		else sheets = [sheets];  // sheets is a stylesheet
+
+		// CSS (& HTML) reduce spaces in selector to one.
+		selector = selector.replace(/\s+/g, ' ');
+		const findRule = s => [...s.cssRules].reverse().find(i => i.selectorText == selector)
+		let rule = sheets.map(findRule).filter(i=>i).pop()
+
+		const propsArr = props.sup
+			? props.split(/\s*;\s*/).map(i => i.split(/\s*:\s*/)) // from string
+			: Object.entries(props);                              // from Object
+
+		if (rule) for (let [prop, val] of propsArr){
+			// rule.style[prop] = val; is against the spec, and does not support !important.
+			rule.style.setProperty(prop, ...val.split(/ *!(?=important)/));
+		}
+		else {
+			sheet = sheets.pop();
+			if (!props.sup) props = propsArr.reduce((str, [k, v]) => `${str}; ${k}: ${v}`, '');
+			sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length);
+		}
+	},
+
+	normalizeColor: function( c ){
+		if( !c || !c.trim ){
+			return c;
+		}
+		c = c.trim();
+		c = c.replace( /\s*\(\s*/, "( " );
+		c = c.replace( /\s*\)\s*/, " )" );
+		c = c.replace( /\s*,\s*/, ", " );
+		c = c.replace( /0*\./, "." );
+		c = c.replace( / +/, " " );
+		return c;
+	},
+
+	getColorValue: function( c ){
+		return this.normalizeColor( getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ) );
+	},
+
+	changeColor: function( c ){
+		var style = null;
+		var variant = this.variant;
+		for( var n = 0; n < document.styleSheets.length; ++n ){
+			if( variant = this.parseVariantnameFromFilename( document.styleSheets[n].href ) ){
+			var s = document.styleSheets[n];
+			for( var m = 0; m < s.rules.length; ++m ){
+				if( s.rules[m].selectorText == ':root' ){
+					style = s.rules[m].style;
+					break;
+				}
+			}
+			break;
+			}
+		}
+		if( !style ){
+			alert( 'Theme stylesheet for variant "' + variant + '" not set or found' );
+			return;
+		}
+
+		var e = this.findColor( c );
+		var p = this.normalizeColor( style.getPropertyValue( '--'+c ) ).replace( '--INTERNAL-', '--' );
+		var f = this.getColorValue( e.fallback );
+
+		var v = this.getColorValue( e.name );
+		if( v == f || v == this.normalizeColor(e.default) ){
+			v = '';
+		}
+		if( p ){
+			v = p;
+		}
+
+		var t = c + '\n\n' + e.tooltip + '\n';
+		if( e.fallback ){
+			t += '\nInherits value "' + f + '" from ' + e.fallback + ' if not set\n';
+		}
+		if( e.default ){
+			t += '\nDefaults to value "' + this.normalizeColor(e.default) + '" if not set\n';
+		}
+
+		var n = prompt( t, v );
+		if( n ){
+			n = this.normalizeColor( n ).replace( '--INTERNAL-', '--' ).replace( '--', '--INTERNAL-' );
+			style.setProperty( '--'+c, n );
+		}
+		else if( n !== null){
+			style.removeProperty( '--'+c );
+		}
+	},
+
+	findColor: function( name ){
+		var f = this.variantvariables.find( function( x ){
+			return x.name == name;
+		});
+		return f;
+	},
+
+	generateColorVariable: function( e ){
+		var v = '';
+		var gen = true;
+		if( e.fallback ){
+			f = this.findColor( e.fallback );
+			gen = this.getColorValue(f.name) != this.getColorValue(e.name);
+		}
+		else if( e.default ){
+			gen = this.normalizeColor(e.default) != this.getColorValue(e.name);
+		}
+		if( gen ){
+			v += '  --' + e.name + ': ' + this.getColorValue(e.name) + '; /* ' + e.tooltip + ' */\n';
+		}
+		return v;
+	},
+
+	generateStylesheet: function(){
+		var style =
+			'/* ' + this.customvariant + ' */\n' +
+			':root {\n' +
+			this.variantvariables.sort( function( l, r ){ return l.name.localeCompare(r.name); } ).reduce( function( a, e ){ return a + this.generateColorVariable( e ); }.bind( this ), '' ) +
+			'}\n';
+		return style;
+	},
+
+	styleGraphGroup: function( selector, colorvar ){
+		this.adjustCSSRules( '#body svg '+selector+' > rect', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
+		this.adjustCSSRules( '#body svg '+selector+' > .label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
+		this.adjustCSSRules( '#body svg '+selector+' > .cluster-label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
+		this.adjustCSSRules( '#body svg '+selector+' .nodeLabel', 'filter: grayscale(1) invert(1) contrast(10000);' );
+	},
+
+	styleGraph: function(){
+		this.variantvariables.forEach( function( e ){
+			this.styleGraphGroup( '.'+e.name, e.name );
+		}.bind( this ) );
+		this.styleGraphGroup( '#maincontent', 'MAIN-BG-color' )
+		this.styleGraphGroup( '#mainheadings', 'MAIN-BG-color' )
+		this.styleGraphGroup( '#inlinecode', 'CODE-INLINE-BG-color' )
+		this.styleGraphGroup( '#blockcode', 'CODE-BLOCK-BG-color' )
+		this.styleGraphGroup( '#coloredboxes', 'BOX-BG-color' );
+		this.styleGraphGroup( '#menu', 'MENU-SECTIONS-BG-color' )
+		this.styleGraphGroup( '#menuheader', 'MENU-HEADER-BG-color' )
+		this.styleGraphGroup( '#menusections', 'MENU-SECTIONS-ACTIVE-BG-color' )
+	},
+
+	generateGraphEdge: function( e ){
+		var edge = '';
+		if( e.fallback ){
+			edge += e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name;
+		}
+		else{
+			edge += e.name+':::'+e.name;
+		}
+		return edge;
+	},
+
+	generateGraph: function(){
+		var g_groups = {};
+		var g_handler = '';
+
+		this.variantvariables.forEach( function( e ){
+			var group = e.group || ' ';
+			g_groups[ group ] = ( g_groups[ group ] || [] ).concat( e );
+			g_handler += '  click '+e.name+' variants.changeColor\n';
+		});
+
+		var graph =
+			'flowchart LR\n' +
+			'  subgraph menu["menu"]\n' +
+			'    direction TB\n' +
+			'    subgraph menuheader["header"]\n' +
+			'      direction LR\n' +
+					g_groups[ 'header' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    end\n' +
+			'    subgraph menusections["sections"]\n' +
+			'      direction LR\n' +
+					g_groups[ 'sections' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    end\n' +
+			'  end\n' +
+			'  subgraph maincontent["content"]\n' +
+			'    direction TB\n' +
+					g_groups[ 'content' ].reduce( function( a, e ){ return a + '    ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    subgraph mainheadings["headings"]\n' +
+			'      direction LR\n' +
+					g_groups[ 'headings' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    end\n' +
+			'    subgraph inlinecode["inline code"]\n' +
+			'      direction LR\n' +
+					g_groups[ 'inline code' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    end\n' +
+			'    subgraph blockcode["code blocks"]\n' +
+			'      direction LR\n' +
+					g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    end\n' +
+			'    subgraph coloredboxes["colored boxes"]\n' +
+			'      direction LR\n' +
+					g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    end\n' +
+			'  end\n' +
+			g_handler;
+
+		console.log( graph );
+		return graph;
+	},
+
+	variantvariables: [
+		{ name: 'MAIN-TEXT-color',                       group: 'content',        default: '#101010',                     tooltip: 'text color of content and h1 titles', },
+		{ name: 'MAIN-LINK-color',                       group: 'content',        default: '#486ac9',                     tooltip: 'link color of content', },
+		{ name: 'MAIN-LINK-HOVER-color',                 group: 'content',       fallback: 'MAIN-LINK-color',             tooltip: 'hoverd link color of content', },
+		{ name: 'MAIN-ANCHOR-color',                     group: 'content',       fallback: 'MAIN-LINK-HOVER-color',       tooltip: 'anchor color of titles', },
+		{ name: 'MAIN-BG-color',                         group: 'content',        default: '#ffffff',                     tooltip: 'background color of content', },
+		{ name: 'TAG-BG-color',                          group: 'content',       fallback: 'MENU-HEADER-BG-color',        tooltip: 'tag color', },
+
+		{ name: 'MAIN-TITLES-TEXT-color',                group: 'headings',       default: '#444753',                     tooltip: 'text color of h2-h6 titles and transparent box titles', },
+		{ name: 'MAIN-TITLES-H1-color',                  group: 'headings',      fallback: 'MAIN-TEXT-color',             tooltip: 'text color of h1 titles', },
+		{ name: 'MAIN-TITLES-H2-color',                  group: 'headings',      fallback: 'MAIN-TITLES-TEXT-color',      tooltip: 'text color of h2-h6 titles', },
+		{ name: 'MAIN-TITLES-H3-color',                  group: 'headings',      fallback: 'MAIN-TITLES-H2-color',        tooltip: 'text color of h3-h6 titles', },
+		{ name: 'MAIN-TITLES-H4-color',                  group: 'headings',      fallback: 'MAIN-TITLES-H3-color',        tooltip: 'text color of h4-h6 titles', },
+		{ name: 'MAIN-TITLES-H5-color',                  group: 'headings',      fallback: 'MAIN-TITLES-H4-color',        tooltip: 'text color of h5-h6 titles', },
+		{ name: 'MAIN-TITLES-H6-color',                  group: 'headings',      fallback: 'MAIN-TITLES-H5-color',        tooltip: 'text color of h6 titles', },
+
+		{ name: 'CODE-BLOCK-color',                      group: 'code blocks',    default: '#000000',                     tooltip: 'fallback text color of block code; should be adjusted to your selected chroma style', },
+		{ name: 'CODE-BLOCK-BG-color',                   group: 'code blocks',    default: '#f8f8f8',                     tooltip: 'fallback background color of block code; should be adjusted to your selected chroma style', },
+		{ name: 'CODE-BLOCK-BORDER-color',               group: 'code blocks',   fallback: 'CODE-BLOCK-BG-color',         tooltip: 'border color of block code', },
+
+		{ name: 'CODE-INLINE-color',                     group: 'inline code',    default: '#5e5e5e',                     tooltip: 'text color of inline code', },
+		{ name: 'CODE-INLINE-BG-color',                  group: 'inline code',    default: '#fffae9',                     tooltip: 'background color of inline code', },
+		{ name: 'CODE-INLINE-BORDER-color',              group: 'inline code',   fallback: 'CODE-INLINE-BG-color',        tooltip: 'border color of inline code', },
+
+		{ name: 'MENU-HEADER-BG-color',                  group: 'header',         default: '#7dc903',                     tooltip: 'background color of menu header', },
+		{ name: 'MENU-HEADER-BORDER-color',              group: 'header',        fallback: 'MENU-HEADER-BG-color',        tooltip: 'separator color of menu header', },
+		{ name: 'MENU-HOME-LINK-color',                  group: 'header',         default: '#323232',                     tooltip: 'home button color if configured', },
+		{ name: 'MENU-HOME-LINK-HOVER-color',            group: 'header',         default: '#808080',                     tooltip: 'hoverd home button color if configured', },
+		{ name: 'MENU-SEARCH-color',                     group: 'header',         default: '#e0e0e0',                     tooltip: 'text and icon color of search box', },
+		{ name: 'MENU-SEARCH-BG-color',                  group: 'header',         default: '#323232',                     tooltip: 'background color of search box', },
+		{ name: 'MENU-SEARCH-BOX-color',                 group: 'header',        fallback: 'MENU-SEARCH-BG-color',        tooltip: 'border color of search box', },
+
+		{ name: 'MENU-SECTIONS-BG-color',                group: 'sections',       default: '#282828',                     tooltip: 'background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc.', },
+		{ name: 'MENU-SECTIONS-ACTIVE-BG-color',         group: 'sections',       default: 'rgba( 0, 0, 0, .166 )',       tooltip: 'background color of the active menu section', },
+		{ name: 'MENU-SECTION-ACTIVE-CATEGORY-color',    group: 'sections',       default: '#444444',                     tooltip: 'text color of the displayed menu topic', },
+		{ name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections',      fallback: 'MAIN-BG-color',               tooltip: 'background color of the displayed menu topic', },
+		{ name: 'MENU-SECTIONS-LINK-color',              group: 'sections',       default: '#bababa',                     tooltip: 'link color of menu topics', },
+		{ name: 'MENU-SECTIONS-LINK-HOVER-color',        group: 'sections',      fallback: 'MENU-SECTIONS-LINK-color',    tooltip: 'hoverd link color of menu topics', },
+		{ name: 'MENU-VISITED-color',                    group: 'sections',       default: '#506397',                     tooltip: 'icon color of visited menu topics if configured', },
+		{ name: 'MENU-SECTION-HR-color',                 group: 'sections',       default: '#606060',                     tooltip: 'separator color of menu footer', },
+
+		{ name: 'BOX-CAPTION-color',                     group: 'colored boxes',  default: 'rgba( 255, 255, 255, 1 )',    tooltip: 'text color of colored box titles', },
+		{ name: 'BOX-BG-color',                          group: 'colored boxes',  default: 'rgba( 255, 255, 255, .833 )', tooltip: 'background color of colored boxes', },
+		{ name: 'BOX-TEXT-color',                        group: 'colored boxes',  default: 'rgba( 16, 16, 16, 1 )',       tooltip: 'text color of colored box content', },
+
+		{ name: 'BOX-BLUE-color',                        group: 'colored boxes',  default: 'rgba( 48, 117, 229, 1 )',     tooltip: 'background color of blue boxes', },
+		{ name: 'BOX-INFO-color',                        group: 'colored boxes', fallback: 'BOX-BLUE-color',              tooltip: 'background color of info boxes', },
+		{ name: 'BOX-BLUE-TEXT-color',                   group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of blue boxes', },
+		{ name: 'BOX-INFO-TEXT-color',                   group: 'colored boxes', fallback: 'BOX-BLUE-TEXT-color',         tooltip: 'text color of info boxes', },
+
+		{ name: 'BOX-GREEN-color',                       group: 'colored boxes',  default: 'rgba( 42, 178, 24, 1 )',      tooltip: 'background color of green boxes', },
+		{ name: 'BOX-TIP-color',                         group: 'colored boxes', fallback: 'BOX-GREEN-color',             tooltip: 'background color of tip boxes', },
+		{ name: 'BOX-GREEN-TEXT-color',                  group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of green boxes', },
+		{ name: 'BOX-TIP-TEXT-color',                    group: 'colored boxes', fallback: 'BOX-GREEN-TEXT-color',        tooltip: 'text color of tip boxes', },
+
+		{ name: 'BOX-GREY-color',                        group: 'colored boxes',  default: 'rgba( 128, 128, 128, 1 )',    tooltip: 'background color of grey boxes', },
+		{ name: 'BOX-NEUTRAL-color',                     group: 'colored boxes', fallback: 'BOX-GREY-color',              tooltip: 'background color of neutral boxes', },
+		{ name: 'BOX-GREY-TEXT-color',                   group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of grey boxes', },
+		{ name: 'BOX-NEUTRAL-TEXT-color',                group: 'colored boxes', fallback: 'BOX-GREY-TEXT-color',         tooltip: 'text color of neutral boxes', },
+
+		{ name: 'BOX-ORANGE-color',                      group: 'colored boxes',  default: 'rgba( 237, 153, 9, 1 )',      tooltip: 'background color of orange boxes', },
+		{ name: 'BOX-NOTE-color',                        group: 'colored boxes', fallback: 'BOX-ORANGE-color',            tooltip: 'background color of note boxes', },
+		{ name: 'BOX-ORANGE-TEXT-color',                 group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of orange boxes', },
+		{ name: 'BOX-NOTE-TEXT-color',                   group: 'colored boxes', fallback: 'BOX-ORANGE-TEXT-color',       tooltip: 'text color of note boxes', },
+
+		{ name: 'BOX-RED-color',                         group: 'colored boxes',  default: 'rgba( 224, 62, 62, 1 )',      tooltip: 'background color of red boxes', },
+		{ name: 'BOX-WARNING-color',                     group: 'colored boxes', fallback: 'BOX-RED-color',               tooltip: 'background color of warning boxes', },
+		{ name: 'BOX-RED-TEXT-color',                    group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of red boxes', },
+		{ name: 'BOX-WARNING-TEXT-color',                group: 'colored boxes', fallback: 'BOX-RED-TEXT-color',          tooltip: 'text color of warning boxes', },
+		],
+};