From 0e512c3c76aa3a078b6a989575f4e8ee26f1e66f Mon Sep 17 00:00:00 2001
From: Andi Dittrich <andi@andidittrich.de>
Date: Sun, 19 Apr 2020 22:31:45 +0200
Subject: [PATCH] option to set the token base styles #6

---
 CHANGES.md                         |  4 ++
 dist/enlighterjs.customizer.min.js |  4 +-
 package.json                       |  2 +-
 src/customizer/selectors.js        |  4 +-
 src/ui/views/token-generic.jsx     | 15 +++++
 src/ui/views/tokens.jsx            | 93 ------------------------------
 6 files changed, 25 insertions(+), 97 deletions(-)
 delete mode 100644 src/ui/views/tokens.jsx

diff --git a/CHANGES.md b/CHANGES.md
index f59c86c..eac259c 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,5 +1,9 @@
 ## Branch 2.X ##
 
+### 2.2.0 ###
+
+* Added: option to set the token base styles inlcuding font-size - feature requested [on GitHub](https://github.com/EnlighterJS/Plugin.ThemeCustomizer/issues/6)
+
 ### 2.1.0 ###
 
 * Added: `wp-skltn` component wrapper around the settings elements
diff --git a/dist/enlighterjs.customizer.min.js b/dist/enlighterjs.customizer.min.js
index 9a65d5e..2968baa 100644
--- a/dist/enlighterjs.customizer.min.js
+++ b/dist/enlighterjs.customizer.min.js
@@ -1,2 +1,2 @@
-/*! EnlighterJS Theme Customizer 2.1.0 | Mozilla Public License 2.0 | https://enlighterjs.org */
-var EnlighterJS_Customizer=function(e){"use strict";var t={document:document,window:window};function h(){return document}function n(){return window}function l(e){return null!=e&&0<e.length?h().querySelector(e):null}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function s(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&u(e,t)}function a(e){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function c(){if("undefined"!=typeof Reflect&&Reflect.construct&&!Reflect.construct.sham){if("function"==typeof Proxy)return 1;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),1}catch(e){return}}}function p(e,t,n){return(p=c()?Reflect.construct:function(e,t,n){var r=[null];r.push.apply(r,t);var i=new(Function.bind.apply(e,r));return n&&u(i,n.prototype),i}).apply(null,arguments)}function f(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function d(r){return function(){var e,t=a(r);if(c()){var n=a(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return f(this,e)}}function m(e){return function(e){if(Array.isArray(e))return y(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||v(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,t){if(e){if("string"==typeof e)return y(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?y(e,t):void 0}}function y(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function g(e){if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(e=v(e))){var t=0,n=function(){};return{s:n,n:function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}},e:function(e){throw e},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var r,i,l=!0,o=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return l=e.done,e},e:function(e){o=!0,i=e},f:function(){try{l||null==r.return||r.return()}finally{if(o)throw i}}}}function b(e,t,n){var r=h(),i=r.createElement(e);if(0<n.length)for(var l=0;l<n.length;l++){var o=n[l];if(null!==o&&!1!==o)if(void 0!==o)if(o.push)for(var s=0;s<o.length;s++){var a=o[s];null!==a&&!1!==a&&(void 0!==a?a.appendChild?i.appendChild(a):i.appendChild(r.createTextNode(a)):i.appendChild(r.createTextNode("#INVALID_ELEMENT#")))}else o.appendChild?i.appendChild(o):i.appendChild(r.createTextNode(o));else i.appendChild(r.createTextNode("#INVALID_ELEMENT#"))}function u(e,t){i.addEventListener(e,function(e){e.preventDefault(),e.stopPropagation(),t&&t.apply(i,[e,i])})}for(var c in t)if(Object.prototype.hasOwnProperty.call(t,c)){var p=t[c];if("on"===c.substr(0,2)){if(null===p)continue;u(c.substr(2).toLowerCase(),p)}else{if(null==p)continue;switch(c){case"className":i.setAttribute("class",p);break;case"htmlFor":i.setAttribute("for",p);break;default:i.setAttribute(c,p)}}}return i.on=u,i}function C(e,t){for(var n=arguments.length,r=new Array(2<n?n-2:0),i=2;i<n;i++)r[i-2]=arguments[i];if("function"!=typeof e)return b(e,t,r);var l=p(e,[t||{}].concat(r));return"function"==typeof l.render?l.render():l instanceof HTMLElement?l:void h().createTextNode("#INVALID_JSX_ELEMENT#")}function E(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:null;return null!==t&&t.appendChild(e),e}var k=Object.freeze({__proto__:null,globals:t,getDocument:h,getWindow:n,displayElement:function(e){var t=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];e.style.display=!0===t?"block":"none"},disposeElement:function(e){e.parentNode.removeChild(e)},getElements:function(e){return null!=e&&0<e.length?h().querySelectorAll(e):[]},getElement:l,getElementDataAttribute:function(e,t){return e.getAttribute("data-"+t)||null},getElementAttribute:function(e,t){return e.getAttribute(t)||null},insertBefore:function(e,t){return e.parentNode.insertBefore(t,e)},createNode:b,createElement:C,renderComponent:E,addClass:function(e,t){e.classList.contains(t)||e.classList.add(t)},removeClass:function(e,t){e.classList.contains(t)&&e.classList.remove(t)},hasClass:function(e,t){return e.classList.contains(t)},toggleClass:function(e,t){e.classList.contains(t)?e.classList.remove(t):e.classList.add(t)}});function S(e){return e.replace(/\/\*[\s\S]*?\*\//g,"").split(/[}]/).map(function(e){return e.trim()}).filter(String).map(function(e){var t,n=e.split("{"),r=n[0].trim(),i={},l=g(function(e){";"!==e.substr(-1)&&(e+=";");for(var t,n=/;/g,r=[],i=0;null!=(t=n.exec(e));){var l=e.substring(i,t.index);null===l.match(/image\/\w+(?:\+\w+)?\s*$/)&&(r.push(l),i=t.index+1)}return r}(n[1].trim()));try{for(l.s();!(t=l.n()).done;){var o=t.value.match(/^\s*([a-z-]+)\s*:\s*(.+)\s*$/);o&&(i[o[1]]=o[2])}}catch(e){l.e(e)}finally{l.f()}return{selector:r,rules:i}})}function N(e){var t,n={},r=g(e);try{for(r.s();!(t=r.n()).done;){var i=t.value,l=i.selector.match(/(^|\s)\.enlighter-t-(\w+)($|\W)/);if(null!==l){var o=i.selector.replace(/\.enlighter-t-(\w+)/,".enlighter-t-${THEME_NAME}"),s=l[2];n[s]||(n[s]={}),n[s][o]=i.rules}}}catch(e){r.e(e)}finally{r.f()}return n}var w=[],x={},A=[],M={},j="enlighter";function L(){A.forEach(function(e){e.apply(e)})}function T(e,t){var n=1<arguments.length&&void 0!==t?t:{};if(!e)throw new Error("selector not set");x[e]||(x[e]={}),Object.assign(x[e],n)}function O(e){j=e,L()}function P(e){var t,n=g(w);try{for(n.s();!(t=n.n()).done;){var r=t.value;r.reset(),e[r.selector]&&r.applyRules(e[r.selector]),T(r.selector,r.getRules())}}catch(e){n.e(e)}finally{n.f()}L()}function _(e){var t,n,r,i,l,o=(n=(t=e).match(/@BASETHEME:(\w+)/),r=null!==n?n[1]:null,i=N(S(t)),l=Object.keys(i),{theme:r,rules:0<l.length?i[l[0]]:{}});return 0!==Object.keys(o.rules).length&&null!==o.theme&&(O(o.theme),o.rules)}function z(e){var t=x,n=M[j],r={};for(var i in n)r[i]=Object.assign({},n[i]);for(var l in t)for(var o in r[l]||(r[l]={}),t[l]){var s=t[l][o];s&&0<s.length?r[l][o]=s:r[l][o]=""}return function(e,t,n){var r="/*@BASETHEME:"+t+"*/\n";for(var i in n){for(var l in r+="\n"+i.replace("${THEME_NAME}",e)+"{\n",n[i]){var o=(n[i][l]+"").trim();o&&0<o.length&&(r+="\t"+l+": "+n[i][l]+";\n")}r+="}"}return r}(e,j,r)}var I={container:".enlighter-t-${THEME_NAME}",linenumbers:".enlighter-t-${THEME_NAME}.enlighter-linenumbers div.enlighter>div::before",linehover:".enlighter-t-${THEME_NAME}.enlighter-hover div.enlighter>div:hover",linespecial:".enlighter-t-${THEME_NAME} div.enlighter>div.enlighter-special",linespecialhover:".enlighter-t-${THEME_NAME} .enlighter-special:hover",buttons:{generic:".enlighter-t-${THEME_NAME} .enlighter-btn",codegroup:".enlighter-t-${THEME_NAME}.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn"},token:".enlighter-t-${THEME_NAME} .enlighter-"};function H(e){var t=[];e.name&&t.push("enlighter-"+e.name),e.className&&("string"==typeof e.className?t.push(e.className):t.push.apply(t,m(e.className)));for(var n=arguments.length,r=new Array(1<n?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];return C.apply(k,["div",{className:t.join(" ")}].concat(r))}var R=function(){function i(e){o(this,i),this.props=e;for(var t=arguments.length,n=new Array(1<t?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];this.children=n}return s(i,[{key:"render",value:function(){return C(H,null,C("h4",null,this.props.title),this.children)}}]),i}(),$=function(){function n(e){var t;o(this,n),this.props=e||{},this.selector=e.selector,this.el=null,this.value=null,this.cssProperty=null,this.uid=Math.random().toString(36).substr(2,12),t=this,w.push(t)}return s(n,[{key:"onChange",value:function(e){this.value=e,T(this.selector,this.getRules()),L()}},{key:"reset",value:function(){this.value="",this.el.value=""}},{key:"render",value:function(){}},{key:"getRules",value:function(){return this.cssProperty?(e={},t=this.cssProperty,n=this.value,t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e):{};var e,t,n}},{key:"applyRules",value:function(e){e[this.cssProperty]&&(this.value=e[this.cssProperty],this.el.value=this.value)}}]),n}();function D(e){for(var t="enlighter-setting enlighter-type-"+e.type,n=arguments.length,r=new Array(1<n?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];return C("div",{className:t},C("div",{className:"enlighter-setting-title"},e.title),C("div",{className:"enlighter-setting-input"},C("label",{htmlFor:e.uid},r,C("span",{className:"enlighter-label-text"},e.label)),C("div",{className:"enlighter-setting-description"},e.description)))}function B(t){var e=null;return e=C("select",{id:t.id,name:t.name,className:t.className,onChange:function(){t.onChange(e.value)}},t.options.map(function(e){return t.value===e.value?C("option",{selected:"selected",value:e.value},e.label):C("option",{value:e.value},e.label)}),";"),t.onChange&&t.onChange.apply(e,[t.value||(t.options?t.options[0].value:null)]),e}var F=[{label:"default",value:""},{label:"Source Code Pro",value:'"Source Code Pro","Liberation Mono","Courier New",Courier,monospace'},{label:"Consolas",value:'Consolas,"Source Code Pro","Liberation Mono","Courier New",Courier,monospace'},{label:"Inconsolata",value:'Inconsolata,Consolas,"Source Code Pro","Liberation Mono","Courier New",Courier,monospace'},{label:"Open Sans",value:'"Open Sans",Arial,Verdana,sans-serif'},{label:"Arial",value:"Arial,Helvetica,sans-serif"}],G=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="font-family",t.props.title="Font family",t.props.label="",t.props.description="Select the font-family for the elements.",t}return s(r,[{key:"reset",value:function(){this.value=F[0].value,this.el.value=F[0].value}},{key:"render",value:function(){return this.el=C(B,{id:this.uid,options:F,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"select",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}(),V=[{label:"default",value:""},{label:"normal",value:"normal"},{label:"italic",value:"italic"},{label:"overline",value:"overline"},{label:"underline",value:"underline"},{label:"line through",value:"line-through"}],J=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="font-style",t.props.title="Font style",t.props.label="",t.props.description="Select the font style of the element.",t}return s(r,[{key:"reset",value:function(){this.value=V[0].value,this.el.value=V[0].value}},{key:"render",value:function(){return this.el=C(B,{id:this.uid,options:V,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"select",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}(),K=[{label:"default",value:""},{label:"normal",value:"normal"},{label:"bold",value:"bold"},{label:"bolder",value:"bolder"},{label:"lighter",value:"lighter"},{label:"100",value:100},{label:"200",value:200},{label:"300",value:300},{label:"400",value:400},{label:"500",value:500},{label:"600",value:600},{label:"700",value:700},{label:"800",value:800},{label:"900",value:900}],q=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="font-weight",t.props.title="Font weight",t.props.label="",t.props.description="Select the font weight of the element.",t}return s(r,[{key:"reset",value:function(){this.value=K[0].value,this.el.value=K[0].value}},{key:"render",value:function(){return this.el=C(B,{id:this.uid,options:K,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"select",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}();function U(e){var t=null;return t=C("input",{id:e.id,name:e.name,className:e.className,onInput:function(){e.onChange(t.value)},type:"text"}),e.onChange&&e.onChange.apply(t,[e.value]),t}var X=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="color",t.props.title="Font color",t.props.label="e.g. #c0c0c0",t.props.description="Set the font color of the element.",t}return s(r,[{key:"render",value:function(){return this.el=C(U,{id:this.uid,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"text",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}();function Q(e){var t=null;return t=C("input",{id:e.id,name:e.name,className:e.className,onInput:function(){e.onChange(t.value)},type:"text"}),e.onChange&&e.onChange.apply(t,[e.value]),t}var W=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="font-size",t.props.title="Font size",t.props.label="e.g. 1.2em",t.props.description="Set the font size of the element.",t}return s(r,[{key:"render",value:function(){return this.el=C(Q,{id:this.uid,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"text",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}(),Y=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="line-height",t.props.title="Line height",t.props.label="e.g. 16px",t.props.description="Set the line height of the element.",t}return s(r,[{key:"render",value:function(){return this.el=C(Q,{id:this.uid,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"text",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}();var Z=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="background-color",t.props.title="Background color",t.props.label="e.g. #c0c0c0",t.props.description="Set the css background color of the element.",t}return s(r,[{key:"render",value:function(){return this.el=C(U,{id:this.uid,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"text",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}();var ee=function(){function t(e){o(this,t),this.el=null,this.onChange=e.onChange,this.props=e||{},this.uid="4khwf0923g",this.props.title="Base theme",this.props.label="",this.props.description="Select the theme which should used for derivation. The theme customizer will use the styles of this theme."}return s(t,[{key:"setValue",value:function(e){this.value=e,this.el.value=e}},{key:"render",value:function(){var e=Object.keys(M).map(function(e){return{label:e,value:e}});return this.el=C(B,{id:this.uid,options:e,onChange:this.onChange,value:j}),C(D,{type:"select",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),t}();function te(e){return C("button",{id:e.id,name:e.name,className:e.className,onClick:e.onClick,type:"button"},e.label)}var ne=function(){function t(e){o(this,t),this.el=null,this.onChange=e.onChange,this.props=e||{},this.uid="h802zfh8",this.props.title="Load styles",this.props.label="",this.props.description="After selecting a base theme you have to load the styles into the customizer. This will remove all previous settings!"}return s(t,[{key:"setValue",value:function(e){this.value=e,this.el.value=e}},{key:"render",value:function(){return this.el=C(te,{id:this.uid,onClick:this.props.onClick,label:"load",className:"button button-primary"}),C(D,{type:"text",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),t}();function re(){return C(H,{className:"ejs-customizer-settings"},C(R,{title:"Base theme"},C(ee,{onChange:function(e){O(e)}}),C(ne,{onClick:function(){!function(){if(!M[j])throw new Error("base theme ".concat(j," doesn't exist"));P(M[j])}()}})))}function ie(e){var t=I.token+e.type;return C(R,{title:e.name},C(J,{selector:t}),C(q,{selector:t}),C(W,{selector:t}),C(X,{selector:t}),C(Z,{selector:t}))}return e.init=function(){var e,t,i=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};e=i.themeURL,t=function(e,t){if(e)console.error("failed to load+parse EnlighterJS themes",e);else try{console.log("EnlighterJS themes loaded: ",Object.keys(t).join(", ")),M=t;var n=!1;if(i.formExchange){console.log("loading customized theme..");var r=l(i.formExchange);r&&!1===(n=_(r.value))&&console.log("failed - no rules set")}E(re(),l(i.settings)),E(C(H,{className:"ejs-customizer-fonts"},C(R,{title:"Global"},C(G,{selector:I.container}),C(J,{selector:I.container}),C(q,{selector:I.container}),C(X,{selector:I.container}),C(W,{selector:I.container}),C(Y,{selector:I.container})),C(R,{title:"Line numbers"},C(G,{selector:I.linenumbers}),C(J,{selector:I.linenumbers}),C(q,{selector:I.linenumbers}),C(X,{selector:I.linenumbers}),C(W,{selector:I.linenumbers})),C(R,{title:"Generic buttons"},C(G,{selector:I.buttons.generic}),C(J,{selector:I.buttons.generic}),C(q,{selector:I.buttons.generic}),C(X,{selector:I.buttons.generic}),C(W,{selector:I.buttons.generic})),C(R,{title:"Codegroup buttons"},C(G,{selector:I.buttons.codegroup}),C(J,{selector:I.buttons.codegroup}),C(q,{selector:I.buttons.codegroup}),C(X,{selector:I.buttons.codegroup}),C(W,{selector:I.buttons.codegroup}))),l(i.fonts)),E(C(H,{className:"ejs-customizer-lines"},C(R,{title:"Lines hover"},C(Z,{selector:I.linehover})),C(R,{title:"Lines highlighted"},C(Z,{selector:I.linespecial})),C(R,{title:"Line highlighted hover"},C(Z,{selector:I.linespecialhover}))),l(i.lines)),E(C(H,{className:"ejs-customizer-token-comments"},C(ie,{type:"c0",name:"Single Line Comments/General"}),C(ie,{type:"c1",name:"Multi Line Block Comments"}),C(ie,{type:"c2",name:"Multi Line Doc Comments"}),C(ie,{type:"c9",name:"Special Comment Syntax"})),l(i.tokens.comments)),E(C(H,{className:"ejs-customizer-token-expressions"},C(ie,{type:"e0",name:"Boolean Expressions"}),C(ie,{type:"e1",name:"Null Expressions"}),C(ie,{type:"e2",name:"Regular Expressions"}),C(ie,{type:"e3",name:"Constants"}),C(ie,{type:"e4",name:"Shell/Command Expression"})),l(i.tokens.expressions)),E(C(H,{className:"ejs-customizer-token-generic"},C(ie,{type:"g0",name:"Generic Symbols"}),C(ie,{type:"g1",name:"Brackets"})),l(i.tokens.generic)),E(C(H,{className:"ejs-customizer-token-keywords"},C(ie,{type:"k0",name:"Global Keywords"}),C(ie,{type:"k1",name:"Control Structure Keywords"}),C(ie,{type:"k2",name:"Variable/Type Initialization Keyword"}),C(ie,{type:"k3",name:"Operators"}),C(ie,{type:"k4",name:"Directives"}),C(ie,{type:"k5",name:"Types"}),C(ie,{type:"k6",name:"Labels/Symbols"}),C(ie,{type:"k7",name:"Variable"}),C(ie,{type:"k8",name:"Type Qualifiers/Modifier"}),C(ie,{type:"k9",name:"Special Keywords"}),C(ie,{type:"k10",name:"Namespaces"})),l(i.tokens.keywords)),E(C(H,{className:"ejs-customizer-token-languages"},C(ie,{type:"x1",name:"XML Tag"}),C(ie,{type:"x2",name:"XML Attribute"}),C(ie,{type:"x10",name:"CSS ID Selector"}),C(ie,{type:"x11",name:"CSS Class Selector"}),C(ie,{type:"x12",name:"CSS Rule/Property"}),C(ie,{type:"x13",name:"CSS Units"}),C(ie,{type:"x14",name:"CSS Hex Colors"}),C(ie,{type:"x15",name:"CSS Pseudo Elements/Selectors"})),l(i.tokens.languages)),E(C(H,{className:"ejs-customizer-token-methods"},C(ie,{type:"m0",name:"General/Global Function Calls"}),C(ie,{type:"m1",name:"General/Dynamic Method Calls"}),C(ie,{type:"m2",name:"Static Method Calls"}),C(ie,{type:"m3",name:"Properties"})),l(i.tokens.methods)),E(C(H,{className:"ejs-customizer-token-numbers"},C(ie,{type:"n0",name:"Floats/General Numbers"}),C(ie,{type:"n1",name:"Integers"}),C(ie,{type:"n2",name:"Hexadecimal"}),C(ie,{type:"n3",name:"Binary"}),C(ie,{type:"n4",name:"Octal"}),C(ie,{type:"n5",name:"Complex/Imaginary Numbers"})),l(i.tokens.numbers)),E(C(H,{className:"ejs-customizer-token-strings"},C(ie,{type:"s0",name:"General Strings"}),C(ie,{type:"s1",name:"Characters"}),C(ie,{type:"s2",name:"Template Strings"}),C(ie,{type:"s3",name:"Template String Delimiter"}),C(ie,{type:"s4",name:"String Escape Sequences"}),C(ie,{type:"s5",name:"Multi Line Strings"})),l(i.tokens.strings)),E(C(H,{className:"ejs-customizer-tokens-text"},C(ie,{type:"t0",name:"Metadata"}),C(ie,{type:"t1",name:"Heading"}),C(ie,{type:"t2",name:"Section"}),C(ie,{type:"t3",name:"Hyperlink"}),C(ie,{type:"t4",name:"Emphasis/Formatting"}),C(ie,{type:"t5",name:"OK/Positive (e.g. diff+)"}),C(ie,{type:"t6",name:"Failure/Negative (e.g. diff-)"}),C(ie,{type:"t7",name:"Quotes/Blockquotes"}),C(ie,{type:"t8",name:"Code (not highlighted)"})),l(i.tokens.text)),n&&(P(n),l(i.formExchange).textContent=z(i.themeName)),A.push(function(){l(i.formExchange).textContent=z(i.themeName)})}catch(e){return void console.error("EnlighterJS Customizer Internal Error:",e)}},n().fetch(e).then(function(e){if(200===e.status)return e;throw new Error(e.statusText)}).then(function(e){return e.text()}).then(function(e){try{t(!1,N(S(e)))}catch(e){t(e)}}).catch(function(e){t(e)})},e.render=function(){return z((0<arguments.length&&void 0!==arguments[0]?arguments[0]:null)||"custom")},e.version="2.1.0",e}({});
\ No newline at end of file
+/*! EnlighterJS Theme Customizer 2.2.0 | Mozilla Public License 2.0 | https://enlighterjs.org */
+var EnlighterJS_Customizer=function(e){"use strict";var t={document:document,window:window};function h(){return document}function n(){return window}function l(e){return null!=e&&0<e.length?h().querySelector(e):null}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function s(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&u(e,t)}function a(e){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function c(){if("undefined"!=typeof Reflect&&Reflect.construct&&!Reflect.construct.sham){if("function"==typeof Proxy)return 1;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),1}catch(e){return}}}function p(e,t,n){return(p=c()?Reflect.construct:function(e,t,n){var r=[null];r.push.apply(r,t);var i=new(Function.bind.apply(e,r));return n&&u(i,n.prototype),i}).apply(null,arguments)}function f(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function d(r){return function(){var e,t=a(r);if(c()){var n=a(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return f(this,e)}}function m(e){return function(e){if(Array.isArray(e))return y(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||v(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,t){if(e){if("string"==typeof e)return y(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?y(e,t):void 0}}function y(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function g(e){if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(e=v(e))){var t=0,n=function(){};return{s:n,n:function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}},e:function(e){throw e},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var r,i,l=!0,o=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return l=e.done,e},e:function(e){o=!0,i=e},f:function(){try{l||null==r.return||r.return()}finally{if(o)throw i}}}}function b(e,t,n){var r=h(),i=r.createElement(e);if(0<n.length)for(var l=0;l<n.length;l++){var o=n[l];if(null!==o&&!1!==o)if(void 0!==o)if(o.push)for(var s=0;s<o.length;s++){var a=o[s];null!==a&&!1!==a&&(void 0!==a?a.appendChild?i.appendChild(a):i.appendChild(r.createTextNode(a)):i.appendChild(r.createTextNode("#INVALID_ELEMENT#")))}else o.appendChild?i.appendChild(o):i.appendChild(r.createTextNode(o));else i.appendChild(r.createTextNode("#INVALID_ELEMENT#"))}function u(e,t){i.addEventListener(e,function(e){e.preventDefault(),e.stopPropagation(),t&&t.apply(i,[e,i])})}for(var c in t)if(Object.prototype.hasOwnProperty.call(t,c)){var p=t[c];if("on"===c.substr(0,2)){if(null===p)continue;u(c.substr(2).toLowerCase(),p)}else{if(null==p)continue;switch(c){case"className":i.setAttribute("class",p);break;case"htmlFor":i.setAttribute("for",p);break;default:i.setAttribute(c,p)}}}return i.on=u,i}function C(e,t){for(var n=arguments.length,r=new Array(2<n?n-2:0),i=2;i<n;i++)r[i-2]=arguments[i];if("function"!=typeof e)return b(e,t,r);var l=p(e,[t||{}].concat(r));return"function"==typeof l.render?l.render():l instanceof HTMLElement?l:void h().createTextNode("#INVALID_JSX_ELEMENT#")}function E(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:null;return null!==t&&t.appendChild(e),e}var k=Object.freeze({__proto__:null,globals:t,getDocument:h,getWindow:n,displayElement:function(e){var t=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];e.style.display=!0===t?"block":"none"},disposeElement:function(e){e.parentNode.removeChild(e)},getElements:function(e){return null!=e&&0<e.length?h().querySelectorAll(e):[]},getElement:l,getElementDataAttribute:function(e,t){return e.getAttribute("data-"+t)||null},getElementAttribute:function(e,t){return e.getAttribute(t)||null},insertBefore:function(e,t){return e.parentNode.insertBefore(t,e)},createNode:b,createElement:C,renderComponent:E,addClass:function(e,t){e.classList.contains(t)||e.classList.add(t)},removeClass:function(e,t){e.classList.contains(t)&&e.classList.remove(t)},hasClass:function(e,t){return e.classList.contains(t)},toggleClass:function(e,t){e.classList.contains(t)?e.classList.remove(t):e.classList.add(t)}});function S(e){return e.replace(/\/\*[\s\S]*?\*\//g,"").split(/[}]/).map(function(e){return e.trim()}).filter(String).map(function(e){var t,n=e.split("{"),r=n[0].trim(),i={},l=g(function(e){";"!==e.substr(-1)&&(e+=";");for(var t,n=/;/g,r=[],i=0;null!=(t=n.exec(e));){var l=e.substring(i,t.index);null===l.match(/image\/\w+(?:\+\w+)?\s*$/)&&(r.push(l),i=t.index+1)}return r}(n[1].trim()));try{for(l.s();!(t=l.n()).done;){var o=t.value.match(/^\s*([a-z-]+)\s*:\s*(.+)\s*$/);o&&(i[o[1]]=o[2])}}catch(e){l.e(e)}finally{l.f()}return{selector:r,rules:i}})}function N(e){var t,n={},r=g(e);try{for(r.s();!(t=r.n()).done;){var i=t.value,l=i.selector.match(/(^|\s)\.enlighter-t-(\w+)($|\W)/);if(null!==l){var o=i.selector.replace(/\.enlighter-t-(\w+)/,".enlighter-t-${THEME_NAME}"),s=l[2];n[s]||(n[s]={}),n[s][o]=i.rules}}}catch(e){r.e(e)}finally{r.f()}return n}var w=[],x={},A=[],M={},T="enlighter";function j(){A.forEach(function(e){e.apply(e)})}function L(e,t){var n=1<arguments.length&&void 0!==t?t:{};if(!e)throw new Error("selector not set");x[e]||(x[e]={}),Object.assign(x[e],n)}function O(e){T=e,j()}function P(e){var t,n=g(w);try{for(n.s();!(t=n.n()).done;){var r=t.value;r.reset(),e[r.selector]&&r.applyRules(e[r.selector]),L(r.selector,r.getRules())}}catch(e){n.e(e)}finally{n.f()}j()}function _(e){var t,n,r,i,l,o=(n=(t=e).match(/@BASETHEME:(\w+)/),r=null!==n?n[1]:null,i=N(S(t)),l=Object.keys(i),{theme:r,rules:0<l.length?i[l[0]]:{}});return 0!==Object.keys(o.rules).length&&null!==o.theme&&(O(o.theme),o.rules)}function z(e){var t=x,n=M[T],r={};for(var i in n)r[i]=Object.assign({},n[i]);for(var l in t)for(var o in r[l]||(r[l]={}),t[l]){var s=t[l][o];s&&0<s.length?r[l][o]=s:r[l][o]=""}return function(e,t,n){var r="/*@BASETHEME:"+t+"*/\n";for(var i in n){for(var l in r+="\n"+i.replace("${THEME_NAME}",e)+"{\n",n[i]){var o=(n[i][l]+"").trim();o&&0<o.length&&(r+="\t"+l+": "+n[i][l]+";\n")}r+="}"}return r}(e,T,r)}var I={container:".enlighter-t-${THEME_NAME}",linenumbers:".enlighter-t-${THEME_NAME}.enlighter-linenumbers div.enlighter>div::before",linehover:".enlighter-t-${THEME_NAME}.enlighter-hover div.enlighter>div:hover",linespecial:".enlighter-t-${THEME_NAME} div.enlighter>div.enlighter-special",linespecialhover:".enlighter-t-${THEME_NAME} .enlighter-special:hover",buttons:{generic:".enlighter-t-${THEME_NAME} .enlighter-btn",codegroup:".enlighter-t-${THEME_NAME}.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn"},token:".enlighter-t-${THEME_NAME} .enlighter-",genericToken:".enlighter-t-${THEME_NAME} .enlighter span"};function H(e){var t=[];e.name&&t.push("enlighter-"+e.name),e.className&&("string"==typeof e.className?t.push(e.className):t.push.apply(t,m(e.className)));for(var n=arguments.length,r=new Array(1<n?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];return C.apply(k,["div",{className:t.join(" ")}].concat(r))}var R=function(){function i(e){o(this,i),this.props=e;for(var t=arguments.length,n=new Array(1<t?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];this.children=n}return s(i,[{key:"render",value:function(){return C(H,null,C("h4",null,this.props.title),this.children)}}]),i}(),$=function(){function n(e){var t;o(this,n),this.props=e||{},this.selector=e.selector,this.el=null,this.value=null,this.cssProperty=null,this.uid=Math.random().toString(36).substr(2,12),t=this,w.push(t)}return s(n,[{key:"onChange",value:function(e){this.value=e,L(this.selector,this.getRules()),j()}},{key:"reset",value:function(){this.value="",this.el.value=""}},{key:"render",value:function(){}},{key:"getRules",value:function(){return this.cssProperty?(e={},t=this.cssProperty,n=this.value,t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e):{};var e,t,n}},{key:"applyRules",value:function(e){e[this.cssProperty]&&(this.value=e[this.cssProperty],this.el.value=this.value)}}]),n}();function D(e){for(var t="enlighter-setting enlighter-type-"+e.type,n=arguments.length,r=new Array(1<n?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];return C("div",{className:t},C("div",{className:"enlighter-setting-title"},e.title),C("div",{className:"enlighter-setting-input"},C("label",{htmlFor:e.uid},r,C("span",{className:"enlighter-label-text"},e.label)),C("div",{className:"enlighter-setting-description"},e.description)))}function B(t){var e=null;return e=C("select",{id:t.id,name:t.name,className:t.className,onChange:function(){t.onChange(e.value)}},t.options.map(function(e){return t.value===e.value?C("option",{selected:"selected",value:e.value},e.label):C("option",{value:e.value},e.label)}),";"),t.onChange&&t.onChange.apply(e,[t.value||(t.options?t.options[0].value:null)]),e}var F=[{label:"default",value:""},{label:"Source Code Pro",value:'"Source Code Pro","Liberation Mono","Courier New",Courier,monospace'},{label:"Consolas",value:'Consolas,"Source Code Pro","Liberation Mono","Courier New",Courier,monospace'},{label:"Inconsolata",value:'Inconsolata,Consolas,"Source Code Pro","Liberation Mono","Courier New",Courier,monospace'},{label:"Open Sans",value:'"Open Sans",Arial,Verdana,sans-serif'},{label:"Arial",value:"Arial,Helvetica,sans-serif"}],G=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="font-family",t.props.title="Font family",t.props.label="",t.props.description="Select the font-family for the elements.",t}return s(r,[{key:"reset",value:function(){this.value=F[0].value,this.el.value=F[0].value}},{key:"render",value:function(){return this.el=C(B,{id:this.uid,options:F,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"select",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}(),V=[{label:"default",value:""},{label:"normal",value:"normal"},{label:"italic",value:"italic"},{label:"overline",value:"overline"},{label:"underline",value:"underline"},{label:"line through",value:"line-through"}],J=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="font-style",t.props.title="Font style",t.props.label="",t.props.description="Select the font style of the element.",t}return s(r,[{key:"reset",value:function(){this.value=V[0].value,this.el.value=V[0].value}},{key:"render",value:function(){return this.el=C(B,{id:this.uid,options:V,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"select",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}(),K=[{label:"default",value:""},{label:"normal",value:"normal"},{label:"bold",value:"bold"},{label:"bolder",value:"bolder"},{label:"lighter",value:"lighter"},{label:"100",value:100},{label:"200",value:200},{label:"300",value:300},{label:"400",value:400},{label:"500",value:500},{label:"600",value:600},{label:"700",value:700},{label:"800",value:800},{label:"900",value:900}],q=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="font-weight",t.props.title="Font weight",t.props.label="",t.props.description="Select the font weight of the element.",t}return s(r,[{key:"reset",value:function(){this.value=K[0].value,this.el.value=K[0].value}},{key:"render",value:function(){return this.el=C(B,{id:this.uid,options:K,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"select",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}();function U(e){var t=null;return t=C("input",{id:e.id,name:e.name,className:e.className,onInput:function(){e.onChange(t.value)},type:"text"}),e.onChange&&e.onChange.apply(t,[e.value]),t}var X=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="color",t.props.title="Font color",t.props.label="e.g. #c0c0c0",t.props.description="Set the font color of the element.",t}return s(r,[{key:"render",value:function(){return this.el=C(U,{id:this.uid,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"text",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}();function Q(e){var t=null;return t=C("input",{id:e.id,name:e.name,className:e.className,onInput:function(){e.onChange(t.value)},type:"text"}),e.onChange&&e.onChange.apply(t,[e.value]),t}var W=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="font-size",t.props.title="Font size",t.props.label="e.g. 1.2em",t.props.description="Set the font size of the element.",t}return s(r,[{key:"render",value:function(){return this.el=C(Q,{id:this.uid,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"text",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}(),Y=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="line-height",t.props.title="Line height",t.props.label="e.g. 16px",t.props.description="Set the line height of the element.",t}return s(r,[{key:"render",value:function(){return this.el=C(Q,{id:this.uid,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"text",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}();var Z=function(){i(r,$);var n=d(r);function r(e){var t;return o(this,r),(t=n.call(this,e)).cssProperty="background-color",t.props.title="Background color",t.props.label="e.g. #c0c0c0",t.props.description="Set the css background color of the element.",t}return s(r,[{key:"render",value:function(){return this.el=C(U,{id:this.uid,onChange:this.onChange.bind(this),value:this.value}),C(D,{type:"text",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),r}();var ee=function(){function t(e){o(this,t),this.el=null,this.onChange=e.onChange,this.props=e||{},this.uid="4khwf0923g",this.props.title="Base theme",this.props.label="",this.props.description="Select the theme which should used for derivation. The theme customizer will use the styles of this theme."}return s(t,[{key:"setValue",value:function(e){this.value=e,this.el.value=e}},{key:"render",value:function(){var e=Object.keys(M).map(function(e){return{label:e,value:e}});return this.el=C(B,{id:this.uid,options:e,onChange:this.onChange,value:T}),C(D,{type:"select",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),t}();function te(e){return C("button",{id:e.id,name:e.name,className:e.className,onClick:e.onClick,type:"button"},e.label)}var ne=function(){function t(e){o(this,t),this.el=null,this.onChange=e.onChange,this.props=e||{},this.uid="h802zfh8",this.props.title="Load styles",this.props.label="",this.props.description="After selecting a base theme you have to load the styles into the customizer. This will remove all previous settings!"}return s(t,[{key:"setValue",value:function(e){this.value=e,this.el.value=e}},{key:"render",value:function(){return this.el=C(te,{id:this.uid,onClick:this.props.onClick,label:"load",className:"button button-primary"}),C(D,{type:"text",uid:this.uid,label:this.props.label,description:this.props.description,title:this.props.title},this.el)}}]),t}();function re(){return C(H,{className:"ejs-customizer-settings"},C(R,{title:"Base theme"},C(ee,{onChange:function(e){O(e)}}),C(ne,{onClick:function(){!function(){if(!M[T])throw new Error("base theme ".concat(T," doesn't exist"));P(M[T])}()}})))}function ie(e){var t=I.token+e.type;return C(R,{title:e.name},C(J,{selector:t}),C(q,{selector:t}),C(W,{selector:t}),C(X,{selector:t}),C(Z,{selector:t}))}return e.init=function(){var e,t,i=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};e=i.themeURL,t=function(e,t){if(e)console.error("failed to load+parse EnlighterJS themes",e);else try{console.log("EnlighterJS themes loaded: ",Object.keys(t).join(", ")),M=t;var n=!1;if(i.formExchange){console.log("loading customized theme..");var r=l(i.formExchange);r&&!1===(n=_(r.value))&&console.log("failed - no rules set")}E(re(),l(i.settings)),E(C(H,{className:"ejs-customizer-fonts"},C(R,{title:"Global"},C(G,{selector:I.container}),C(J,{selector:I.container}),C(q,{selector:I.container}),C(X,{selector:I.container}),C(W,{selector:I.container}),C(Y,{selector:I.container})),C(R,{title:"Line numbers"},C(G,{selector:I.linenumbers}),C(J,{selector:I.linenumbers}),C(q,{selector:I.linenumbers}),C(X,{selector:I.linenumbers}),C(W,{selector:I.linenumbers})),C(R,{title:"Generic buttons"},C(G,{selector:I.buttons.generic}),C(J,{selector:I.buttons.generic}),C(q,{selector:I.buttons.generic}),C(X,{selector:I.buttons.generic}),C(W,{selector:I.buttons.generic})),C(R,{title:"Codegroup buttons"},C(G,{selector:I.buttons.codegroup}),C(J,{selector:I.buttons.codegroup}),C(q,{selector:I.buttons.codegroup}),C(X,{selector:I.buttons.codegroup}),C(W,{selector:I.buttons.codegroup}))),l(i.fonts)),E(C(H,{className:"ejs-customizer-lines"},C(R,{title:"Lines hover"},C(Z,{selector:I.linehover})),C(R,{title:"Lines highlighted"},C(Z,{selector:I.linespecial})),C(R,{title:"Line highlighted hover"},C(Z,{selector:I.linespecialhover}))),l(i.lines)),E(C(H,{className:"ejs-customizer-token-comments"},C(ie,{type:"c0",name:"Single Line Comments/General"}),C(ie,{type:"c1",name:"Multi Line Block Comments"}),C(ie,{type:"c2",name:"Multi Line Doc Comments"}),C(ie,{type:"c9",name:"Special Comment Syntax"})),l(i.tokens.comments)),E(C(H,{className:"ejs-customizer-token-expressions"},C(ie,{type:"e0",name:"Boolean Expressions"}),C(ie,{type:"e1",name:"Null Expressions"}),C(ie,{type:"e2",name:"Regular Expressions"}),C(ie,{type:"e3",name:"Constants"}),C(ie,{type:"e4",name:"Shell/Command Expression"})),l(i.tokens.expressions)),E(C(H,{className:"ejs-customizer-token-generic"},C(R,{title:"Token base style (applied to all tokens)"},C(J,{selector:I.genericToken}),C(q,{selector:I.genericToken}),C(W,{selector:I.genericToken}),C(X,{selector:I.genericToken}),C(Z,{selector:I.genericToken})),C(ie,{type:"g0",name:"Generic Symbols"}),C(ie,{type:"g1",name:"Brackets"})),l(i.tokens.generic)),E(C(H,{className:"ejs-customizer-token-keywords"},C(ie,{type:"k0",name:"Global Keywords"}),C(ie,{type:"k1",name:"Control Structure Keywords"}),C(ie,{type:"k2",name:"Variable/Type Initialization Keyword"}),C(ie,{type:"k3",name:"Operators"}),C(ie,{type:"k4",name:"Directives"}),C(ie,{type:"k5",name:"Types"}),C(ie,{type:"k6",name:"Labels/Symbols"}),C(ie,{type:"k7",name:"Variable"}),C(ie,{type:"k8",name:"Type Qualifiers/Modifier"}),C(ie,{type:"k9",name:"Special Keywords"}),C(ie,{type:"k10",name:"Namespaces"})),l(i.tokens.keywords)),E(C(H,{className:"ejs-customizer-token-languages"},C(ie,{type:"x1",name:"XML Tag"}),C(ie,{type:"x2",name:"XML Attribute"}),C(ie,{type:"x10",name:"CSS ID Selector"}),C(ie,{type:"x11",name:"CSS Class Selector"}),C(ie,{type:"x12",name:"CSS Rule/Property"}),C(ie,{type:"x13",name:"CSS Units"}),C(ie,{type:"x14",name:"CSS Hex Colors"}),C(ie,{type:"x15",name:"CSS Pseudo Elements/Selectors"})),l(i.tokens.languages)),E(C(H,{className:"ejs-customizer-token-methods"},C(ie,{type:"m0",name:"General/Global Function Calls"}),C(ie,{type:"m1",name:"General/Dynamic Method Calls"}),C(ie,{type:"m2",name:"Static Method Calls"}),C(ie,{type:"m3",name:"Properties"})),l(i.tokens.methods)),E(C(H,{className:"ejs-customizer-token-numbers"},C(ie,{type:"n0",name:"Floats/General Numbers"}),C(ie,{type:"n1",name:"Integers"}),C(ie,{type:"n2",name:"Hexadecimal"}),C(ie,{type:"n3",name:"Binary"}),C(ie,{type:"n4",name:"Octal"}),C(ie,{type:"n5",name:"Complex/Imaginary Numbers"})),l(i.tokens.numbers)),E(C(H,{className:"ejs-customizer-token-strings"},C(ie,{type:"s0",name:"General Strings"}),C(ie,{type:"s1",name:"Characters"}),C(ie,{type:"s2",name:"Template Strings"}),C(ie,{type:"s3",name:"Template String Delimiter"}),C(ie,{type:"s4",name:"String Escape Sequences"}),C(ie,{type:"s5",name:"Multi Line Strings"})),l(i.tokens.strings)),E(C(H,{className:"ejs-customizer-tokens-text"},C(ie,{type:"t0",name:"Metadata"}),C(ie,{type:"t1",name:"Heading"}),C(ie,{type:"t2",name:"Section"}),C(ie,{type:"t3",name:"Hyperlink"}),C(ie,{type:"t4",name:"Emphasis/Formatting"}),C(ie,{type:"t5",name:"OK/Positive (e.g. diff+)"}),C(ie,{type:"t6",name:"Failure/Negative (e.g. diff-)"}),C(ie,{type:"t7",name:"Quotes/Blockquotes"}),C(ie,{type:"t8",name:"Code (not highlighted)"})),l(i.tokens.text)),n&&(P(n),l(i.formExchange).textContent=z(i.themeName)),A.push(function(){l(i.formExchange).textContent=z(i.themeName)})}catch(e){return void console.error("EnlighterJS Customizer Internal Error:",e)}},n().fetch(e).then(function(e){if(200===e.status)return e;throw new Error(e.statusText)}).then(function(e){return e.text()}).then(function(e){try{t(!1,N(S(e)))}catch(e){t(e)}}).catch(function(e){t(e)})},e.render=function(){return z((0<arguments.length&&void 0!==arguments[0]?arguments[0]:null)||"custom")},e.version="2.2.0",e}({});
\ No newline at end of file
diff --git a/package.json b/package.json
index 50a413d..6a3c3a9 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "enlighterjs-theme-customizer",
     "description": "an open source syntax highlighter written in pure javascript",
-    "version": "2.1.0",
+    "version": "2.2.0",
     "private": true,
     "homepage": "https://enlighterjs.org",
     "author": {
diff --git a/src/customizer/selectors.js b/src/customizer/selectors.js
index f211294..e06ce66 100644
--- a/src/customizer/selectors.js
+++ b/src/customizer/selectors.js
@@ -22,5 +22,7 @@ export const selectors = {
         codegroup: '.enlighter-t-${THEME_NAME}.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn'
     },
 
-    token: '.enlighter-t-${THEME_NAME} .enlighter-'
+    token: '.enlighter-t-${THEME_NAME} .enlighter-',
+
+    genericToken: '.enlighter-t-${THEME_NAME} .enlighter span'
 }
\ No newline at end of file
diff --git a/src/ui/views/token-generic.jsx b/src/ui/views/token-generic.jsx
index 44aa3cd..911ed34 100644
--- a/src/ui/views/token-generic.jsx
+++ b/src/ui/views/token-generic.jsx
@@ -11,10 +11,25 @@ import * as React from 'dom-magic';
 
 import {Token} from '../components/token.jsx';
 import {Container} from '../components/container.jsx';
+import {selectors} from '../../customizer/selectors';
+import {Group} from '../components/group.jsx';
+import {FontStyle} from '../elements/font-style.jsx';
+import {FontWeight} from '../elements/font-weight.jsx';
+import {FontColor} from '../elements/font-color.jsx';
+import {FontSize} from '../elements/font-size.jsx';
+import {BackgroundColor} from '../elements/bg-color.jsx';
 
 export function TokenGenericView(){
     return <Container className="ejs-customizer-token-generic">
 
+        <Group title="Token base style (applied to all tokens)">
+            <FontStyle selector={selectors.genericToken} />
+            <FontWeight selector={selectors.genericToken} />
+            <FontSize selector={selectors.genericToken} />
+            <FontColor selector={selectors.genericToken} />
+            <BackgroundColor selector={selectors.genericToken} />
+        </Group>
+
         <Token type="g0" name="Generic Symbols" />
         <Token type="g1" name="Brackets" />
 
diff --git a/src/ui/views/tokens.jsx b/src/ui/views/tokens.jsx
deleted file mode 100644
index c95a452..0000000
--- a/src/ui/views/tokens.jsx
+++ /dev/null
@@ -1,93 +0,0 @@
-// ----------------------------------------------------------------------
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-// --
-// Copyright 2016-2020 Andi Dittrich <https://andidittrich.de>
-// ----------------------------------------------------------------------
-
-// Internal "ReactDOM"
-import * as React from 'dom-magic';
-
-import {Token} from '../components/token.jsx';
-import {Container} from '../components/container.jsx';
-
-export function TokenView(){
-    return <Container className="ejs-customizer-tokens">
-
-        <h2>Comments</h2>
-        <Token type="c0" name="Single Line Comments/General" />
-        <Token type="c1" name="Multi Line Block Comments" />
-        <Token type="c2" name="Multi Line Doc Comments" />
-        <Token type="c9" name="Special Comment Syntax" />
-
-        <h2>Keywords</h2>
-        <Token type="k0" name="Global Keywords" />
-        <Token type="k1" name="Control Structure Keywords" />
-        <Token type="k2" name="Variable/Type Initialization Keyword" />
-        <Token type="k3" name="Operators" />
-        <Token type="k4" name="Directives" />
-        <Token type="k5" name="Types" />
-        <Token type="k6" name="Labels/Symbols" />
-        <Token type="k7" name="Variable" />
-        <Token type="k8" name="Type Qualifiers/Modifier" />
-        <Token type="k9" name="Special Keywords" />
-        <Token type="k10" name="Namespaces" />
-
-        <h2>Expressions/Literals</h2>
-        <Token type="e0" name="Boolean Expressions" />
-        <Token type="e1" name="Null Expressions" />
-        <Token type="e2" name="Regular Expressions" />
-        <Token type="e3" name="Constants" />
-        <Token type="e4" name="Shell/Command Expression" />
-
-        <h2>Strings</h2>
-        <Token type="s0" name="General Strings" />
-        <Token type="s1" name="Characters" />
-        <Token type="s2" name="Template Strings" />
-        <Token type="s3" name="Template String Delimiter" />
-        <Token type="s4" name="String Escape Sequences" />
-        <Token type="s5" name="Multi Line Strings" />
-
-        <h2>Numbers</h2>
-        <Token type="n0" name="Floats/General Numbers" />
-        <Token type="n1" name="Integers" />
-        <Token type="n2" name="Hexadecimal" />
-        <Token type="n3" name="Binary" />
-        <Token type="n4" name="Octal" />
-        <Token type="n5" name="Complex/Imaginary Numbers" />
-
-        <h2>Methods/Functions</h2>
-        <Token type="m0" name="General/Global Function Calls" />
-        <Token type="m1" name="General/Dynamic Method Calls" />
-        <Token type="m2" name="Static Method Calls" />
-        <Token type="m3" name="Properties" />
-
-
-        <h2>Generic</h2>
-        <Token type="g0" name="Generic Symbols" />
-        <Token type="g1" name="Brackets" />
-        
-        <h2>Language Specific</h2>
-        <Token type="x1" name="XML Tag" />
-        <Token type="x2" name="XML Attribute" />
-        <Token type="x10" name="CSS ID Selector" />
-        <Token type="x11" name="CSS Class Selector" />
-        <Token type="x12" name="CSS Rule/Property" />
-        <Token type="x13" name="CSS Units" />
-        <Token type="x14" name="CSS Hex Colors" />
-        <Token type="x15" name="CSS Pseudo Elements/Selectors" />
-
-        <h2>Text Documents</h2>
-        <Token type="t0" name="Metadata" />
-        <Token type="t1" name="Heading" />
-        <Token type="t2" name="Section" />
-        <Token type="t3" name="Hyperlink" />
-        <Token type="t4" name="Emphasis/Formatting" />
-        <Token type="t5" name="OK/Positive (e.g. diff+)" />
-        <Token type="t6" name="Failure/Negative (e.g. diff-)" />
-        <Token type="t7" name="Quotes/Blockquotes" />
-        <Token type="t8" name="Code (not highlighted)" />
-
-    </Container>;
-}
\ No newline at end of file