From 32bfcf6b33c480992522a012dc3cd1832b27f882 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 13:22:20 +0200 Subject: [PATCH 01/15] Add color variables --- src/main.js | 1 + src/styles/variables/colors.css | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 src/styles/variables/colors.css diff --git a/src/main.js b/src/main.js index f790b14..9563118 100644 --- a/src/main.js +++ b/src/main.js @@ -17,5 +17,6 @@ import { createApp } from 'vue' import App from './App.vue' import router from './router' import './styles/common.css' +import './styles/variables/colors.css' createApp(App).use(router).mount('#app') diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css new file mode 100644 index 0000000..16281dc --- /dev/null +++ b/src/styles/variables/colors.css @@ -0,0 +1,20 @@ +:root { + --primary-color-l-8: oklch(0.897 0.202 260); + --primary-color-l-7: oklch(0.847 0.202 260); + --primary-color-l-6: oklch(0.797 0.202 260); + --primary-color-l-6: oklch(0.747 0.202 260); + --primary-color-l-4: oklch(0.697 0.202 260); + --primary-color-l-3: oklch(0.647 0.202 260); + --primary-color-l-2: oklch(0.597 0.202 260); + --primary-color-l-1: oklch(0.547 0.202 260); + --primary-color: oklch(0.497 0.202 260); + --primary-color-d-1: oklch(0.447 0.202 260); + --primary-color-d-2: oklch(0.397 0.202 260); + --primary-color-d-3: oklch(0.347 0.202 260); + --primary-color-d-4: oklch(0.297 0.202 260); + --primary-color-d-5: oklch(0.247 0.202 260); + --primary-color-d-6: oklch(0.197 0.202 260); + --primary-color-d-7: oklch(0.147 0.202 260); + --primary-color-d-8: oklch(0.097 0.202 260); + +} \ No newline at end of file From 0e8a49969a9fac4c422ead2a5ec4dc8c8450d5bc Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 13:22:32 +0200 Subject: [PATCH 02/15] Use color variables --- src/views/SearchView.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue index 73d4aa0..0ec7c61 100644 --- a/src/views/SearchView.vue +++ b/src/views/SearchView.vue @@ -44,7 +44,12 @@ import Searchbar from '../features/search/components/Searchbar.vue' display: inline-block; margin: 0; line-height: 1; - background: linear-gradient(to right, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F); + background: linear-gradient( + to right, + var(--primary-color-l-4), + var(--primary-color), + var(--primary-color-d-4) + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; From 69453b947d5d5669dd51b23bbf096d2ff01ec150 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 13:27:03 +0200 Subject: [PATCH 03/15] Add shades of black --- src/styles/variables/colors.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index 16281dc..7d55097 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -17,4 +17,7 @@ --primary-color-d-7: oklch(0.147 0.202 260); --primary-color-d-8: oklch(0.097 0.202 260); + --black-l-2: oklch(0.2, 0, 0); + --black-l-1: oklch(0.1, 0, 0); + --black: oklch(0, 0, 0); } \ No newline at end of file From 9cdca85a4d92c1272afc16f55afa9820d0555a35 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 13:27:16 +0200 Subject: [PATCH 04/15] Add shades of white --- src/styles/variables/colors.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index 7d55097..a99a0d0 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -20,4 +20,8 @@ --black-l-2: oklch(0.2, 0, 0); --black-l-1: oklch(0.1, 0, 0); --black: oklch(0, 0, 0); + + --white: oklch(1 0 0); + --white-d-1: oklch(0.9 0 0); + --white-d-2: oklch(0.8 0 0); } \ No newline at end of file From 13f026eaab97aae19b7273b3d3606c26374fb7e1 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 13:28:15 +0200 Subject: [PATCH 05/15] Add dark colors --- src/styles/variables/colors.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index a99a0d0..0b3ad24 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -24,4 +24,8 @@ --white: oklch(1 0 0); --white-d-1: oklch(0.9 0 0); --white-d-2: oklch(0.8 0 0); + + --dark-l-2: var(--black-l-2); + --dark-l-1: var(--black-l-1); + --dark: var(--black); } \ No newline at end of file From de20ae89fc0854c85abdcb35c82d7241471b67b8 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 13:28:54 +0200 Subject: [PATCH 06/15] Add light colors --- src/styles/variables/colors.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index 0b3ad24..ce951d7 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -28,4 +28,8 @@ --dark-l-2: var(--black-l-2); --dark-l-1: var(--black-l-1); --dark: var(--black); + + --light: var(--white); + --light-d-1: var(--white-d-1); + --light-d-2: var(--white-d-2); } \ No newline at end of file From 61c3d2ff7c232ea525d6d7b38243b4a9e4834a43 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 13:41:57 +0200 Subject: [PATCH 07/15] Add dark colors --- src/styles/variables/colors.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index ce951d7..559242e 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -29,7 +29,7 @@ --dark-l-1: var(--black-l-1); --dark: var(--black); - --light: var(--white); - --light-d-1: var(--white-d-1); - --light-d-2: var(--white-d-2); + --light: var(--white); + --light-d-1: var(--white-d-1); + --light-d-2: var(--white-d-2); } \ No newline at end of file From 0e1148094a567ccf84bb81326b9349c3643d0ad7 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 15:12:05 +0200 Subject: [PATCH 08/15] Add background colors --- src/styles/variables/colors.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index 559242e..05946bc 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -32,4 +32,7 @@ --light: var(--white); --light-d-1: var(--white-d-1); --light-d-2: var(--white-d-2); + + --dark-bg: var(--dark-l-2); + --light-bg: var(--light-d-2); } \ No newline at end of file From 257b7ed886647ab36e9b0f7546ff6633cfb40231 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 15:20:06 +0200 Subject: [PATCH 09/15] Update white shades --- src/styles/variables/colors.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index 05946bc..c42347d 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -22,8 +22,14 @@ --black: oklch(0, 0, 0); --white: oklch(1 0 0); - --white-d-1: oklch(0.9 0 0); - --white-d-2: oklch(0.8 0 0); + --white-d-1: oklch(0.95 0 0); + --white-d-2: oklch(0.9 0 0); + --white-d-3: oklch(0.85 0 0); + --white-d-4: oklch(0.8 0 0); + --white-d-5: oklch(0.75 0 0); + --white-d-6: oklch(0.7 0 0); + --white-d-7: oklch(0.65 0 0); + --white-d-8: oklch(0.6 0 0); --dark-l-2: var(--black-l-2); --dark-l-1: var(--black-l-1); @@ -34,5 +40,5 @@ --light-d-2: var(--white-d-2); --dark-bg: var(--dark-l-2); - --light-bg: var(--light-d-2); + --light-bg: oklch(1 0 0); } \ No newline at end of file From 2718227745e3373975bf791621161a6fadaccccd Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 15:21:37 +0200 Subject: [PATCH 10/15] Update black shades --- src/styles/variables/colors.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index c42347d..68784ae 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -17,8 +17,14 @@ --primary-color-d-7: oklch(0.147 0.202 260); --primary-color-d-8: oklch(0.097 0.202 260); - --black-l-2: oklch(0.2, 0, 0); - --black-l-1: oklch(0.1, 0, 0); + --black-l-8: oklch(0.4, 0, 0); + --black-l-7: oklch(0.35, 0, 0); + --black-l-6: oklch(0.3, 0, 0); + --black-l-5: oklch(0.25, 0, 0); + --black-l-4: oklch(0.2, 0, 0); + --black-l-3: oklch(0.15, 0, 0); + --black-l-2: oklch(0.1, 0, 0); + --black-l-1: oklch(0.05, 0, 0); --black: oklch(0, 0, 0); --white: oklch(1 0 0); @@ -39,6 +45,6 @@ --light-d-1: var(--white-d-1); --light-d-2: var(--white-d-2); - --dark-bg: var(--dark-l-2); + --dark-bg: var(--black-l-2); --light-bg: oklch(1 0 0); } \ No newline at end of file From 94cdf6aa9917d429aede9221f1abeeeb9cc1c468 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 15:23:07 +0200 Subject: [PATCH 11/15] Use CSS variables in the footer --- src/features/footer/components/Footer.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/footer/components/Footer.vue b/src/features/footer/components/Footer.vue index d72764a..f411962 100644 --- a/src/features/footer/components/Footer.vue +++ b/src/features/footer/components/Footer.vue @@ -24,7 +24,7 @@ const copyrightPeriod = display: flex; justify-content: center; padding: var(--padding-y); - background-color: #f2f2f2; + background-color: var(--light-d-1); margin-top: var(--padding-y); } \ No newline at end of file From 6450c1260070ea141467b0c7a83bde337f2d9dd9 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 15:24:44 +0200 Subject: [PATCH 12/15] Update dark colors --- src/styles/variables/colors.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index 68784ae..ff323da 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -37,6 +37,12 @@ --white-d-7: oklch(0.65 0 0); --white-d-8: oklch(0.6 0 0); + --dark-l-8: var(--black-l-8); + --dark-l-7: var(--black-l-7); + --dark-l-6: var(--black-l-6); + --dark-l-5: var(--black-l-5); + --dark-l-4: var(--black-l-4); + --dark-l-3: var(--black-l-3); --dark-l-2: var(--black-l-2); --dark-l-1: var(--black-l-1); --dark: var(--black); From 7ea64524d18ed2be9fc3306bb09e81a1a6709b38 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 15:26:39 +0200 Subject: [PATCH 13/15] Update light colors --- src/styles/variables/colors.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index ff323da..0087898 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -50,6 +50,12 @@ --light: var(--white); --light-d-1: var(--white-d-1); --light-d-2: var(--white-d-2); + --light-d-3: var(--white-d-3); + --light-d-4: var(--white-d-4); + --light-d-5: var(--white-d-5); + --light-d-6: var(--white-d-6); + --light-d-7: var(--white-d-7); + --light-d-8: var(--white-d-8); --dark-bg: var(--black-l-2); --light-bg: oklch(1 0 0); From 933f5ace80f201c9f6de475d75471797b15d41f1 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 15:32:31 +0200 Subject: [PATCH 14/15] Bug fix: remove commas from the CSS variables starting with --black --- src/styles/variables/colors.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index 0087898..6f1e1aa 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -17,15 +17,15 @@ --primary-color-d-7: oklch(0.147 0.202 260); --primary-color-d-8: oklch(0.097 0.202 260); - --black-l-8: oklch(0.4, 0, 0); - --black-l-7: oklch(0.35, 0, 0); - --black-l-6: oklch(0.3, 0, 0); - --black-l-5: oklch(0.25, 0, 0); - --black-l-4: oklch(0.2, 0, 0); - --black-l-3: oklch(0.15, 0, 0); - --black-l-2: oklch(0.1, 0, 0); - --black-l-1: oklch(0.05, 0, 0); - --black: oklch(0, 0, 0); + --black-l-8: oklch(0.4 0 0); + --black-l-7: oklch(0.35 0 0); + --black-l-6: oklch(0.3 0 0); + --black-l-5: oklch(0.25 0 0); + --black-l-4: oklch(0.2 0 0); + --black-l-3: oklch(0.15 0 0); + --black-l-2: oklch(0.1 0 0); + --black-l-1: oklch(0.05 0 0); + --black: oklch(0 0 0); --white: oklch(1 0 0); --white-d-1: oklch(0.95 0 0); From 95c383d58ad5f3aae30aacb088a7e68f3399a7b7 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 15:35:54 +0200 Subject: [PATCH 15/15] Apply CSS variables to the search bar --- src/features/search/components/Searchbar.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/features/search/components/Searchbar.vue b/src/features/search/components/Searchbar.vue index 4017338..be24483 100644 --- a/src/features/search/components/Searchbar.vue +++ b/src/features/search/components/Searchbar.vue @@ -29,7 +29,7 @@ limitations under the License. --padding-left: calc(var(--content-height) + var(--padding)); display: flex; align-items: center; - border: 1.5px solid #ccc; + border: 1.5px solid var(--light-d-3); box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25); border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding)); padding: var(--padding); @@ -52,13 +52,13 @@ limitations under the License. border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y)); border: none; padding: var(--submit-button-padding-y) 20px; - background: #4562BE; + background: var(--primary-color); color: white; cursor: pointer; white-space: nowrap; } .search-button:hover { - background: #374FA5; + background: var(--primary-color-l-1); } \ No newline at end of file