Fix gradient opacity for some shapes

realvjy · Jan 22, 2025 · 9904647 · 9904647
1 parent 3b7f146
commit 9904647
Show file tree

Hide file tree

Showing 24 changed files with 1,859 additions and 1,819 deletions.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "LICENSE",
     "README.md"
   ],
+  "type": "module",
   "scripts": {
     "build": "npm run clean && rollup --config && npm run build:types",
     "build:types": "tsc --emitDeclarationOnly --declaration --outDir ./dist/types",

diff --git a/scripts/index.ts b/scripts/index.ts
@@ -1,8 +1,9 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
-import shapeData from "./shapeData.js";
+import shapeData from "./shapeData";
 import * as prettier from "prettier";
 import { shapeTypes } from "../src/lib/common";
+
 const cwd = import.meta.dirname;
 const outputDir = path.join(cwd, "../src/shapes");
 const prettierConfig = await prettier.resolveConfig(cwd);
@@ -23,15 +24,14 @@ async function createShapeFile(shapeKey, shapeData) {
   }
   const filePath = path.join(categoryDir, `${index}.tsx`);
   const isJsxPath = shapeData.shape && shapeData.shape.includes("<");
-
   const componentDataString = `
   {
     shape: ${isJsxPath ? shapeData.shape : `"${shapeData.shape}"`},
     blur: ${shapeData.blur},
     gradientShapes: ${shapeData.gradientShapes || null},
     ${shapeData.opacity ? `opacity: ${shapeData.opacity},` : ``}
     ${shapeData.fill ? `fill: "${shapeData.fill}",` : ``}
-    gradient: ${JSON.stringify(shapeData.gradient) || "[]"}
+    gradient: ${JSON.stringify(shapeData.gradient) || []}
   }
   `;
   // Create file content
@@ -60,7 +60,6 @@ await Promise.all(
     const shapes = Object.entries(shapeData).filter(([name]) => {
       return name.split("-")[0] === type;
     });
-    console.log(shapes);
     const categoryIndexFilePath = path.join(outputDir, `${type}/index.tsx`);
     let categoryName = type.charAt(0).toUpperCase() + type.slice(1);
     let imports = "";

diff --git a/scripts/shapeData.ts b/scripts/shapeData.ts
@@ -36,6 +36,7 @@ export default {
         y1: "38",
         y2: "150.5",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -157,6 +158,7 @@ export default {
         y1: "38",
         y2: "150.5",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -272,6 +274,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -422,6 +425,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -520,6 +524,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -560,6 +565,7 @@ export default {
         y1: "38",
         y2: "150.5",
         type: "linear",
+        opacity: 0.55,
         stops: [
           {
             color: "#FF1F00",
@@ -761,6 +767,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -796,6 +803,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -843,6 +851,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -968,6 +977,7 @@ export default {
         y1: "38",
         y2: "150.5",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -1130,6 +1140,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -1167,6 +1178,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.75",
         stops: [
           {
             color: "#FF1F00",
@@ -1834,6 +1846,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -1869,6 +1882,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -2121,6 +2135,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -2194,6 +2209,7 @@ export default {
         y1: "38",
         y2: "150.5",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -2594,6 +2610,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -2861,6 +2878,7 @@ export default {
         r: "1",
         gradientTransform: "rotate(116.694 71.023 87.946) scale(199.234)",
         type: "radial",
+        opacity: "0.55",
         stops: [
           {
             color: "#FFF500",
@@ -2944,6 +2962,7 @@ export default {
         y1: "0",
         y2: "200",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",
@@ -3166,6 +3185,7 @@ export default {
         y1: "38",
         y2: "150.5",
         type: "linear",
+        opacity: "0.55",
         stops: [
           {
             color: "#FF1F00",

diff --git a/src/shapes/ellipse/2.tsx b/src/shapes/ellipse/2.tsx
@@ -29,6 +29,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },

diff --git a/src/shapes/ellipse/3.tsx b/src/shapes/ellipse/3.tsx
@@ -27,6 +27,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },

diff --git a/src/shapes/ellipse/5.tsx b/src/shapes/ellipse/5.tsx
@@ -27,6 +27,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },

diff --git a/src/shapes/ellipse/8.tsx b/src/shapes/ellipse/8.tsx
@@ -19,6 +19,7 @@ const data: ComponentDataType = {
       y1: "38",
       y2: "150.5",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FF58E4", offset: "1" },

diff --git a/src/shapes/flower/3.tsx b/src/shapes/flower/3.tsx
@@ -27,6 +27,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },

diff --git a/src/shapes/flower/7.tsx b/src/shapes/flower/7.tsx
@@ -27,6 +27,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },

diff --git a/src/shapes/flower/9.tsx b/src/shapes/flower/9.tsx
@@ -20,6 +20,7 @@ const data: ComponentDataType = {
       y1: "38",
       y2: "150.5",
       type: "linear",
+      opacity: 0.55,
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FF58E4", offset: "1" },

diff --git a/src/shapes/misc/6.tsx b/src/shapes/misc/6.tsx
@@ -27,6 +27,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },

diff --git a/src/shapes/misc/7.tsx b/src/shapes/misc/7.tsx
@@ -27,6 +27,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },

diff --git a/src/shapes/number/0.tsx b/src/shapes/number/0.tsx
@@ -27,6 +27,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },

diff --git a/src/shapes/number/8.tsx b/src/shapes/number/8.tsx
@@ -20,6 +20,7 @@ const data: ComponentDataType = {
       y1: "38",
       y2: "150.5",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FF58E4", offset: "1" },

diff --git a/src/shapes/polygon/6.tsx b/src/shapes/polygon/6.tsx
@@ -26,6 +26,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },

diff --git a/src/shapes/rectangle/8.tsx b/src/shapes/rectangle/8.tsx
@@ -26,6 +26,7 @@ const data: ComponentDataType = {
       r: "1",
       gradientTransform: "rotate(116.694 71.023 87.946) scale(199.234)",
       type: "radial",
+      opacity: "0.55",
       stops: [
         { color: "#FFF500", offset: 0 },
         { color: "#FF00D6", offset: "1", opacity: "0" },

diff --git a/src/shapes/star/11.tsx b/src/shapes/star/11.tsx
@@ -20,6 +20,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },

diff --git a/src/shapes/star/2.tsx b/src/shapes/star/2.tsx
@@ -20,6 +20,7 @@ const data: ComponentDataType = {
       y1: "38",
       y2: "150.5",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FF58E4", offset: "1" },

diff --git a/src/shapes/star/8.tsx b/src/shapes/star/8.tsx
@@ -19,6 +19,7 @@ const data: ComponentDataType = {
       y1: "38",
       y2: "150.5",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FF58E4", offset: "1" },

diff --git a/src/shapes/triangle/5.tsx b/src/shapes/triangle/5.tsx
@@ -27,6 +27,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },

diff --git a/src/shapes/triangle/8.tsx b/src/shapes/triangle/8.tsx
@@ -18,6 +18,7 @@ const data: ComponentDataType = {
       y1: "38",
       y2: "150.5",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FF58E4", offset: "1" },

diff --git a/src/shapes/wheel/3.tsx b/src/shapes/wheel/3.tsx
@@ -15,6 +15,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.55",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },

diff --git a/src/shapes/wheel/5.tsx b/src/shapes/wheel/5.tsx
@@ -14,6 +14,7 @@ const data: ComponentDataType = {
       y1: "0",
       y2: "200",
       type: "linear",
+      opacity: "0.75",
       stops: [
         { color: "#FF1F00", offset: 0 },
         { color: "#FFD600", offset: "1" },