From 5094201fd448e7780d721da7a90ef258930d21bc Mon Sep 17 00:00:00 2001 From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com> Date: Sun, 31 Aug 2025 14:42:46 +0000 Subject: [PATCH 1/3] Add OKLCH color space support as export option MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add RGBToOKLCH conversion function to color utilities - Add OKLCH button to color format options (RGB, HEX, HSL, OKLCH) - Update formatSwatchColor method to handle OKLCH format output - Include OKLCH values in both grayscale and palette swatch generation - OKLCH format outputs as: oklch(lightness chroma hue) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Kevin K --- resources/js/Pages/App.vue | 16 +++++++++++ resources/js/components/PaletteRow.vue | 1 + resources/js/utils/color.js | 38 +++++++++++++++++++++++++- 3 files changed, 54 insertions(+), 1 deletion(-) diff --git a/resources/js/Pages/App.vue b/resources/js/Pages/App.vue index c4acaa5..6b8df36 100644 --- a/resources/js/Pages/App.vue +++ b/resources/js/Pages/App.vue @@ -471,6 +471,17 @@ > HSL +
@@ -800,6 +811,7 @@ export default { rgb: this.lums[index].rgb, hex: Color.RGBToHex(...this.lums[index].rgb), hsl: Object.values(Color.RGBToHSL(...this.lums[index].rgb)), + oklch: Object.values(Color.RGBToOKLCH(...this.lums[index].rgb)), label: this.lums[index].label, }; obj[index] = swatch; @@ -1200,6 +1212,10 @@ export default { return `hsl(${swatch.hsl[0]}, ${ swatch.hsl[1] === 0 ? 0 : swatch.hsl[1].toFixed(2) }%, ${swatch.hsl[2].toFixed(2)}%)`; + if (this.cssType === 'oklch') + return `oklch(${swatch.oklch[0].toFixed(4)} ${swatch.oklch[1].toFixed(4)} ${ + swatch.oklch[2] === 0 ? 0 : swatch.oklch[2].toFixed(2) + })`; }, storeSwatches(swatches, hex) { diff --git a/resources/js/components/PaletteRow.vue b/resources/js/components/PaletteRow.vue index 1bd56dd..a7f2c99 100644 --- a/resources/js/components/PaletteRow.vue +++ b/resources/js/components/PaletteRow.vue @@ -203,6 +203,7 @@ export default { this.paletteClone.swatches[i].hsl = [newH, newS, newL]; this.paletteClone.swatches[i].hex = Color.RGBToHex(...rgb); this.paletteClone.swatches[i].rgb = rgb; + this.paletteClone.swatches[i].oklch = Object.values(Color.RGBToOKLCH(...rgb)); this.paletteClone.swatches[i].lum = Color.lumFromRGB( ...this.paletteClone.swatches[i].rgb, ); diff --git a/resources/js/utils/color.js b/resources/js/utils/color.js index 91dcd1c..21c461a 100644 --- a/resources/js/utils/color.js +++ b/resources/js/utils/color.js @@ -301,4 +301,40 @@ let yValues = calculateYValues(xValues.allPoints); // 92.93,82.2,72.05,50.99,42.87,35.4,20.76,15.54,11.04,3.5,1.47,0.23 // cubic-bezier(.5,0,1,1), xValue = 4, xDelta = 0.62 // 90.81,82.20,73.97,49.37,42.87,36.80,19.70,15.54,11.86,3.04,1.47,0.41 // cubic-bezier(.5,0,1,1), xValue = 4, xDelta = 0.5 -// 93.49,83.02,73.31,43.99,37.46,31.55,14.88,11.51,08.62,1.74,0.73,0.07 // cubic-bezier(.62,0,1,1), xValue = 4.225, xDelta = 0.49 \ No newline at end of file +// 93.49,83.02,73.31,43.99,37.46,31.55,14.88,11.51,08.62,1.74,0.73,0.07 // cubic-bezier(.62,0,1,1), xValue = 4.225, xDelta = 0.49 + +// Convert RGB to OKLCH (OKLAB with chroma and hue) +export function RGBToOKLCH(r, g, b) { + // First convert RGB to linear RGB + const linearR = gammaToLinear(r / 255); + const linearG = gammaToLinear(g / 255); + const linearB = gammaToLinear(b / 255); + + // Convert linear RGB to OKLAB + const l = 0.4122214708 * linearR + 0.5363325363 * linearG + 0.0514459929 * linearB; + const m = 0.2119034982 * linearR + 0.6806995451 * linearG + 0.1073969566 * linearB; + const s = 0.0883024619 * linearR + 0.2817188376 * linearG + 0.6299787005 * linearB; + + const l_ = Math.cbrt(l); + const m_ = Math.cbrt(m); + const s_ = Math.cbrt(s); + + const okL = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_; + const okA = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_; + const okB = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_; + + // Convert OKLAB to OKLCH + const okC = Math.sqrt(okA * okA + okB * okB); + let okH = Math.atan2(okB, okA) * (180 / Math.PI); + if (okH < 0) okH += 360; + + return { + l: Math.round(okL * 10000) / 10000, // Lightness (0-1) + c: Math.round(okC * 10000) / 10000, // Chroma (0+) + h: Math.round(okH * 100) / 100 // Hue (0-360 degrees) + }; +} + +function gammaToLinear(c) { + return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); +} \ No newline at end of file From 36a0976272826c309d6bef2e22ea1650b2f2fa14 Mon Sep 17 00:00:00 2001 From: Kevin Kirchner Date: Sun, 31 Aug 2025 10:03:12 -0500 Subject: [PATCH 2/3] fix local issue with sessions --- ...025_08_31_150004_create_sessions_table.php | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 database/migrations/2025_08_31_150004_create_sessions_table.php diff --git a/database/migrations/2025_08_31_150004_create_sessions_table.php b/database/migrations/2025_08_31_150004_create_sessions_table.php new file mode 100644 index 0000000..0bd028c --- /dev/null +++ b/database/migrations/2025_08_31_150004_create_sessions_table.php @@ -0,0 +1,35 @@ +string('id')->unique(); + $table->foreignId('user_id')->nullable(); + $table->string('ip_address', 45)->nullable(); + $table->text('user_agent')->nullable(); + $table->text('payload'); + $table->integer('last_activity'); + }); + } + + /** + * Reverse the migrations. + * + * @return void + */ + public function down() + { + Schema::dropIfExists('sessions'); + } +} From 78fda9b12af16279705f9f33f307ca738b7d5a98 Mon Sep 17 00:00:00 2001 From: Kevin Kirchner Date: Sun, 31 Aug 2025 10:03:46 -0500 Subject: [PATCH 3/3] build --- package-lock.json | 1 - public/0.js | 2 +- public/1.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1422012..b5cbdd4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,7 +4,6 @@ "requires": true, "packages": { "": { - "name": "grayscale.design", "dependencies": { "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@fortawesome/fontawesome-svg-core": "^1.2.30", diff --git a/public/0.js b/public/0.js index 2796235..c876543 100644 --- a/public/0.js +++ b/public/0.js @@ -1,2 +1,2 @@ /*! For license information please see 0.js.LICENSE.txt */ -(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{"+ygu":function(t,e,r){"use strict";r.r(e);const n=t=>("#"===t[0]&&(t=t.substr(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:1}:{r:parseInt(t.substr(0,2),16),g:parseInt(t.substr(2,2),16),b:parseInt(t.substr(4,2),16),a:1}),o=({h:t,s:e,v:r,a:n})=>{const o=(200-e)*r/100;return{h:t,s:o>0&&o<200?e*r/100/(o<=100?o:200-o)*100:0,l:o/2,a:n}},a=t=>{const{h:e,s:r,l:n}=o(t);return`hsl(${e}, ${r}%, ${n}%)`},s=({h:t,s:e,v:r,a:n})=>{t=t/360*6,e/=100,r/=100;const o=Math.floor(t),a=r*(1-e),s=r*(1-(t-o)*e),i=r*(1-(1-t+o)*e),l=o%6;return{r:Math.round(255*[r,s,a,a,i,r][l]),g:Math.round(255*[i,r,r,s,a,a][l]),b:Math.round(255*[a,a,i,r,r,s][l]),a:n}},i=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},l=({r:t,g:e,b:r})=>"#"+i(t)+i(e)+i(r),c=({r:t,g:e,b:r,a:n})=>{const o=Math.max(t,e,r),a=o-Math.min(t,e,r),s=a?o===t?(e-r)/a:o===e?2+(r-t)/a:4+(t-e)/a:0;return{h:Math.round(60*(s<0?s+6:s)),s:Math.round(o?a/o*100:0),v:Math.round(o/255*100),a:n}},u=(t,e)=>{if(t===e)return!0;for(const r in t)if(t[r]!==e[r])return!1;return!0},h=t=>{const e=document.createElement("template");return e.innerHTML=t,e},f=(t,e)=>{const r=t.shadowRoot||t.attachShadow({mode:"open"});return r.appendChild(e.content.cloneNode(!0)),r},d=(t,e=0,r=1)=>t>r?r:t:host{outline:none}:host(:focus) [part=pointer]{transform:translate(-50%, -50%) scale(1.1)}#interactive{position:absolute;left:0;top:0;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}[part=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%, -50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part=pointer]::after{display:block;content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;background-color:currentColor}
');let m=!1;const v=t=>"touches"in t,b=(t,e,r)=>{t.dispatchEvent(new CustomEvent("move",{bubbles:!0,detail:t.getMove(e,r)}))},y=(t,e)=>{const r=v(e)?e.touches[0]:e,n=t.getBoundingClientRect();b(t,{left:d((r.pageX-(n.left+window.pageXOffset))/n.width),top:d((r.pageY-(n.top+window.pageYOffset))/n.height)})};class g extends HTMLElement{constructor(){super(),this.pointer=f(this,p).querySelector("[part=pointer]").style,this.addEventListener("mousedown",this),this.addEventListener("touchstart",this),this.addEventListener("keydown",this),this.setAttribute("role","slider"),this.setAttribute("tabindex","0")}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(m?"touchmove":"mousemove",this),e(m?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(m&&!v(t))&&(m||(m=v(t)),!0))(t)||!m&&0!=t.button)return;y(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),y(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const r=e.keyCode;r>40||t.xy&&r<37||r<33||(e.preventDefault(),b(t,{left:39===r?.01:37===r?-.01:34===r?.05:33===r?-.05:35===r?1:36===r?-1:0,top:40===r?.01:38===r?-.01:0},!0))})(this,t)}}setStyles(t){for(const e in t)this.pointer.setProperty(e,t[e])}}const x=h("");customElements.define("vc-hue",class extends g{constructor(){super(),f(this,x),this.setAttribute("aria-label","Hue"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax","360")}connectedCallback(){if(this.hasOwnProperty("hue")){const t=this.hue;delete this.hue,this.hue=t}}get xy(){return!1}get hue(){return this._h}set hue(t){this._h=t,this.setStyles({left:t/360*100+"%",color:a({h:t,s:100,v:100,a:1})}),this.setAttribute("aria-valuenow",""+Math.round(t))}getMove(t,e){return{h:e?d(this.hue+360*t.left,0,360):360*t.left}}});const w=h("");customElements.define("vc-saturation",class extends g{constructor(){super(),f(this,w),this.setAttribute("aria-label","Color")}connectedCallback(){if(this.hasOwnProperty("hsva")){const t=this.hsva;delete this.hsva,this.hsva=t}}get xy(){return!0}get hsva(){return this._hsva}set hsva(t){this._hsva=t,this.style.backgroundColor=a({h:t.h,s:100,v:100,a:1}),this.setStyles({top:100-t.v+"%",left:t.s+"%",color:a(t)}),this.setAttribute("aria-valuetext",`Saturation ${Math.round(t.s)}%, Brightness ${Math.round(t.v)}%`)}getMove(t,e){return{s:e?d(this.hsva.s+100*t.left,0,100):100*t.left,v:e?d(this.hsva.v-100*t.top,0,100):Math.round(100-100*t.top)}}});const C=h('\n\n\n\n'),k=Symbol("h"),_=Symbol("s"),L=Symbol("same"),S=Symbol("color"),O=Symbol("hsva"),T=Symbol("change"),j=Symbol("render");class E extends HTMLElement{constructor(){super();const t=f(this,C);t.addEventListener("move",this),this[_]=t.children[1],this[k]=t.children[2]}static get observedAttributes(){return["color"]}get color(){return this[S]}set color(t){if(!this[L](t)){const e=this.colorModel.toHsva(t);this[j](e),this[T](t,e)}}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,r){const n=this.colorModel.fromAttr(r);this[L](n)||(this.color=n)}handleEvent(t){const e=Object.assign({},this[O],t.detail);let r;this[j](e),u(e,this[O])||this[L](r=this.colorModel.fromHsva(e))||this[T](r,e)}[L](t){return this.color&&this.colorModel.equal(t,this.color)}[j](t){this[_].hsva=t,this[k].hue=t.h}[T](t,e){this[S]=t,this[O]=e,this.dispatchEvent(new CustomEvent("color-changed",{detail:{value:t}}))}}const M={defaultColor:"#000",toHsva:t=>c(n(t)),fromHsva:t=>l(s(t)),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||u(n(t),n(e)),fromAttr:t=>t};class F extends E{get colorModel(){return M}}function P(t){return(P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}customElements.define("hex-color-picker",class extends F{});var B=r("tQfU"),G=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return JSON.parse(JSON.stringify(t||e))},A={name:"SwatchSquare",props:{index:Number,swatch:Object,isFirst:Boolean,isLast:Boolean,isClosest:Boolean,copy:Function,copied:String,textOverlay:Boolean},methods:{getBgColor:function(t){return"rgb(".concat(t.rgb.join(","),")")}}},D=r("KHd+"),R=Object(D.a)(A,(function(){var t=this,e=t._self._c;return t.swatch.rgb?e("div",{class:["SwatchSquare",{"is-closest":t.isClosest}]},[e("button",{class:["w-full h-9 shadow-inner transition-colors duration-150 relative z-10",t.isFirst?"rounded-l-lg":t.isLast?"rounded-r-lg":"",{"pointer-events-none":!t.swatch.hex}],style:{color:t.getBgColor(t.swatch),backgroundColor:t.getBgColor(t.swatch)},attrs:{type:"button"},on:{click:function(e){return t.copy(t.swatch.hex)}}},[t.swatch.hex?e("span",{staticClass:"absolute text-sm text-gray-700 bg-white px-3 py-half-2 shadow rounded top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"},[t._v("\n "+t._s(t.swatch.hex)+"\n ")]):t._e(),t._v(" "),e("div",{staticClass:"absolute inset-0 flex flex-col items-center justify-center"},[t.textOverlay?e("strong",{staticClass:"block text-black text-lg"},[e("i",{staticClass:"fa fa-font-case"})]):t._e(),t._v(" "),t.textOverlay?e("strong",{staticClass:"block text-white text-lg"},[e("i",{staticClass:"fa fa-font-case"})]):t._e()]),t._v(" "),t.swatch.hex?e("span",{class:["absolute text-sm text-gray-700 bg-white px-3 py-half-2 shadow rounded top-1/2 left-1/2 transform -translate-x-1/2",t.copied===t.swatch.hex?"translate-y-full opacity-100":"opacity-0 -translate-y-1/2"]},[t._v("\n "+t._s(t.swatch.hex)+"\n ")]):t._e()]),t._v(" "),t._t("default")],2):t._e()}),[],!1,null,null,null).exports;function H(t){return(H="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function I(){I=function(){return e};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value},a="function"==typeof Symbol?Symbol:{},s=a.iterator||"@@iterator",i=a.asyncIterator||"@@asyncIterator",l=a.toStringTag||"@@toStringTag";function c(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(t){c=function(t,e,r){return t[e]=r}}function u(t,e,r,n){var a=e&&e.prototype instanceof v?e:v,s=Object.create(a.prototype),i=new j(n||[]);return o(s,"_invoke",{value:L(t,r,i)}),s}function h(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}e.wrap=u;var f="suspendedStart",d="executing",p="completed",m={};function v(){}function b(){}function y(){}var g={};c(g,s,(function(){return this}));var x=Object.getPrototypeOf,w=x&&x(x(E([])));w&&w!==r&&n.call(w,s)&&(g=w);var C=y.prototype=v.prototype=Object.create(g);function k(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function _(t,e){function r(o,a,s,i){var l=h(t[o],t,a);if("throw"!==l.type){var c=l.arg,u=c.value;return u&&"object"==H(u)&&n.call(u,"__await")?e.resolve(u.__await).then((function(t){r("next",t,s,i)}),(function(t){r("throw",t,s,i)})):e.resolve(u).then((function(t){c.value=t,s(c)}),(function(t){return r("throw",t,s,i)}))}i(l.arg)}var a;o(this,"_invoke",{value:function(t,n){function o(){return new e((function(e,o){r(t,n,e,o)}))}return a=a?a.then(o,o):o()}})}function L(e,r,n){var o=f;return function(a,s){if(o===d)throw Error("Generator is already running");if(o===p){if("throw"===a)throw s;return{value:t,done:!0}}for(n.method=a,n.arg=s;;){var i=n.delegate;if(i){var l=S(i,n);if(l){if(l===m)continue;return l}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===f)throw o=p,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=d;var c=h(e,r,n);if("normal"===c.type){if(o=n.done?p:"suspendedYield",c.arg===m)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(o=p,n.method="throw",n.arg=c.arg)}}}function S(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=t,S(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),m;var a=h(o,e.iterator,r.arg);if("throw"===a.type)return r.method="throw",r.arg=a.arg,r.delegate=null,m;var s=a.arg;return s?s.done?(r[e.resultName]=s.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,m):s:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,m)}function O(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function T(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function j(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(O,this),this.reset(!0)}function E(e){if(e||""===e){var r=e[s];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,a=function r(){for(;++o=0;--a){var s=this.tryEntries[a],i=s.completion;if("root"===s.tryLoc)return o("end");if(s.tryLoc<=this.prev){var l=n.call(s,"catchLoc"),c=n.call(s,"finallyLoc");if(l&&c){if(this.prev=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),T(r),m}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;T(r)}return o}}throw Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:E(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),m}},e}function U(t,e,r,n,o,a,s){try{var i=t[a](s),l=i.value}catch(t){return void r(t)}i.done?e(l):Promise.resolve(l).then(n,o)}function N(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,o,a,s,i=[],l=!0,c=!1;try{if(a=(r=r.call(t)).next,0===e){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(i.push(n.value),i.length!==e);l=!0);}catch(t){c=!0,o=t}finally{try{if(!l&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw o}}return i}}(t,e)||$(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function V(t){return function(t){if(Array.isArray(t))return J(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||$(t)||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 $(t,e){if(t){if("string"==typeof t)return J(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?J(t,e):void 0}}function J(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r0&&void 0!==arguments[0]?arguments[0]:"#000000";this.palette.hex=4===t.length?"#"+V(t.replace("#","")).reduce((function(t,e){return t+e+e}),""):t,this.updateBase(this.palette.hex)}},"palette.hex":{handler:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"#000000";this.palette.picker=4===t.length?"#"+V(t.replace("#","")).reduce((function(t,e){return t+e+e}),""):t,this.updateBase(this.palette.picker)}},lums:{deep:!0,handler:function(t){var e=this;this.$nextTick((function(){e.generateSwatches(),e.paletteClone.closest=B.closestLum(t,e.paletteClone.lum)}))}}},computed:{swatches:function(){return this.paletteClone&&this.paletteClone.swatches||this.palette&&this.palette.swatches||{}},lums:function(){return Object.values(this.palette.swatches).reduce((function(t,e){return t.push(e.lum),t}),[])}},mounted:function(){document.addEventListener("copy",this.onCopy.bind(this))},beforeDestroy:function(){document.removeEventListener("copy",this.onCopy.bind(this),null)},methods:{copy:function(t){this.copyText=t,this.$nextTick((function(){document.execCommand("copy")}))},onCopy:function(t){var e=this;this.copyText&&(t.preventDefault(),t.clipboardData.setData("text/plain",this.copyText),setTimeout((function(){e.copyText=""}),500))},updateBase:function(t){this.paletteClone=Object.assign({},this.paletteClone,this.palette,{hex:t,picker:t}),this.paletteClone.rgb=B.hexToRGB(t);var e=Object.values(this.paletteClone.rgb);this.paletteClone.hsl=B.RGBToHSL.apply(B,e),this.paletteClone.lum=B.lumFromRGB.apply(B,e),this.paletteClone.closest=B.closestLum(this.lums,this.paletteClone.lum),this.$nextTick(this.generateSwatches)},generateSwatches:function(){var t=this;if(this.paletteClone.hsl){var e=function(){var e=t.paletteClone.hsl,r=N(Object.keys(t.paletteClone.closest)||[],1)[0];Object.keys(t.paletteClone.swatches).forEach(function(){var n,o=(n=I().mark((function n(o){var a,s,i,l,c,u,h;return I().wrap((function(n){for(;;)switch(n.prev=n.next){case 0:return a=t.paletteClone.swatches[o],s=Math.abs(r-o),(i=e.h+parseFloat(t.paletteClone.filters.hue)*s)<0&&(i=360-i),i>360&&(i-=360),(l=e.s+parseFloat(t.paletteClone.filters.sat)*s)<0&&(l=Math.max(l,0)),l>100&&(l=Math.min(l,100)),n.next=10,B.lightnessFromHSLum(i,l,a.lum);case 10:c=n.sent,u=B.HSLtoRGB(i,l,c),h=Object.values(u).map(Math.round),t.paletteClone.swatches[o].hsl=[i,l,c],t.paletteClone.swatches[o].hex=B.RGBToHex.apply(B,V(h)),t.paletteClone.swatches[o].rgb=h,t.paletteClone.swatches[o].lum=B.lumFromRGB.apply(B,V(t.paletteClone.swatches[o].rgb));case 17:case"end":return n.stop()}}),n)})),function(){var t=this,e=arguments;return new Promise((function(r,o){var a=n.apply(t,e);function s(t){U(a,r,o,s,i,"next",t)}function i(t){U(a,r,o,s,i,"throw",t)}s(void 0)}))});return function(t){return o.apply(this,arguments)}}()),t.storeSwatches(t.paletteClone.swatches)};window.requestAnimationFrame?window.requestAnimationFrame(e):(clearTimeout(this.generateTimeout),this.generateTimeout=setTimeout(e,50))}},isClosest:function(t){return t==N(Object.keys(this.paletteClone.closest||{})||[],1)[0]}}},q=Object(D.a)(z,(function(){var t=this,e=t._self._c;return e("div",{class:["PaletteRow",{"is-locked":t.isLocked}]},[e("div",{staticClass:"flex items-center justify-between"},t._l(t.swatches,(function(r,n){return e("swatch-square",{key:n,staticClass:"w-full",attrs:{copy:t.copy,copied:t.copyText,swatch:r,"text-overlay":t.textOverlay,index:parseInt(n,10),"is-first":0==n,"is-last":n==Object.keys(t.swatches).length-1,"is-closest":t.isClosest(n)}},[e("div",{staticClass:"font-mono opacity-50 text-gray-800 text-sm text-center px-2 leading-5 mt-4 mb-3"},[e("span",{staticClass:"hidden md:inline-block"},[t._v(t._s(t.palette.name?t.palette.name+"-":""))]),t._v(t._s(r.label)+"\n ")]),t._v(" "),t.hideLum?t._e():e("div",{staticClass:"font-mono opacity-50 text-gray-600 text-xs text-center leading-5"},[t._v("\n "+t._s(r.lum?r.lum.toFixed(2):0==r.lum?"0.00":"--")+"%\n ")])])})),1)])}),[],!1,null,null,null).exports,Y=new Image;Y.src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";var X={name:"GrayscaleRow",props:{lums:Object,lumsValues:Array,setLums:Function,isLockedLum:Function},data:function(){return{isDragging:null,dragTimeout:0,swatchPositions:{}}},watch:{lumsValues:function(t){this.setSwatchPositionsFromLumsValues(t)}},created:function(){this.setSwatchPositionsFromLumsValues()},methods:{setSwatchPositionsFromLumsValues:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;t=t||this.lumsValues,this.swatchPositions=t.reduce((function(t,e,r){return t[r]=e,t}),{})},getSwatchPosition:function(t){var e=this.swatchPositions[t];return"".concat(100-e,"%")},onDragStart:function(t,e){this.isDragging=e,t.dataTransfer.setDragImage(Y,0,0)},getPos:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"pageX";e=parseInt(e,10);var n=t.target,o=n.parentElement;if(o){var a=o.clientWidth,s=o.parentElement;if(s){var i=t[r]-o.offsetLeft-s.offsetLeft;if(i<=0||i>=a)return t.preventDefault(),i<=0?0:100;var l=parseFloat(i/a*100);return l>100?100:l<0?0:l}}},onDragEnd:function(t,e){if((this.isDragging=null,t.screenX)&&navigator.userAgent.toLowerCase().indexOf("firefox")>-1){var r=this.getPos(t,e,"screenX");t.screenX&&this.prepareAdjustLums(e,r)}},onDrag:function(t,e){if(t.screenX){var r=this.getPos(t,e);this.prepareAdjustLums(e,r)}},prepareAdjustLums:function(t,e){var r=this,n=G(this.lums);n[t].lum=100-e,n[t].rgb=this.lumToGrayscaleRGB(100-e),this.swatchPositions[t]=100-e;var o=Object.keys(this.swatchPositions).reduce((function(t,e){return t.push(r.swatchPositions[e]),t}),[]);clearTimeout(this.setLumsTimeout),this.setLumsTimeout=setTimeout((function(){r.setLums(o,parseInt(t,10),e)}),50)},lumToGrayscaleRGB:function(t){var e=B.lightnessFromHSLum(0,0,t);return Object.values(B.HSLtoRGB(0,0,e)).map(Math.round)}}};function K(t){return(K="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function Q(){Q=function(){return e};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value},a="function"==typeof Symbol?Symbol:{},s=a.iterator||"@@iterator",i=a.asyncIterator||"@@asyncIterator",l=a.toStringTag||"@@toStringTag";function c(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(t){c=function(t,e,r){return t[e]=r}}function u(t,e,r,n){var a=e&&e.prototype instanceof v?e:v,s=Object.create(a.prototype),i=new j(n||[]);return o(s,"_invoke",{value:L(t,r,i)}),s}function h(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}e.wrap=u;var f="suspendedStart",d="executing",p="completed",m={};function v(){}function b(){}function y(){}var g={};c(g,s,(function(){return this}));var x=Object.getPrototypeOf,w=x&&x(x(E([])));w&&w!==r&&n.call(w,s)&&(g=w);var C=y.prototype=v.prototype=Object.create(g);function k(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function _(t,e){function r(o,a,s,i){var l=h(t[o],t,a);if("throw"!==l.type){var c=l.arg,u=c.value;return u&&"object"==K(u)&&n.call(u,"__await")?e.resolve(u.__await).then((function(t){r("next",t,s,i)}),(function(t){r("throw",t,s,i)})):e.resolve(u).then((function(t){c.value=t,s(c)}),(function(t){return r("throw",t,s,i)}))}i(l.arg)}var a;o(this,"_invoke",{value:function(t,n){function o(){return new e((function(e,o){r(t,n,e,o)}))}return a=a?a.then(o,o):o()}})}function L(e,r,n){var o=f;return function(a,s){if(o===d)throw Error("Generator is already running");if(o===p){if("throw"===a)throw s;return{value:t,done:!0}}for(n.method=a,n.arg=s;;){var i=n.delegate;if(i){var l=S(i,n);if(l){if(l===m)continue;return l}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===f)throw o=p,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=d;var c=h(e,r,n);if("normal"===c.type){if(o=n.done?p:"suspendedYield",c.arg===m)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(o=p,n.method="throw",n.arg=c.arg)}}}function S(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=t,S(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),m;var a=h(o,e.iterator,r.arg);if("throw"===a.type)return r.method="throw",r.arg=a.arg,r.delegate=null,m;var s=a.arg;return s?s.done?(r[e.resultName]=s.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,m):s:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,m)}function O(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function T(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function j(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(O,this),this.reset(!0)}function E(e){if(e||""===e){var r=e[s];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,a=function r(){for(;++o=0;--a){var s=this.tryEntries[a],i=s.completion;if("root"===s.tryLoc)return o("end");if(s.tryLoc<=this.prev){var l=n.call(s,"catchLoc"),c=n.call(s,"finallyLoc");if(l&&c){if(this.prev=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),T(r),m}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;T(r)}return o}}throw Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:E(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),m}},e}function W(t,e,r,n,o,a,s){try{var i=t[a](s),l=i.value}catch(t){return void r(t)}i.done?e(l):Promise.resolve(l).then(n,o)}function Z(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function tt(t){for(var e=1;et.length)&&(e=t.length);for(var r=0,n=new Array(e);rt?e:t}),0),o=n-r,a=o/(e-1),s=o/2+r,i=(e-1)/2,l=[r],c=1;ct?e:t}),0),o=(n-r)/(e-1),a=[r],s=1;st?e:t}),0),o=(n-r)/(e-1),a=[r],s=1;st?e:t}),0),o=(n-r)/(e-1),a=[r],s=e-2;s>0;){var i=s*o;i*=Math.pow((e-1)/e,e-s*(e+1)/e),a.push(Math.max(n-i,r)),s--}return a.push(n),a.reverse(),a}},default:{label:"Default",icon:"fa fa-dot-circle",getValues:function(t,e){return[93.87,82.28,68.67,49.1,40.2,32.78,13.29,9.31,6.3,2.62,1.3,.52]}},tailwind:{label:"Tailwind",icon:"fak fa-tailwind",getValues:function(t,e){return[93.88,87.19,75.61,61.14,42.57,28.39,18.04,11.21,6.97,4.72,1.63]}},radix:{label:"Radix",icon:"fak fa-radix",getValues:function(t,e){return[98.1,96.4,90.1,83.3,75.6,65.8,52.6,37.4,15.2,12.8,10.2,1.2]}}},lums:{0:{},1:{},2:{},3:{},4:{},5:{},6:{},7:{},8:{}},isChoosingBase:null,lastPos:null,adjustLumsTimeout:0,autoDistribute:!1,palettes:[],showFilters:[],lockedPalettes:[],lockedByHex:{},showPresets:!1,showUploadForm:!1,paletteCacheBustTimeout:0,updateSwatchTimeout:0,isUploading:!1,uploadFile:null,base64File:null,uploadFileUrl:"",uploadFilePath:"",grayscaleJson:{},paletteJson:{},shownPaletteMenu:null,setFromUploadTimeout:0,hasUpdatedLumsCount:!1,copyText:"",showLumsMenu:!1,storedSwatches:{},cssTab:"tailwind",cssType:"rgb",updateUrlTimeout:0,textOverlay:!1}},computed:{radixLums:function(){var t=this.lums;return Object.keys(this.lums).forEach((function(e,r){t[e].label=parseInt(r,10)+1})),t},isRadixPreset:function(){return JSON.stringify(this.presets.radix.getValues())==JSON.stringify(this.lumsValues)},isTailwindPreset:function(){return JSON.stringify(this.presets.tailwind.getValues())==JSON.stringify(this.lumsValues)},suggestedColors:function(){var t=this;if(!this.paletteBases.length)return[];var e=this.paletteBases[0];if("#000000"===e)return[];var r=B.hexToRGB(e),n=r.r,o=r.g,a=r.b,s=B.RGBToHSL(n,o,a),i=s.h,l=s.s,c=(s.l,i>179?i-180:i+180),u=B.HSLtoRGB(c,l,B.lightnessFromHSLum(c,l,40)),h=B.RGBToHex.apply(B,nt(Object.values(u).map(Math.round))),f=i+120;f>359&&(f-=360);var d=B.HSLtoRGB(f,l,B.lightnessFromHSLum(f,l,40)),p=B.RGBToHex.apply(B,nt(Object.values(d).map(Math.round))),m=i-120;m<0&&(m+=360);var v=B.HSLtoRGB(m,l,B.lightnessFromHSLum(m,l,40)),b=B.RGBToHex.apply(B,nt(Object.values(v).map(Math.round))),y=i+60;y>359&&(y-=360);var g=B.HSLtoRGB(y,l,B.lightnessFromHSLum(y,l,40)),x=B.RGBToHex.apply(B,nt(Object.values(g).map(Math.round))),w=i-60;w<0&&(w+=360);var C=B.HSLtoRGB(w,l,B.lightnessFromHSLum(w,l,40));return[B.RGBToHex.apply(B,nt(Object.values(C).map(Math.round))),b,h,p,x].filter((function(e){return-1===t.paletteBases.indexOf(e)}))},tabContent:function(){return"tailwind"===this.cssTab?this.cssTailwind:"radix"===this.cssTab?this.cssRadix:"vars"===this.cssTab?this.cssVars:"scss"===this.cssTab?this.cssScss:"stylus"===this.cssTab?this.cssStylus:"less"===this.cssTab?this.cssLess:void 0},paletteBases:function(){return this.updateUrl(),this.palettes.reduce((function(t,e){return t.push(e.hex),t}),[])},paletteNames:function(){return this.updateUrl(),this.palettes.reduce((function(t,e){return t.push(e.name),t}),[])},paletteLabels:function(){return this.updateUrl(),this.palettes.reduce((function(t,e){return t.push(e.label),t}),[])},paletteFilters:function(){return this.palettes.reduce((function(t,e){return t.push(e.filters),t}),[])},hasLockedLums:function(){return Object.keys(this.lockedByHex).length>0},lumsValues:function(){var t=this;return Object.keys(this.lums).reduce((function(e,r){return e.push(t.lums[r].lum),e}),[])},lumsCount:function(){return Object.keys(this.lums).length},exportConfig:function(){return JSON.stringify(this.cssColors)},cssColors:function(){var t=this,e={};return e.grayscale={name:"grayscale",swatches:Object.keys(this.lums).reduce((function(e,r){var n={lum:t.lums[r].lum,rgb:t.lums[r].rgb,hex:B.RGBToHex.apply(B,nt(t.lums[r].rgb)),hsl:Object.values(B.RGBToHSL.apply(B,nt(t.lums[r].rgb))),label:t.lums[r].label};return e[r]=n,e}),{})},this.palettes.forEach((function(r,n){var o=r.name;if(!o){var a=B.closestLum(t.lumsValues,50),s=rt(Object.keys(a)||Math.floor(t.lumsCount/2),1)[0],i=r.swatches[s],l=B.RGBToHSL.apply(B,nt(i.rgb)),c=l.h,u=l.s,h=l.l;o=B.colorName(c,u,h)}"grayscale"===o&&(o+="-alt"),e[o]=Object.keys(r.swatches).reduce((function(e,n){return t.storedSwatches[r.hex]&&t.storedSwatches[r.hex][n]&&(e.swatches[n]=t.storedSwatches[r.hex][n]),e}),tt(tt({},r),{},{name:o,swatches:{}}))})),e},cssTailwind:function(){var t=this,e=Object.keys(this.cssColors).reduce((function(e,r){e[r]={};var n=Object.keys(t.cssColors[r].swatches).length;return Object.keys(t.cssColors[r].swatches).forEach((function(o){var a=t.cssColors[r].swatches[o],s=t.getValueLabel(o,n);e[r][s]=t.formatSwatchColor(a),t.isLockedHex(a.hex)&&(e[r].DEFAULT=e[r][s])})),e}),{}),r=JSON.stringify(e,null," ");return localStorage.setItem(new Date,r),"// Grayscale Design palette: ".concat(window.location.href,"\nconst grayscale = ")+r},cssRadix:function(){var t=this,e=this.cssColors,r="// Grayscale Design palette: ".concat(window.location.href,"\n");try{r+=Object.keys(e).reduce((function(r,n){return r+="\nconst ".concat(n," = {\n"),Object.keys(e[n].swatches).forEach((function(o){var a=e[n].swatches[o],s=parseInt(o,10)+1;r+=" '".concat(n).concat(s,"': '").concat(t.formatSwatchColor(a),"',\n")})),r+="};\n",r+="\nconst ".concat(n,"Dark = {\n"),Object.keys(e[n].swatches).forEach((function(o){var a=e[n].swatches[o],s=100-a.lum,i=rt(a.hsl,2),l=i[0],c=i[1],u=B.lightnessFromHSLum(l,c,s),h=B.HSLtoRGB(a.hsl[0],a.hsl[1],u),f=h.r,d=h.g,p=h.b,m={lum:s,hex:B.RGBToHex(f,d,p),rgb:[f,d,p].map(Math.round),hsl:[l,c,u],label:parseInt(o,10)+1};r+=" '".concat(n).concat(m.label,"': '").concat(t.formatSwatchColor(m),"',\n")})),r+="};\n"}),"")}catch(t){}return r},cssVars:function(){var t=this,e=this.cssColors,r="/* Grayscale Design palette: ".concat(window.location.href," */\n:root {");return r+=Object.keys(e).reduce((function(r,n){r+="\n";var o=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(a){var s=e[n].swatches[a],i=t.getValueLabel(a,o);r+=" --".concat(n,"-").concat(i,": ").concat(t.formatSwatchColor(s),";\n")})),r}),""),r+="}"},cssScss:function(){var t=this,e=this.cssColors,r="// Grayscale Design palette: ".concat(window.location.href,"\n");return r+=Object.keys(e).reduce((function(r,n){var o=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(a){var s=e[n].swatches[a],i=t.getValueLabel(a,o);r+="$".concat(n,"-").concat(i,": ").concat(t.formatSwatchColor(s),";\n")})),r+="\n"}),"")},cssLess:function(){var t=this,e=this.cssColors,r="// Grayscale Design palette: ".concat(window.location.href,"\n");return r+=Object.keys(e).reduce((function(r,n){var o=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(a){var s=e[n].swatches[a],i=t.getValueLabel(a,o);r+="@".concat(n,"-").concat(i,": ").concat(t.formatSwatchColor(s),";\n")})),r+="\n"}),"")},cssStylus:function(){var t=this,e=this.cssColors,r="// Grayscale Design palette: ".concat(window.location.href,"\n");return r+=Object.keys(e).reduce((function(r,n){var o=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(a){var s=e[n].swatches[a],i=t.getValueLabel(a,o>=10);r+="".concat(n,"-").concat(i," = ").concat(t.formatSwatchColor(s),"\n")})),r+="\n"}),"")}},watch:{cssTab:function(t,e){var r;t&&t!==e&&null!==(r=this.lumsValues)&&void 0!==r&&r.length&&this.setLums(this.lumsValues)},isRadixPreset:function(t){t&&(this.cssTab="radix")},isTailwindPreset:function(t){t&&(this.cssTab="tailwind")},paletteBases:function(t){var e=this;Object.keys(this.lockedByHex).forEach((function(r){-1===t.indexOf(r)&&e.toggleLocked(r,!1)}))},hasLockedLums:function(t){t&&(this.autoDistribute=!1)},grayscaleJson:function(t){var e=[],r=[];if(t.colors.forEach((function(t){e.includes(t.hex)||(r.push(t),e.push(t.hex))})),r.lengthe.hex?-1:0})),!this.hasUpdatedLumsCount){this.lums={};for(var n=0;ne.hex?-1:0})),n.forEach((function(t,r){t.hex&&e.palettes.push({name:"",swatches:G(e.lums),hex:t.hex,filters:{hue:0,sat:0}})})),this.$nextTick((function(){e.$nextTick((function(){setTimeout((function(){e.dedupePalettes()}),1e3)}))}))},autoDistribute:function(t){t&&this.adjustLums(this.lums[0],this.lums[this.lumsCount-1].lum,this.lums[0].lum,0)},lums:{deep:!0,handler:function(t){var e=this;clearTimeout(this.updateSwatchTimeout),this.updateSwatchTimeout=setTimeout((function(){e.updateSwatchLums(t)}),250),this.updateUrl()}},lumsCount:function(t){var e=this;this.$nextTick((function(){e.updateSwatchLums()}))}},created:function(){var t=this;if(this.setLums(this.presets.default.getValues()),Object.keys(this.$route.query).length){var e=this.$route.query,r=e.lums,n=void 0===r?[]:r,o=e.palettes,a=void 0===o?[]:o,s=e.filters,i=void 0===s?[]:s,l=e.names,c=void 0===l?[]:l,u=e.labels,h=void 0===u?[]:u;n=n.split(",").filter((function(t){return!!t})).map(parseFloat),this.setLums(n);var f=a.split(",").filter((function(t){return!!t})),d=c.split(",").filter((function(t){return!!t})),p=h.split(",").filter((function(t){return!!t})),m=i.split(",").filter((function(t){return!!t}));f.forEach((function(e,r){var n=rt(m[r].split("|"),2),o=n[0],a=void 0===o?0:o,s=n[1],i=void 0===s?0:s;t.addPalette(),t.$nextTick((function(){t.palettes[r].name=d[r],t.palettes[r].hex=e,t.palettes[r].filters={hue:a,sat:i},t.palettes[r].label=p[r]}))}))}},mounted:function(){document.addEventListener("copy",this.onCopy.bind(this)),this.uploadFileUrl&&this.setFromUploadFile()},beforeDestroy:function(){document.removeEventListener("copy",this.onCopy.bind(this),null)},methods:{getValueLabel:function(t,e){return"radix"==this.cssTab?parseInt(t,10)+1:11==e&&10==t?"950":e>=10?0==t?"50":parseInt(t,10)+"00":parseInt(t,10)+1+"00"},removeAll:function(){confirm("Are you sure?")&&(this.palettes=[])},addSuggestedColor:function(t){var e=this;this.addPalette(),this.$nextTick((function(){e.palettes[0].hex=t}))},updateUrl:function(){var t=this;clearTimeout(this.updateUrlTimeout),this.updateUrlTimeout=setTimeout((function(){t.$nextTick((function(){var e={lums:t.lumsValues.map((function(t){return t.toFixed(2)})).join(","),palettes:t.paletteBases.join(","),filters:t.paletteFilters.map((function(t){return"".concat(t.hue,"|").concat(t.sat)})).join(","),names:t.paletteNames.join(","),labels:t.paletteLabels.join(",")};JSON.stringify(e)!==JSON.stringify(t.$route.query)&&t.$router.push({query:e})}))}),200)},formatSwatchColor:function(t){var e;return"hex"===this.cssType?null==t?void 0:t.hex:"rgb"===this.cssType?"rgb(".concat(null===(e=t.rgb)||void 0===e?void 0:e.join(", "),")"):"hsl"===this.cssType?"hsl(".concat(t.hsl[0],", ").concat(0===t.hsl[1]?0:t.hsl[1].toFixed(2),"%, ").concat(t.hsl[2].toFixed(2),"%)"):void 0},storeSwatches:function(t,e){this.$set(this.storedSwatches,e,t),this.updateUrl()},dedupePalettes:function(){var t=this;this.palettes.reverse(),this.$nextTick(setTimeout((function(){t.palettes.reverse()})))},getDupes:function(){var t=this,e={},r=[];return this.palettes.forEach((function(n,o){var a=!1;e[o]=[];for(var s=B.closestLum(t.lumsValues,50),i=Object.keys(s)[0],l=n.swatches[i],c=rt(l.rgb,3),u=c[0],h=c[1],f=c[2],d=Object.keys(e).length-1;d>=0;d--){for(var p=e[d].length-1;p>=0;p--){var m=0,v=rt(e[d][p],3),b=v[0],y=v[1],g=v[2];if(u<=b&&u>=b&&m++,h<=y&&h>=y&&m++,f<=g&&f>=g&&m++,m>=2){var x=t.palettes[o].hex,w=t.palettes[d].hex,C=B.lumFromRGB.apply(B,nt(Object.values(B.hexToRGB(x)))),k=B.lumFromRGB.apply(B,nt(Object.values(B.hexToRGB(w)))),_=Math.abs(50-C);Math.abs(50-k)<_&&-1===r.indexOf(o)?r.push(o):r.push(d),a=!0;break}}if(a)break}a||e[o].push(l.rgb)})),nt(new Set(r)).sort()},copy:function(t){this.copyText=t,this.$nextTick((function(){document.execCommand("copy")}))},onCopy:function(t){var e=this;this.copyText&&(t.preventDefault(),t.clipboardData.setData("text/plain",this.copyText),setTimeout((function(){e.copyText=!1}),2e3))},removePalette:function(t){this.palettes.splice(t,1)},togglePaletteMenu:function(t){this.shownPaletteMenu=this.shownPaletteMenu==t?null:t},toggleFilters:function(t){var e=this.showFilters.indexOf(t);-1!==e?this.showFilters.splice(e,1):this.showFilters=nt(new Set([].concat(nt(this.showFilters),[t])))},toggleLocked:function(t){var e=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isLockedHex(t)||!0!==r&&!1===r){var n=Object.keys(this.lockedByHex).reduce((function(r,n){var o=e.lockedByHex[n];if(t!==n)r[n]=o;else{var a=e.lums[o.lumIndex].label;e.lums[o.lumIndex]={lum:o.lastLum,rgb:e.lumToGrayscaleRGB(o.lastLum),label:a}}return r}),{});this.lockedByHex=n}else{var o=G(this.lockedByHex),a=Object.values(B.hexToRGB(t)),s=B.lumFromRGB.apply(B,a),i=B.closestLum(this.lumsValues,s),l=Object.keys(i)||[],c=rt(l,1),u=c[0];if(this.isLockedLum(u))return void alert("This color value is already LOCKED!");var h=Object.values(i)||[],f=rt(h,1),d=f[0];u=parseInt(u,10);var p=this.lums[u].label;this.lums[u]={lum:s,rgb:this.lumToGrayscaleRGB(s),label:p},o[t]={lumIndex:u,lastLum:d},this.lockedByHex=o}},isLockedHex:function(t){return-1!==Object.keys(this.lockedByHex).indexOf(t)},isLockedLum:function(t){return-1!==Object.values(this.lockedByHex).map((function(t){return t.lumIndex})).indexOf(parseInt(t,10))},getPickerHex:function(t){return 4===t.length?"#"+nt(t.replace("#","")).reduce((function(t,e){return t+e+e}),""):t},updateSwatchLums:function(t){var e=this;t=t||this.lums;var r=Object.keys(t).length;this.palettes=this.palettes.map((function(e){var n=Object.keys(e.swatches);n.forEach((function(n){n1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;this.lums=t.reduce((function(r,n,o){return r[o]={lum:n,rgb:e.lumToGrayscaleRGB(n),label:e.getValueLabel(o,t.length)},r}),{}),this.$nextTick((function(){e.adjustLums(0===r?n:e.lums[0].lum,r===e.lumsCount-1?n:e.lums[e.lumsCount-1].lum,100-n,r)}))},lumToGrayscaleRGB:function(t){var e=B.lightnessFromHSLum(0,0,t);return Object.values(B.HSLtoRGB(0,0,e)).map(Math.round)},adjustLums:function(t,e,r,n){var o=this;if(this.autoDistribute){var a=Object.keys(this.lums);a.pop(),a.shift(),a.forEach((function(a){if((a=parseInt(a,10))1&&void 0!==arguments[1]?arguments[1]:"#000000";this.palettes.unshift({name:"",swatches:G(this.lums),hex:e,filters:{hue:0,sat:0}}),this.isChoosingBase=0},onFileUpload:function(){var t=this;return new Promise(function(){var e,r=(e=Q().mark((function e(r,n){var o;return Q().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t.isUploading=!0,(o=t.$refs.upload)&&o.files&&!(o.files.length<=0)){e.next=5;break}return n("No file selected."),e.abrupt("return");case 5:if(t.uploadFile=o.files[0],!(t.uploadFile.size>5242880)){e.next=9;break}return n("Image is too big (max. 5 Mb)"),e.abrupt("return");case 9:return e.next=11,t.toBase64(t.uploadFile);case 11:return t.base64File=e.sent,e.abrupt("return",r(t.uploadFile));case 13:case"end":return e.stop()}}),e)})),function(){var t=this,r=arguments;return new Promise((function(n,o){var a=e.apply(t,r);function s(t){W(a,n,o,s,i,"next",t)}function i(t){W(a,n,o,s,i,"throw",t)}s(void 0)}))});return function(t,e){return r.apply(this,arguments)}}()).then((function(e){var r=function(t){var e=new FormData;return function t(e,r,n){if(!r||"object"!==P(r)||r instanceof Date||r instanceof File){var o=null==r?"":r;e.append(n,o)}else Object.keys(r).forEach((function(o){t(e,r[o],n?"".concat(n,"[").concat(o,"]"):o)}))}(e,t),e}({file:e});axios.post("/palette-uploads",r).then((function(e){var r=e.data;r.url?(t.uploadFileUrl=r.url,t.uploadFilePath=r.path,t.setFromUploadFile()):alert("Sorry! Please try again.")}))})).catch(alert).finally((function(){var e;t.isUploading=!1,null!==(e=t.$refs)&&void 0!==e&&e.upload&&(t.$refs.upload.value=null)}))},toBase64:function(t){return new Promise((function(e,r){var n=new FileReader;n&&t?(n.readAsDataURL(t),n.onload=function(){e(n.result)},n.onerror=function(t){r(t)}):r("No file provided")}))},setLumsCount:function(t){var e=this;if(!(t<3||t>20)){for(var r=G(this.lums),n=0;n0&&void 0!==arguments[0])||arguments[0],r="".concat(this.uploadFileUrl,"?sat=-100&colorquant=").concat(this.lumsCount,"&palette=json&colors=").concat(this.lumsCount);axios.get(r).then((function(e){var r=e.data;t.grayscaleJson=r})).then((function(){if(e){var r="".concat(t.uploadFileUrl,"?palette=json&colors=3");axios.get(r).then((function(e){var r=e.data;t.paletteJson=r}))}}))},getUploadFileUrl:function(t){return this.uploadFileUrl+t}}},it=Object(D.a)(st,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"App",on:{click:function(e){t.showPicker=null}}},[e("section",{staticClass:"mt-6"},[t._m(0),t._v(" "),e("div",{staticClass:"mt-6 md:mt-0 flex items-center justify-between"},[t._m(1),t._v(" "),e("div",{staticClass:"relative"},[e("button",{staticClass:"text-center h-7 leading-7 px-4 rounded text-xl text-blue-600 hover:opacity-75 focus:text-blue-900",on:{click:function(e){t.showLumsMenu=!t.showLumsMenu}}},[e("i",{staticClass:"far fa-lg fa-ellipsis-h"})]),t._v(" "),t.showLumsMenu?e("div",{staticClass:"absolute right-0 top-100 mr-4 mt-2 text-left shadow-lg bg-gray-500 py-4 min-w-9 rounded-b-lg rounded-tl-lg z-40"},[e("div",{staticClass:"text-sm block py-half-4 px-5 mr-5 whitespace-no-wrap text-gray-900 uppercase tracking-wide font-bold"},[t._v("\n Distribute\n ")]),t._v(" "),e("button",{class:["block w-full text-left py-half-4 px-5 whitespace-no-wrap",{"bg-gray-400 bg-opacity-75":t.autoDistribute},t.hasLockedLums?"text-gray-600 cursor-not-allowed":"text-gray-800 hover:bg-gray-400 hover:bg-opacity-75"],attrs:{title:t.hasLockedLums?"You have LOCKED colors":"",disabled:t.hasLockedLums},on:{click:function(e){t.autoDistribute=!0,t.showLumsMenu=!1}}},[e("i",{staticClass:"far fa-fw fa-hand-sparkles mr-4"}),t._v("Auto\n ")]),t._v(" "),e("button",{class:["block w-full text-left py-half-4 px-5 whitespace-no-wrap text-gray-800 hover:bg-gray-400 hover:bg-opacity-75",{"bg-gray-400 bg-opacity-75":!t.autoDistribute}],on:{click:function(e){t.autoDistribute=!1,t.showLumsMenu=!1}}},[e("i",{staticClass:"far fa-fw fa-hand-paper mr-4"}),t._v("Manual\n ")]),t._v(" "),e("div",{staticClass:"mt-5 text-sm block py-half-4 px-5 mr-5 whitespace-no-wrap text-gray-900 uppercase tracking-wide font-bold"},[t._v("\n Presets\n ")]),t._v(" "),t._l(t.presets,(function(r,n){return e("a",{key:n,class:["block py-half-4 px-5 whitespace-no-wrap",{"bg-gray-400 bg-opacity-75":JSON.stringify(r.getValues(t.lumsValues,t.lumsCount))==JSON.stringify(t.lumsValues)},t.hasLockedLums?"text-gray-600 cursor-not-allowed":"text-gray-800 hover:bg-gray-400 hover:bg-opacity-75"],attrs:{title:t.hasLockedLums?"You have LOCKED colors":"",href:"#".concat(n)},on:{mouseenter:function(e){t.autoDistribute=!1},click:function(e){e.preventDefault(),t.autoDistribute=!1,t.showLumsMenu=!1,t.setLums(r.getValues(t.lumsValues,t.lumsCount))}}},[e("i",{class:["fa-fw mr-4",r.icon]}),t._v(t._s(r.label))])})),t._v(" "),e("div",{staticClass:"mt-5 text-sm block py-half-4 px-5 mr-5 whitespace-no-wrap text-gray-900 uppercase tracking-wide font-bold"},[t._v("\n Contrast\n ")]),t._v(" "),e("button",{class:["block w-full text-left py-half-4 px-5 whitespace-no-wrap text-gray-800 hover:bg-gray-400 hover:bg-opacity-75",{"bg-gray-400 bg-opacity-75":t.textOverlay}],on:{click:function(e){t.textOverlay=!t.textOverlay,t.showLumsMenu=!1}}},[e("i",{staticClass:"fa fa-fw fa-font-case mr-4"}),t._v("Text Overlay\n ")])],2):t._e()])]),t._v(" "),e("grayscale-row",{staticClass:"mt-4 -mx-6 sm:mx-0",attrs:{lums:t.lums,"lums-values":t.lumsValues,"set-lums":t.setLums,"is-locked-lum":t.isLockedLum}}),t._v(" "),e("palette-row",{staticClass:"mt-7",attrs:{palette:{swatches:"radix"===t.cssTab?t.radixLums:t.lums},"text-overlay":t.textOverlay}}),t._v(" "),e("div",{staticClass:"text-center justify-between md:flex md:space-x-6"},[e("div",[e("button",{staticClass:"relative inline-block mt-7 border-1 border-gray-500 transition-all hover:shadow hover:border-gray-800 hover:bg-gray-800 duration-300 rounded py-4 px-5 text-gray-600 hover:text-white uppercase text-sm font-bold tracking-wide",on:{click:function(e){return t.setLumsCount(t.lumsCount-1)}}},[e("i",{staticClass:"far fa-lg fa-minus"})]),t._v(" "),e("span",{staticClass:"px-4 opacity-50"},[t._v(t._s(t.lumsCount)+" values")]),t._v(" "),e("button",{staticClass:"relative inline-block mt-7 border-1 border-gray-500 transition-all hover:shadow hover:border-gray-800 hover:bg-gray-800 duration-300 rounded py-4 px-5 text-gray-600 hover:text-white uppercase text-sm font-bold tracking-wide",on:{click:function(e){return t.setLumsCount(t.lumsCount+1)}}},[e("i",{staticClass:"far fa-lg fa-plus"})])]),t._v(" "),e("div",{staticClass:"md:text-right"},[e("label",{class:["relative inline-block mt-7 border-1 border-gray-500 transition-all hover:shadow hover:border-gray-800 hover:bg-gray-800 duration-300 rounded py-4 px-5 text-gray-600 hover:text-white uppercase text-sm font-bold tracking-wide",{"cursor-not-allowed pointer-events-none opacity-50":t.isUploading}],attrs:{for:"upload"}},[e("input",{ref:"upload",staticClass:"absolute inset-0 opacity-0 z-10 max-w-full",attrs:{disabled:t.isUploading,name:"upload",id:"upload",type:"file",accept:"image/x-png,image/gif,image/jpeg"},on:{change:t.onFileUpload}}),t._v("\n Upload an image\n ")]),t._v(" "),t._m(2)])]),t._v(" "),t.uploadFilePath?e("div",{staticClass:"mt-6 text-center"},[e("a",{staticClass:"relative inline-block shadow hover:shadow-2xl transition-shadow duration-300",attrs:{href:t.getUploadFileUrl("?sat=-100&colorquant=".concat(t.lumsCount)),target:"_blank",rel:"noopener"}},[e("img",{staticClass:"rounded-lg",attrs:{src:t.base64File||t.uploadFileUrl,alt:""}}),t._v(" "),e("img",{staticClass:"rounded-lg absolute inset-0 z-10 opacity-100 hover:opacity-0 transition-opacity duration-200",attrs:{src:t.getUploadFileUrl("?sat=-100&colorquant=".concat(t.lumsCount)),alt:""}})]),t._v(" "),e("p",{staticClass:"mt-2 text-xs mx-auto opacity-50 max-w-2xl"},[t._v("\n Click image to view and print. This is your image using just "+t._s(t.lumsCount)+" shades of\n gray (the grays used to generate your luminosity scale). Below, we added a few colors from\n your image!\n ")])]):t._e()],1),t._v(" "),e("section",{staticClass:"mt-10"},[e("h1",{staticClass:"font-bold uppercase tracking-wide"},[t._v("2.  Set your colors")]),t._v(" "),e("div",{staticClass:"mt-6 inline-block space-x-4"},[e("button",{staticClass:"border-1 border-blue-600 transition-all hover:shadow hover:border-blue-800 hover:bg-blue-800 duration-300 rounded py-4 px-5 text-blue-600 hover:text-white uppercase text-sm font-bold tracking-wide",on:{click:t.addPalette}},[t._v("\n Add A Color\n ")]),t._v(" "),t.palettes.length?e("a",{staticClass:"border-b border-red-500 text-red-600 hover:text-red-700 transition-all duration-200",attrs:{href:"#"},on:{click:t.removeAll}},[t._v("Remove All")]):t._e()]),t._v(" "),e("div",{staticClass:"space-x-4"},t._l(t.suggestedColors,(function(r){return e("button",{staticClass:"mt-4 transition-all hover:shadow border-1 duration-300 h-half-8 w-half-8 shadow-inner text-white text-opacity-50 hover:opacity-75",style:{"background-color":r,"border-color":r},on:{click:function(e){return t.addSuggestedColor(r)}}},[e("i",{staticClass:"fal fa-plus fa-sm"})])})),0),t._v(" "),e("div",{staticClass:"mt-8"},t._l(t.palettes,(function(r,n){return e("div",{key:t.palettes.length-n,staticClass:"mt-8"},[e("div",{staticClass:"min-h-8 md:flex justify-between items-center relative"},[e("div",{staticClass:"absolute right-0 top-0"},[e("button",{staticClass:"text-center h-7 my-half-6 rounded text-xl text-blue-600 p-4 hover:opacity-75 focus:text-blue-900",on:{click:function(e){return t.togglePaletteMenu(n)}}},[e("i",{staticClass:"far fa-lg fa-ellipsis-h"})]),t._v(" "),t.shownPaletteMenu==n?e("div",{staticClass:"absolute z-40 right-0 top-100 mr-4 -mt-3 text-left shadow-lg bg-gray-500 py-4 min-w-9 rounded-b-lg rounded-tl-lg z-10"},[e("a",{staticClass:"block py-half-4 px-5 whitespace-no-wrap text-gray-800 hover:bg-gray-400 hover:bg-opacity-75",attrs:{href:"#"},on:{click:function(e){e.preventDefault(),t.toggleFilters(n),t.togglePaletteMenu(n)}}},[e("i",{staticClass:"far fa-fw fa-sliders-h mr-4"}),t._v("Tweak Hue/Sat\n ")]),t._v(" "),e("hr",{staticClass:"my-3 border-gray-600 opacity-75"}),t._v(" "),e("a",{staticClass:"block py-half-4 px-5 whitespace-no-wrap text-red-800 hover:bg-gray-400 hover:bg-opacity-75",attrs:{href:"#"},on:{click:function(e){e.preventDefault(),t.removePalette(n),t.togglePaletteMenu(n)}}},[e("i",{staticClass:"far fa-fw fa-times mr-4"}),t._v("Remove\n ")])]):t._e()]),t._v(" "),e("div",{staticClass:"h-8 leading-8 mr-8 relative"},[e("button",{staticClass:"absolute right-full top-0 px-4 opacity-25 hover:opacity-100 focus:outline-none focus:shadow-none",attrs:{title:"Adjusts grayscale to match this color"},on:{click:function(e){return t.toggleLocked(r.hex)}}},[e("i",{class:["fa-fw",t.isLockedHex(r.hex)?"fa fa-lock":"far fa-unlock"]})]),t._v(" "),t.showPicker===n?e("hex-color-picker",{staticClass:"absolute bottom-full left-0 z-10",attrs:{color:r.hex},on:{click:function(t){t.stopPropagation()},"color-changed":function(t){r.hex=t.target.color}}}):t._e(),t._v(" "),e("button",{staticClass:"h-half-8 w-half-8 mr-4 inline-block align-middle shadow-inner",style:{background:r.hex},on:{click:function(e){e.stopPropagation(),t.showPicker=t.showPicker===n?null:n}}}),t._v(" "),e("input",{directives:[{name:"model",rawName:"v-model",value:r.hex,expression:"palette.hex"}],ref:"paletteHex".concat(n),refInFor:!0,staticClass:"font-mono leading-6 inline-block align-middle w-9 mr-5 text-gray-600 hover:text-gray-800 py-3 px-0 text-lg border-b border-gray-400 border-dashed hover:border-gray-600 focus:border-gray-600 focus:shadow-none relative z-30",attrs:{type:"text",placeholder:"#000000"},domProps:{value:r.hex},on:{input:function(e){e.target.composing||t.$set(r,"hex",e.target.value)}}}),t._v(" "),e("input",{directives:[{name:"model",rawName:"v-model",value:r.name,expression:"palette.name"}],ref:"paletteName".concat(n),refInFor:!0,staticClass:"font-mono leading-6 inline-block align-middle w-10 text-gray-600 hover:text-gray-800 py-3 px-0 text-lg border-b border-gray-400 border-dashed hover:border-gray-600 focus:border-gray-600 focus:shadow-none",attrs:{type:"text",placeholder:"Add label"},domProps:{value:r.name},on:{input:function(e){e.target.composing||t.$set(r,"name",e.target.value)}}})],1),t._v(" "),t.showFilters.includes(n)?e("div",{staticClass:"flex md:mr-8 space-x-5"},[e("div",{staticClass:"text-center leading-5 mt-4 w-1/2 md:min-w-10 lg:min-w-11"},[e("label",{staticClass:"block font-mono text-xs opacity-50 uppercase"},[t._v("Hue ("+t._s(r.filters.hue>0?"+".concat(r.filters.hue):r.filters.hue)+"°)")]),t._v(" "),e("input",{directives:[{name:"model",rawName:"v-model",value:r.filters.hue,expression:"palette.filters.hue"}],staticClass:"p-half-4 w-full",attrs:{type:"range",min:"-50",step:"0.1",max:"50"},domProps:{value:r.filters.hue},on:{__r:function(e){return t.$set(r.filters,"hue",e.target.value)}}})]),t._v(" "),e("div",{staticClass:"text-center leading-5 mt-4 w-1/2 md:min-w-10 lg:min-w-11"},[e("label",{staticClass:"block font-mono text-xs opacity-50 uppercase"},[t._v("Saturation ("+t._s(r.filters.sat)+"%)")]),t._v(" "),e("input",{directives:[{name:"model",rawName:"v-model",value:r.filters.sat,expression:"palette.filters.sat"}],staticClass:"p-half-4 w-full",attrs:{type:"range",min:"-30",step:"0.1",max:"30"},domProps:{value:r.filters.sat},on:{__r:function(e){return t.$set(r.filters,"sat",e.target.value)}}})])]):t._e()]),t._v(" "),e("palette-row",{staticClass:"mt-4",attrs:{palette:r,"hide-lum":"","is-locked":t.isLockedHex(r.hex),"store-swatches":function(e){return t.storeSwatches(e,r.hex)}}})],1)})),0)]),t._v(" "),e("section",{staticClass:"mt-10"},[e("h1",{staticClass:"font-bold uppercase tracking-wide"},[t._v("3.  Export Your Colors")]),t._v(" "),e("form",{attrs:{action:"/export-svgs",target:"_blank",method:"POST"}},[e("input",{directives:[{name:"model",rawName:"v-model",value:t.exportConfig,expression:"exportConfig"}],staticClass:"hidden",attrs:{type:"text",name:"palettes"},domProps:{value:t.exportConfig},on:{input:function(e){e.target.composing||(t.exportConfig=e.target.value)}}}),t._v(" "),e("input",{directives:[{name:"model",rawName:"v-model",value:t.csrf,expression:"csrf"}],attrs:{type:"hidden",name:"_token"},domProps:{value:t.csrf},on:{input:function(e){e.target.composing||(t.csrf=e.target.value)}}}),t._v(" "),e("button",{staticClass:"mt-6 border-1 border-blue-600 transition-all hover:shadow hover:border-blue-800 hover:bg-blue-800 duration-300 rounded py-4 px-5 text-blue-600 hover:text-white uppercase text-sm font-bold tracking-wide",attrs:{type:"submit"}},[t._v("\n Export Svgs\n ")])]),t._v(" "),e("div",{staticClass:"mt-8 md:flex justify-between md:space-x-7"},[e("div",{staticClass:"space-x-5"},[e("button",{class:["tailwind"===t.cssTab?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssTab="tailwind"}}},[t._v("\n Tailwind CSS\n ")]),t._v(" "),e("button",{class:["radix"===t.cssTab?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssTab="radix"}}},[t._v("\n Radix UI\n ")]),t._v(" "),e("button",{class:["vars"===t.cssTab?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssTab="vars"}}},[t._v("\n CSS Variables\n ")]),t._v(" "),e("button",{class:["stylus"===t.cssTab?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssTab="stylus"}}},[t._v("\n Stylus\n ")]),t._v(" "),e("button",{class:["scss"===t.cssTab?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssTab="scss"}}},[t._v("\n SCSS\n ")]),t._v(" "),e("button",{class:["less"===t.cssTab?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssTab="less"}}},[t._v("\n LESS\n ")])]),t._v(" "),e("div",{staticClass:"mt-5 md:mt-0 space-x-5"},[e("button",{class:["rgb"===t.cssType?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssType="rgb"}}},[t._v("\n RGB\n ")]),t._v(" "),e("button",{class:["hex"===t.cssType?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssType="hex"}}},[t._v("\n HEX\n ")]),t._v(" "),e("button",{class:["hsl"===t.cssType?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssType="hsl"}}},[t._v("\n HSL\n ")])])]),t._v(" "),e("div",{staticClass:"bg-gray-300 rounded-lg p-6 text-gray-800 overflow-auto"},[e("button",{staticClass:"relative z-20 bg-gray-200 float-right rounded border-1 text-blue-600 border-blue-600 px-5 py-4 transition-all hover:shadow hover:border-blue-800 hover:bg-blue-800 hover:text-white duration-300 uppercase text-sm font-bold tracking-wide",on:{click:function(e){return t.copy(t.tabContent)}}},[e("i",{class:["fa fa-fw mr-3",t.copyText?"fa-check":"fa-clone"]}),t._v(t._s(t.copyText?"Copied!":"Copy")+"\n ")]),t._v(" "),e("pre",{staticClass:"relative z-10"},[t._v(t._s(t.tabContent))])])]),t._v(" "),t._m(3),t._v(" "),e("section",{staticClass:"mt-9 rich-text",domProps:{innerHTML:t._s(t.cms.content)}})])}),[function(){var t=this._self._c;return t("div",{staticClass:"md:flex justify-between"},[t("h1",{staticClass:"mb-6 mr-5 font-bold uppercase tracking-wide"},[this._v("\n 1.  Set Your Luminance-Based Grayscale\n ")]),this._v(" "),t("a",{staticClass:"leading-7 h-7 box-content whitespace-nowrap text-blue-600 hover:bg-white duration-300 inline-block pl-4 pr-5 rounded-full border-1 border-blue-500 bg-blue-200 uppercase text-sm font-bold tracking-wide",attrs:{href:"https://www.loom.com/share/3da3164377e84cbe87c7d0281c823e5e",target:"_blank"}},[t("i",{staticClass:"fa fa-play-circle mr-3 opacity-75"}),this._v("Watch Demo"),t("i",{staticClass:"ml-3 fa fa-xs fa-external-link opacity-50"})])])},function(){var t=this._self._c;return t("p",{staticClass:"flex-shrink"},[this._v("\n Drag the sliders below or use the\n "),t("i",{staticClass:"far fa-ellipsis-h mx-2 text-blue-600"}),this._v(" menu.\n ")])},function(){var t=this._self._c;return t("p",{staticClass:"text-sm leading-6 mt-3 w-double-10 max-w-full mx-auto"},[t("span",{staticClass:"opacity-50"},[this._v("\n Max filesize: 5MB. Upload an image to auto-generate your grayscale and colors.\n ")]),this._v(" "),t("a",{staticClass:"whitespace-no-wrap text-gray-500 transition-colors duration-300 hover:text-gray-700",attrs:{href:"https://www.imgix.com/",target:"_blank",title:"imgix"}},[this._v("Powered by\n "),t("img",{staticClass:"inline h-double-4",attrs:{src:"/img/imgix_logo1_small.png",alt:"imgix"}})])])},function(){var t=this._self._c;return t("section",{staticClass:"mt-9 text-center leading-7"},[t("div",{staticClass:"text-3xl font-bold"},[this._v("Have feedback?")]),this._v(" "),t("a",{staticClass:"inline-block mt-5 leading-6 sm:leading-7 sm:mt-4 text-xl sm:text-2xl sm:border-b-1 border-gold-300 transition-all duration-300 text-gold-600 hover:text-gold-500",attrs:{href:"mailto:feedback@grayscale.design"}},[t("i",{staticClass:"fa fa-send mr-4"}),this._v("Send us an email\n ")])])}],!1,null,null,null);e.default=it.exports},tQfU:function(t,e,r){"use strict";function n(t){return function(t){if(Array.isArray(t))return s(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||a(t)||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 o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,o,a,s,i=[],l=!0,c=!1;try{if(a=(r=r.call(t)).next,0===e){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(i.push(n.value),i.length!==e);l=!0);}catch(t){c=!0,o=t}finally{try{if(!l&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw o}}return i}}(t,e)||a(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){if(t){if("string"==typeof t)return s(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?s(t,e):void 0}}function s(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r1&&void 0!==arguments[1]?arguments[1]:180,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:50,n=p(e,r,t),o=m(e,r,n),a=o.r,s=o.g,i=o.b;return{r:a,g:s,b:i}}function d(t,e){for(var r=100,n=null,o=null,a=t.length-1;a>=0;a--){var s=Math.abs(t[a]-e);s=0;s--){var i=h.apply(void 0,n(Object.values(m(t,e,s)))),l=Math.abs(r-i);l=a-5;s-=.01){var c=h.apply(void 0,n(Object.values(m(t,e,s)))),u=Math.abs(r-c);u=0&&t<60?(s=n,i=o,l=0):t>=60&&t<120?(s=o,i=n,l=0):t>=120&&t<180?(s=0,i=n,l=o):t>=180&&t<240?(s=0,i=o,l=n):t>=240&&t<300?(s=o,i=0,l=n):t>=300&&t<360&&(s=n,i=0,l=o),{r:Math.round(255*(s+a)),g:Math.round(255*(i+a)),b:Math.round(255*(l+a))}}function v(t,e,r){var n=u(t,e,r),o=n.h,a=n.s,s=(n.l,m(o,a,p(o,a,h(t,e,r))));return{r:s.r,g:s.g,b:s.b}}function b(t,e,r,n,o){var a=a(t,e,r);return{falseColorGrayscale:a,falseColor:function(t,e,r){for(var n=h(t,t,t),o=0,a=1/0,s=0;s<=100;s+=.1){var i=m(e,r,s),l=h(i.r,i.g,i.b),c=Math.abs(l-n);c=90?"white":e<=10&&r<=70||0===e?"gray":r<=15?"black":t>=0&&t<=15||t>=346?"red":t>=16&&t<=35?e<90?"brown":"orange":t>=36&&t<=54?e<90?"brown":"yellow":t>=55&&t<=155?"green":t>=156&&t<=190?"teal":t>=191&&t<=260?"blue":t>=261&&t<=290?"purple":t>=291&&t<=345?"pink":void 0}function g(t){return-.011*Math.pow(t,3)+.888*Math.pow(t,2)+10.267*t+27.629}r.r(e),r.d(e,"hexToRGB",(function(){return i})),r.d(e,"RGBToHex",(function(){return c})),r.d(e,"RGBToHSL",(function(){return u})),r.d(e,"lumFromRGB",(function(){return h})),r.d(e,"RGBFromLum",(function(){return f})),r.d(e,"closestLum",(function(){return d})),r.d(e,"lightnessFromHSLum",(function(){return p})),r.d(e,"HSLtoRGB",(function(){return m})),r.d(e,"falseColorGrayscale",(function(){return v})),r.d(e,"generateFalseColorGrayscale",(function(){return b})),r.d(e,"colorName",(function(){return y}));!function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;t.map((function(t){return Math.round(g(t)*Math.pow(10,e))/Math.pow(10,e)}))}(function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:4,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.66,n=[],o=2*e/(t-1),a=0;a("#"===t[0]&&(t=t.substr(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:1}:{r:parseInt(t.substr(0,2),16),g:parseInt(t.substr(2,2),16),b:parseInt(t.substr(4,2),16),a:1}),o=({h:t,s:e,v:r,a:n})=>{const o=(200-e)*r/100;return{h:t,s:o>0&&o<200?e*r/100/(o<=100?o:200-o)*100:0,l:o/2,a:n}},a=t=>{const{h:e,s:r,l:n}=o(t);return`hsl(${e}, ${r}%, ${n}%)`},s=({h:t,s:e,v:r,a:n})=>{t=t/360*6,e/=100,r/=100;const o=Math.floor(t),a=r*(1-e),s=r*(1-(t-o)*e),i=r*(1-(1-t+o)*e),l=o%6;return{r:Math.round(255*[r,s,a,a,i,r][l]),g:Math.round(255*[i,r,r,s,a,a][l]),b:Math.round(255*[a,a,i,r,r,s][l]),a:n}},i=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},l=({r:t,g:e,b:r})=>"#"+i(t)+i(e)+i(r),c=({r:t,g:e,b:r,a:n})=>{const o=Math.max(t,e,r),a=o-Math.min(t,e,r),s=a?o===t?(e-r)/a:o===e?2+(r-t)/a:4+(t-e)/a:0;return{h:Math.round(60*(s<0?s+6:s)),s:Math.round(o?a/o*100:0),v:Math.round(o/255*100),a:n}},u=(t,e)=>{if(t===e)return!0;for(const r in t)if(t[r]!==e[r])return!1;return!0},h=t=>{const e=document.createElement("template");return e.innerHTML=t,e},f=(t,e)=>{const r=t.shadowRoot||t.attachShadow({mode:"open"});return r.appendChild(e.content.cloneNode(!0)),r},d=(t,e=0,r=1)=>t>r?r:t:host{outline:none}:host(:focus) [part=pointer]{transform:translate(-50%, -50%) scale(1.1)}#interactive{position:absolute;left:0;top:0;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}[part=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%, -50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part=pointer]::after{display:block;content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;background-color:currentColor}
');let m=!1;const v=t=>"touches"in t,b=(t,e,r)=>{t.dispatchEvent(new CustomEvent("move",{bubbles:!0,detail:t.getMove(e,r)}))},y=(t,e)=>{const r=v(e)?e.touches[0]:e,n=t.getBoundingClientRect();b(t,{left:d((r.pageX-(n.left+window.pageXOffset))/n.width),top:d((r.pageY-(n.top+window.pageYOffset))/n.height)})};class g extends HTMLElement{constructor(){super(),this.pointer=f(this,p).querySelector("[part=pointer]").style,this.addEventListener("mousedown",this),this.addEventListener("touchstart",this),this.addEventListener("keydown",this),this.setAttribute("role","slider"),this.setAttribute("tabindex","0")}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(m?"touchmove":"mousemove",this),e(m?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(m&&!v(t))&&(m||(m=v(t)),!0))(t)||!m&&0!=t.button)return;y(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),y(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const r=e.keyCode;r>40||t.xy&&r<37||r<33||(e.preventDefault(),b(t,{left:39===r?.01:37===r?-.01:34===r?.05:33===r?-.05:35===r?1:36===r?-1:0,top:40===r?.01:38===r?-.01:0},!0))})(this,t)}}setStyles(t){for(const e in t)this.pointer.setProperty(e,t[e])}}const x=h("");customElements.define("vc-hue",class extends g{constructor(){super(),f(this,x),this.setAttribute("aria-label","Hue"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax","360")}connectedCallback(){if(this.hasOwnProperty("hue")){const t=this.hue;delete this.hue,this.hue=t}}get xy(){return!1}get hue(){return this._h}set hue(t){this._h=t,this.setStyles({left:t/360*100+"%",color:a({h:t,s:100,v:100,a:1})}),this.setAttribute("aria-valuenow",""+Math.round(t))}getMove(t,e){return{h:e?d(this.hue+360*t.left,0,360):360*t.left}}});const w=h("");customElements.define("vc-saturation",class extends g{constructor(){super(),f(this,w),this.setAttribute("aria-label","Color")}connectedCallback(){if(this.hasOwnProperty("hsva")){const t=this.hsva;delete this.hsva,this.hsva=t}}get xy(){return!0}get hsva(){return this._hsva}set hsva(t){this._hsva=t,this.style.backgroundColor=a({h:t.h,s:100,v:100,a:1}),this.setStyles({top:100-t.v+"%",left:t.s+"%",color:a(t)}),this.setAttribute("aria-valuetext",`Saturation ${Math.round(t.s)}%, Brightness ${Math.round(t.v)}%`)}getMove(t,e){return{s:e?d(this.hsva.s+100*t.left,0,100):100*t.left,v:e?d(this.hsva.v-100*t.top,0,100):Math.round(100-100*t.top)}}});const C=h('\n\n\n\n'),k=Symbol("h"),_=Symbol("s"),L=Symbol("same"),S=Symbol("color"),O=Symbol("hsva"),T=Symbol("change"),j=Symbol("render");class E extends HTMLElement{constructor(){super();const t=f(this,C);t.addEventListener("move",this),this[_]=t.children[1],this[k]=t.children[2]}static get observedAttributes(){return["color"]}get color(){return this[S]}set color(t){if(!this[L](t)){const e=this.colorModel.toHsva(t);this[j](e),this[T](t,e)}}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,r){const n=this.colorModel.fromAttr(r);this[L](n)||(this.color=n)}handleEvent(t){const e=Object.assign({},this[O],t.detail);let r;this[j](e),u(e,this[O])||this[L](r=this.colorModel.fromHsva(e))||this[T](r,e)}[L](t){return this.color&&this.colorModel.equal(t,this.color)}[j](t){this[_].hsva=t,this[k].hue=t.h}[T](t,e){this[S]=t,this[O]=e,this.dispatchEvent(new CustomEvent("color-changed",{detail:{value:t}}))}}const M={defaultColor:"#000",toHsva:t=>c(n(t)),fromHsva:t=>l(s(t)),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||u(n(t),n(e)),fromAttr:t=>t};class F extends E{get colorModel(){return M}}function P(t){return(P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}customElements.define("hex-color-picker",class extends F{});var B=r("tQfU"),G=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return JSON.parse(JSON.stringify(t||e))},A={name:"SwatchSquare",props:{index:Number,swatch:Object,isFirst:Boolean,isLast:Boolean,isClosest:Boolean,copy:Function,copied:String,textOverlay:Boolean},methods:{getBgColor:function(t){return"rgb(".concat(t.rgb.join(","),")")}}},D=r("KHd+"),R=Object(D.a)(A,(function(){var t=this,e=t._self._c;return t.swatch.rgb?e("div",{class:["SwatchSquare",{"is-closest":t.isClosest}]},[e("button",{class:["w-full h-9 shadow-inner transition-colors duration-150 relative z-10",t.isFirst?"rounded-l-lg":t.isLast?"rounded-r-lg":"",{"pointer-events-none":!t.swatch.hex}],style:{color:t.getBgColor(t.swatch),backgroundColor:t.getBgColor(t.swatch)},attrs:{type:"button"},on:{click:function(e){return t.copy(t.swatch.hex)}}},[t.swatch.hex?e("span",{staticClass:"absolute text-sm text-gray-700 bg-white px-3 py-half-2 shadow rounded top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"},[t._v("\n "+t._s(t.swatch.hex)+"\n ")]):t._e(),t._v(" "),e("div",{staticClass:"absolute inset-0 flex flex-col items-center justify-center"},[t.textOverlay?e("strong",{staticClass:"block text-black text-lg"},[e("i",{staticClass:"fa fa-font-case"})]):t._e(),t._v(" "),t.textOverlay?e("strong",{staticClass:"block text-white text-lg"},[e("i",{staticClass:"fa fa-font-case"})]):t._e()]),t._v(" "),t.swatch.hex?e("span",{class:["absolute text-sm text-gray-700 bg-white px-3 py-half-2 shadow rounded top-1/2 left-1/2 transform -translate-x-1/2",t.copied===t.swatch.hex?"translate-y-full opacity-100":"opacity-0 -translate-y-1/2"]},[t._v("\n "+t._s(t.swatch.hex)+"\n ")]):t._e()]),t._v(" "),t._t("default")],2):t._e()}),[],!1,null,null,null).exports;function H(t){return(H="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function I(){I=function(){return e};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value},a="function"==typeof Symbol?Symbol:{},s=a.iterator||"@@iterator",i=a.asyncIterator||"@@asyncIterator",l=a.toStringTag||"@@toStringTag";function c(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(t){c=function(t,e,r){return t[e]=r}}function u(t,e,r,n){var a=e&&e.prototype instanceof v?e:v,s=Object.create(a.prototype),i=new j(n||[]);return o(s,"_invoke",{value:L(t,r,i)}),s}function h(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}e.wrap=u;var f="suspendedStart",d="executing",p="completed",m={};function v(){}function b(){}function y(){}var g={};c(g,s,(function(){return this}));var x=Object.getPrototypeOf,w=x&&x(x(E([])));w&&w!==r&&n.call(w,s)&&(g=w);var C=y.prototype=v.prototype=Object.create(g);function k(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function _(t,e){function r(o,a,s,i){var l=h(t[o],t,a);if("throw"!==l.type){var c=l.arg,u=c.value;return u&&"object"==H(u)&&n.call(u,"__await")?e.resolve(u.__await).then((function(t){r("next",t,s,i)}),(function(t){r("throw",t,s,i)})):e.resolve(u).then((function(t){c.value=t,s(c)}),(function(t){return r("throw",t,s,i)}))}i(l.arg)}var a;o(this,"_invoke",{value:function(t,n){function o(){return new e((function(e,o){r(t,n,e,o)}))}return a=a?a.then(o,o):o()}})}function L(e,r,n){var o=f;return function(a,s){if(o===d)throw Error("Generator is already running");if(o===p){if("throw"===a)throw s;return{value:t,done:!0}}for(n.method=a,n.arg=s;;){var i=n.delegate;if(i){var l=S(i,n);if(l){if(l===m)continue;return l}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===f)throw o=p,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=d;var c=h(e,r,n);if("normal"===c.type){if(o=n.done?p:"suspendedYield",c.arg===m)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(o=p,n.method="throw",n.arg=c.arg)}}}function S(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=t,S(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),m;var a=h(o,e.iterator,r.arg);if("throw"===a.type)return r.method="throw",r.arg=a.arg,r.delegate=null,m;var s=a.arg;return s?s.done?(r[e.resultName]=s.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,m):s:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,m)}function O(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function T(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function j(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(O,this),this.reset(!0)}function E(e){if(e||""===e){var r=e[s];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,a=function r(){for(;++o=0;--a){var s=this.tryEntries[a],i=s.completion;if("root"===s.tryLoc)return o("end");if(s.tryLoc<=this.prev){var l=n.call(s,"catchLoc"),c=n.call(s,"finallyLoc");if(l&&c){if(this.prev=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),T(r),m}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;T(r)}return o}}throw Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:E(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),m}},e}function U(t,e,r,n,o,a,s){try{var i=t[a](s),l=i.value}catch(t){return void r(t)}i.done?e(l):Promise.resolve(l).then(n,o)}function N(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,o,a,s,i=[],l=!0,c=!1;try{if(a=(r=r.call(t)).next,0===e){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(i.push(n.value),i.length!==e);l=!0);}catch(t){c=!0,o=t}finally{try{if(!l&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw o}}return i}}(t,e)||$(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function V(t){return function(t){if(Array.isArray(t))return J(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||$(t)||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 $(t,e){if(t){if("string"==typeof t)return J(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?J(t,e):void 0}}function J(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r0&&void 0!==arguments[0]?arguments[0]:"#000000";this.palette.hex=4===t.length?"#"+V(t.replace("#","")).reduce((function(t,e){return t+e+e}),""):t,this.updateBase(this.palette.hex)}},"palette.hex":{handler:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"#000000";this.palette.picker=4===t.length?"#"+V(t.replace("#","")).reduce((function(t,e){return t+e+e}),""):t,this.updateBase(this.palette.picker)}},lums:{deep:!0,handler:function(t){var e=this;this.$nextTick((function(){e.generateSwatches(),e.paletteClone.closest=B.closestLum(t,e.paletteClone.lum)}))}}},computed:{swatches:function(){return this.paletteClone&&this.paletteClone.swatches||this.palette&&this.palette.swatches||{}},lums:function(){return Object.values(this.palette.swatches).reduce((function(t,e){return t.push(e.lum),t}),[])}},mounted:function(){document.addEventListener("copy",this.onCopy.bind(this))},beforeDestroy:function(){document.removeEventListener("copy",this.onCopy.bind(this),null)},methods:{copy:function(t){this.copyText=t,this.$nextTick((function(){document.execCommand("copy")}))},onCopy:function(t){var e=this;this.copyText&&(t.preventDefault(),t.clipboardData.setData("text/plain",this.copyText),setTimeout((function(){e.copyText=""}),500))},updateBase:function(t){this.paletteClone=Object.assign({},this.paletteClone,this.palette,{hex:t,picker:t}),this.paletteClone.rgb=B.hexToRGB(t);var e=Object.values(this.paletteClone.rgb);this.paletteClone.hsl=B.RGBToHSL.apply(B,e),this.paletteClone.lum=B.lumFromRGB.apply(B,e),this.paletteClone.closest=B.closestLum(this.lums,this.paletteClone.lum),this.$nextTick(this.generateSwatches)},generateSwatches:function(){var t=this;if(this.paletteClone.hsl){var e=function(){var e=t.paletteClone.hsl,r=N(Object.keys(t.paletteClone.closest)||[],1)[0];Object.keys(t.paletteClone.swatches).forEach(function(){var n,o=(n=I().mark((function n(o){var a,s,i,l,c,u,h;return I().wrap((function(n){for(;;)switch(n.prev=n.next){case 0:return a=t.paletteClone.swatches[o],s=Math.abs(r-o),(i=e.h+parseFloat(t.paletteClone.filters.hue)*s)<0&&(i=360-i),i>360&&(i-=360),(l=e.s+parseFloat(t.paletteClone.filters.sat)*s)<0&&(l=Math.max(l,0)),l>100&&(l=Math.min(l,100)),n.next=10,B.lightnessFromHSLum(i,l,a.lum);case 10:c=n.sent,u=B.HSLtoRGB(i,l,c),h=Object.values(u).map(Math.round),t.paletteClone.swatches[o].hsl=[i,l,c],t.paletteClone.swatches[o].hex=B.RGBToHex.apply(B,V(h)),t.paletteClone.swatches[o].rgb=h,t.paletteClone.swatches[o].oklch=Object.values(B.RGBToOKLCH.apply(B,V(h))),t.paletteClone.swatches[o].lum=B.lumFromRGB.apply(B,V(t.paletteClone.swatches[o].rgb));case 18:case"end":return n.stop()}}),n)})),function(){var t=this,e=arguments;return new Promise((function(r,o){var a=n.apply(t,e);function s(t){U(a,r,o,s,i,"next",t)}function i(t){U(a,r,o,s,i,"throw",t)}s(void 0)}))});return function(t){return o.apply(this,arguments)}}()),t.storeSwatches(t.paletteClone.swatches)};window.requestAnimationFrame?window.requestAnimationFrame(e):(clearTimeout(this.generateTimeout),this.generateTimeout=setTimeout(e,50))}},isClosest:function(t){return t==N(Object.keys(this.paletteClone.closest||{})||[],1)[0]}}},z=Object(D.a)(q,(function(){var t=this,e=t._self._c;return e("div",{class:["PaletteRow",{"is-locked":t.isLocked}]},[e("div",{staticClass:"flex items-center justify-between"},t._l(t.swatches,(function(r,n){return e("swatch-square",{key:n,staticClass:"w-full",attrs:{copy:t.copy,copied:t.copyText,swatch:r,"text-overlay":t.textOverlay,index:parseInt(n,10),"is-first":0==n,"is-last":n==Object.keys(t.swatches).length-1,"is-closest":t.isClosest(n)}},[e("div",{staticClass:"font-mono opacity-50 text-gray-800 text-sm text-center px-2 leading-5 mt-4 mb-3"},[e("span",{staticClass:"hidden md:inline-block"},[t._v(t._s(t.palette.name?t.palette.name+"-":""))]),t._v(t._s(r.label)+"\n ")]),t._v(" "),t.hideLum?t._e():e("div",{staticClass:"font-mono opacity-50 text-gray-600 text-xs text-center leading-5"},[t._v("\n "+t._s(r.lum?r.lum.toFixed(2):0==r.lum?"0.00":"--")+"%\n ")])])})),1)])}),[],!1,null,null,null).exports,Y=new Image;Y.src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";var K={name:"GrayscaleRow",props:{lums:Object,lumsValues:Array,setLums:Function,isLockedLum:Function},data:function(){return{isDragging:null,dragTimeout:0,swatchPositions:{}}},watch:{lumsValues:function(t){this.setSwatchPositionsFromLumsValues(t)}},created:function(){this.setSwatchPositionsFromLumsValues()},methods:{setSwatchPositionsFromLumsValues:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;t=t||this.lumsValues,this.swatchPositions=t.reduce((function(t,e,r){return t[r]=e,t}),{})},getSwatchPosition:function(t){var e=this.swatchPositions[t];return"".concat(100-e,"%")},onDragStart:function(t,e){this.isDragging=e,t.dataTransfer.setDragImage(Y,0,0)},getPos:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"pageX";e=parseInt(e,10);var n=t.target,o=n.parentElement;if(o){var a=o.clientWidth,s=o.parentElement;if(s){var i=t[r]-o.offsetLeft-s.offsetLeft;if(i<=0||i>=a)return t.preventDefault(),i<=0?0:100;var l=parseFloat(i/a*100);return l>100?100:l<0?0:l}}},onDragEnd:function(t,e){if((this.isDragging=null,t.screenX)&&navigator.userAgent.toLowerCase().indexOf("firefox")>-1){var r=this.getPos(t,e,"screenX");t.screenX&&this.prepareAdjustLums(e,r)}},onDrag:function(t,e){if(t.screenX){var r=this.getPos(t,e);this.prepareAdjustLums(e,r)}},prepareAdjustLums:function(t,e){var r=this,n=G(this.lums);n[t].lum=100-e,n[t].rgb=this.lumToGrayscaleRGB(100-e),this.swatchPositions[t]=100-e;var o=Object.keys(this.swatchPositions).reduce((function(t,e){return t.push(r.swatchPositions[e]),t}),[]);clearTimeout(this.setLumsTimeout),this.setLumsTimeout=setTimeout((function(){r.setLums(o,parseInt(t,10),e)}),50)},lumToGrayscaleRGB:function(t){var e=B.lightnessFromHSLum(0,0,t);return Object.values(B.HSLtoRGB(0,0,e)).map(Math.round)}}};function X(t){return(X="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function Q(){Q=function(){return e};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value},a="function"==typeof Symbol?Symbol:{},s=a.iterator||"@@iterator",i=a.asyncIterator||"@@asyncIterator",l=a.toStringTag||"@@toStringTag";function c(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(t){c=function(t,e,r){return t[e]=r}}function u(t,e,r,n){var a=e&&e.prototype instanceof v?e:v,s=Object.create(a.prototype),i=new j(n||[]);return o(s,"_invoke",{value:L(t,r,i)}),s}function h(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}e.wrap=u;var f="suspendedStart",d="executing",p="completed",m={};function v(){}function b(){}function y(){}var g={};c(g,s,(function(){return this}));var x=Object.getPrototypeOf,w=x&&x(x(E([])));w&&w!==r&&n.call(w,s)&&(g=w);var C=y.prototype=v.prototype=Object.create(g);function k(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function _(t,e){function r(o,a,s,i){var l=h(t[o],t,a);if("throw"!==l.type){var c=l.arg,u=c.value;return u&&"object"==X(u)&&n.call(u,"__await")?e.resolve(u.__await).then((function(t){r("next",t,s,i)}),(function(t){r("throw",t,s,i)})):e.resolve(u).then((function(t){c.value=t,s(c)}),(function(t){return r("throw",t,s,i)}))}i(l.arg)}var a;o(this,"_invoke",{value:function(t,n){function o(){return new e((function(e,o){r(t,n,e,o)}))}return a=a?a.then(o,o):o()}})}function L(e,r,n){var o=f;return function(a,s){if(o===d)throw Error("Generator is already running");if(o===p){if("throw"===a)throw s;return{value:t,done:!0}}for(n.method=a,n.arg=s;;){var i=n.delegate;if(i){var l=S(i,n);if(l){if(l===m)continue;return l}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===f)throw o=p,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=d;var c=h(e,r,n);if("normal"===c.type){if(o=n.done?p:"suspendedYield",c.arg===m)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(o=p,n.method="throw",n.arg=c.arg)}}}function S(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=t,S(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),m;var a=h(o,e.iterator,r.arg);if("throw"===a.type)return r.method="throw",r.arg=a.arg,r.delegate=null,m;var s=a.arg;return s?s.done?(r[e.resultName]=s.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,m):s:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,m)}function O(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function T(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function j(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(O,this),this.reset(!0)}function E(e){if(e||""===e){var r=e[s];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,a=function r(){for(;++o=0;--a){var s=this.tryEntries[a],i=s.completion;if("root"===s.tryLoc)return o("end");if(s.tryLoc<=this.prev){var l=n.call(s,"catchLoc"),c=n.call(s,"finallyLoc");if(l&&c){if(this.prev=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),T(r),m}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;T(r)}return o}}throw Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:E(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),m}},e}function W(t,e,r,n,o,a,s){try{var i=t[a](s),l=i.value}catch(t){return void r(t)}i.done?e(l):Promise.resolve(l).then(n,o)}function Z(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function tt(t){for(var e=1;et.length)&&(e=t.length);for(var r=0,n=new Array(e);rt?e:t}),0),o=n-r,a=o/(e-1),s=o/2+r,i=(e-1)/2,l=[r],c=1;ct?e:t}),0),o=(n-r)/(e-1),a=[r],s=1;st?e:t}),0),o=(n-r)/(e-1),a=[r],s=1;st?e:t}),0),o=(n-r)/(e-1),a=[r],s=e-2;s>0;){var i=s*o;i*=Math.pow((e-1)/e,e-s*(e+1)/e),a.push(Math.max(n-i,r)),s--}return a.push(n),a.reverse(),a}},default:{label:"Default",icon:"fa fa-dot-circle",getValues:function(t,e){return[93.87,82.28,68.67,49.1,40.2,32.78,13.29,9.31,6.3,2.62,1.3,.52]}},tailwind:{label:"Tailwind",icon:"fak fa-tailwind",getValues:function(t,e){return[93.88,87.19,75.61,61.14,42.57,28.39,18.04,11.21,6.97,4.72,1.63]}},radix:{label:"Radix",icon:"fak fa-radix",getValues:function(t,e){return[98.1,96.4,90.1,83.3,75.6,65.8,52.6,37.4,15.2,12.8,10.2,1.2]}}},lums:{0:{},1:{},2:{},3:{},4:{},5:{},6:{},7:{},8:{}},isChoosingBase:null,lastPos:null,adjustLumsTimeout:0,autoDistribute:!1,palettes:[],showFilters:[],lockedPalettes:[],lockedByHex:{},showPresets:!1,showUploadForm:!1,paletteCacheBustTimeout:0,updateSwatchTimeout:0,isUploading:!1,uploadFile:null,base64File:null,uploadFileUrl:"",uploadFilePath:"",grayscaleJson:{},paletteJson:{},shownPaletteMenu:null,setFromUploadTimeout:0,hasUpdatedLumsCount:!1,copyText:"",showLumsMenu:!1,storedSwatches:{},cssTab:"tailwind",cssType:"rgb",updateUrlTimeout:0,textOverlay:!1}},computed:{radixLums:function(){var t=this.lums;return Object.keys(this.lums).forEach((function(e,r){t[e].label=parseInt(r,10)+1})),t},isRadixPreset:function(){return JSON.stringify(this.presets.radix.getValues())==JSON.stringify(this.lumsValues)},isTailwindPreset:function(){return JSON.stringify(this.presets.tailwind.getValues())==JSON.stringify(this.lumsValues)},suggestedColors:function(){var t=this;if(!this.paletteBases.length)return[];var e=this.paletteBases[0];if("#000000"===e)return[];var r=B.hexToRGB(e),n=r.r,o=r.g,a=r.b,s=B.RGBToHSL(n,o,a),i=s.h,l=s.s,c=(s.l,i>179?i-180:i+180),u=B.HSLtoRGB(c,l,B.lightnessFromHSLum(c,l,40)),h=B.RGBToHex.apply(B,nt(Object.values(u).map(Math.round))),f=i+120;f>359&&(f-=360);var d=B.HSLtoRGB(f,l,B.lightnessFromHSLum(f,l,40)),p=B.RGBToHex.apply(B,nt(Object.values(d).map(Math.round))),m=i-120;m<0&&(m+=360);var v=B.HSLtoRGB(m,l,B.lightnessFromHSLum(m,l,40)),b=B.RGBToHex.apply(B,nt(Object.values(v).map(Math.round))),y=i+60;y>359&&(y-=360);var g=B.HSLtoRGB(y,l,B.lightnessFromHSLum(y,l,40)),x=B.RGBToHex.apply(B,nt(Object.values(g).map(Math.round))),w=i-60;w<0&&(w+=360);var C=B.HSLtoRGB(w,l,B.lightnessFromHSLum(w,l,40));return[B.RGBToHex.apply(B,nt(Object.values(C).map(Math.round))),b,h,p,x].filter((function(e){return-1===t.paletteBases.indexOf(e)}))},tabContent:function(){return"tailwind"===this.cssTab?this.cssTailwind:"radix"===this.cssTab?this.cssRadix:"vars"===this.cssTab?this.cssVars:"scss"===this.cssTab?this.cssScss:"stylus"===this.cssTab?this.cssStylus:"less"===this.cssTab?this.cssLess:void 0},paletteBases:function(){return this.updateUrl(),this.palettes.reduce((function(t,e){return t.push(e.hex),t}),[])},paletteNames:function(){return this.updateUrl(),this.palettes.reduce((function(t,e){return t.push(e.name),t}),[])},paletteLabels:function(){return this.updateUrl(),this.palettes.reduce((function(t,e){return t.push(e.label),t}),[])},paletteFilters:function(){return this.palettes.reduce((function(t,e){return t.push(e.filters),t}),[])},hasLockedLums:function(){return Object.keys(this.lockedByHex).length>0},lumsValues:function(){var t=this;return Object.keys(this.lums).reduce((function(e,r){return e.push(t.lums[r].lum),e}),[])},lumsCount:function(){return Object.keys(this.lums).length},exportConfig:function(){return JSON.stringify(this.cssColors)},cssColors:function(){var t=this,e={};return e.grayscale={name:"grayscale",swatches:Object.keys(this.lums).reduce((function(e,r){var n={lum:t.lums[r].lum,rgb:t.lums[r].rgb,hex:B.RGBToHex.apply(B,nt(t.lums[r].rgb)),hsl:Object.values(B.RGBToHSL.apply(B,nt(t.lums[r].rgb))),oklch:Object.values(B.RGBToOKLCH.apply(B,nt(t.lums[r].rgb))),label:t.lums[r].label};return e[r]=n,e}),{})},this.palettes.forEach((function(r,n){var o=r.name;if(!o){var a=B.closestLum(t.lumsValues,50),s=rt(Object.keys(a)||Math.floor(t.lumsCount/2),1)[0],i=r.swatches[s],l=B.RGBToHSL.apply(B,nt(i.rgb)),c=l.h,u=l.s,h=l.l;o=B.colorName(c,u,h)}"grayscale"===o&&(o+="-alt"),e[o]=Object.keys(r.swatches).reduce((function(e,n){return t.storedSwatches[r.hex]&&t.storedSwatches[r.hex][n]&&(e.swatches[n]=t.storedSwatches[r.hex][n]),e}),tt(tt({},r),{},{name:o,swatches:{}}))})),e},cssTailwind:function(){var t=this,e=Object.keys(this.cssColors).reduce((function(e,r){e[r]={};var n=Object.keys(t.cssColors[r].swatches).length;return Object.keys(t.cssColors[r].swatches).forEach((function(o){var a=t.cssColors[r].swatches[o],s=t.getValueLabel(o,n);e[r][s]=t.formatSwatchColor(a),t.isLockedHex(a.hex)&&(e[r].DEFAULT=e[r][s])})),e}),{}),r=JSON.stringify(e,null," ");return localStorage.setItem(new Date,r),"// Grayscale Design palette: ".concat(window.location.href,"\nconst grayscale = ")+r},cssRadix:function(){var t=this,e=this.cssColors,r="// Grayscale Design palette: ".concat(window.location.href,"\n");try{r+=Object.keys(e).reduce((function(r,n){return r+="\nconst ".concat(n," = {\n"),Object.keys(e[n].swatches).forEach((function(o){var a=e[n].swatches[o],s=parseInt(o,10)+1;r+=" '".concat(n).concat(s,"': '").concat(t.formatSwatchColor(a),"',\n")})),r+="};\n",r+="\nconst ".concat(n,"Dark = {\n"),Object.keys(e[n].swatches).forEach((function(o){var a=e[n].swatches[o],s=100-a.lum,i=rt(a.hsl,2),l=i[0],c=i[1],u=B.lightnessFromHSLum(l,c,s),h=B.HSLtoRGB(a.hsl[0],a.hsl[1],u),f=h.r,d=h.g,p=h.b,m={lum:s,hex:B.RGBToHex(f,d,p),rgb:[f,d,p].map(Math.round),hsl:[l,c,u],label:parseInt(o,10)+1};r+=" '".concat(n).concat(m.label,"': '").concat(t.formatSwatchColor(m),"',\n")})),r+="};\n"}),"")}catch(t){}return r},cssVars:function(){var t=this,e=this.cssColors,r="/* Grayscale Design palette: ".concat(window.location.href," */\n:root {");return r+=Object.keys(e).reduce((function(r,n){r+="\n";var o=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(a){var s=e[n].swatches[a],i=t.getValueLabel(a,o);r+=" --".concat(n,"-").concat(i,": ").concat(t.formatSwatchColor(s),";\n")})),r}),""),r+="}"},cssScss:function(){var t=this,e=this.cssColors,r="// Grayscale Design palette: ".concat(window.location.href,"\n");return r+=Object.keys(e).reduce((function(r,n){var o=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(a){var s=e[n].swatches[a],i=t.getValueLabel(a,o);r+="$".concat(n,"-").concat(i,": ").concat(t.formatSwatchColor(s),";\n")})),r+="\n"}),"")},cssLess:function(){var t=this,e=this.cssColors,r="// Grayscale Design palette: ".concat(window.location.href,"\n");return r+=Object.keys(e).reduce((function(r,n){var o=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(a){var s=e[n].swatches[a],i=t.getValueLabel(a,o);r+="@".concat(n,"-").concat(i,": ").concat(t.formatSwatchColor(s),";\n")})),r+="\n"}),"")},cssStylus:function(){var t=this,e=this.cssColors,r="// Grayscale Design palette: ".concat(window.location.href,"\n");return r+=Object.keys(e).reduce((function(r,n){var o=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(a){var s=e[n].swatches[a],i=t.getValueLabel(a,o>=10);r+="".concat(n,"-").concat(i," = ").concat(t.formatSwatchColor(s),"\n")})),r+="\n"}),"")}},watch:{cssTab:function(t,e){var r;t&&t!==e&&null!==(r=this.lumsValues)&&void 0!==r&&r.length&&this.setLums(this.lumsValues)},isRadixPreset:function(t){t&&(this.cssTab="radix")},isTailwindPreset:function(t){t&&(this.cssTab="tailwind")},paletteBases:function(t){var e=this;Object.keys(this.lockedByHex).forEach((function(r){-1===t.indexOf(r)&&e.toggleLocked(r,!1)}))},hasLockedLums:function(t){t&&(this.autoDistribute=!1)},grayscaleJson:function(t){var e=[],r=[];if(t.colors.forEach((function(t){e.includes(t.hex)||(r.push(t),e.push(t.hex))})),r.lengthe.hex?-1:0})),!this.hasUpdatedLumsCount){this.lums={};for(var n=0;ne.hex?-1:0})),n.forEach((function(t,r){t.hex&&e.palettes.push({name:"",swatches:G(e.lums),hex:t.hex,filters:{hue:0,sat:0}})})),this.$nextTick((function(){e.$nextTick((function(){setTimeout((function(){e.dedupePalettes()}),1e3)}))}))},autoDistribute:function(t){t&&this.adjustLums(this.lums[0],this.lums[this.lumsCount-1].lum,this.lums[0].lum,0)},lums:{deep:!0,handler:function(t){var e=this;clearTimeout(this.updateSwatchTimeout),this.updateSwatchTimeout=setTimeout((function(){e.updateSwatchLums(t)}),250),this.updateUrl()}},lumsCount:function(t){var e=this;this.$nextTick((function(){e.updateSwatchLums()}))}},created:function(){var t=this;if(this.setLums(this.presets.default.getValues()),Object.keys(this.$route.query).length){var e=this.$route.query,r=e.lums,n=void 0===r?[]:r,o=e.palettes,a=void 0===o?[]:o,s=e.filters,i=void 0===s?[]:s,l=e.names,c=void 0===l?[]:l,u=e.labels,h=void 0===u?[]:u;n=n.split(",").filter((function(t){return!!t})).map(parseFloat),this.setLums(n);var f=a.split(",").filter((function(t){return!!t})),d=c.split(",").filter((function(t){return!!t})),p=h.split(",").filter((function(t){return!!t})),m=i.split(",").filter((function(t){return!!t}));f.forEach((function(e,r){var n=rt(m[r].split("|"),2),o=n[0],a=void 0===o?0:o,s=n[1],i=void 0===s?0:s;t.addPalette(),t.$nextTick((function(){t.palettes[r].name=d[r],t.palettes[r].hex=e,t.palettes[r].filters={hue:a,sat:i},t.palettes[r].label=p[r]}))}))}},mounted:function(){document.addEventListener("copy",this.onCopy.bind(this)),this.uploadFileUrl&&this.setFromUploadFile()},beforeDestroy:function(){document.removeEventListener("copy",this.onCopy.bind(this),null)},methods:{getValueLabel:function(t,e){return"radix"==this.cssTab?parseInt(t,10)+1:11==e&&10==t?"950":e>=10?0==t?"50":parseInt(t,10)+"00":parseInt(t,10)+1+"00"},removeAll:function(){confirm("Are you sure?")&&(this.palettes=[])},addSuggestedColor:function(t){var e=this;this.addPalette(),this.$nextTick((function(){e.palettes[0].hex=t}))},updateUrl:function(){var t=this;clearTimeout(this.updateUrlTimeout),this.updateUrlTimeout=setTimeout((function(){t.$nextTick((function(){var e={lums:t.lumsValues.map((function(t){return t.toFixed(2)})).join(","),palettes:t.paletteBases.join(","),filters:t.paletteFilters.map((function(t){return"".concat(t.hue,"|").concat(t.sat)})).join(","),names:t.paletteNames.join(","),labels:t.paletteLabels.join(",")};JSON.stringify(e)!==JSON.stringify(t.$route.query)&&t.$router.push({query:e})}))}),200)},formatSwatchColor:function(t){var e;return"hex"===this.cssType?null==t?void 0:t.hex:"rgb"===this.cssType?"rgb(".concat(null===(e=t.rgb)||void 0===e?void 0:e.join(", "),")"):"hsl"===this.cssType?"hsl(".concat(t.hsl[0],", ").concat(0===t.hsl[1]?0:t.hsl[1].toFixed(2),"%, ").concat(t.hsl[2].toFixed(2),"%)"):"oklch"===this.cssType?"oklch(".concat(t.oklch[0].toFixed(4)," ").concat(t.oklch[1].toFixed(4)," ").concat(0===t.oklch[2]?0:t.oklch[2].toFixed(2),")"):void 0},storeSwatches:function(t,e){this.$set(this.storedSwatches,e,t),this.updateUrl()},dedupePalettes:function(){var t=this;this.palettes.reverse(),this.$nextTick(setTimeout((function(){t.palettes.reverse()})))},getDupes:function(){var t=this,e={},r=[];return this.palettes.forEach((function(n,o){var a=!1;e[o]=[];for(var s=B.closestLum(t.lumsValues,50),i=Object.keys(s)[0],l=n.swatches[i],c=rt(l.rgb,3),u=c[0],h=c[1],f=c[2],d=Object.keys(e).length-1;d>=0;d--){for(var p=e[d].length-1;p>=0;p--){var m=0,v=rt(e[d][p],3),b=v[0],y=v[1],g=v[2];if(u<=b&&u>=b&&m++,h<=y&&h>=y&&m++,f<=g&&f>=g&&m++,m>=2){var x=t.palettes[o].hex,w=t.palettes[d].hex,C=B.lumFromRGB.apply(B,nt(Object.values(B.hexToRGB(x)))),k=B.lumFromRGB.apply(B,nt(Object.values(B.hexToRGB(w)))),_=Math.abs(50-C);Math.abs(50-k)<_&&-1===r.indexOf(o)?r.push(o):r.push(d),a=!0;break}}if(a)break}a||e[o].push(l.rgb)})),nt(new Set(r)).sort()},copy:function(t){this.copyText=t,this.$nextTick((function(){document.execCommand("copy")}))},onCopy:function(t){var e=this;this.copyText&&(t.preventDefault(),t.clipboardData.setData("text/plain",this.copyText),setTimeout((function(){e.copyText=!1}),2e3))},removePalette:function(t){this.palettes.splice(t,1)},togglePaletteMenu:function(t){this.shownPaletteMenu=this.shownPaletteMenu==t?null:t},toggleFilters:function(t){var e=this.showFilters.indexOf(t);-1!==e?this.showFilters.splice(e,1):this.showFilters=nt(new Set([].concat(nt(this.showFilters),[t])))},toggleLocked:function(t){var e=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isLockedHex(t)||!0!==r&&!1===r){var n=Object.keys(this.lockedByHex).reduce((function(r,n){var o=e.lockedByHex[n];if(t!==n)r[n]=o;else{var a=e.lums[o.lumIndex].label;e.lums[o.lumIndex]={lum:o.lastLum,rgb:e.lumToGrayscaleRGB(o.lastLum),label:a}}return r}),{});this.lockedByHex=n}else{var o=G(this.lockedByHex),a=Object.values(B.hexToRGB(t)),s=B.lumFromRGB.apply(B,a),i=B.closestLum(this.lumsValues,s),l=Object.keys(i)||[],c=rt(l,1),u=c[0];if(this.isLockedLum(u))return void alert("This color value is already LOCKED!");var h=Object.values(i)||[],f=rt(h,1),d=f[0];u=parseInt(u,10);var p=this.lums[u].label;this.lums[u]={lum:s,rgb:this.lumToGrayscaleRGB(s),label:p},o[t]={lumIndex:u,lastLum:d},this.lockedByHex=o}},isLockedHex:function(t){return-1!==Object.keys(this.lockedByHex).indexOf(t)},isLockedLum:function(t){return-1!==Object.values(this.lockedByHex).map((function(t){return t.lumIndex})).indexOf(parseInt(t,10))},getPickerHex:function(t){return 4===t.length?"#"+nt(t.replace("#","")).reduce((function(t,e){return t+e+e}),""):t},updateSwatchLums:function(t){var e=this;t=t||this.lums;var r=Object.keys(t).length;this.palettes=this.palettes.map((function(e){var n=Object.keys(e.swatches);n.forEach((function(n){n1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;this.lums=t.reduce((function(r,n,o){return r[o]={lum:n,rgb:e.lumToGrayscaleRGB(n),label:e.getValueLabel(o,t.length)},r}),{}),this.$nextTick((function(){e.adjustLums(0===r?n:e.lums[0].lum,r===e.lumsCount-1?n:e.lums[e.lumsCount-1].lum,100-n,r)}))},lumToGrayscaleRGB:function(t){var e=B.lightnessFromHSLum(0,0,t);return Object.values(B.HSLtoRGB(0,0,e)).map(Math.round)},adjustLums:function(t,e,r,n){var o=this;if(this.autoDistribute){var a=Object.keys(this.lums);a.pop(),a.shift(),a.forEach((function(a){if((a=parseInt(a,10))1&&void 0!==arguments[1]?arguments[1]:"#000000";this.palettes.unshift({name:"",swatches:G(this.lums),hex:e,filters:{hue:0,sat:0}}),this.isChoosingBase=0},onFileUpload:function(){var t=this;return new Promise(function(){var e,r=(e=Q().mark((function e(r,n){var o;return Q().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t.isUploading=!0,(o=t.$refs.upload)&&o.files&&!(o.files.length<=0)){e.next=5;break}return n("No file selected."),e.abrupt("return");case 5:if(t.uploadFile=o.files[0],!(t.uploadFile.size>5242880)){e.next=9;break}return n("Image is too big (max. 5 Mb)"),e.abrupt("return");case 9:return e.next=11,t.toBase64(t.uploadFile);case 11:return t.base64File=e.sent,e.abrupt("return",r(t.uploadFile));case 13:case"end":return e.stop()}}),e)})),function(){var t=this,r=arguments;return new Promise((function(n,o){var a=e.apply(t,r);function s(t){W(a,n,o,s,i,"next",t)}function i(t){W(a,n,o,s,i,"throw",t)}s(void 0)}))});return function(t,e){return r.apply(this,arguments)}}()).then((function(e){var r=function(t){var e=new FormData;return function t(e,r,n){if(!r||"object"!==P(r)||r instanceof Date||r instanceof File){var o=null==r?"":r;e.append(n,o)}else Object.keys(r).forEach((function(o){t(e,r[o],n?"".concat(n,"[").concat(o,"]"):o)}))}(e,t),e}({file:e});axios.post("/palette-uploads",r).then((function(e){var r=e.data;r.url?(t.uploadFileUrl=r.url,t.uploadFilePath=r.path,t.setFromUploadFile()):alert("Sorry! Please try again.")}))})).catch(alert).finally((function(){var e;t.isUploading=!1,null!==(e=t.$refs)&&void 0!==e&&e.upload&&(t.$refs.upload.value=null)}))},toBase64:function(t){return new Promise((function(e,r){var n=new FileReader;n&&t?(n.readAsDataURL(t),n.onload=function(){e(n.result)},n.onerror=function(t){r(t)}):r("No file provided")}))},setLumsCount:function(t){var e=this;if(!(t<3||t>20)){for(var r=G(this.lums),n=0;n0&&void 0!==arguments[0])||arguments[0],r="".concat(this.uploadFileUrl,"?sat=-100&colorquant=").concat(this.lumsCount,"&palette=json&colors=").concat(this.lumsCount);axios.get(r).then((function(e){var r=e.data;t.grayscaleJson=r})).then((function(){if(e){var r="".concat(t.uploadFileUrl,"?palette=json&colors=3");axios.get(r).then((function(e){var r=e.data;t.paletteJson=r}))}}))},getUploadFileUrl:function(t){return this.uploadFileUrl+t}}},it=Object(D.a)(st,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"App",on:{click:function(e){t.showPicker=null}}},[e("section",{staticClass:"mt-6"},[t._m(0),t._v(" "),e("div",{staticClass:"mt-6 md:mt-0 flex items-center justify-between"},[t._m(1),t._v(" "),e("div",{staticClass:"relative"},[e("button",{staticClass:"text-center h-7 leading-7 px-4 rounded text-xl text-blue-600 hover:opacity-75 focus:text-blue-900",on:{click:function(e){t.showLumsMenu=!t.showLumsMenu}}},[e("i",{staticClass:"far fa-lg fa-ellipsis-h"})]),t._v(" "),t.showLumsMenu?e("div",{staticClass:"absolute right-0 top-100 mr-4 mt-2 text-left shadow-lg bg-gray-500 py-4 min-w-9 rounded-b-lg rounded-tl-lg z-40"},[e("div",{staticClass:"text-sm block py-half-4 px-5 mr-5 whitespace-no-wrap text-gray-900 uppercase tracking-wide font-bold"},[t._v("\n Distribute\n ")]),t._v(" "),e("button",{class:["block w-full text-left py-half-4 px-5 whitespace-no-wrap",{"bg-gray-400 bg-opacity-75":t.autoDistribute},t.hasLockedLums?"text-gray-600 cursor-not-allowed":"text-gray-800 hover:bg-gray-400 hover:bg-opacity-75"],attrs:{title:t.hasLockedLums?"You have LOCKED colors":"",disabled:t.hasLockedLums},on:{click:function(e){t.autoDistribute=!0,t.showLumsMenu=!1}}},[e("i",{staticClass:"far fa-fw fa-hand-sparkles mr-4"}),t._v("Auto\n ")]),t._v(" "),e("button",{class:["block w-full text-left py-half-4 px-5 whitespace-no-wrap text-gray-800 hover:bg-gray-400 hover:bg-opacity-75",{"bg-gray-400 bg-opacity-75":!t.autoDistribute}],on:{click:function(e){t.autoDistribute=!1,t.showLumsMenu=!1}}},[e("i",{staticClass:"far fa-fw fa-hand-paper mr-4"}),t._v("Manual\n ")]),t._v(" "),e("div",{staticClass:"mt-5 text-sm block py-half-4 px-5 mr-5 whitespace-no-wrap text-gray-900 uppercase tracking-wide font-bold"},[t._v("\n Presets\n ")]),t._v(" "),t._l(t.presets,(function(r,n){return e("a",{key:n,class:["block py-half-4 px-5 whitespace-no-wrap",{"bg-gray-400 bg-opacity-75":JSON.stringify(r.getValues(t.lumsValues,t.lumsCount))==JSON.stringify(t.lumsValues)},t.hasLockedLums?"text-gray-600 cursor-not-allowed":"text-gray-800 hover:bg-gray-400 hover:bg-opacity-75"],attrs:{title:t.hasLockedLums?"You have LOCKED colors":"",href:"#".concat(n)},on:{mouseenter:function(e){t.autoDistribute=!1},click:function(e){e.preventDefault(),t.autoDistribute=!1,t.showLumsMenu=!1,t.setLums(r.getValues(t.lumsValues,t.lumsCount))}}},[e("i",{class:["fa-fw mr-4",r.icon]}),t._v(t._s(r.label))])})),t._v(" "),e("div",{staticClass:"mt-5 text-sm block py-half-4 px-5 mr-5 whitespace-no-wrap text-gray-900 uppercase tracking-wide font-bold"},[t._v("\n Contrast\n ")]),t._v(" "),e("button",{class:["block w-full text-left py-half-4 px-5 whitespace-no-wrap text-gray-800 hover:bg-gray-400 hover:bg-opacity-75",{"bg-gray-400 bg-opacity-75":t.textOverlay}],on:{click:function(e){t.textOverlay=!t.textOverlay,t.showLumsMenu=!1}}},[e("i",{staticClass:"fa fa-fw fa-font-case mr-4"}),t._v("Text Overlay\n ")])],2):t._e()])]),t._v(" "),e("grayscale-row",{staticClass:"mt-4 -mx-6 sm:mx-0",attrs:{lums:t.lums,"lums-values":t.lumsValues,"set-lums":t.setLums,"is-locked-lum":t.isLockedLum}}),t._v(" "),e("palette-row",{staticClass:"mt-7",attrs:{palette:{swatches:"radix"===t.cssTab?t.radixLums:t.lums},"text-overlay":t.textOverlay}}),t._v(" "),e("div",{staticClass:"text-center justify-between md:flex md:space-x-6"},[e("div",[e("button",{staticClass:"relative inline-block mt-7 border-1 border-gray-500 transition-all hover:shadow hover:border-gray-800 hover:bg-gray-800 duration-300 rounded py-4 px-5 text-gray-600 hover:text-white uppercase text-sm font-bold tracking-wide",on:{click:function(e){return t.setLumsCount(t.lumsCount-1)}}},[e("i",{staticClass:"far fa-lg fa-minus"})]),t._v(" "),e("span",{staticClass:"px-4 opacity-50"},[t._v(t._s(t.lumsCount)+" values")]),t._v(" "),e("button",{staticClass:"relative inline-block mt-7 border-1 border-gray-500 transition-all hover:shadow hover:border-gray-800 hover:bg-gray-800 duration-300 rounded py-4 px-5 text-gray-600 hover:text-white uppercase text-sm font-bold tracking-wide",on:{click:function(e){return t.setLumsCount(t.lumsCount+1)}}},[e("i",{staticClass:"far fa-lg fa-plus"})])]),t._v(" "),e("div",{staticClass:"md:text-right"},[e("label",{class:["relative inline-block mt-7 border-1 border-gray-500 transition-all hover:shadow hover:border-gray-800 hover:bg-gray-800 duration-300 rounded py-4 px-5 text-gray-600 hover:text-white uppercase text-sm font-bold tracking-wide",{"cursor-not-allowed pointer-events-none opacity-50":t.isUploading}],attrs:{for:"upload"}},[e("input",{ref:"upload",staticClass:"absolute inset-0 opacity-0 z-10 max-w-full",attrs:{disabled:t.isUploading,name:"upload",id:"upload",type:"file",accept:"image/x-png,image/gif,image/jpeg"},on:{change:t.onFileUpload}}),t._v("\n Upload an image\n ")]),t._v(" "),t._m(2)])]),t._v(" "),t.uploadFilePath?e("div",{staticClass:"mt-6 text-center"},[e("a",{staticClass:"relative inline-block shadow hover:shadow-2xl transition-shadow duration-300",attrs:{href:t.getUploadFileUrl("?sat=-100&colorquant=".concat(t.lumsCount)),target:"_blank",rel:"noopener"}},[e("img",{staticClass:"rounded-lg",attrs:{src:t.base64File||t.uploadFileUrl,alt:""}}),t._v(" "),e("img",{staticClass:"rounded-lg absolute inset-0 z-10 opacity-100 hover:opacity-0 transition-opacity duration-200",attrs:{src:t.getUploadFileUrl("?sat=-100&colorquant=".concat(t.lumsCount)),alt:""}})]),t._v(" "),e("p",{staticClass:"mt-2 text-xs mx-auto opacity-50 max-w-2xl"},[t._v("\n Click image to view and print. This is your image using just "+t._s(t.lumsCount)+" shades of\n gray (the grays used to generate your luminosity scale). Below, we added a few colors from\n your image!\n ")])]):t._e()],1),t._v(" "),e("section",{staticClass:"mt-10"},[e("h1",{staticClass:"font-bold uppercase tracking-wide"},[t._v("2.  Set your colors")]),t._v(" "),e("div",{staticClass:"mt-6 inline-block space-x-4"},[e("button",{staticClass:"border-1 border-blue-600 transition-all hover:shadow hover:border-blue-800 hover:bg-blue-800 duration-300 rounded py-4 px-5 text-blue-600 hover:text-white uppercase text-sm font-bold tracking-wide",on:{click:t.addPalette}},[t._v("\n Add A Color\n ")]),t._v(" "),t.palettes.length?e("a",{staticClass:"border-b border-red-500 text-red-600 hover:text-red-700 transition-all duration-200",attrs:{href:"#"},on:{click:t.removeAll}},[t._v("Remove All")]):t._e()]),t._v(" "),e("div",{staticClass:"space-x-4"},t._l(t.suggestedColors,(function(r){return e("button",{staticClass:"mt-4 transition-all hover:shadow border-1 duration-300 h-half-8 w-half-8 shadow-inner text-white text-opacity-50 hover:opacity-75",style:{"background-color":r,"border-color":r},on:{click:function(e){return t.addSuggestedColor(r)}}},[e("i",{staticClass:"fal fa-plus fa-sm"})])})),0),t._v(" "),e("div",{staticClass:"mt-8"},t._l(t.palettes,(function(r,n){return e("div",{key:t.palettes.length-n,staticClass:"mt-8"},[e("div",{staticClass:"min-h-8 md:flex justify-between items-center relative"},[e("div",{staticClass:"absolute right-0 top-0"},[e("button",{staticClass:"text-center h-7 my-half-6 rounded text-xl text-blue-600 p-4 hover:opacity-75 focus:text-blue-900",on:{click:function(e){return t.togglePaletteMenu(n)}}},[e("i",{staticClass:"far fa-lg fa-ellipsis-h"})]),t._v(" "),t.shownPaletteMenu==n?e("div",{staticClass:"absolute z-40 right-0 top-100 mr-4 -mt-3 text-left shadow-lg bg-gray-500 py-4 min-w-9 rounded-b-lg rounded-tl-lg z-10"},[e("a",{staticClass:"block py-half-4 px-5 whitespace-no-wrap text-gray-800 hover:bg-gray-400 hover:bg-opacity-75",attrs:{href:"#"},on:{click:function(e){e.preventDefault(),t.toggleFilters(n),t.togglePaletteMenu(n)}}},[e("i",{staticClass:"far fa-fw fa-sliders-h mr-4"}),t._v("Tweak Hue/Sat\n ")]),t._v(" "),e("hr",{staticClass:"my-3 border-gray-600 opacity-75"}),t._v(" "),e("a",{staticClass:"block py-half-4 px-5 whitespace-no-wrap text-red-800 hover:bg-gray-400 hover:bg-opacity-75",attrs:{href:"#"},on:{click:function(e){e.preventDefault(),t.removePalette(n),t.togglePaletteMenu(n)}}},[e("i",{staticClass:"far fa-fw fa-times mr-4"}),t._v("Remove\n ")])]):t._e()]),t._v(" "),e("div",{staticClass:"h-8 leading-8 mr-8 relative"},[e("button",{staticClass:"absolute right-full top-0 px-4 opacity-25 hover:opacity-100 focus:outline-none focus:shadow-none",attrs:{title:"Adjusts grayscale to match this color"},on:{click:function(e){return t.toggleLocked(r.hex)}}},[e("i",{class:["fa-fw",t.isLockedHex(r.hex)?"fa fa-lock":"far fa-unlock"]})]),t._v(" "),t.showPicker===n?e("hex-color-picker",{staticClass:"absolute bottom-full left-0 z-10",attrs:{color:r.hex},on:{click:function(t){t.stopPropagation()},"color-changed":function(t){r.hex=t.target.color}}}):t._e(),t._v(" "),e("button",{staticClass:"h-half-8 w-half-8 mr-4 inline-block align-middle shadow-inner",style:{background:r.hex},on:{click:function(e){e.stopPropagation(),t.showPicker=t.showPicker===n?null:n}}}),t._v(" "),e("input",{directives:[{name:"model",rawName:"v-model",value:r.hex,expression:"palette.hex"}],ref:"paletteHex".concat(n),refInFor:!0,staticClass:"font-mono leading-6 inline-block align-middle w-9 mr-5 text-gray-600 hover:text-gray-800 py-3 px-0 text-lg border-b border-gray-400 border-dashed hover:border-gray-600 focus:border-gray-600 focus:shadow-none relative z-30",attrs:{type:"text",placeholder:"#000000"},domProps:{value:r.hex},on:{input:function(e){e.target.composing||t.$set(r,"hex",e.target.value)}}}),t._v(" "),e("input",{directives:[{name:"model",rawName:"v-model",value:r.name,expression:"palette.name"}],ref:"paletteName".concat(n),refInFor:!0,staticClass:"font-mono leading-6 inline-block align-middle w-10 text-gray-600 hover:text-gray-800 py-3 px-0 text-lg border-b border-gray-400 border-dashed hover:border-gray-600 focus:border-gray-600 focus:shadow-none",attrs:{type:"text",placeholder:"Add label"},domProps:{value:r.name},on:{input:function(e){e.target.composing||t.$set(r,"name",e.target.value)}}})],1),t._v(" "),t.showFilters.includes(n)?e("div",{staticClass:"flex md:mr-8 space-x-5"},[e("div",{staticClass:"text-center leading-5 mt-4 w-1/2 md:min-w-10 lg:min-w-11"},[e("label",{staticClass:"block font-mono text-xs opacity-50 uppercase"},[t._v("Hue ("+t._s(r.filters.hue>0?"+".concat(r.filters.hue):r.filters.hue)+"°)")]),t._v(" "),e("input",{directives:[{name:"model",rawName:"v-model",value:r.filters.hue,expression:"palette.filters.hue"}],staticClass:"p-half-4 w-full",attrs:{type:"range",min:"-50",step:"0.1",max:"50"},domProps:{value:r.filters.hue},on:{__r:function(e){return t.$set(r.filters,"hue",e.target.value)}}})]),t._v(" "),e("div",{staticClass:"text-center leading-5 mt-4 w-1/2 md:min-w-10 lg:min-w-11"},[e("label",{staticClass:"block font-mono text-xs opacity-50 uppercase"},[t._v("Saturation ("+t._s(r.filters.sat)+"%)")]),t._v(" "),e("input",{directives:[{name:"model",rawName:"v-model",value:r.filters.sat,expression:"palette.filters.sat"}],staticClass:"p-half-4 w-full",attrs:{type:"range",min:"-30",step:"0.1",max:"30"},domProps:{value:r.filters.sat},on:{__r:function(e){return t.$set(r.filters,"sat",e.target.value)}}})])]):t._e()]),t._v(" "),e("palette-row",{staticClass:"mt-4",attrs:{palette:r,"hide-lum":"","is-locked":t.isLockedHex(r.hex),"store-swatches":function(e){return t.storeSwatches(e,r.hex)}}})],1)})),0)]),t._v(" "),e("section",{staticClass:"mt-10"},[e("h1",{staticClass:"font-bold uppercase tracking-wide"},[t._v("3.  Export Your Colors")]),t._v(" "),e("form",{attrs:{action:"/export-svgs",target:"_blank",method:"POST"}},[e("input",{directives:[{name:"model",rawName:"v-model",value:t.exportConfig,expression:"exportConfig"}],staticClass:"hidden",attrs:{type:"text",name:"palettes"},domProps:{value:t.exportConfig},on:{input:function(e){e.target.composing||(t.exportConfig=e.target.value)}}}),t._v(" "),e("input",{directives:[{name:"model",rawName:"v-model",value:t.csrf,expression:"csrf"}],attrs:{type:"hidden",name:"_token"},domProps:{value:t.csrf},on:{input:function(e){e.target.composing||(t.csrf=e.target.value)}}}),t._v(" "),e("button",{staticClass:"mt-6 border-1 border-blue-600 transition-all hover:shadow hover:border-blue-800 hover:bg-blue-800 duration-300 rounded py-4 px-5 text-blue-600 hover:text-white uppercase text-sm font-bold tracking-wide",attrs:{type:"submit"}},[t._v("\n Export Svgs\n ")])]),t._v(" "),e("div",{staticClass:"mt-8 md:flex justify-between md:space-x-7"},[e("div",{staticClass:"space-x-5"},[e("button",{class:["tailwind"===t.cssTab?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssTab="tailwind"}}},[t._v("\n Tailwind CSS\n ")]),t._v(" "),e("button",{class:["radix"===t.cssTab?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssTab="radix"}}},[t._v("\n Radix UI\n ")]),t._v(" "),e("button",{class:["vars"===t.cssTab?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssTab="vars"}}},[t._v("\n CSS Variables\n ")]),t._v(" "),e("button",{class:["stylus"===t.cssTab?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssTab="stylus"}}},[t._v("\n Stylus\n ")]),t._v(" "),e("button",{class:["scss"===t.cssTab?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssTab="scss"}}},[t._v("\n SCSS\n ")]),t._v(" "),e("button",{class:["less"===t.cssTab?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssTab="less"}}},[t._v("\n LESS\n ")])]),t._v(" "),e("div",{staticClass:"mt-5 md:mt-0 space-x-5"},[e("button",{class:["rgb"===t.cssType?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssType="rgb"}}},[t._v("\n RGB\n ")]),t._v(" "),e("button",{class:["hex"===t.cssType?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssType="hex"}}},[t._v("\n HEX\n ")]),t._v(" "),e("button",{class:["hsl"===t.cssType?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssType="hsl"}}},[t._v("\n HSL\n ")]),t._v(" "),e("button",{class:["oklch"===t.cssType?"font-bold":"border-b border-gray-500 text-blue-700 hover:opacity-50","mb-6 transition-all duration-200"],on:{click:function(e){e.preventDefault(),t.cssType="oklch"}}},[t._v("\n OKLCH\n ")])])]),t._v(" "),e("div",{staticClass:"bg-gray-300 rounded-lg p-6 text-gray-800 overflow-auto"},[e("button",{staticClass:"relative z-20 bg-gray-200 float-right rounded border-1 text-blue-600 border-blue-600 px-5 py-4 transition-all hover:shadow hover:border-blue-800 hover:bg-blue-800 hover:text-white duration-300 uppercase text-sm font-bold tracking-wide",on:{click:function(e){return t.copy(t.tabContent)}}},[e("i",{class:["fa fa-fw mr-3",t.copyText?"fa-check":"fa-clone"]}),t._v(t._s(t.copyText?"Copied!":"Copy")+"\n ")]),t._v(" "),e("pre",{staticClass:"relative z-10"},[t._v(t._s(t.tabContent))])])]),t._v(" "),t._m(3),t._v(" "),e("section",{staticClass:"mt-9 rich-text",domProps:{innerHTML:t._s(t.cms.content)}})])}),[function(){var t=this._self._c;return t("div",{staticClass:"md:flex justify-between"},[t("h1",{staticClass:"mb-6 mr-5 font-bold uppercase tracking-wide"},[this._v("\n 1.  Set Your Luminance-Based Grayscale\n ")]),this._v(" "),t("a",{staticClass:"leading-7 h-7 box-content whitespace-nowrap text-blue-600 hover:bg-white duration-300 inline-block pl-4 pr-5 rounded-full border-1 border-blue-500 bg-blue-200 uppercase text-sm font-bold tracking-wide",attrs:{href:"https://www.loom.com/share/3da3164377e84cbe87c7d0281c823e5e",target:"_blank"}},[t("i",{staticClass:"fa fa-play-circle mr-3 opacity-75"}),this._v("Watch Demo"),t("i",{staticClass:"ml-3 fa fa-xs fa-external-link opacity-50"})])])},function(){var t=this._self._c;return t("p",{staticClass:"flex-shrink"},[this._v("\n Drag the sliders below or use the\n "),t("i",{staticClass:"far fa-ellipsis-h mx-2 text-blue-600"}),this._v(" menu.\n ")])},function(){var t=this._self._c;return t("p",{staticClass:"text-sm leading-6 mt-3 w-double-10 max-w-full mx-auto"},[t("span",{staticClass:"opacity-50"},[this._v("\n Max filesize: 5MB. Upload an image to auto-generate your grayscale and colors.\n ")]),this._v(" "),t("a",{staticClass:"whitespace-no-wrap text-gray-500 transition-colors duration-300 hover:text-gray-700",attrs:{href:"https://www.imgix.com/",target:"_blank",title:"imgix"}},[this._v("Powered by\n "),t("img",{staticClass:"inline h-double-4",attrs:{src:"/img/imgix_logo1_small.png",alt:"imgix"}})])])},function(){var t=this._self._c;return t("section",{staticClass:"mt-9 text-center leading-7"},[t("div",{staticClass:"text-3xl font-bold"},[this._v("Have feedback?")]),this._v(" "),t("a",{staticClass:"inline-block mt-5 leading-6 sm:leading-7 sm:mt-4 text-xl sm:text-2xl sm:border-b-1 border-gold-300 transition-all duration-300 text-gold-600 hover:text-gold-500",attrs:{href:"mailto:feedback@grayscale.design"}},[t("i",{staticClass:"fa fa-send mr-4"}),this._v("Send us an email\n ")])])}],!1,null,null,null);e.default=it.exports},tQfU:function(t,e,r){"use strict";function n(t){return function(t){if(Array.isArray(t))return s(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||a(t)||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 o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,o,a,s,i=[],l=!0,c=!1;try{if(a=(r=r.call(t)).next,0===e){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(i.push(n.value),i.length!==e);l=!0);}catch(t){c=!0,o=t}finally{try{if(!l&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw o}}return i}}(t,e)||a(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){if(t){if("string"==typeof t)return s(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?s(t,e):void 0}}function s(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r1&&void 0!==arguments[1]?arguments[1]:180,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:50,n=p(e,r,t),o=m(e,r,n),a=o.r,s=o.g,i=o.b;return{r:a,g:s,b:i}}function d(t,e){for(var r=100,n=null,o=null,a=t.length-1;a>=0;a--){var s=Math.abs(t[a]-e);s=0;s--){var i=h.apply(void 0,n(Object.values(m(t,e,s)))),l=Math.abs(r-i);l=a-5;s-=.01){var c=h.apply(void 0,n(Object.values(m(t,e,s)))),u=Math.abs(r-c);u=0&&t<60?(s=n,i=o,l=0):t>=60&&t<120?(s=o,i=n,l=0):t>=120&&t<180?(s=0,i=n,l=o):t>=180&&t<240?(s=0,i=o,l=n):t>=240&&t<300?(s=o,i=0,l=n):t>=300&&t<360&&(s=n,i=0,l=o),{r:Math.round(255*(s+a)),g:Math.round(255*(i+a)),b:Math.round(255*(l+a))}}function v(t,e,r){var n=u(t,e,r),o=n.h,a=n.s,s=(n.l,m(o,a,p(o,a,h(t,e,r))));return{r:s.r,g:s.g,b:s.b}}function b(t,e,r,n,o){var a=a(t,e,r);return{falseColorGrayscale:a,falseColor:function(t,e,r){for(var n=h(t,t,t),o=0,a=1/0,s=0;s<=100;s+=.1){var i=m(e,r,s),l=h(i.r,i.g,i.b),c=Math.abs(l-n);c=90?"white":e<=10&&r<=70||0===e?"gray":r<=15?"black":t>=0&&t<=15||t>=346?"red":t>=16&&t<=35?e<90?"brown":"orange":t>=36&&t<=54?e<90?"brown":"yellow":t>=55&&t<=155?"green":t>=156&&t<=190?"teal":t>=191&&t<=260?"blue":t>=261&&t<=290?"purple":t>=291&&t<=345?"pink":void 0}function g(t){return-.011*Math.pow(t,3)+.888*Math.pow(t,2)+10.267*t+27.629}r.r(e),r.d(e,"hexToRGB",(function(){return i})),r.d(e,"RGBToHex",(function(){return c})),r.d(e,"RGBToHSL",(function(){return u})),r.d(e,"lumFromRGB",(function(){return h})),r.d(e,"RGBFromLum",(function(){return f})),r.d(e,"closestLum",(function(){return d})),r.d(e,"lightnessFromHSLum",(function(){return p})),r.d(e,"HSLtoRGB",(function(){return m})),r.d(e,"falseColorGrayscale",(function(){return v})),r.d(e,"generateFalseColorGrayscale",(function(){return b})),r.d(e,"colorName",(function(){return y})),r.d(e,"RGBToOKLCH",(function(){return x}));!function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;t.map((function(t){return Math.round(g(t)*Math.pow(10,e))/Math.pow(10,e)}))}(function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:4,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.66,n=[],o=2*e/(t-1),a=0;at.length)&&(e=t.length);for(var r=0,a=new Array(e);rt.length)&&(e=t.length);for(var r=0,a=new Array(e);r1&&void 0!==arguments[1]?arguments[1]:180,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:50,a=m(e,r,t),n=b(e,r,a),o=n.r,u=n.g,l=n.b;return{r:o,g:u,b:l}}function v(t,e){for(var r=100,a=null,n=null,o=t.length-1;o>=0;o--){var u=Math.abs(t[o]-e);u=0;u--){var l=f.apply(void 0,a(Object.values(b(t,e,u)))),s=Math.abs(r-l);s=o-5;u-=.01){var i=f.apply(void 0,a(Object.values(b(t,e,u)))),c=Math.abs(r-i);c=0&&t<60?(u=a,l=n,s=0):t>=60&&t<120?(u=n,l=a,s=0):t>=120&&t<180?(u=0,l=a,s=n):t>=180&&t<240?(u=0,l=n,s=a):t>=240&&t<300?(u=n,l=0,s=a):t>=300&&t<360&&(u=a,l=0,s=n),{r:Math.round(255*(u+o)),g:Math.round(255*(l+o)),b:Math.round(255*(s+o))}}function h(t,e,r){var a=c(t,e,r),n=a.h,o=a.s,u=(a.l,b(n,o,m(n,o,f(t,e,r))));return{r:u.r,g:u.g,b:u.b}}function p(t,e,r,a,n){var o=o(t,e,r);return{falseColorGrayscale:o,falseColor:function(t,e,r){for(var a=f(t,t,t),n=0,o=1/0,u=0;u<=100;u+=.1){var l=b(e,r,u),s=f(l.r,l.g,l.b),i=Math.abs(s-a);i=90?"white":e<=10&&r<=70||0===e?"gray":r<=15?"black":t>=0&&t<=15||t>=346?"red":t>=16&&t<=35?e<90?"brown":"orange":t>=36&&t<=54?e<90?"brown":"yellow":t>=55&&t<=155?"green":t>=156&&t<=190?"teal":t>=191&&t<=260?"blue":t>=261&&t<=290?"purple":t>=291&&t<=345?"pink":void 0}function g(t){return-.011*Math.pow(t,3)+.888*Math.pow(t,2)+10.267*t+27.629}r.r(e),r.d(e,"hexToRGB",(function(){return l})),r.d(e,"RGBToHex",(function(){return i})),r.d(e,"RGBToHSL",(function(){return c})),r.d(e,"lumFromRGB",(function(){return f})),r.d(e,"RGBFromLum",(function(){return d})),r.d(e,"closestLum",(function(){return v})),r.d(e,"lightnessFromHSLum",(function(){return m})),r.d(e,"HSLtoRGB",(function(){return b})),r.d(e,"falseColorGrayscale",(function(){return h})),r.d(e,"generateFalseColorGrayscale",(function(){return p})),r.d(e,"colorName",(function(){return y}));!function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;t.map((function(t){return Math.round(g(t)*Math.pow(10,e))/Math.pow(10,e)}))}(function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:4,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.66,a=[],n=2*e/(t-1),o=0;ot.length)&&(e=t.length);for(var r=0,a=new Array(e);rt.length)&&(e=t.length);for(var r=0,a=new Array(e);r1&&void 0!==arguments[1]?arguments[1]:180,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:50,a=m(e,r,t),n=b(e,r,a),o=n.r,u=n.g,l=n.b;return{r:o,g:u,b:l}}function v(t,e){for(var r=100,a=null,n=null,o=t.length-1;o>=0;o--){var u=Math.abs(t[o]-e);u=0;u--){var l=f.apply(void 0,a(Object.values(b(t,e,u)))),s=Math.abs(r-l);s=o-5;u-=.01){var i=f.apply(void 0,a(Object.values(b(t,e,u)))),c=Math.abs(r-i);c=0&&t<60?(u=a,l=n,s=0):t>=60&&t<120?(u=n,l=a,s=0):t>=120&&t<180?(u=0,l=a,s=n):t>=180&&t<240?(u=0,l=n,s=a):t>=240&&t<300?(u=n,l=0,s=a):t>=300&&t<360&&(u=a,l=0,s=n),{r:Math.round(255*(u+o)),g:Math.round(255*(l+o)),b:Math.round(255*(s+o))}}function h(t,e,r){var a=c(t,e,r),n=a.h,o=a.s,u=(a.l,b(n,o,m(n,o,f(t,e,r))));return{r:u.r,g:u.g,b:u.b}}function p(t,e,r,a,n){var o=o(t,e,r);return{falseColorGrayscale:o,falseColor:function(t,e,r){for(var a=f(t,t,t),n=0,o=1/0,u=0;u<=100;u+=.1){var l=b(e,r,u),s=f(l.r,l.g,l.b),i=Math.abs(s-a);i=90?"white":e<=10&&r<=70||0===e?"gray":r<=15?"black":t>=0&&t<=15||t>=346?"red":t>=16&&t<=35?e<90?"brown":"orange":t>=36&&t<=54?e<90?"brown":"yellow":t>=55&&t<=155?"green":t>=156&&t<=190?"teal":t>=191&&t<=260?"blue":t>=261&&t<=290?"purple":t>=291&&t<=345?"pink":void 0}function g(t){return-.011*Math.pow(t,3)+.888*Math.pow(t,2)+10.267*t+27.629}r.r(e),r.d(e,"hexToRGB",(function(){return l})),r.d(e,"RGBToHex",(function(){return i})),r.d(e,"RGBToHSL",(function(){return c})),r.d(e,"lumFromRGB",(function(){return f})),r.d(e,"RGBFromLum",(function(){return d})),r.d(e,"closestLum",(function(){return v})),r.d(e,"lightnessFromHSLum",(function(){return m})),r.d(e,"HSLtoRGB",(function(){return b})),r.d(e,"falseColorGrayscale",(function(){return h})),r.d(e,"generateFalseColorGrayscale",(function(){return p})),r.d(e,"colorName",(function(){return y})),r.d(e,"RGBToOKLCH",(function(){return w}));!function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;t.map((function(t){return Math.round(g(t)*Math.pow(10,e))/Math.pow(10,e)}))}(function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:4,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.66,a=[],n=2*e/(t-1),o=0;o