WIP

src/board/styles-board/gradient/smooth-forest.ts

@@ -1,25 +1,25 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Sunset",
+  name: "Smooth Forest",
   category: "gradient",
   background: {
     type: "gradient",
     data: {
       dir: "diagonal-top",
-      colors: ["hsl(32, 88%, 67%)", "hsl(342, 83%, 57%)"],
+      colors: ["#96C93D", "#00B09B"],
     },
   },
   dark: {
     type: "solid",
     data: {
-      color: "rgba(0, 0, 0, 0)",
+      color: "transparent",
     },
   },
   light: {
     type: "solid",
     data: {
-      color: "rgba(255, 255, 255, 0.5)",
+      color: "#ffffff7f",
     },
   },
   moveIndicator: {
@@ -30,11 +30,11 @@ const style: Style = {
     type: "gradient",
     data: {
       dir: "diagonal-top",
-      colors: ["hsl(22, 68%, 57%)", "hsl(332, 63%, 47%)"],
+      colors: ["#65A32E", "#007A80"],
     },
   },
   coords: {
-    onLight: "hsl(332, 63%, 47%)",
+    onLight: "#328E57",
     onDark: "#fff",
     onBorder: "#fff",
   },

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

@@ -1,7 +1,7 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Laguna",
+  name: "Smooth Laguna",
   category: "gradient",
   background: {
     type: "gradient",
@@ -19,7 +19,7 @@ const style: Style = {
   light: {
     type: "solid",
     data: {
-      color: "#ffffff77",
+      color: "#ffffff7f",
     },
   },
   moveIndicator: {
@@ -34,12 +34,10 @@ const style: Style = {
     },
   },
   coords: {
-    onLight: "#006f75",
+    onLight: "#007795",
     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/smooth-mono.ts

@@ -1,42 +1,42 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Calm",
+  name: "Smooth Mono",
   category: "gradient",
   background: {
     type: "gradient",
     data: {
       dir: "diagonal-top",
-      colors: ["#96c93d", "#00b09b"],
+      colors: ["#BFBFBF", "#7D7D7D"],
     },
   },
   dark: {
     type: "solid",
     data: {
-      color: "rgba(0, 0, 0, 0)",
+      color: "transparent",
     },
   },
   light: {
     type: "solid",
     data: {
-      color: "rgba(255, 255, 255, 0.5)",
+      color: "#ffffff7f",
     },
   },
   moveIndicator: {
     type: "color",
-    data: "#0055ff33",
+    data: "#3cff0055",
   },
   border: {
     type: "gradient",
     data: {
       dir: "diagonal-top",
-      colors: ["#65a32e", "#007a80"],
+      colors: ["#A1A1A1", "#606060"],
     },
   },
   coords: {
-    onLight: "rgba(0, 0, 0, 0.5)",
+    onLight: "#818181",
-    onDark: "rgba(255, 255, 255, 0.9)",
+    onDark: "#fff",
-    onBorder: "rgba(255, 255, 255, 0.9)",
+    onBorder: "#fff",
   },
 };
 

src/board/styles-board/gradient/smooth-sea.ts

@@ -0,0 +1,43 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Smooth Sea",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#2881E4", "#9E52FF"],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffffff7f",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#3cff0055",
+  },
+  border: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#1863B7", "#773DC1"],
+    },
+  },
+  coords: {
+    onLight: "#4750BC",
+    onDark: "#fff",
+    onBorder: "#fff",
+  },
+};
+
+export default style;

src/board/styles-board/gradient/smooth-spring.ts

@@ -0,0 +1,43 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Smooth Spring",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#D9DC5C", "#60C945"],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffffff7f",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#00ffee55",
+  },
+  border: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#B9BC4E", "#50A839"],
+    },
+  },
+  coords: {
+    onLight: "#81A33A",
+    onDark: "#fff",
+    onBorder: "#fff",
+  },
+};
+
+export default style;

src/board/styles-board/gradient/smooth-summer.ts

@@ -0,0 +1,43 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Smooth Summer",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#F5CB61", "#F58D61"],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffffff7f",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#00ffee55",
+  },
+  border: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#D1AC4F", "#D07852"],
+    },
+  },
+  coords: {
+    onLight: "#B2793C",
+    onDark: "#fff",
+    onBorder: "#fff",
+  },
+};
+
+export default style;

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

