Use OpenProps for consistent styles

package-lock.json

@@ -12,6 +12,7 @@
         "@fontsource/jetbrains-mono": "^4.5.12",
         "@fontsource/roboto": "^4.5.8",
         "astro": "^2.4.5",
+        "open-props": "^1.5.8",
         "rehype-autolink-headings": "^6.1.1",
         "sharp": "^0.32.1",
         "svelte": "^3.59.1"
@@ -3851,6 +3852,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/open-props": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/open-props/-/open-props-1.5.8.tgz",
+      "integrity": "sha512-pE9oKg+4rDrKNJpHNSP1ensgMz41YW5pPCHExd4P12595gdObMmiO1OhTvXG0t7inRS54GhyZr5jm+28XzapEg=="
+    },
     "node_modules/ora": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/ora/-/ora-6.3.1.tgz",

package.json

@@ -11,11 +11,12 @@
   },
   "dependencies": {
     "@astrojs/svelte": "^2.1.1",
-    "astro": "^2.4.5",
-    "rehype-autolink-headings": "^6.1.1",
-    "sharp": "^0.32.1",
     "@fontsource/jetbrains-mono": "^4.5.12",
     "@fontsource/roboto": "^4.5.8",
+    "astro": "^2.4.5",
+    "open-props": "^1.5.8",
+    "rehype-autolink-headings": "^6.1.1",
+    "sharp": "^0.32.1",
     "svelte": "^3.59.1"
   }
 }

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: var(--size-3);
-    padding-block: 1rem;
+    margin-block-start: var(--size-9);
-    background: linear-gradient(
+    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-inline: var(--size-3);
-    padding-block: 0.25rem;
+    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;
+    gap: var(--size-2);
-  }
-
-  input {
-    margin: 0;
   }
 
   .input-wrapper {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--size-2);
   }
 </style>

src/layouts/PageLayout.astro

@@ -1,6 +1,7 @@
 ---
 const { title, description } = Astro.props;
 
+import "open-props/style";
 import "../styles/global.css";
 import "@fontsource/roboto";
 import "@fontsource/roboto/700.css";

src/styles/global.css

