From 9b7b599714424945069936f5a862a8fbb199d819 Mon Sep 17 00:00:00 2001 From: Maciej Caderek Date: Tue, 1 Mar 2022 01:32:24 +0100 Subject: [PATCH] WIP --- .../gradient/{sunset.ts => smooth-forest.ts} | 12 +++--- .../gradient/{laguna.ts => smooth-laguna.ts} | 8 ++-- .../gradient/{calm.ts => smooth-mono.ts} | 18 ++++---- src/board/styles-board/gradient/smooth-sea.ts | 43 +++++++++++++++++++ .../styles-board/gradient/smooth-spring.ts | 43 +++++++++++++++++++ .../styles-board/gradient/smooth-summer.ts | 43 +++++++++++++++++++ .../styles-board/gradient/smooth-sunset.ts | 43 +++++++++++++++++++ .../styles-board/gradient/smooth-violet.ts | 43 +++++++++++++++++++ src/board/styles-board/index.ts | 33 ++++++++++---- src/board/styles-board/solid/danny-blue.ts | 2 +- src/board/styles-board/solid/danny-cyan.ts | 2 +- src/board/styles-board/solid/danny-green.ts | 2 +- src/board/styles-board/solid/danny-pink.ts | 2 +- src/board/styles-board/solid/danny-purple.ts | 4 +- src/board/styles-board/solid/danny-red.ts | 2 +- src/board/styles-board/solid/flag-ukraine.ts | 41 ++++++++++++++++++ 16 files changed, 305 insertions(+), 36 deletions(-) rename src/board/styles-board/gradient/{sunset.ts => smooth-forest.ts} (67%) rename src/board/styles-board/gradient/{laguna.ts => smooth-laguna.ts} (78%) rename src/board/styles-board/gradient/{calm.ts => smooth-mono.ts} (59%) create mode 100644 src/board/styles-board/gradient/smooth-sea.ts create mode 100644 src/board/styles-board/gradient/smooth-spring.ts create mode 100644 src/board/styles-board/gradient/smooth-summer.ts create mode 100644 src/board/styles-board/gradient/smooth-sunset.ts create mode 100644 src/board/styles-board/gradient/smooth-violet.ts create mode 100644 src/board/styles-board/solid/flag-ukraine.ts diff --git a/src/board/styles-board/gradient/sunset.ts b/src/board/styles-board/gradient/smooth-forest.ts similarity index 67% rename from src/board/styles-board/gradient/sunset.ts rename to src/board/styles-board/gradient/smooth-forest.ts index aefde98..f20df3f 100644 --- a/src/board/styles-board/gradient/sunset.ts +++ b/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", }, diff --git a/src/board/styles-board/gradient/laguna.ts b/src/board/styles-board/gradient/smooth-laguna.ts similarity index 78% rename from src/board/styles-board/gradient/laguna.ts rename to src/board/styles-board/gradient/smooth-laguna.ts index 374653c..ed28144 100644 --- a/src/board/styles-board/gradient/laguna.ts +++ b/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% ); diff --git a/src/board/styles-board/gradient/calm.ts b/src/board/styles-board/gradient/smooth-mono.ts similarity index 59% rename from src/board/styles-board/gradient/calm.ts rename to src/board/styles-board/gradient/smooth-mono.ts index 20ee423..0fdab0c 100644 --- a/src/board/styles-board/gradient/calm.ts +++ b/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)", - onDark: "rgba(255, 255, 255, 0.9)", - onBorder: "rgba(255, 255, 255, 0.9)", + onLight: "#818181", + onDark: "#fff", + onBorder: "#fff", }, }; diff --git a/src/board/styles-board/gradient/smooth-sea.ts b/src/board/styles-board/gradient/smooth-sea.ts new file mode 100644 index 0000000..4e9c129 --- /dev/null +++ b/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; diff --git a/src/board/styles-board/gradient/smooth-spring.ts b/src/board/styles-board/gradient/smooth-spring.ts new file mode 100644 index 0000000..558b215 --- /dev/null +++ b/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; diff --git a/src/board/styles-board/gradient/smooth-summer.ts b/src/board/styles-board/gradient/smooth-summer.ts new file mode 100644 index 0000000..4f50bca --- /dev/null +++ b/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; diff --git a/src/board/styles-board/gradient/smooth-sunset.ts b/src/board/styles-board/gradient/smooth-sunset.ts new file mode 100644 index 0000000..8f17cbb --- /dev/null +++ b/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; diff --git a/src/board/styles-board/gradient/smooth-violet.ts b/src/board/styles-board/gradient/smooth-violet.ts new file mode 100644 index 0000000..f2c0202 --- /dev/null +++ b/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; diff --git a/src/board/styles-board/index.ts b/src/board/styles-board/index.ts index ac93ba2..b5431bf 100644 --- a/src/board/styles-board/index.ts +++ b/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 laguna from "./gradient/laguna"; -import sunset from "./gradient/sunset"; +// import flagUkraine from "./solid/flag-ukraine"; + +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, - laguna, - sunset, + + // flagUkraine, + + smoothSunset, + smoothSummer, + smoothSpring, + smoothForest, + smoothLaguna, + smoothSea, + smoothViolet, + smoothMono, wood1, wood2, wood3, diff --git a/src/board/styles-board/solid/danny-blue.ts b/src/board/styles-board/solid/danny-blue.ts index 4903604..bd8c357 100644 --- a/src/board/styles-board/solid/danny-blue.ts +++ b/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", diff --git a/src/board/styles-board/solid/danny-cyan.ts b/src/board/styles-board/solid/danny-cyan.ts index 39d42c1..aacc1f8 100644 --- a/src/board/styles-board/solid/danny-cyan.ts +++ b/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", diff --git a/src/board/styles-board/solid/danny-green.ts b/src/board/styles-board/solid/danny-green.ts index cccfcbc..168697e 100644 --- a/src/board/styles-board/solid/danny-green.ts +++ b/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", diff --git a/src/board/styles-board/solid/danny-pink.ts b/src/board/styles-board/solid/danny-pink.ts index 55f033c..51dd700 100644 --- a/src/board/styles-board/solid/danny-pink.ts +++ b/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", diff --git a/src/board/styles-board/solid/danny-purple.ts b/src/board/styles-board/solid/danny-purple.ts index 54a2ce1..5f81a89 100644 --- a/src/board/styles-board/solid/danny-purple.ts +++ b/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", }, diff --git a/src/board/styles-board/solid/danny-red.ts b/src/board/styles-board/solid/danny-red.ts index 5673f6e..c4c2cca 100644 --- a/src/board/styles-board/solid/danny-red.ts +++ b/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", diff --git a/src/board/styles-board/solid/flag-ukraine.ts b/src/board/styles-board/solid/flag-ukraine.ts new file mode 100644 index 0000000..54b3e7a --- /dev/null +++ b/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;