Merge pull request 'Change Colors' (#65) from bug/colors into main

Reviewed-on: #65
Reviewed-by: Jakob Scheid

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -52,7 +52,7 @@ const getTooltipTranslation = function (colorScheme) {
 <style scoped>
 .color-scheme-button {
     background: none;
-    border: 1.5px solid var(--light-d-3);
+    border: 1.5px solid var(--border);
     border-radius: 50%;
     width: 36px;
     height: 36px;
@@ -65,6 +65,6 @@ const getTooltipTranslation = function (colorScheme) {
 }
 
 .color-scheme-button:hover {
-    background: var(--light-d-2);
+    background: var(--light-hover);
 }
 </style>

src/features/footer/components/Footer.vue

@@ -40,7 +40,8 @@ const copyrightPeriod =
     display: flex;
     justify-content: center;
     padding: var(--padding-y);
-    background-color: var(--light-d-1);
     margin-top: var(--padding-y);
+    background-color: var(--light-bg);
+    border-top: 1px solid var(--border);
 }
 </style>

src/features/i18n/components/LanguageSwitchButton.vue

@@ -92,7 +92,7 @@ const open = function () {
     align-items: center;
     gap: 6px;
     background: none;
-    border: 1px solid var(--light-d-3);
+    border: 1px solid var(--border);
     border-radius: 6px;
     padding: 4px 10px;
     cursor: pointer;
@@ -100,7 +100,7 @@ const open = function () {
 }
 
 .language-button:hover {
-    background-color: var(--light-d-1);
+    background-color: var(--light-hover);
 }
 
 .chevron {
@@ -118,7 +118,7 @@ const open = function () {
     right: 0;
     top: calc(100% + 6px);
     background-color: var(--light-bg);
-    border: 1px solid var(--light-d-3);
+    border: 1px solid var(--border);
     border-radius: 8px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
     list-style: none;
@@ -138,7 +138,7 @@ const open = function () {
 }
 
 .language-dropdown li:hover {
-    background-color: var(--light-d-1);
+    background-color: var(--light-hover);
 }
 
 .language-dropdown li.active {

src/features/nav/components/Navbar.vue

@@ -55,7 +55,7 @@ import logo from '@/assets/logo.svg';
 
 .global-nav .right-links a {
     text-decoration: none;
-    color: #000;
+    color: var(--dark);
 }
 
 .global-nav .right-links a:hover{

src/features/search/components/Searchbar.vue

@@ -57,8 +57,8 @@ const submitSearch = function () {
     --padding-left: calc(var(--content-height) + var(--padding));
     display: flex;
     align-items: center;
-    border: 1.5px solid var(--light-d-3);
-    box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25);
+    border: 1.5px solid var(--border);
+    box-shadow: 0 0px 32px var(--blue-box-shadow);
     border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
     padding: var(--padding);
     padding-left: var(--padding-left);

src/features/search/views/SearchResultsView.vue

@@ -68,16 +68,16 @@ searchQueryModel.value = props.searchQuery;
 .search-results-error-message {
     padding: var(--error-message-padding);
     font-size: 18px;
-    box-shadow: 0px 0px 42px #cdcdcdb3;
+    box-shadow: 0px 0px 42px var(--gray-box-shadow);
     border-radius: 28px;
     text-align: center;
-    background-color: #f7f7f7;
+    background-color: var(--light-bg);
     animation: fade-in 0.8s ease-out;
     height: var(--error-message-height);
     display: flex;
     justify-content: center;
     flex-direction: column;
-    outline: 1px solid var(--light-d-2);
+    outline: 1px solid var(--border);
 }
 
 @media (max-width: 48rem) {

src/styles/variables/colors.css

@@ -75,6 +75,13 @@ limitations under the License.
 
     --dark-bg:              var(--black-l-2);
     --light-bg:             var(--white);
+
+    --border:               var(--white-d-3);
+
+    --gray-box-shadow:    oklch(0.8 0.0001 271 / 0.7);
+    --blue-box-shadow:    oklch(0.52 0.15 268 / 0.25);
+
+    --light-hover:          var(--light-d-2);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -90,7 +97,7 @@ limitations under the License.
         --dark:                 var(--white);
 
         --light:                var(--black);
-        --light-d-1:            var(--black-l-1);
+        --light-d-1:            oklch(0.10 0 0);
         --light-d-2:            var(--black-l-2);
         --light-d-3:            var(--black-l-3);
         --light-d-4:            var(--black-l-4);
@@ -100,7 +107,13 @@ limitations under the License.
         --light-d-8:            var(--black-l-8);
 
         --dark-bg:              var(--white);
-        --light-bg:             var(--black);
+        --light-bg:             oklch(0.18 0 0);
+
+        --border:               var(--black-l-6);
+
+        --gray-box-shadow:    oklch(0.25 0.0001 271 / 0.7);
+
+        --light-hover:          var(--light-d-5);
     }
 }
 
@@ -116,7 +129,7 @@ limitations under the License.
     --dark:                 var(--white);
 
     --light:                var(--black);
-    --light-d-1:            var(--black-l-1);
+    --light-d-1:            oklch(0.10 0 0);
     --light-d-2:            var(--black-l-2);
     --light-d-3:            var(--black-l-3);
     --light-d-4:            var(--black-l-4);
@@ -126,5 +139,11 @@ limitations under the License.
     --light-d-8:            var(--black-l-8);
 
     --dark-bg:              var(--white);
-    --light-bg:             var(--black);
+    --light-bg:             oklch(0.18 0 0);
+
+    --border:               var(--black-l-6);
+
+    --gray-box-shadow:    oklch(0.25 0.0001 271 / 0.7);
+
+    --light-hover:          var(--light-d-5);
 }