From df70abe128f10cd43427743c5e3a8f16ebda7563 Mon Sep 17 00:00:00 2001 From: Aliaksandr Radzivanovich Date: Sat, 12 Oct 2024 11:54:22 +0200 Subject: [PATCH] feat: add theme `coffee`, light and dark variants --- .../keybr-styles/assets/bg-coffee-dark.svg | 133 ++++++++++++++++++ .../keybr-styles/assets/bg-coffee-light.svg | 133 ++++++++++++++++++ .../assets/{bg-green.svg => bg-garden.svg} | 0 packages/keybr-styles/lib/themes/index.less | 4 +- ...theme-5-green.less => theme-5-garden.less} | 4 +- .../lib/themes/theme-6-coffee-light.less | 37 +++++ .../lib/themes/theme-7-coffee-dark.less | 37 +++++ packages/keybr-styles/lib/themes/themes.ts | 12 +- 8 files changed, 355 insertions(+), 5 deletions(-) create mode 100644 packages/keybr-styles/assets/bg-coffee-dark.svg create mode 100644 packages/keybr-styles/assets/bg-coffee-light.svg rename packages/keybr-styles/assets/{bg-green.svg => bg-garden.svg} (100%) rename packages/keybr-styles/lib/themes/{theme-5-green.less => theme-5-garden.less} (92%) create mode 100644 packages/keybr-styles/lib/themes/theme-6-coffee-light.less create mode 100644 packages/keybr-styles/lib/themes/theme-7-coffee-dark.less 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)", }, ]);