diff --git a/packages/keybr-styles/assets/bg-coffee-dark.svg b/packages/keybr-styles/assets/bg-coffee-dark.svg
new file mode 100644
index 00000000..4b9819d8
--- /dev/null
+++ b/packages/keybr-styles/assets/bg-coffee-dark.svg
@@ -0,0 +1,133 @@
+
diff --git a/packages/keybr-styles/assets/bg-coffee-light.svg b/packages/keybr-styles/assets/bg-coffee-light.svg
new file mode 100644
index 00000000..b8a07e08
--- /dev/null
+++ b/packages/keybr-styles/assets/bg-coffee-light.svg
@@ -0,0 +1,133 @@
+
diff --git a/packages/keybr-styles/assets/bg-green.svg b/packages/keybr-styles/assets/bg-garden.svg
similarity index 100%
rename from packages/keybr-styles/assets/bg-green.svg
rename to packages/keybr-styles/assets/bg-garden.svg
diff --git a/packages/keybr-styles/lib/themes/index.less b/packages/keybr-styles/lib/themes/index.less
index e2b4dd38..d041712f 100644
--- a/packages/keybr-styles/lib/themes/index.less
+++ b/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";
diff --git a/packages/keybr-styles/lib/themes/theme-5-green.less b/packages/keybr-styles/lib/themes/theme-5-garden.less
similarity index 92%
rename from packages/keybr-styles/lib/themes/theme-5-green.less
rename to packages/keybr-styles/lib/themes/theme-5-garden.less
index 52ce3976..c12d460a 100644
--- a/packages/keybr-styles/lib/themes/theme-5-green.less
+++ b/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);
}
diff --git a/packages/keybr-styles/lib/themes/theme-6-coffee-light.less b/packages/keybr-styles/lib/themes/theme-6-coffee-light.less
new file mode 100644
index 00000000..83afbc3f
--- /dev/null
+++ b/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);
+}
diff --git a/packages/keybr-styles/lib/themes/theme-7-coffee-dark.less b/packages/keybr-styles/lib/themes/theme-7-coffee-dark.less
new file mode 100644
index 00000000..e84f22ac
--- /dev/null
+++ b/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);
+}
diff --git a/packages/keybr-styles/lib/themes/themes.ts b/packages/keybr-styles/lib/themes/themes.ts
index 5e28240b..e6478c24 100644
--- a/packages/keybr-styles/lib/themes/themes.ts
+++ b/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)",
},
]);