From 8f7150f8e51d41c1a3917084f4dfe5f5f4172744 Mon Sep 17 00:00:00 2001 From: Cristian Cretu Date: Sun, 13 Nov 2022 20:47:45 +0200 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20v0.0.9=20=E2=9A=A1=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- meshgrad/dist/index.js | 4 +- meshgrad/dist/index.mjs | 4 +- meshgrad/package.json | 2 +- meshgrad/src/index.ts | 116 ++++++++++++++++++++++++---------------- pnpm-lock.yaml | 6 +-- website/package.json | 2 +- 6 files changed, 78 insertions(+), 56 deletions(-) diff --git a/meshgrad/dist/index.js b/meshgrad/dist/index.js index e51e49e..3ad1d21 100644 --- a/meshgrad/dist/index.js +++ b/meshgrad/dist/index.js @@ -1,2 +1,2 @@ -var b=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var l=(r,n)=>{for(var t in n)b(r,t,{get:n[t],enumerable:!0})},k=(r,n,t,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of M(n))!$.call(r,a)&&a!==t&&b(r,a,{get:()=>n[a],enumerable:!(e=p(n,a))||e.enumerable});return r};var v=r=>k(b({},"__esModule",{value:!0}),r);var j={};l(j,{generateJSXMeshGradient:()=>h,generateMeshGradient:()=>C});module.exports=v(j);var I=()=>Math.round(Math.random()*360),c=r=>Math.round(Math.random()*(r*100)%100),g=(r,n,t)=>Math.round(n/t*(r*100)%100),f=r=>{r=r.replace(/#/g,""),r.length===3&&(r=r.split("").map(function(d){return d+d}).join(""));var n=/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(r);if(!n)return null;var t=parseInt(n[1],16),e=parseInt(n[2],16),a=parseInt(n[3],16);t/=255,e/=255,a/=255;var o=Math.max(t,e,a),s=Math.min(t,e,a),u=(o+s)/2;if(o==s)u=0;else{var m=o-s;switch(o){case t:u=(e-a)/m+(eArray.from({length:r},(t,e)=>e===0?`hsl(${n}, 100%, 80%)`:e2?e/2:e)}, 100%, ${76-e*(1-2*(e%2))*1.75}%)`:`hsl(${n-150*(1-2*(e%2))}, 100%, ${76-e*(1-2*(e%2))*1.25}%)`),S=(r,n,t)=>Array.from({length:r},(e,a)=>`radial-gradient(at ${t?g(a,t,r):c(a)}% ${t?g(a*10,t,r):c(a*10)}%, ${n[a]} 0px, transparent 50%) -`),i=(r,n,t)=>{let e=G(r,n??I()),a=S(r,e,t||void 0);return[e[0],a.join(",")]},C=(r,n,t)=>{let[e,a]=i(r,n?f(n):void 0,t??void 0);return`background-color: ${e}; background-image:${a}`},h=(r,n,t)=>{let[e,a]=i(r,n?f(n):void 0,t??void 0);return{backgroundColor:e,backgroundImage:a}};0&&(module.exports={generateJSXMeshGradient,generateMeshGradient}); +var b=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var l=(r,n)=>{for(var t in n)b(r,t,{get:n[t],enumerable:!0})},k=(r,n,t,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of M(n))!$.call(r,a)&&a!==t&&b(r,a,{get:()=>n[a],enumerable:!(e=p(n,a))||e.enumerable});return r};var v=r=>k(b({},"__esModule",{value:!0}),r);var y={};l(y,{generateJSXMeshGradient:()=>j,generateMeshGradient:()=>C});module.exports=v(y);var I=()=>Math.round(Math.random()*360),g=r=>Math.round(Math.random()*(r*100)%100),f=(r,n,t)=>Math.round(n/t*(r*100)%100),d=r=>{if(!!r){r=r.replace(/#/g,""),r.length===3&&(r=r.split("").map(function(c){return c+c}).join(""));var n=/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(r);if(!!n){var t=parseInt(n[1],16),e=parseInt(n[2],16),a=parseInt(n[3],16);t/=255,e/=255,a/=255;var o=Math.max(t,e,a),s=Math.min(t,e,a),u=(o+s)/2;if(o==s)u=0;else{var m=o-s;switch(o){case t:u=(e-a)/m+(eArray.from({length:r},(t,e)=>e===0?`hsl(${n}, 100%, 80%)`:e2?e/2:e)}, 100%, ${76-e*(1-2*(e%2))*1.75}%)`:`hsl(${n-150*(1-2*(e%2))}, 100%, ${76-e*(1-2*(e%2))*1.25}%)`),S=(r,n,t)=>Array.from({length:r},(e,a)=>`radial-gradient(at ${t?f(a,t,r):g(a)}% ${t?f(a*10,t,r):g(a*10)}%, ${n[a]} 0px, transparent 50%) +`),i=(r,n,t)=>{let e=G(r,n?I():void 0),a=S(r,e,t||void 0);return[e[0],a.join(",")]},C=(r,n,t)=>{let[e,a]=i(r,d(n)?d(n):void 0,t||void 0);return`background-color: ${e}; background-image:${a}`},j=(r,n,t)=>{let[e,a]=i(r,d(n)?d(n):void 0,t||void 0);return{backgroundColor:e,backgroundImage:a}};0&&(module.exports={generateJSXMeshGradient,generateMeshGradient}); diff --git a/meshgrad/dist/index.mjs b/meshgrad/dist/index.mjs index d941951..b6e9743 100644 --- a/meshgrad/dist/index.mjs +++ b/meshgrad/dist/index.mjs @@ -1,2 +1,2 @@ -var i=()=>Math.round(Math.random()*360),d=n=>Math.round(Math.random()*(n*100)%100),c=(n,t,e)=>Math.round(t/e*(n*100)%100),g=n=>{n=n.replace(/#/g,""),n.length===3&&(n=n.split("").map(function(b){return b+b}).join(""));var t=/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(n);if(!t)return null;var e=parseInt(t[1],16),r=parseInt(t[2],16),a=parseInt(t[3],16);e/=255,r/=255,a/=255;var o=Math.max(e,r,a),s=Math.min(e,r,a),u=(o+s)/2;if(o==s)u=0;else{var m=o-s;switch(o){case e:u=(r-a)/m+(rArray.from({length:n},(e,r)=>r===0?`hsl(${t}, 100%, 80%)`:r2?r/2:r)}, 100%, ${76-r*(1-2*(r%2))*1.75}%)`:`hsl(${t-150*(1-2*(r%2))}, 100%, ${76-r*(1-2*(r%2))*1.25}%)`),M=(n,t,e)=>Array.from({length:n},(r,a)=>`radial-gradient(at ${e?c(a,e,n):d(a)}% ${e?c(a*10,e,n):d(a*10)}%, ${t[a]} 0px, transparent 50%) -`),f=(n,t,e)=>{let r=p(n,t??i()),a=M(n,r,e||void 0);return[r[0],a.join(",")]},$=(n,t,e)=>{let[r,a]=f(n,t?g(t):void 0,e??void 0);return`background-color: ${r}; background-image:${a}`},l=(n,t,e)=>{let[r,a]=f(n,t?g(t):void 0,e??void 0);return{backgroundColor:r,backgroundImage:a}};export{l as generateJSXMeshGradient,$ as generateMeshGradient}; +var i=()=>Math.round(Math.random()*360),c=n=>Math.round(Math.random()*(n*100)%100),g=(n,t,e)=>Math.round(t/e*(n*100)%100),d=n=>{if(!!n){n=n.replace(/#/g,""),n.length===3&&(n=n.split("").map(function(b){return b+b}).join(""));var t=/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(n);if(!!t){var e=parseInt(t[1],16),r=parseInt(t[2],16),a=parseInt(t[3],16);e/=255,r/=255,a/=255;var o=Math.max(e,r,a),s=Math.min(e,r,a),u=(o+s)/2;if(o==s)u=0;else{var m=o-s;switch(o){case e:u=(r-a)/m+(rArray.from({length:n},(e,r)=>r===0?`hsl(${t}, 100%, 80%)`:r2?r/2:r)}, 100%, ${76-r*(1-2*(r%2))*1.75}%)`:`hsl(${t-150*(1-2*(r%2))}, 100%, ${76-r*(1-2*(r%2))*1.25}%)`),M=(n,t,e)=>Array.from({length:n},(r,a)=>`radial-gradient(at ${e?g(a,e,n):c(a)}% ${e?g(a*10,e,n):c(a*10)}%, ${t[a]} 0px, transparent 50%) +`),f=(n,t,e)=>{let r=p(n,t?i():void 0),a=M(n,r,e||void 0);return[r[0],a.join(",")]},$=(n,t,e)=>{let[r,a]=f(n,d(t)?d(t):void 0,e||void 0);return`background-color: ${r}; background-image:${a}`},l=(n,t,e)=>{let[r,a]=f(n,d(t)?d(t):void 0,e||void 0);return{backgroundColor:r,backgroundImage:a}};export{l as generateJSXMeshGradient,$ as generateMeshGradient}; diff --git a/meshgrad/package.json b/meshgrad/package.json index 591fd11..d3b2ef5 100644 --- a/meshgrad/package.json +++ b/meshgrad/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.8", + "version": "0.0.9", "description": "A tiny utility for generating CSS Mesh Gradients", "homepage": "https://meshgrad.cretu.dev", "name": "meshgrad", diff --git a/meshgrad/src/index.ts b/meshgrad/src/index.ts index 41afdbb..71fbeff 100644 --- a/meshgrad/src/index.ts +++ b/meshgrad/src/index.ts @@ -7,49 +7,57 @@ const getPercent = (value: number): number => { return Math.round((Math.random() * (value * 100)) % 100); }; -const getHashPercent = (value: number, hash: number, length: number): number => { - return Math.round((hash / length * (value * 100)) % 100); +const getHashPercent = ( + value: number, + hash: number, + length: number +): number => { + return Math.round(((hash / length) * (value * 100)) % 100); }; -const hexToHSL = (hex:string): number => { - hex = hex.replace(/#/g, ''); - if (hex.length === 3) { - hex = hex.split('').map(function (hex) { - return hex + hex; - }).join(''); +const hexToHSL = (hex?: string): number | undefined => { + if (!hex) return undefined; + hex = hex.replace(/#/g, ""); + if (hex.length === 3) { + hex = hex + .split("") + .map(function (hex) { + return hex + hex; + }) + .join(""); + } + var result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(hex); + if (!result) { + return undefined; + } + var r = parseInt(result[1], 16); + var g = parseInt(result[2], 16); + var b = parseInt(result[3], 16); + (r /= 255), (g /= 255), (b /= 255); + var max = Math.max(r, g, b), + min = Math.min(r, g, b); + var h = (max + min) / 2; + if (max == min) { + h = 0; + } else { + var d = max - min; + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; } - var result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(hex); - if (!result) { - return null; - } - var r = parseInt(result[1], 16); - var g = parseInt(result[2], 16); - var b = parseInt(result[3], 16); - r /= 255, g /= 255, b /= 255; - var max = Math.max(r, g, b), - min = Math.min(r, g, b); - var h = (max + min) / 2; - if (max == min) { - h = 0; - } else { - var d = max - min; - switch (max) { - case r: - h = (g - b) / d + (g < b ? 6 : 0); - break; - case g: - h = (b - r) / d + 2; - break; - case b: - h = (r - g) / d + 4; - break; - } - h /= 6; - } - h = Math.round(360 * h); + h /= 6; + } + h = Math.round(360 * h); -return h -} + return h; +}; const genColors = (length: number, initialHue: number): string[] => { return Array.from({ length }, (_, i) => { @@ -76,7 +84,9 @@ const genColors = (length: number, initialHue: number): string[] => { const genGrad = (length: number, colors: string[], hash?: number): string[] => { return Array.from({ length }, (_, i) => { - return `radial-gradient(at ${hash ? getHashPercent(i, hash, length) : getPercent(i)}% ${hash ? getHashPercent(i * 10, hash, length) : getPercent(i * 10)}%, ${ + return `radial-gradient(at ${ + hash ? getHashPercent(i, hash, length) : getPercent(i) + }% ${hash ? getHashPercent(i * 10, hash, length) : getPercent(i * 10)}%, ${ colors[i] } 0px, transparent 50%)\n`; }); @@ -84,19 +94,35 @@ const genGrad = (length: number, colors: string[], hash?: number): string[] => { const genStops = (length: number, baseColor?: number, hash?: number) => { // get the color for the radial gradient - const colors = genColors(length, baseColor ?? getColor()); + const colors = genColors(length, baseColor ? getColor() : undefined); // generate the radial gradient const proprieties = genGrad(length, colors, hash ? hash : undefined); return [colors[0], proprieties.join(",")]; }; -const generateMeshGradient = (length: number, baseColor?: string, hash?: number) => { - const [bgColor, bgImage] = genStops(length, baseColor ? hexToHSL(baseColor) : undefined, hash ?? undefined); +const generateMeshGradient = ( + length: number, + baseColor?: string, + hash?: number +) => { + const [bgColor, bgImage] = genStops( + length, + hexToHSL(baseColor) ? hexToHSL(baseColor) : undefined, + hash ? hash : undefined + ); return `background-color: ${bgColor}; background-image:${bgImage}`; }; -const generateJSXMeshGradient = (length: number, baseColor?: string, hash?: number) => { - const [bgColor, bgImage] = genStops(length, baseColor ? hexToHSL(baseColor) : undefined, hash ?? undefined); +const generateJSXMeshGradient = ( + length: number, + baseColor?: string, + hash?: number +) => { + const [bgColor, bgImage] = genStops( + length, + hexToHSL(baseColor) ? hexToHSL(baseColor) : undefined, + hash ? hash : undefined + ); return { backgroundColor: bgColor, backgroundImage: bgImage }; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cd4a225..ec8fdf2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27,7 +27,7 @@ importers: eslint-config-next: 12.2.3 eslint-config-prettier: ^8.5.0 eslint-plugin-prettier: ^4.2.1 - meshgrad: ^0.0.6 + meshgrad: ^0.0.9 next: ^12.2.3 next-themes: ^0.2.0 postcss: ^8.4.14 @@ -2119,10 +2119,6 @@ packages: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} - /meshgrad/0.0.6: - resolution: {integrity: sha512-ZcMaFOXt57TFcM8loS4qaNgGQAFQ/Mwm84WjypdnFRwMQS7RZFDPCjgLcoIXCUcprAtHAZKC3p8rktLpzSGknQ==} - dev: true - /micromatch/4.0.5: resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==} engines: {node: '>=8.6'} diff --git a/website/package.json b/website/package.json index 02dead0..14c8075 100644 --- a/website/package.json +++ b/website/package.json @@ -94,7 +94,7 @@ "eslint": "^8.20.0", "eslint-config-next": "12.2.3", "eslint-plugin-prettier": "^4.2.1", - "meshgrad": "^0.0.6", + "meshgrad": "^0.0.9", "postcss": "^8.4.14", "prettier": "^2.7.1", "tailwindcss": "^3.1.6", From a4cc7da5c96284e8a954d001d9a2bf337c739e39 Mon Sep 17 00:00:00 2001 From: Cristian Cretu Date: Sun, 13 Nov 2022 21:02:17 +0200 Subject: [PATCH 2/2] fix --- meshgrad/dist/index.js | 4 ++-- meshgrad/dist/index.mjs | 2 +- meshgrad/package.json | 2 +- meshgrad/src/index.ts | 2 +- pnpm-lock.yaml | 2 +- website/package.json | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/meshgrad/dist/index.js b/meshgrad/dist/index.js index 3ad1d21..4683170 100644 --- a/meshgrad/dist/index.js +++ b/meshgrad/dist/index.js @@ -1,2 +1,2 @@ -var b=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var l=(r,n)=>{for(var t in n)b(r,t,{get:n[t],enumerable:!0})},k=(r,n,t,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of M(n))!$.call(r,a)&&a!==t&&b(r,a,{get:()=>n[a],enumerable:!(e=p(n,a))||e.enumerable});return r};var v=r=>k(b({},"__esModule",{value:!0}),r);var y={};l(y,{generateJSXMeshGradient:()=>j,generateMeshGradient:()=>C});module.exports=v(y);var I=()=>Math.round(Math.random()*360),g=r=>Math.round(Math.random()*(r*100)%100),f=(r,n,t)=>Math.round(n/t*(r*100)%100),d=r=>{if(!!r){r=r.replace(/#/g,""),r.length===3&&(r=r.split("").map(function(c){return c+c}).join(""));var n=/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(r);if(!!n){var t=parseInt(n[1],16),e=parseInt(n[2],16),a=parseInt(n[3],16);t/=255,e/=255,a/=255;var o=Math.max(t,e,a),s=Math.min(t,e,a),u=(o+s)/2;if(o==s)u=0;else{var m=o-s;switch(o){case t:u=(e-a)/m+(eArray.from({length:r},(t,e)=>e===0?`hsl(${n}, 100%, 80%)`:e2?e/2:e)}, 100%, ${76-e*(1-2*(e%2))*1.75}%)`:`hsl(${n-150*(1-2*(e%2))}, 100%, ${76-e*(1-2*(e%2))*1.25}%)`),S=(r,n,t)=>Array.from({length:r},(e,a)=>`radial-gradient(at ${t?f(a,t,r):g(a)}% ${t?f(a*10,t,r):g(a*10)}%, ${n[a]} 0px, transparent 50%) -`),i=(r,n,t)=>{let e=G(r,n?I():void 0),a=S(r,e,t||void 0);return[e[0],a.join(",")]},C=(r,n,t)=>{let[e,a]=i(r,d(n)?d(n):void 0,t||void 0);return`background-color: ${e}; background-image:${a}`},j=(r,n,t)=>{let[e,a]=i(r,d(n)?d(n):void 0,t||void 0);return{backgroundColor:e,backgroundImage:a}};0&&(module.exports={generateJSXMeshGradient,generateMeshGradient}); +var b=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var k=(r,n)=>{for(var t in n)b(r,t,{get:n[t],enumerable:!0})},l=(r,n,t,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of M(n))!$.call(r,a)&&a!==t&&b(r,a,{get:()=>n[a],enumerable:!(e=p(n,a))||e.enumerable});return r};var v=r=>l(b({},"__esModule",{value:!0}),r);var A={};k(A,{generateJSXMeshGradient:()=>y,generateMeshGradient:()=>j});module.exports=v(A);var I=()=>Math.round(Math.random()*360),g=r=>Math.round(Math.random()*(r*100)%100),f=(r,n,t)=>Math.round(n/t*(r*100)%100),d=r=>{if(!!r){r=r.replace(/#/g,""),r.length===3&&(r=r.split("").map(function(c){return c+c}).join(""));var n=/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(r);if(!!n){var t=parseInt(n[1],16),e=parseInt(n[2],16),a=parseInt(n[3],16);t/=255,e/=255,a/=255;var o=Math.max(t,e,a),s=Math.min(t,e,a),u=(o+s)/2;if(o==s)u=0;else{var m=o-s;switch(o){case t:u=(e-a)/m+(eArray.from({length:r},(t,e)=>e===0?`hsl(${n}, 100%, 80%)`:e2?e/2:e)}, 100%, ${76-e*(1-2*(e%2))*1.75}%)`:`hsl(${n-150*(1-2*(e%2))}, 100%, ${76-e*(1-2*(e%2))*1.25}%)`),S=(r,n,t)=>Array.from({length:r},(e,a)=>`radial-gradient(at ${t?f(a,t,r):g(a)}% ${t?f(a*10,t,r):g(a*10)}%, ${n[a]} 0px, transparent 50%) +`),i=(r,n,t)=>{let e=G(r,n||I()),a=S(r,e,t||void 0);return[e[0],a.join(",")]},j=(r,n,t)=>{let[e,a]=i(r,d(n)?d(n):void 0,t||void 0);return`background-color: ${e}; background-image:${a}`},y=(r,n,t)=>{let[e,a]=i(r,d(n)?d(n):void 0,t||void 0);return{backgroundColor:e,backgroundImage:a}};0&&(module.exports={generateJSXMeshGradient,generateMeshGradient}); diff --git a/meshgrad/dist/index.mjs b/meshgrad/dist/index.mjs index b6e9743..19f0244 100644 --- a/meshgrad/dist/index.mjs +++ b/meshgrad/dist/index.mjs @@ -1,2 +1,2 @@ var i=()=>Math.round(Math.random()*360),c=n=>Math.round(Math.random()*(n*100)%100),g=(n,t,e)=>Math.round(t/e*(n*100)%100),d=n=>{if(!!n){n=n.replace(/#/g,""),n.length===3&&(n=n.split("").map(function(b){return b+b}).join(""));var t=/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(n);if(!!t){var e=parseInt(t[1],16),r=parseInt(t[2],16),a=parseInt(t[3],16);e/=255,r/=255,a/=255;var o=Math.max(e,r,a),s=Math.min(e,r,a),u=(o+s)/2;if(o==s)u=0;else{var m=o-s;switch(o){case e:u=(r-a)/m+(rArray.from({length:n},(e,r)=>r===0?`hsl(${t}, 100%, 80%)`:r2?r/2:r)}, 100%, ${76-r*(1-2*(r%2))*1.75}%)`:`hsl(${t-150*(1-2*(r%2))}, 100%, ${76-r*(1-2*(r%2))*1.25}%)`),M=(n,t,e)=>Array.from({length:n},(r,a)=>`radial-gradient(at ${e?g(a,e,n):c(a)}% ${e?g(a*10,e,n):c(a*10)}%, ${t[a]} 0px, transparent 50%) -`),f=(n,t,e)=>{let r=p(n,t?i():void 0),a=M(n,r,e||void 0);return[r[0],a.join(",")]},$=(n,t,e)=>{let[r,a]=f(n,d(t)?d(t):void 0,e||void 0);return`background-color: ${r}; background-image:${a}`},l=(n,t,e)=>{let[r,a]=f(n,d(t)?d(t):void 0,e||void 0);return{backgroundColor:r,backgroundImage:a}};export{l as generateJSXMeshGradient,$ as generateMeshGradient}; +`),f=(n,t,e)=>{let r=p(n,t||i()),a=M(n,r,e||void 0);return[r[0],a.join(",")]},$=(n,t,e)=>{let[r,a]=f(n,d(t)?d(t):void 0,e||void 0);return`background-color: ${r}; background-image:${a}`},k=(n,t,e)=>{let[r,a]=f(n,d(t)?d(t):void 0,e||void 0);return{backgroundColor:r,backgroundImage:a}};export{k as generateJSXMeshGradient,$ as generateMeshGradient}; diff --git a/meshgrad/package.json b/meshgrad/package.json index d3b2ef5..0038ac3 100644 --- a/meshgrad/package.json +++ b/meshgrad/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.9", + "version": "0.0.10", "description": "A tiny utility for generating CSS Mesh Gradients", "homepage": "https://meshgrad.cretu.dev", "name": "meshgrad", diff --git a/meshgrad/src/index.ts b/meshgrad/src/index.ts index 71fbeff..39b1764 100644 --- a/meshgrad/src/index.ts +++ b/meshgrad/src/index.ts @@ -94,7 +94,7 @@ const genGrad = (length: number, colors: string[], hash?: number): string[] => { const genStops = (length: number, baseColor?: number, hash?: number) => { // get the color for the radial gradient - const colors = genColors(length, baseColor ? getColor() : undefined); + const colors = genColors(length, baseColor ? baseColor : getColor()); // generate the radial gradient const proprieties = genGrad(length, colors, hash ? hash : undefined); return [colors[0], proprieties.join(",")]; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ec8fdf2..953b562 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27,7 +27,7 @@ importers: eslint-config-next: 12.2.3 eslint-config-prettier: ^8.5.0 eslint-plugin-prettier: ^4.2.1 - meshgrad: ^0.0.9 + meshgrad: ^0.0.10 next: ^12.2.3 next-themes: ^0.2.0 postcss: ^8.4.14 diff --git a/website/package.json b/website/package.json index 14c8075..12c0d68 100644 --- a/website/package.json +++ b/website/package.json @@ -94,7 +94,7 @@ "eslint": "^8.20.0", "eslint-config-next": "12.2.3", "eslint-plugin-prettier": "^4.2.1", - "meshgrad": "^0.0.9", + "meshgrad": "^0.0.10", "postcss": "^8.4.14", "prettier": "^2.7.1", "tailwindcss": "^3.1.6",