WIP

src/board/styles-board/_.ts

@@ -2,6 +2,7 @@ import { Style } from "../../types";
 
 const style: Style = {
   name: "Temp",
+  category: "custom",
   background: {
     type: "gradient",
     data: {

src/board/styles-board/colorful/avocado.ts

@@ -1,7 +1,8 @@
-import { Style } from "../../types";
+import { Style } from "../../../types";
 
 const style: Style = {
   name: "Avocado",
+  category: "colorful",
   background: {
     type: "solid",
     data: {

src/board/styles-board/gradient/calm.ts

@@ -1,13 +1,8 @@
-import { Style } from "../../types";
+import { Style } from "../../../types";
 
 const style: Style = {
   name: "Calm",
-  // background: {
-  //   type: "solid",
-  //   data: {
-  //     color: "transparent",
-  //   },
-  // },
+  category: "gradient",
   background: {
     type: "gradient",
     data: {

src/board/styles-board/gradient/laguna.ts

@@ -0,0 +1,45 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Laguna",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#3df5a7", "#096fe0"],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffffff55",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#3cff0055",
+  },
+  border: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#00b568", "#0052ad"],
+    },
+  },
+  coords: {
+    onLight: "#006f75",
+    onDark: "#fff",
+    onBorder: "#fff",
+  },
+};
+
+export default style;
+
+// background-image: linear-gradient( 109.6deg,  rgba(61,245,167,1) 11.2%, rgba(9,111,224,1) 91.1% );

src/board/styles-board/gradient/rainbow-light.ts

@@ -0,0 +1,50 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Rainbow Light",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "vertical",
+      colors: [
+        "hsl(350, 100%, 60%)",
+        "hsl(35, 100%, 60%)",
+        "hsl(80, 100%, 60%)",
+        "hsl(125, 100%, 60%)",
+        "hsl(215, 100%, 60%)",
+        "hsl(260, 100%, 60%)",
+        "hsl(305, 100%, 60%)",
+      ],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#ffffff22",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffffff88",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#00ffff66",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#bd2f47",
+    },
+  },
+  coords: {
+    onLight: "#bd2f47",
+    onDark: "#000000bb",
+    onBorder: "#ffffffcc",
+  },
+};
+
+export default style;

src/board/styles-board/gradient/rainbow.ts

@@ -0,0 +1,50 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Rainbow",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "vertical",
+      colors: [
+        "hsl(350, 70%, 50%)",
+        "hsl(35, 70%, 50%)",
+        "hsl(80, 70%, 50%)",
+        "hsl(125, 70%, 50%)",
+        "hsl(215, 70%, 50%)",
+        "hsl(260, 70%, 50%)",
+        "hsl(305, 70%, 50%)",
+      ],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#ffffff22",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffffff99",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#00ffff66",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#271936",
+    },
+  },
+  coords: {
+    onLight: "#271936",
+    onDark: "#271936",
+    onBorder: "#ffffffbb",
+  },
+};
+
+export default style;

src/board/styles-board/gradient/sunset.ts

@@ -0,0 +1,45 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Sunset",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["hsl(32, 88%, 67%)", "hsl(342, 83%, 57%)"],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "rgba(0, 0, 0, 0)",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "rgba(255, 255, 255, 0.5)",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#00ffee55",
+  },
+  border: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["hsl(22, 68%, 57%)", "hsl(332, 63%, 47%)"],
+    },
+  },
+  coords: {
+    onLight: "hsl(332, 63%, 47%)",
+    onDark: "#fff",
+    onBorder: "#fff",
+  },
+};
+
+export default style;
+
+// background-image: linear-gradient( 68.3deg,  rgba(245,177,97,1) 0.4%, rgba(236,54,110,1) 100.2% );

src/board/styles-board/index.ts

@@ -1,21 +1,30 @@
-import avocado from "./avocado";
-import calm from "./calm";
-import standard from "./standard";
-import kittens from "./kittens";
-import lichess from "./lichess";
-import lila from "./lila";
-import mono from "./mono";
-import peach from "./peach";
-import temp from "./temp";
+import lichess from "./mono/lichess";
+import lila from "./mono/lila";
+import peach from "./mono/peach";
+import standard from "./mono/standard";
+import violet from "./mono/violet";
+
+import avocado from "./colorful/avocado";
+
+import calm from "./gradient/calm";
+import laguna from "./gradient/laguna";
+import sunset from "./gradient/sunset";
+import rainbow from "./gradient/rainbow";
+import rainbowLight from "./gradient/rainbow-light";
+
+import kittens from "./pic/kittens";
 
 export default {
-  avocado,
-  calm,
-  kittens,
   lichess,
   lila,
-  mono,
   peach,
   standard,
-  temp,
+  violet,
+  avocado,
+  calm,
+  laguna,
+  sunset,
+  rainbow,
+  rainbowLight,
+  kittens,
 };

src/board/styles-board/mono/lichess.ts

@@ -1,7 +1,8 @@
-import { Style } from "../../types";
+import { Style } from "../../../types";
 
 const style: Style = {
   name: "Lichess",
+  category: "mono",
   background: {
     type: "solid",
     data: {

src/board/styles-board/mono/lila.ts

@@ -1,7 +1,8 @@
-import { Style } from "../../types";
+import { Style } from "../../../types";
 
 const style: Style = {
   name: "Lila",
+  category: "mono",
   background: {
     type: "solid",
     data: {

src/board/styles-board/mono/peach.ts

@@ -1,7 +1,8 @@
-import { Style } from "../../types";
+import { Style } from "../../../types";
 
 const style: Style = {
   name: "Peach",
+  category: "mono",
   background: {
     type: "solid",
     data: {

src/board/styles-board/mono/standard.ts

@@ -1,7 +1,8 @@
-import { Style } from "../../types";
+import { Style } from "../../../types";
 
 const style: Style = {
   name: "Standard",
+  category: "mono",
   background: {
     type: "solid",
     data: {

src/board/styles-board/mono/violet.ts

@@ -1,39 +1,40 @@
-import { Style } from "../../types";
+import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Mono",
+  name: "Violet",
+  category: "mono",
   background: {
     type: "solid",
     data: {
-      color: "transparent",
+      color: "#361b52",
     },
   },
   dark: {
     type: "solid",
     data: {
-      color: "#bbb",
+      color: "#5d3e7d",
     },
   },
   light: {
     type: "solid",
     data: {
-      color: "#eee",
+      color: "#cea9f5",
     },
   },
   moveIndicator: {
-    type: "color",
-    data: "#00ff0044",
+    type: "hueShift",
+    data: 60,
   },
   border: {
     type: "solid",
     data: {
-      color: "#444",
+      color: "#271936",
     },
   },
   coords: {
-    onLight: "#bbb",
-    onDark: "#eee",
-    onBorder: "#eee",
+    onLight: "#271936",
+    onDark: "#271936",
+    onBorder: "#cea9f5",
   },
 };
 

src/board/styles-board/pic/kittens.ts

@@ -1,7 +1,8 @@
-import { Style } from "../../types";
+import { Style } from "../../../types";
 
 const style: Style = {
   name: "Kittens",
+  category: "pic",
   background: {
     type: "image",
     data: {