Merge branch 'main' into collapsible-patch

qt/aqt/__init__.py

@@ -282,6 +282,7 @@ class AnkiApp(QApplication):
 
     def __init__(self, argv: list[str]) -> None:
         QApplication.__init__(self, argv)
+        self.installEventFilter(self)
         self._argv = argv
 
     def secondInstance(self) -> bool:
@@ -340,6 +341,25 @@ class AnkiApp(QApplication):
             return True
         return QApplication.event(self, evt)
 
+    # Global cursor: pointer for Qt buttons
+    ##################################################
+
+    def eventFilter(self, src: Any, evt: QEvent) -> bool:
+        if evt.type() == QEvent.Type.HoverEnter:
+            if isinstance(src, QPushButton):
+                # TODO: apply drop-shadow with setGraphicsEffect(QGraphicsDropShadowEffect)
+                # issue: can't access attributes of QClassProxy (Qt5-compat)
+                self.setOverrideCursor(QCursor(Qt.CursorShape.PointingHandCursor))
+            else:
+                self.restoreOverrideCursor()
+            return False
+
+        elif evt.type() == QEvent.Type.HoverLeave or isinstance(evt, QCloseEvent):
+            self.restoreOverrideCursor()
+            return False
+
+        return False
+
 
 def parseArgs(argv: list[str]) -> tuple[argparse.Namespace, list[str]]:
     "Returns (opts, args)."

qt/aqt/browser/sidebar/searchbar.py

@@ -6,9 +6,7 @@ from __future__ import annotations
 import aqt
 import aqt.browser
 import aqt.gui_hooks
-from aqt import colors
 from aqt.qt import *
-from aqt.theme import theme_manager
 
 
 class SidebarSearchBar(QLineEdit):
@@ -20,29 +18,10 @@ class SidebarSearchBar(QLineEdit):
         self.timer.setInterval(600)
         self.timer.setSingleShot(True)
         self.setFrame(False)
-        self.setup_style()
 
         qconnect(self.timer.timeout, self.onSearch)
         qconnect(self.textChanged, self.onTextChanged)
 
-        aqt.gui_hooks.theme_did_change.append(self.setup_style)
-
-    def setup_style(self) -> None:
-        styles = [
-            "padding: 2px",
-            f"border: 1px solid {theme_manager.color(colors.BORDER)}",
-            "border-radius: 5px",
-        ]
-
-        self.setStyleSheet(
-            "QLineEdit { %s }" % ";".join(styles)
-            + f"""
-QLineEdit:focus {{
-    border: 1px solid {theme_manager.color(colors.FOCUS_BORDER)};
-}}
-            """
-        )
-
     def onTextChanged(self, text: str) -> None:
         if not self.timer.isActive():
             self.timer.start()
