From a018b4f86a548b93ca3c419271c563b07abb0a04 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Mon, 7 Nov 2022 15:46:22 +0100
Subject: [PATCH] Move font size and scrollbar into _root-vars.scss

---
 qt/tools/extract_sass_vars.py     |  2 ++
 sass/_root-vars.scss              | 13 +++++++++++++
 sass/_vars.scss                   |  5 +++++
 sass/base.scss                    | 11 -----------
 ts/components/DropdownItem.svelte |  2 +-
 ts/components/IconButton.svelte   |  2 +-
 ts/components/LabelButton.svelte  |  2 +-
 ts/congrats/CongratsPage.svelte   |  2 +-
 ts/tag-editor/Tag.svelte          |  2 +-
 ts/tag-editor/TagInput.svelte     |  2 +-
 10 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/qt/tools/extract_sass_vars.py b/qt/tools/extract_sass_vars.py
index 5bb716087..9a9de37b5 100644
--- a/qt/tools/extract_sass_vars.py
+++ b/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
diff --git a/sass/_root-vars.scss b/sass/_root-vars.scss
index 307a199dd..fe485a8f9 100644
--- a/sass/_root-vars.scss
+++ b/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;
+        }
+    }
+}
diff --git a/sass/_vars.scss b/sass/_vars.scss
index ec8012d3f..e4d2ad8df 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -13,6 +13,11 @@
 
 $vars: (
     props: (
+        font: (
+            size: (
+                default: 15px,
+            ),
+        ),
         border-radius: (
             default: (
                 "Used to round corners of various UI elements",
diff --git a/sass/base.scss b/sass/base.scss
index 39e85c9e7..4786b63d7 100644
--- a/sass/base.scss
+++ b/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;
diff --git a/ts/components/DropdownItem.svelte b/ts/components/DropdownItem.svelte
index 549c562b2..dbed7977c 100644
--- a/ts/components/DropdownItem.svelte
+++ b/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;
diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 8be4ee757..85181245f 100644
--- a/ts/components/IconButton.svelte
+++ b/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);
     }
diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte
index f0810e453..8dd978d0a 100644
--- a/ts/components/LabelButton.svelte
+++ b/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);
     }
diff --git a/ts/congrats/CongratsPage.svelte b/ts/congrats/CongratsPage.svelte
index 6362f7fcd..5c8bb3686 100644
--- a/ts/congrats/CongratsPage.svelte
+++ b/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);
diff --git a/ts/tag-editor/Tag.svelte b/ts/tag-editor/Tag.svelte
index 6b548676e..87f424966 100644
--- a/ts/tag-editor/Tag.svelte
+++ b/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);
diff --git a/ts/tag-editor/TagInput.svelte b/ts/tag-editor/TagInput.svelte
index faec96aa3..7c401a060 100644
--- a/ts/tag-editor/TagInput.svelte
+++ b/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;