Refactor styles to use CSS variables for colors, typography, and spacing

Author: Vianpyro

assets/styles/variables.css

@@ -2,24 +2,33 @@
     color-scheme: light dark;
 
     /* Colors */
-    --color-primary: #ff6f61;
-    --color-secondary: #ffcc5c;
-    --color-tertiary: #88d8b0;
-    --color-error: #cd3545;
+    --color-primary: light-dark(#b8d8ba, #426347);
+    --color-secondary: light-dark(#d9dbbc, #636645);
+    --color-tertiary: light-dark(#fcddbc, #925527);
+    --color-quaternary: light-dark(#ef959d, #782939);
+    --color-quinary: light-dark(#69585f, #2C2629);
+    --color-error: red;
+    --color-success: green;
 
     /* Typography */
     --font-family: 'Roboto', sans-serif;
-    --font-size-heading: 2.5rem;
-    --font-size-body: 1.6rem;
+    --font-size-heading: 2rem;
+    --font-size-title: 1.6rem;
+    --font-size-body: 1.1rem;
 
     /* Spacing */
     --spacing-small: 0.4rem;
     --spacing-medium: 1.6rem;
     --spacing-large: 3.2rem;
 
+    /* Curvature */
+    --border-radius-small: 0.4rem;
+    --border-radius-medium: 1.6rem;
+    --border-radius-large: 3.2rem;
+
     /* Personalized elements */
     --icon-size: 2rem;
-    --polaroid-background-color: light-dark(#e9e9e9, #161616);
+    --polaroid-color: light-dark(#e9e9e9, #161616);
     --polaroid-height: 107mm;
     --polaroid-photo-size: 79mm;
     --polaroid-width: 88mm;
@@ -28,14 +37,20 @@
 
 * {
     font-family: var(--font-family);
+    font-size: var(--font-size-body);
     margin: 0;
     padding: 0;
     transition-duration: .5s;
 }
 
+a {
+    color: var(--color-quinary);
+    font-weight: bold;
+    text-decoration: none;
+}
+
 button {
-    background-color: var(--background-color-tertiary);
-    color: var(--text-color-tertiary);
+    background-color: var(--color-primary);
     height: 3rem;
 }
 

components/Footer.vue

@@ -24,6 +24,6 @@ const yearString = computed(() => {
 <style scoped>
 footer {
     display: flex;
-    gap: .5rem;
+    gap: var(--spacing-small);
 }
 </style>

components/Header.vue

@@ -35,7 +35,7 @@ router.afterEach(() => {
 
 <style scoped>
 header {
-    background-color: rgb(0 0 0 / 30%);
+    background-color: var(--color-primary);
     display: flex;
     justify-content: space-between;
     width: 100%;
@@ -49,8 +49,7 @@ ul {
     align-items: center;
     display: flex;
     gap: var(--spacing-medium);
-    justify-content: center;
     list-style-type: none;
-    padding: 0;
+    margin-right: var(--spacing-medium);
 }
 </style>

components/RecipeCard.vue

@@ -42,7 +42,7 @@ const handleClick = () => {
 <style scoped>
 .card {
     align-items: center;
-    background-color: var(--polaroid-background-color);
+    background-color: var(--polaroid-color);
     border: 1px solid #888;
     cursor: pointer;
     display: flex;
@@ -59,6 +59,10 @@ const handleClick = () => {
     justify-content: center;
 }
 
+.recipe-title>h1 {
+    font-size: var(--font-size-title);
+}
+
 .card-body {
     background-size: cover;
     display: flex;
@@ -72,9 +76,8 @@ const handleClick = () => {
 .card-body * {
     background-repeat: no-repeat;
     background-size: var(--icon-size);
-    filter: drop-shadow(0 0 0.5rem var(--polaroid-background-color));
-    font-size: calc(var(--icon-size) * 0.75);
-    font-weight: bold;
+    filter: drop-shadow(0 0 var(--spacing-small) var(--polaroid-color));
+    font-size: var(--font-size-body);
     height: var(--icon-size);
     line-height: var(--icon-size);
 }

pages/account.vue

@@ -30,7 +30,7 @@ export default {
 
 <style scoped>
 #logout {
-    color: red;
+    color: var(--color-primary);
     font-weight: bold;
     width: 100%;
 }

pages/index.vue

@@ -1,8 +1,8 @@
 <template>
     <main>
         <div id="recipe-list">
-            <div v-if="error">Error: {{ error.message }}</div>
-            <div v-else-if="!recipes">Unable to fetch recipes</div>
+            <div v-if="error">Unable to load recipes, please try again later or contact support</div>
+            <div v-else-if="!recipes">Loading recipes...</div>
             <div v-else-if="!recipes.data">No recipes available</div>
             <div v-else>
                 <RecipeCard
@@ -30,12 +30,13 @@ main {
     overflow-y: auto;
 }
 
-#recipe-list> div {
+#recipe-list>div {
     display: flex;
     flex-wrap: wrap;
-    gap: 2rem;
+    gap: var(--spacing-medium);
     justify-content: center;
     justify-self: center;
     width: 80%;
+    text-wrap: nowrap;
 }
 </style>

pages/login.vue

@@ -58,10 +58,10 @@ section {
     display: flex;
     width: clamp(300px, 80%, 600px);
     flex-direction: column;
-    border: 1px solid var(--background-color-secondary);
+    border: 1px solid var(--color-primary);
     padding: 2rem;
-    border-radius: var(--border-radius);
-    gap: 1rem;
+    border-radius: var(--border-radius-small);
+    gap: var(--spacing-medium);
 }
 
 :deep(form>div) {
@@ -100,7 +100,7 @@ section {
     input.valid
 ) {
     background-color: rgb(0 255 0 / 5%);
-    border: 1px solid green;
+    border: 1px solid var(--color-success);
     box-sizing: border-box;
     width: 100%;
 }
@@ -110,7 +110,7 @@ section {
     input.invalid
 ) {
     background-color: rgb(255 0 0 / 5%);
-    border: 1px solid red;
+    border: 1px solid var(--color-error);
     box-sizing: border-box;
     width: 100%;
 }