diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..0f4fa67 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,114 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +This is a Laravel 7.30.6 application using the "So LIT" stack: +- **Statamic CMS 3.0** - Headless content management +- **Laravel** - Backend framework +- **InertiaJS** - Bridge between Laravel and Vue +- **Vue 2.6** - Frontend framework with Vue Router +- **TailwindCSS 1.7** - CSS framework + +The application appears to be a design tool focused on color palettes and grayscale generation, with features for SVG export and palette uploads. + +## Development Commands + +### Frontend Build Commands +```bash +npm run dev # Development build +npm run watch # Watch mode with auto-rebuild +npm run hot # Hot module replacement with webpack-dev-server +npm run prod # Production build with minification and PurgeCSS +npm run build # Alias for production build +``` + +### Backend Commands +```bash +php artisan serve # Start development server +php artisan statamic:install # Install/update Statamic +php artisan migrate # Run database migrations +php artisan cache:clear # Clear application cache +php artisan config:clear # Clear config cache +php artisan route:clear # Clear route cache +php artisan view:clear # Clear compiled views +``` + +### Testing Commands +```bash +vendor/bin/phpunit # Run PHP tests +vendor/bin/phpunit --filter TestName # Run specific test +``` + +## Architecture Overview + +### Routing System +The application uses a hybrid routing approach combining Statamic's dynamic content routing with custom Laravel routes: + +1. **Dynamic Statamic Routes** (`routes/web.php:19-26`): All Statamic collection entries are automatically routed through `PageController@index` +2. **Custom API Routes**: + - `/export-svgs` - SVG export functionality + - `/palette-uploads` - File upload handling + +### InertiaJS Component Resolution +The app uses a nested layout system with automatic fallbacks (`resources/js/site.js:34-61`): + +1. **Layouts**: Loaded from `resources/js/Layouts/{StudlyCasedLayoutName}.vue` (falls back to `Default.vue`) +2. **Templates**: Loaded from `resources/js/Templates/{StudlyCasedTemplateName}.vue` (falls back to `Default.vue`) +3. **Pages**: Loaded from `resources/js/Pages/{StudlyCasedPageName}.vue` (falls back to `Default.vue`) + +The layout and template names come from Statamic's content configuration, while the page name is derived from the URL. + +### Key Controller Logic +`PageController@index` (`app/Http/Controllers/PageController.php`): +- Resolves URLs to Statamic content +- Transforms content to augmented arrays +- Extracts layout/template names from Statamic data +- Passes data to InertiaJS with proper StudlyCase naming + +### Frontend Asset Pipeline +- **Laravel Mix** handles webpack configuration (`webpack.mix.js`) +- **Entry Point**: `resources/js/site.js` → `public/js/site.js` +- **CSS**: `resources/css/tailwind.css` → `public/css/tailwind.css` with PostCSS processing +- **PurgeCSS** enabled in production to remove unused styles +- **BrowserSync** configured for local development at `https://grayscale.valet` + +## Local Development Setup + +### Environment Configuration +- **URL**: `http://grayscale.valet` (using Laravel Valet/Herd) +- **Database**: MySQL database named `grayscale` +- **Session Driver**: Database sessions +- **Cache Driver**: File-based caching + +### Required Services +- PHP 7.2.5+ +- MySQL +- Node.js (version specified in `.nvmrc`) +- Composer + +## Project-Specific Features + +### Color/Design Tools +- Palette generation and management +- Grayscale conversions (see `resources/js/Pages/FalseColor.vue`) +- SVG export capabilities (`ExportController@svgs`) +- File upload for palettes (`UploadController@upload`) + +### Component Structure +- `PaletteRow.vue` - Display palette rows +- `SwatchSquare.vue` - Individual color swatches +- `GrayscaleRow.vue` - Grayscale variations display + +## Important Considerations + +1. **Statamic Content**: All content is managed through Statamic CMS. The PHP controllers primarily handle the bridge between Statamic and InertiaJS. + +2. **Asset Versioning**: Production builds use Mix versioning for cache busting (`mix.version()`) + +3. **Ziggy Routes**: The project includes Ziggy for using Laravel routes in JavaScript, though it appears partially implemented + +4. **Vue Router**: Configured but minimally used - mainly InertiaJS handles routing + +5. **Content Directory**: Statamic content files are stored in the `content/` directory \ No newline at end of file diff --git a/public/0.js b/public/0.js index c876543..84b9b43 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].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;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}),a=({h:t,s:e,v:r,a:n})=>{const a=(200-e)*r/100;return{h:t,s:a>0&&a<200?e*r/100/(a<=100?a:200-a)*100:0,l:a/2,a:n}},o=t=>{const{h:e,s:r,l:n}=a(t);return`hsl(${e}, ${r}%, ${n}%)`},s=({h:t,s:e,v:r,a:n})=>{t=t/360*6,e/=100,r/=100;const a=Math.floor(t),o=r*(1-e),s=r*(1-(t-a)*e),i=r*(1-(1-t+a)*e),l=a%6;return{r:Math.round(255*[r,s,o,o,i,r][l]),g:Math.round(255*[i,r,r,s,o,o][l]),b:Math.round(255*[o,o,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 a=Math.max(t,e,r),o=a-Math.min(t,e,r),s=o?a===t?(e-r)/o:a===e?2+(r-t)/o:4+(t-e)/o:0;return{h:Math.round(60*(s<0?s+6:s)),s:Math.round(a?o/a*100:0),v:Math.round(a/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 v=!1;const m=t=>"touches"in t,b=(t,e,r)=>{t.dispatchEvent(new CustomEvent("move",{bubbles:!0,detail:t.getMove(e,r)}))},g=(t,e)=>{const r=m(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 y 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(v?"touchmove":"mousemove",this),e(v?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(v&&!m(t))&&(v||(v=m(t)),!0))(t)||!v&&0!=t.button)return;g(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),g(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 w=h("");customElements.define("vc-hue",class extends y{constructor(){super(),f(this,w),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:o({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 x=h("");customElements.define("vc-saturation",class extends y{constructor(){super(),f(this,x),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=o({h:t.h,s:100,v:100,a:1}),this.setStyles({top:100-t.v+"%",left:t.s+"%",color:o(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 k=h('\n\n\n\n'),C=Symbol("h"),_=Symbol("s"),L=Symbol("same"),O=Symbol("color"),S=Symbol("hsva"),T=Symbol("change"),j=Symbol("render");class M extends HTMLElement{constructor(){super();const t=f(this,k);t.addEventListener("move",this),this[_]=t.children[1],this[C]=t.children[2]}static get observedAttributes(){return["color"]}get color(){return this[O]}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[S],t.detail);let r;this[j](e),u(e,this[S])||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[C].hue=t.h}[T](t,e){this[O]=t,this[S]=e,this.dispatchEvent(new CustomEvent("color-changed",{detail:{value:t}}))}}const E={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 M{get colorModel(){return E}}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))},D={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(","),")")}}},A=r("KHd+"),H=Object(A.a)(D,(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 R(t){return(R="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,a=Object.defineProperty||function(t,e,r){t[e]=r.value},o="function"==typeof Symbol?Symbol:{},s=o.iterator||"@@iterator",i=o.asyncIterator||"@@asyncIterator",l=o.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 o=e&&e.prototype instanceof m?e:m,s=Object.create(o.prototype),i=new j(n||[]);return a(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",v={};function m(){}function b(){}function g(){}var y={};c(y,s,(function(){return this}));var w=Object.getPrototypeOf,x=w&&w(w(M([])));x&&x!==r&&n.call(x,s)&&(y=x);var k=g.prototype=m.prototype=Object.create(y);function C(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function _(t,e){function r(a,o,s,i){var l=h(t[a],t,o);if("throw"!==l.type){var c=l.arg,u=c.value;return u&&"object"==R(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 o;a(this,"_invoke",{value:function(t,n){function a(){return new e((function(e,a){r(t,n,e,a)}))}return o=o?o.then(a,a):a()}})}function L(e,r,n){var a=f;return function(o,s){if(a===d)throw Error("Generator is already running");if(a===p){if("throw"===o)throw s;return{value:t,done:!0}}for(n.method=o,n.arg=s;;){var i=n.delegate;if(i){var l=O(i,n);if(l){if(l===v)continue;return l}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(a===f)throw a=p,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);a=d;var c=h(e,r,n);if("normal"===c.type){if(a=n.done?p:"suspendedYield",c.arg===v)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(a=p,n.method="throw",n.arg=c.arg)}}}function O(e,r){var n=r.method,a=e.iterator[n];if(a===t)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=t,O(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),v;var o=h(a,e.iterator,r.arg);if("throw"===o.type)return r.method="throw",r.arg=o.arg,r.delegate=null,v;var s=o.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,v):s:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,v)}function S(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(S,this),this.reset(!0)}function M(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 a=-1,o=function r(){for(;++a=0;--o){var s=this.tryEntries[o],i=s.completion;if("root"===s.tryLoc)return a("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 a=this.tryEntries[r];if(a.tryLoc<=this.prev&&n.call(a,"finallyLoc")&&this.prev=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),T(r),v}},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 a=n.arg;T(r)}return a}}throw Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:M(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),v}},e}function V(t,e,r,n,a,o,s){try{var i=t[o](s),l=i.value}catch(t){return void r(t)}i.done?e(l):Promise.resolve(l).then(n,a)}function U(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,a,o,s,i=[],l=!0,c=!1;try{if(o=(r=r.call(t)).next,0===e){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=o.call(r)).done)&&(i.push(n.value),i.length!==e);l=!0);}catch(t){c=!0,a=t}finally{try{if(!l&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw a}}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 N(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?"#"+N(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?"#"+N(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=U(Object.keys(t.paletteClone.closest)||[],1)[0];Object.keys(t.paletteClone.swatches).forEach(function(){var n,a=(n=I().mark((function n(a){var o,s,i,l,c,u,h;return I().wrap((function(n){for(;;)switch(n.prev=n.next){case 0:return o=t.paletteClone.swatches[a],s=Math.abs(r-a),(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,o.lum);case 10:c=n.sent,u=B.HSLtoRGB(i,l,c),h=Object.values(u).map(Math.round),t.paletteClone.swatches[a].hsl=[i,l,c],t.paletteClone.swatches[a].hex=B.RGBToHex.apply(B,N(h)),t.paletteClone.swatches[a].rgb=h,t.paletteClone.swatches[a].oklch=Object.values(B.RGBToOKLCH.apply(B,N(h))),t.paletteClone.swatches[a].lum=B.lumFromRGB.apply(B,N(t.paletteClone.swatches[a].rgb));case 18:case"end":return n.stop()}}),n)})),function(){var t=this,e=arguments;return new Promise((function(r,a){var o=n.apply(t,e);function s(t){V(o,r,a,s,i,"next",t)}function i(t){V(o,r,a,s,i,"throw",t)}s(void 0)}))});return function(t){return a.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==U(Object.keys(this.paletteClone.closest||{})||[],1)[0]}}},q=Object(A.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 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,a=n.parentElement;if(a){var o=a.clientWidth,s=a.parentElement;if(s){var i=t[r]-a.offsetLeft-s.offsetLeft;if(i<=0||i>=o)return t.preventDefault(),i<=0?0:100;var l=parseFloat(i/o*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 a=Object.keys(this.swatchPositions).reduce((function(t,e){return t.push(r.swatchPositions[e]),t}),[]);clearTimeout(this.setLumsTimeout),this.setLumsTimeout=setTimeout((function(){r.setLums(a,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,a=Object.defineProperty||function(t,e,r){t[e]=r.value},o="function"==typeof Symbol?Symbol:{},s=o.iterator||"@@iterator",i=o.asyncIterator||"@@asyncIterator",l=o.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 o=e&&e.prototype instanceof m?e:m,s=Object.create(o.prototype),i=new j(n||[]);return a(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",v={};function m(){}function b(){}function g(){}var y={};c(y,s,(function(){return this}));var w=Object.getPrototypeOf,x=w&&w(w(M([])));x&&x!==r&&n.call(x,s)&&(y=x);var k=g.prototype=m.prototype=Object.create(y);function C(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function _(t,e){function r(a,o,s,i){var l=h(t[a],t,o);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 o;a(this,"_invoke",{value:function(t,n){function a(){return new e((function(e,a){r(t,n,e,a)}))}return o=o?o.then(a,a):a()}})}function L(e,r,n){var a=f;return function(o,s){if(a===d)throw Error("Generator is already running");if(a===p){if("throw"===o)throw s;return{value:t,done:!0}}for(n.method=o,n.arg=s;;){var i=n.delegate;if(i){var l=O(i,n);if(l){if(l===v)continue;return l}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(a===f)throw a=p,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);a=d;var c=h(e,r,n);if("normal"===c.type){if(a=n.done?p:"suspendedYield",c.arg===v)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(a=p,n.method="throw",n.arg=c.arg)}}}function O(e,r){var n=r.method,a=e.iterator[n];if(a===t)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=t,O(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),v;var o=h(a,e.iterator,r.arg);if("throw"===o.type)return r.method="throw",r.arg=o.arg,r.delegate=null,v;var s=o.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,v):s:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,v)}function S(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(S,this),this.reset(!0)}function M(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 a=-1,o=function r(){for(;++a=0;--o){var s=this.tryEntries[o],i=s.completion;if("root"===s.tryLoc)return a("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 a=this.tryEntries[r];if(a.tryLoc<=this.prev&&n.call(a,"finallyLoc")&&this.prev=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),T(r),v}},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 a=n.arg;T(r)}return a}}throw Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:M(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),v}},e}function W(t,e,r,n,a,o,s){try{var i=t[o](s),l=i.value}catch(t){return void r(t)}i.done?e(l):Promise.resolve(l).then(n,a)}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),a=n-r,o=a/(e-1),s=a/2+r,i=(e-1)/2,l=[r],c=1;ct?e:t}),0),a=(n-r)/(e-1),o=[r],s=1;st?e:t}),0),a=(n-r)/(e-1),o=[r],s=1;st?e:t}),0),a=(n-r)/(e-1),o=[r],s=e-2;s>0;){var i=s*a;i*=Math.pow((e-1)/e,e-s*(e+1)/e),o.push(Math.max(n-i,r)),s--}return o.push(n),o.reverse(),o}},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,autoDarkModeTab:"css"}},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,a=r.g,o=r.b,s=B.RGBToHSL(n,a,o),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))),v=i-120;v<0&&(v+=360);var m=B.HSLtoRGB(v,l,B.lightnessFromHSLum(v,l,40)),b=B.RGBToHex.apply(B,nt(Object.values(m).map(Math.round))),g=i+60;g>359&&(g-=360);var y=B.HSLtoRGB(g,l,B.lightnessFromHSLum(g,l,40)),w=B.RGBToHex.apply(B,nt(Object.values(y).map(Math.round))),x=i-60;x<0&&(x+=360);var k=B.HSLtoRGB(x,l,B.lightnessFromHSLum(x,l,40));return[B.RGBToHex.apply(B,nt(Object.values(k).map(Math.round))),b,h,p,w].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 a=r.name;if(!a){var o=B.closestLum(t.lumsValues,50),s=rt(Object.keys(o)||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;a=B.colorName(c,u,h)}"grayscale"===a&&(a+="-alt"),e[a]=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:a,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(a){var o=t.cssColors[r].swatches[a],s=t.getValueLabel(a,n);e[r][s]=t.formatSwatchColor(o),t.isLockedHex(o.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(a){var o=e[n].swatches[a],s=parseInt(a,10)+1;r+=" '".concat(n).concat(s,"': '").concat(t.formatSwatchColor(o),"',\n")})),r+="};\n",r+="\nconst ".concat(n,"Dark = {\n"),Object.keys(e[n].swatches).forEach((function(a){var o=e[n].swatches[a],s=100-o.lum,i=rt(o.hsl,2),l=i[0],c=i[1],u=B.lightnessFromHSLum(l,c,s),h=B.HSLtoRGB(o.hsl[0],o.hsl[1],u),f=h.r,d=h.g,p=h.b,v={lum:s,hex:B.RGBToHex(f,d,p),rgb:[f,d,p].map(Math.round),hsl:[l,c,u],label:parseInt(a,10)+1};r+=" '".concat(n).concat(v.label,"': '").concat(t.formatSwatchColor(v),"',\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 a=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(o){var s=e[n].swatches[o],i=t.getValueLabel(o,a);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 a=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(o){var s=e[n].swatches[o],i=t.getValueLabel(o,a);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 a=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(o){var s=e[n].swatches[o],i=t.getValueLabel(o,a);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 a=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(o){var s=e[n].swatches[o],i=t.getValueLabel(o,a>=10);r+="".concat(n,"-").concat(i," = ").concat(t.formatSwatchColor(s),"\n")})),r+="\n"}),"")},autoDarkModeCss:function(){var t=this,e=this.cssColors,r="@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer utilities {\n";if(r+=" /* Grayscale Design palette: ".concat(window.location.href," */\n"),r+=" :root {\n",r+=Object.keys(e).reduce((function(r,n){r+="\n";var a=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(o){var s,i=e[n].swatches[o],l=t.getValueLabel(o,a),c=null===(s=i.rgb)||void 0===s?void 0:s.join(" ");c&&(r+=" --".concat(n,"-").concat(l,": ").concat(c,";\n"))})),r}),""),r+="\n --black: 0 0 0;\n",r+=" --white: 255 255 255;\n\n",e.grayscale&&e.grayscale.swatches){r+=" /* Set abstract colors */\n",r+=" --dark: var(--black);\n",r+=" --light: var(--white);\n\n";var n=e.grayscale.swatches,a=Object.keys(n).sort((function(t,e){return parseInt(t)-parseInt(e)})),o=a.length;a.forEach((function(e){var n=t.getValueLabel(e,o);r+=" --neutral-".concat(n,": var(--grayscale-").concat(n,");\n")}))}if(r+=" }\n\n",r+=" @media (prefers-color-scheme: dark) {\n",r+=" /* Flip the values for dark mode */\n",r+=" :root {\n",r+=" --dark: var(--white);\n",r+=" --light: var(--black);\n\n",e.grayscale&&e.grayscale.swatches){var s=e.grayscale.swatches,i=Object.keys(s).sort((function(t,e){return parseInt(t)-parseInt(e)})),l=i.length;i.forEach((function(e){var n=t.getValueLabel(e,l),a=l-1-parseInt(e),o=t.getValueLabel(a,l);r+=" --neutral-".concat(n,": var(--grayscale-").concat(o,");\n")}))}if(Object.keys(e).forEach((function(n){if("grayscale"!==n){r+="\n";var a=Object.keys(e[n].swatches).length;Object.keys(e[n].swatches).sort((function(t,e){return parseInt(t)-parseInt(e)})).forEach((function(e){var o=t.getValueLabel(e,a),s=a-1-parseInt(e),i=t.getValueLabel(s,a);r+=" --".concat(n,"-").concat(o,": var(--").concat(n,"-").concat(i,");\n")}))}})),r+=" }\n\n",r+='\n /* with this utility class you can do something like
and it (and all it\'s child elements) will not automatically switch in darkmode. */\n',r+=" .unset-dark-mode {\n",r+=Object.keys(e).reduce((function(r,n){var a=Object.keys(e[n].swatches).length;return Object.keys(e[n].swatches).forEach((function(e){var o=t.getValueLabel(e,a);r+=" --".concat(n,"-").concat(o,": var(--").concat(n,"-").concat(o,");\n")})),r+="\n"}),""),e.grayscale&&e.grayscale.swatches){var c=e.grayscale.swatches,u=Object.keys(c).sort((function(t,e){return parseInt(t)-parseInt(e)})),h=u.length;u.forEach((function(e){var n=t.getValueLabel(e,h);r+=" --neutral-".concat(n,": var(--grayscale-").concat(n,");\n")}))}return r+=" }\n",r+=" }\n",r+="}"},autoDarkModeTailwindConfig:function(){var t=this,e=this.cssColors,r="function setAsCssVariable(colorName) {\n";if(r+=" let augmentedPalette = {};\n",r+=" const values = [",e.grayscale&&e.grayscale.swatches){var n=Object.keys(e.grayscale.swatches).sort((function(t,e){return parseInt(t)-parseInt(e)})),a=n.map((function(e){return t.getValueLabel(e,n.length)}));r+=a.join(", ")}else r+="50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100";return r+="];\n",r+=" values.forEach((value) => {\n",r+=" augmentedPalette[value] = `rgb(var(--${colorName}-${value}) / )`;\n",r+=" });\n",r+=" return augmentedPalette;\n",r+="}\n\n",r+="module.exports = {\n",r+=" theme: {\n",r+=" colors: {\n",r+=" current: 'currentColor',\n",r+=" transparent: 'transparent',\n",r+=" black: 'rgb(var(--black) / )',\n",r+=" white: 'rgb(var(--white) / )',\n",r+=" light: 'rgb(var(--light) / )',\n",r+=" dark: 'rgb(var(--dark) / )',\n",Object.keys(e).forEach((function(t){r+=" ".concat(t,": setAsCssVariable('").concat(t,"'),\n")})),r+=" neutral: setAsCssVariable('neutral'),\n",r+=" },\n",r+=" },\n",r+="};\n"},autoDarkModeTabContent:function(){return"css"===this.autoDarkModeTab?this.autoDarkModeCss:"config"===this.autoDarkModeTab?this.autoDarkModeTailwindConfig:void 0}},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,a=e.palettes,o=void 0===a?[]:a,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=o.split(",").filter((function(t){return!!t})),d=c.split(",").filter((function(t){return!!t})),p=h.split(",").filter((function(t){return!!t})),v=i.split(",").filter((function(t){return!!t}));f.forEach((function(e,r){var n=rt(v[r].split("|"),2),a=n[0],o=void 0===a?0:a,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:o,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:{onPaste:function(t){var e,r=t.target,n=null==t||null===(e=t.clipboardData)||void 0===e?void 0:e.getData("text/plain");if(!n)return!0;t.preventDefault();var a="",o=n.trim(),s=o.match(/^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/);if(s)4===(a="#".concat(s[1])).length&&(a="#"+nt(a.slice(1)).map((function(t){return t+t})).join(""));else{var i=o.match(/(\d+)\s*[,\s]\s*(\d+)(%?)\s*[,\s]\s*(\d+)(%?)/);if(i&&("%"===i[3]||"%"===i[5]||o.toLowerCase().includes("hsl"))){var l=parseInt(i[1]),c=parseInt(i[2]),u=parseInt(i[4]),h=B.HSLtoRGB(l,c,u);a=B.RGBToHex(Math.round(h.r),Math.round(h.g),Math.round(h.b))}else if(i){var f=Math.min(255,Math.max(0,parseInt(i[1]))),d=Math.min(255,Math.max(0,parseInt(i[2]))),p=Math.min(255,Math.max(0,parseInt(i[4])));a=B.RGBToHex(f,d,p)}else{var v=o.replace(/[^0-9A-Fa-f]/g,"").slice(0,6);a=v.length>=3?"#".concat(v):"#000000"}}return r.value=a,r.dispatchEvent(new Event("input",{bubbles:!0})),!1},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,a){var o=!1;e[a]=[];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 v=0,m=rt(e[d][p],3),b=m[0],g=m[1],y=m[2];if(u<=b&&u>=b&&v++,h<=g&&h>=g&&v++,f<=y&&f>=y&&v++,v>=2){var w=t.palettes[a].hex,x=t.palettes[d].hex,k=B.lumFromRGB.apply(B,nt(Object.values(B.hexToRGB(w)))),C=B.lumFromRGB.apply(B,nt(Object.values(B.hexToRGB(x)))),_=Math.abs(50-k);Math.abs(50-C)<_&&-1===r.indexOf(a)?r.push(a):r.push(d),o=!0;break}}if(o)break}o||e[a].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 a=e.lockedByHex[n];if(t!==n)r[n]=a;else{var o=e.lums[a.lumIndex].label;e.lums[a.lumIndex]={lum:a.lastLum,rgb:e.lumToGrayscaleRGB(a.lastLum),label:o}}return r}),{});this.lockedByHex=n}else{var a=G(this.lockedByHex),o=Object.values(B.hexToRGB(t)),s=B.lumFromRGB.apply(B,o),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},a[t]={lumIndex:u,lastLum:d},this.lockedByHex=a}},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,a){return r[a]={lum:n,rgb:e.lumToGrayscaleRGB(n),label:e.getValueLabel(a,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 a=this;if(this.autoDistribute){var o=Object.keys(this.lums);o.pop(),o.shift(),o.forEach((function(o){if((o=parseInt(o,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 a;return Q().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t.isUploading=!0,(a=t.$refs.upload)&&a.files&&!(a.files.length<=0)){e.next=5;break}return n("No file selected."),e.abrupt("return");case 5:if(t.uploadFile=a.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,a){var o=e.apply(t,r);function s(t){W(o,n,a,s,i,"next",t)}function i(t){W(o,n,a,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 a=null==r?"":r;e.append(n,a)}else Object.keys(r).forEach((function(a){t(e,r[a],n?"".concat(n,"[").concat(a,"]"):a)}))}(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(A.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:{focus:function(t){return t.target.select()},paste:t.onPaste,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(" "),e("section",{staticClass:"mt-10"},[t._m(3),t._v(" "),e("p",{staticClass:"mt-4 text-gray-600 leading-relaxed"},[t._v("\n Generate CSS and Tailwind config for automatic dark mode using flipped color scales. \n This approach creates symmetric color values that automatically invert in dark mode while maintaining consistent contrast ratios.\n ")]),t._v(" "),e("div",{staticClass:"mt-6 space-x-5"},[e("button",{class:["css"===t.autoDarkModeTab?"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.autoDarkModeTab="css"}}},[t._v("\n CSS Variables\n ")]),t._v(" "),e("button",{class:["config"===t.autoDarkModeTab?"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.autoDarkModeTab="config"}}},[t._v("\n Tailwind Config\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.autoDarkModeTabContent)}}},[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.autoDarkModeTabContent))])]),t._v(" "),t._m(4)]),t._v(" "),t._m(5),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("div",{staticClass:"flex justify-between"},[t("h1",{staticClass:"font-bold uppercase tracking-wide leading-7"},[this._v("4.  Tailwind Auto-Dark Mode")]),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/4b52f02f07264137b70c7864f8928c77",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,e=t._self._c;return e("div",{staticClass:"mt-4 text-sm text-gray-500 leading-relaxed"},[e("p",[e("strong",[t._v("How to use:")])]),t._v(" "),e("ol",{staticClass:"mt-2 list-decimal list-inside space-y-1 pl-4"},[e("li",[t._v("Copy the CSS Variables code and paste it into your main CSS file")]),t._v(" "),e("li",[t._v("Copy the Tailwind Config code and merge it with your tailwind.config.js")]),t._v(" "),e("li",[t._v("Use color classes like "),e("code",{staticClass:"bg-gray-200 px-1 rounded"},[t._v("text-neutral-600")]),t._v(" or "),e("code",{staticClass:"bg-gray-200 px-1 rounded"},[t._v("bg-primary-200")])]),t._v(" "),e("li",[t._v("Colors will automatically flip to their opposite values in dark mode")]),t._v(" "),e("li",[t._v("Use the "),e("code",{staticClass:"bg-gray-200 px-1 rounded"},[t._v("unset-dark-mode")]),t._v(" class to prevent auto-flipping on specific elements")])])])},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)||o(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 a(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,a,o,s,i=[],l=!0,c=!1;try{if(o=(r=r.call(t)).next,0===e){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=o.call(r)).done)&&(i.push(n.value),i.length!==e);l=!0);}catch(t){c=!0,a=t}finally{try{if(!l&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw a}}return i}}(t,e)||o(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 o(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),a=v(e,r,n),o=a.r,s=a.g,i=a.b;return{r:o,g:s,b:i}}function d(t,e){for(var r=100,n=null,a=null,o=t.length-1;o>=0;o--){var s=Math.abs(t[o]-e);s=0;s--){var i=h.apply(void 0,n(Object.values(v(t,e,s)))),l=Math.abs(r-i);l=o-5;s-=.01){var c=h.apply(void 0,n(Object.values(v(t,e,s)))),u=Math.abs(r-c);u=0&&t<60?(s=n,i=a,l=0):t>=60&&t<120?(s=a,i=n,l=0):t>=120&&t<180?(s=0,i=n,l=a):t>=180&&t<240?(s=0,i=a,l=n):t>=240&&t<300?(s=a,i=0,l=n):t>=300&&t<360&&(s=n,i=0,l=a),{r:Math.round(255*(s+o)),g:Math.round(255*(i+o)),b:Math.round(255*(l+o))}}function m(t,e,r){var n=u(t,e,r),a=n.h,o=n.s,s=(n.l,v(a,o,p(a,o,h(t,e,r))));return{r:s.r,g:s.g,b:s.b}}function b(t,e,r,n,a){var o=o(t,e,r);return{falseColorGrayscale:o,falseColor:function(t,e,r){for(var n=h(t,t,t),a=0,o=1/0,s=0;s<=100;s+=.1){var i=v(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 y(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 v})),r.d(e,"falseColorGrayscale",(function(){return m})),r.d(e,"generateFalseColorGrayscale",(function(){return b})),r.d(e,"colorName",(function(){return g})),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(y(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=[],a=2*e/(t-1),o=0;o= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(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; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; } +function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } +function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; } +function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } +function _nonIterableRest() { 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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } +function _nonIterableSpread() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } +function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } + + + + + + + +/* harmony default export */ __webpack_exports__["default"] = ({ + name: 'App', + components: { + PaletteRow: _components_PaletteRow__WEBPACK_IMPORTED_MODULE_5__["default"], + GrayscaleRow: _components_GrayscaleRow__WEBPACK_IMPORTED_MODULE_6__["default"] + }, + props: { + cms: { + type: Object, + "default": function _default() { + var Statamic = window.Statamic || {}; + return Statamic.cms || {}; + } + }, + csrf: String + }, + data: function data() { + return { + showPicker: null, + presets: { + bell: { + label: 'Bell Curve', + icon: 'fa fa-wave-sine', + getValues: function getValues(lums, count) { + var min = lums.reduce(function (num, val) { + return val < num ? val : num; + }, 100); + var max = lums.reduce(function (num, val) { + return val > num ? val : num; + }, 0); + var spread = max - min; + var space = spread / (count - 1); + var mid = spread / 2 + min; + var half = (count - 1) / 2; + var vals = [min]; + var i = 1; + while (i < count - 1) { + var val = void 0, + virtualIndex = void 0; + if (i === half) { + val = mid; + } else if (i < half) { + virtualIndex = half - i; + val = i * space; + val *= Math.pow((half - 1) / half, virtualIndex); + val = Math.max(val + min, min); + } else { + virtualIndex = i - half; + val = (count - 1 - i) * space; + val *= Math.pow((half - 1) / half, virtualIndex); + val = Math.min(max - val, max); + } + vals.push(val); + i++; + } + vals.push(max); + vals.reverse(); + return vals; + } + }, + linear: { + label: 'Linear', + icon: 'fa fa-horizontal-rule', + getValues: function getValues(lums, count) { + var min = lums.reduce(function (num, val) { + return val < num ? val : num; + }, 100); + var max = lums.reduce(function (num, val) { + return val > num ? val : num; + }, 0); + var space = (max - min) / (count - 1); + var vals = [min]; + var i = 1; + while (i < count - 1) { + var val = min + i * space; + vals.push(val); + i++; + } + vals.push(max); + vals.reverse(); + return vals; + } + }, + dark: { + label: 'Darker Side', + icon: 'fa fa-moon', + getValues: function getValues(lums, count) { + var min = lums.reduce(function (num, val) { + return val < num ? val : num; + }, 100); + var max = lums.reduce(function (num, val) { + return val > num ? val : num; + }, 0); + var spread = max - min; + var space = spread / (count - 1); + var vals = [min]; + var i = 1; + while (i < count - 1) { + var val = i * space; + val *= Math.pow((count - 1) / count, count - i * (count + 1) / count); + vals.push(Math.min(val + min, max)); + i++; + } + vals.push(max); + vals.reverse(); + return vals; + } + }, + light: { + label: 'Lighter Side', + icon: 'fa fa-sun', + getValues: function getValues(lums, count) { + var min = lums.reduce(function (num, val) { + return val < num ? val : num; + }, 100); + var max = lums.reduce(function (num, val) { + return val > num ? val : num; + }, 0); + var spread = max - min; + var space = spread / (count - 1); + var vals = [min]; + var i = count - 2; + while (i > 0) { + var val = i * space; + val *= Math.pow((count - 1) / count, count - i * (count + 1) / count); + vals.push(Math.max(max - val, min)); + i--; + } + vals.push(max); + vals.reverse(); + return vals; + } + }, + "default": { + label: 'Default', + icon: 'fa fa-dot-circle', + getValues: function getValues(lums, count) { + return [93.87, 82.28, 68.67, 49.10, 40.20, 32.78, 13.29, 9.31, 6.30, 2.62, 1.30, 0.52]; + } + }, + tailwind: { + label: 'Tailwind', + icon: 'fak fa-tailwind', + getValues: function getValues(lums, count) { + 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 getValues(lums, count) { + 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: false, + palettes: [], + showFilters: [], + lockedPalettes: [], + lockedByHex: {}, + showPresets: false, + showUploadForm: false, + paletteCacheBustTimeout: 0, + updateSwatchTimeout: 0, + isUploading: false, + uploadFile: null, + base64File: null, + uploadFileUrl: '', + uploadFilePath: '', + grayscaleJson: {}, + paletteJson: {}, + shownPaletteMenu: null, + setFromUploadTimeout: 0, + hasUpdatedLumsCount: false, + copyText: '', + showLumsMenu: false, + storedSwatches: {}, + cssTab: 'tailwind', + cssType: 'rgb', + updateUrlTimeout: 0, + textOverlay: false, + autoDarkModeTab: 'css' + }; + }, + computed: { + radixLums: function radixLums() { + var newLums = this.lums; + Object.keys(this.lums).forEach(function (lum, i) { + newLums[lum].label = parseInt(i, 10) + 1; + }); + return newLums; + }, + isRadixPreset: function isRadixPreset() { + return JSON.stringify(this.presets.radix.getValues()) == JSON.stringify(this.lumsValues); + }, + isTailwindPreset: function isTailwindPreset() { + return JSON.stringify(this.presets.tailwind.getValues()) == JSON.stringify(this.lumsValues); + }, + suggestedColors: function suggestedColors() { + var _this = this; + if (!this.paletteBases.length) return []; + var hex = this.paletteBases[0]; + if (hex === '#000000') return []; + var _Color$hexToRGB = _utils_color__WEBPACK_IMPORTED_MODULE_3__["hexToRGB"](hex), + r = _Color$hexToRGB.r, + g = _Color$hexToRGB.g, + b = _Color$hexToRGB.b; + var _Color$RGBToHSL = _utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToHSL"](r, g, b), + h = _Color$RGBToHSL.h, + s = _Color$RGBToHSL.s, + l = _Color$RGBToHSL.l; + var lum = 40; // Color.lumFromRGB(r, g, b); + var complH = h > 179 ? h - 180 : h + 180; + var complRGB = _utils_color__WEBPACK_IMPORTED_MODULE_3__["HSLtoRGB"](complH, s, _utils_color__WEBPACK_IMPORTED_MODULE_3__["lightnessFromHSLum"](complH, s, lum)); + var complHex = _utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToHex"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_3__, _toConsumableArray(Object.values(complRGB).map(Math.round))); + var tri1H = h + 120; + if (tri1H > 359) tri1H -= 360; + var tri1RGB = _utils_color__WEBPACK_IMPORTED_MODULE_3__["HSLtoRGB"](tri1H, s, _utils_color__WEBPACK_IMPORTED_MODULE_3__["lightnessFromHSLum"](tri1H, s, lum)); + var tri1Hex = _utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToHex"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_3__, _toConsumableArray(Object.values(tri1RGB).map(Math.round))); + var tri2H = h - 120; + if (tri2H < 0) tri2H += 360; + var tri2RGB = _utils_color__WEBPACK_IMPORTED_MODULE_3__["HSLtoRGB"](tri2H, s, _utils_color__WEBPACK_IMPORTED_MODULE_3__["lightnessFromHSLum"](tri2H, s, lum)); + var tri2Hex = _utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToHex"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_3__, _toConsumableArray(Object.values(tri2RGB).map(Math.round))); + var near1H = h + 60; + if (near1H > 359) near1H -= 360; + var near1RGB = _utils_color__WEBPACK_IMPORTED_MODULE_3__["HSLtoRGB"](near1H, s, _utils_color__WEBPACK_IMPORTED_MODULE_3__["lightnessFromHSLum"](near1H, s, lum)); + var near1Hex = _utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToHex"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_3__, _toConsumableArray(Object.values(near1RGB).map(Math.round))); + var near2H = h - 60; + if (near2H < 0) near2H += 360; + var near2RGB = _utils_color__WEBPACK_IMPORTED_MODULE_3__["HSLtoRGB"](near2H, s, _utils_color__WEBPACK_IMPORTED_MODULE_3__["lightnessFromHSLum"](near2H, s, lum)); + var near2Hex = _utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToHex"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_3__, _toConsumableArray(Object.values(near2RGB).map(Math.round))); + return [near2Hex, tri2Hex, complHex, tri1Hex, near1Hex].filter(function (h) { + return _this.paletteBases.indexOf(h) === -1; + }); + }, + tabContent: function tabContent() { + if (this.cssTab === 'tailwind') return this.cssTailwind; + if (this.cssTab === 'radix') return this.cssRadix; + if (this.cssTab === 'vars') return this.cssVars; + if (this.cssTab === 'scss') return this.cssScss; + if (this.cssTab === 'stylus') return this.cssStylus; + if (this.cssTab === 'less') return this.cssLess; + }, + paletteBases: function paletteBases() { + this.updateUrl(); + return this.palettes.reduce(function (arr, palette) { + arr.push(palette.hex); + return arr; + }, []); + }, + paletteNames: function paletteNames() { + this.updateUrl(); + return this.palettes.reduce(function (arr, palette) { + arr.push(palette.name); + return arr; + }, []); + }, + paletteLabels: function paletteLabels() { + this.updateUrl(); + return this.palettes.reduce(function (arr, palette) { + arr.push(palette.label); + return arr; + }, []); + }, + paletteFilters: function paletteFilters() { + return this.palettes.reduce(function (arr, palette) { + arr.push(palette.filters); + return arr; + }, []); + }, + hasLockedLums: function hasLockedLums() { + return Object.keys(this.lockedByHex).length > 0; + }, + lumsValues: function lumsValues() { + var _this2 = this; + return Object.keys(this.lums).reduce(function (arr, index) { + arr.push(_this2.lums[index].lum); + return arr; + }, []); + }, + lumsCount: function lumsCount() { + return Object.keys(this.lums).length; + }, + exportConfig: function exportConfig() { + return JSON.stringify(this.cssColors); + }, + cssColors: function cssColors() { + var _this3 = this; + var colors = {}; + colors.grayscale = { + name: 'grayscale', + swatches: Object.keys(this.lums).reduce(function (obj, index) { + var swatch = { + lum: _this3.lums[index].lum, + rgb: _this3.lums[index].rgb, + hex: _utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToHex"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_3__, _toConsumableArray(_this3.lums[index].rgb)), + hsl: Object.values(_utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToHSL"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_3__, _toConsumableArray(_this3.lums[index].rgb))), + oklch: Object.values(_utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToOKLCH"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_3__, _toConsumableArray(_this3.lums[index].rgb))), + label: _this3.lums[index].label + }; + obj[index] = swatch; + return obj; + }, {}) + }; + this.palettes.forEach(function (palette, i) { + var name = palette.name; + if (!name) { + var closestToMid = _utils_color__WEBPACK_IMPORTED_MODULE_3__["closestLum"](_this3.lumsValues, 50); + var _ref = Object.keys(closestToMid) || Math.floor(_this3.lumsCount / 2), + _ref2 = _slicedToArray(_ref, 1), + midIndex = _ref2[0]; + var swatch = palette.swatches[midIndex]; + var _Color$RGBToHSL2 = _utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToHSL"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_3__, _toConsumableArray(swatch.rgb)), + h = _Color$RGBToHSL2.h, + s = _Color$RGBToHSL2.s, + l = _Color$RGBToHSL2.l; + name = _utils_color__WEBPACK_IMPORTED_MODULE_3__["colorName"](h, s, l); + } + if (name === 'grayscale') name += '-alt'; + colors[name] = Object.keys(palette.swatches).reduce(function (obj, j) { + if (_this3.storedSwatches[palette.hex] && _this3.storedSwatches[palette.hex][j]) { + obj.swatches[j] = _this3.storedSwatches[palette.hex][j]; + } + return obj; + }, _objectSpread(_objectSpread({}, palette), {}, { + name: name, + swatches: {} + })); + }); + return colors; + }, + cssTailwind: function cssTailwind() { + var _this4 = this; + var colors = Object.keys(this.cssColors).reduce(function (obj, name) { + obj[name] = {}; + var swatchCount = Object.keys(_this4.cssColors[name].swatches).length; + Object.keys(_this4.cssColors[name].swatches).forEach(function (i) { + var swatch = _this4.cssColors[name].swatches[i]; + var label = _this4.getValueLabel(i, swatchCount); + obj[name][label] = _this4.formatSwatchColor(swatch); + if (_this4.isLockedHex(swatch.hex)) { + obj[name]['DEFAULT'] = obj[name][label]; + } + }); + return obj; + }, {}); + var config = JSON.stringify(colors, null, ' '); + localStorage.setItem(new Date(), config); + return "// Grayscale Design palette: ".concat(window.location.href, "\nconst grayscale = ") + config; + }, + cssRadix: function cssRadix() { + var _this5 = this; + var colors = this.cssColors; + var js = "// Grayscale Design palette: ".concat(window.location.href, "\n"); + try { + js += Object.keys(colors).reduce(function (str, name) { + str += "\nconst ".concat(name, " = {\n"); + Object.keys(colors[name].swatches).forEach(function (i) { + var swatch = colors[name].swatches[i]; + var label = parseInt(i, 10) + 1; + str += " '".concat(name).concat(label, "': '").concat(_this5.formatSwatchColor(swatch), "',\n"); + }); + str += '};\n'; + + // Dark Colors + str += "\nconst ".concat(name, "Dark = {\n"); + Object.keys(colors[name].swatches).forEach(function (i) { + var swatch = colors[name].swatches[i]; + var lum = 100 - swatch.lum; + var _swatch$hsl = _slicedToArray(swatch.hsl, 2), + h = _swatch$hsl[0], + s = _swatch$hsl[1]; + var l = _utils_color__WEBPACK_IMPORTED_MODULE_3__["lightnessFromHSLum"](h, s, lum); + var _Color$HSLtoRGB = _utils_color__WEBPACK_IMPORTED_MODULE_3__["HSLtoRGB"](swatch.hsl[0], swatch.hsl[1], l), + r = _Color$HSLtoRGB.r, + g = _Color$HSLtoRGB.g, + b = _Color$HSLtoRGB.b; + var hex = _utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToHex"](r, g, b); + var newSwatch = { + lum: lum, + hex: hex, + rgb: [r, g, b].map(Math.round), + hsl: [h, s, l], + label: parseInt(i, 10) + 1 + }; + str += " '".concat(name).concat(newSwatch.label, "': '").concat(_this5.formatSwatchColor(newSwatch), "',\n"); + }); + str += '};\n'; + return str; + }, ''); + } catch (e) { + // + } + return js; + }, + cssVars: function cssVars() { + var _this6 = this; + var colors = this.cssColors; + var css = "/* Grayscale Design palette: ".concat(window.location.href, " */\n:root {"); + css += Object.keys(colors).reduce(function (str, name) { + str += '\n'; + var swatchCount = Object.keys(colors[name].swatches).length; + Object.keys(colors[name].swatches).forEach(function (i) { + var swatch = colors[name].swatches[i]; + var label = _this6.getValueLabel(i, swatchCount); + str += " --".concat(name, "-").concat(label, ": ").concat(_this6.formatSwatchColor(swatch), ";\n"); + }); + return str; + }, ''); + css += '}'; + return css; + }, + cssScss: function cssScss() { + var _this7 = this; + var colors = this.cssColors; + var css = "// Grayscale Design palette: ".concat(window.location.href, "\n"); + css += Object.keys(colors).reduce(function (str, name) { + var swatchCount = Object.keys(colors[name].swatches).length; + Object.keys(colors[name].swatches).forEach(function (i) { + var swatch = colors[name].swatches[i]; + var label = _this7.getValueLabel(i, swatchCount); + str += "$".concat(name, "-").concat(label, ": ").concat(_this7.formatSwatchColor(swatch), ";\n"); + }); + str += '\n'; + return str; + }, ''); + return css; + }, + cssLess: function cssLess() { + var _this8 = this; + var colors = this.cssColors; + var css = "// Grayscale Design palette: ".concat(window.location.href, "\n"); + css += Object.keys(colors).reduce(function (str, name) { + var swatchCount = Object.keys(colors[name].swatches).length; + Object.keys(colors[name].swatches).forEach(function (i) { + var swatch = colors[name].swatches[i]; + var label = _this8.getValueLabel(i, swatchCount); + str += "@".concat(name, "-").concat(label, ": ").concat(_this8.formatSwatchColor(swatch), ";\n"); + }); + str += '\n'; + return str; + }, ''); + return css; + }, + cssStylus: function cssStylus() { + var _this9 = this; + var colors = this.cssColors; + var css = "// Grayscale Design palette: ".concat(window.location.href, "\n"); + css += Object.keys(colors).reduce(function (str, name) { + var swatchCount = Object.keys(colors[name].swatches).length; + Object.keys(colors[name].swatches).forEach(function (i) { + var swatch = colors[name].swatches[i]; + var label = _this9.getValueLabel(i, swatchCount >= 10); + str += "".concat(name, "-").concat(label, " = ").concat(_this9.formatSwatchColor(swatch), "\n"); + }); + str += '\n'; + return str; + }, ''); + return css; + }, + autoDarkModeCss: function autoDarkModeCss() { + var _this10 = this; + var colors = this.cssColors; + var css = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer utilities {\n"; + css += " /* Grayscale Design palette: ".concat(window.location.href, " */\n"); + css += " :root {\n"; + + // Generate all color variables in RGB format for Tailwind compatibility + css += Object.keys(colors).reduce(function (str, name) { + str += "\n"; + var swatchCount = Object.keys(colors[name].swatches).length; + Object.keys(colors[name].swatches).forEach(function (i) { + var _swatch$rgb; + var swatch = colors[name].swatches[i]; + var label = _this10.getValueLabel(i, swatchCount); + var value = (_swatch$rgb = swatch.rgb) === null || _swatch$rgb === void 0 ? void 0 : _swatch$rgb.join(' '); + if (value) { + str += " --".concat(name, "-").concat(label, ": ").concat(value, ";\n"); + } + }); + return str; + }, ''); + + // Add black and white variables + css += "\n --black: 0 0 0;\n"; + css += " --white: 255 255 255;\n\n"; + + // Add abstract color mappings based on grayscale + if (colors.grayscale && colors.grayscale.swatches) { + css += " /* Set abstract colors */\n"; + css += " --dark: var(--black);\n"; + css += " --light: var(--white);\n\n"; + var grayscaleSwatches = colors.grayscale.swatches; + var swatchKeys = Object.keys(grayscaleSwatches).sort(function (a, b) { + return parseInt(a) - parseInt(b); + }); + var swatchCount = swatchKeys.length; + swatchKeys.forEach(function (i) { + var label = _this10.getValueLabel(i, swatchCount); + css += " --neutral-".concat(label, ": var(--grayscale-").concat(label, ");\n"); + }); + } + css += " }\n\n"; + + // Add dark mode section that flips the values + css += " @media (prefers-color-scheme: dark) {\n"; + css += " /* Flip the values for dark mode */\n"; + css += " :root {\n"; + css += " --dark: var(--white);\n"; + css += " --light: var(--black);\n\n"; + + // Flip grayscale/neutral values if they exist + if (colors.grayscale && colors.grayscale.swatches) { + var _grayscaleSwatches = colors.grayscale.swatches; + var _swatchKeys = Object.keys(_grayscaleSwatches).sort(function (a, b) { + return parseInt(a) - parseInt(b); + }); + var _swatchCount = _swatchKeys.length; + _swatchKeys.forEach(function (i) { + var label = _this10.getValueLabel(i, _swatchCount); + var reverseIndex = _swatchCount - 1 - parseInt(i); + var reverseLabel = _this10.getValueLabel(reverseIndex, _swatchCount); + css += " --neutral-".concat(label, ": var(--grayscale-").concat(reverseLabel, ");\n"); + }); + } + + // Flip all other color palettes + Object.keys(colors).forEach(function (name) { + if (name !== 'grayscale') { + css += "\n"; + var _swatchCount2 = Object.keys(colors[name].swatches).length; + var _swatchKeys2 = Object.keys(colors[name].swatches).sort(function (a, b) { + return parseInt(a) - parseInt(b); + }); + _swatchKeys2.forEach(function (i) { + var label = _this10.getValueLabel(i, _swatchCount2); + var reverseIndex = _swatchCount2 - 1 - parseInt(i); + var reverseLabel = _this10.getValueLabel(reverseIndex, _swatchCount2); + css += " --".concat(name, "-").concat(label, ": var(--").concat(name, "-").concat(reverseLabel, ");\n"); + }); + } + }); + css += " }\n\n"; + css += "\n /* with this utility class you can do something like
and it (and all it's child elements) will not automatically switch in darkmode. */\n"; + css += " .unset-dark-mode {\n"; + + // Reset all colors to their original values in the unset class + css += Object.keys(colors).reduce(function (str, name) { + var swatchCount = Object.keys(colors[name].swatches).length; + Object.keys(colors[name].swatches).forEach(function (i) { + var label = _this10.getValueLabel(i, swatchCount); + str += " --".concat(name, "-").concat(label, ": var(--").concat(name, "-").concat(label, ");\n"); + }); + str += "\n"; + return str; + }, ''); + if (colors.grayscale && colors.grayscale.swatches) { + var _grayscaleSwatches2 = colors.grayscale.swatches; + var _swatchKeys3 = Object.keys(_grayscaleSwatches2).sort(function (a, b) { + return parseInt(a) - parseInt(b); + }); + var _swatchCount3 = _swatchKeys3.length; + _swatchKeys3.forEach(function (i) { + var label = _this10.getValueLabel(i, _swatchCount3); + css += " --neutral-".concat(label, ": var(--grayscale-").concat(label, ");\n"); + }); + } + css += " }\n"; + css += " }\n"; + css += "}"; + return css; + }, + autoDarkModeTailwindConfig: function autoDarkModeTailwindConfig() { + var _this11 = this; + var colors = this.cssColors; + var config = "function setAsCssVariable(colorName) {\n"; + config += " let augmentedPalette = {};\n"; + config += " const values = ["; + + // Get the values from grayscale to determine the scale + if (colors.grayscale && colors.grayscale.swatches) { + var swatchKeys = Object.keys(colors.grayscale.swatches).sort(function (a, b) { + return parseInt(a) - parseInt(b); + }); + var labels = swatchKeys.map(function (i) { + return _this11.getValueLabel(i, swatchKeys.length); + }); + config += labels.join(', '); + } else { + config += '50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100'; + } + config += "];\n"; + config += " values.forEach((value) => {\n"; + config += " augmentedPalette[value] = `rgb(var(--${colorName}-${value}) / )`;\n"; + config += " });\n"; + config += " return augmentedPalette;\n"; + config += "}\n\n"; + config += "module.exports = {\n"; + config += " theme: {\n"; + config += " colors: {\n"; + config += " current: 'currentColor',\n"; + config += " transparent: 'transparent',\n"; + config += " black: 'rgb(var(--black) / )',\n"; + config += " white: 'rgb(var(--white) / )',\n"; + config += " light: 'rgb(var(--light) / )',\n"; + config += " dark: 'rgb(var(--dark) / )',\n"; + + // Add all color palettes + Object.keys(colors).forEach(function (name) { + config += " ".concat(name, ": setAsCssVariable('").concat(name, "'),\n"); + }); + config += " neutral: setAsCssVariable('neutral'),\n"; + config += " },\n"; + config += " },\n"; + config += "};\n"; + return config; + }, + autoDarkModeTabContent: function autoDarkModeTabContent() { + if (this.autoDarkModeTab === 'css') return this.autoDarkModeCss; + if (this.autoDarkModeTab === 'config') return this.autoDarkModeTailwindConfig; + } + }, + watch: { + cssTab: function cssTab(val, oldVal) { + var _this$lumsValues; + if (val && val !== oldVal && (_this$lumsValues = this.lumsValues) !== null && _this$lumsValues !== void 0 && _this$lumsValues.length) this.setLums(this.lumsValues); + }, + isRadixPreset: function isRadixPreset(val) { + if (val) this.cssTab = 'radix'; + }, + isTailwindPreset: function isTailwindPreset(val) { + if (val) this.cssTab = 'tailwind'; + }, + paletteBases: function paletteBases(val) { + var _this12 = this; + Object.keys(this.lockedByHex).forEach(function (hex) { + if (val.indexOf(hex) === -1) { + _this12.toggleLocked(hex, false); + } + }); + }, + hasLockedLums: function hasLockedLums(val) { + if (!!val) this.autoDistribute = false; + }, + /** + * Create a grayscale palette from uploaded image + * @param {Object} val JSON response from imgix + */ + grayscaleJson: function grayscaleJson(val) { + var hexes = []; + var colors = []; + val.colors.forEach(function (color) { + if (!hexes.includes(color.hex)) { + colors.push(color); + hexes.push(color.hex); + } + }); + if (colors.length < this.lumsCount) { + Object.values(val.dominant_colors).forEach(function (color) { + if (!hexes.includes(color.hex)) { + colors.push(color); + } + }); + } + colors.sort(function (a, b) { + if (a.hex < b.hex) return 1; + if (a.hex > b.hex) return -1; + return 0; + }); + if (!this.hasUpdatedLumsCount) { + this.lums = {}; + var i = 0; + while (i < colors.length) { + var color = colors[i]; + var r = Math.round(color.red * 255); + var g = Math.round(color.green * 255); + var b = Math.round(color.blue * 255); + var lum = _utils_color__WEBPACK_IMPORTED_MODULE_3__["lumFromRGB"](r, g, b); + this.lums[i] = { + lum: lum, + rgb: [r, g, b], + label: this.getValueLabel(i, colors.length) + }; + i++; + } + } + }, + /** + * Create a palette from colors pulled from an image + * @param {Object} val JSON response from imgix + */ + paletteJson: function paletteJson(val) { + var _this13 = this; + var hexes = []; + var colors = []; + val.colors.forEach(function (color) { + if (hexes.indexOf(color.hex) === -1) { + colors.push(color); + hexes.push(color.hex); + } + }); + Object.values(val.dominant_colors).forEach(function (color) { + if (hexes.indexOf(color.hex) === -1) { + colors.push(color); + hexes.push(color.hex); + } + }); + colors.sort(function (a, b) { + if (a.hex < b.hex) return 1; + if (a.hex > b.hex) return -1; + return 0; + }); + colors.forEach(function (color, i) { + if (color.hex) _this13.palettes.push({ + name: '', + swatches: Object(_utils_object__WEBPACK_IMPORTED_MODULE_4__["clone"])(_this13.lums), + hex: color.hex, + filters: { + hue: 0, + sat: 0 + } + }); + }); + + // Force render on the palette array + // let last = this.palettes.pop(); + this.$nextTick(function () { + // this.palettes.unshift(last); + _this13.$nextTick(function () { + setTimeout(function () { + _this13.dedupePalettes(); + }, 1000); + }); + }); + }, + autoDistribute: function autoDistribute(val) { + if (val) { + this.adjustLums(this.lums[0], this.lums[this.lumsCount - 1].lum, this.lums[0].lum, 0); + } + }, + lums: { + deep: true, + handler: function handler(val) { + var _this14 = this; + clearTimeout(this.updateSwatchTimeout); + this.updateSwatchTimeout = setTimeout(function () { + _this14.updateSwatchLums(val); + }, 250); + this.updateUrl(); + } + }, + lumsCount: function lumsCount(val) { + var _this15 = this; + this.$nextTick(function () { + _this15.updateSwatchLums(); + }); + } + }, + created: function created() { + var _this16 = this; + this.setLums(this.presets["default"].getValues()); + if (Object.keys(this.$route.query).length) { + var _this$$route$query = this.$route.query, + _this$$route$query$lu = _this$$route$query.lums, + lums = _this$$route$query$lu === void 0 ? [] : _this$$route$query$lu, + _this$$route$query$pa = _this$$route$query.palettes, + palettes = _this$$route$query$pa === void 0 ? [] : _this$$route$query$pa, + _this$$route$query$fi = _this$$route$query.filters, + filters = _this$$route$query$fi === void 0 ? [] : _this$$route$query$fi, + _this$$route$query$na = _this$$route$query.names, + names = _this$$route$query$na === void 0 ? [] : _this$$route$query$na, + _this$$route$query$la = _this$$route$query.labels, + labels = _this$$route$query$la === void 0 ? [] : _this$$route$query$la; + lums = lums.split(',').filter(function (val) { + return !!val; + }).map(parseFloat); + this.setLums(lums); + var paletteBases = palettes.split(',').filter(function (val) { + return !!val; + }); + var namesArr = names.split(',').filter(function (val) { + return !!val; + }); + var labelsArr = labels.split(',').filter(function (val) { + return !!val; + }); + var filtersArr = filters.split(',').filter(function (val) { + return !!val; + }); + paletteBases.forEach(function (hex, i) { + var _filtersArr$i$split = filtersArr[i].split('|'), + _filtersArr$i$split2 = _slicedToArray(_filtersArr$i$split, 2), + _filtersArr$i$split2$ = _filtersArr$i$split2[0], + hue = _filtersArr$i$split2$ === void 0 ? 0 : _filtersArr$i$split2$, + _filtersArr$i$split2$2 = _filtersArr$i$split2[1], + sat = _filtersArr$i$split2$2 === void 0 ? 0 : _filtersArr$i$split2$2; + _this16.addPalette(); + _this16.$nextTick(function () { + _this16.palettes[i].name = namesArr[i]; + _this16.palettes[i].hex = hex; + _this16.palettes[i].filters = { + hue: hue, + sat: sat + }; + _this16.palettes[i].label = labelsArr[i]; + }); + }); + } + }, + mounted: function mounted() { + document.addEventListener('copy', this.onCopy.bind(this)); + if (this.uploadFileUrl) this.setFromUploadFile(); + }, + beforeDestroy: function beforeDestroy() { + document.removeEventListener('copy', this.onCopy.bind(this), null); + }, + methods: { + onPaste: function onPaste(evt) { + var _evt$clipboardData; + var target = evt.target; + var txt = evt === null || evt === void 0 || (_evt$clipboardData = evt.clipboardData) === null || _evt$clipboardData === void 0 ? void 0 : _evt$clipboardData.getData('text/plain'); + if (!txt) { + return true; + } + evt.preventDefault(); + var hexValue = ''; + var input = txt.trim(); + + // Check if it's already a hex value (with or without #) + var hexMatch = input.match(/^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/); + if (hexMatch) { + hexValue = "#".concat(hexMatch[1]); + // Expand 3-char hex to 6-char + if (hexValue.length === 4) { + hexValue = '#' + _toConsumableArray(hexValue.slice(1)).map(function (c) { + return c + c; + }).join(''); + } + } + // Check for RGB/HSL values in various formats + else { + // Check for HSL values (looking for % on 2nd or 3rd value, or 'hsl' keyword) + // HSL format: hue (0-360), saturation (0-100%), lightness (0-100%) + var hslMatch = input.match(/(\d+)\s*[,\s]\s*(\d+)(%?)\s*[,\s]\s*(\d+)(%?)/); + if (hslMatch && (hslMatch[3] === '%' || hslMatch[5] === '%' || input.toLowerCase().includes('hsl'))) { + var h = parseInt(hslMatch[1]); + var s = parseInt(hslMatch[2]); + var l = parseInt(hslMatch[4]); + var rgb = _utils_color__WEBPACK_IMPORTED_MODULE_3__["HSLtoRGB"](h, s, l); + hexValue = _utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToHex"](Math.round(rgb.r), Math.round(rgb.g), Math.round(rgb.b)); + } + // Otherwise treat as RGB values (including RGBA with alpha that might have %) + else if (hslMatch) { + // It matched the pattern but no % signs, so treat as RGB + var r = Math.min(255, Math.max(0, parseInt(hslMatch[1]))); + var g = Math.min(255, Math.max(0, parseInt(hslMatch[2]))); + var b = Math.min(255, Math.max(0, parseInt(hslMatch[4]))); + hexValue = _utils_color__WEBPACK_IMPORTED_MODULE_3__["RGBToHex"](r, g, b); + } + // If nothing matched, try to use it as hex anyway + else { + // Remove any non-hex characters and take first 6 valid hex chars + var cleaned = input.replace(/[^0-9A-Fa-f]/g, '').slice(0, 6); + if (cleaned.length >= 3) { + hexValue = "#".concat(cleaned); + } else { + // Default to black if we can't parse it + hexValue = '#000000'; + } + } + } + target.value = hexValue; + // Trigger input event to update v-model + target.dispatchEvent(new Event('input', { + bubbles: true + })); + return false; + }, + getValueLabel: function getValueLabel(i, count) { + if (this.cssTab == 'radix') return parseInt(i, 10) + 1; + if (count == 11 && i == 10) return '950'; + if (count >= 10) { + return i == 0 ? '50' : parseInt(i, 10) + '00'; + } + return parseInt(i, 10) + 1 + '00'; + }, + removeAll: function removeAll() { + if (confirm('Are you sure?')) this.palettes = []; + }, + addSuggestedColor: function addSuggestedColor(hex) { + var _this17 = this; + this.addPalette(); + this.$nextTick(function () { + _this17.palettes[0].hex = hex; + }); + }, + updateUrl: function updateUrl() { + var _this18 = this; + clearTimeout(this.updateUrlTimeout); + this.updateUrlTimeout = setTimeout(function () { + _this18.$nextTick(function () { + var query = { + lums: _this18.lumsValues.map(function (v) { + return v.toFixed(2); + }).join(','), + palettes: _this18.paletteBases.join(','), + filters: _this18.paletteFilters.map(function (f) { + return "".concat(f.hue, "|").concat(f.sat); + }).join(','), + names: _this18.paletteNames.join(','), + labels: _this18.paletteLabels.join(',') + }; + if (JSON.stringify(query) !== JSON.stringify(_this18.$route.query)) { + _this18.$router.push({ + query: query + }); + } + }); + }, 200); + }, + formatSwatchColor: function formatSwatchColor(swatch) { + var _swatch$rgb2; + if (this.cssType === 'hex') return swatch === null || swatch === void 0 ? void 0 : swatch.hex; + if (this.cssType === 'rgb') return "rgb(".concat((_swatch$rgb2 = swatch.rgb) === null || _swatch$rgb2 === void 0 ? void 0 : _swatch$rgb2.join(', '), ")"); + if (this.cssType === 'hsl') return "hsl(".concat(swatch.hsl[0], ", ").concat(swatch.hsl[1] === 0 ? 0 : swatch.hsl[1].toFixed(2), "%, ").concat(swatch.hsl[2].toFixed(2), "%)"); + if (this.cssType === 'oklch') return "oklch(".concat(swatch.oklch[0].toFixed(4), " ").concat(swatch.oklch[1].toFixed(4), " ").concat(swatch.oklch[2] === 0 ? 0 : swatch.oklch[2].toFixed(2), ")"); + }, + storeSwatches: function storeSwatches(swatches, hex) { + this.$set(this.storedSwatches, hex, swatches); + this.updateUrl(); + }, + dedupePalettes: function dedupePalettes() { + var _this19 = this; + this.palettes.reverse(); + this.$nextTick(setTimeout(function () { + _this19.palettes.reverse(); + })); + return; + var dupes = this.getDupes(); + for (var i = dupes.length - 1; i >= 0; i--) { + this.palettes.splice(dupes[i], 1); + } + }, + getDupes: function getDupes() { + var _this20 = this; + var rgbs = {}; + var dupes = []; + this.palettes.forEach(function (palette, p1) { + var isDupe = false; + rgbs[p1] = []; + var closestToMid = _utils_color__WEBPACK_IMPORTED_MODULE_3__["closestLum"](_this20.lumsValues, 50); + var midIndex = Object.keys(closestToMid)[0]; + var swatch = palette.swatches[midIndex]; + var _swatch$rgb3 = _slicedToArray(swatch.rgb, 3), + r = _swatch$rgb3[0], + g = _swatch$rgb3[1], + b = _swatch$rgb3[2]; + for (var p2 = Object.keys(rgbs).length - 1; p2 >= 0; p2--) { + for (var j = rgbs[p2].length - 1; j >= 0; j--) { + var matches = 0; + var _rgbs$p2$j = _slicedToArray(rgbs[p2][j], 3), + R = _rgbs$p2$j[0], + G = _rgbs$p2$j[1], + B = _rgbs$p2$j[2]; + if (r <= R && r >= R) matches++; + if (g <= G && g >= G) matches++; + if (b <= B && b >= B) matches++; + if (matches >= 2) { + var hex1 = _this20.palettes[p1].hex; + var hex2 = _this20.palettes[p2].hex; + var lum1 = _utils_color__WEBPACK_IMPORTED_MODULE_3__["lumFromRGB"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_3__, _toConsumableArray(Object.values(_utils_color__WEBPACK_IMPORTED_MODULE_3__["hexToRGB"](hex1)))); + var lum2 = _utils_color__WEBPACK_IMPORTED_MODULE_3__["lumFromRGB"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_3__, _toConsumableArray(Object.values(_utils_color__WEBPACK_IMPORTED_MODULE_3__["hexToRGB"](hex2)))); + var diff1 = Math.abs(50 - lum1); + var diff2 = Math.abs(50 - lum2); + if (diff2 < diff1 && dupes.indexOf(p1) === -1) { + dupes.push(p1); + } else { + dupes.push(p2); + } + isDupe = true; + break; + } + } + if (isDupe) break; + } + if (!isDupe) rgbs[p1].push(swatch.rgb); + }); + return _toConsumableArray(new Set(dupes)).sort(); + }, + copy: function copy(copyText) { + this.copyText = copyText; + this.$nextTick(function () { + document.execCommand('copy'); + }); + }, + onCopy: function onCopy(e) { + var _this21 = this; + if (this.copyText) { + e.preventDefault(); + e.clipboardData.setData('text/plain', this.copyText); + setTimeout(function () { + _this21.copyText = false; + }, 2000); + } + }, + removePalette: function removePalette(index) { + this.palettes.splice(index, 1); + }, + togglePaletteMenu: function togglePaletteMenu(index) { + this.shownPaletteMenu = this.shownPaletteMenu == index ? null : index; + }, + toggleFilters: function toggleFilters(index) { + var filterIndex = this.showFilters.indexOf(index); + if (filterIndex !== -1) { + this.showFilters.splice(filterIndex, 1); + } else { + this.showFilters = _toConsumableArray(new Set([].concat(_toConsumableArray(this.showFilters), [index]))); + } + }, + toggleLocked: function toggleLocked(hex) { + var _this22 = this; + var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; + if (this.isLockedHex(hex) || force !== true && force === false) { + var lumsByPalette = Object.keys(this.lockedByHex).reduce(function (obj, hx) { + var lockedPalette = _this22.lockedByHex[hx]; + if (hex !== hx) { + obj[hx] = lockedPalette; + } else { + var label = _this22.lums[lockedPalette.lumIndex].label; + _this22.lums[lockedPalette.lumIndex] = { + lum: lockedPalette.lastLum, + rgb: _this22.lumToGrayscaleRGB(lockedPalette.lastLum), + label: label + }; + } + return obj; + }, {}); + this.lockedByHex = lumsByPalette; + } else { + var lockedByHex = Object(_utils_object__WEBPACK_IMPORTED_MODULE_4__["clone"])(this.lockedByHex); + var rgb = Object.values(_utils_color__WEBPACK_IMPORTED_MODULE_3__["hexToRGB"](hex)); + var lum = _utils_color__WEBPACK_IMPORTED_MODULE_3__["lumFromRGB"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_3__, rgb); + var closest = _utils_color__WEBPACK_IMPORTED_MODULE_3__["closestLum"](this.lumsValues, lum); + var _ref3 = Object.keys(closest) || [], + _ref4 = _slicedToArray(_ref3, 1), + lumIndex = _ref4[0]; + if (this.isLockedLum(lumIndex)) { + alert('This color value is already LOCKED!'); + return; + } + var _ref5 = Object.values(closest) || [], + _ref6 = _slicedToArray(_ref5, 1), + lastLum = _ref6[0]; + lumIndex = parseInt(lumIndex, 10); + var label = this.lums[lumIndex].label; + this.lums[lumIndex] = { + lum: lum, + rgb: this.lumToGrayscaleRGB(lum), + label: label + }; + lockedByHex[hex] = { + lumIndex: lumIndex, + lastLum: lastLum + }; + this.lockedByHex = lockedByHex; + } + }, + isLockedHex: function isLockedHex(hex) { + return Object.keys(this.lockedByHex).indexOf(hex) !== -1; + }, + isLockedLum: function isLockedLum(lumIndex) { + return Object.values(this.lockedByHex).map(function (val) { + return val.lumIndex; + }).indexOf(parseInt(lumIndex, 10)) !== -1; + }, + getPickerHex: function getPickerHex(hex) { + if (hex.length === 4) { + return '#' + _toConsumableArray(hex.replace('#', '')).reduce(function (str, cur) { + return str + cur + cur; + }, ''); + } + return hex; + }, + updateSwatchLums: function updateSwatchLums(lums) { + var _this23 = this; + lums = lums || this.lums; + var lumsCount = Object.keys(lums).length; + // Update palette swatch lums + this.palettes = this.palettes.map(function (palette) { + var swatchKeys = Object.keys(palette.swatches); + swatchKeys.forEach(function (i) { + if (i < lumsCount) { + palette.swatches[i].lum = lums[i].lum; + palette.swatches[i].label = lums[i].label; + } else { + delete palette.swatches[i]; + } + }); + var i = swatchKeys.length - 1; + while (i < lumsCount) { + palette.swatches[i] = { + lum: lums[i].lum, + label: lums[i].label + }; + i++; + } + return palette; + }); + clearTimeout(this.paletteCacheBustTimeout); + this.paletteCacheBustTimeout = setTimeout(function () { + _this23.palettes.reverse(); + _this23.$nextTick(function () { + _this23.palettes.reverse(); + }); + }, 100); + }, + setLums: function setLums(values) { + var _this24 = this; + var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; + var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null; + this.lums = values.reduce(function (obj, val, i) { + obj[i] = { + lum: val, + rgb: _this24.lumToGrayscaleRGB(val), + label: _this24.getValueLabel(i, values.length) + }; + return obj; + }, {}); + this.$nextTick(function () { + _this24.adjustLums(index === 0 ? pos : _this24.lums[0].lum, index === _this24.lumsCount - 1 ? pos : _this24.lums[_this24.lumsCount - 1].lum, 100 - pos, index); + }); + }, + lumToGrayscaleRGB: function lumToGrayscaleRGB(lum) { + var newL = _utils_color__WEBPACK_IMPORTED_MODULE_3__["lightnessFromHSLum"](0, 0, lum); + return Object.values(_utils_color__WEBPACK_IMPORTED_MODULE_3__["HSLtoRGB"](0, 0, newL)).map(Math.round); + }, + adjustLums: function adjustLums(startPos, endPos, curPos, curIndex) { + var _this25 = this; + if (!this.autoDistribute) return; + var lumIndices = Object.keys(this.lums); + lumIndices.pop(); + lumIndices.shift(); + lumIndices.forEach(function (ndx) { + ndx = parseInt(ndx, 10); + if (ndx < curIndex) { + var dist = (curPos - startPos) / curIndex; + _this25.lums[ndx].lum = ndx * dist + _this25.lums[0].lum; + _this25.lums[ndx].rgb = _this25.lumToGrayscaleRGB(_this25.lums[ndx].lum); + } else if (curIndex < ndx) { + var _dist = (endPos - curPos) / (_this25.lumsCount - curIndex - 1); + _this25.lums[ndx].lum = (ndx - curIndex) * _dist + curPos; + _this25.lums[ndx].rgb = _this25.lumToGrayscaleRGB(_this25.lums[ndx].lum); + } + }); + }, + addPalette: function addPalette(ev) { + var hex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#000000'; + this.palettes.unshift({ + name: '', + swatches: Object(_utils_object__WEBPACK_IMPORTED_MODULE_4__["clone"])(this.lums), + hex: hex, + filters: { + hue: 0, + sat: 0 + } + }); + this.isChoosingBase = 0; + + // this.$nextTick(() => { + // setTimeout(() => { + // let [input] = this.$refs.palettePicker0 || []; + // if (input) input.click(); + // }, 10); + // }); + }, + onFileUpload: function onFileUpload() { + var _this26 = this; + return new Promise( /*#__PURE__*/function () { + var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(resolve, reject) { + var filePicker; + return _regeneratorRuntime().wrap(function _callee$(_context) { + while (1) switch (_context.prev = _context.next) { + case 0: + _this26.isUploading = true; + filePicker = _this26.$refs.upload; + if (!(!filePicker || !filePicker.files || filePicker.files.length <= 0)) { + _context.next = 5; + break; + } + reject('No file selected.'); + return _context.abrupt("return"); + case 5: + _this26.uploadFile = filePicker.files[0]; + if (!(_this26.uploadFile.size > 10485760 / 2)) { + _context.next = 9; + break; + } + reject('Image is too big (max. 5 Mb)'); + return _context.abrupt("return"); + case 9: + _context.next = 11; + return _this26.toBase64(_this26.uploadFile); + case 11: + _this26.base64File = _context.sent; + return _context.abrupt("return", resolve(_this26.uploadFile)); + case 13: + case "end": + return _context.stop(); + } + }, _callee); + })); + return function (_x, _x2) { + return _ref7.apply(this, arguments); + }; + }()).then(function (file) { + var formData = Object(_utils_forms__WEBPACK_IMPORTED_MODULE_1__["jsonToFormData"])({ + file: file + }); + axios.post('/palette-uploads', formData).then(function (_ref8) { + var data = _ref8.data; + if (data.url) { + _this26.uploadFileUrl = data.url; + _this26.uploadFilePath = data.path; + _this26.setFromUploadFile(); + } else { + alert('Sorry! Please try again.'); + } + }); + })["catch"](alert)["finally"](function () { + var _this26$$refs; + _this26.isUploading = false; + if ((_this26$$refs = _this26.$refs) !== null && _this26$$refs !== void 0 && _this26$$refs.upload) { + _this26.$refs.upload.value = null; + } + }); + }, + toBase64: function toBase64(uploadFile) { + return new Promise(function (resolve, reject) { + var fileReader = new FileReader(); + if (fileReader && uploadFile) { + fileReader.readAsDataURL(uploadFile); + fileReader.onload = function () { + resolve(fileReader.result); + }; + fileReader.onerror = function (error) { + reject(error); + }; + } else { + reject('No file provided'); + } + }); + }, + setLumsCount: function setLumsCount(newCount) { + var _this27 = this; + if (newCount < 3 || newCount > 20) return; + var lums = Object(_utils_object__WEBPACK_IMPORTED_MODULE_4__["clone"])(this.lums); + var i = 0; + while (i < Math.max(this.lumsCount, newCount)) { + if (i < newCount) { + if (!lums.hasOwnProperty(i)) { + var lum = lums[i - 1].lum / 2; + lums[i] = { + lum: lum, + rgb: this.lumToGrayscaleRGB(lum) + }; + } + } else { + delete lums[i]; + } + i++; + } + var swatchCount = Object.keys(lums).length; + Object.keys(lums).forEach(function (i) { + var lum = lums[i]; + lum.label = _this27.getValueLabel(i, swatchCount); + }); + this.lums = lums; + if (this.uploadFileUrl) { + clearTimeout(this.setFromUploadTimeout); + this.setFromUploadTimeout = setTimeout(function () { + _this27.setFromUploadFile(false); + }, 2500); + } + }, + setFromUploadFile: function setFromUploadFile() { + var _this28 = this; + var addPalette = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; + var grayscaleUrl = "".concat(this.uploadFileUrl, "?sat=-100&colorquant=").concat(this.lumsCount, "&palette=json&colors=").concat(this.lumsCount); + axios.get(grayscaleUrl).then(function (_ref9) { + var data = _ref9.data; + _this28.grayscaleJson = data; + }).then(function () { + if (addPalette) { + var paletteUrl = "".concat(_this28.uploadFileUrl, "?palette=json&colors=3"); + axios.get(paletteUrl).then(function (_ref10) { + var data = _ref10.data; + _this28.paletteJson = data; + }); + } + }); + }, + getUploadFileUrl: function getUploadFileUrl(params) { + // return `/uploads/${this.uploadFilePath}${params}`; + return this.uploadFileUrl + params; + } + } +}); /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/components/color-picker.js": -/*!**********************************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/components/color-picker.js ***! - \**********************************************************************/ -/*! exports provided: $render, ColorPicker */ +/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/GrayscaleRow.vue?vue&type=script&lang=js": +/*!**********************************************************************************************************************************************************************!*\ + !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/GrayscaleRow.vue?vue&type=script&lang=js ***! + \**********************************************************************************************************************************************************************/ +/*! exports provided: default */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "$render", function() { return $render; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return ColorPicker; }); -/* harmony import */ var _utils_compare_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/compare.js */ "./node_modules/vanilla-colorful/lib/utils/compare.js"); -/* harmony import */ var _utils_dom_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/dom.js */ "./node_modules/vanilla-colorful/lib/utils/dom.js"); -/* harmony import */ var _hue_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./hue.js */ "./node_modules/vanilla-colorful/lib/components/hue.js"); -/* harmony import */ var _saturation_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./saturation.js */ "./node_modules/vanilla-colorful/lib/components/saturation.js"); -/* harmony import */ var _styles_color_picker_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../styles/color-picker.js */ "./node_modules/vanilla-colorful/lib/styles/color-picker.js"); - - - - - -const tpl = Object(_utils_dom_js__WEBPACK_IMPORTED_MODULE_1__["createTemplate"])(` - - - -`); -const $h = Symbol('h'); -const $s = Symbol('s'); -const $isSame = Symbol('same'); -const $color = Symbol('color'); -const $hsva = Symbol('hsva'); -const $change = Symbol('change'); -const $render = Symbol('render'); -class ColorPicker extends HTMLElement { - constructor() { - super(); - const root = Object(_utils_dom_js__WEBPACK_IMPORTED_MODULE_1__["createRoot"])(this, tpl); - root.addEventListener('move', this); - this[$s] = root.children[1]; - this[$h] = root.children[2]; - } - static get observedAttributes() { - return ['color']; - } - get color() { - return this[$color]; - } - set color(newColor) { - if (!this[$isSame](newColor)) { - const newHsva = this.colorModel.toHsva(newColor); - this[$render](newHsva); - this[$change](newColor, newHsva); - } - } - connectedCallback() { - // A user may set a property on an _instance_ of an element, - // before its prototype has been connected to this class. - // If so, we need to run it through the proper class setter. - if (this.hasOwnProperty('color')) { - const value = this.color; - delete this['color']; - this.color = value; - } - else if (!this.color) { - this.color = this.colorModel.defaultColor; - } - } - attributeChangedCallback(_attr, _oldVal, newVal) { - const color = this.colorModel.fromAttr(newVal); - if (!this[$isSame](color)) { - this.color = color; - } - } - handleEvent(event) { - // Merge the current HSV color object with updated params. - const newHsva = Object.assign({}, this[$hsva], event.detail); - this[$render](newHsva); - let newColor; - if (!Object(_utils_compare_js__WEBPACK_IMPORTED_MODULE_0__["equalColorObjects"])(newHsva, this[$hsva]) && - !this[$isSame]((newColor = this.colorModel.fromHsva(newHsva)))) { - this[$change](newColor, newHsva); - } - } - [$isSame](color) { - return this.color && this.colorModel.equal(color, this.color); - } - [$render](hsva) { - this[$s].hsva = hsva; - this[$h].hue = hsva.h; - } - [$change](color, hsva) { - this[$color] = color; - this[$hsva] = hsva; - this.dispatchEvent(new CustomEvent('color-changed', { detail: { value: color } })); +/* harmony import */ var _utils_color__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/color */ "./resources/js/utils/color.js"); +/* harmony import */ var _utils_object__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/object */ "./resources/js/utils/object.js"); + + +var BLANK_IMG = new Image(); +BLANK_IMG.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='; +/* harmony default export */ __webpack_exports__["default"] = ({ + name: 'GrayscaleRow', + props: { + lums: Object, + lumsValues: Array, + setLums: Function, + isLockedLum: Function + }, + data: function data() { + return { + isDragging: null, + dragTimeout: 0, + swatchPositions: {} + }; + }, + watch: { + lumsValues: function lumsValues(val) { + this.setSwatchPositionsFromLumsValues(val); } -} -//# sourceMappingURL=color-picker.js.map + }, + created: function created() { + this.setSwatchPositionsFromLumsValues(); + }, + methods: { + setSwatchPositionsFromLumsValues: function setSwatchPositionsFromLumsValues() { + var lumsValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + lumsValues = lumsValues ? lumsValues : this.lumsValues; + this.swatchPositions = lumsValues.reduce(function (swatches, pos, index) { + swatches[index] = pos; + return swatches; + }, {}); + }, + getSwatchPosition: function getSwatchPosition(index) { + var pos = this.swatchPositions[index]; + return "".concat(100 - pos, "%"); + }, + onDragStart: function onDragStart($event, index) { + this.isDragging = index; + $event.dataTransfer.setDragImage(BLANK_IMG, 0, 0); + }, + getPos: function getPos($event, index) { + var prop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'pageX'; + index = parseInt(index, 10); + var el = $event.target; + var parent = el.parentElement; + if (!parent) return; + var parentWidth = parent.clientWidth; + var grandparent = parent.parentElement; + if (!grandparent) return; + var elX = $event[prop] - parent.offsetLeft - grandparent.offsetLeft; + if (elX <= 0 || elX >= parentWidth) { + $event.preventDefault(); + return elX <= 0 ? 0 : 100; + } + var pos = parseFloat(elX / parentWidth * 100); + return pos > 100 ? 100 : pos < 0 ? 0 : pos; + }, + onDragEnd: function onDragEnd($event, index) { + this.isDragging = null; + if (!$event.screenX) return; + + // FIX for firefox + var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; + if (!isFirefox) return; + var pos = this.getPos($event, index, 'screenX'); + if ($event.screenX) this.prepareAdjustLums(index, pos); + }, + onDrag: function onDrag($event, index) { + if (!$event.screenX) return; + var pos = this.getPos($event, index); + this.prepareAdjustLums(index, pos); + }, + prepareAdjustLums: function prepareAdjustLums(index, pos) { + var _this = this; + var lums = Object(_utils_object__WEBPACK_IMPORTED_MODULE_1__["clone"])(this.lums); + lums[index].lum = 100 - pos; + lums[index].rgb = this.lumToGrayscaleRGB(100 - pos); + this.swatchPositions[index] = 100 - pos; + var lumsValues = Object.keys(this.swatchPositions).reduce(function (arr, i) { + arr.push(_this.swatchPositions[i]); + return arr; + }, []); + clearTimeout(this.setLumsTimeout); + this.setLumsTimeout = setTimeout(function () { + _this.setLums(lumsValues, parseInt(index, 10), pos); + }, 50); + }, + lumToGrayscaleRGB: function lumToGrayscaleRGB(lum) { + var newL = _utils_color__WEBPACK_IMPORTED_MODULE_0__["lightnessFromHSLum"](0, 0, lum); + return Object.values(_utils_color__WEBPACK_IMPORTED_MODULE_0__["HSLtoRGB"](0, 0, newL)).map(Math.round); + } + } +}); /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/components/hue.js": -/*!*************************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/components/hue.js ***! - \*************************************************************/ -/*! exports provided: Hue */ +/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/PaletteRow.vue?vue&type=script&lang=js": +/*!********************************************************************************************************************************************************************!*\ + !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/PaletteRow.vue?vue&type=script&lang=js ***! + \********************************************************************************************************************************************************************/ +/*! exports provided: default */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Hue", function() { return Hue; }); -/* harmony import */ var _interactive_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./interactive.js */ "./node_modules/vanilla-colorful/lib/components/interactive.js"); -/* harmony import */ var _utils_convert_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/convert.js */ "./node_modules/vanilla-colorful/lib/utils/convert.js"); -/* harmony import */ var _utils_dom_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/dom.js */ "./node_modules/vanilla-colorful/lib/utils/dom.js"); -/* harmony import */ var _utils_clamp_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/clamp.js */ "./node_modules/vanilla-colorful/lib/utils/clamp.js"); -/* harmony import */ var _styles_hue_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../styles/hue.js */ "./node_modules/vanilla-colorful/lib/styles/hue.js"); +/* harmony import */ var _utils_color__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/color */ "./resources/js/utils/color.js"); +/* harmony import */ var _SwatchSquare__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SwatchSquare */ "./resources/js/components/SwatchSquare.vue"); +function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } +function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(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, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(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 resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(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; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; } +function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } +function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } +function _nonIterableRest() { 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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } +function _nonIterableSpread() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } +function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } + + +/* harmony default export */ __webpack_exports__["default"] = ({ + name: 'PaletteRow', + props: { + palette: Object, + hideLum: Boolean, + isLocked: { + type: Boolean, + "default": false + }, + textOverlay: { + type: Boolean, + "default": false + }, + name: { + type: String, + "default": '' + }, + storeSwatches: { + type: Function, + "default": function _default() { + return function () {}; + } + } + }, + data: function data() { + return { + paletteClone: {}, + generateTimeout: 0, + copyText: '' + }; + }, + components: { + SwatchSquare: _SwatchSquare__WEBPACK_IMPORTED_MODULE_1__["default"] + }, + watch: { + palette: { + deep: true, + handler: function handler(val) { + this.paletteClone = Object.assign({}, this.paletteClone, val); + } + }, + 'palette.filters.hue': { + handler: function handler(val) { + this.paletteClone.filters.hue = val; + this.$nextTick(this.generateSwatches); + } + }, + 'palette.filters.sat': { + handler: function handler(val) { + this.paletteClone.filters.sat = val; + this.$nextTick(this.generateSwatches); + } + }, + 'palette.picker': { + handler: function handler() { + var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#000000'; + this.palette.hex = val.length === 4 ? '#' + _toConsumableArray(val.replace('#', '')).reduce(function (str, cur) { + return str + cur + cur; + }, '') : val; + this.updateBase(this.palette.hex); + } + }, + 'palette.hex': { + handler: function handler() { + var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#000000'; + this.palette.picker = val.length === 4 ? '#' + _toConsumableArray(val.replace('#', '')).reduce(function (str, cur) { + return str + cur + cur; + }, '') : val; + this.updateBase(this.palette.picker); + } + }, + lums: { + deep: true, + handler: function handler(val) { + var _this = this; + this.$nextTick(function () { + _this.generateSwatches(); + _this.paletteClone.closest = _utils_color__WEBPACK_IMPORTED_MODULE_0__["closestLum"](val, _this.paletteClone.lum); + }); + } + } + }, + computed: { + swatches: function swatches() { + return this.paletteClone && this.paletteClone.swatches || this.palette && this.palette.swatches || {}; + }, + lums: function lums() { + return Object.values(this.palette.swatches).reduce(function (arr, cur) { + arr.push(cur.lum); + return arr; + }, []); + } + }, + mounted: function mounted() { + document.addEventListener('copy', this.onCopy.bind(this)); + }, + beforeDestroy: function beforeDestroy() { + document.removeEventListener('copy', this.onCopy.bind(this), null); + }, + methods: { + copy: function copy(copyText) { + this.copyText = copyText; + this.$nextTick(function () { + document.execCommand('copy'); + }); + }, + onCopy: function onCopy(e) { + var _this2 = this; + if (this.copyText) { + e.preventDefault(); + e.clipboardData.setData('text/plain', this.copyText); + setTimeout(function () { + _this2.copyText = ''; + }, 500); + } + }, + updateBase: function updateBase(hex) { + this.paletteClone = Object.assign({}, this.paletteClone, this.palette, { + hex: hex, + picker: hex + }); + this.paletteClone.rgb = _utils_color__WEBPACK_IMPORTED_MODULE_0__["hexToRGB"](hex); + var rgb = Object.values(this.paletteClone.rgb); + this.paletteClone.hsl = _utils_color__WEBPACK_IMPORTED_MODULE_0__["RGBToHSL"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_0__, rgb); + this.paletteClone.lum = _utils_color__WEBPACK_IMPORTED_MODULE_0__["lumFromRGB"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_0__, rgb); + this.paletteClone.closest = _utils_color__WEBPACK_IMPORTED_MODULE_0__["closestLum"](this.lums, this.paletteClone.lum); + this.$nextTick(this.generateSwatches); + }, + generateSwatches: function generateSwatches() { + var _this3 = this; + if (!this.paletteClone.hsl) return; + var run = function run() { + var baseHSL = _this3.paletteClone.hsl; + var _ref = Object.keys(_this3.paletteClone.closest) || [], + _ref2 = _slicedToArray(_ref, 1), + closestIndex = _ref2[0]; + Object.keys(_this3.paletteClone.swatches).forEach( /*#__PURE__*/function () { + var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(i) { + var swatch, diffIndex, newH, newS, newL, newRGB, rgb; + return _regeneratorRuntime().wrap(function _callee$(_context) { + while (1) switch (_context.prev = _context.next) { + case 0: + swatch = _this3.paletteClone.swatches[i]; + diffIndex = Math.abs(closestIndex - i); + newH = baseHSL.h + parseFloat(_this3.paletteClone.filters.hue) * diffIndex; + if (newH < 0) newH = 360 - newH; + if (newH > 360) newH = newH - 360; + newS = baseHSL.s + parseFloat(_this3.paletteClone.filters.sat) * diffIndex; + if (newS < 0) newS = Math.max(newS, 0); + if (newS > 100) newS = Math.min(newS, 100); + _context.next = 10; + return _utils_color__WEBPACK_IMPORTED_MODULE_0__["lightnessFromHSLum"](newH, newS, swatch.lum); + case 10: + newL = _context.sent; + newRGB = _utils_color__WEBPACK_IMPORTED_MODULE_0__["HSLtoRGB"](newH, newS, newL); + rgb = Object.values(newRGB).map(Math.round); + _this3.paletteClone.swatches[i].hsl = [newH, newS, newL]; + _this3.paletteClone.swatches[i].hex = _utils_color__WEBPACK_IMPORTED_MODULE_0__["RGBToHex"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_0__, _toConsumableArray(rgb)); + _this3.paletteClone.swatches[i].rgb = rgb; + _this3.paletteClone.swatches[i].oklch = Object.values(_utils_color__WEBPACK_IMPORTED_MODULE_0__["RGBToOKLCH"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_0__, _toConsumableArray(rgb))); + _this3.paletteClone.swatches[i].lum = _utils_color__WEBPACK_IMPORTED_MODULE_0__["lumFromRGB"].apply(_utils_color__WEBPACK_IMPORTED_MODULE_0__, _toConsumableArray(_this3.paletteClone.swatches[i].rgb)); + case 18: + case "end": + return _context.stop(); + } + }, _callee); + })); + return function (_x) { + return _ref3.apply(this, arguments); + }; + }()); + _this3.storeSwatches(_this3.paletteClone.swatches); + }; + if (window.requestAnimationFrame) { + window.requestAnimationFrame(run); + } else { + clearTimeout(this.generateTimeout); + this.generateTimeout = setTimeout(run, 50); + } + }, + isClosest: function isClosest(index) { + var _ref4 = Object.keys(this.paletteClone.closest || {}) || [], + _ref5 = _slicedToArray(_ref4, 1), + closestIndex = _ref5[0]; + return index == closestIndex; + } + } +}); +/***/ }), +/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/SwatchSquare.vue?vue&type=script&lang=js": +/*!**********************************************************************************************************************************************************************!*\ + !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/SwatchSquare.vue?vue&type=script&lang=js ***! + \**********************************************************************************************************************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony default export */ __webpack_exports__["default"] = ({ + name: 'SwatchSquare', + props: { + index: Number, + swatch: Object, + isFirst: Boolean, + isLast: Boolean, + isClosest: Boolean, + copy: Function, + copied: String, + textOverlay: Boolean + }, + methods: { + getBgColor: function getBgColor(swatch) { + return "rgb(".concat(swatch.rgb.join(','), ")"); + } + } +}); + +/***/ }), +/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/Pages/App.vue?vue&type=template&id=0ec91988": +/*!******************************************************************************************************************************************************************************************************************************!*\ + !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/Pages/App.vue?vue&type=template&id=0ec91988 ***! + \******************************************************************************************************************************************************************************************************************************/ +/*! exports provided: render, staticRenderFns */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { -const template = Object(_utils_dom_js__WEBPACK_IMPORTED_MODULE_2__["createTemplate"])(``); -class Hue extends _interactive_js__WEBPACK_IMPORTED_MODULE_0__["Interactive"] { - constructor() { - super(); - Object(_utils_dom_js__WEBPACK_IMPORTED_MODULE_2__["createRoot"])(this, template); - this.setAttribute('aria-label', 'Hue'); - this.setAttribute('aria-valuemin', '0'); - this.setAttribute('aria-valuemax', '360'); +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; }); +var render = function render() { + var _vm = this, + _c = _vm._self._c; + return _c("div", { + staticClass: "App", + on: { + click: function click($event) { + _vm.showPicker = null; + } + } + }, [_c("section", { + staticClass: "mt-6" + }, [_vm._m(0), _vm._v(" "), _c("div", { + staticClass: "mt-6 md:mt-0 flex items-center justify-between" + }, [_vm._m(1), _vm._v(" "), _c("div", { + staticClass: "relative" + }, [_c("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 click($event) { + _vm.showLumsMenu = !_vm.showLumsMenu; + } + } + }, [_c("i", { + staticClass: "far fa-lg fa-ellipsis-h" + })]), _vm._v(" "), _vm.showLumsMenu ? _c("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" + }, [_c("div", { + staticClass: "text-sm block py-half-4 px-5 mr-5 whitespace-no-wrap text-gray-900 uppercase tracking-wide font-bold" + }, [_vm._v("\n Distribute\n ")]), _vm._v(" "), _c("button", { + "class": ["block w-full text-left py-half-4 px-5 whitespace-no-wrap", { + "bg-gray-400 bg-opacity-75": _vm.autoDistribute + }, _vm.hasLockedLums ? "text-gray-600 cursor-not-allowed" : "text-gray-800 hover:bg-gray-400 hover:bg-opacity-75"], + attrs: { + title: _vm.hasLockedLums ? "You have LOCKED colors" : "", + disabled: _vm.hasLockedLums + }, + on: { + click: function click($event) { + _vm.autoDistribute = true; + _vm.showLumsMenu = false; + } } - connectedCallback() { - if (this.hasOwnProperty('hue')) { - const value = this.hue; - delete this['hue']; - this.hue = value; + }, [_c("i", { + staticClass: "far fa-fw fa-hand-sparkles mr-4" + }), _vm._v("Auto\n ")]), _vm._v(" "), _c("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": !_vm.autoDistribute + }], + on: { + click: function click($event) { + _vm.autoDistribute = false; + _vm.showLumsMenu = false; + } + } + }, [_c("i", { + staticClass: "far fa-fw fa-hand-paper mr-4" + }), _vm._v("Manual\n ")]), _vm._v(" "), _c("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" + }, [_vm._v("\n Presets\n ")]), _vm._v(" "), _vm._l(_vm.presets, function (preset, key) { + return _c("a", { + key: key, + "class": ["block py-half-4 px-5 whitespace-no-wrap", { + "bg-gray-400 bg-opacity-75": JSON.stringify(preset.getValues(_vm.lumsValues, _vm.lumsCount)) == JSON.stringify(_vm.lumsValues) + }, _vm.hasLockedLums ? "text-gray-600 cursor-not-allowed" : "text-gray-800 hover:bg-gray-400 hover:bg-opacity-75"], + attrs: { + title: _vm.hasLockedLums ? "You have LOCKED colors" : "", + href: "#".concat(key) + }, + on: { + mouseenter: function mouseenter($event) { + _vm.autoDistribute = false; + }, + click: function click($event) { + $event.preventDefault(); + _vm.autoDistribute = false; + _vm.showLumsMenu = false; + _vm.setLums(preset.getValues(_vm.lumsValues, _vm.lumsCount)); } + } + }, [_c("i", { + "class": ["fa-fw mr-4", preset.icon] + }), _vm._v(_vm._s(preset.label))]); + }), _vm._v(" "), _c("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" + }, [_vm._v("\n Contrast\n ")]), _vm._v(" "), _c("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": _vm.textOverlay + }], + on: { + click: function click($event) { + _vm.textOverlay = !_vm.textOverlay; + _vm.showLumsMenu = false; + } } - get xy() { - return false; + }, [_c("i", { + staticClass: "fa fa-fw fa-font-case mr-4" + }), _vm._v("Text Overlay\n ")])], 2) : _vm._e()])]), _vm._v(" "), _c("grayscale-row", { + staticClass: "mt-4 -mx-6 sm:mx-0", + attrs: { + lums: _vm.lums, + "lums-values": _vm.lumsValues, + "set-lums": _vm.setLums, + "is-locked-lum": _vm.isLockedLum } - get hue() { - return this._h; + }), _vm._v(" "), _c("palette-row", { + staticClass: "mt-7", + attrs: { + palette: { + swatches: _vm.cssTab === "radix" ? _vm.radixLums : _vm.lums + }, + "text-overlay": _vm.textOverlay } - set hue(h) { - this._h = h; - this.setStyles({ - left: `${(h / 360) * 100}%`, - color: Object(_utils_convert_js__WEBPACK_IMPORTED_MODULE_1__["hsvaToHslString"])({ h, s: 100, v: 100, a: 1 }) - }); - this.setAttribute('aria-valuenow', `${Math.round(h)}`); + }), _vm._v(" "), _c("div", { + staticClass: "text-center justify-between md:flex md:space-x-6" + }, [_c("div", [_c("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 click($event) { + return _vm.setLumsCount(_vm.lumsCount - 1); + } } - getMove(interaction, key) { - // Hue measured in degrees of the color circle ranging from 0 to 360 - return { h: key ? Object(_utils_clamp_js__WEBPACK_IMPORTED_MODULE_3__["clamp"])(this.hue + interaction.left * 360, 0, 360) : 360 * interaction.left }; + }, [_c("i", { + staticClass: "far fa-lg fa-minus" + })]), _vm._v(" "), _c("span", { + staticClass: "px-4 opacity-50" + }, [_vm._v(_vm._s(_vm.lumsCount) + " values")]), _vm._v(" "), _c("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 click($event) { + return _vm.setLumsCount(_vm.lumsCount + 1); + } } -} -customElements.define('vc-hue', Hue); -//# sourceMappingURL=hue.js.map + }, [_c("i", { + staticClass: "far fa-lg fa-plus" + })])]), _vm._v(" "), _c("div", { + staticClass: "md:text-right" + }, [_c("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": _vm.isUploading + }], + attrs: { + "for": "upload" + } + }, [_c("input", { + ref: "upload", + staticClass: "absolute inset-0 opacity-0 z-10 max-w-full", + attrs: { + disabled: _vm.isUploading, + name: "upload", + id: "upload", + type: "file", + accept: "image/x-png,image/gif,image/jpeg" + }, + on: { + change: _vm.onFileUpload + } + }), _vm._v("\n Upload an image\n ")]), _vm._v(" "), _vm._m(2)])]), _vm._v(" "), _vm.uploadFilePath ? _c("div", { + staticClass: "mt-6 text-center" + }, [_c("a", { + staticClass: "relative inline-block shadow hover:shadow-2xl transition-shadow duration-300", + attrs: { + href: _vm.getUploadFileUrl("?sat=-100&colorquant=".concat(_vm.lumsCount)), + target: "_blank", + rel: "noopener" + } + }, [_c("img", { + staticClass: "rounded-lg", + attrs: { + src: _vm.base64File || _vm.uploadFileUrl, + alt: "" + } + }), _vm._v(" "), _c("img", { + staticClass: "rounded-lg absolute inset-0 z-10 opacity-100 hover:opacity-0 transition-opacity duration-200", + attrs: { + src: _vm.getUploadFileUrl("?sat=-100&colorquant=".concat(_vm.lumsCount)), + alt: "" + } + })]), _vm._v(" "), _c("p", { + staticClass: "mt-2 text-xs mx-auto opacity-50 max-w-2xl" + }, [_vm._v("\n Click image to view and print. This is your image using just " + _vm._s(_vm.lumsCount) + " shades of\n gray (the grays used to generate your luminosity scale). Below, we added a few colors from\n your image!\n ")])]) : _vm._e()], 1), _vm._v(" "), _c("section", { + staticClass: "mt-10" + }, [_c("h1", { + staticClass: "font-bold uppercase tracking-wide" + }, [_vm._v("2.  Set your colors")]), _vm._v(" "), _c("div", { + staticClass: "mt-6 inline-block space-x-4" + }, [_c("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: _vm.addPalette + } + }, [_vm._v("\n Add A Color\n ")]), _vm._v(" "), _vm.palettes.length ? _c("a", { + staticClass: "border-b border-red-500 text-red-600 hover:text-red-700 transition-all duration-200", + attrs: { + href: "#" + }, + on: { + click: _vm.removeAll + } + }, [_vm._v("Remove All")]) : _vm._e()]), _vm._v(" "), _c("div", { + staticClass: "space-x-4" + }, _vm._l(_vm.suggestedColors, function (color) { + return _c("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": color, + "border-color": color + }, + on: { + click: function click($event) { + return _vm.addSuggestedColor(color); + } + } + }, [_c("i", { + staticClass: "fal fa-plus fa-sm" + })]); + }), 0), _vm._v(" "), _c("div", { + staticClass: "mt-8" + }, _vm._l(_vm.palettes, function (palette, index) { + return _c("div", { + key: _vm.palettes.length - index, + staticClass: "mt-8" + }, [_c("div", { + staticClass: "min-h-8 md:flex justify-between items-center relative" + }, [_c("div", { + staticClass: "absolute right-0 top-0" + }, [_c("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 click($event) { + return _vm.togglePaletteMenu(index); + } + } + }, [_c("i", { + staticClass: "far fa-lg fa-ellipsis-h" + })]), _vm._v(" "), _vm.shownPaletteMenu == index ? _c("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" + }, [_c("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 click($event) { + $event.preventDefault(); + _vm.toggleFilters(index); + _vm.togglePaletteMenu(index); + } + } + }, [_c("i", { + staticClass: "far fa-fw fa-sliders-h mr-4" + }), _vm._v("Tweak Hue/Sat\n ")]), _vm._v(" "), _c("hr", { + staticClass: "my-3 border-gray-600 opacity-75" + }), _vm._v(" "), _c("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 click($event) { + $event.preventDefault(); + _vm.removePalette(index); + _vm.togglePaletteMenu(index); + } + } + }, [_c("i", { + staticClass: "far fa-fw fa-times mr-4" + }), _vm._v("Remove\n ")])]) : _vm._e()]), _vm._v(" "), _c("div", { + staticClass: "h-8 leading-8 mr-8 relative" + }, [_c("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 click($event) { + return _vm.toggleLocked(palette.hex); + } + } + }, [_c("i", { + "class": ["fa-fw", _vm.isLockedHex(palette.hex) ? "fa fa-lock" : "far fa-unlock"] + })]), _vm._v(" "), _vm.showPicker === index ? _c("hex-color-picker", { + staticClass: "absolute bottom-full left-0 z-10", + attrs: { + color: palette.hex + }, + on: { + click: function click($event) { + $event.stopPropagation(); + }, + "color-changed": function colorChanged($event) { + palette.hex = $event.target.color; + } + } + }) : _vm._e(), _vm._v(" "), _c("button", { + staticClass: "h-half-8 w-half-8 mr-4 inline-block align-middle shadow-inner", + style: { + background: palette.hex + }, + on: { + click: function click($event) { + $event.stopPropagation(); + _vm.showPicker = _vm.showPicker === index ? null : index; + } + } + }), _vm._v(" "), _c("input", { + directives: [{ + name: "model", + rawName: "v-model", + value: palette.hex, + expression: "palette.hex" + }], + ref: "paletteHex".concat(index), + refInFor: true, + 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: palette.hex + }, + on: { + focus: function focus($event) { + return $event.target.select(); + }, + paste: _vm.onPaste, + input: function input($event) { + if ($event.target.composing) return; + _vm.$set(palette, "hex", $event.target.value); + } + } + }), _vm._v(" "), _c("input", { + directives: [{ + name: "model", + rawName: "v-model", + value: palette.name, + expression: "palette.name" + }], + ref: "paletteName".concat(index), + refInFor: true, + 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: palette.name + }, + on: { + input: function input($event) { + if ($event.target.composing) return; + _vm.$set(palette, "name", $event.target.value); + } + } + })], 1), _vm._v(" "), _vm.showFilters.includes(index) ? _c("div", { + staticClass: "flex md:mr-8 space-x-5" + }, [_c("div", { + staticClass: "text-center leading-5 mt-4 w-1/2 md:min-w-10 lg:min-w-11" + }, [_c("label", { + staticClass: "block font-mono text-xs opacity-50 uppercase" + }, [_vm._v("Hue (" + _vm._s(palette.filters.hue > 0 ? "+".concat(palette.filters.hue) : palette.filters.hue) + "°)")]), _vm._v(" "), _c("input", { + directives: [{ + name: "model", + rawName: "v-model", + value: palette.filters.hue, + expression: "palette.filters.hue" + }], + staticClass: "p-half-4 w-full", + attrs: { + type: "range", + min: "-50", + step: "0.1", + max: "50" + }, + domProps: { + value: palette.filters.hue + }, + on: { + __r: function __r($event) { + return _vm.$set(palette.filters, "hue", $event.target.value); + } + } + })]), _vm._v(" "), _c("div", { + staticClass: "text-center leading-5 mt-4 w-1/2 md:min-w-10 lg:min-w-11" + }, [_c("label", { + staticClass: "block font-mono text-xs opacity-50 uppercase" + }, [_vm._v("Saturation (" + _vm._s(palette.filters.sat) + "%)")]), _vm._v(" "), _c("input", { + directives: [{ + name: "model", + rawName: "v-model", + value: palette.filters.sat, + expression: "palette.filters.sat" + }], + staticClass: "p-half-4 w-full", + attrs: { + type: "range", + min: "-30", + step: "0.1", + max: "30" + }, + domProps: { + value: palette.filters.sat + }, + on: { + __r: function __r($event) { + return _vm.$set(palette.filters, "sat", $event.target.value); + } + } + })])]) : _vm._e()]), _vm._v(" "), _c("palette-row", { + staticClass: "mt-4", + attrs: { + palette: palette, + "hide-lum": "", + "is-locked": _vm.isLockedHex(palette.hex), + "store-swatches": function storeSwatches(swatches) { + return _vm.storeSwatches(swatches, palette.hex); + } + } + })], 1); + }), 0)]), _vm._v(" "), _c("section", { + staticClass: "mt-10" + }, [_c("h1", { + staticClass: "font-bold uppercase tracking-wide" + }, [_vm._v("3.  Export Your Colors")]), _vm._v(" "), _c("form", { + attrs: { + action: "/export-svgs", + target: "_blank", + method: "POST" + } + }, [_c("input", { + directives: [{ + name: "model", + rawName: "v-model", + value: _vm.exportConfig, + expression: "exportConfig" + }], + staticClass: "hidden", + attrs: { + type: "text", + name: "palettes" + }, + domProps: { + value: _vm.exportConfig + }, + on: { + input: function input($event) { + if ($event.target.composing) return; + _vm.exportConfig = $event.target.value; + } + } + }), _vm._v(" "), _c("input", { + directives: [{ + name: "model", + rawName: "v-model", + value: _vm.csrf, + expression: "csrf" + }], + attrs: { + type: "hidden", + name: "_token" + }, + domProps: { + value: _vm.csrf + }, + on: { + input: function input($event) { + if ($event.target.composing) return; + _vm.csrf = $event.target.value; + } + } + }), _vm._v(" "), _c("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" + } + }, [_vm._v("\n Export Svgs\n ")])]), _vm._v(" "), _c("div", { + staticClass: "mt-8 md:flex justify-between md:space-x-7" + }, [_c("div", { + staticClass: "space-x-5" + }, [_c("button", { + "class": [_vm.cssTab === "tailwind" ? "font-bold" : "border-b border-gray-500 text-blue-700 hover:opacity-50", "mb-6 transition-all duration-200"], + on: { + click: function click($event) { + $event.preventDefault(); + _vm.cssTab = "tailwind"; + } + } + }, [_vm._v("\n Tailwind CSS\n ")]), _vm._v(" "), _c("button", { + "class": [_vm.cssTab === "radix" ? "font-bold" : "border-b border-gray-500 text-blue-700 hover:opacity-50", "mb-6 transition-all duration-200"], + on: { + click: function click($event) { + $event.preventDefault(); + _vm.cssTab = "radix"; + } + } + }, [_vm._v("\n Radix UI\n ")]), _vm._v(" "), _c("button", { + "class": [_vm.cssTab === "vars" ? "font-bold" : "border-b border-gray-500 text-blue-700 hover:opacity-50", "mb-6 transition-all duration-200"], + on: { + click: function click($event) { + $event.preventDefault(); + _vm.cssTab = "vars"; + } + } + }, [_vm._v("\n CSS Variables\n ")]), _vm._v(" "), _c("button", { + "class": [_vm.cssTab === "stylus" ? "font-bold" : "border-b border-gray-500 text-blue-700 hover:opacity-50", "mb-6 transition-all duration-200"], + on: { + click: function click($event) { + $event.preventDefault(); + _vm.cssTab = "stylus"; + } + } + }, [_vm._v("\n Stylus\n ")]), _vm._v(" "), _c("button", { + "class": [_vm.cssTab === "scss" ? "font-bold" : "border-b border-gray-500 text-blue-700 hover:opacity-50", "mb-6 transition-all duration-200"], + on: { + click: function click($event) { + $event.preventDefault(); + _vm.cssTab = "scss"; + } + } + }, [_vm._v("\n SCSS\n ")]), _vm._v(" "), _c("button", { + "class": [_vm.cssTab === "less" ? "font-bold" : "border-b border-gray-500 text-blue-700 hover:opacity-50", "mb-6 transition-all duration-200"], + on: { + click: function click($event) { + $event.preventDefault(); + _vm.cssTab = "less"; + } + } + }, [_vm._v("\n LESS\n ")])]), _vm._v(" "), _c("div", { + staticClass: "mt-5 md:mt-0 space-x-5" + }, [_c("button", { + "class": [_vm.cssType === "rgb" ? "font-bold" : "border-b border-gray-500 text-blue-700 hover:opacity-50", "mb-6 transition-all duration-200"], + on: { + click: function click($event) { + $event.preventDefault(); + _vm.cssType = "rgb"; + } + } + }, [_vm._v("\n RGB\n ")]), _vm._v(" "), _c("button", { + "class": [_vm.cssType === "hex" ? "font-bold" : "border-b border-gray-500 text-blue-700 hover:opacity-50", "mb-6 transition-all duration-200"], + on: { + click: function click($event) { + $event.preventDefault(); + _vm.cssType = "hex"; + } + } + }, [_vm._v("\n HEX\n ")]), _vm._v(" "), _c("button", { + "class": [_vm.cssType === "hsl" ? "font-bold" : "border-b border-gray-500 text-blue-700 hover:opacity-50", "mb-6 transition-all duration-200"], + on: { + click: function click($event) { + $event.preventDefault(); + _vm.cssType = "hsl"; + } + } + }, [_vm._v("\n HSL\n ")]), _vm._v(" "), _c("button", { + "class": [_vm.cssType === "oklch" ? "font-bold" : "border-b border-gray-500 text-blue-700 hover:opacity-50", "mb-6 transition-all duration-200"], + on: { + click: function click($event) { + $event.preventDefault(); + _vm.cssType = "oklch"; + } + } + }, [_vm._v("\n OKLCH\n ")])])]), _vm._v(" "), _c("div", { + staticClass: "bg-gray-300 rounded-lg p-6 text-gray-800 overflow-auto" + }, [_c("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 click($event) { + return _vm.copy(_vm.tabContent); + } + } + }, [_c("i", { + "class": ["fa fa-fw mr-3", _vm.copyText ? "fa-check" : "fa-clone"] + }), _vm._v(_vm._s(_vm.copyText ? "Copied!" : "Copy") + "\n ")]), _vm._v(" "), _c("pre", { + staticClass: "relative z-10" + }, [_vm._v(_vm._s(_vm.tabContent))])])]), _vm._v(" "), _c("section", { + staticClass: "mt-10" + }, [_vm._m(3), _vm._v(" "), _c("p", { + staticClass: "mt-4 text-gray-600 leading-relaxed" + }, [_vm._v("\n Generate CSS and Tailwind config for automatic dark mode using flipped color scales. \n This approach creates symmetric color values that automatically invert in dark mode while maintaining consistent contrast ratios.\n ")]), _vm._v(" "), _c("div", { + staticClass: "mt-6 space-x-5" + }, [_c("button", { + "class": [_vm.autoDarkModeTab === "css" ? "font-bold" : "border-b border-gray-500 text-blue-700 hover:opacity-50", "mb-6 transition-all duration-200"], + on: { + click: function click($event) { + $event.preventDefault(); + _vm.autoDarkModeTab = "css"; + } + } + }, [_vm._v("\n CSS Variables\n ")]), _vm._v(" "), _c("button", { + "class": [_vm.autoDarkModeTab === "config" ? "font-bold" : "border-b border-gray-500 text-blue-700 hover:opacity-50", "mb-6 transition-all duration-200"], + on: { + click: function click($event) { + $event.preventDefault(); + _vm.autoDarkModeTab = "config"; + } + } + }, [_vm._v("\n Tailwind Config\n ")])]), _vm._v(" "), _c("div", { + staticClass: "bg-gray-300 rounded-lg p-6 text-gray-800 overflow-auto" + }, [_c("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 click($event) { + return _vm.copy(_vm.autoDarkModeTabContent); + } + } + }, [_c("i", { + "class": ["fa fa-fw mr-3", _vm.copyText ? "fa-check" : "fa-clone"] + }), _vm._v(_vm._s(_vm.copyText ? "Copied!" : "Copy") + "\n ")]), _vm._v(" "), _c("pre", { + staticClass: "relative z-10" + }, [_vm._v(_vm._s(_vm.autoDarkModeTabContent))])]), _vm._v(" "), _vm._m(4)]), _vm._v(" "), _vm._m(5), _vm._v(" "), _c("section", { + staticClass: "mt-9 rich-text", + domProps: { + innerHTML: _vm._s(_vm.cms.content) + } + })]); +}; +var staticRenderFns = [function () { + var _vm = this, + _c = _vm._self._c; + return _c("div", { + staticClass: "md:flex justify-between" + }, [_c("h1", { + staticClass: "mb-6 mr-5 font-bold uppercase tracking-wide" + }, [_vm._v("\n 1.  Set Your Luminance-Based Grayscale\n ")]), _vm._v(" "), _c("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" + } + }, [_c("i", { + staticClass: "fa fa-play-circle mr-3 opacity-75" + }), _vm._v("Watch Demo"), _c("i", { + staticClass: "ml-3 fa fa-xs fa-external-link opacity-50" + })])]); +}, function () { + var _vm = this, + _c = _vm._self._c; + return _c("p", { + staticClass: "flex-shrink" + }, [_vm._v("\n Drag the sliders below or use the\n "), _c("i", { + staticClass: "far fa-ellipsis-h mx-2 text-blue-600" + }), _vm._v(" menu.\n ")]); +}, function () { + var _vm = this, + _c = _vm._self._c; + return _c("p", { + staticClass: "text-sm leading-6 mt-3 w-double-10 max-w-full mx-auto" + }, [_c("span", { + staticClass: "opacity-50" + }, [_vm._v("\n Max filesize: 5MB. Upload an image to auto-generate your grayscale and colors.\n ")]), _vm._v(" "), _c("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" + } + }, [_vm._v("Powered by\n "), _c("img", { + staticClass: "inline h-double-4", + attrs: { + src: "/img/imgix_logo1_small.png", + alt: "imgix" + } + })])]); +}, function () { + var _vm = this, + _c = _vm._self._c; + return _c("div", { + staticClass: "flex justify-between" + }, [_c("h1", { + staticClass: "font-bold uppercase tracking-wide leading-7" + }, [_vm._v("4.  Tailwind Auto-Dark Mode")]), _vm._v(" "), _c("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/4b52f02f07264137b70c7864f8928c77", + target: "_blank" + } + }, [_c("i", { + staticClass: "fa fa-play-circle mr-3 opacity-75" + }), _vm._v("Watch Demo"), _c("i", { + staticClass: "ml-3 fa fa-xs fa-external-link opacity-50" + })])]); +}, function () { + var _vm = this, + _c = _vm._self._c; + return _c("div", { + staticClass: "mt-4 text-sm text-gray-500 leading-relaxed" + }, [_c("p", [_c("strong", [_vm._v("How to use:")])]), _vm._v(" "), _c("ol", { + staticClass: "mt-2 list-decimal list-inside space-y-1 pl-4" + }, [_c("li", [_vm._v("Copy the CSS Variables code and paste it into your main CSS file")]), _vm._v(" "), _c("li", [_vm._v("Copy the Tailwind Config code and merge it with your tailwind.config.js")]), _vm._v(" "), _c("li", [_vm._v("Use color classes like "), _c("code", { + staticClass: "bg-gray-200 px-1 rounded" + }, [_vm._v("text-neutral-600")]), _vm._v(" or "), _c("code", { + staticClass: "bg-gray-200 px-1 rounded" + }, [_vm._v("bg-primary-200")])]), _vm._v(" "), _c("li", [_vm._v("Colors will automatically flip to their opposite values in dark mode")]), _vm._v(" "), _c("li", [_vm._v("Use the "), _c("code", { + staticClass: "bg-gray-200 px-1 rounded" + }, [_vm._v("unset-dark-mode")]), _vm._v(" class to prevent auto-flipping on specific elements")])])]); +}, function () { + var _vm = this, + _c = _vm._self._c; + return _c("section", { + staticClass: "mt-9 text-center leading-7" + }, [_c("div", { + staticClass: "text-3xl font-bold" + }, [_vm._v("Have feedback?")]), _vm._v(" "), _c("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" + } + }, [_c("i", { + staticClass: "fa fa-send mr-4" + }), _vm._v("Send us an email\n ")])]); +}]; +render._withStripped = true; + /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/components/interactive.js": -/*!*********************************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/components/interactive.js ***! - \*********************************************************************/ -/*! exports provided: Interactive */ +/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/GrayscaleRow.vue?vue&type=template&id=58ce25fe": +/*!********************************************************************************************************************************************************************************************************************************************!*\ + !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/GrayscaleRow.vue?vue&type=template&id=58ce25fe ***! + \********************************************************************************************************************************************************************************************************************************************/ +/*! exports provided: render, staticRenderFns */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Interactive", function() { return Interactive; }); -/* harmony import */ var _utils_dom_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/dom.js */ "./node_modules/vanilla-colorful/lib/utils/dom.js"); -/* harmony import */ var _utils_clamp_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/clamp.js */ "./node_modules/vanilla-colorful/lib/utils/clamp.js"); -/* harmony import */ var _styles_interactive_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../styles/interactive.js */ "./node_modules/vanilla-colorful/lib/styles/interactive.js"); - - - -const template = Object(_utils_dom_js__WEBPACK_IMPORTED_MODULE_0__["createTemplate"])(`
`); -let hasTouched = false; -// Check if an event was triggered by touch -const isTouch = (e) => 'touches' in e; -// Prevent mobile browsers from handling mouse events (conflicting with touch ones). -// If we detected a touch interaction before, we prefer reacting to touch events only. -const isValid = (event) => { - if (hasTouched && !isTouch(event)) - return false; - if (!hasTouched) - hasTouched = isTouch(event); - return true; -}; -const fireMove = (target, interaction, key) => { - target.dispatchEvent(new CustomEvent('move', { - bubbles: true, - detail: target.getMove(interaction, key) - })); -}; -const pointerMove = (target, event) => { - const pointer = isTouch(event) ? event.touches[0] : event; - const rect = target.getBoundingClientRect(); - fireMove(target, { - left: Object(_utils_clamp_js__WEBPACK_IMPORTED_MODULE_1__["clamp"])((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width), - top: Object(_utils_clamp_js__WEBPACK_IMPORTED_MODULE_1__["clamp"])((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height) +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; }); +var render = function render() { + var _vm = this, + _c = _vm._self._c; + return _c("div", { + staticClass: "GrayscaleRow" + }, [_c("div", { + ref: "grayscale", + staticClass: "sm:rounded-full shadow-lg bg-gray-800 relative px-6" + }, [_vm._m(0), _vm._v(" "), _c("div", { + staticClass: "border-t border-gray-600 absolute inset-x-0 top-1/2 -mt-px" + }), _vm._v(" "), _c("div", { + staticClass: "absolute inset-y-0 left-0 right-0 mx-6 border-l border-r border-gray-600" + }, _vm._l(_vm.lums, function (swatch, index) { + return _c("div", { + key: index, + "class": ["absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 cursor-pointer w-half-7 h-half-7 shadow-inner rounded-full border-1 border-white", _vm.isDragging === index ? "shadow-outline" : "transition-all duration-200", _vm.isLockedLum(index) ? "cursor-not-allowed" : ""], + style: { + left: _vm.getSwatchPosition(index), + backgroundColor: "rgb(".concat(_vm.lumToGrayscaleRGB(swatch.lum).join(","), ")") + }, + attrs: { + title: _vm.isLockedLum(index) ? "LOCKED" : "", + draggable: !_vm.isLockedLum(index) + }, + on: { + dragstart: function dragstart($event) { + return _vm.onDragStart($event, index); + }, + drag: function drag($event) { + return _vm.onDrag($event, index); + }, + dragend: function dragend($event) { + return _vm.onDragEnd($event, index); + } + } }); + }), 0)])]); }; -const keyMove = (target, event) => { - // We use `keyCode` instead of `key` to reduce the size of the library. - const keyCode = event.keyCode; - // Ignore all keys except arrow ones, Page Up, Page Down, Home and End. - if (keyCode > 40 || (target.xy && keyCode < 37) || keyCode < 33) - return; - // Do not scroll page by keys when color picker element has focus. - event.preventDefault(); - // Send relative offset to the parent component. - fireMove(target, { - left: keyCode === 39 // Arrow Right - ? 0.01 - : keyCode === 37 // Arrow Left - ? -0.01 - : keyCode === 34 // Page Down - ? 0.05 - : keyCode === 33 // Page Up - ? -0.05 - : keyCode === 35 // End - ? 1 - : keyCode === 36 // Home - ? -1 - : 0, - top: keyCode === 40 // Arrow down - ? 0.01 - : keyCode === 38 // Arrow Up - ? -0.01 - : 0 - }, true); -}; -class Interactive extends HTMLElement { - constructor() { - super(); - this.pointer = Object(_utils_dom_js__WEBPACK_IMPORTED_MODULE_0__["createRoot"])(this, template).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(state) { - const toggleEvent = state ? document.addEventListener : document.removeEventListener; - toggleEvent(hasTouched ? 'touchmove' : 'mousemove', this); - toggleEvent(hasTouched ? 'touchend' : 'mouseup', this); - } - handleEvent(event) { - switch (event.type) { - case 'mousedown': - case 'touchstart': - event.preventDefault(); - // event.button is 0 in mousedown for left button activation - if (!isValid(event) || (!hasTouched && event.button != 0)) - return; - pointerMove(this, event); - this.dragging = true; - break; - case 'mousemove': - case 'touchmove': - event.preventDefault(); - pointerMove(this, event); - break; - case 'mouseup': - case 'touchend': - this.dragging = false; - break; - case 'keydown': - keyMove(this, event); - break; - } - } - setStyles(properties) { - for (const p in properties) { - this.pointer.setProperty(p, properties[p]); - } - } -} -//# sourceMappingURL=interactive.js.map +var staticRenderFns = [function () { + var _vm = this, + _c = _vm._self._c; + return _c("div", { + staticClass: "h-8 sm:h-half-9 divide-x divide-gray-600 flex justify-between" + }, [_c("div", { + staticClass: "flex-grow" + }), _vm._v(" "), _c("div", { + staticClass: "flex-grow" + }), _vm._v(" "), _c("div", { + staticClass: "flex-grow" + }), _vm._v(" "), _c("div", { + staticClass: "flex-grow" + }), _vm._v(" "), _c("div", { + staticClass: "flex-grow" + }), _vm._v(" "), _c("div", { + staticClass: "flex-grow" + }), _vm._v(" "), _c("div", { + staticClass: "flex-grow" + }), _vm._v(" "), _c("div", { + staticClass: "flex-grow" + }), _vm._v(" "), _c("div", { + staticClass: "flex-grow" + }), _vm._v(" "), _c("div", { + staticClass: "flex-grow" + })]); +}]; +render._withStripped = true; + /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/components/saturation.js": -/*!********************************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/components/saturation.js ***! - \********************************************************************/ -/*! exports provided: Saturation */ +/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/PaletteRow.vue?vue&type=template&id=4b79ba8a": +/*!******************************************************************************************************************************************************************************************************************************************!*\ + !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/PaletteRow.vue?vue&type=template&id=4b79ba8a ***! + \******************************************************************************************************************************************************************************************************************************************/ +/*! exports provided: render, staticRenderFns */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Saturation", function() { return Saturation; }); -/* harmony import */ var _interactive_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./interactive.js */ "./node_modules/vanilla-colorful/lib/components/interactive.js"); -/* harmony import */ var _utils_convert_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/convert.js */ "./node_modules/vanilla-colorful/lib/utils/convert.js"); -/* harmony import */ var _utils_dom_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/dom.js */ "./node_modules/vanilla-colorful/lib/utils/dom.js"); -/* harmony import */ var _utils_clamp_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/clamp.js */ "./node_modules/vanilla-colorful/lib/utils/clamp.js"); -/* harmony import */ var _styles_saturation_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../styles/saturation.js */ "./node_modules/vanilla-colorful/lib/styles/saturation.js"); - +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; }); +var render = function render() { + var _vm = this, + _c = _vm._self._c; + return _c("div", { + "class": ["PaletteRow", { + "is-locked": _vm.isLocked + }] + }, [_c("div", { + staticClass: "flex items-center justify-between" + }, _vm._l(_vm.swatches, function (swatch, index) { + return _c("swatch-square", { + key: index, + staticClass: "w-full", + attrs: { + copy: _vm.copy, + copied: _vm.copyText, + swatch: swatch, + "text-overlay": _vm.textOverlay, + index: parseInt(index, 10), + "is-first": index == 0, + "is-last": index == Object.keys(_vm.swatches).length - 1, + "is-closest": _vm.isClosest(index) + } + }, [_c("div", { + staticClass: "font-mono opacity-50 text-gray-800 text-sm text-center px-2 leading-5 mt-4 mb-3" + }, [_c("span", { + staticClass: "hidden md:inline-block" + }, [_vm._v(_vm._s(_vm.palette.name ? _vm.palette.name + "-" : ""))]), _vm._v(_vm._s(swatch.label) + "\n ")]), _vm._v(" "), !_vm.hideLum ? _c("div", { + staticClass: "font-mono opacity-50 text-gray-600 text-xs text-center leading-5" + }, [_vm._v("\n " + _vm._s(swatch.lum ? swatch.lum.toFixed(2) : swatch.lum == 0 ? "0.00" : "--") + "%\n ")]) : _vm._e()]); + }), 1)]); +}; +var staticRenderFns = []; +render._withStripped = true; +/***/ }), +/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/SwatchSquare.vue?vue&type=template&id=d2826838": +/*!********************************************************************************************************************************************************************************************************************************************!*\ + !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/SwatchSquare.vue?vue&type=template&id=d2826838 ***! + \********************************************************************************************************************************************************************************************************************************************/ +/*! exports provided: render, staticRenderFns */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { -const template = Object(_utils_dom_js__WEBPACK_IMPORTED_MODULE_2__["createTemplate"])(``); -class Saturation extends _interactive_js__WEBPACK_IMPORTED_MODULE_0__["Interactive"] { - constructor() { - super(); - Object(_utils_dom_js__WEBPACK_IMPORTED_MODULE_2__["createRoot"])(this, template); - this.setAttribute('aria-label', 'Color'); - } - connectedCallback() { - if (this.hasOwnProperty('hsva')) { - const value = this.hsva; - delete this['hsva']; - this.hsva = value; - } - } - get xy() { - return true; - } - get hsva() { - return this._hsva; - } - set hsva(hsva) { - this._hsva = hsva; - this.style.backgroundColor = Object(_utils_convert_js__WEBPACK_IMPORTED_MODULE_1__["hsvaToHslString"])({ h: hsva.h, s: 100, v: 100, a: 1 }); - this.setStyles({ - top: `${100 - hsva.v}%`, - left: `${hsva.s}%`, - color: Object(_utils_convert_js__WEBPACK_IMPORTED_MODULE_1__["hsvaToHslString"])(hsva) - }); - this.setAttribute('aria-valuetext', `Saturation ${Math.round(hsva.s)}%, Brightness ${Math.round(hsva.v)}%`); - } - getMove(interaction, key) { - // Saturation and brightness always fit into [0, 100] range - return { - s: key ? Object(_utils_clamp_js__WEBPACK_IMPORTED_MODULE_3__["clamp"])(this.hsva.s + interaction.left * 100, 0, 100) : interaction.left * 100, - v: key - ? Object(_utils_clamp_js__WEBPACK_IMPORTED_MODULE_3__["clamp"])(this.hsva.v - interaction.top * 100, 0, 100) - : Math.round(100 - interaction.top * 100) - }; +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; }); +var render = function render() { + var _vm = this, + _c = _vm._self._c; + return _vm.swatch.rgb ? _c("div", { + "class": ["SwatchSquare", { + "is-closest": _vm.isClosest + }] + }, [_c("button", { + "class": ["w-full h-9 shadow-inner transition-colors duration-150 relative z-10", _vm.isFirst ? "rounded-l-lg" : _vm.isLast ? "rounded-r-lg" : "", { + "pointer-events-none": !_vm.swatch.hex + }], + style: { + color: _vm.getBgColor(_vm.swatch), + backgroundColor: _vm.getBgColor(_vm.swatch) + // transitionDelay: `${index * 40}ms`, + }, + attrs: { + type: "button" + }, + on: { + click: function click($event) { + return _vm.copy(_vm.swatch.hex); + } } -} -customElements.define('vc-saturation', Saturation); -//# sourceMappingURL=saturation.js.map + }, [_vm.swatch.hex ? _c("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" + }, [_vm._v("\n " + _vm._s(_vm.swatch.hex) + "\n ")]) : _vm._e(), _vm._v(" "), _c("div", { + staticClass: "absolute inset-0 flex flex-col items-center justify-center" + }, [_vm.textOverlay ? _c("strong", { + staticClass: "block text-black text-lg" + }, [_c("i", { + staticClass: "fa fa-font-case" + })]) : _vm._e(), _vm._v(" "), _vm.textOverlay ? _c("strong", { + staticClass: "block text-white text-lg" + }, [_c("i", { + staticClass: "fa fa-font-case" + })]) : _vm._e()]), _vm._v(" "), _vm.swatch.hex ? _c("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", _vm.copied === _vm.swatch.hex ? "translate-y-full opacity-100" : "opacity-0 -translate-y-1/2"] + }, [_vm._v("\n " + _vm._s(_vm.swatch.hex) + "\n ")]) : _vm._e()]), _vm._v(" "), _vm._t("default")], 2) : _vm._e(); +}; +var staticRenderFns = []; +render._withStripped = true; + /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/entrypoints/hex.js": -/*!**************************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/entrypoints/hex.js ***! - \**************************************************************/ -/*! exports provided: HexBase */ +/***/ "./resources/js/Pages/App.vue": +/*!************************************!*\ + !*** ./resources/js/Pages/App.vue ***! + \************************************/ +/*! no static exports found */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HexBase", function() { return HexBase; }); -/* harmony import */ var _components_color_picker_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/color-picker.js */ "./node_modules/vanilla-colorful/lib/components/color-picker.js"); -/* harmony import */ var _utils_convert_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/convert.js */ "./node_modules/vanilla-colorful/lib/utils/convert.js"); -/* harmony import */ var _utils_compare_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/compare.js */ "./node_modules/vanilla-colorful/lib/utils/compare.js"); +/* harmony import */ var _App_vue_vue_type_template_id_0ec91988__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./App.vue?vue&type=template&id=0ec91988 */ "./resources/js/Pages/App.vue?vue&type=template&id=0ec91988"); +/* harmony import */ var _App_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./App.vue?vue&type=script&lang=js */ "./resources/js/Pages/App.vue?vue&type=script&lang=js"); +/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _App_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _App_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__)); +/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js"); + -const colorModel = { - defaultColor: '#000', - toHsva: _utils_convert_js__WEBPACK_IMPORTED_MODULE_1__["hexToHsva"], - fromHsva: _utils_convert_js__WEBPACK_IMPORTED_MODULE_1__["hsvaToHex"], - equal: _utils_compare_js__WEBPACK_IMPORTED_MODULE_2__["equalHex"], - fromAttr: (color) => color -}; -class HexBase extends _components_color_picker_js__WEBPACK_IMPORTED_MODULE_0__["ColorPicker"] { - get colorModel() { - return colorModel; - } -} -//# sourceMappingURL=hex.js.map + +/* normalize component */ + +var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])( + _App_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], + _App_vue_vue_type_template_id_0ec91988__WEBPACK_IMPORTED_MODULE_0__["render"], + _App_vue_vue_type_template_id_0ec91988__WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"], + false, + null, + null, + null + +) + +/* hot reload */ +if (false) { var api; } +component.options.__file = "resources/js/Pages/App.vue" +/* harmony default export */ __webpack_exports__["default"] = (component.exports); + +/***/ }), + +/***/ "./resources/js/Pages/App.vue?vue&type=script&lang=js": +/*!************************************************************!*\ + !*** ./resources/js/Pages/App.vue?vue&type=script&lang=js ***! + \************************************************************/ +/*! no static exports found */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/Pages/App.vue?vue&type=script&lang=js"); +/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"]); /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/styles/color-picker.js": +/***/ "./resources/js/Pages/App.vue?vue&type=template&id=0ec91988": /*!******************************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/styles/color-picker.js ***! + !*** ./resources/js/Pages/App.vue?vue&type=template&id=0ec91988 ***! \******************************************************************/ +/*! exports provided: render, staticRenderFns */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_loaders_templateLoader_js_ref_6_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_template_id_0ec91988__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!../../../node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=template&id=0ec91988 */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/Pages/App.vue?vue&type=template&id=0ec91988"); +/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_loaders_templateLoader_js_ref_6_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_template_id_0ec91988__WEBPACK_IMPORTED_MODULE_0__["render"]; }); + +/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_loaders_templateLoader_js_ref_6_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_template_id_0ec91988__WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; }); + + + +/***/ }), + +/***/ "./resources/js/components/GrayscaleRow.vue": +/*!**************************************************!*\ + !*** ./resources/js/components/GrayscaleRow.vue ***! + \**************************************************/ /*! exports provided: default */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony default export */ __webpack_exports__["default"] = (`:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none !important}[part]:last-child{border-radius:0 0 8px 8px}`); -//# sourceMappingURL=color-picker.js.map +/* harmony import */ var _GrayscaleRow_vue_vue_type_template_id_58ce25fe__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./GrayscaleRow.vue?vue&type=template&id=58ce25fe */ "./resources/js/components/GrayscaleRow.vue?vue&type=template&id=58ce25fe"); +/* harmony import */ var _GrayscaleRow_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./GrayscaleRow.vue?vue&type=script&lang=js */ "./resources/js/components/GrayscaleRow.vue?vue&type=script&lang=js"); +/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js"); + + + + + +/* normalize component */ + +var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])( + _GrayscaleRow_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], + _GrayscaleRow_vue_vue_type_template_id_58ce25fe__WEBPACK_IMPORTED_MODULE_0__["render"], + _GrayscaleRow_vue_vue_type_template_id_58ce25fe__WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"], + false, + null, + null, + null + +) + +/* hot reload */ +if (false) { var api; } +component.options.__file = "resources/js/components/GrayscaleRow.vue" +/* harmony default export */ __webpack_exports__["default"] = (component.exports); /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/styles/hue.js": -/*!*********************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/styles/hue.js ***! - \*********************************************************/ +/***/ "./resources/js/components/GrayscaleRow.vue?vue&type=script&lang=js": +/*!**************************************************************************!*\ + !*** ./resources/js/components/GrayscaleRow.vue?vue&type=script&lang=js ***! + \**************************************************************************/ /*! exports provided: default */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony default export */ __webpack_exports__["default"] = (`:host{position:relative;bottom:0;left:0;right:0;height:24px;background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)}[part=pointer]{top:50%;z-index:2}`); -//# sourceMappingURL=hue.js.map +/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_GrayscaleRow_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./GrayscaleRow.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/GrayscaleRow.vue?vue&type=script&lang=js"); +/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_GrayscaleRow_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"]); + +/***/ }), + +/***/ "./resources/js/components/GrayscaleRow.vue?vue&type=template&id=58ce25fe": +/*!********************************************************************************!*\ + !*** ./resources/js/components/GrayscaleRow.vue?vue&type=template&id=58ce25fe ***! + \********************************************************************************/ +/*! exports provided: render, staticRenderFns */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_loaders_templateLoader_js_ref_6_node_modules_vue_loader_lib_index_js_vue_loader_options_GrayscaleRow_vue_vue_type_template_id_58ce25fe__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!../../../node_modules/vue-loader/lib??vue-loader-options!./GrayscaleRow.vue?vue&type=template&id=58ce25fe */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/GrayscaleRow.vue?vue&type=template&id=58ce25fe"); +/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_loaders_templateLoader_js_ref_6_node_modules_vue_loader_lib_index_js_vue_loader_options_GrayscaleRow_vue_vue_type_template_id_58ce25fe__WEBPACK_IMPORTED_MODULE_0__["render"]; }); + +/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_loaders_templateLoader_js_ref_6_node_modules_vue_loader_lib_index_js_vue_loader_options_GrayscaleRow_vue_vue_type_template_id_58ce25fe__WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; }); + + /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/styles/interactive.js": -/*!*****************************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/styles/interactive.js ***! - \*****************************************************************/ +/***/ "./resources/js/components/PaletteRow.vue": +/*!************************************************!*\ + !*** ./resources/js/components/PaletteRow.vue ***! + \************************************************/ /*! exports provided: default */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony default export */ __webpack_exports__["default"] = (`: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}`); -//# sourceMappingURL=interactive.js.map +/* harmony import */ var _PaletteRow_vue_vue_type_template_id_4b79ba8a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PaletteRow.vue?vue&type=template&id=4b79ba8a */ "./resources/js/components/PaletteRow.vue?vue&type=template&id=4b79ba8a"); +/* harmony import */ var _PaletteRow_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PaletteRow.vue?vue&type=script&lang=js */ "./resources/js/components/PaletteRow.vue?vue&type=script&lang=js"); +/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js"); + + + + + +/* normalize component */ + +var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])( + _PaletteRow_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], + _PaletteRow_vue_vue_type_template_id_4b79ba8a__WEBPACK_IMPORTED_MODULE_0__["render"], + _PaletteRow_vue_vue_type_template_id_4b79ba8a__WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"], + false, + null, + null, + null + +) + +/* hot reload */ +if (false) { var api; } +component.options.__file = "resources/js/components/PaletteRow.vue" +/* harmony default export */ __webpack_exports__["default"] = (component.exports); /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/styles/saturation.js": -/*!****************************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/styles/saturation.js ***! - \****************************************************************/ +/***/ "./resources/js/components/PaletteRow.vue?vue&type=script&lang=js": +/*!************************************************************************!*\ + !*** ./resources/js/components/PaletteRow.vue?vue&type=script&lang=js ***! + \************************************************************************/ /*! exports provided: default */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony default export */ __webpack_exports__["default"] = (`:host{display:block;position:relative;flex-grow:1;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top, #000, rgba(0, 0, 0, 0)),linear-gradient(to right, #fff, rgba(255, 255, 255, 0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=pointer]{z-index:3}`); -//# sourceMappingURL=saturation.js.map +/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PaletteRow_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./PaletteRow.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/PaletteRow.vue?vue&type=script&lang=js"); +/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PaletteRow_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"]); /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/utils/clamp.js": -/*!**********************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/utils/clamp.js ***! - \**********************************************************/ -/*! exports provided: clamp */ +/***/ "./resources/js/components/PaletteRow.vue?vue&type=template&id=4b79ba8a": +/*!******************************************************************************!*\ + !*** ./resources/js/components/PaletteRow.vue?vue&type=template&id=4b79ba8a ***! + \******************************************************************************/ +/*! exports provided: render, staticRenderFns */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "clamp", function() { return clamp; }); -// Clamps a value between an upper and lower bound. -// We use ternary operators because it makes the minified code -// 2 times shorter then `Math.min(Math.max(a,b),c)` -const clamp = (number, min = 0, max = 1) => { - return number > max ? max : number < min ? min : number; -}; -//# sourceMappingURL=clamp.js.map +/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_loaders_templateLoader_js_ref_6_node_modules_vue_loader_lib_index_js_vue_loader_options_PaletteRow_vue_vue_type_template_id_4b79ba8a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!../../../node_modules/vue-loader/lib??vue-loader-options!./PaletteRow.vue?vue&type=template&id=4b79ba8a */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/PaletteRow.vue?vue&type=template&id=4b79ba8a"); +/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_loaders_templateLoader_js_ref_6_node_modules_vue_loader_lib_index_js_vue_loader_options_PaletteRow_vue_vue_type_template_id_4b79ba8a__WEBPACK_IMPORTED_MODULE_0__["render"]; }); + +/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_loaders_templateLoader_js_ref_6_node_modules_vue_loader_lib_index_js_vue_loader_options_PaletteRow_vue_vue_type_template_id_4b79ba8a__WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; }); + + /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/utils/compare.js": -/*!************************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/utils/compare.js ***! - \************************************************************/ -/*! exports provided: equalColorObjects, equalColorString, equalHex */ +/***/ "./resources/js/components/SwatchSquare.vue": +/*!**************************************************!*\ + !*** ./resources/js/components/SwatchSquare.vue ***! + \**************************************************/ +/*! exports provided: default */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "equalColorObjects", function() { return equalColorObjects; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "equalColorString", function() { return equalColorString; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "equalHex", function() { return equalHex; }); -/* harmony import */ var _convert__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./convert */ "./node_modules/vanilla-colorful/lib/utils/convert.js"); +/* harmony import */ var _SwatchSquare_vue_vue_type_template_id_d2826838__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./SwatchSquare.vue?vue&type=template&id=d2826838 */ "./resources/js/components/SwatchSquare.vue?vue&type=template&id=d2826838"); +/* harmony import */ var _SwatchSquare_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SwatchSquare.vue?vue&type=script&lang=js */ "./resources/js/components/SwatchSquare.vue?vue&type=script&lang=js"); +/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js"); -const equalColorObjects = (first, second) => { - if (first === second) - return true; - for (const prop in first) { - // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB) - // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`) - // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types, - // we must cast our object to unknown (as RGB demands `r` be a key, while `Record` does not care if - // there is or not), and then as a type TS can iterate over. - if (first[prop] !== - second[prop]) - return false; - } - return true; -}; -const equalColorString = (first, second) => { - return first.replace(/\s/g, '') === second.replace(/\s/g, ''); -}; -const equalHex = (first, second) => { - if (first.toLowerCase() === second.toLowerCase()) - return true; - // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects - return equalColorObjects(Object(_convert__WEBPACK_IMPORTED_MODULE_0__["hexToRgba"])(first), Object(_convert__WEBPACK_IMPORTED_MODULE_0__["hexToRgba"])(second)); -}; -//# sourceMappingURL=compare.js.map + + + + +/* normalize component */ + +var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])( + _SwatchSquare_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], + _SwatchSquare_vue_vue_type_template_id_d2826838__WEBPACK_IMPORTED_MODULE_0__["render"], + _SwatchSquare_vue_vue_type_template_id_d2826838__WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"], + false, + null, + null, + null + +) + +/* hot reload */ +if (false) { var api; } +component.options.__file = "resources/js/components/SwatchSquare.vue" +/* harmony default export */ __webpack_exports__["default"] = (component.exports); /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/utils/convert.js": -/*!************************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/utils/convert.js ***! - \************************************************************/ -/*! exports provided: hexToHsva, hexToRgba, hslaStringToHsva, hslStringToHsva, hslaToHsva, hsvaToHex, hsvaToHsla, hsvaToHsvString, hsvaToHsvaString, hsvaToHslString, hsvaToHslaString, hsvaToRgba, hsvaToRgbString, hsvaToRgbaString, hsvaStringToHsva, hsvStringToHsva, rgbaStringToHsva, rgbStringToHsva, rgbaToHex, rgbaToHsva, rgbaToRgb, hslaToHsl, hsvaToHsv */ +/***/ "./resources/js/components/SwatchSquare.vue?vue&type=script&lang=js": +/*!**************************************************************************!*\ + !*** ./resources/js/components/SwatchSquare.vue?vue&type=script&lang=js ***! + \**************************************************************************/ +/*! exports provided: default */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hexToHsva", function() { return hexToHsva; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hexToRgba", function() { return hexToRgba; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hslaStringToHsva", function() { return hslaStringToHsva; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hslStringToHsva", function() { return hslStringToHsva; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hslaToHsva", function() { return hslaToHsva; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hsvaToHex", function() { return hsvaToHex; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hsvaToHsla", function() { return hsvaToHsla; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hsvaToHsvString", function() { return hsvaToHsvString; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hsvaToHsvaString", function() { return hsvaToHsvaString; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hsvaToHslString", function() { return hsvaToHslString; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hsvaToHslaString", function() { return hsvaToHslaString; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hsvaToRgba", function() { return hsvaToRgba; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hsvaToRgbString", function() { return hsvaToRgbString; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hsvaToRgbaString", function() { return hsvaToRgbaString; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hsvaStringToHsva", function() { return hsvaStringToHsva; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hsvStringToHsva", function() { return hsvStringToHsva; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rgbaStringToHsva", function() { return rgbaStringToHsva; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rgbStringToHsva", function() { return rgbStringToHsva; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rgbaToHex", function() { return rgbaToHex; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rgbaToHsva", function() { return rgbaToHsva; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rgbaToRgb", function() { return rgbaToRgb; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hslaToHsl", function() { return hslaToHsl; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hsvaToHsv", function() { return hsvaToHsv; }); -const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex)); -const hexToRgba = (hex) => { - if (hex[0] === '#') - hex = hex.substr(1); - if (hex.length < 6) { - return { - r: parseInt(hex[0] + hex[0], 16), - g: parseInt(hex[1] + hex[1], 16), - b: parseInt(hex[2] + hex[2], 16), - a: 1 - }; +/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_SwatchSquare_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./SwatchSquare.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/SwatchSquare.vue?vue&type=script&lang=js"); +/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_SwatchSquare_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"]); + +/***/ }), + +/***/ "./resources/js/components/SwatchSquare.vue?vue&type=template&id=d2826838": +/*!********************************************************************************!*\ + !*** ./resources/js/components/SwatchSquare.vue?vue&type=template&id=d2826838 ***! + \********************************************************************************/ +/*! exports provided: render, staticRenderFns */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_loaders_templateLoader_js_ref_6_node_modules_vue_loader_lib_index_js_vue_loader_options_SwatchSquare_vue_vue_type_template_id_d2826838__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!../../../node_modules/vue-loader/lib??vue-loader-options!./SwatchSquare.vue?vue&type=template&id=d2826838 */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/SwatchSquare.vue?vue&type=template&id=d2826838"); +/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_loaders_templateLoader_js_ref_6_node_modules_vue_loader_lib_index_js_vue_loader_options_SwatchSquare_vue_vue_type_template_id_d2826838__WEBPACK_IMPORTED_MODULE_0__["render"]; }); + +/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_loaders_templateLoader_js_ref_6_node_modules_vue_loader_lib_index_js_vue_loader_options_SwatchSquare_vue_vue_type_template_id_d2826838__WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; }); + + + +/***/ }), + +/***/ "./resources/js/utils/forms.js": +/*!*************************************!*\ + !*** ./resources/js/utils/forms.js ***! + \*************************************/ +/*! exports provided: jsonToFormData */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "jsonToFormData", function() { return jsonToFormData; }); +function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } +/** + * Conver JSON data into FormData + * @param {Any} data + * @return {FormData} + * @see: https://stackoverflow.com/a/49388446/622287 + */ +var jsonToFormData = function jsonToFormData(data) { + var formData = new FormData(); + function buildFormData(formData, data, parentKey) { + if (data && _typeof(data) === 'object' && !(data instanceof Date) && !(data instanceof File)) { + Object.keys(data).forEach(function (key) { + buildFormData(formData, data[key], parentKey ? "".concat(parentKey, "[").concat(key, "]") : key); + }); + } else { + var value = data == null ? '' : data; + formData.append(parentKey, value); } - return { - r: parseInt(hex.substr(0, 2), 16), - g: parseInt(hex.substr(2, 2), 16), - b: parseInt(hex.substr(4, 2), 16), - a: 1 - }; -}; -const hslaStringToHsva = (hslString) => { - const matcher = /hsla?\((\d+\.?\d*),\s*(\d+\.?\d*)%?,\s*(\d+\.?\d*)%?,?\s*(\d+\.?\d*)?\)/; - const match = matcher.exec(hslString); - if (!match) - return { h: 0, s: 0, v: 0, a: 1 }; - return hslaToHsva({ - h: Number(match[1]), - s: Number(match[2]), - l: Number(match[3]), - a: match[4] !== undefined ? Number(match[4]) : 1 - }); -}; -const hslStringToHsva = hslaStringToHsva; -const hslaToHsva = ({ h, s, l, a }) => { - s *= (l < 50 ? l : 100 - l) / 100; - return { - h: h, - s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0, - v: l + s, - a - }; -}; -const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva)); -const hsvaToHsla = ({ h, s, v, a }) => { - const hh = ((200 - s) * v) / 100; - return { - h: h, - s: hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0, - l: hh / 2, - a - }; -}; -const hsvaToHsvString = (hsv) => { - const { h, s, v } = hsv; - return `hsv(${h}, ${s}%, ${v}%)`; -}; -const hsvaToHsvaString = (hsva) => { - const { h, s, v, a } = hsva; - return `hsva(${h}, ${s}%, ${v}%, ${a})`; -}; -const hsvaToHslString = (hsva) => { - const { h, s, l } = hsvaToHsla(hsva); - return `hsl(${h}, ${s}%, ${l}%)`; -}; -const hsvaToHslaString = (hsva) => { - const { h, s, l, a } = hsvaToHsla(hsva); - return `hsla(${h}, ${s}%, ${l}%, ${a})`; -}; -const hsvaToRgba = ({ h, s, v, a }) => { - h = (h / 360) * 6; - s = s / 100; - v = v / 100; - const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6; - return { - r: Math.round([v, c, b, b, d, v][module] * 255), - g: Math.round([d, v, v, c, b, b][module] * 255), - b: Math.round([b, b, d, v, v, c][module] * 255), - a - }; -}; -const hsvaToRgbString = (hsva) => { - const { r, g, b } = hsvaToRgba(hsva); - return `rgb(${r}, ${g}, ${b})`; -}; -const hsvaToRgbaString = (hsva) => { - const { r, g, b, a } = hsvaToRgba(hsva); - return `rgba(${r}, ${g}, ${b}, ${a})`; -}; -const hsvaStringToHsva = (hsvString) => { - const matcher = /hsva?\((\d+\.?\d*),\s*(\d+\.?\d*)%?,\s*(\d+\.?\d*)%?,?\s*(\d+\.?\d*)?\)/; - const match = matcher.exec(hsvString); - if (!match) - return { h: 0, s: 0, v: 0, a: 1 }; - return { - h: Number(match[1]), - s: Number(match[2]), - v: Number(match[3]), - a: match[4] !== undefined ? Number(match[4]) : 1 - }; -}; -const hsvStringToHsva = hsvaStringToHsva; -const rgbaStringToHsva = (rgbaString) => { - const matcher = /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d+\.?\d*)?\)/; - const match = matcher.exec(rgbaString); - if (!match) - return { h: 0, s: 0, v: 0, a: 1 }; - return rgbaToHsva({ - r: Number(match[1]), - g: Number(match[2]), - b: Number(match[3]), - a: match[4] !== undefined ? Number(match[4]) : 1 - }); -}; -const rgbStringToHsva = rgbaStringToHsva; -const format = (number) => { - const hex = number.toString(16); - return hex.length < 2 ? '0' + hex : hex; -}; -const rgbaToHex = ({ r, g, b }) => { - return '#' + format(r) + format(g) + format(b); + } + buildFormData(formData, data); + return formData; }; -const rgbaToHsva = ({ r, g, b, a }) => { - const max = Math.max(r, g, b); - const delta = max - Math.min(r, g, b); - // prettier-ignore - const hh = delta - ? max === r - ? (g - b) / delta - : max === g - ? 2 + (b - r) / delta - : 4 + (r - g) / delta - : 0; - return { - h: Math.round(60 * (hh < 0 ? hh + 6 : hh)), - s: Math.round(max ? (delta / max) * 100 : 0), - v: Math.round((max / 255) * 100), - a - }; -}; -const rgbaToRgb = ({ r, g, b }) => ({ r, g, b }); -const hslaToHsl = ({ h, s, l }) => ({ h, s, l }); -const hsvaToHsv = ({ h, s, v }) => ({ h, s, v }); -//# sourceMappingURL=convert.js.map /***/ }), -/***/ "./node_modules/vanilla-colorful/lib/utils/dom.js": -/*!********************************************************!*\ - !*** ./node_modules/vanilla-colorful/lib/utils/dom.js ***! - \********************************************************/ -/*! exports provided: createTemplate, createRoot */ +/***/ "./resources/js/utils/object.js": +/*!**************************************!*\ + !*** ./resources/js/utils/object.js ***! + \**************************************/ +/*! exports provided: clone */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createTemplate", function() { return createTemplate; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createRoot", function() { return createRoot; }); -const createTemplate = (tpl) => { - const template = document.createElement('template'); - template.innerHTML = tpl; - return template; -}; -const createRoot = (node, tpl) => { - const root = node.shadowRoot || node.attachShadow({ mode: 'open' }); - root.appendChild(tpl.content.cloneNode(true)); - return root; +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "clone", function() { return clone; }); +var clone = function clone(obj) { + var backup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + return JSON.parse(JSON.stringify(obj || backup)); }; -//# sourceMappingURL=dom.js.map + +/***/ }), + +/***/ "./resources/js/utils/url.js": +/*!***********************************!*\ + !*** ./resources/js/utils/url.js ***! + \***********************************/ +/*! exports provided: makeQuery, getQuery */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "makeQuery", function() { return makeQuery; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getQuery", function() { return getQuery; }); +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } +function _nonIterableRest() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } +function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } +function makeQuery() { + var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var query = Object.keys(params).reduce(function (arr, key) { + var val = params[key]; + arr.push("".concat(key, "=").concat(val)); + return arr; + }, []); + return query.length ? "?".concat(query.join('&')) : ''; +} +function getQuery() { + var _window$location$href = window.location.href.split('?'), + _window$location$href2 = _slicedToArray(_window$location$href, 2), + path = _window$location$href2[0], + query = _window$location$href2[1]; + return query.split('&').reduce(function (obj, keyVal) { + var _keyVal$split = keyVal.split('='), + _keyVal$split2 = _slicedToArray(_keyVal$split, 2), + key = _keyVal$split2[0], + val = _keyVal$split2[1]; + obj[key] = val; + return obj; + }, {}); +} /***/ }) diff --git a/public/css/tailwind.css b/public/css/tailwind.css index 73c8d3c..b919ac8 100644 --- a/public/css/tailwind.css +++ b/public/css/tailwind.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e8eaf2}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#a0aec0}input::placeholder,textarea::placeholder{color:#a0aec0}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button:focus,input:focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 3px rgba(66,153,225,.5)}.SwatchSquare>button span{display:none;transition-property:all;transition-duration:.3s}.SwatchSquare>button:focus,.SwatchSquare>button:hover{z-index:20}.SwatchSquare>button:focus span,.SwatchSquare>button:hover span{display:inline-block}.SwatchSquare.is-closest>button{position:relative}.SwatchSquare.is-closest>button:after{position:absolute;right:0;left:0;top:100%;height:.28647450843754163rem;margin-top:.28647450843754163rem;border-radius:9999px;content:"";background:currentColor}.PaletteRow.is-locked .SwatchSquare.is-closest>button:after{margin-top:0;height:.5729490168750833rem;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.PaletteRow.is-locked .SwatchSquare.is-closest:first-child>button{border-bottom-left-radius:0}.PaletteRow.is-locked .SwatchSquare.is-closest:last-child>button{border-bottom-right-radius:0}.rich-text{--text-opacity:1;color:#21263a;color:rgba(33,38,58,var(--text-opacity))}.rich-text>*{margin-top:2.427050983125rem}.rich-text>:first-child{margin-top:0}.rich-text a{transition-property:all;transition-duration:.2s;border-bottom-width:1px;--border-opacity:1;border-color:#b4bbd5;border-color:rgba(180,187,213,var(--border-opacity));--text-opacity:1;color:#387da2;color:rgba(56,125,162,var(--text-opacity))}.rich-text a:hover{opacity:.5}.rich-text h1,.rich-text h2,.rich-text h3,.rich-text h4,.rich-text h5,.rich-text h6{font-weight:700}.rich-text h1{font-size:1.875rem}.rich-text h1,.rich-text h2{line-height:2.427050983125rem}.rich-text h2{font-size:1.5rem}.rich-text h3{font-size:1.25rem;line-height:2.427050983125rem}.rich-text ol,.rich-text ul{margin-left:2.427050983125rem}.rich-text ul{list-style-type:disc}.rich-text ol{list-style-type:decimal}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}html.local body:after{position:fixed;z-index:2147483647;bottom:0;left:0;padding:.33rem .5rem;border-radius:2px;font-size:.75rem;line-height:1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;background-color:#000;color:#fff;content:"default (0px)"}html.local body:hover:after{display:none}@media (min-width:640px){html.local body:after{content:"sm (640px)"}}@media (min-width:768px){html.local body:after{content:"md (768px)"}}@media (min-width:1024px){html.local body:after{content:"lg (1024px)"}}@media (min-width:1280px){html.local body:after{content:"xl (1280px)"}}body .space-x-4>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(0.57295rem*var(--space-x-reverse));margin-left:calc(0.57295rem*(1 - var(--space-x-reverse)))}body .space-x-5>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(0.92705rem*var(--space-x-reverse));margin-left:calc(0.92705rem*(1 - var(--space-x-reverse)))}body .divide-x>:not(template)~:not(template){--divide-x-reverse:0;border-right-width:calc(1px*var(--divide-x-reverse));border-left-width:calc(1px*(1 - var(--divide-x-reverse)))}body .divide-gray-600>:not(template)~:not(template){--divide-opacity:1;border-color:#8f9ac0;border-color:rgba(143,154,192,var(--divide-opacity))}body .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}body .bg-transparent{background-color:transparent}body .bg-black{--bg-opacity:1;background-color:#000;background-color:rgba(0,0,0,var(--bg-opacity))}body .bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}body .bg-gray-200{--bg-opacity:1;background-color:#f5f6f9;background-color:rgba(245,246,249,var(--bg-opacity))}body .bg-gray-300{--bg-opacity:1;background-color:#e8eaf2;background-color:rgba(232,234,242,var(--bg-opacity))}body .bg-gray-400{--bg-opacity:1;background-color:#d2d6e5;background-color:rgba(210,214,229,var(--bg-opacity))}body .bg-gray-500{--bg-opacity:1;background-color:#b4bbd5;background-color:rgba(180,187,213,var(--bg-opacity))}body .bg-gray-800{--bg-opacity:1;background-color:#455079;background-color:rgba(69,80,121,var(--bg-opacity))}body .bg-red-500{--bg-opacity:1;background-color:#eaaeab;background-color:rgba(234,174,171,var(--bg-opacity))}body .bg-blue-200{--bg-opacity:1;background-color:#f1f7fa;background-color:rgba(241,247,250,var(--bg-opacity))}body .bg-blue-600{--bg-opacity:1;background-color:#5fa3c7;background-color:rgba(95,163,199,var(--bg-opacity))}body .bg-grayscale-300{--bg-opacity:1;background-color:#eaeaea;background-color:rgba(234,234,234,var(--bg-opacity))}body .bg-grayscale-900{--bg-opacity:1;background-color:#272727;background-color:rgba(39,39,39,var(--bg-opacity))}body .bg-gold-500{--bg-opacity:1;background-color:#eab436;background-color:rgba(234,180,54,var(--bg-opacity))}body .hover\:bg-white:hover{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}body .hover\:bg-gray-400:hover{--bg-opacity:1;background-color:#d2d6e5;background-color:rgba(210,214,229,var(--bg-opacity))}body .hover\:bg-gray-800:hover{--bg-opacity:1;background-color:#455079;background-color:rgba(69,80,121,var(--bg-opacity))}body .hover\:bg-blue-700:hover{--bg-opacity:1;background-color:#387da2;background-color:rgba(56,125,162,var(--bg-opacity))}body .hover\:bg-blue-800:hover{--bg-opacity:1;background-color:#26556e;background-color:rgba(38,85,110,var(--bg-opacity))}body .bg-opacity-75,body .hover\:bg-opacity-75:hover{--bg-opacity:0.75}body .border-white{--border-opacity:1;border-color:#fff;border-color:rgba(255,255,255,var(--border-opacity))}body .border-gray-400{--border-opacity:1;border-color:#d2d6e5;border-color:rgba(210,214,229,var(--border-opacity))}body .border-gray-500{--border-opacity:1;border-color:#b4bbd5;border-color:rgba(180,187,213,var(--border-opacity))}body .border-gray-600{--border-opacity:1;border-color:#8f9ac0;border-color:rgba(143,154,192,var(--border-opacity))}body .border-red-500{--border-opacity:1;border-color:#eaaeab;border-color:rgba(234,174,171,var(--border-opacity))}body .border-blue-500{--border-opacity:1;border-color:#95c2da;border-color:rgba(149,194,218,var(--border-opacity))}body .border-blue-600{--border-opacity:1;border-color:#5fa3c7;border-color:rgba(95,163,199,var(--border-opacity))}body .border-gold-300{--border-opacity:1;border-color:#f9e9c4;border-color:rgba(249,233,196,var(--border-opacity))}body .hover\:border-gray-600:hover{--border-opacity:1;border-color:#8f9ac0;border-color:rgba(143,154,192,var(--border-opacity))}body .hover\:border-gray-800:hover{--border-opacity:1;border-color:#455079;border-color:rgba(69,80,121,var(--border-opacity))}body .hover\:border-blue-800:hover{--border-opacity:1;border-color:#26556e;border-color:rgba(38,85,110,var(--border-opacity))}body .focus\:border-gray-600:focus{--border-opacity:1;border-color:#8f9ac0;border-color:rgba(143,154,192,var(--border-opacity))}body .rounded{border-radius:.25rem}body .rounded-lg{border-radius:.5rem}body .rounded-full{border-radius:9999px}body .rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}body .rounded-b-lg{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}body .rounded-l-lg{border-bottom-left-radius:.5rem}body .rounded-l-lg,body .rounded-tl-lg{border-top-left-radius:.5rem}body .border-dashed{border-style:dashed}body .border-none{border-style:none}body .border-1{border-width:.13525491562416744rem}body .border{border-width:1px}body .border-t{border-top-width:1px}body .border-r{border-right-width:1px}body .border-b{border-bottom-width:1px}body .border-l{border-left-width:1px}body .box-content{box-sizing:content-box}body .cursor-pointer{cursor:pointer}body .cursor-not-allowed{cursor:not-allowed}body .block{display:block}body .inline-block{display:inline-block}body .inline{display:inline}body .flex{display:flex}body .table{display:table}body .hidden{display:none}body .flex-col{flex-direction:column}body .items-center{align-items:center}body .justify-center{justify-content:center}body .justify-between{justify-content:space-between}body .flex-grow{flex-grow:1}body .flex-shrink{flex-shrink:1}body .float-right{float:right}body .font-mono{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}body .font-bold{font-weight:700}body .font-black{font-weight:900}body .h-7{height:2.427050983125rem}body .h-8{height:3.9270509831253526rem}body .h-9{height:6.354101966250923rem}body .h-half-7{height:1.2135254915625rem}body .h-half-8{height:1.9635254915626763rem}body .h-double-4{height:1.1458980337501665rem}body .text-xs{font-size:.75rem}body .text-sm{font-size:.875rem}body .text-lg{font-size:1.125rem}body .text-xl{font-size:1.25rem}body .text-3xl{font-size:1.875rem}body .text-4xl{font-size:2.25rem}body .leading-5{line-height:.9270509831247821rem}body .leading-6{line-height:1.5rem}body .leading-7{line-height:2.427050983125rem}body .leading-8{line-height:3.9270509831253526rem}body .mx-2{margin-left:.21884705062541632rem;margin-right:.21884705062541632rem}body .my-3{margin-top:.35410196624961554rem;margin-bottom:.35410196624961554rem}body .mx-4{margin-left:.5729490168750833rem;margin-right:.5729490168750833rem}body .mx-6{margin-left:1.5rem;margin-right:1.5rem}body .my-8{margin-top:3.9270509831253526rem;margin-bottom:3.9270509831253526rem}body .mx-auto{margin-left:auto;margin-right:auto}body .my-half-6{margin-top:.75rem;margin-bottom:.75rem}body .-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}body .mt-0{margin-top:0}body .mt-2{margin-top:.21884705062541632rem}body .mt-3{margin-top:.35410196624961554rem}body .mr-3{margin-right:.35410196624961554rem}body .mb-3{margin-bottom:.35410196624961554rem}body .ml-3{margin-left:.35410196624961554rem}body .mt-4{margin-top:.5729490168750833rem}body .mr-4{margin-right:.5729490168750833rem}body .mt-5{margin-top:.9270509831247821rem}body .mr-5{margin-right:.9270509831247821rem}body .mt-6{margin-top:1.5rem}body .mb-6{margin-bottom:1.5rem}body .mt-7{margin-top:2.427050983125rem}body .mt-8{margin-top:3.9270509831253526rem}body .mr-8{margin-right:3.9270509831253526rem}body .mb-8{margin-bottom:3.9270509831253526rem}body .mt-9{margin-top:6.354101966250923rem}body .mt-10{margin-top:10.281152949377198rem}body .-mt-3{margin-top:-.3541rem}body .-mt-px{margin-top:-1px}body .max-w-2xl{max-width:42rem}body .max-w-full{max-width:100%}body .min-h-8{min-height:3.9270509831253526rem}body .min-w-9{min-width:6.354101966250923rem}body .opacity-0{opacity:0}body .opacity-25{opacity:.25}body .opacity-50{opacity:.5}body .opacity-75{opacity:.75}body .opacity-100{opacity:1}body .hover\:opacity-0:hover{opacity:0}body .hover\:opacity-50:hover{opacity:.5}body .hover\:opacity-75:hover{opacity:.75}body .hover\:opacity-100:hover{opacity:1}body .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}body .overflow-auto{overflow:auto}body .p-0{padding:0}body .p-4{padding:.5729490168750833rem}body .p-5{padding:.9270509831247821rem}body .p-6{padding:1.5rem}body .p-half-4{padding:.28647450843754163rem}body .px-0{padding-left:0;padding-right:0}body .px-2{padding-left:.21884705062541632rem;padding-right:.21884705062541632rem}body .py-3{padding-top:.35410196624961554rem;padding-bottom:.35410196624961554rem}body .px-3{padding-left:.35410196624961554rem;padding-right:.35410196624961554rem}body .py-4{padding-top:.5729490168750833rem;padding-bottom:.5729490168750833rem}body .px-4{padding-left:.5729490168750833rem;padding-right:.5729490168750833rem}body .py-5{padding-top:.9270509831247821rem;padding-bottom:.9270509831247821rem}body .px-5{padding-left:.9270509831247821rem;padding-right:.9270509831247821rem}body .px-6{padding-left:1.5rem;padding-right:1.5rem}body .py-7{padding-top:2.427050983125rem;padding-bottom:2.427050983125rem}body .px-7{padding-left:2.427050983125rem;padding-right:2.427050983125rem}body .py-half-2{padding-top:.10942352531270816rem;padding-bottom:.10942352531270816rem}body .py-half-4{padding-top:.28647450843754163rem;padding-bottom:.28647450843754163rem}body .py-half-7{padding-top:1.2135254915625rem;padding-bottom:1.2135254915625rem}body .pl-4{padding-left:.5729490168750833rem}body .pr-5{padding-right:.9270509831247821rem}body .pb-8{padding-bottom:3.9270509831253526rem}body .pointer-events-none{pointer-events:none}body .absolute{position:absolute}body .relative{position:relative}body .inset-0{right:0;left:0}body .inset-0,body .inset-y-0{top:0;bottom:0}body .inset-x-0{right:0;left:0}body .top-0{top:0}body .right-0{right:0}body .left-0{left:0}body .top-1\/2{top:50%}body .left-1\/2{left:50%}body .right-full{right:100%}body .bottom-full{bottom:100%}body .shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}body .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}body .shadow-inner{box-shadow:inset 0 2px 4px 0 rgba(0,0,0,.06)}body .shadow-outline{box-shadow:0 0 0 3px rgba(66,153,225,.5)}body .hover\:shadow:hover{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}body .hover\:shadow-2xl:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}body .focus\:shadow-none:focus{box-shadow:none}body .text-left{text-align:left}body .text-center{text-align:center}body .text-right{text-align:right}body .text-black{--text-opacity:1;color:#000;color:rgba(0,0,0,var(--text-opacity))}body .text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}body .text-gray-100{--text-opacity:1;color:#fdfdfe;color:rgba(253,253,254,var(--text-opacity))}body .text-gray-200{--text-opacity:1;color:#f5f6f9;color:rgba(245,246,249,var(--text-opacity))}body .text-gray-500{--text-opacity:1;color:#b4bbd5;color:rgba(180,187,213,var(--text-opacity))}body .text-gray-600{--text-opacity:1;color:#8f9ac0;color:rgba(143,154,192,var(--text-opacity))}body .text-gray-700{--text-opacity:1;color:#6775a9;color:rgba(103,117,169,var(--text-opacity))}body .text-gray-800{--text-opacity:1;color:#455079;color:rgba(69,80,121,var(--text-opacity))}body .text-gray-900{--text-opacity:1;color:#21263a;color:rgba(33,38,58,var(--text-opacity))}body .text-red-600{--text-opacity:1;color:#de7e79;color:rgba(222,126,121,var(--text-opacity))}body .text-red-800{--text-opacity:1;color:#932a24;color:rgba(147,42,36,var(--text-opacity))}body .text-blue-600{--text-opacity:1;color:#5fa3c7;color:rgba(95,163,199,var(--text-opacity))}body .text-blue-700{--text-opacity:1;color:#387da2;color:rgba(56,125,162,var(--text-opacity))}body .text-grayscale-600{--text-opacity:1;color:#9b9b9b;color:rgba(155,155,155,var(--text-opacity))}body .text-gold-600{--text-opacity:1;color:#c79215;color:rgba(199,146,21,var(--text-opacity))}body .hover\:text-white:hover{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}body .hover\:text-gray-700:hover{--text-opacity:1;color:#6775a9;color:rgba(103,117,169,var(--text-opacity))}body .hover\:text-gray-800:hover{--text-opacity:1;color:#455079;color:rgba(69,80,121,var(--text-opacity))}body .hover\:text-red-700:hover{--text-opacity:1;color:#ce4038;color:rgba(206,64,56,var(--text-opacity))}body .hover\:text-blue-500:hover{--text-opacity:1;color:#95c2da;color:rgba(149,194,218,var(--text-opacity))}body .hover\:text-grayscale-400:hover{--text-opacity:1;color:#d6d6d6;color:rgba(214,214,214,var(--text-opacity))}body .hover\:text-gold-500:hover{--text-opacity:1;color:#eab436;color:rgba(234,180,54,var(--text-opacity))}body .focus\:text-blue-900:focus{--text-opacity:1;color:#132a36;color:rgba(19,42,54,var(--text-opacity))}body .text-opacity-50{--text-opacity:0.5}body .italic{font-style:italic}body .uppercase{text-transform:uppercase}body .underline{text-decoration:underline}body .tracking-tight{letter-spacing:-.025em}body .tracking-wide{letter-spacing:.025em}body .align-middle{vertical-align:middle}body .whitespace-no-wrap{white-space:nowrap}body .w-8{width:3.9270509831253526rem}body .w-9{width:6.354101966250923rem}body .w-10{width:10.281152949377198rem}body .w-half-7{width:1.2135254915625rem}body .w-half-8{width:1.9635254915626763rem}body .w-double-10{width:20.562305898754396rem}body .w-1\/2{width:50%}body .w-full{width:100%}body .z-10{z-index:10}body .z-20{z-index:20}body .z-30{z-index:30}body .z-40{z-index:40}body .transform{--transform-translate-x:0;--transform-translate-y:0;--transform-rotate:0;--transform-skew-x:0;--transform-skew-y:0;--transform-scale-x:1;--transform-scale-y:1;transform:translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))}body .rotate-90{--transform-rotate:90deg}body .rotate-180{--transform-rotate:180deg}body .-translate-x-1\/2{--transform-translate-x:-50%}body .-translate-y-1\/2{--transform-translate-y:-50%}body .translate-y-full{--transform-translate-y:100%}body .transition-all{transition-property:all}body .transition-colors{transition-property:background-color,border-color,color,fill,stroke}body .transition-opacity{transition-property:opacity}body .transition-shadow{transition-property:box-shadow}body .duration-150{transition-duration:.15s}body .duration-200{transition-duration:.2s}body .duration-300{transition-duration:.3s}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}@media (min-width:640px){.sm\:container{width:100%}}@media (min-width:640px) and (min-width:640px){.sm\:container{max-width:640px}}@media (min-width:640px) and (min-width:768px){.sm\:container{max-width:768px}}@media (min-width:640px) and (min-width:1024px){.sm\:container{max-width:1024px}}@media (min-width:640px) and (min-width:1280px){.sm\:container{max-width:1280px}}@media (min-width:640px){body .sm\:rounded-full{border-radius:9999px}body .sm\:border-b-1{border-bottom-width:.13525491562416744rem}body .sm\:flex{display:flex}body .sm\:h-half-9{height:3.1770509831254614rem}body .sm\:text-2xl{font-size:1.5rem}body .sm\:text-4xl{font-size:2.25rem}body .sm\:leading-7{line-height:2.427050983125rem}body .sm\:mx-0{margin-left:0;margin-right:0}body .sm\:mt-0{margin-top:0}body .sm\:mt-4{margin-top:.5729490168750833rem}}@media (min-width:768px){.md\:container{width:100%}}@media (min-width:768px) and (min-width:640px){.md\:container{max-width:640px}}@media (min-width:768px) and (min-width:768px){.md\:container{max-width:768px}}@media (min-width:768px) and (min-width:1024px){.md\:container{max-width:1024px}}@media (min-width:768px) and (min-width:1280px){.md\:container{max-width:1280px}}@media (min-width:768px){body .md\:space-x-6>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(1.5rem*var(--space-x-reverse));margin-left:calc(1.5rem*(1 - var(--space-x-reverse)))}body .md\:space-x-7>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(2.42705rem*var(--space-x-reverse));margin-left:calc(2.42705rem*(1 - var(--space-x-reverse)))}body .md\:inline-block{display:inline-block}body .md\:flex{display:flex}body .md\:mt-0{margin-top:0}body .md\:mr-8{margin-right:3.9270509831253526rem}body .md\:max-w-grp-5{max-width:61.80339887498547%}body .md\:min-w-10{min-width:10.281152949377198rem}body .md\:text-right{text-align:right}}@media (min-width:1024px){.lg\:container{width:100%}}@media (min-width:1024px) and (min-width:640px){.lg\:container{max-width:640px}}@media (min-width:1024px) and (min-width:768px){.lg\:container{max-width:768px}}@media (min-width:1024px) and (min-width:1024px){.lg\:container{max-width:1024px}}@media (min-width:1024px) and (min-width:1280px){.lg\:container{max-width:1280px}}@media (min-width:1024px){body .lg\:min-w-11{min-width:16.635254915629613rem}}@media (min-width:1280px){.xl\:container{width:100%}}@media (min-width:1280px) and (min-width:640px){.xl\:container{max-width:640px}}@media (min-width:1280px) and (min-width:768px){.xl\:container{max-width:768px}}@media (min-width:1280px) and (min-width:1024px){.xl\:container{max-width:1024px}}@media (min-width:1280px) and (min-width:1280px){.xl\:container{max-width:1280px}} \ No newline at end of file +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e8eaf2}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#a0aec0}input::placeholder,textarea::placeholder{color:#a0aec0}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button:focus,input:focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 3px rgba(66,153,225,.5)}.SwatchSquare>button span{display:none;transition-property:all;transition-duration:.3s}.SwatchSquare>button:focus,.SwatchSquare>button:hover{z-index:20}.SwatchSquare>button:focus span,.SwatchSquare>button:hover span{display:inline-block}.SwatchSquare.is-closest>button{position:relative}.SwatchSquare.is-closest>button:after{position:absolute;right:0;left:0;top:100%;height:.28647450843754163rem;margin-top:.28647450843754163rem;border-radius:9999px;content:"";background:currentColor}.PaletteRow.is-locked .SwatchSquare.is-closest>button:after{margin-top:0;height:.5729490168750833rem;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.PaletteRow.is-locked .SwatchSquare.is-closest:first-child>button{border-bottom-left-radius:0}.PaletteRow.is-locked .SwatchSquare.is-closest:last-child>button{border-bottom-right-radius:0}.rich-text{--text-opacity:1;color:#21263a;color:rgba(33,38,58,var(--text-opacity))}.rich-text>*{margin-top:2.427050983125rem}.rich-text>:first-child{margin-top:0}.rich-text a{transition-property:all;transition-duration:.2s;border-bottom-width:1px;--border-opacity:1;border-color:#b4bbd5;border-color:rgba(180,187,213,var(--border-opacity));--text-opacity:1;color:#387da2;color:rgba(56,125,162,var(--text-opacity))}.rich-text a:hover{opacity:.5}.rich-text h1,.rich-text h2,.rich-text h3,.rich-text h4,.rich-text h5,.rich-text h6{font-weight:700}.rich-text h1{font-size:1.875rem}.rich-text h1,.rich-text h2{line-height:2.427050983125rem}.rich-text h2{font-size:1.5rem}.rich-text h3{font-size:1.25rem;line-height:2.427050983125rem}.rich-text ol,.rich-text ul{margin-left:2.427050983125rem}.rich-text ul{list-style-type:disc}.rich-text ol{list-style-type:decimal}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}html.local body:after{position:fixed;z-index:2147483647;bottom:0;left:0;padding:.33rem .5rem;border-radius:2px;font-size:.75rem;line-height:1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;background-color:#000;color:#fff;content:"default (0px)"}html.local body:hover:after{display:none}@media (min-width:640px){html.local body:after{content:"sm (640px)"}}@media (min-width:768px){html.local body:after{content:"md (768px)"}}@media (min-width:1024px){html.local body:after{content:"lg (1024px)"}}@media (min-width:1280px){html.local body:after{content:"xl (1280px)"}}body .space-y-1>:not(template)~:not(template){--space-y-reverse:0;margin-top:calc(0.13525rem*(1 - var(--space-y-reverse)));margin-bottom:calc(0.13525rem*var(--space-y-reverse))}body .space-x-4>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(0.57295rem*var(--space-x-reverse));margin-left:calc(0.57295rem*(1 - var(--space-x-reverse)))}body .space-x-5>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(0.92705rem*var(--space-x-reverse));margin-left:calc(0.92705rem*(1 - var(--space-x-reverse)))}body .divide-x>:not(template)~:not(template){--divide-x-reverse:0;border-right-width:calc(1px*var(--divide-x-reverse));border-left-width:calc(1px*(1 - var(--divide-x-reverse)))}body .divide-gray-600>:not(template)~:not(template){--divide-opacity:1;border-color:#8f9ac0;border-color:rgba(143,154,192,var(--divide-opacity))}body .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}body .bg-transparent{background-color:transparent}body .bg-black{--bg-opacity:1;background-color:#000;background-color:rgba(0,0,0,var(--bg-opacity))}body .bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}body .bg-gray-200{--bg-opacity:1;background-color:#f5f6f9;background-color:rgba(245,246,249,var(--bg-opacity))}body .bg-gray-300{--bg-opacity:1;background-color:#e8eaf2;background-color:rgba(232,234,242,var(--bg-opacity))}body .bg-gray-400{--bg-opacity:1;background-color:#d2d6e5;background-color:rgba(210,214,229,var(--bg-opacity))}body .bg-gray-500{--bg-opacity:1;background-color:#b4bbd5;background-color:rgba(180,187,213,var(--bg-opacity))}body .bg-gray-800{--bg-opacity:1;background-color:#455079;background-color:rgba(69,80,121,var(--bg-opacity))}body .bg-red-500{--bg-opacity:1;background-color:#eaaeab;background-color:rgba(234,174,171,var(--bg-opacity))}body .bg-blue-200{--bg-opacity:1;background-color:#f1f7fa;background-color:rgba(241,247,250,var(--bg-opacity))}body .bg-blue-600{--bg-opacity:1;background-color:#5fa3c7;background-color:rgba(95,163,199,var(--bg-opacity))}body .bg-grayscale-300{--bg-opacity:1;background-color:#eaeaea;background-color:rgba(234,234,234,var(--bg-opacity))}body .bg-grayscale-900{--bg-opacity:1;background-color:#272727;background-color:rgba(39,39,39,var(--bg-opacity))}body .bg-gold-500{--bg-opacity:1;background-color:#eab436;background-color:rgba(234,180,54,var(--bg-opacity))}body .hover\:bg-white:hover{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}body .hover\:bg-gray-400:hover{--bg-opacity:1;background-color:#d2d6e5;background-color:rgba(210,214,229,var(--bg-opacity))}body .hover\:bg-gray-800:hover{--bg-opacity:1;background-color:#455079;background-color:rgba(69,80,121,var(--bg-opacity))}body .hover\:bg-blue-700:hover{--bg-opacity:1;background-color:#387da2;background-color:rgba(56,125,162,var(--bg-opacity))}body .hover\:bg-blue-800:hover{--bg-opacity:1;background-color:#26556e;background-color:rgba(38,85,110,var(--bg-opacity))}body .bg-opacity-75,body .hover\:bg-opacity-75:hover{--bg-opacity:0.75}body .border-white{--border-opacity:1;border-color:#fff;border-color:rgba(255,255,255,var(--border-opacity))}body .border-gray-400{--border-opacity:1;border-color:#d2d6e5;border-color:rgba(210,214,229,var(--border-opacity))}body .border-gray-500{--border-opacity:1;border-color:#b4bbd5;border-color:rgba(180,187,213,var(--border-opacity))}body .border-gray-600{--border-opacity:1;border-color:#8f9ac0;border-color:rgba(143,154,192,var(--border-opacity))}body .border-red-500{--border-opacity:1;border-color:#eaaeab;border-color:rgba(234,174,171,var(--border-opacity))}body .border-blue-500{--border-opacity:1;border-color:#95c2da;border-color:rgba(149,194,218,var(--border-opacity))}body .border-blue-600{--border-opacity:1;border-color:#5fa3c7;border-color:rgba(95,163,199,var(--border-opacity))}body .border-gold-300{--border-opacity:1;border-color:#f9e9c4;border-color:rgba(249,233,196,var(--border-opacity))}body .hover\:border-gray-600:hover{--border-opacity:1;border-color:#8f9ac0;border-color:rgba(143,154,192,var(--border-opacity))}body .hover\:border-gray-800:hover{--border-opacity:1;border-color:#455079;border-color:rgba(69,80,121,var(--border-opacity))}body .hover\:border-blue-800:hover{--border-opacity:1;border-color:#26556e;border-color:rgba(38,85,110,var(--border-opacity))}body .focus\:border-gray-600:focus{--border-opacity:1;border-color:#8f9ac0;border-color:rgba(143,154,192,var(--border-opacity))}body .rounded{border-radius:.25rem}body .rounded-lg{border-radius:.5rem}body .rounded-full{border-radius:9999px}body .rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}body .rounded-b-lg{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}body .rounded-l-lg{border-bottom-left-radius:.5rem}body .rounded-l-lg,body .rounded-tl-lg{border-top-left-radius:.5rem}body .border-dashed{border-style:dashed}body .border-none{border-style:none}body .border-1{border-width:.13525491562416744rem}body .border{border-width:1px}body .border-t{border-top-width:1px}body .border-r{border-right-width:1px}body .border-b{border-bottom-width:1px}body .border-l{border-left-width:1px}body .box-content{box-sizing:content-box}body .cursor-pointer{cursor:pointer}body .cursor-not-allowed{cursor:not-allowed}body .block{display:block}body .inline-block{display:inline-block}body .inline{display:inline}body .flex{display:flex}body .table{display:table}body .hidden{display:none}body .flex-col{flex-direction:column}body .items-center{align-items:center}body .justify-center{justify-content:center}body .justify-between{justify-content:space-between}body .flex-grow{flex-grow:1}body .flex-shrink{flex-shrink:1}body .float-right{float:right}body .font-mono{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}body .font-bold{font-weight:700}body .font-black{font-weight:900}body .h-7{height:2.427050983125rem}body .h-8{height:3.9270509831253526rem}body .h-9{height:6.354101966250923rem}body .h-half-7{height:1.2135254915625rem}body .h-half-8{height:1.9635254915626763rem}body .h-double-4{height:1.1458980337501665rem}body .text-xs{font-size:.75rem}body .text-sm{font-size:.875rem}body .text-lg{font-size:1.125rem}body .text-xl{font-size:1.25rem}body .text-3xl{font-size:1.875rem}body .text-4xl{font-size:2.25rem}body .leading-5{line-height:.9270509831247821rem}body .leading-6{line-height:1.5rem}body .leading-7{line-height:2.427050983125rem}body .leading-8{line-height:3.9270509831253526rem}body .leading-relaxed{line-height:1.625}body .list-inside{list-style-position:inside}body .list-decimal{list-style-type:decimal}body .mx-2{margin-left:.21884705062541632rem;margin-right:.21884705062541632rem}body .my-3{margin-top:.35410196624961554rem;margin-bottom:.35410196624961554rem}body .mx-4{margin-left:.5729490168750833rem;margin-right:.5729490168750833rem}body .mx-6{margin-left:1.5rem;margin-right:1.5rem}body .my-8{margin-top:3.9270509831253526rem;margin-bottom:3.9270509831253526rem}body .mx-auto{margin-left:auto;margin-right:auto}body .my-half-6{margin-top:.75rem;margin-bottom:.75rem}body .-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}body .mt-0{margin-top:0}body .mt-2{margin-top:.21884705062541632rem}body .mt-3{margin-top:.35410196624961554rem}body .mr-3{margin-right:.35410196624961554rem}body .mb-3{margin-bottom:.35410196624961554rem}body .ml-3{margin-left:.35410196624961554rem}body .mt-4{margin-top:.5729490168750833rem}body .mr-4{margin-right:.5729490168750833rem}body .mt-5{margin-top:.9270509831247821rem}body .mr-5{margin-right:.9270509831247821rem}body .mt-6{margin-top:1.5rem}body .mb-6{margin-bottom:1.5rem}body .mt-7{margin-top:2.427050983125rem}body .mt-8{margin-top:3.9270509831253526rem}body .mr-8{margin-right:3.9270509831253526rem}body .mb-8{margin-bottom:3.9270509831253526rem}body .mt-9{margin-top:6.354101966250923rem}body .mt-10{margin-top:10.281152949377198rem}body .-mt-3{margin-top:-.3541rem}body .-mt-px{margin-top:-1px}body .max-w-2xl{max-width:42rem}body .max-w-full{max-width:100%}body .min-h-8{min-height:3.9270509831253526rem}body .min-w-9{min-width:6.354101966250923rem}body .opacity-0{opacity:0}body .opacity-25{opacity:.25}body .opacity-50{opacity:.5}body .opacity-75{opacity:.75}body .opacity-100{opacity:1}body .hover\:opacity-0:hover{opacity:0}body .hover\:opacity-50:hover{opacity:.5}body .hover\:opacity-75:hover{opacity:.75}body .hover\:opacity-100:hover{opacity:1}body .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}body .overflow-auto{overflow:auto}body .p-0{padding:0}body .p-4{padding:.5729490168750833rem}body .p-5{padding:.9270509831247821rem}body .p-6{padding:1.5rem}body .p-half-4{padding:.28647450843754163rem}body .px-0{padding-left:0;padding-right:0}body .px-1{padding-left:.13525491562416744rem;padding-right:.13525491562416744rem}body .px-2{padding-left:.21884705062541632rem;padding-right:.21884705062541632rem}body .py-3{padding-top:.35410196624961554rem;padding-bottom:.35410196624961554rem}body .px-3{padding-left:.35410196624961554rem;padding-right:.35410196624961554rem}body .py-4{padding-top:.5729490168750833rem;padding-bottom:.5729490168750833rem}body .px-4{padding-left:.5729490168750833rem;padding-right:.5729490168750833rem}body .py-5{padding-top:.9270509831247821rem;padding-bottom:.9270509831247821rem}body .px-5{padding-left:.9270509831247821rem;padding-right:.9270509831247821rem}body .px-6{padding-left:1.5rem;padding-right:1.5rem}body .py-7{padding-top:2.427050983125rem;padding-bottom:2.427050983125rem}body .px-7{padding-left:2.427050983125rem;padding-right:2.427050983125rem}body .py-half-2{padding-top:.10942352531270816rem;padding-bottom:.10942352531270816rem}body .py-half-4{padding-top:.28647450843754163rem;padding-bottom:.28647450843754163rem}body .py-half-7{padding-top:1.2135254915625rem;padding-bottom:1.2135254915625rem}body .pl-4{padding-left:.5729490168750833rem}body .pr-5{padding-right:.9270509831247821rem}body .pb-8{padding-bottom:3.9270509831253526rem}body .pointer-events-none{pointer-events:none}body .absolute{position:absolute}body .relative{position:relative}body .inset-0{right:0;left:0}body .inset-0,body .inset-y-0{top:0;bottom:0}body .inset-x-0{right:0;left:0}body .top-0{top:0}body .right-0{right:0}body .left-0{left:0}body .top-1\/2{top:50%}body .left-1\/2{left:50%}body .right-full{right:100%}body .bottom-full{bottom:100%}body .shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}body .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}body .shadow-inner{box-shadow:inset 0 2px 4px 0 rgba(0,0,0,.06)}body .shadow-outline{box-shadow:0 0 0 3px rgba(66,153,225,.5)}body .hover\:shadow:hover{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}body .hover\:shadow-2xl:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}body .focus\:shadow-none:focus{box-shadow:none}body .text-left{text-align:left}body .text-center{text-align:center}body .text-right{text-align:right}body .text-black{--text-opacity:1;color:#000;color:rgba(0,0,0,var(--text-opacity))}body .text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}body .text-gray-100{--text-opacity:1;color:#fdfdfe;color:rgba(253,253,254,var(--text-opacity))}body .text-gray-200{--text-opacity:1;color:#f5f6f9;color:rgba(245,246,249,var(--text-opacity))}body .text-gray-500{--text-opacity:1;color:#b4bbd5;color:rgba(180,187,213,var(--text-opacity))}body .text-gray-600{--text-opacity:1;color:#8f9ac0;color:rgba(143,154,192,var(--text-opacity))}body .text-gray-700{--text-opacity:1;color:#6775a9;color:rgba(103,117,169,var(--text-opacity))}body .text-gray-800{--text-opacity:1;color:#455079;color:rgba(69,80,121,var(--text-opacity))}body .text-gray-900{--text-opacity:1;color:#21263a;color:rgba(33,38,58,var(--text-opacity))}body .text-red-600{--text-opacity:1;color:#de7e79;color:rgba(222,126,121,var(--text-opacity))}body .text-red-800{--text-opacity:1;color:#932a24;color:rgba(147,42,36,var(--text-opacity))}body .text-blue-600{--text-opacity:1;color:#5fa3c7;color:rgba(95,163,199,var(--text-opacity))}body .text-blue-700{--text-opacity:1;color:#387da2;color:rgba(56,125,162,var(--text-opacity))}body .text-grayscale-600{--text-opacity:1;color:#9b9b9b;color:rgba(155,155,155,var(--text-opacity))}body .text-gold-600{--text-opacity:1;color:#c79215;color:rgba(199,146,21,var(--text-opacity))}body .hover\:text-white:hover{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}body .hover\:text-gray-700:hover{--text-opacity:1;color:#6775a9;color:rgba(103,117,169,var(--text-opacity))}body .hover\:text-gray-800:hover{--text-opacity:1;color:#455079;color:rgba(69,80,121,var(--text-opacity))}body .hover\:text-red-700:hover{--text-opacity:1;color:#ce4038;color:rgba(206,64,56,var(--text-opacity))}body .hover\:text-blue-500:hover{--text-opacity:1;color:#95c2da;color:rgba(149,194,218,var(--text-opacity))}body .hover\:text-grayscale-400:hover{--text-opacity:1;color:#d6d6d6;color:rgba(214,214,214,var(--text-opacity))}body .hover\:text-gold-500:hover{--text-opacity:1;color:#eab436;color:rgba(234,180,54,var(--text-opacity))}body .focus\:text-blue-900:focus{--text-opacity:1;color:#132a36;color:rgba(19,42,54,var(--text-opacity))}body .text-opacity-50{--text-opacity:0.5}body .italic{font-style:italic}body .uppercase{text-transform:uppercase}body .underline{text-decoration:underline}body .tracking-tight{letter-spacing:-.025em}body .tracking-wide{letter-spacing:.025em}body .align-middle{vertical-align:middle}body .whitespace-no-wrap{white-space:nowrap}body .w-8{width:3.9270509831253526rem}body .w-9{width:6.354101966250923rem}body .w-10{width:10.281152949377198rem}body .w-half-7{width:1.2135254915625rem}body .w-half-8{width:1.9635254915626763rem}body .w-double-10{width:20.562305898754396rem}body .w-1\/2{width:50%}body .w-full{width:100%}body .z-10{z-index:10}body .z-20{z-index:20}body .z-30{z-index:30}body .z-40{z-index:40}body .transform{--transform-translate-x:0;--transform-translate-y:0;--transform-rotate:0;--transform-skew-x:0;--transform-skew-y:0;--transform-scale-x:1;--transform-scale-y:1;transform:translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))}body .rotate-90{--transform-rotate:90deg}body .rotate-180{--transform-rotate:180deg}body .-translate-x-1\/2{--transform-translate-x:-50%}body .-translate-y-1\/2{--transform-translate-y:-50%}body .translate-y-full{--transform-translate-y:100%}body .transition-all{transition-property:all}body .transition-colors{transition-property:background-color,border-color,color,fill,stroke}body .transition-opacity{transition-property:opacity}body .transition-shadow{transition-property:box-shadow}body .duration-150{transition-duration:.15s}body .duration-200{transition-duration:.2s}body .duration-300{transition-duration:.3s}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}@media (min-width:640px){.sm\:container{width:100%}}@media (min-width:640px) and (min-width:640px){.sm\:container{max-width:640px}}@media (min-width:640px) and (min-width:768px){.sm\:container{max-width:768px}}@media (min-width:640px) and (min-width:1024px){.sm\:container{max-width:1024px}}@media (min-width:640px) and (min-width:1280px){.sm\:container{max-width:1280px}}@media (min-width:640px){body .sm\:rounded-full{border-radius:9999px}body .sm\:border-b-1{border-bottom-width:.13525491562416744rem}body .sm\:flex{display:flex}body .sm\:h-half-9{height:3.1770509831254614rem}body .sm\:text-2xl{font-size:1.5rem}body .sm\:text-4xl{font-size:2.25rem}body .sm\:leading-7{line-height:2.427050983125rem}body .sm\:mx-0{margin-left:0;margin-right:0}body .sm\:mt-0{margin-top:0}body .sm\:mt-4{margin-top:.5729490168750833rem}}@media (min-width:768px){.md\:container{width:100%}}@media (min-width:768px) and (min-width:640px){.md\:container{max-width:640px}}@media (min-width:768px) and (min-width:768px){.md\:container{max-width:768px}}@media (min-width:768px) and (min-width:1024px){.md\:container{max-width:1024px}}@media (min-width:768px) and (min-width:1280px){.md\:container{max-width:1280px}}@media (min-width:768px){body .md\:space-x-6>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(1.5rem*var(--space-x-reverse));margin-left:calc(1.5rem*(1 - var(--space-x-reverse)))}body .md\:space-x-7>:not(template)~:not(template){--space-x-reverse:0;margin-right:calc(2.42705rem*var(--space-x-reverse));margin-left:calc(2.42705rem*(1 - var(--space-x-reverse)))}body .md\:inline-block{display:inline-block}body .md\:flex{display:flex}body .md\:mt-0{margin-top:0}body .md\:mr-8{margin-right:3.9270509831253526rem}body .md\:max-w-grp-5{max-width:61.80339887498547%}body .md\:min-w-10{min-width:10.281152949377198rem}body .md\:text-right{text-align:right}}@media (min-width:1024px){.lg\:container{width:100%}}@media (min-width:1024px) and (min-width:640px){.lg\:container{max-width:640px}}@media (min-width:1024px) and (min-width:768px){.lg\:container{max-width:768px}}@media (min-width:1024px) and (min-width:1024px){.lg\:container{max-width:1024px}}@media (min-width:1024px) and (min-width:1280px){.lg\:container{max-width:1280px}}@media (min-width:1024px){body .lg\:min-w-11{min-width:16.635254915629613rem}}@media (min-width:1280px){.xl\:container{width:100%}}@media (min-width:1280px) and (min-width:640px){.xl\:container{max-width:640px}}@media (min-width:1280px) and (min-width:768px){.xl\:container{max-width:768px}}@media (min-width:1280px) and (min-width:1024px){.xl\:container{max-width:1024px}}@media (min-width:1280px) and (min-width:1280px){.xl\:container{max-width:1280px}} \ No newline at end of file diff --git a/public/mix-manifest.json b/public/mix-manifest.json index cec904a..87379dc 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,4 +1,4 @@ { "/js/site.js": "/js/site.js?id=e5fc27d529cd9c0c6579", - "/css/tailwind.css": "/css/tailwind.css?id=74799fa4d6a21ddf02c5" + "/css/tailwind.css": "/css/tailwind.css?id=ff27d3a4c2de7c692e0a" } diff --git a/resources/js/Pages/App.vue b/resources/js/Pages/App.vue index 6b8df36..f5f4fb1 100644 --- a/resources/js/Pages/App.vue +++ b/resources/js/Pages/App.vue @@ -305,6 +305,8 @@ :ref="`paletteHex${index}`" placeholder="#000000" class="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" + @focus="$event.target.select()" + @paste="onPaste" /> {{ tabContent }}
+
+
+

4.  Tailwind Auto-Dark Mode

+ Watch Demo +
+

+ Generate CSS and Tailwind config for automatic dark mode using flipped color scales. + This approach creates symmetric color values that automatically invert in dark mode while maintaining consistent contrast ratios. +

+
+ + +
+
+ + 
{{ autoDarkModeTabContent }}
+
+
+

How to use:

+
    +
  1. Copy the CSS Variables code and paste it into your main CSS file
    2. +
  2. Copy the Tailwind Config code and merge it with your tailwind.config.js
    3. +
  3. Use color classes like text-neutral-600 or bg-primary-200
    4. +
  4. Colors will automatically flip to their opposite values in dark mode
    5. +
  5. Use the unset-dark-mode class to prevent auto-flipping on specific elements
    6. +
+
+
Have feedback?
{ + str += `\n`; + let swatchCount = Object.keys(colors[name].swatches).length; + Object.keys(colors[name].swatches).forEach((i) => { + let swatch = colors[name].swatches[i]; + let label = this.getValueLabel(i, swatchCount); + let value = swatch.rgb?.join(' '); + if (value) { + str += ` --${name}-${label}: ${value};\n`; + } + }); + return str; + }, ''); + + // Add black and white variables + css += `\n --black: 0 0 0;\n`; + css += ` --white: 255 255 255;\n\n`; + + // Add abstract color mappings based on grayscale + if (colors.grayscale && colors.grayscale.swatches) { + css += ` /* Set abstract colors */\n`; + css += ` --dark: var(--black);\n`; + css += ` --light: var(--white);\n\n`; + + let grayscaleSwatches = colors.grayscale.swatches; + let swatchKeys = Object.keys(grayscaleSwatches).sort((a, b) => parseInt(a) - parseInt(b)); + let swatchCount = swatchKeys.length; + + swatchKeys.forEach((i) => { + let label = this.getValueLabel(i, swatchCount); + css += ` --neutral-${label}: var(--grayscale-${label});\n`; + }); + } + + css += ` }\n\n`; + + // Add dark mode section that flips the values + css += ` @media (prefers-color-scheme: dark) {\n`; + css += ` /* Flip the values for dark mode */\n`; + css += ` :root {\n`; + css += ` --dark: var(--white);\n`; + css += ` --light: var(--black);\n\n`; + + // Flip grayscale/neutral values if they exist + if (colors.grayscale && colors.grayscale.swatches) { + let grayscaleSwatches = colors.grayscale.swatches; + let swatchKeys = Object.keys(grayscaleSwatches).sort((a, b) => parseInt(a) - parseInt(b)); + let swatchCount = swatchKeys.length; + + swatchKeys.forEach((i) => { + let label = this.getValueLabel(i, swatchCount); + let reverseIndex = swatchCount - 1 - parseInt(i); + let reverseLabel = this.getValueLabel(reverseIndex, swatchCount); + css += ` --neutral-${label}: var(--grayscale-${reverseLabel});\n`; + }); + } + + // Flip all other color palettes + Object.keys(colors).forEach(name => { + if (name !== 'grayscale') { + css += `\n`; + let swatchCount = Object.keys(colors[name].swatches).length; + let swatchKeys = Object.keys(colors[name].swatches).sort((a, b) => parseInt(a) - parseInt(b)); + + swatchKeys.forEach((i) => { + let label = this.getValueLabel(i, swatchCount); + let reverseIndex = swatchCount - 1 - parseInt(i); + let reverseLabel = this.getValueLabel(reverseIndex, swatchCount); + css += ` --${name}-${label}: var(--${name}-${reverseLabel});\n`; + }); + } + }); + + css += ` }\n\n`; + css += `\n /* with this utility class you can do something like
and it (and all it's child elements) will not automatically switch in darkmode. */\n`; + css += ` .unset-dark-mode {\n`; + + // Reset all colors to their original values in the unset class + css += Object.keys(colors).reduce((str, name) => { + let swatchCount = Object.keys(colors[name].swatches).length; + Object.keys(colors[name].swatches).forEach((i) => { + let label = this.getValueLabel(i, swatchCount); + str += ` --${name}-${label}: var(--${name}-${label});\n`; + }); + str += `\n`; + return str; + }, ''); + + if (colors.grayscale && colors.grayscale.swatches) { + let grayscaleSwatches = colors.grayscale.swatches; + let swatchKeys = Object.keys(grayscaleSwatches).sort((a, b) => parseInt(a) - parseInt(b)); + let swatchCount = swatchKeys.length; + + swatchKeys.forEach((i) => { + let label = this.getValueLabel(i, swatchCount); + css += ` --neutral-${label}: var(--grayscale-${label});\n`; + }); + } + + css += ` }\n`; + css += ` }\n`; + css += `}`; + + return css; + }, + + autoDarkModeTailwindConfig() { + let colors = this.cssColors; + let config = `function setAsCssVariable(colorName) {\n`; + config += ` let augmentedPalette = {};\n`; + config += ` const values = [`; + + // Get the values from grayscale to determine the scale + if (colors.grayscale && colors.grayscale.swatches) { + let swatchKeys = Object.keys(colors.grayscale.swatches).sort((a, b) => parseInt(a) - parseInt(b)); + let labels = swatchKeys.map(i => this.getValueLabel(i, swatchKeys.length)); + config += labels.join(', '); + } else { + config += '50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100'; + } + + config += `];\n`; + config += ` values.forEach((value) => {\n`; + config += ` augmentedPalette[value] = \`rgb(var(--\${colorName}-\${value}) / )\`;\n`; + config += ` });\n`; + config += ` return augmentedPalette;\n`; + config += `}\n\n`; + config += `module.exports = {\n`; + config += ` theme: {\n`; + config += ` colors: {\n`; + config += ` current: 'currentColor',\n`; + config += ` transparent: 'transparent',\n`; + config += ` black: 'rgb(var(--black) / )',\n`; + config += ` white: 'rgb(var(--white) / )',\n`; + config += ` light: 'rgb(var(--light) / )',\n`; + config += ` dark: 'rgb(var(--dark) / )',\n`; + + // Add all color palettes + Object.keys(colors).forEach(name => { + config += ` ${name}: setAsCssVariable('${name}'),\n`; + }); + + config += ` neutral: setAsCssVariable('neutral'),\n`; + config += ` },\n`; + config += ` },\n`; + config += `};\n`; + + return config; + }, + + autoDarkModeTabContent() { + if (this.autoDarkModeTab === 'css') return this.autoDarkModeCss; + if (this.autoDarkModeTab === 'config') return this.autoDarkModeTailwindConfig; + }, }, watch: { @@ -1161,6 +1387,65 @@ export default { }, methods: { + onPaste(evt) { + const target = evt.target; + const txt = evt?.clipboardData?.getData('text/plain') + if (!txt) { + return true; + } + evt.preventDefault(); + + let hexValue = ''; + const input = txt.trim(); + + // Check if it's already a hex value (with or without #) + const hexMatch = input.match(/^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/); + if (hexMatch) { + hexValue = `#${hexMatch[1]}`; + // Expand 3-char hex to 6-char + if (hexValue.length === 4) { + hexValue = '#' + [...hexValue.slice(1)].map(c => c + c).join(''); + } + } + // Check for RGB/HSL values in various formats + else { + // Check for HSL values (looking for % on 2nd or 3rd value, or 'hsl' keyword) + // HSL format: hue (0-360), saturation (0-100%), lightness (0-100%) + const hslMatch = input.match(/(\d+)\s*[,\s]\s*(\d+)(%?)\s*[,\s]\s*(\d+)(%?)/); + if (hslMatch && (hslMatch[3] === '%' || hslMatch[5] === '%' || input.toLowerCase().includes('hsl'))) { + const h = parseInt(hslMatch[1]); + const s = parseInt(hslMatch[2]); + const l = parseInt(hslMatch[4]); + const rgb = Color.HSLtoRGB(h, s, l); + hexValue = Color.RGBToHex(Math.round(rgb.r), Math.round(rgb.g), Math.round(rgb.b)); + } + // Otherwise treat as RGB values (including RGBA with alpha that might have %) + else if (hslMatch) { + // It matched the pattern but no % signs, so treat as RGB + const r = Math.min(255, Math.max(0, parseInt(hslMatch[1]))); + const g = Math.min(255, Math.max(0, parseInt(hslMatch[2]))); + const b = Math.min(255, Math.max(0, parseInt(hslMatch[4]))); + hexValue = Color.RGBToHex(r, g, b); + } + // If nothing matched, try to use it as hex anyway + else { + // Remove any non-hex characters and take first 6 valid hex chars + const cleaned = input.replace(/[^0-9A-Fa-f]/g, '').slice(0, 6); + if (cleaned.length >= 3) { + hexValue = `#${cleaned}`; + } else { + // Default to black if we can't parse it + hexValue = '#000000'; + } + } + } + + target.value = hexValue; + // Trigger input event to update v-model + target.dispatchEvent(new Event('input', { bubbles: true })); + return false; + }, + getValueLabel(i, count) { if (this.cssTab == 'radix') return parseInt(i, 10) + 1; if (count == 11 && i == 10) return '950';