WIP

src/board/styles-board/avocado.ts

@@ -21,10 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "solid",
-    data: {
-      color: "#7D3EC155",
-    },
+    type: "hueShift",
+    data: 70,
   },
   border: {
     type: "solid",
@@ -33,8 +31,9 @@ const style: Style = {
     },
   },
   coords: {
-    lightColor: "#ececa4",
-    darkColor: "#ececa4",
+    onLight: "#72b339",
+    onDark: "#ececa4",
+    onBorder: "#ececa4",
   },
 };
 

src/board/styles-board/calm.ts

@@ -22,10 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "solid",
-    data: {
-      color: "#0077ff00",
-    },
+    type: "color",
+    data: "#ee59ff55",
   },
   border: {
     type: "gradient",
@@ -35,8 +33,9 @@ const style: Style = {
     },
   },
   coords: {
-    lightColor: "rgba(255, 255, 255, 0.9)",
-    darkColor: "rgba(255, 255, 255, 0.9)",
+    onLight: "rgba(0, 0, 0, 0.5)",
+    onDark: "rgba(255, 255, 255, 0.9)",
+    onBorder: "rgba(255, 255, 255, 0.9)",
   },
 };
 

src/board/styles-board/glass.ts

@@ -21,10 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "solid",
-    data: {
-      color: "#0055ff77",
-    },
+    type: "color",
+    data: "#00ffff55",
   },
   border: {
     type: "solid",
@@ -33,8 +31,9 @@ const style: Style = {
     },
   },
   coords: {
-    lightColor: "#222",
-    darkColor: "#222",
+    onLight: "#222",
+    onDark: "#ddd",
+    onBorder: "#ddd",
   },
 };
 

src/board/styles-board/index.ts

@@ -2,7 +2,7 @@ import avocado from "./avocado";
 import calm from "./calm";
 import standard from "./standard";
 import glass from "./glass";
-// import kittens from "./kittens";
+import kittens from "./kittens";
 import lichess from "./lichess";
 import lila from "./lila";
 import mono from "./mono";
@@ -12,7 +12,7 @@ export default {
   avocado,
   calm,
   glass,
-  // kittens,
+  kittens,
   lichess,
   lila,
   mono,

src/board/styles-board/kittens.ts

@@ -5,26 +5,24 @@ const style: Style = {
   background: {
     type: "image",
     data: {
-      src: "https://placekitten.com/1024/1024",
+      src: "https://placekitten.com/720/720",
     },
   },
   dark: {
-    type: "image",
+    type: "solid",
     data: {
-      src: "https://placekitten.com/128/128",
+      color: "#00000055",
     },
   },
   light: {
     type: "solid",
     data: {
-      color: "transparent",
+      color: "#ffffff55",
     },
   },
   moveIndicator: {
-    type: "solid",
-    data: {
-      color: "#0055ff77",
-    },
+    type: "color",
+    data: "#ffff0055",
   },
   border: {
     type: "solid",
@@ -33,8 +31,9 @@ const style: Style = {
     },
   },
   coords: {
-    lightColor: "#eee",
-    darkColor: "#eee",
+    onLight: "#333",
+    onDark: "#eee",
+    onBorder: "#eee",
   },
 };
 

src/board/styles-board/lichess.ts

@@ -21,21 +21,19 @@ const style: Style = {
     },
   },
   moveIndicator: {
+    type: "hueShift",
+    data: 40,
+  },
+  border: {
     type: "solid",
     data: {
-      color: "rgba(155,199,0,0.41)",
+      color: "#896d56",
     },
   },
-  border: null,
-  // border: {
-  //   type: "solid",
-  //   data: {
-  //     color: "#896d56",
-  //   },
-  // },
   coords: {
-    lightColor: "#f0d9b5",
-    darkColor: "#b58863",
+    onLight: "#b58863",
+    onDark: "#f0d9b5",
+    onBorder: "#f0d9b5",
   },
 };
 

src/board/styles-board/lila.ts

@@ -21,10 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "solid",
-    data: {
-      color: "#0055ff77",
-    },
+    type: "hueShift",
+    data: 180,
   },
   border: {
     type: "solid",
@@ -33,8 +31,9 @@ const style: Style = {
     },
   },
   coords: {
-    lightColor: "#e5d0cb",
-    darkColor: "#e5d0cb",
+    onLight: "#c0acb5",
+    onDark: "#e5d0cb",
+    onBorder: "#e5d0cb",
   },
 };
 

src/board/styles-board/mono.ts

@@ -21,10 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "solid",
-    data: {
-      color: "#0055ff77",
-    },
+    type: "color",
+    data: "#00ff0044",
   },
   border: {
     type: "solid",
@@ -33,8 +31,9 @@ const style: Style = {
     },
   },
   coords: {
-    lightColor: "#eee",
-    darkColor: "#eee",
+    onLight: "#bbb",
+    onDark: "#eee",
+    onBorder: "#eee",
   },
 };
 

src/board/styles-board/peach.ts

@@ -21,16 +21,19 @@ const style: Style = {
     },
   },
   moveIndicator: {
+    type: "hueShift",
+    data: 330,
+  },
+  border: {
     type: "solid",
     data: {
-      // color: "#0055ff77",
-      color: "transparent",
+      color: "#962c2c",
     },
   },
-  border: null,
   coords: {
-    lightColor: "#ffa987",
-    darkColor: "#e54b4b",
+    onLight: "#e54b4b",
+    onDark: "#ffa987",
+    onBorder: "#ffa987",
   },
 };
 

src/board/styles-board/standard.ts

@@ -21,10 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "solid",
-    data: {
-      color: "#0055ff55",
-    },
+    type: "color",
+    data: "#0088ff66",
   },
   border: {
     type: "solid",
@@ -33,8 +31,9 @@ const style: Style = {
     },
   },
   coords: {
-    lightColor: "#eee",
-    darkColor: "#eee",
+    onLight: "#999",
+    onDark: "#eee",
+    onBorder: "#eee",
   },
 };