✨ remove dark theme media query on default option

alfatah · Feb 26, 2023 · fd133c8 · fd133c8
1 parent 229c9a9
commit fd133c8
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 96 deletions.
diff --git a/packages/action/__tests__/__snapshots__/outputsOptions.spec.ts.snap b/packages/action/__tests__/__snapshots__/outputsOptions.spec.ts.snap
@@ -1,81 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should parse /out.svg       {"color_snake":"yellow"} 1`] = `
-{
-  "animationOptions": {
-    "frameDuration": 100,
-    "step": 1,
-  },
-  "drawOptions": {
-    "colorDotBorder": "#1b1f230a",
-    "colorDots": [
-      "#ebedf0",
-      "#9be9a8",
-      "#40c463",
-      "#30a14e",
-      "#216e39",
-    ],
-    "colorEmpty": "#ebedf0",
-    "colorSnake": "yellow",
-    "dark": {
-      "colorDotBorder": "#1b1f230a",
-      "colorDots": [
-        "#161b22",
-        "#01311f",
-        "#034525",
-        "#0f6d31",
-        "#00c647",
-      ],
-      "colorEmpty": "#161b22",
-      "colorSnake": "purple",
-    },
-    "sizeCell": 16,
-    "sizeDot": 12,
-    "sizeDotBorderRadius": 2,
-  },
-  "filename": "/out.svg",
-  "format": "svg",
-}
-`;
-
-exports[`should parse /out.svg?.gif.svg?color_snake=orange 1`] = `
-{
-  "animationOptions": {
-    "frameDuration": 100,
-    "step": 1,
-  },
-  "drawOptions": {
-    "colorDotBorder": "#1b1f230a",
-    "colorDots": [
-      "#ebedf0",
-      "#9be9a8",
-      "#40c463",
-      "#30a14e",
-      "#216e39",
-    ],
-    "colorEmpty": "#ebedf0",
-    "colorSnake": "orange",
-    "dark": {
-      "colorDotBorder": "#1b1f230a",
-      "colorDots": [
-        "#161b22",
-        "#01311f",
-        "#034525",
-        "#0f6d31",
-        "#00c647",
-      ],
-      "colorEmpty": "#161b22",
-      "colorSnake": "purple",
-    },
-    "sizeCell": 16,
-    "sizeDot": 12,
-    "sizeDotBorderRadius": 2,
-  },
-  "filename": "/out.svg?.gif.svg",
-  "format": "svg",
-}
-`;
-
 exports[`should parse /out.svg?{"color_snake":"yellow","color_dots":["#000","#111","#222","#333","#444"]} 1`] = `
 {
   "animationOptions": {
@@ -148,6 +72,7 @@ exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333
     "colorEmpty": "#000",
     "colorSnake": "orange",
     "dark": {
+      "colorDotBorder": "#1b1f230a",
       "colorDots": [
         "#a00",
         "#a11",
@@ -156,6 +81,7 @@ exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333
         "#a44",
       ],
       "colorEmpty": "#a00",
+      "colorSnake": "orange",
     },
     "sizeCell": 16,
     "sizeDot": 12,
@@ -183,18 +109,7 @@ exports[`should parse path/to/out.gif 1`] = `
     ],
     "colorEmpty": "#ebedf0",
     "colorSnake": "purple",
-    "dark": {
-      "colorDotBorder": "#1b1f230a",
-      "colorDots": [
-        "#161b22",
-        "#01311f",
-        "#034525",
-        "#0f6d31",
-        "#00c647",
-      ],
-      "colorEmpty": "#161b22",
-      "colorSnake": "purple",
-    },
+    "dark": undefined,
     "sizeCell": 16,
     "sizeDot": 12,
     "sizeDotBorderRadius": 2,

diff --git a/packages/action/__tests__/outputsOptions.spec.ts b/packages/action/__tests__/outputsOptions.spec.ts
@@ -1,17 +1,58 @@
 import { parseEntry } from "../outputsOptions";
 
+it("should parse options as json", () => {
+  expect(
+    parseEntry(`/out.svg       {"color_snake":"yellow"}`)?.drawOptions
+  ).toHaveProperty("colorSnake", "yellow");
+
+  expect(
+    parseEntry(`/out.svg?{"color_snake":"yellow"}`)?.drawOptions
+  ).toHaveProperty("colorSnake", "yellow");
+
+  expect(
+    parseEntry(`/out.svg?{"color_dots":["#000","#111","#222","#333","#444"]}`)
+      ?.drawOptions.colorDots
+  ).toEqual(["#000", "#111", "#222", "#333", "#444"]);
+});
+
+it("should parse options as searchparams", () => {
+  expect(parseEntry(`/out.svg?color_snake=yellow`)?.drawOptions).toHaveProperty(
+    "colorSnake",
+    "yellow"
+  );
+
+  expect(
+    parseEntry(`/out.svg?color_dots=#000,#111,#222,#333,#444`)?.drawOptions
+      .colorDots
+  ).toEqual(["#000", "#111", "#222", "#333", "#444"]);
+});
+
+it("should parse filename", () => {
+  expect(parseEntry(`/a/b/c.svg?{"color_snake":"yellow"}`)).toHaveProperty(
+    "filename",
+    "/a/b/c.svg"
+  );
+  expect(
+    parseEntry(`/a/b/out.svg?.gif.svg?{"color_snake":"yellow"}`)
+  ).toHaveProperty("filename", "/a/b/out.svg?.gif.svg");
+
+  expect(
+    parseEntry(`/a/b/{[-1].svg?.gif.svg?{"color_snake":"yellow"}`)
+  ).toHaveProperty("filename", "/a/b/{[-1].svg?.gif.svg");
+});
+
 [
+  // default
   "path/to/out.gif",
 
+  // overwrite colors (search params)
   "/out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444",
 
+  // overwrite colors (json)
   `/out.svg?{"color_snake":"yellow","color_dots":["#000","#111","#222","#333","#444"]}`,
 
-  `/out.svg       {"color_snake":"yellow"}`,
-
+  // overwrite dark colors
   "/out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444&dark_color_dots=#a00,#a11,#a22,#a33,#a44",
-
-  "/out.svg?.gif.svg?color_snake=orange",
 ].forEach((entry) =>
   it(`should parse ${entry}`, () => {
     expect(parseEntry(entry)).toMatchSnapshot();

diff --git a/packages/action/outputsOptions.ts b/packages/action/outputsOptions.ts
@@ -32,6 +32,7 @@ export const parseEntry = (entry: string) => {
     sizeCell: 16,
     sizeDot: 12,
     ...palettes["default"],
+    dark: palettes["default"].dark && { ...palettes["default"].dark },
   };
   const animationOptions: AnimationOptions = { step: 1, frameDuration: 100 };
 
@@ -43,6 +44,14 @@ export const parseEntry = (entry: string) => {
     }
   }
 
+  {
+    const dark_palette = palettes[sp.get("dark_palette")!];
+    if (dark_palette) {
+      const clone = { ...dark_palette, dark: undefined };
+      drawOptions.dark = clone;
+    }
+  }
+
   if (sp.has("color_snake")) drawOptions.colorSnake = sp.get("color_snake")!;
   if (sp.has("color_dots")) {
     const colors = sp.get("color_dots")!.split(/[,;]/);
@@ -56,6 +65,8 @@ export const parseEntry = (entry: string) => {
   if (sp.has("dark_color_dots")) {
     const colors = sp.get("dark_color_dots")!.split(/[,;]/);
     drawOptions.dark = {
+      colorDotBorder: drawOptions.colorDotBorder,
+      colorSnake: drawOptions.colorSnake,
       ...drawOptions.dark,
       colorDots: colors,
       colorEmpty: colors[0],

diff --git a/packages/action/palettes.ts b/packages/action/palettes.ts
@@ -23,8 +23,5 @@ export const basePalettes: Record<
 
 // aliases
 export const palettes = { ...basePalettes };
-palettes["github"] = {
-  ...palettes["github-light"],
-  dark: { ...palettes["github-dark"] },
-};
+palettes["github"] = palettes["github-light"];
 palettes["default"] = palettes["github"];