@@ -57,6 +36,3 @@ QLineEdit:focus {{
             self.onSearch()
         else:
             QLineEdit.keyPressEvent(self, evt)
-
-    def cleanup(self) -> None:
-        aqt.gui_hooks.theme_did_change.remove(self.setup_style)

qt/aqt/browser/sidebar/tree.py

@@ -116,7 +116,6 @@ class SidebarTreeView(QTreeView):
 
     def cleanup(self) -> None:
         self.toolbar.cleanup()
-        self.searchBar.cleanup()
         gui_hooks.flag_label_did_change.remove(self.refresh)
         gui_hooks.theme_did_change.remove(self._setup_style)
 

qt/aqt/data/qt/icons/BUILD.bazel

@@ -33,6 +33,10 @@ copy_mdi_icons(
         # tags
         "tag-outline.svg",
         "tag-off-outline.svg",
+
+        # QHeaderView arrows
+        "menu-up.svg",
+        "menu-down.svg",
     ],
 )
 

qt/aqt/data/qt/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+   <path fill="#f4f4f4" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
+</svg>

qt/aqt/data/qt/icons/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+   <path fill="#f4f4f4" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
+</svg>

qt/aqt/data/web/css/webview.scss

@@ -17,6 +17,7 @@ body {
     transition: opacity 0.5s ease-out;
     margin: 2em;
     overscroll-behavior: none;
+    @include scrollbar.custom;
 }
 
 a {
@@ -27,7 +28,3 @@ a {
 h1 {
     margin-bottom: 0.2em;
 }
-
-.night-mode {
-    @include scrollbar.night-mode;
-}

qt/aqt/profiles.py

@@ -542,9 +542,6 @@ create table if not exists profiles
     def set_theme(self, theme: Theme) -> None:
         self.meta["theme"] = theme.value
 
-    def dark_mode_widgets(self) -> bool:
-        return self.meta.get("dark_mode_widgets", False)
-
     def legacy_import_export(self) -> bool:
         return self.meta.get("legacy_import", False)
 

qt/aqt/stylesheets.py

@@ -0,0 +1,399 @@
+# Copyright: Ankitects Pty Ltd and contributors
+# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+from aqt import colors
+from aqt.theme import ThemeManager
+
+
+def general_styles(tm: ThemeManager, buf: str) -> str:
+    buf += f"""
+QFrame {{
+    background: none;
+}}
+QPushButton,
+QComboBox,
+QSpinBox,
+QLineEdit,
+QListWidget,
+QTreeWidget,
+QListView {{
+    border: 1px solid {tm.color(colors.BORDER)};
+    border-radius: 5px;
+}}
+QLineEdit {{
+    padding: 2px;
+}}
+QLineEdit:focus {{
+    border-color: {tm.color(colors.FOCUS_BORDER)};
+}}
+QPushButton {{
+    margin-top: 1px;
+}}
+QPushButton,
+QComboBox,
+QSpinBox {{
+    padding: 2px 6px;
+}}
+QToolTip {{
+    background: {tm.color(colors.TOOLTIP_BG)};
+}}
+    """
+    return buf
+
+
+def button_styles(tm: ThemeManager, buf: str) -> str:
+    buf += f"""
+QPushButton,
+QComboBox:!editable {{
+    background: qlineargradient(
+        spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
+        stop:0 {tm.color(colors.BUTTON_GRADIENT_START)},
+        stop:1 {tm.color(colors.BUTTON_GRADIENT_END)}
+    );
+
+}}
+QPushButton:hover,
+QComboBox:!editable:hover {{
+    background: qlineargradient(
+        spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25,
+        stop:0 {tm.color(colors.BUTTON_HOVER_GRADIENT_START)},
+        stop:1 {tm.color(colors.BUTTON_HOVER_GRADIENT_END)}
+    );
+}}
+QPushButton:pressed,
+QComboBox:!editable:pressed {{
+    border: 1px solid {tm.color(colors.BUTTON_PRESSED_BORDER)};
+    background: qlineargradient(
+        spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
+        stop:0 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
+        stop:0.1 {tm.color(colors.BUTTON_GRADIENT_START)},
+        stop:0.9 {tm.color(colors.BUTTON_GRADIENT_END)},
+        stop:1 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
+    );
+}}
+    """
+    return buf
+
+
+def combobox_styles(tm: ThemeManager, buf: str) -> str:
+    buf += f"""
+QComboBox {{
+    padding: 1px 4px 2px 6px;
+}}
+QComboBox:editable:on,
+QComboBox:editable:focus,
+QComboBox::drop-down:focus:editable,
+QComboBox::drop-down:pressed {{
+    border-color: {tm.color(colors.FOCUS_BORDER)};
+}}
+QComboBox:on {{
+    border-bottom: none;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}}
+QComboBox::item {{
+    color: {tm.color(colors.TEXT_FG)};
+    background: {tm.color(colors.FRAME_BG)};
+}}
+
+QComboBox::item:selected {{
+    background: {tm.color(colors.HIGHLIGHT_BG)};
+    color: {tm.color(colors.HIGHLIGHT_FG)};
+}}
+QComboBox::item::icon:selected {{
+    position: absolute;
+}}
+QComboBox::drop-down {{
+    margin: -1px;
+    subcontrol-origin: padding;
+    padding: 2px;
+    width: 16px;
+    subcontrol-position: top right;
+    border: 1px solid {tm.color(colors.BUTTON_BORDER)};
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}}
+QComboBox::down-arrow {{
+    image: url(icons:chevron-down.svg);
+}}
+QComboBox::drop-down {{
+    background: qlineargradient(
+        spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
+        stop:0 {tm.color(colors.BUTTON_PRIMARY_GRADIENT_START)},
+        stop:1 {tm.color(colors.BUTTON_PRIMARY_GRADIENT_END)}
+    );
+}}
+QComboBox::drop-down:hover {{
+    background: qlineargradient(
+        spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25,
+        stop:0 {tm.color(colors.BUTTON_PRIMARY_HOVER_GRADIENT_START)},
+        stop:1 {tm.color(colors.BUTTON_PRIMARY_HOVER_GRADIENT_END)}
+    );
+}}
+    """
+    return buf
+
+
+def tabwidget_styles(tm: ThemeManager, buf: str) -> str:
+    buf += f"""
+QTabWidget {{
+  border-radius: 5px;
+  border: none;
+  background: none;
+}}
+QTabWidget::pane {{
+  border: 1px solid {tm.color(colors.FRAME_BG)};
+  border-radius: 5px;
+  background: {tm.color(colors.FRAME_BG)};
+}}
+QTabBar::tab {{
+  background: none;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  padding: 5px 10px;
+  margin-bottom: 0px;
+}}
+QTabBar::tab:!selected:hover,
+QTabBar::tab:selected {{
+    background: {tm.color(colors.FRAME_BG)};
+}}
+QTabBar::tab:selected {{
+  margin-bottom: -1px;
+}}
+QTabBar::tab:!selected {{
+    margin-top: 5px;
+    background: {tm.color(colors.WINDOW_BG)};
+}}
+QTabBar::tab {{
+    min-width: 8ex;
+    padding: 5px 10px 5px 10px;
+}}
+QTabBar::tab:selected {{
+    border-bottom-color: none;
+}}
+QTabBar::tab:bottom:selected {{
+    border-top-color: none;
+}}
+QTabBar::tab:previous-selected {{
+    border-top-left-radius: 0;
+}}
+QTabBar::tab:next-selected {{
+    border-top-right-radius: 0;
+}}
+    """
+    return buf
+
+
+def table_styles(tm: ThemeManager, buf: str) -> str:
+    buf += f"""
+QTableView {{
+    margin: -1px -1px 1px -1px;
+    background: none;
+    border: 2px solid {tm.color(colors.WINDOW_BG)};
+    border-radius: 5px;
+}}
+QHeaderView::section {{
+    border: 2px solid {tm.color(colors.WINDOW_BG)};
+    margin: -1px;
+    background: qlineargradient(
+        spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
+        stop:0 {tm.color(colors.BUTTON_GRADIENT_START)},
+        stop:1 {tm.color(colors.BUTTON_GRADIENT_END)}
+    );
+}}
+QHeaderView::section:pressed {{
+    border: 1px solid {tm.color(colors.BUTTON_PRESSED_BORDER)};
+    background: qlineargradient(
+        spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
+        stop:0 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
+        stop:0.1 {tm.color(colors.BUTTON_GRADIENT_START)},
+        stop:0.9 {tm.color(colors.BUTTON_GRADIENT_END)},
+        stop:1 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
+    );
+}}
+QHeaderView::section:hover {{
+    background: qlineargradient(
+        spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25,
+        stop:0 {tm.color(colors.BUTTON_HOVER_GRADIENT_START)},
+        stop:1 {tm.color(colors.BUTTON_HOVER_GRADIENT_END)}
+    );
+}}
+QHeaderView::section:first {{
+    border-top: 2px solid {tm.color(colors.WINDOW_BG)};
+    border-left: 2px solid {tm.color(colors.WINDOW_BG)};
+    border-top-left-radius: 5px;
+}}
+QHeaderView::section:!first {{
+    border-left: none;
+}}
+QHeaderView::section:last {{
+    border-top: 2px solid {tm.color(colors.WINDOW_BG)};
+    border-right: 2px solid {tm.color(colors.WINDOW_BG)};
+    border-top-right-radius: 5px;
+}}
+QHeaderView::section:next-selected {{
+    border-right: none;
+}}
+QHeaderView::section:previous-selected {{
+    border-left: none;
+}}
+QHeaderView::section:only-one {{
+    border-left: 2px solid {tm.color(colors.WINDOW_BG)};
+    border-top: 2px solid {tm.color(colors.WINDOW_BG)};
+    border-right: 2px solid {tm.color(colors.WINDOW_BG)};
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}}
+QHeaderView::up-arrow,
+QHeaderView::down-arrow {{
+    width: 20px;
+    height: 20px;
+}}
+QHeaderView::up-arrow {{
+    image: url(icons:menu-up.svg);
+}}
+QHeaderView::down-arrow {{
+    image: url(icons:menu-down.svg);
+}}
+    """
+    return buf
+
+
+def spinbox_styles(tm: ThemeManager, buf: str) -> str:
+    buf += f"""
+QSpinBox::up-button,
+QSpinBox::down-button {{
+    subcontrol-origin: border;
+    width: 16px;
+    border: 1px solid {tm.color(colors.BUTTON_BORDER)};
+    background: qlineargradient(
+        spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
+        stop:0 {tm.color(colors.BUTTON_PRIMARY_GRADIENT_START)},
+        stop:1 {tm.color(colors.BUTTON_PRIMARY_GRADIENT_END)}
+    );
+}}
+QSpinBox::up-button:pressed,
+QSpinBox::down-button:pressed {{
+    border: 1px solid {tm.color(colors.BUTTON_PRESSED_BORDER)};
+    background: qlineargradient(
+        spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
+        stop:0 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
+        stop:0.1 {tm.color(colors.BUTTON_PRIMARY_GRADIENT_START)},
+        stop:0.9 {tm.color(colors.BUTTON_PRIMARY_GRADIENT_END)},
+        stop:1 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
+    );
+}}
+QSpinBox::up-button:hover,
+QSpinBox::down-button:hover {{
+    background: qlineargradient(
+        spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25,
+        stop:0 {tm.color(colors.BUTTON_PRIMARY_HOVER_GRADIENT_START)},
+        stop:1 {tm.color(colors.BUTTON_PRIMARY_HOVER_GRADIENT_END)}
+    );
+}}
+QSpinBox::up-button {{
+    margin-bottom: -1px;
+    subcontrol-position: top right;
+    border-top-right-radius: 5px;
+}}
+QSpinBox::down-button {{
+    margin-top: -1px;
+    subcontrol-position: bottom right;
+    border-bottom-right-radius: 5px;
+}}
+QSpinBox::up-arrow {{
+    image: url(icons:chevron-up.svg);
+}}
+QSpinBox::down-arrow {{
+    image: url(icons:chevron-down.svg);
+}}
+QSpinBox::up-arrow,
+QSpinBox::down-arrow,
+QSpinBox::up-arrow:pressed,
+QSpinBox::down-arrow:pressed,
+QSpinBox::up-arrow:disabled:hover, QSpinBox::up-arrow:off:hover,
+QSpinBox::down-arrow:disabled:hover, QSpinBox::down-arrow:off:hover {{
+    width: 16px;
+    height: 16px;
+}}
+QSpinBox::up-arrow:hover,
+QSpinBox::down-arrow:hover {{
+    width: 20px;
+    height: 20px;
+}}
+QSpinBox::up-button:disabled, QSpinBox::up-button:off,
+QSpinBox::down-button:disabled, QSpinBox::down-button:off {{
+   background: {tm.color(colors.BUTTON_PRIMARY_DISABLED)};
+}}
+     """
+    return buf
+
+
+def scrollbar_styles(tm: ThemeManager, buf: str) -> str:
+    buf += f"""
+QAbstractScrollArea::corner {{
+    background: none;
+    border: none;
+}}
+QScrollBar {{
+    background-color: {tm.color(colors.WINDOW_BG)};
+}}
+QScrollBar::handle {{
+    border-radius: 5px;
+    background-color: {tm.color(colors.SCROLLBAR_BG)};
+}}
+QScrollBar::handle:hover {{
+    background-color: {tm.color(colors.SCROLLBAR_HOVER_BG)};
+}}
+QScrollBar::handle:pressed {{
+    background-color: {tm.color(colors.SCROLLBAR_ACTIVE_BG)};
+}} 
+QScrollBar:horizontal {{
+    height: 12px;
+}}
+QScrollBar::handle:horizontal {{
+    min-width: 50px;
+}} 
+QScrollBar:vertical {{
+    width: 12px;
+}}
+QScrollBar::handle:vertical {{
+    min-height: 50px;
+}} 
+QScrollBar::add-line {{
+      border: none;
+      background: none;
+}}
+QScrollBar::sub-line {{
+      border: none;
+      background: none;
+}}
+    """
+    return buf
+
+
+def win10_styles(tm: ThemeManager, buf: str) -> str:
+
+    # day mode is missing a bottom border; background must be
+    # also set for border to apply
+    buf += f"""
+QMenuBar {{
+  border-bottom: 1px solid {tm.color(colors.BORDER)};
+  background: {tm.color(colors.WINDOW_BG) if tm.night_mode else "white"};
+}}
+    """
+
+    # qt bug? setting the above changes the browser sidebar
+    # to white as well, so set it back
+    buf += f"""
+QTreeWidget {{
+  background: {tm.color(colors.WINDOW_BG)};
+}}
+    """
+
+    if tm.night_mode:
+        buf += """
+QToolTip {
+  border: 0;
+}
+        """
+    return buf

qt/aqt/theme.py

@@ -60,7 +60,7 @@ class ThemeManager:
     DARK_MODE_BUTTON_BG_MIDPOINT = "#555555"
 
     def macos_dark_mode(self) -> bool:
-        "True if the user has night mode on, and has forced native widgets."
+        "True if the user has night mode on."
         if not is_mac:
             return False
 
@@ -70,9 +70,7 @@ class ThemeManager:
         if self._dark_mode_available is None:
             self._dark_mode_available = set_macos_dark_mode(True)
 
-        from aqt import mw
+        return self._dark_mode_available
-
-        return self._dark_mode_available and mw.pm.dark_mode_widgets()
 
     def get_night_mode(self) -> bool:
         return self._night_mode_preference
@@ -189,59 +187,32 @@ class ThemeManager:
 
     def _apply_style(self, app: QApplication) -> None:
         buf = ""
+        if not is_mac:
+            from aqt.stylesheets import (
+                button_styles,
+                combobox_styles,
+                general_styles,
+                scrollbar_styles,
+                spinbox_styles,
+                table_styles,
+                tabwidget_styles,
+                win10_styles,
+            )
+
+            buf += "".join(
+                [
+                    general_styles(self, buf),
+                    button_styles(self, buf),
+                    combobox_styles(self, buf),
+                    tabwidget_styles(self, buf),
+                    table_styles(self, buf),
+                    spinbox_styles(self, buf),
+                    scrollbar_styles(self, buf),
+                ]
+            )
 
         if is_win and platform.release() == "10":
-            # day mode is missing a bottom border; background must be
+            buf += win10_styles(self, buf)
-            # also set for border to apply
-            buf += f"""
-QMenuBar {{
-  border-bottom: 1px solid {self.color(colors.BORDER)};
-  background: {self.color(colors.WINDOW_BG) if self.night_mode else "white"};
-}}
-"""
-            # qt bug? setting the above changes the browser sidebar
-            # to white as well, so set it back
-            buf += f"""
-QTreeWidget {{
-  background: {self.color(colors.WINDOW_BG)};
-}}
-            """
-
-        if self.night_mode:
-            buf += """
-QToolTip {
-  border: 0;
-}
-            """
-
-            if not self.macos_dark_mode():
-                buf += """
-QScrollBar {{ background-color: {}; }}
-QScrollBar::handle {{ background-color: {}; border-radius: 5px; }} 
-
-QScrollBar:horizontal {{ height: 12px; }}
-QScrollBar::handle:horizontal {{ min-width: 50px; }} 
-
-QScrollBar:vertical {{ width: 12px; }}
-QScrollBar::handle:vertical {{ min-height: 50px; }} 
-    
-QScrollBar::add-line {{
-      border: none;
-      background: none;
-}}
-
-QScrollBar::sub-line {{
-      border: none;
-      background: none;
-}}
-
-QTabWidget {{ background-color: {}; }}
-""".format(
-                    self.color(colors.WINDOW_BG),
-                    # fushion-button-hover-bg
-                    "#656565",
-                    self.color(colors.WINDOW_BG),
-                )
 
         # allow addons to modify the styling
         buf = gui_hooks.style_did_init(buf)

sass/_button-mixins.scss

@@ -1,6 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 @use "fusion-vars";
+@use "sass:color";
 
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
@@ -26,12 +27,7 @@ $btn-base-color-day: white;
     border-color: var(--medium-border) !important;
 }
 
-@mixin btn-day(
+@mixin btn-day($with-hover: true, $with-active: true, $with-disabled: true) {
-    $with-hover: true,
-    $with-active: true,
-    $with-disabled: true,
-    $with-margin: true
-) {
     .btn-day {
         @include btn-day-base;
         @content ($btn-base-color-day);
@@ -39,7 +35,7 @@ $btn-base-color-day: white;
         @if ($with-hover) {
             &:hover,
             &.hover {
-                background-color: darken($btn-base-color-day, 8%);
+                background-color: color.scale($btn-base-color-day, $lightness: -20%);
             }
         }
 
@@ -60,10 +56,6 @@ $btn-base-color-day: white;
                 box-shadow: none !important;
             }
         }
-
-        @if ($with-margin) {
-            margin-left: -1px;
-        }
     }
 }
 
@@ -72,23 +64,17 @@ $btn-base-color-night: fusion-vars.$button-border;
 @mixin btn-night-base {
     color: var(--text-fg);
     background: linear-gradient(
-        0deg,
+        180deg,
         fusion-vars.$button-gradient-start 0%,
         fusion-vars.$button-gradient-end 100%
     );
 }
 
-@mixin btn-night(
+@mixin btn-night($with-hover: true, $with-active: true, $with-disabled: true) {
-    $with-hover: true,
-    $with-active: true,
-    $with-disabled: true,
-    $with-margin: true
-) {
     .btn-night {
         @include btn-night-base;
         @content ($btn-base-color-night);
 
-        box-shadow: 0 0 3px fusion-vars.$button-outline;
         border: 1px solid fusion-vars.$button-border;
         -webkit-appearance: none;
 
@@ -96,11 +82,11 @@ $btn-base-color-night: fusion-vars.$button-border;
             &:hover,
             &.hover {
                 background: linear-gradient(
-                    0deg,
+                    180deg,
-                    lighten(fusion-vars.$button-gradient-start, 8%) 0%,
+                    color.scale(fusion-vars.$button-gradient-start, $lightness: 20%) 0%,
-                    lighten(fusion-vars.$button-gradient-end, 8%) 100%
+                    color.scale(fusion-vars.$button-gradient-end, $lightness: 20%) 100%
                 );
-                border-color: lighten(fusion-vars.$button-border, 8%);
+                border-color: color.scale(fusion-vars.$button-border, $lightness: 20%);
             }
         }
 
@@ -108,7 +94,7 @@ $btn-base-color-night: fusion-vars.$button-border;
             &:active,
             &.active {
                 @include impressed-shadow(0.35);
-                border-color: darken($btn-base-color-night, 8%);
+                border-color: color.scale($btn-base-color-night, $lightness: -20%);
             }
 
             &:active.active {
@@ -124,10 +110,6 @@ $btn-base-color-night: fusion-vars.$button-border;
                 border-color: $btn-base-color-night !important;
             }
         }
-
-        @if ($with-margin) {
-            margin-left: 1px;
-        }
     }
 }
 

