hugo-theme-relearn/static/js/variant.js

window.relearn = window.relearn || {};

// 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

function ready(fn) {
  if (document.readyState == 'complete') {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

var variants = {
  variant: '',
  variants: [],
  customvariantname: 'my-custom-variant',
  isstylesheetloaded: true,

  init: function (variants) {
    this.variants = variants;
    var variant = window.localStorage.getItem(window.relearn.absBaseUri + '/variant') || (this.variants.length ? this.variants[0] : '');
    this.changeVariant(variant);
    document.addEventListener(
      'readystatechange',
      function () {
        if (document.readyState == 'interactive') {
          this.markSelectedVariant();
        }
      }.bind(this)
    );
  },

  getVariant: function () {
    return this.variant;
  },

  setVariant: function (variant) {
    this.variant = variant;
    window.localStorage.setItem(window.relearn.absBaseUri + '/variant', variant);
  },

  isVariantLoaded: function () {
    return window.theme && this.isstylesheetloaded;
  },

  markSelectedVariant: function () {
    var variant = this.getVariant();
    var select = document.querySelector('#R-select-variant');
    if (!select) {
      return;
    }
    this.addCustomVariantOption();
    if (variant && select.value != variant) {
      select.value = variant;
    }
    var interval_id = setInterval(
      function () {
        if (this.isVariantLoaded()) {
          clearInterval(interval_id);
          updateTheme({ variant: variant });
        }
      }.bind(this),
      25
    );
    // 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();
    }
  },

  generateVariantPath: function (variant, old_path) {
    var new_path = old_path.replace(new RegExp(`^(.*\/theme-).*?(\.css.*)$`), '$1' + variant + '$2');
    return new_path;
  },

  addCustomVariantOption: function () {
    var variantbase = window.localStorage.getItem(window.relearn.absBaseUri + '/customvariantbase');
    if (this.variants.indexOf(variantbase) < 0) {
      variantbase = '';
    }
    if (!window.localStorage.getItem(window.relearn.absBaseUri + '/customvariant')) {
      variantbase = '';
    }
    if (!variantbase) {
      return;
    }
    var select = document.querySelector('#R-select-variant');
    if (!select) {
      return;
    }
    var option = document.querySelector('#' + this.customvariantname);
    if (!option) {
      option = document.createElement('option');
      option.id = this.customvariantname;
      option.value = this.customvariantname;
      option.text = this.customvariantname.replace(/-/g, ' ').replace(/\w\S*/g, function (w) {
        return w.replace(/^\w/g, function (c) {
          return c.toUpperCase();
        });
      });
      select.appendChild(option);
      document.querySelectorAll('.footerVariantSwitch').forEach(function (e) {
        e.classList.add('showVariantSwitch');
      });
    }
  },

  removeCustomVariantOption: function () {
    var option = document.querySelector('#' + this.customvariantname);
    if (option) {
      option.remove();
    }
    if (this.variants.length <= 1) {
      document.querySelectorAll('.footerVariantSwitch').forEach(function (e) {
        e.classList.remove('showVariantSwitch');
      });
    }
  },

  saveCustomVariant: function () {
    if (this.getVariant() != this.customvariantname) {
      window.localStorage.setItem(window.relearn.absBaseUri + '/customvariantbase', this.getVariant());
    }
    window.localStorage.setItem(window.relearn.absBaseUri + '/customvariant', this.generateStylesheet());
    this.setVariant(this.customvariantname);
    this.markSelectedVariant();
  },

  loadCustomVariant: function () {
    var stylesheet = window.localStorage.getItem(window.relearn.absBaseUri + '/customvariant');

    // temp styles to document
    var head = document.querySelector('head');
    var style = document.createElement('style');
    style.id = 'R-custom-variant-style';
    style.appendChild(document.createTextNode(stylesheet));
    head.appendChild(style);

    var interval_id = setInterval(
      function () {
        if (this.findLoadedStylesheet('R-variant-style')) {
          clearInterval(interval_id);
          // save the styles to the current variant stylesheet
          this.variantvariables.forEach(
            function (e) {
              this.changeColor(e.name, true);
            }.bind(this)
          );

          // remove temp styles
          style.remove();

          this.saveCustomVariant();
        }
      }.bind(this),
      25
    );
  },

  resetVariant: function () {
    var variantbase = window.localStorage.getItem(window.relearn.absBaseUri + '/customvariantbase');
    if (variantbase && confirm('You have made changes to your custom variant. Are you sure you want to reset all changes?')) {
      window.localStorage.removeItem(window.relearn.absBaseUri + '/customvariantbase');
      window.localStorage.removeItem(window.relearn.absBaseUri + '/customvariant');
      this.removeCustomVariantOption();
      if (this.getVariant() == this.customvariantname) {
        this.changeVariant(variantbase);
      }
    }
  },

  onLoadStylesheet: function () {
    variants.isstylesheetloaded = true;
  },

  switchStylesheet: function (variant, without_check) {
    var link = document.querySelector('#R-variant-style');
    if (!link) {
      return;
    }
    var old_path = link.getAttribute('href');
    var new_path = this.generateVariantPath(variant, old_path);
    this.isstylesheetloaded = false;

    // Chrome needs a new element to trigger the load callback again
    var new_link = document.createElement('link');
    new_link.id = 'R-variant-style';
    new_link.rel = 'stylesheet';
    new_link.onload = this.onLoadStylesheet;
    new_link.setAttribute('href', new_path);
    link.parentNode.replaceChild(new_link, link);
  },

  changeVariant: function (variant) {
    if (variant == this.customvariantname) {
      var variantbase = window.localStorage.getItem(window.relearn.absBaseUri + '/customvariantbase');
      if (this.variants.indexOf(variantbase) < 0) {
        variant = '';
      }
      if (!window.localStorage.getItem(window.relearn.absBaseUri + '/customvariant')) {
        variant = '';
      }
      this.setVariant(variant);
      if (!variant) {
        return;
      }
      this.switchStylesheet(variantbase);
      this.loadCustomVariant();
    } else {
      if (this.variants.indexOf(variant) < 0) {
        variant = this.variants.length ? this.variants[0] : '';
      }
      this.setVariant(variant);
      if (!variant) {
        return;
      }
      this.switchStylesheet(variant);
      this.markSelectedVariant();
    }
  },

  generator: function (vargenerator) {
    var graphDefinition = this.generateGraph();
    var graphs = document.querySelectorAll(vargenerator);
    graphs.forEach(function (e) {
      e.innerHTML = graphDefinition;
    });

    var interval_id = setInterval(
      function () {
        if (document.querySelectorAll(vargenerator + ' .mermaid > svg').length) {
          clearInterval(interval_id);
          this.styleGraph();
        }
      }.bind(this),
      25
    );
  },

  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 () {
    var style = this.generateStylesheet();
    if (!style) {
      alert('There is nothing to be generated as auto mode variants will be generated by Hugo');
      return;
    }
    this.download(style, 'text/css', 'theme-' + this.customvariantname + '.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*/g, '( ');
    c = c.replace(/\s*\)\s*/g, ' )');
    c = c.replace(/\s*,\s*/g, ', ');
    c = c.replace(/0*\./g, '.');
    c = c.replace(/ +/g, ' ');
    return c;
  },

  getColorValue: function (c) {
    return this.normalizeColor(getComputedStyle(document.documentElement).getPropertyValue('--INTERNAL-' + c));
  },

  getColorProperty: function (c, read_style) {
    var e = this.findColor(c);
    var p = this.normalizeColor(read_style.getPropertyValue('--' + c)).replace('--INTERNAL-', '--');
    return p;
  },

  findLoadedStylesheet: function (id) {
    for (var n = 0; n < document.styleSheets.length; ++n) {
      if (document.styleSheets[n].ownerNode.id == id) {
        var s = document.styleSheets[n];
        if (s.rules && s.rules.length) {
          for (var m = 0; m < s.rules.length; ++m) {
            if (s.rules[m].selectorText == ':root') {
              return s.rules[m].style;
            }
            if (s.rules[m].cssRules && s.rules[m].cssRules.length) {
              for (var o = 0; o < s.rules[m].cssRules.length; ++o) {
                if (s.rules[m].cssRules[o].selectorText == ':root') {
                  return s.rules[m].cssRules[o].style;
                }
              }
            }
          }
        }
        break;
      }
    }
    return null;
  },

  changeColor: function (c, without_prompt) {
    var with_prompt = !(without_prompt || false);

    var read_style = this.findLoadedStylesheet('R-custom-variant-style');
    var write_style = this.findLoadedStylesheet('R-variant-style');
    if (!read_style) {
      read_style = write_style;
    }
    if (!read_style) {
      if (with_prompt) {
        alert('An auto mode variant can not be changed. Please select its light/dark variant directly to make changes');
      }
      return;
    }

    var e = this.findColor(c);
    var v = this.getColorProperty(c, read_style);
    var n = '';
    if (!with_prompt) {
      n = v;
    } else {
      var t = c + '\n\n' + e.tooltip + '\n';
      if (e.fallback) {
        t += '\nInherits value "' + this.getColorValue(e.fallback) + '" from ' + e.fallback + ' if not set\n';
      } else if (e.default) {
        t += '\nDefaults to value "' + this.normalizeColor(e.default) + '" if not set\n';
      }
      n = prompt(t, v);
      if (n === null) {
        // user canceld operation
        return;
      }
    }

    if (n) {
      // value set to specific value
      n = this.normalizeColor(n).replace('--INTERNAL-', '--').replace('--', '--INTERNAL-');
      if (!with_prompt || n != v) {
        write_style.setProperty('--' + c, n);
      }
    } else {
      // value emptied, so delete it
      write_style.removeProperty('--' + c);
    }

    if (with_prompt) {
      this.saveCustomVariant();
    }
  },

  findColor: function (name) {
    var f = this.variantvariables.find(function (x) {
      return x.name == name;
    });
    return f;
  },

  generateColorVariable: function (e, read_style) {
    var v = '';
    var gen = this.getColorProperty(e.name, read_style);
    if (gen) {
      v += '  --' + e.name + ': ' + gen + '; /* ' + e.tooltip + ' */\n';
    }
    return v;
  },

  generateStylesheet: function () {
    var read_style = this.findLoadedStylesheet('R-custom-variant-style');
    var write_style = this.findLoadedStylesheet('R-variant-style');
    if (!read_style) {
      read_style = write_style;
    }
    if (!read_style) {
      return;
    }

    var style =
      '/* ' +
      this.customvariantname +
      ' */\n' +
      ':root {\n' +
      this.variantvariables.reduce(
        function (a, e) {
          return a + this.generateColorVariable(e, read_style);
        }.bind(this),
        ''
      ) +
      '}\n';
    console.log(style);
    return style;
  },

  styleGraphGroup: function (selector, colorvar) {
    this.adjustCSSRules('#R-body svg ' + selector + ' > rect', 'color: var(--INTERNAL-' + colorvar + '); fill: var(--INTERNAL-' + colorvar + '); stroke: #80808080;');
    this.adjustCSSRules('#R-body svg ' + selector + ' > .label .nodeLabel', 'color: var(--INTERNAL-' + colorvar + '); fill: var(--INTERNAL-' + colorvar + '); stroke: #80808080;');
    this.adjustCSSRules('#R-body svg ' + selector + ' > .cluster-label .nodeLabel', 'color: var(--INTERNAL-' + colorvar + '); fill: var(--INTERNAL-' + colorvar + '); stroke: #80808080;');
    this.adjustCSSRules('#R-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('#code', 'CODE-BLOCK-BG-color');
    this.styleGraphGroup('#inlinecode', 'CODE-INLINE-BG-color');
    this.styleGraphGroup('#blockcode', 'CODE-BLOCK-BG-color');
    this.styleGraphGroup('#thirdparty', 'MAIN-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');
  },

  generateGraphGroupedEdge: function (e) {
    var edge = '';
    if (e.fallback && e.group == this.findColor(e.fallback).group) {
      edge += e.fallback + ':::' + e.fallback + ' --> ' + e.name + ':::' + e.name;
    } else {
      edge += e.name + ':::' + e.name;
    }
    return edge;
  },

  generateGraphVarGroupedEdge: function (e) {
    var edge = '';
    if (e.fallback && e.group != this.findColor(e.fallback).group) {
      edge += '  ' + e.fallback + ':::' + e.fallback + ' --> ' + e.name + ':::' + e.name + '\n';
    }
    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.generateGraphGroupedEdge(e) + '\n';
        }.bind(this),
        ''
      ) +
      '    end\n' +
      '    subgraph menusections["sections"]\n' +
      '      direction LR\n' +
      g_groups['sections'].reduce(
        function (a, e) {
          return a + '      ' + this.generateGraphGroupedEdge(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.generateGraphGroupedEdge(e) + '\n';
        }.bind(this),
        ''
      ) +
      '    subgraph mainheadings["headings"]\n' +
      '      direction LR\n' +
      g_groups['headings'].reduce(
        function (a, e) {
          return a + '      ' + this.generateGraphGroupedEdge(e) + '\n';
        }.bind(this),
        ''
      ) +
      '    end\n' +
      '    subgraph code["code"]\n' +
      '      direction TB\n' +
      g_groups['code'].reduce(
        function (a, e) {
          return a + '    ' + this.generateGraphGroupedEdge(e) + '\n';
        }.bind(this),
        ''
      ) +
      '      subgraph inlinecode["inline code"]\n' +
      '        direction LR\n' +
      g_groups['inline code'].reduce(
        function (a, e) {
          return a + '      ' + this.generateGraphGroupedEdge(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.generateGraphGroupedEdge(e) + '\n';
        }.bind(this),
        ''
      ) +
      '      end\n' +
      '    end\n' +
      '    subgraph thirdparty["3rd party"]\n' +
      '      direction LR\n' +
      g_groups['3rd party'].reduce(
        function (a, e) {
          return a + '      ' + this.generateGraphGroupedEdge(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.generateGraphGroupedEdge(e) + '\n';
        }.bind(this),
        ''
      ) +
      '    end\n' +
      '  end\n' +
      this.variantvariables.reduce(
        function (a, e) {
          return a + this.generateGraphVarGroupedEdge(e);
        }.bind(this),
        ''
      ) +
      g_handler;

    console.log(graph);
    return graph;
  },

  variantvariables: [
    { name: 'PRIMARY-color', group: 'content', fallback: 'MENU-HEADER-BG-color', tooltip: 'brand primary color' },
    { name: 'SECONDARY-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'brand secondary color' },
    { name: 'ACCENT-color', group: 'content', default: '#ffff00', tooltip: 'brand accent color, used for search highlights' },

    { name: 'MAIN-TOPBAR-BORDER-color', group: 'content', default: 'transparent', tooltip: 'border color between topbar and content' },
    { name: 'MAIN-LINK-color', group: 'content', fallback: 'SECONDARY-color', tooltip: 'link color of content' },
    { name: 'MAIN-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'hoverd link color of content' },
    { name: 'MAIN-BG-color', group: 'content', default: '#ffffff', tooltip: 'background color of content' },
    { name: 'TAG-BG-color', group: 'content', fallback: 'PRIMARY-color', tooltip: 'tag color' },

    { name: 'MAIN-TEXT-color', group: 'content', default: '#101010', tooltip: 'text color of content and h1 titles' },

    { name: 'MAIN-TITLES-TEXT-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h2-h6 titles and transparent box titles' },
    { name: 'MAIN-TITLES-H1-TEXT-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h1 titles' },
    { name: 'MAIN-TITLES-H2-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-TEXT-color', tooltip: 'text color of h2-h6 titles' },
    { name: 'MAIN-TITLES-H3-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H2-TEXT-color', tooltip: 'text color of h3-h6 titles' },
    { name: 'MAIN-TITLES-H4-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H3-TEXT-color', tooltip: 'text color of h4-h6 titles' },
    { name: 'MAIN-TITLES-H5-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H4-TEXT-color', tooltip: 'text color of h5-h6 titles' },
    { name: 'MAIN-TITLES-H6-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H5-TEXT-color', tooltip: 'text color of h6 titles' },

    { name: 'MAIN-font', group: 'content', default: '"Roboto Flex", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif', tooltip: 'text font of content and h1 titles' },

    { name: 'MAIN-TITLES-font', group: 'headings', fallback: 'MAIN-font', tooltip: 'text font of h2-h6 titles and transparent box titles' },
    { name: 'MAIN-TITLES-H1-font', group: 'headings', fallback: 'MAIN-font', tooltip: 'text font of h1 titles' },
    { name: 'MAIN-TITLES-H2-font', group: 'headings', fallback: 'MAIN-TITLES-font', tooltip: 'text font of h2-h6 titles' },
    { name: 'MAIN-TITLES-H3-font', group: 'headings', fallback: 'MAIN-TITLES-H2-font', tooltip: 'text font of h3-h6 titles' },
    { name: 'MAIN-TITLES-H4-font', group: 'headings', fallback: 'MAIN-TITLES-H3-font', tooltip: 'text font of h4-h6 titles' },
    { name: 'MAIN-TITLES-H5-font', group: 'headings', fallback: 'MAIN-TITLES-H4-font', tooltip: 'text font of h5-h6 titles' },
    { name: 'MAIN-TITLES-H6-font', group: 'headings', fallback: 'MAIN-TITLES-H5-font', tooltip: 'text font of h6 titles' },

    { name: 'CODE-theme', group: 'code', default: 'relearn-light', tooltip: 'name of the chroma stylesheet file' },
    { name: 'CODE-font', group: 'code', default: '"Consolas", menlo, monospace', tooltip: 'text font of code' },
    { 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', default: '#fbf0cb', tooltip: 'border color of inline code' },

    { name: 'BROWSER-theme', group: '3rd party', default: 'light', tooltip: 'name of the theme for browser scrollbars of the main section' },
    { name: 'MERMAID-theme', group: '3rd party', default: 'default', tooltip: 'name of the default Mermaid theme for this variant, can be overridden in hugo.toml' },
    { name: 'OPENAPI-theme', group: '3rd party', default: 'light', tooltip: 'name of the default OpenAPI theme for this variant, can be overridden in hugo.toml' },
    { name: 'OPENAPI-CODE-theme', group: '3rd party', default: 'obsidian', tooltip: 'name of the default OpenAPI code theme for this variant, can be overridden in hugo.toml' },

    { name: 'MENU-BORDER-color', group: 'header', default: 'transparent', tooltip: 'border color between menu and content' },
    { name: 'MENU-TOPBAR-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'border color of vertical line between menu and topbar' },
    { name: 'MENU-TOPBAR-SEPARATOR-color', group: 'header', default: 'transparent', tooltip: 'separator color of vertical line between menu and topbar' },
    { name: 'MENU-HEADER-BG-color', group: 'header', fallback: 'PRIMARY-color', tooltip: 'background color of menu header' },
    { name: 'MENU-HEADER-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'border color between menu header and menu' },
    { name: 'MENU-HEADER-SEPARATOR-color', group: 'header', fallback: 'MENU-HEADER-BORDER-color', tooltip: 'separator color between menu header and menu' },
    { 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-BORDER-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-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-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-SECTION-ACTIVE-CATEGORY-BORDER-color', group: 'sections', default: 'transparent', tooltip: 'border color between the displayed menu topic and the content' },
    { name: 'MENU-SECTION-SEPARATOR-color', group: 'sections', default: '#606060', tooltip: 'separator color between menu sections and menu footer' },
    { name: 'MENU-VISITED-color', group: 'sections', fallback: 'SECONDARY-color', tooltip: 'icon color of visited menu topics if configured' },

    { 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', fallback: 'MAIN-TEXT-color', 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-CYAN-color', group: 'colored boxes', default: 'rgba( 45, 190, 200, 1 )', tooltip: 'background color of cyan boxes' },
    { name: 'BOX-IMPORTANT-color', group: 'colored boxes', fallback: 'BOX-CYAN-color', tooltip: 'background color of info boxes' },
    { name: 'BOX-CYAN-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of cyan boxes' },
    { name: 'BOX-IMPORTANT-TEXT-color', group: 'colored boxes', fallback: 'BOX-CYAN-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-MAGENTA-color', group: 'colored boxes', default: 'rgba( 229, 50, 210, 1 )', tooltip: 'background color of magenta boxes' },
    { name: 'BOX-CAUTION-color', group: 'colored boxes', fallback: 'BOX-MAGENTA-color', tooltip: 'background color of info boxes' },
    { name: 'BOX-MAGENTA-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color', tooltip: 'text color of magenta boxes' },
    { name: 'BOX-CAUTION-TEXT-color', group: 'colored boxes', fallback: 'BOX-MAGENTA-TEXT-color', tooltip: 'text color of info 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' },
  ],
};