feat: add theme coffee, light and dark variants

packages/keybr-styles/lib/themes/index.less

@@ -4,4 +4,6 @@
 @import "theme-2-dark.less";
 @import "theme-3-gray.less";
 @import "theme-4-yellow.less";
-@import "theme-5-green.less";
+@import "theme-5-garden.less";
+@import "theme-6-coffee-light.less";
+@import "theme-7-coffee-dark.less";

packages/keybr-styles/lib/themes/theme-5-green.less → packages/keybr-styles/lib/themes/theme-5-garden.less

@@ -1,6 +1,6 @@
 @import "palettes.less";
 
-html[data-color="green"] {
+html[data-color="garden"] {
   @primary: #cee0a4;
   @secondary: #334532;
   @accent: #45633f;
@@ -29,7 +29,7 @@ html[data-color="green"] {
   .use-chart-colors(@primary, 0);
   .use-keyboard-colors(@primary, 0);
   .use-calendar-colors(@primary, #6699ff);
-  --background-image: url(../../assets/bg-green.svg);
+  --background-image: url(../../assets/bg-garden.svg);
   --Surface__box-shadow: 0 0.5rem 1rem var(--shadow-color);
   --Surface__backdrop-filter: blur(10px);
 }

packages/keybr-styles/lib/themes/theme-6-coffee-light.less

@@ -0,0 +1,37 @@
+@import "palettes.less";
+
+html[data-color="coffee-light"] {
+  @primary: #faecd7;
+  @secondary: #262626;
+  @accent: #4d4d4d;
+  @error: #a34729;
+
+  --primary-l2: lighten(@primary, 10);
+  --primary-l1: lighten(@primary, 5);
+  --primary: @primary;
+  --primary-d1: darken(@primary, 5);
+  --primary-d2: darken(@primary, 10);
+  --secondary-d1: darken(@secondary, 10);
+  --secondary: @secondary;
+  --secondary-l1: lighten(@secondary, 10);
+  --secondary-l2: lighten(@secondary, 20);
+  --secondary-f1: mix(@primary, @secondary, 20);
+  --secondary-f2: mix(@primary, @secondary, 40);
+  --accent-d2: darken(@accent, 20);
+  --accent-d1: darken(@accent, 10);
+  --accent: @accent;
+  --accent-l1: lighten(@accent, 10);
+  --accent-l2: lighten(@accent, 20);
+  --error-d1: darken(@error, 10);
+  --error: @error;
+  --error-l1: lighten(@error, 10);
+  --shadow-color: #00000044;
+  --slow-key-color: #cf5f5f;
+  --fast-key-color: #6fa882;
+  .use-chart-colors(@primary, 20);
+  .use-keyboard-colors(@primary, 20);
+  .use-calendar-colors(@primary, #759ef0);
+  --background-image: url(../../assets/bg-coffee-light.svg);
+  --Surface__box-shadow: 0 0.5rem 1rem var(--shadow-color);
+  --Surface__backdrop-filter: blur(10px);
+}

packages/keybr-styles/lib/themes/theme-7-coffee-dark.less

@@ -0,0 +1,37 @@
+@import "palettes.less";
+
+html[data-color="coffee-dark"] {
+  @primary: #604a43;
+  @secondary: #cfcfcf;
+  @accent: #ba8f81;
+  @error: #a34729;
+
+  --primary-l2: lighten(@primary, 10);
+  --primary-l1: lighten(@primary, 5);
+  --primary: @primary;
+  --primary-d1: darken(@primary, 5);
+  --primary-d2: darken(@primary, 10);
+  --secondary-d1: darken(@secondary, 10);
+  --secondary: @secondary;
+  --secondary-l1: lighten(@secondary, 10);
+  --secondary-l2: lighten(@secondary, 20);
+  --secondary-f1: mix(@primary, @secondary, 20);
+  --secondary-f2: mix(@primary, @secondary, 40);
+  --accent-d2: darken(@accent, 20);
+  --accent-d1: darken(@accent, 10);
+  --accent: @accent;
+  --accent-l1: lighten(@accent, 10);
+  --accent-l2: lighten(@accent, 20);
+  --error-d1: darken(@error, 10);
+  --error: @error;
+  --error-l1: lighten(@error, 10);
+  --shadow-color: #00000044;
+  --slow-key-color: #cf5f5f;
+  --fast-key-color: #6fa882;
+  .use-chart-colors(@primary, 20);
+  .use-keyboard-colors(@primary, 20);
+  .use-calendar-colors(@primary, #759ef0);
+  --background-image: url(../../assets/bg-coffee-dark.svg);
+  --Surface__box-shadow: 0 0.5rem 1rem var(--shadow-color);
+  --Surface__backdrop-filter: blur(10px);
+}

packages/keybr-styles/lib/themes/themes.ts

@@ -45,8 +45,16 @@ export const COLORS = new ThemeList([
     name: "Yellow",
   },
   {
-    id: "green",
-    name: "Green",
+    id: "garden",
+    name: "Garden",
+  },
+  {
+    id: "coffee-light",
+    name: "Coffee (Light)",
+  },
+  {
+    id: "coffee-dark",
+    name: "Coffee (Dark)",
   },
 ]);