sass/_fusion-vars.scss

@@ -1,7 +1,7 @@
 /* night-mode-specific colours */
-$button-gradient-start: #555555;
+$button-gradient-start: #3f3f3f;
-$button-gradient-end: #656565;
+$button-gradient-end: #363636;
-$button-outline: #222222;
+$button-outline: #202020;
-$button-hover-bg: #656565;
+$button-hover-bg: #404040;
-$button-border: #646464;
+$button-border: #202020;
-$button-base-bg: #454545;
+$button-base-bg: #343434;

sass/_vars.scss

@@ -39,13 +39,28 @@
     --focus-border: #0969da;
     --focus-shadow: rgba(9 105 218 / 0.3);
     --code-bg: white;
+    --button-primary-gradient-start: #69b3fa;
+    --button-primary-gradient-end: #087fff;
+    --button-primary-hover-gradient-start: #69b3fa;
+    --button-primary-hover-gradient-end: #087fff;
+    --button-primary-disabled: #8fc5fc;
+    --button-gradient-start: white;
+    --button-gradient-end: #f6f6f6;
+    --button-hover-gradient-start: #fefefe;
+    --button-hover-gradient-end: #f1f1f1;
+    --button-pressed-shadow: #555;
+    --button-border: #666;
+    --button-pressed-border: #8f8f8f;
+    --scrollbar-bg: #d8d8d8;
+    --scrollbar-hover-bg: #d0d0d0;
+    --scrollbar-active-bg: #c8c8c8;
 }
 
 :root[class*="night-mode"] {
     --text-fg: white;
     --window-bg: #2f2f31;
     --frame-bg: #3a3a3a;
-    --border: #777;
+    --border: #1f1f1f;
     --medium-border: #444;
     --faint-border: #29292b;
     --link: #77ccff;
@@ -54,7 +69,7 @@
     --learn-count: #ff935b;
     --zero-count: #444;
     --slightly-grey-text: #ccc;
-    --highlight-bg: #77ccff;
+    --highlight-bg: #1e95df;
     --highlight-fg: white;
     --disabled: #777;
     --flag1-fg: #ff7b7b;
@@ -79,5 +94,20 @@
     --focus-border: #316dca;
     --focus-shadow: #194380;
     --code-bg: #272822;
+    --button-primary-gradient-start: #1769e2;
+    --button-primary-gradient-end: #014996;
+    --button-primary-hover-gradient-start: #2877c2;
+    --button-primary-hover-gradient-end: #0d5db3;
+    --button-primary-disabled: #4977a1;
+    --button-gradient-start: #3f3f3f;
+    --button-gradient-end: #363636;
+    --button-hover-gradient-start: #434343;
+    --button-hover-gradient-end: #404040;
+    --button-pressed-shadow: #232323;
+    --button-border: #2f2f31;
+    --button-pressed-border: #0a0a0a;
+    --scrollbar-bg: #434343;
+    --scrollbar-hover-bg: #4e4e4e;
+    --scrollbar-active-bg: #464646;
     color-scheme: dark;
 }

