Move font size and scrollbar into _root-vars.scss

qt/tools/extract_sass_vars.py

@@ -25,6 +25,8 @@ for line in re.split(r"[;\{\}]|\*\/", open(root_vars_css).read()):
     if line.startswith("/*!"):
         if "props" in line:
             reached_props = True
+        elif "rest" in line:
+            break
         else:
             comment = re.match(r"\/\*!\s*(.*)$", line)[1]
         continue

sass/_root-vars.scss

@@ -4,6 +4,7 @@
 @use "sass:map";
 @use "vars" as *;
 @use "functions" as *;
+@use "scrollbar";
 
 /*! colors */
 :root {
@@ -50,3 +51,15 @@
         }
     }
 }
+
+/*! rest */
+:root {
+    font-size: prop(font-size);
+    body {
+        overscroll-behavior: none;
+        &:not(.isMac),
+        &:not(.isMac) * {
+            @include scrollbar.custom;
+        }
+    }
+}

sass/_vars.scss

@@ -13,6 +13,11 @@
 
 $vars: (
     props: (
+        font: (
+            size: (
+                default: 15px,
+            ),
+        ),
         border-radius: (
             default: (
                 "Used to round corners of various UI elements",

sass/base.scss

@@ -1,6 +1,5 @@
 @use "vars" as *;
 @use "root-vars";
-@use "scrollbar";
 @use "button-mixins" as button;
 
 $body-color: color(fg);
@@ -43,16 +42,6 @@ html {
     overflow-x: hidden;
 }
 
-body {
-    --base-font-size: 14px;
-    font-size: var(--base-font-size);
-    overscroll-behavior: none;
-    &:not(.isMac),
-    &:not(.isMac) * {
-        @include scrollbar.custom;
-    }
-}
-
 button {
     /* override transition for instant hover response */
     transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;

ts/components/DropdownItem.svelte

@@ -49,7 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         justify-content: start;
         width: 100%;
 
-        font-size: var(--dropdown-font-size, var(--base-font-size));
+        font-size: var(--dropdown-font-size, var(--font-size));
 
         background: none;
         box-shadow: none !important;

ts/components/IconButton.svelte

@@ -47,7 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         @include button.border-radius;
 
         padding: 0;
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
         height: var(--buttons-size);
         min-width: calc(var(--buttons-size) * 0.75);
     }

ts/components/LabelButton.svelte

@@ -50,7 +50,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         overflow: hidden;
         text-overflow: ellipsis;
         padding: 0 calc(var(--buttons-size) / 3);
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
         width: auto;
         height: var(--buttons-size);
     }

ts/congrats/CongratsPage.svelte

@@ -68,7 +68,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .congrats {
         margin-top: 2em;
         max-width: 30em;
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
 
         :global(a) {
             color: var(--fg-link);

ts/tag-editor/Tag.svelte

@@ -60,7 +60,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .tag {
         @include button.base($with-active: false, $with-disabled: false);
 
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
         padding: 0;
 
         --border-color: var(--border);

ts/tag-editor/TagInput.svelte

@@ -267,7 +267,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         resize: none;
         appearance: none;
         font: inherit;
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
         outline: none;
         border: none;
         margin: 0;