@@ -1,31 +1,37 @@
-:root, html.Light {
+:root, .light {
-  --nav-height: 3rem;
+  --nav-height: var(--size-8);
-  --standard-border: 0.0625rem solid var(--tertiary-background-color);
+  --standard-border: var(--border-size-1) solid var(--tertiary-background-color);
-  --background-color: hsl(0 0% 100%);
+  --font-sans: "Roboto", sans-serif;
-  --secondary-background-color: hsl(0 0% 95%);
+  --font-mono: "JetBrains Mono", monospace;
-  --tertiary-background-color: hsl(0 0% 90%);
+
-  --text-color: hsl(0 0% 10%);
+  --background-color: var(--gray-0);
-  --accent-color: #1e40af;
+  --secondary-background-color: var(--gray-1);
+  --tertiary-background-color: var(--gray-2);
+  --text-color: var(--gray-12);
+  --accent-color: var(--blue-11);
+  --radio-border-color: var(--gray-5);
   color-scheme: light;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not(.light):not(.dark) {
-    --background-color: hsl(0 0% 10%);
+    --background-color: var(--gray-10);
-    --secondary-background-color: hsl(0 0% 15%);
+    --secondary-background-color: var(--gray-9);
-    --tertiary-background-color: hsl(0 0% 20%);
+    --tertiary-background-color: var(--gray-8);
-    --text-color: hsl(0 0% 90%);
+    --text-color: var(--gray-0);
-    --accent-color: #93c5fd;
+    --accent-color: var(--blue-2);
+    --radio-border-color: var(--gray-7);
     color-scheme: dark;
   }
 }
 
-html.Dark {
+.dark {
-  --background-color: hsl(0 0% 10%);
+  --background-color: var(--gray-10);
-  --secondary-background-color: hsl(0 0% 15%);
+  --secondary-background-color: var(--gray-9);
-  --tertiary-background-color: hsl(0 0% 20%);
+  --tertiary-background-color: var(--gray-8);
-  --text-color: hsl(0 0% 90%);
+  --text-color: var(--gray-0);
-  --accent-color: #93c5fd;
+  --accent-color: var(--blue-2);
+  --radio-border-color: var(--gray-7);
   color-scheme: dark;
 }
 
@@ -34,9 +40,9 @@ html {
 }
 
 body {
-  line-height: 1.6;
+  line-height: var(--font-lineheight-3);
   margin: 0;
-  font-family: "Roboto", sans-serif;
+  font-family: var(--font-sans);
   background-color: var(--background-color);
   color: var(--text-color);
   display: flex;
@@ -48,7 +54,7 @@ nav,
 header,
 main,
 footer {
-  padding-inline: 1rem;
+  padding-inline: var(--size-3);
 }
 
 main {
@@ -56,7 +62,7 @@ main {
 }
 
 .container {
-  max-inline-size: 65ch;
+  max-inline-size: var(--size-content-3);
   margin-inline: auto;
 }
 
@@ -76,9 +82,8 @@ img {
 }
 
 .icon {
-  inline-size: 1.5rem;
+  inline-size: var(--size-5);
-  block-size: 1.5rem;
+  block-size: var(--size-5);
-  vertical-align: middle;
 }
 
 table {
@@ -90,19 +95,19 @@ table {
 td,
 th {
   border: var(--standard-border);
-  padding-inline: 0.5rem;
+  padding-inline: var(--size-2);
-  padding-block: 0.25rem;
+  padding-block: var(--size-1);
 }
 
 pre {
-  padding: 1rem;
+  padding: var(--size-3);
-  background-color: hsl(0 0% 15%) !important;
+  background-color: var(--gray-9) !important;
   border: var(--standard-border);
 }
 
 code {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
-  font-size: 0.875rem;
+  font-size: var(--font-size-0);
 }
 
 .heading-linker {
@@ -113,12 +118,16 @@ code {
 .heading-linker::before {
   content: "#";
   color: var(--accent-color);
-  margin-inline-end: 0.25rem;
+  margin-inline-end: var(--size-2);
 }
 
-input {
+button, input {
   font: inherit;
-  padding-inline: 0.5rem;
+  padding-inline: var(--size-2);
+  padding-block: var(--size-1);
+  background-color: var(--secondary-background-color);
+  border: var(--standard-border);
+  color: inherit;
 }
 
 summary,
@@ -126,13 +135,9 @@ button {
   cursor: pointer;
 }
 
-button {
-  color: inherit;
-}
-
 ul,
 ol {
-  line-height: 2;
+  line-height: var(--font-lineheight-5);
   padding-inline-start: 1rem;
 }
 
@@ -142,6 +147,39 @@ a {
 
 blockquote {
   margin-inline-start: 0;
-  padding-inline-start: 1rem;
+  padding-inline-start: var(--size-3);
   border-inline-start: var(--standard-border);
 }
+
+input[type="radio"] {
+  appearance: none;
+  background-color: var(--background-color);
+  border: var(--standard-border);
+  border-color: var(--radio-border-color);
+  margin: 0;
+  font: inherit;
+  inline-size: var(--size-4);
+  block-size: var(--size-4);
+  border-radius: var(--radius-round);
+  display: grid;
+  place-content: center;
+}
+
+input[type="radio"]::before {
+  content: "";
+  inline-size: var(--size-2);
+  block-size: var(--size-2);
+  border-radius: var(--radius-round);
+  transform: scale(0);
+  background-color: var(--accent-color);
+}
+
+input[type="radio"]:checked::before {
+  transform: scale(1);
+}
+
+hr {
+  block-size: var(--border-size-2);
+  background-color: var(--tertiary-background-color);
+  border: none;
+}