@@ -0,0 +1,43 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Smooth Sunset",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#F5B061", "#EC366D"],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffffff7f",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#00ffee55",
+  },
+  border: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#DC7D47", "#C32C73"],
+    },
+  },
+  coords: {
+    onLight: "#CF545D",
+    onDark: "#fff",
+    onBorder: "#fff",
+  },
+};
+
+export default style;

src/board/styles-board/gradient/smooth-violet.ts

@@ -0,0 +1,43 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Smooth Violet",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#DC3BCC", "#9E52FF"],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffffff7f",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#3cff0055",
+  },
+  border: {
+    type: "gradient",
+    data: {
+      dir: "diagonal-top",
+      colors: ["#AF2EA2", "#8243D3"],
+    },
+  },
+  coords: {
+    onLight: "#9838BA",
+    onDark: "#fff",
+    onBorder: "#fff",
+  },
+};
+
+export default style;

src/board/styles-board/index.ts

@@ -19,9 +19,16 @@ import mud from "./solid/mud";
 import rose from "./solid/rose";
 import avocado from "./solid/avocado";
 
-import calm from "./gradient/calm";
+// import flagUkraine from "./solid/flag-ukraine";
-import laguna from "./gradient/laguna";
+
-import sunset from "./gradient/sunset";
+import smoothSunset from "./gradient/smooth-sunset";
+import smoothSummer from "./gradient/smooth-summer";
+import smoothSpring from "./gradient/smooth-spring";
+import smoothForest from "./gradient/smooth-forest";
+import smoothLaguna from "./gradient/smooth-laguna";
+import smoothSea from "./gradient/smooth-sea";
+import smoothViolet from "./gradient/smooth-violet";
+import smoothMono from "./gradient/smooth-mono";
 
 import wood1 from "./pic/wood1";
 import wood2 from "./pic/wood2";
@@ -30,12 +37,13 @@ import wood4 from "./pic/wood4";
 
 const styles = {
   standard,
+  peach,
+  violet,
+  rose,
   lila,
   leko,
   patina,
   mud,
-  peach,
-  violet,
   danny,
   dannyGreen,
   dannyCyan,
@@ -48,10 +56,17 @@ const styles = {
   danya,
   botez,
   avocado,
-  rose,
+
-  calm,
+  // flagUkraine,
-  laguna,
+
-  sunset,
+  smoothSunset,
+  smoothSummer,
+  smoothSpring,
+  smoothForest,
+  smoothLaguna,
+  smoothSea,
+  smoothViolet,
+  smoothMono,
   wood1,
   wood2,
   wood3,

src/board/styles-board/solid/danny-blue.ts

@@ -23,7 +23,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#ffff007f",
+    data: "#00bfff7f",
   },
   border: {
     type: "solid",

src/board/styles-board/solid/danny-cyan.ts

@@ -23,7 +23,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#ffff007f",
+    data: "#00ff807f",
   },
   border: {
     type: "solid",

src/board/styles-board/solid/danny-green.ts

@@ -23,7 +23,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#ffff007f",
+    data: "#40ff007f",
   },
   border: {
     type: "solid",

src/board/styles-board/solid/danny-pink.ts

@@ -23,7 +23,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#ffff007f",
+    data: "#ff38637f",
   },
   border: {
     type: "solid",

src/board/styles-board/solid/danny-purple.ts

@@ -23,7 +23,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#ffff007f",
+    data: "#ff38af7f",
   },
   border: {
     type: "solid",
@@ -32,7 +32,7 @@ const style: Style = {
     },
   },
   coords: {
-    onLight: "#412F52",
+    onLight: "#412F52b",
     onDark: "#fcfce1",
     onBorder: "#eeeed2",
   },

src/board/styles-board/solid/danny-red.ts

@@ -23,7 +23,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#ffff007f",
+    data: "#ffaf387f",
   },
   border: {
     type: "solid",

src/board/styles-board/solid/flag-ukraine.ts

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Ukraine",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#3e81c9",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#FFEB82",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#00ff0055",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#003D7E",
+    },
+  },
+  coords: {
+    onLight: "#001D3C",
+    onDark: "#fff",
+    onBorder: "#FED500",
+  },
+};
+
+export default style;