Use OpenProps for consistent styles

src/components/ArticleSearch.svelte

@@ -40,7 +40,7 @@
 
 <style>
     .article-search {
-      padding: 1rem;
+      padding: var(--size-3);
       position: absolute;
       inset-inline: 0;
       border: var(--standard-border);
@@ -56,6 +56,6 @@
 
     input {
       inline-size: 100%;
-      margin-block-start: 0.25rem;
+      margin-block-start: var(--size-1);
     }
 </style>

src/components/Dropdown.svelte

@@ -44,6 +44,6 @@
 <style>
   summary {
     display: grid;
-    padding: 0.5rem;
+    padding: var(--size-2);
   }
 </style>

src/components/Footer.astro

@@ -20,9 +20,9 @@ const currentDateYear = new Date().getFullYear();
 
 <style>
   footer {
-    margin-block-start: 4rem;
-    padding-block: 1rem;
-    background: linear-gradient(
+    padding-block: var(--size-3);
+    margin-block-start: var(--size-9);
+    background-image: linear-gradient(
       0deg,
       var(--tertiary-background-color) 0%,
       var(--background-color) 100%
@@ -40,6 +40,6 @@ const currentDateYear = new Date().getFullYear();
     display: flex;
     flex-wrap: wrap;
     list-style: none;
-    gap: 1rem;
+    gap: var(--size-3);
   }
 </style>

src/components/Header.astro

@@ -11,6 +11,6 @@ const { title } = Astro.props;
 
 <style>
   header {
-    margin-block-end: 4rem;
+    margin-block-end: var(--size-9);
   }
 </style>

src/components/TableOfContents.svelte

@@ -24,7 +24,6 @@
   ul {
     position: absolute;
     border: var(--standard-border);
-    padding-inline-start: 2rem;
     background-color: var(--background-color);
     inset-block-start: var(--nav-height);
     margin: 0;
@@ -35,7 +34,7 @@
 
   a {
     display: block;
-    padding-inline: 1rem;
-    padding-block: 0.25rem;
+    padding-inline: var(--size-3);
+    padding-block: var(--size-1);
   }
 </style>

src/components/ThemeToggle.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import Dropdown from "./Dropdown.svelte";
 
-  let themeOptions = ["System", "Light", "Dark"];
+  let themeOptions = ["system", "light", "dark"];
 
   let theme = "System";
 
   function loadTheme() {
-    theme = localStorage.getItem("theme") || "System";
+    theme = localStorage.getItem("theme") || "system";
   }
 
   function saveTheme() {
@@ -27,7 +27,7 @@
     {#each themeOptions as option, index}
       <div class="input-wrapper">
         <input type="radio" id="theme-{option}" name="theme" value={option} bind:group={theme} on:change={saveTheme} />
-        <label for="theme-{option}">{option}</label>
+        <label for="theme-{option}">{option[0].toUpperCase() + option.slice(1)}</label>
       </div>
     {/each}
   </div>
@@ -40,18 +40,14 @@
     inset-block-start: var(--nav-height);
     background-color: var(--background-color);
     border: var(--standard-border);
-    padding: 1rem;
+    padding: var(--size-3);
     display: grid;
-    gap: 0.5rem;
-  }
-
-  input {
-    margin: 0;
+    gap: var(--size-2);
   }
 
   .input-wrapper {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--size-2);
   }
 </style>