2022-03-13 11:44:44 +07:00
|
|
|
"use strict";!function(){const e={colors:null,buttonsTarget:'#customization article[data-theme="generated"]',selectorButton:"#customization button[data-color]",selectorSection:"#customization",buttons:null,generatedStyles:null,init(){this.generateButtons(),this.setActiveButton("pink"),this.generateTheme("pink")},generateButtons(){let e="",a="";for(const c in this.colors)e+='<button data-color="'.concat(c,'" aria-label="Activate ').concat(c,' theme"></button>'),a+='\n button[data-color="'.concat(c,'"] {\n background-color: ').concat(this.colors[c][600],';\n }\n [data-theme="light"] button[data-color="').concat(c,'"]:hover,\n [data-theme="light"] button[data-color="').concat(c,'"]:active,\n [data-theme="light"] button[data-color="').concat(c,'"]:focus {\n background-color: ').concat(this.colors[c][700],'; \'\n }\n [data-theme="dark"] button[data-color="').concat(c,'"]:hover,\n [data-theme="dark"] button[data-color="').concat(c,'"]:active,\n [data-theme="dark"] button[data-color="').concat(c,'"]:focus {\n background-color: ').concat(this.colors[c][500],";\n }");let f=document.createElement("FIGURE"),t=(f.innerHTML=e,document.querySelector(this.buttonsTarget).before(f),this.buttons=document.querySelectorAll(this.selectorButton),this.buttons.forEach(e=>{e.addEventListener("click",e=>{e=e.target.getAttribute("data-color");this.setActiveButton(e),this.generateTheme(e)},!1)}),document.createElement("STYLE"));t.setAttribute("title","color-picker"),this.generatedStyles=this.minifyCSS(a),t.innerHTML=this.generatedStyles,document.querySelector("head").appendChild(t)},setActiveButton(e){this.buttons.forEach(e=>{e.removeAttribute("class")});let a=document.querySelector(this.selectorButton+'[data-color="'+e+'"]');a.setAttribute("class","picked")},generateTheme(e){let a=e;e=this.colors[e];let f={".name":a.charAt(0).toUpperCase()+a.substring(1)+" ",".c500":e[500],".c600":e[600],".c700":e[700],".c600-outline-light":this.hexToRgbA(e[600],.125),".c600-outline-dark":this.hexToRgbA(e[600],.25),".inverse":e.inverse};Object.keys(f).forEach(a=>{let e=document.querySelectorAll(this.selectorSection+" "+a);e.forEach(e=>{e.innerHTML=f[a]})});e='\n [data-theme="generated"] {\n --h4-color: '.concat(e[700],";\n --primary: ").concat(e[600],";\n --primary-hover: ").concat(e[700],";\n --primary-focus: ").concat(this.hexToRgbA(e[600],.125),";\n --primary-inverse: ").concat(e.inverse,';\n }\n @media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) [data-theme="generated"] {\n --h4-color: ').concat(e[400],";\n --primary: ").concat(e[600],";\n --primary-hover: ").concat(e[500],";\n --primary-focus: ").concat(this.hexToRgbA(e[600],.25),";\n --primary-inverse: ").concat(e.inverse,';\n }\n }\n [data-theme="dark"] [data-theme="generated"] {\n --h4-color: ').concat(e[500],";\n --primary: ").concat(e[600],";\n --primary-hover: ").concat(e[500],";\n --primary-focus: ").concat(this.hexToRgbA(e[600],.25),";\n --primary-inverse: ").concat(e.inverse,';\n }\n [data-theme="generated"] {\n --form-element-active-border-color: var(--primary);\n --form-element-focus-color: var(--primary-focus);\n --switch-color: var(--primary-inverse);\n --switch-checked-background-color: var(--primary);\n }');document.querySelector('style[title="color-picker"]').innerHTML=this.generatedStyles+this.minifyCSS(e)},minifyCSS(e){return e.replace(/^ +/gm,"")},hexToRgbA(e,a){let f;if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))return"rgba("+[(f="0x"+(f=3==(f=e.substring(1).split("")).length?[f[0],f[0],f[1],f[1],f[2],f[2]]:f).join(""))>>16&255,f>>8&255,255&f].join(", ")+", "+a+")";throw new Error("Bad Hex")}};e.colors={red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:
|
