WIP

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

@@ -0,0 +1,43 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Calm",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#96c93d", "#00b09b"],
+    },
+  },
+  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: "#ee59ff55",
+  },
+  border: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#65a32e", "#007a80"],
+    },
+  },
+  coords: {
+    onLight: "rgba(0, 0, 0, 0.5)",
+    onDark: "rgba(255, 255, 255, 0.9)",
+    onBorder: "rgba(255, 255, 255, 0.9)",
+  },
+};
+
+export default style;

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% );