From 6d95601399fe4ef998fed7d863ebd3fb71f3516e Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 22 May 2026 17:33:03 +0200
Subject: [PATCH] Add CSS variable for borders

---
 src/features/colorScheme/components/ColorSchemeButton.vue | 2 +-
 src/features/search/components/Searchbar.vue              | 2 +-
 src/features/search/views/SearchResultsView.vue           | 2 +-
 src/styles/variables/colors.css                           | 6 ++++++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/features/colorScheme/components/ColorSchemeButton.vue b/src/features/colorScheme/components/ColorSchemeButton.vue
index a039c0c..fc3a47d 100644
--- a/src/features/colorScheme/components/ColorSchemeButton.vue
+++ b/src/features/colorScheme/components/ColorSchemeButton.vue
@@ -51,7 +51,7 @@ const colorSchemeIconMapper = {
 <style scoped>
 .color-scheme-button {
     background: none;
-    border: 1.5px solid var(--dark-l-8);
+    border: 1.5px solid var(--border);
     border-radius: 50%;
     width: 36px;
     height: 36px;
diff --git a/src/features/search/components/Searchbar.vue b/src/features/search/components/Searchbar.vue
index 8955b17..817945e 100644
--- a/src/features/search/components/Searchbar.vue
+++ b/src/features/search/components/Searchbar.vue
@@ -54,7 +54,7 @@ const submitSearch = function () {
     --padding-left: calc(var(--content-height) + var(--padding));
     display: flex;
     align-items: center;
-    border: 1.5px solid var(--light-d-3);
+    border: 1.5px solid var(--border);
     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);
diff --git a/src/features/search/views/SearchResultsView.vue b/src/features/search/views/SearchResultsView.vue
index 40edb9d..3611429 100644
--- a/src/features/search/views/SearchResultsView.vue
+++ b/src/features/search/views/SearchResultsView.vue
@@ -73,7 +73,7 @@ searchQueryModel.value = props.searchQuery;
     display: flex;
     justify-content: center;
     flex-direction: column;
-    outline: 1px solid var(--light-d-2);
+    outline: 1px solid var(--border);
 }
 
 @media (max-width: 48rem) {
diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index 045d801..ca49d6b 100644
--- a/src/styles/variables/colors.css
+++ b/src/styles/variables/colors.css
@@ -75,6 +75,8 @@ limitations under the License.
 
     --dark-bg:              var(--black-l-2);
     --light-bg:             var(--white);
+
+    --border:               var(--white-d-3);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -101,6 +103,8 @@ limitations under the License.
 
         --dark-bg:              var(--white);
         --light-bg:             oklch(0.18 0 0);
+
+        --border:               var(--black-l-6);
     }
 }
 
@@ -127,4 +131,6 @@ limitations under the License.
 
     --dark-bg:              var(--white);
     --light-bg:             oklch(0.18 0 0);
+
+    --border:               var(--black-l-6);
 }
\ No newline at end of file