diff --git a/qt/aqt/data/web/css/_card_counts.scss b/qt/aqt/data/web/css/_card_counts.scss
deleted file mode 100644
index 2c26a1b4f..000000000
--- a/qt/aqt/data/web/css/_card_counts.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.review-count {
-  color: var(--review-count);
-}
-
-.new-count {
-  color: var(--new-count);
-}
-
-.learn-count {
-  color: var(--learn-count);
-}
-
-.zero-count {
-  color: var(--zero-count);
-}
-
-.nightMode {
-  .review-count {
-    color: var(--review-count);
-  }
-
-  .new-count {
-    color: var(--new-count);
-  }
-
-  .learn-count {
-    color: var(--learn-count);
-  }
-
-  .zero-count {
-    color: var(--zero-count);
-  }
-}
-
diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss
index e425978db..21d7d54b7 100644
--- a/qt/aqt/data/web/css/deckbrowser.scss
+++ b/qt/aqt/data/web/css/deckbrowser.scss
@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'card_counts';
+@use 'ts/sass/card_counts';
 
 a.deck {
     color: var(--text-fg);
@@ -84,4 +84,4 @@ body {
     div {
         margin: 1em;
     }
-}
\ No newline at end of file
+}
diff --git a/qt/aqt/data/web/css/overview.scss b/qt/aqt/data/web/css/overview.scss
index 688d84d6e..7b9c4587e 100644
--- a/qt/aqt/data/web/css/overview.scss
+++ b/qt/aqt/data/web/css/overview.scss
@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'card_counts';
+@use 'ts/sass/card_counts';
 
 .smallLink {
     font-size: 10px;
diff --git a/qt/aqt/data/web/css/reviewer-bottom.scss b/qt/aqt/data/web/css/reviewer-bottom.scss
index d9fa6c4ee..5f1ac2684 100644
--- a/qt/aqt/data/web/css/reviewer-bottom.scss
+++ b/qt/aqt/data/web/css/reviewer-bottom.scss
@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'card_counts';
+@use 'ts/sass/card_counts';
 
 body {
     margin: 0;
diff --git a/ts/sass/_buttons.scss b/ts/sass/_buttons.scss
index d0a96de75..bddc3baff 100644
--- a/ts/sass/_buttons.scss
+++ b/ts/sass/_buttons.scss
@@ -1,10 +1,4 @@
-/* night-mode-specific colours */
-$fusion-button-gradient-start: #555555;
-$fusion-button-gradient-end: #656565;
-$fusion-button-outline: #222222;
-$fusion-button-hover-bg: #656565;
-$fusion-button-border: #646464;
-$fusion-button-base-bg: #454545;
+@use 'fusion_vars';
 
 .isWin {
     button {
@@ -37,11 +31,11 @@ $fusion-button-base-bg: #454545;
         /* match the fusion button gradient */
         background: linear-gradient(
             0deg,
-            $fusion-button-gradient-start 0%,
-            $fusion-button-gradient-end 100%
+            fusion_vars.$button-gradient-start 0%,
+            fusion_vars.$button-gradient-end 100%
         );
-        box-shadow: 0 0 3px $fusion-button-outline;
-        border: 1px solid $fusion-button-border;
+        box-shadow: 0 0 3px fusion_vars.$button-outline;
+        border: 1px solid fusion_vars.$button-border;
 
         border-radius: 2px;
         padding: 10px;
@@ -50,7 +44,7 @@ $fusion-button-base-bg: #454545;
     }
 
     button:hover {
-        background: $fusion-button-hover-bg;
+        background: fusion_vars.$button-hover-bg;
     }
 }
 
diff --git a/ts/sass/_card_counts.scss b/ts/sass/_card_counts.scss
new file mode 100644
index 000000000..93296e3e1
--- /dev/null
+++ b/ts/sass/_card_counts.scss
@@ -0,0 +1,15 @@
+.review-count {
+  color: var(--review-count);
+}
+
+.new-count {
+  color: var(--new-count);
+}
+
+.learn-count {
+  color: var(--learn-count);
+}
+
+.zero-count {
+  color: var(--zero-count);
+}
diff --git a/ts/sass/_fusion_vars.scss b/ts/sass/_fusion_vars.scss
new file mode 100644
index 000000000..559d0a23b
--- /dev/null
+++ b/ts/sass/_fusion_vars.scss
@@ -0,0 +1,7 @@
+/* night-mode-specific colours */
+$fusion-button-gradient-start: #555555;
+$fusion-button-gradient-end: #656565;
+$fusion-button-outline: #222222;
+$fusion-button-hover-bg: #656565;
+$fusion-button-border: #646464;
+$fusion-button-base-bg: #454545;
diff --git a/ts/sass/buttons.scss b/ts/sass/buttons.scss
new file mode 100644
index 000000000..bddc3baff
--- /dev/null
+++ b/ts/sass/buttons.scss
@@ -0,0 +1,65 @@
+@use 'fusion_vars';
+
+.isWin {
+    button {
+        font-size: 12px;
+    }
+}
+
+.isMac {
+    button {
+        font-size: 13px;
+    }
+}
+
+.isLin {
+    button {
+        font-size: 14px;
+
+        -webkit-appearance: none;
+        border-radius: 3px;
+        padding: 5px;
+        border: 1px solid var(--border);
+    }
+}
+
+.nightMode {
+    button {
+        -webkit-appearance: none;
+        color: var(--text-fg);
+
+        /* match the fusion button gradient */
+        background: linear-gradient(
+            0deg,
+            fusion_vars.$button-gradient-start 0%,
+            fusion_vars.$button-gradient-end 100%
+        );
+        box-shadow: 0 0 3px fusion_vars.$button-outline;
+        border: 1px solid fusion_vars.$button-border;
+
+        border-radius: 2px;
+        padding: 10px;
+        padding-top: 3px;
+        padding-bottom: 3px;
+    }
+
+    button:hover {
+        background: fusion_vars.$button-hover-bg;
+    }
+}
+
+/* imitate standard macOS dark mode buttons */
+.isMac.nightMode.macos-dark-mode button:not(.linkb) {
+    background: #656565;
+    box-shadow: 0 1px 2px #222222;
+    border-top-color: #848484;
+    border-top-width: 0.5px;
+    border-bottom: 0;
+    border-left: 0;
+    border-right: 0;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 15px;
+    padding-right: 15px;
+    color: #e5e5e5;
+}
diff --git a/ts/sass/card_counts.scss b/ts/sass/card_counts.scss
new file mode 100644
index 000000000..93296e3e1
--- /dev/null
+++ b/ts/sass/card_counts.scss
@@ -0,0 +1,15 @@
+.review-count {
+  color: var(--review-count);
+}
+
+.new-count {
+  color: var(--new-count);
+}
+
+.learn-count {
+  color: var(--learn-count);
+}
+
+.zero-count {
+  color: var(--zero-count);
+}
diff --git a/ts/sass/scrollbar.scss b/ts/sass/scrollbar.scss
index 714d19b03..5b0bc321c 100644
--- a/ts/sass/scrollbar.scss
+++ b/ts/sass/scrollbar.scss
@@ -2,7 +2,7 @@
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
 @use 'vars';
-@use 'buttons';
+@use 'fusion_vars';
 
 @mixin night-mode {
     &::-webkit-scrollbar {
@@ -18,7 +18,7 @@
     }
 
     &::-webkit-scrollbar-thumb {
-        background: buttons.$fusion-button-hover-bg;
+        background: fusion_vars.$button-hover-bg;
         border-radius: 8px;
 
         &:horizontal {