sass/base.scss

@@ -34,10 +34,7 @@ $utilities: (
 
 body {
     overscroll-behavior: none;
-}
+    @include scrollbar.custom;
-
-.night-mode {
-    @include scrollbar.night-mode;
 }
 
 button {

sass/buttons.scss

@@ -42,7 +42,6 @@
             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: 5px;

sass/scrollbar.scss

@@ -4,7 +4,7 @@
 @use "vars";
 @use "fusion-vars";
 
-@mixin night-mode {
+@mixin custom {
     ::-webkit-scrollbar {
         background-color: var(--window-bg);
 
@@ -18,8 +18,8 @@
     }
 
     ::-webkit-scrollbar-thumb {
-        background: fusion-vars.$button-hover-bg;
+        background: var(--scrollbar-bg);
-        border-radius: 8px;
+        border-radius: 5px;
 
         &:horizontal {
             min-width: 50px;
@@ -28,9 +28,22 @@
         &:vertical {
             min-height: 50px;
         }
+
+        &:hover {
+            background: var(--scrollbar-hover-bg);
+        }
+
+        &:active {
+            background: var(--scrollbar-active-bg);
+        }
     }
 
     ::-webkit-scrollbar-corner {
         background-color: var(--window-bg);
     }
+
+    ::-webkit-scrollbar-track {
+        border-radius: 5px;
+        background-color: transparent;
+    }
 }

ts/editable/editable-base.scss

@@ -18,8 +18,8 @@ p {
     display: none;
 }
 
-:host(.night-mode) {
+:host(body) {
-    @include scrollbar.night-mode;
+    @include scrollbar.custom;
 }
 
 pre {

ts/editor/legacy.scss

@@ -1,6 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 @use "fusion-vars";
+@use "sass:color";
 @use "sass/button-mixins" as button;
 
 $btn-base-color-day: white;
@@ -17,10 +18,8 @@ $padding: 2px;
     background-color: $btn-base-color-day;
     border: 1px solid var(--medium-border);
     @include button.btn-border-radius;
-    margin-left: -1px;
-
     &:hover {
-        background-color: darken($btn-base-color-day, 8%);
+        background-color: color.scale($btn-base-color-day, $lightness: -20%);
     }
 
     &:active,
@@ -29,7 +28,6 @@ $padding: 2px;
     }
 
     .nightMode & {
-        box-shadow: 0 0 3px fusion-vars.$button-outline;
         border: 1px solid fusion-vars.$button-border;
         -webkit-appearance: none;
         background: linear-gradient(
@@ -43,15 +41,15 @@ $padding: 2px;
         &:hover {
             background: linear-gradient(
                 0deg,
-                lighten(fusion-vars.$button-gradient-start, 8%) 0%,
+                color.scale(fusion-vars.$button-gradient-start, $lightness: 20%) 0%,
-                lighten(fusion-vars.$button-gradient-end, 8%) 100%
+                color.scale(fusion-vars.$button-gradient-end, $lightness: 20%) 100%
             );
-            border-color: lighten(fusion-vars.$button-border, 8%);
+            border-color: color.scale(fusion-vars.$button-border, $lightness: 20%);
         }
 
         &:active {
             @include button.impressed-shadow(0.35);
-            border-color: darken($btn-base-color-night, 8%);
+            border-color: color.scale($btn-base-color-night, $lightness: -20%);
         }
     }
 }