WIP

src/board/styles-board/index.ts

@@ -16,11 +16,11 @@ import rainbowLight from "./gradient/rainbow-light";
 // import kittens from "./pic/kittens";
 
 export default {
+  standard,
   chesscom,
   lichess,
   lila,
   peach,
-  standard,
   violet,
   avocado,
   calm,

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

@@ -28,7 +28,7 @@ const style: Style = {
   border: {
     type: "solid",
     data: {
-      color: "#916655",
+      color: "#80634d",
     },
   },
   coords: {

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

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Mono",
+  category: "mono",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#999",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eee",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#0088ff66",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#444",
+    },
+  },
+  coords: {
+    onLight: "#999",
+    onDark: "#eee",
+    onBorder: "#eee",
+  },
+};
+
+export default style;

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

@@ -12,29 +12,29 @@ const style: Style = {
   dark: {
     type: "solid",
     data: {
-      color: "#999",
+      color: "#10ad88",
     },
   },
   light: {
     type: "solid",
     data: {
-      color: "#eee",
+      color: "#aae4d7",
     },
   },
   moveIndicator: {
     type: "color",
-    data: "#0088ff66",
+    data: "#ffff0055",
   },
   border: {
     type: "solid",
     data: {
-      color: "#444",
+      color: "#00735a",
     },
   },
   coords: {
-    onLight: "#999",
-    onDark: "#eee",
-    onBorder: "#eee",
+    onLight: "#00735a",
+    onDark: "#d4fff5",
+    onBorder: "#bbfaec",
   },
 };
 

src/state.ts

@@ -8,7 +8,7 @@ const mobile = isMobile();
 const boardConfig: BoardConfig = {
   size: 1024,
   tiles: 8,
-  boardStyle: "calm",
+  boardStyle: "standard",
   piecesStyle: "tatiana",
   showBorder: !mobile,
   showExtraInfo: true,

src/utils/colors.ts

@@ -63,7 +63,9 @@ const changeHSL = (
   const [r, g, b] = chunk(
     colorHex.length === 4 ? 1 : 2,
     colorHex.slice(1).split("")
-  ).map((x) => parseInt(x.join(""), 16));
+  ).map((x) => {
+    return parseInt(x.join(""), 16);
+  });
 
   let [h, s, l] = rgb2hsl(r, g, b);
   const absDelta = Math.abs(deltaH);