refactor: better Gradient interface

Author: JacobLinCool

src/core/elements.ts

@@ -331,7 +331,7 @@ export const selectors = [
     "#hard-solved-progress",
 ] as const;
 
-export function Gradient(id: string, colors: [string, number][], ratio = 0) {
+export function Gradient(id: string, colors: Record<string, string>, ratio = 0) {
     return new Item({
         type: "linearGradient",
         attr: {
@@ -341,8 +341,8 @@ export function Gradient(id: string, colors: [string, number][], ratio = 0) {
             x2: Math.round(Math.cos(ratio) * 100) / 100,
             y2: Math.round(Math.sin(ratio) * 100) / 100,
         },
-        children: colors.map((color) => {
-            return new Item({ type: "stop", attr: { offset: color[1], "stop-color": color[0] } });
+        children: Object.entries(colors).map(([offset, color]) => {
+            return new Item({ type: "stop", attr: { offset, "stop-color": color } });
         }),
     });
 }

src/core/exts/activity.ts

@@ -72,11 +72,11 @@ export function ActivityExtension(generator: Generator): Extension {
                 new Item({
                     type: "defs",
                     children: [
-                        Gradient("ext-activity-mask-gradient", [
-                            ["#fff", 0],
-                            ["#fff", 0.85],
-                            ["#000", 1],
-                        ]),
+                        Gradient("ext-activity-mask-gradient", {
+                            0: "#fff",
+                            0.85: "#fff",
+                            1: "#000",
+                        }),
                         new Item({
                             type: "mask",
                             attr: { id: "ext-activity-mask" },

src/core/theme/unicorn.ts

@@ -12,16 +12,8 @@ export default Theme({
     extends: new Item({
         type: "defs",
         children: [
-            Gradient("g-bg", [
-                ["#dbeafe", 0],
-                ["#e0e7ff", 0.5],
-                ["#fae8ff", 1],
-            ]),
-            Gradient("g-text", [
-                ["#2563eb", 0],
-                ["#4f46e5", 0.5],
-                ["#d946ef", 1],
-            ]),
+            Gradient("g-bg", { 0: "#dbeafe", 0.5: "#e0e7ff", 1: "#fae8ff" }),
+            Gradient("g-text", { 0: "#2563eb", 0.5: "#4f46e5", 1: "#d946ef" }),
         ],
     }),
 });