separate global styles

ui/src/App.svelte

@@ -34,58 +34,13 @@
 </Router>
 
 <style global lang="scss">
-  @use "sass:color";
-
   @use "normalize.css/normalize.css";
-  @import url("/assets/fonts/inter.css");
-
-  $primary: #2c3e50;
-  $primary-lighter: #3a5068;
-  $primary-lightest: #3a92f0;
-  $background: white;
-
-  html {
-    --default-font: "Inter", sans-serif;
-    --monospace-font: "Fira Code", "Consolas", "Inconsolata", "Hack", monospace;
-    --foreground: #{$primary};
-    --foreground-lighter: #{$primary-lighter};
-    --background: #{$background};
-    --background-emph: #{color.scale($background, $lightness: -4%)};
-    --primary-lightest: #{$primary-lightest};
-    --error: darkred;
-    --warning: orange;
-    font-size: 15px;
-
-    b {
-      color: red;
-    }
-  }
-
-  @supports (font-variation-settings: normal) {
-    html {
-      --default-font: "Inter var", sans-serif;
-      font-feature-settings: "ss02" on, "case" on;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    html {
-      --foreground: #{$background};
-      --foreground-lighter: #{color.scale($background, $lightness: -50%)};
-      --background: #{$primary};
-      --background-emph: #{$primary-lighter};
-      --primary-lightest: #{$primary-lightest};
-      --error: red;
-    }
-  }
+  @use "styles/colors";
+  @use "styles/fonts";
 
   html,
   body {
     height: 100%;
-
-    font-family: var(--default-font);
-    color: var(--foreground);
-    background: var(--background);
   }
 
   #main {
@@ -114,14 +69,6 @@
     margin: 1rem;
   }
 
-  a {
-    color: var(--foreground);
-  }
-
-  a:visited {
-    color: var(--foreground);
-  }
-
   .spinner {
     font-size: 2em;
 

ui/src/styles/colors.scss

@@ -0,0 +1,45 @@
+@use "sass:color";
+
+$primary: #2c3e50;
+$primary-lighter: #3a5068;
+$primary-lightest: #3a92f0;
+$background: white;
+
+html {
+  --foreground: #{$primary};
+  --foreground-lighter: #{$primary-lighter};
+  --background: #{$background};
+  --background-emph: #{color.scale($background, $lightness: -4%)};
+  --primary-lightest: #{$primary-lightest};
+  --error: darkred;
+  --warning: orange;
+
+  b {
+    color: red;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --foreground: #{$background};
+    --foreground-lighter: #{color.scale($background, $lightness: -50%)};
+    --background: #{$primary};
+    --background-emph: #{$primary-lighter};
+    --primary-lightest: #{$primary-lightest};
+    --error: red;
+  }
+}
+
+html,
+body {
+  color: var(--foreground);
+  background: var(--background);
+}
+
+a {
+  color: var(--foreground);
+}
+
+a:visited {
+  color: var(--foreground);
+}

ui/src/styles/fonts.scss

@@ -0,0 +1,19 @@
+@import url("/assets/fonts/inter.css");
+
+html {
+  --default-font: "Inter", sans-serif;
+  --monospace-font: "Fira Code", "Consolas", "Inconsolata", "Hack", monospace;
+  font-size: 15px;
+}
+
+@supports (font-variation-settings: normal) {
+  html {
+    --default-font: "Inter var", sans-serif;
+    font-feature-settings: "ss02" on, "case" on;
+  }
+}
+
+html,
+body {
+  font-family: var(--default-font);
+}