Merge pull request 'Use CSS variables #33' (#44) from refactor/css-variables into main

Reviewed-on: #44
Reviewed-by: Jakob Gregory

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);
 }
 </style>

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);
 }
 </style>

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')

src/styles/variables/colors.css

@@ -0,0 +1,62 @@
+: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);
+
+    --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);
+    --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-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);
+
+    --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);
+}

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;