Merge branch 'redesign-test' into custom-qt-controls

qt/BUILD.bazel

@@ -16,9 +16,9 @@ py_binary(
 )
 
 py_binary(
-    name = "extract_sass_colors",
+    name = "extract_sass_vars",
     srcs = [
-        "tools/extract_sass_colors.py",
+        "tools/extract_sass_vars.py",
     ],
     imports = ["."],
     visibility = [":__subpackages__"],

qt/aqt/BUILD.bazel

@@ -11,14 +11,15 @@ genrule(
 )
 
 genrule(
-    name = "extract_sass_colors",
+    name = "extract_sass_vars",
     srcs = [
+        "//sass:_colors.scss",
         "//sass:_vars.scss",
     ],
-    outs = ["colors.py"],
+    outs = ["colors.py", "props.py"],
-    cmd = "$(location //qt:extract_sass_colors) $< $@",
+    cmd = "$(location //qt:extract_sass_vars) $(SRCS) $(OUTS)",
     tools = [
-        "//qt:extract_sass_colors",
+        "//qt:extract_sass_vars",
     ],
 )
 

qt/aqt/browser/sidebar/tree.py

@@ -104,7 +104,7 @@ class SidebarTreeView(QTreeView):
     def _setup_style(self) -> None:
         # match window background color and tweak style
         bgcolor = QPalette().window().color().name()
-        border = theme_manager.color(colors.MEDIUM_BORDER)
+        border = theme_manager.color(colors.BORDER_DEFAULT)
         styles = [
             "padding: 3px",
             "padding-right: 0px",
@@ -303,7 +303,7 @@ class SidebarTreeView(QTreeView):
     ) -> None:
         if self.current_search and (item := self.model().item_for_index(idx)):
             if item.is_highlighted():
-                brush = QBrush(theme_manager.qcolor(colors.SUSPENDED_BG))
+                brush = QBrush(theme_manager.qcolor(colors.STATE_SUSPENDED))
                 painter.save()
                 painter.fillRect(options.rect, brush)
                 painter.restore()
@@ -653,36 +653,36 @@ class SidebarTreeView(QTreeView):
             type=SidebarItemType.CARD_STATE_ROOT,
         )
         type = SidebarItemType.CARD_STATE
-        colored_icon = ColoredIcon(path=icon, color=colors.DISABLED)
+        colored_icon = ColoredIcon(path=icon, color=colors.FG_DISABLED)
 
         root.add_simple(
             tr.actions_new(),
-            icon=colored_icon.with_color(colors.NEW_COUNT),
+            icon=colored_icon.with_color(colors.STATE_NEW),
             type=type,
             search_node=SearchNode(card_state=SearchNode.CARD_STATE_NEW),
         )
 
         root.add_simple(
             name=tr.scheduling_learning(),
-            icon=colored_icon.with_color(colors.LEARN_COUNT),
+            icon=colored_icon.with_color(colors.STATE_LEARN),
             type=type,
             search_node=SearchNode(card_state=SearchNode.CARD_STATE_LEARN),
         )
         root.add_simple(
             name=tr.scheduling_review(),
-            icon=colored_icon.with_color(colors.REVIEW_COUNT),
+            icon=colored_icon.with_color(colors.STATE_REVIEW),
             type=type,
             search_node=SearchNode(card_state=SearchNode.CARD_STATE_REVIEW),
         )
         root.add_simple(
             name=tr.browsing_suspended(),
-            icon=colored_icon.with_color(colors.SUSPENDED_FG),
+            icon=colored_icon.with_color(colors.STATE_SUSPENDED),
             type=type,
             search_node=SearchNode(card_state=SearchNode.CARD_STATE_SUSPENDED),
         )
         root.add_simple(
             name=tr.browsing_buried(),
-            icon=colored_icon.with_color(colors.BURIED_FG),
+            icon=colored_icon.with_color(colors.STATE_BURIED),
             type=type,
             search_node=SearchNode(card_state=SearchNode.CARD_STATE_BURIED),
         )

qt/aqt/browser/table/__init__.py

@@ -13,6 +13,7 @@ from anki.collection import BrowserColumns as Columns
 from anki.collection import BrowserRow
 from anki.notes import NoteId
 from aqt import colors
+from aqt.qt import QColor
 from aqt.utils import tr
 
 Column = Columns.Column
@@ -76,25 +77,38 @@ class CellRow:
 
 
 def backend_color_to_aqt_color(color: BrowserRow.Color.V) -> tuple[str, str] | None:
+    temp_color = None
+
     if color == BrowserRow.COLOR_MARKED:
-        return colors.MARKED_BG
+        temp_color = colors.STATE_MARKED
     if color == BrowserRow.COLOR_SUSPENDED:
-        return colors.SUSPENDED_BG
+        temp_color = colors.STATE_SUSPENDED
     if color == BrowserRow.COLOR_FLAG_RED:
-        return colors.FLAG1_BG
+        temp_color = colors.FLAG_1
     if color == BrowserRow.COLOR_FLAG_ORANGE:
-        return colors.FLAG2_BG
+        temp_color = colors.FLAG_2
     if color == BrowserRow.COLOR_FLAG_GREEN:
-        return colors.FLAG3_BG
+        temp_color = colors.FLAG_3
     if color == BrowserRow.COLOR_FLAG_BLUE:
-        return colors.FLAG4_BG
+        temp_color = colors.FLAG_4
     if color == BrowserRow.COLOR_FLAG_PINK:
-        return colors.FLAG5_BG
+        temp_color = colors.FLAG_5
     if color == BrowserRow.COLOR_FLAG_TURQUOISE:
-        return colors.FLAG6_BG
+        temp_color = colors.FLAG_6
     if color == BrowserRow.COLOR_FLAG_PURPLE:
-        return colors.FLAG7_BG
+        temp_color = colors.FLAG_7
-    return None
+
+    return adjusted_bg_color(temp_color)
+
+
+def adjusted_bg_color(color: tuple[str, str]) -> tuple[str, str]:
+    if color:
+        return (
+            QColor(color[0]).lighter(150).name(),
+            QColor(color[1]).darker(150).name(),
+        )
+    else:
+        return None
 
 
 from .model import DataModel

qt/aqt/browser/table/table.py

@@ -375,7 +375,7 @@ class Table:
             )
         elif theme_manager.macos_dark_mode():
             self._view.setStyleSheet(
-                f"QTableView {{ gridline-color: {colors.FRAME_BG} }}"
+                f"QTableView {{ gridline-color: {colors.CANVAS_INSET} }}"
             )
         else:
             self._view.setStyleSheet("")

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

@@ -4,7 +4,7 @@
 @use "sass/card-counts";
 
 a.deck {
-    color: var(--text-fg);
+    color: var(--fg-default);
     text-decoration: none;
     min-width: 5em;
     display: inline-block;
@@ -15,7 +15,7 @@ a.deck:hover {
 }
 
 tr.deck td {
-    border-bottom: 1px solid var(--faint-border);
+    border-bottom: 1px solid var(--border-subtle);
 }
 
 tr.top-level-drag-row td {
@@ -27,7 +27,7 @@ td {
 }
 
 tr.drag-hover td {
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--border-default);
 }
 
 body {
@@ -36,7 +36,7 @@ body {
 }
 
 .current {
-    background-color: var(--faint-border);
+    background-color: var(--canvas-outset);
 }
 
 .decktd {
@@ -55,14 +55,14 @@ body {
 }
 
 .collapse {
-    color: var(--text-fg);
+    color: var(--fg-default);
     text-decoration: none;
     display: inline-block;
     width: 1em;
 }
 
 .filtered {
-    color: var(--link) !important;
+    color: var(--accent-link) !important;
 }
 
 .gears {
@@ -79,7 +79,7 @@ body {
 }
 
 .callout {
-    background: var(--medium-border);
+    background: var(--border-default);
     padding: 1em;
     margin: 1em;
 

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

@@ -13,7 +13,7 @@ h3 {
 
 .descfont {
     padding: 1em;
-    color: var(--slightly-grey-text);
+    color: var(--fg-subtle);
 }
 
 .description {

qt/aqt/data/web/css/reviewer-bottom.scss

@@ -1,10 +1,11 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "sass/card-counts";
+ @use "vars" as *;
+ @use "sass/card-counts";
 
 :root {
-    --focus-color: #0078d7;
+    --focus-color: #{palette-of(button-focus)};
 
     .isMac {
         --focus-color: rgba(0 103 244 / 0.247);
@@ -73,13 +74,13 @@ button {
 }
 
 #outer {
-    border-top: 1px solid var(--border);
+    border-top: 1px solid var(--border-default);
     /* Better compatibility with graphics pad/touchscreen */
     -webkit-user-select: none;
 }
 
 .nightMode {
     #outer {
-        border-top-color: var(--faint-border);
+        border-top-color: var(--border-subtle);
     }
 }

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

@@ -4,7 +4,7 @@
 #header {
     padding: 3px;
     font-weight: bold;
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--border-default);
 }
 
 .tdcenter {
@@ -26,7 +26,7 @@ body {
     padding-right: 12px;
     padding-left: 12px;
     text-decoration: none;
-    color: var(--text-fg);
+    color: var(--fg-default);
 }
 
 .hitem:hover {
@@ -38,11 +38,11 @@ body {
 }
 
 .nightMode #header {
-    border-bottom-color: var(--faint-border);
+    border-bottom-color: var(--border-subtle);
 }
 
 .isMac.nightMode #header {
-    border-bottom-color: var(--frame-bg);
+    border-bottom-color: var(--canvas-outset);
 }
 
 @keyframes spin {
@@ -71,9 +71,9 @@ body {
 }
 
 .normal-sync {
-    color: var(--new-count);
+    color: var(--state-new);
 }
 
 .full-sync {
-    color: var(--learn-count);
+    color: var(--state-learn);
 }

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

@@ -12,8 +12,8 @@
 }
 
 body {
-    color: var(--text-fg);
+    color: var(--fg-default);
-    background: var(--window-bg);
+    background: var(--canvas-default);
     transition: opacity 0.5s ease-out;
     margin: 2em;
     overscroll-behavior: none;
@@ -21,7 +21,7 @@ body {
 }
 
 a {
-    color: var(--link);
+    color: var(--accent-link);
     text-decoration: none;
 }
 

qt/aqt/editor.py

@@ -164,7 +164,7 @@ class Editor:
             context=self,
             default_css=False,
         )
-        self.web._fix_editor_background_color_and_show()
+        self.web.show()
 
         lefttopbtns: list[str] = []
         gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
@@ -670,7 +670,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
         self.tags = aqt.tagedit.TagEdit(self.widget)
         qconnect(self.tags.lostFocus, self.on_tag_focus_lost)
         self.tags.setToolTip(shortcut(tr.editing_jump_to_tags_with_ctrlandshiftandt()))
-        border = theme_manager.color(colors.BORDER)
+        border = theme_manager.color(colors.BORDER_DEFAULT)
         self.tags.setStyleSheet(f"border: 1px solid {border}")
         tb.addWidget(self.tags, 1, 1)
         g.setLayout(tb)

qt/aqt/filtered_deck.py

@@ -84,8 +84,8 @@ class FilteredDeckConfigDialog(QDialog):
         qconnect(self.form.search_button.clicked, self.on_search_button)
         qconnect(self.form.search_button_2.clicked, self.on_search_button_2)
         qconnect(self.form.hint_button.clicked, self.on_hint_button)
-        blue = theme_manager.color(colors.LINK)
+        blue = theme_manager.color(colors.ACCENT_LINK)
-        grey = theme_manager.color(colors.DISABLED)
+        grey = theme_manager.color(colors.FG_DISABLED)
         self.setStyleSheet(
             f"""QPushButton[label] {{ padding: 0; border: 0 }}
             QPushButton[label]:hover {{ text-decoration: underline }}

qt/aqt/flags.py

@@ -61,55 +61,55 @@ class FlagManager:
 
     def _load_flags(self) -> None:
         labels = cast(dict[str, str], self.mw.col.get_config("flagLabels", {}))
-        icon = ColoredIcon(path="icons:flag-variant.svg", color=colors.DISABLED)
+        icon = ColoredIcon(path="icons:flag-variant.svg", color=colors.FG_DISABLED)
 
         self._flags = [
             Flag(
                 1,
                 labels["1"] if "1" in labels else tr.actions_flag_red(),
-                icon.with_color(colors.FLAG1_FG),
+                icon.with_color(colors.FLAG_1),
                 SearchNode(flag=SearchNode.FLAG_RED),
                 "actionRed_Flag",
             ),
             Flag(
                 2,
                 labels["2"] if "2" in labels else tr.actions_flag_orange(),
-                icon.with_color(colors.FLAG2_FG),
+                icon.with_color(colors.FLAG_2),
                 SearchNode(flag=SearchNode.FLAG_ORANGE),
                 "actionOrange_Flag",
             ),
             Flag(
                 3,
                 labels["3"] if "3" in labels else tr.actions_flag_green(),
-                icon.with_color(colors.FLAG3_FG),
+                icon.with_color(colors.FLAG_3),
                 SearchNode(flag=SearchNode.FLAG_GREEN),
                 "actionGreen_Flag",
             ),
             Flag(
                 4,
                 labels["4"] if "4" in labels else tr.actions_flag_blue(),
-                icon.with_color(colors.FLAG4_FG),
+                icon.with_color(colors.FLAG_4),
                 SearchNode(flag=SearchNode.FLAG_BLUE),
                 "actionBlue_Flag",
             ),
             Flag(
                 5,
                 labels["5"] if "5" in labels else tr.actions_flag_pink(),
-                icon.with_color(colors.FLAG5_FG),
+                icon.with_color(colors.FLAG_5),
                 SearchNode(flag=SearchNode.FLAG_PINK),
                 "actionPink_Flag",
             ),
             Flag(
                 6,
                 labels["6"] if "6" in labels else tr.actions_flag_turquoise(),
-                icon.with_color(colors.FLAG6_FG),
+                icon.with_color(colors.FLAG_6),
                 SearchNode(flag=SearchNode.FLAG_TURQUOISE),
                 "actionTurquoise_Flag",
             ),
             Flag(
                 7,
                 labels["7"] if "7" in labels else tr.actions_flag_purple(),
-                icon.with_color(colors.FLAG7_FG),
+                icon.with_color(colors.FLAG_7),
                 SearchNode(flag=SearchNode.FLAG_PURPLE),
                 "actionPurple_Flag",
             ),

qt/aqt/switch.py

@@ -19,8 +19,8 @@ class Switch(QAbstractButton):
         radius: int = 10,
         left_label: str = "",
         right_label: str = "",
-        left_color: tuple[str, str] = colors.FLAG4_BG,
+        left_color: tuple[str, str] = colors.ACCENT_CARD,
-        right_color: tuple[str, str] = colors.FLAG3_BG,
+        right_color: tuple[str, str] = colors.ACCENT_NOTE,
         parent: QWidget = None,
     ) -> None:
         super().__init__(parent=parent)
@@ -103,12 +103,12 @@ class Switch(QAbstractButton):
         if theme_manager.night_mode:
             color = QColor(theme_manager.DARK_MODE_BUTTON_BG_MIDPOINT)
         else:
-            color = theme_manager.qcolor(colors.FRAME_BG)
+            color = theme_manager.qcolor(colors.CANVAS_OUTSET)
         painter.setBrush(QBrush(color))
         painter.drawEllipse(self._current_knob_rectangle())
 
     def _paint_label(self, painter: QPainter) -> None:
-        painter.setPen(theme_manager.qcolor(colors.SLIGHTLY_GREY_TEXT))
+        painter.setPen(theme_manager.qcolor(colors.FG_DEFAULT))
         font = painter.font()
         font.setPixelSize(int(1.2 * self._knob_radius))
         painter.setFont(font)

qt/aqt/theme.py

@@ -228,6 +228,9 @@ class ThemeManager:
 
         if not self.night_mode:
             app.setStyle(QStyleFactory.create(self._default_style))  # type: ignore
+            self.default_palette.setColor(
+                QPalette.ColorRole.Window, self.qcolor(colors.CANVAS_DEFAULT)
+            )
             app.setPalette(self.default_palette)
             return
 
@@ -236,11 +239,11 @@ class ThemeManager:
 
         palette = QPalette()
 
-        text_fg = self.qcolor(colors.TEXT_FG)
+        TEXT = self.qcolor(colors.FG_DEFAULT)
-        palette.setColor(QPalette.ColorRole.WindowText, text_fg)
+        palette.setColor(QPalette.ColorRole.WindowText, TEXT)
-        palette.setColor(QPalette.ColorRole.ToolTipText, text_fg)
+        palette.setColor(QPalette.ColorRole.ToolTipText, TEXT)
-        palette.setColor(QPalette.ColorRole.Text, text_fg)
+        palette.setColor(QPalette.ColorRole.Text, TEXT)
-        palette.setColor(QPalette.ColorRole.ButtonText, text_fg)
+        palette.setColor(QPalette.ColorRole.ButtonText, TEXT)
 
         hlbg = self.qcolor(colors.HIGHLIGHT_BG)
         hlbg.setAlpha(64)
@@ -249,18 +252,21 @@ class ThemeManager:
         )
         palette.setColor(QPalette.ColorRole.Highlight, hlbg)
 
-        window_bg = self.qcolor(colors.WINDOW_BG)
+        CANVAS_DEFAULT = self.qcolor(colors.CANVAS_DEFAULT)
-        palette.setColor(QPalette.ColorRole.Window, window_bg)
+        palette.setColor(QPalette.ColorRole.Window, CANVAS_DEFAULT)
-        palette.setColor(QPalette.ColorRole.AlternateBase, window_bg)
+        palette.setColor(QPalette.ColorRole.AlternateBase, CANVAS_DEFAULT)
 
         palette.setColor(QPalette.ColorRole.Button, QColor("#454545"))
 
-        frame_bg = self.qcolor(colors.FRAME_BG)
+        CANVAS_INSET = self.qcolor(colors.CANVAS_INSET)
-        palette.setColor(QPalette.ColorRole.Base, frame_bg)
+        palette.setColor(QPalette.ColorRole.Base, CANVAS_INSET)
-        palette.setColor(QPalette.ColorRole.ToolTipBase, frame_bg)
+        palette.setColor(QPalette.ColorRole.ToolTipBase, CANVAS_INSET)
 
-        disabled_color = self.qcolor(colors.DISABLED)
+        palette.setColor(
-        palette.setColor(QPalette.ColorRole.PlaceholderText, disabled_color)
+            QPalette.ColorRole.PlaceholderText, self.qcolor(colors.FG_SUBTLE)
+        )
+
+        disabled_color = self.qcolor(colors.FG_DISABLED)
         palette.setColor(
             QPalette.ColorGroup.Disabled, QPalette.ColorRole.Text, disabled_color
         )
@@ -273,7 +279,7 @@ class ThemeManager:
             disabled_color,
         )
 
-        palette.setColor(QPalette.ColorRole.Link, self.qcolor(colors.LINK))
+        palette.setColor(QPalette.ColorRole.Link, self.qcolor(colors.ACCENT_LINK))
 
         palette.setColor(QPalette.ColorRole.BrightText, Qt.GlobalColor.red)
 
@@ -282,11 +288,11 @@ class ThemeManager:
     def _update_stat_colors(self) -> None:
         import anki.stats as s
 
-        s.colLearn = self.color(colors.NEW_COUNT)
+        s.colLearn = self.color(colors.STATE_NEW)
-        s.colRelearn = self.color(colors.LEARN_COUNT)
+        s.colRelearn = self.color(colors.STATE_LEARN)
-        s.colCram = self.color(colors.SUSPENDED_BG)
+        s.colCram = self.color(colors.STATE_SUSPENDED)
-        s.colSusp = self.color(colors.SUSPENDED_BG)
+        s.colSusp = self.color(colors.STATE_SUSPENDED)
-        s.colMature = self.color(colors.REVIEW_COUNT)
+        s.colMature = self.color(colors.STATE_REVIEW)
         s._legacy_nightmode = self._night_mode_preference
 
 

qt/aqt/webview.py

@@ -234,7 +234,7 @@ class AnkiWebView(QWebEngineView):
         self._page = AnkiWebPage(self._onBridgeCmd)
         # reduce flicker
         self._page.setBackgroundColor(
-            self.get_window_bg_color(theme_manager.night_mode)
+            QColor(theme_manager.color(colors.CANVAS_DEFAULT))
         )
 
         # in new code, use .set_bridge_command() instead of setting this directly
@@ -404,15 +404,6 @@ class AnkiWebView(QWebEngineView):
         else:
             return 3
 
-    def get_window_bg_color(self, night_mode: bool) -> QColor:
-        if night_mode:
-            return QColor(colors.WINDOW_BG[1])
-        elif is_mac:
-            # standard palette does not return correct window color on macOS
-            return QColor("#ececec")
-        else:
-            return theme_manager.default_palette.color(QPalette.ColorRole.Window)
-
     def standard_css(self) -> str:
         palette = theme_manager.default_palette
         color_hl = palette.color(QPalette.ColorRole.Highlight).name()
@@ -459,15 +450,12 @@ div[contenteditable="true"]:focus {{
 
         zoom = self.app_zoom_factor()
 
-        window_bg_day = self.get_window_bg_color(False).name()
-        window_bg_night = self.get_window_bg_color(True).name()
-
         return f"""
-body {{ zoom: {zoom}; background-color: var(--window-bg); }}
+body {{ zoom: {zoom}; background-color: var(--canvas-default); }}
 html {{ {font} }}
 {button_style}
-:root {{ --window-bg: {window_bg_day} }}
+:root {{ --canvas-default: {colors.CANVAS_DEFAULT[0]} }}
-:root[class*=night-mode] {{ --window-bg: {window_bg_night} }}
+:root[class*=night-mode] {{ --canvas-default: {colors.CANVAS_DEFAULT[1]} }}
 """
 
     def stdHtml(
@@ -712,7 +700,9 @@ html {{ {font} }}
     def on_theme_did_change(self) -> None:
         # avoid flashes if page reloaded
         self._page.setBackgroundColor(
-            self.get_window_bg_color(theme_manager.night_mode)
+            QColor(colors.CANVAS_DEFAULT[1])
+            if theme_manager.night_mode
+            else QColor(colors.CANVAS_DEFAULT[0])
         )
         # update night-mode class, and legacy nightMode/night-mode body classes
         self.eval(
@@ -732,30 +722,3 @@ html {{ {font} }}
 }})();
 """
         )
-
-    def _fix_editor_background_color_and_show(self) -> None:
-        # The editor does not use our standard CSS, which takes care of matching the background
-        # colour of the webview to the window we're showing it in. This causes a difference in
-        # shades on Windows/Linux in day mode, that we need to work around. This is a temporary
-        # fix before the 2.1.50 release; with more time there may be a better way to do this.
-
-        if theme_manager.night_mode:
-            # The styling changes are not required for night mode, and hiding+showing the
-            # webview causes a flash of black.
-            return
-
-        self.hide()
-
-        window_bg_day = self.get_window_bg_color(False).name()
-        css = f":root {{ --window-bg: {window_bg_day} }}"
-        self.evalWithCallback(
-            f"""
-(function(){{
-    const style = document.createElement('style');
-    style.innerHTML = `{css}`;
-    document.head.appendChild(style);
-}})();
-""",
-            # avoids FOUC
-            lambda _: self.show(),
-        )

qt/tools/extract_sass_colors.py

@@ -1,45 +0,0 @@
-#!/usr/bin/env python3
-# Copyright: Ankitects Pty Ltd and contributors
-# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-import json
-import re
-import sys
-
-input_scss = sys.argv[1]
-output_py = sys.argv[2]
-
-colors = {}
-
-for line in open(input_scss):
-    line = line.strip()
-    if not line:
-        continue
-    m = re.match(r"--(.+): (.+);$", line)
-    if not m:
-        if (
-            line != "}"
-            and not ":root" in line
-            and "Copyright" not in line
-            and "License" not in line
-            and "color-scheme" not in line
-        ):
-            print("failed to match", line)
-        continue
-
-    var = m.group(1)
-    val = m.group(2)
-
-    colors.setdefault(var, []).append(val)
-
-with open(output_py, "w") as buf:
-    buf.write(
-        """\
-# Copyright: Ankitects Pty Ltd and contributors
-# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-"""
-    )
-    buf.write("# this file is auto-generated from _vars.scss\n")
-    for color, (day, night) in colors.items():
-        color = color.replace("-", "_").upper()
-        buf.write(f'{color} = ("{day}", "{night}")\n')

qt/tools/extract_sass_vars.py

@@ -0,0 +1,111 @@
+#!/usr/bin/env python3
+# Copyright: Ankitects Pty Ltd and contributors
+# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import json
+import re
+import sys
+
+# bazel genrule "srcs"
+colors_scss = sys.argv[1]
+vars_scss = sys.argv[2]
+
+# bazel genrule "outs"
+colors_py = sys.argv[3]
+props_py = sys.argv[4]
+
+palette = {}
+colors = {}
+props = {}
+
+color = ""
+
+
+for line in open(colors_scss):
+    line = line.strip()
+    if not line:
+        continue
+
+    if m := re.match(r"^([a-z]+): \($", line):
+        color = m.group(1)
+        palette[color] = {}
+
+    elif m := re.match(r"(\d): (.+),$", line):
+        palette[color][m.group(1)] = m.group(2)
+
+
+# TODO: recursive extraction of arbitrarily nested Sass maps?
+reached_colors = False
+current_key = ""
+
+for line in open(vars_scss):
+    line = line.strip()
+
+    if not line or line == "props: (":
+        continue
+    if line == ":root {":
+        break
+    if line == "colors: (":
+        reached_colors = True
+        continue
+    if line == "),":
+        if "_" in current_key:
+            current_key = re.sub(r"_.+?$", "", current_key)
+        else:
+            current_key = ""
+
+    if m := re.match(r"^([^$]+): \(", line):
+        if current_key == "":
+            current_key = m.group(1)
+        else:
+            current_key = "_".join([current_key, m.group(1)])
+        continue
+
+    if reached_colors:
+        line = re.sub(
+            r"palette\((.+), (\d)\)",
+            lambda m: palette[m.group(1)][m.group(2)],
+            line,
+        )
+
+    if m := re.match(r"^(.+): (.+),$", line):
+        theme = m.group(1)
+        val = m.group(2)
+
+        if reached_colors:
+            if not current_key in colors:
+                colors[current_key] = {}
+            colors[current_key][theme] = val
+        else:
+            if not current_key in props:
+                props[current_key] = {}
+            props[current_key][theme] = val
+
+
+copyright_notice = """\
+# Copyright: Ankitects Pty Ltd and contributors
+# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+"""
+
+with open(colors_py, "w") as buf:
+    buf.write(copyright_notice)
+    buf.write("# this file is auto-generated from _vars.scss and _colors.scss\n")
+
+    for color, val in colors.items():
+        day = val["light"] if "light" in val else val["default"]
+        night = val["dark"] if len(val) > 1 else day
+
+        color = color.replace("-", "_").upper()
+        buf.write(f'{color} = ("{day}", "{night}")\n')
+
+
+with open(props_py, "w") as buf:
+    buf.write(copyright_notice)
+    buf.write("# this file is auto-generated from _vars.scss\n")
+
+    for prop, val in props.items():
+        day = val["light"] if "light" in val else val["default"]
+        night = val["dark"] if "dark" in val else day
+
+        prop = prop.replace("-", "_").upper()
+        buf.write(f'{prop} = ("{day}", "{night}")\n')

sass/BUILD.bazel

@@ -3,17 +3,26 @@ load("@io_bazel_rules_sass//:defs.bzl", "sass_library")
 sass_library(
     name = "base_lib",
     srcs = [
-        "_fusion-vars.scss",
-        "_vars.scss",
         "base.scss",
         "bootstrap-dark.scss",
     ],
     visibility = ["//visibility:public"],
     deps = [
+        "vars_lib",
         "//sass/bootstrap",
     ],
 )
 
+sass_library(
+    name = "vars_lib",
+    srcs = [
+        "_colors.scss",
+        "_functions.scss",
+        "_fusion-vars.scss",
+        "_vars.scss",
+    ],
+)
+
 sass_library(
     name = "buttons_lib",
     srcs = [
@@ -64,6 +73,9 @@ sass_library(
         "_button-mixins.scss",
         "_fusion-vars.scss",
     ],
+    deps = [
+        "vars_lib",
+    ],
     visibility = ["//visibility:public"],
 )
 
@@ -84,6 +96,6 @@ sass_library(
 )
 
 exports_files(
-    ["_vars.scss"],
+    ["_colors.scss", "_vars.scss"],
     visibility = ["//visibility:public"],
 )

sass/_button-mixins.scss

@@ -1,5 +1,6 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+@use "vars" as *;
 @use "fusion-vars";
 @use "sass:color";
 
@@ -22,9 +23,9 @@
 $btn-base-color-day: white;
 
 @mixin btn-day-base {
-    color: var(--text-fg);
+    color: var(--fg-default);
     background-color: $btn-base-color-day;
-    border-color: var(--medium-border) !important;
+    border-color: var(--border-default) !important;
 }
 
 @mixin btn-day($with-hover: true, $with-active: true, $with-disabled: true) {
@@ -62,7 +63,7 @@ $btn-base-color-day: white;
 $btn-base-color-night: fusion-vars.$button-border;
 
 @mixin btn-night-base {
-    color: var(--text-fg);
+    color: var(--fg-default);
     background: linear-gradient(
         180deg,
         fusion-vars.$button-gradient-start 0%,
@@ -113,8 +114,7 @@ $btn-base-color-night: fusion-vars.$button-border;
     }
 }
 
-// should be similar to -webkit-focus-ring-color
+$focus-color: color(shadow-focus);
-$focus-color: rgba(21 97 174);
 
 @function down-arrow($color) {
     @return url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='transparent' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");

sass/_colors.scss

@@ -0,0 +1,201 @@
+/* Copyright: Ankitects Pty Ltd and contributors
+ * License: GNU AGPL, version 3 or later, http://www.gnu.org/licenses/agpl.html 
+ *
+ * Anki Color Palette
+ * custom gray, rest from Tailwind CSS v3 palette
+ * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+$colors: (
+    gray: (
+        0: #f4f4f4,
+        1: #efefef,
+        2: #e3e3e3,
+        3: #cacaca,
+        4: #919191,
+        5: #3a3a3a,
+        6: #2d2d2d,
+        7: #2b2b2b,
+        8: #232323,
+        9: #181818,
+    ),
+    red: (
+        0: #fef2f2,
+        1: #fee2e2,
+        2: #fecaca,
+        3: #fca5a5,
+        4: #f87171,
+        5: #ef4444,
+        6: #dc2626,
+        7: #b91c1c,
+        8: #991b1b,
+        9: #7f1d1d,
+    ),
+    orange: (
+        0: #fff7ed,
+        1: #ffedd5,
+        2: #fed7aa,
+        3: #fdba74,
+        4: #fb923c,
+        5: #f97316,
+        6: #ea580c,
+        7: #c2410c,
+        8: #9a3412,
+        9: #7c2d12,
+    ),
+    amber: (
+        0: #fffbeb,
+        1: #fef3c7,
+        2: #fde68a,
+        3: #fcd34d,
+        4: #fbbf24,
+        5: #f59e0b,
+        6: #d97706,
+        7: #b45309,
+        8: #92400e,
+        9: #78350f,
+    ),
+    yellow: (
+        0: #fefce8,
+        1: #fef9c3,
+        2: #fef08a,
+        3: #fde047,
+        4: #facc15,
+        5: #eab308,
+        6: #ca8a04,
+        7: #a16207,
+        8: #854d0e,
+        9: #713f12,
+    ),
+    lime: (
+        0: #f7fee7,
+        1: #ecfccb,
+        2: #d9f99d,
+        3: #bef264,
+        4: #a3e635,
+        5: #84cc16,
+        6: #65a30d,
+        7: #4d7c0f,
+        8: #3f6212,
+        9: #365314,
+    ),
+    green: (
+        0: #f0fdf4,
+        1: #dcfce7,
+        2: #bbf7d0,
+        3: #86efac,
+        4: #4ade80,
+        5: #22c55e,
+        6: #16a34a,
+        7: #15803d,
+        8: #166534,
+        9: #14532d,
+    ),
+    teal: (
+        0: #f0fdfa,
+        1: #ccfbf1,
+        2: #99f6e4,
+        3: #5eead4,
+        4: #2dd4bf,
+        5: #14b8a6,
+        6: #0d9488,
+        7: #0f766e,
+        8: #115e59,
+        9: #134e4a,
+    ),
+    cyan: (
+        0: #ecfeff,
+        1: #cffafe,
+        2: #a5f3fc,
+        3: #67e8f9,
+        4: #22d3ee,
+        5: #06b6d4,
+        6: #0891b2,
+        7: #0e7490,
+        8: #155e75,
+        9: #164e63,
+    ),
+    sky: (
+        0: #f0f9ff,
+        1: #e0f2fe,
+        2: #bae6fd,
+        3: #7dd3fc,
+        4: #38bdf8,
+        5: #0ea5e9,
+        6: #0284c7,
+        7: #0369a1,
+        8: #075985,
+        9: #0c4a6e,
+    ),
+    blue: (
+        0: #eff6ff,
+        1: #dbeafe,
+        2: #bfdbfe,
+        3: #93c5fd,
+        4: #60a5fa,
+        5: #3b82f6,
+        6: #2563eb,
+        7: #1d4ed8,
+        8: #1e40af,
+        9: #1e3a8a,
+    ),
+    indigo: (
+        0: #eef2ff,
+        1: #e0e7ff,
+        2: #c7d2fe,
+        3: #a5b4fc,
+        4: #818cf8,
+        5: #6366f1,
+        6: #4f46e5,
+        7: #4338ca,
+        8: #3730a3,
+        9: #312e81,
+    ),
+    violet: (
+        0: #f5f3ff,
+        1: #ede9fe,
+        2: #ddd6fe,
+        3: #c4b5fd,
+        4: #a78bfa,
+        5: #8b5cf6,
+        6: #7c3aed,
+        7: #6d28d9,
+        8: #5b21b6,
+        9: #4c1d95,
+    ),
+    purple: (
+        0: #faf5ff,
+        1: #f3e8ff,
+        2: #e9d5ff,
+        3: #d8b4fe,
+        4: #c084fc,
+        5: #a855f7,
+        6: #9333ea,
+        7: #7e22ce,
+        8: #6b21a8,
+        9: #581c87,
+    ),
+    fuchsia: (
+        0: #fdf4ff,
+        1: #fae8ff,
+        2: #f5d0fe,
+        3: #f0abfc,
+        4: #e879f9,
+        5: #d946ef,
+        6: #c026d3,
+        7: #a21caf,
+        8: #86198f,
+        9: #701a75,
+    ),
+    pink: (
+        0: #fdf2f8,
+        1: #fce7f3,
+        2: #fbcfe8,
+        3: #f9a8d4,
+        4: #f472b6,
+        5: #ec4899,
+        6: #db2777,
+        7: #be185d,
+        8: #9d174d,
+        9: #831843,
+    ),
+);

sass/_functions.scss

@@ -0,0 +1,48 @@
+/* Copyright: Ankitects Pty Ltd and contributors
+ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+
+@use "sass:map";
+@use "sass:list";
+
+@function create-vars-from-map($map, $theme, $name: "-", $output: ()) {
+    @each $key, $value in $map {
+        @if $key == $theme {
+            @return map.set($output, $name, map.get($map, $key));
+        }
+        @if type-of($value) == "map" {
+            $output: map-merge(
+                $output,
+                create-vars-from-map($value, $theme, #{$name}-#{$key}, $output)
+            );
+        }
+    }
+    @return $output;
+}
+
+@function map-deep-get($map, $keys) {
+    @each $key in $keys {
+        $map: map-get($map, $key);
+    }
+    @return $map;
+}
+
+@function get-value-from-map($map, $keyword, $theme, $keys: ()) {
+    $i: str-index($keyword, "-");
+
+    @if $i {
+        @while $i {
+            $sub: str-slice($keyword, 0, $i - 1);
+
+            @if list.length($keys) == 0 {
+                $keys: ($sub);
+            } @else {
+                $keys: list.append($keys, $sub);
+            }
+            $keyword: str-slice($keyword, $i + 1, -1);
+            $i: str-index($keyword, "-");
+        }
+    }
+    $keys: list.join($keys, ($keyword, $theme));
+    
+    @return map-deep-get($map, $keys);
+}

sass/_vars.scss

@@ -1,113 +1,217 @@
 /* Copyright: Ankitects Pty Ltd and contributors
- * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+ * License: GNU AGPL, version 3 or later, http://www.gnu.org/licenses/agpl.html */
+
+@use "sass:map";
+@use "functions" as *;
+@use "colors" as *;
+
+@function palette($key, $shade) {
+    $color: map.get($colors, $key);
+    @return map.get($color, $shade);
+}
+
+$vars: (
+    props: (
+        border-radius: (
+            default: 5px,
+        ),
+    ),
+    colors: (
+        canvas: (
+            default: (
+                light: palette(gray, 0),
+                dark: palette(gray, 7),
+            ),
+            outset: (
+                light: white,
+                dark: palette(gray, 8),
+            ),
+            inset: (
+                light: palette(gray, 2),
+                dark: palette(gray, 8),
+            ),
+            overlay: (
+                light: white,
+                dark: palette(gray, 9),
+            ),
+        ),
+        border: (
+            default: (
+                light: palette(gray, 3),
+                dark: palette(gray, 9),
+            ),
+            subtle: (
+                light: palette(gray, 2),
+                dark: palette(gray, 8),
+            ),
+            focus: (
+                light: palette(indigo, 5),
+                dark: palette(indigo, 5),
+            ),
+        ),
+        button: (
+            focus: (
+                default: palette(cyan, 3),
+                light: palette(cyan, 2),
+                dark: palette(cyan, 4),
+            ),
+        ),
+        fg: (
+            default: (
+                light: palette(gray, 9),
+                dark: palette(gray, 1),
+            ),
+            subtle: (
+                light: palette(gray, 7),
+                dark: palette(gray, 3),
+            ),
+            disabled: (
+                light: palette(gray, 5),
+                dark: palette(gray, 5),
+            ),
+            faint: (
+                light: palette(gray, 2),
+                dark: palette(gray, 8),
+            ),
+        ),
+        shadow: (
+            default: (
+                light: palette(gray, 5),
+                dark: palette(gray, 9),
+            ),
+            inset: (
+                light: palette(gray, 5),
+                dark: palette(gray, 9),
+            ),
+            focus: (
+                default: palette(indigo, 5),
+            ),
+        ),
+        accent: (
+            card: (
+                light: palette(blue, 3),
+                dark: palette(blue, 4),
+            ),
+            note: (
+                light: palette(green, 5),
+                dark: palette(green, 4),
+            ),
+            link: (
+                light: palette(blue, 7),
+                dark: palette(blue, 2),
+            ),
+            danger: (
+                light: palette(red, 5),
+                dark: palette(red, 4),
+            ),
+        ),
+        flag: (
+            1: (
+                light: palette(red, 5),
+                dark: palette(red, 4),
+            ),
+            2: (
+                light: palette(orange, 4),
+                dark: palette(orange, 3),
+            ),
+            3: (
+                light: palette(green, 4),
+                dark: palette(green, 3),
+            ),
+            4: (
+                light: palette(blue, 5),
+                dark: palette(blue, 4),
+            ),
+            5: (
+                light: palette(fuchsia, 4),
+                dark: palette(fuchsia, 3),
+            ),
+            6: (
+                light: palette(teal, 4),
+                dark: palette(teal, 3),
+            ),
+            7: (
+                light: palette(purple, 5),
+                dark: palette(purple, 4),
+            ),
+        ),
+        state: (
+            new: (
+                light: palette(blue, 5),
+                dark: palette(blue, 3),
+            ),
+            learn: (
+                light: palette(red, 6),
+                dark: palette(red, 4),
+            ),
+            review: (
+                light: palette(green, 6),
+                dark: palette(green, 5),
+            ),
+            buried: (
+                light: palette(amber, 5),
+                dark: palette(amber, 8),
+            ),
+            suspended: (
+                light: palette(yellow, 4),
+                dark: palette(yellow, 1),
+            ),
+            marked: (
+                light: palette(indigo, 2),
+                dark: palette(purple, 5),
+            ),
+        ),
+        highlight: (
+            bg: (
+                light: palette(cyan, 4),
+                dark: palette(cyan, 2),
+            ),
+            fg: (
+                light: black,
+                dark: white,
+            ),
+        ),
+    ),
+);
+
+@function color($keyword) {
+    @return var(--#{$keyword});
+}
+
+@function palette-of($keyword, $theme: default) {
+    $colors: map.get($vars, colors);
+    @return get-value-from-map($colors, $keyword, $theme);
+}
+
+@function prop($keyword) {
+    @return var(--#{$keyword});
+}
 
 :root {
-    --text-fg: black;
+    $colors: map.get($vars, colors);
-    --window-bg: #ececec;
+    @each $name, $val in create-vars-from-map($colors, light) {
-    --frame-bg: white;
+        #{$name}: #{$val};
-    --border: #aaa;
+    }
-    --medium-border: #b6b6b6;
+    color-scheme: light;
-    --faint-border: #e7e7e7;
+    &.night-mode {
-    --link: #00a;
+        @each $name, $val in create-vars-from-map($colors, dark) {
-    --review-count: #0a0;
+            #{$name}: #{$val};
-    --new-count: #00a;
+        }
-    --learn-count: #c35617;
+        color-scheme: dark;
-    --zero-count: #ddd;
+    }
-    --slightly-grey-text: #333;
-    --highlight-bg: #77ccff;
-    --highlight-fg: black;
-    --disabled: #777;
-    --flag1-fg: #e25252;
-    --flag2-fg: #ffb347;
-    --flag3-fg: #54c414;
-    --flag4-fg: #578cff;
-    --flag5-fg: #ff82ee;
-    --flag6-fg: #00d1b5;
-    --flag7-fg: #9649dd;
-    --flag1-bg: #ff9b9b;
-    --flag2-bg: #ffb347;
-    --flag3-bg: #93e066;
-    --flag4-bg: #9dbcff;
-    --flag5-bg: #f5a8eb;
-    --flag6-bg: #7edbd7;
-    --flag7-bg: #cca3f1;
-    --buried-fg: #aaaa33;
-    --suspended-fg: #dd0;
-    --suspended-bg: #ffffb2;
-    --marked-bg: #cce;
-    --tooltip-bg: #fcfcfc;
-    --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"] {
+:root {
-    --text-fg: white;
+    $props: map.get($vars, props);
-    --window-bg: #2f2f31;
+    @each $name, $val in create-vars-from-map($props, default) {
-    --frame-bg: #3a3a3a;
+        #{$name}: #{$val};
-    --border: #1f1f1f;
+    }
-    --medium-border: #444;
+    @each $name, $val in create-vars-from-map($props, light) {
-    --faint-border: #29292b;
+        #{$name}: #{$val};
-    --link: #77ccff;
+    }
-    --review-count: #5ccc00;
+    &.night-mode {
-    --new-count: #77ccff;
+        @each $name, $val in create-vars-from-map($props, dark) {
-    --learn-count: #ff935b;
+            #{$name}: #{$val};
-    --zero-count: #444;
+        }
-    --slightly-grey-text: #ccc;
+    }
-    --highlight-bg: #1e95df;
-    --highlight-fg: white;
-    --disabled: #777;
-    --flag1-fg: #ff7b7b;
-    --flag2-fg: #f5aa41;
-    --flag3-fg: #86ce5d;
-    --flag4-fg: #6f9dff;
-    --flag5-fg: #f097e4;
-    --flag6-fg: #5ccfca;
-    --flag7-fg: #9f63d3;
-    --flag1-bg: #aa5555;
-    --flag2-bg: #ac653a;
-    --flag3-bg: #559238;
-    --flag4-bg: #506aa3;
-    --flag5-bg: #975d8f;
-    --flag6-bg: #399185;
-    --flag7-bg: #624b77;
-    --buried-fg: #777733;
-    --suspended-fg: #ffffb2;
-    --suspended-bg: #aaaa33;
-    --marked-bg: #77c;
-    --tooltip-bg: #272727;
-    --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

@@ -1,10 +1,10 @@
 @use "vars";
 @use "scrollbar";
 
-$body-color: var(--text-fg);
+$body-color: var(--fg-default);
-$body-bg: var(--window-bg);
+$body-bg: var(--canvas-default);
 
-$link-hover-color: var(--link);
+$link-hover-color: var(--accent-link);
 $link-hover-decoration: none;
 
 $utilities: (
@@ -69,7 +69,7 @@ samp {
 }
 
 .night-mode .form-select:disabled {
-    background-color: var(--disabled);
+    background-color: var(--fg-disabled);
 }
 
 .reduced-motion * {

sass/bootstrap-dark.scss

@@ -7,11 +7,11 @@
 @mixin night-mode {
     input,
     select {
-        background-color: var(--frame-bg);
+        background-color: var(--canvas-outset);
-        border-color: var(--border);
+        border-color: var(--border-default);
 
         &:focus {
-            background-color: var(--window-bg);
+            background-color: var(--canvas-default);
         }
     }
 }

sass/bootstrap-tooltip.scss

@@ -1,6 +1,8 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
+@use "vars" as *;
+
 $tooltip-padding-y: 0.45rem;
 $tooltip-padding-x: 0.65rem;
 $tooltip-max-width: 300px;
@@ -19,7 +21,7 @@ $tooltip-max-width: 300px;
     // the default code color in tooltips is difficult to read; we'll probably
     // want to add more of our own styling in the future
     code {
-        color: #ffaaaa;
+        color: palette(red, 0);
         direction: inherit;
     }
 }

sass/buttons.scss

@@ -1,7 +1,8 @@
+@use "vars" as *;
 @use "fusion-vars";
 
 :root {
-    --focus-color: #0078d7;
+    --focus-color: #{palette-of(button-focus)};
 
     .isMac {
         --focus-color: rgba(0 103 244 / 0.247);
@@ -27,14 +28,14 @@
         -webkit-appearance: none;
         border-radius: 5px;
         padding: 5px;
-        border: 1px solid var(--border);
+        border: 1px solid var(--border-default);
     }
 }
 
 .nightMode {
     button {
         -webkit-appearance: none;
-        color: var(--text-fg);
+        color: var(--fg-default);
 
         /* match the fusion button gradient */
         background: linear-gradient(

sass/card-counts.scss

@@ -1,21 +1,21 @@
 .review-count {
-    color: var(--review-count);
+    color: var(--state-review);
 }
 
 .new-count {
-    color: var(--new-count);
+    color: var(--state-new);
 }
 
 .learn-count {
-    color: var(--learn-count);
+    color: var(--state-learn);
 }
 
 .zero-count {
-    color: var(--zero-count);
+    color: var(--fg-faint);
 }
 
 .bury-count {
-    color: var(--disabled);
+    color: var(--fg-disabled);
     font-weight: bold;
     margin-inline-start: 2px;
 

sass/core.scss

@@ -8,14 +8,14 @@
 }
 
 body {
-    color: var(--text-fg);
+    color: var(--fg-default);
-    background: var(--window-bg);
+    background: var(--canvas-default);
     margin: 1em;
     transition: opacity 0.5s ease-out;
     overscroll-behavior: none;
 }
 
 a {
-    color: var(--link);
+    color: var(--accent-link);
     text-decoration: none;
 }

sass/night-mode.scss

@@ -2,10 +2,10 @@
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
 @mixin input {
-    background-color: var(--frame-bg);
+    background-color: var(--canvas-outset);
-    border-color: var(--border);
+    border-color: var(--border-default);
 
     &:focus {
-        background-color: var(--window-bg);
+        background-color: var(--canvas-default);
     }
 }

sass/scrollbar.scss

@@ -6,7 +6,7 @@
 
 @mixin custom {
     ::-webkit-scrollbar {
-        background-color: var(--window-bg);
+        background-color: var(--canvas-default);
 
         &:horizontal {
             height: 12px;
@@ -39,7 +39,7 @@
     }
 
     ::-webkit-scrollbar-corner {
-        background-color: var(--window-bg);
+        background-color: var(--canvas-default);
     }
 
     ::-webkit-scrollbar-track {

ts/card-info/Revlog.svelte

@@ -177,16 +177,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .revlog-learn {
-        color: var(--new-count);
+        color: var(--state-new);
     }
 
     .revlog-review {
-        color: var(--review-count);
+        color: var(--state-review);
     }
 
     .revlog-relearn,
     .revlog-ease1 {
-        color: var(--learn-count);
+        color: var(--state-learn);
     }
 
     @media only screen and (max-device-width: 480px) and (orientation: portrait) {

ts/change-notetype/StickyHeader.svelte

@@ -28,7 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <StickyContainer
     --sticky-top={ctx === MapContext.Template ? "-1px" : "0"}
-    --sticky-border="var(--border)"
+    --sticky-border="var(--border-default)"
     --sticky-borders="0px 0 1px"
 >
     <h1>

ts/components/ButtonDropdown.svelte

@@ -31,8 +31,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         min-width: 0;
         padding: calc(var(--buttons-size) / 10) 0;
 
-        background-color: var(--window-bg);
+        background-color: var(--canvas-default);
-        border-color: var(--medium-border);
+        border-color: var(--border-default);
 
         :global(.btn-group) {
             position: static;

ts/components/Collapsible.svelte

@@ -58,15 +58,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             isCollapsed = false;
         }
 
-        inner.addEventListener(
+        const update = () => {
-            "transitionend",
+            inner.toggleAttribute("hidden", collapse);
-            () => {
+            outer.style.removeProperty("overflow");
-                inner.toggleAttribute("hidden", collapse);
+            hidden = collapse;
-                outer.style.removeProperty("overflow");
+        };
-                hidden = collapse;
+
-            },
+        /* fallback required because transition only triggers if the height changes */
-            { once: true },
+        if (height) {
-        );
+            inner.addEventListener("transitionend", update, { once: true });
+        } else {
+            update();
+        }
     }
 
     /* prevent transition on mount for performance reasons */

ts/components/DropdownMenu.svelte

@@ -32,8 +32,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .dropdown-menu {
         border-radius: 5px;
-        background-color: var(--frame-bg);
+        background-color: var(--canvas-outset);
-        border-color: var(--medium-border);
+        border-color: var(--border-default);
         min-width: 1rem;
     }
 </style>

ts/components/Popover.svelte

@@ -15,13 +15,13 @@ Alternative to DropdownMenu that avoids Bootstrap
 <style lang="scss">
     .popover {
         border-radius: 5px;
-        background-color: var(--frame-bg);
+        background-color: var(--canvas-outset);
         min-width: 1rem;
         max-width: 95vw;
 
         padding: 0.5rem 0;
         font-size: 1rem;
-        color: var(--text-fg);
+        color: var(--fg-default);
 
         /* outer border */
         border: 1px solid #b6b6b6;

ts/components/SelectButton.svelte

@@ -61,7 +61,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
         &.btn-day {
             /* Hide default arrow for consistency */
-            background: var(--frame-bg);
+            background: var(--canvas-outset);
         }
     }
 

ts/components/SelectOption.svelte

@@ -13,6 +13,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     .select-option {
-        background-color: var(--frame-bg);
+        background-color: var(--canvas-outset);
     }
 </style>

ts/components/StickyContainer.svelte

@@ -29,9 +29,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         right: 0;
         z-index: 10;
 
-        background: var(--sticky-bg, var(--window-bg));
+        background: var(--sticky-bg, var(--canvas-default));
         border-style: solid;
-        border-color: var(--sticky-border, var(--medium-border));
+        border-color: var(--sticky-border, var(--border-default));
         border-width: var(--sticky-borders, 0);
     }
 </style>

ts/components/Switch.svelte

@@ -41,7 +41,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .nightMode:not(:checked) {
-        background-color: var(--frame-bg);
+        background-color: var(--canvas-outset);
-        border-color: var(--border);
+        border-color: var(--border-default);
     }
 </style>

ts/components/WithFloating.svelte

@@ -95,7 +95,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     .arrow {
         position: absolute;
-        background-color: var(--frame-bg);
+        background-color: var(--canvas-outset);
         width: 10px;
         height: 10px;
         z-index: 60;

ts/congrats/CongratsPage.svelte

@@ -70,7 +70,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         font-size: var(--base-font-size);
 
         :global(a) {
-            color: var(--link);
+            color: var(--accent-link);
             text-decoration: none;
         }
 
@@ -80,7 +80,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .description {
-        border: 1px solid var(--border);
+        border: 1px solid var(--border-default);
         padding: 1em;
     }
 </style>

ts/deck-options/CardStateCustomizer.svelte

@@ -36,8 +36,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .card-state-customizer {
-        color: var(--text-fg);
+        color: var(--fg-default);
-        background-color: var(--frame-bg);
+        background-color: var(--canvas-outset);
 
         width: 100%;
         height: 10em;

ts/deck-options/Switch.svelte

@@ -41,7 +41,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .nightMode:not(:checked) {
-        background-color: var(--frame-bg);
+        background-color: var(--canvas-outset);
-        border-color: var(--border);
+        border-color: var(--border-default);
     }
 </style>

ts/deck-options/TabbedValue.svelte

@@ -58,7 +58,7 @@
         margin-top: 1rem;
         margin-bottom: 0.5rem;
         list-style: none;
-        border-bottom: 1px solid var(--border);
+        border-bottom: 1px solid var(--border-default);
     }
 
     span {
@@ -69,15 +69,15 @@
         padding: 0.25rem 1rem;
         cursor: pointer;
         margin: 0 8px -1px 0;
-        color: var(--disabled);
+        color: var(--fg-subtle);
     }
 
     li.active > span {
-        border-color: var(--border) var(--border) var(--window-bg);
+        border-color: var(--border-default) var(--border-default) var(--canvas-default);
-        color: var(--text-fg);
+        color: var(--fg-default);
     }
 
     span:hover {
-        color: var(--text-fg);
+        color: var(--fg-default);
     }
 </style>

ts/deck-options/TextInputModal.svelte

@@ -100,8 +100,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .default-colors {
-        background-color: var(--window-bg);
+        background-color: var(--canvas-default);
-        color: var(--text-fg);
+        color: var(--fg-default);
     }
 
     .invert {

ts/deck-options/TitledContainer.svelte

@@ -16,6 +16,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     h1 {
-        border-bottom: 1px solid var(--medium-border);
+        border-bottom: 1px solid var(--border-default);
     }
 </style>

ts/editable/editable-base.scss

@@ -20,6 +20,16 @@ p {
 
 :host(body) {
     @include scrollbar.custom;
+/* Nudge users towards using brighter colors,
+   so they are more readable in dark themes */
+span[style*="color"] {
+    filter: brightness(0.8);
+}
+
+:host(.night-mode) {
+    span[style*="color"] {
+        filter: brightness(1.2);
+    }
 }
 
 pre {

ts/editor/EditingArea.svelte

@@ -188,28 +188,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         /* grid-template-columns: repeat(2, 1fr); */
 
         position: relative;
-        background: var(--frame-bg);
+        background: var(--canvas-outset);
         border-radius: 5px;
-        border: 1px solid var(--border);
 
-        box-shadow: 0px 0px 2px 0px var(--border);
+        /* Pseudo-element required to display
-        transition: box-shadow 80ms cubic-bezier(0.33, 1, 0.68, 1);
+           inset focus box-shadow above field contents */
+        &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            pointer-events: none;
+            border-radius: 5px;
+            border: 1px solid var(--border-default);
+            transition: box-shadow 80ms cubic-bezier(0.33, 1, 0.68, 1);
+            box-shadow: inset 0 0 1px 0 var(--shadow-inset);
+        }
 
         &:focus-within {
             outline: none;
-
-            /* This pseudo-element is required to display
-               the inset box-shadow above field contents */
             &::after {
-                content: "";
+                box-shadow: inset 0 0 0 2px var(--border-focus);
-                position: absolute;
-                top: -1px;
-                right: -1px;
-                bottom: -1px;
-                left: -1px;
-                pointer-events: none;
-                border-radius: 5px;
-                box-shadow: inset 0 0 0 2px var(--focus-border);
             }
         }
     }

ts/editor/EditorField.svelte

@@ -117,6 +117,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .editor-field {
         position: relative;
-        --border-color: var(--border);
+        --border-color: var(--border-default);
     }
 </style>

ts/editor/NoteEditor.svelte

@@ -321,7 +321,7 @@ the AddCards dialog) should be implemented in the user of this component.
         {#if hint}
             <Absolute bottom right --margin="10px">
                 <Notification>
-                    <Badge --badge-color="tomato" --icon-align="top"
+                    <Badge --badge-color="var(--accent-danger)" --icon-align="top"
                         >{@html alertIcon}</Badge
                     >
                     <span>{@html hint}</span>
@@ -357,8 +357,8 @@ the AddCards dialog) should be implemented in the user of this component.
                         }}
                         collapsed={fieldsCollapsed[index]}
                         --label-color={cols[index] === "dupe"
-                            ? "var(--flag1-bg)"
+                            ? "var(--flag-1)"
-                            : "var(--window-bg)"}
+                            : "var(--canvas-default)"}
                     >
                         <svelte:fragment slot="field-label">
                             <LabelContainer

ts/editor/Notification.svelte

@@ -12,10 +12,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     .notification {
-        background-color: var(--notification-bg, var(--window-bg));
+        background-color: var(--notification-bg, var(--canvas-default));
         user-select: none;
 
-        border: 1px solid var(--medium-border);
+        border: 1px solid var(--border-default);
         border-radius: 5px;
         padding: 0.9rem 1.2rem;
     }

ts/editor/legacy.scss

@@ -13,10 +13,10 @@ $padding: 2px;
     width: $size;
     height: $size;
     padding: $padding;
-    color: var(--text-fg);
+    color: var(--fg-default);
     font-size: calc($size * 0.6);
     background-color: $btn-base-color-day;
-    border: 1px solid var(--medium-border);
+    border: 1px solid var(--border-default);
     @include button.btn-border-radius;
     &:hover {
         background-color: color.scale($btn-base-color-day, $lightness: -20%);

ts/editor/mathjax-overlay/MathjaxEditor.svelte

@@ -113,7 +113,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             font-family: sans-serif;
             font-size: 55%;
             text-align: center;
-            color: var(--slightly-grey-text);
+            color: var(--fg-subtle);
         }
     }
 </style>

ts/editor/mathjax-overlay/MathjaxMenu.svelte

@@ -74,18 +74,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     .mathjax-menu :global(.dropdown-menu) {
-        border-color: var(--border);
+        border-color: var(--border-default);
     }
 
     .light-theme {
         :global(.dropdown-menu) {
-            background-color: var(--window-bg);
+            background-color: var(--canvas-default);
         }
 
         :global(.CodeMirror) {
             border-width: 1px 0;
             border-style: solid;
-            border-color: var(--border);
+            border-color: var(--border-default);
         }
     }
 </style>

ts/editor/plain-text-input/PlainTextInput.svelte

@@ -175,7 +175,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             border-radius: 5px;
         }
         :global(.CodeMirror) {
-            background: var(--code-bg);
+            border-radius: 0 0 5px 5px;
+            border-top: 1px solid var(--border-default);
+            background: var(--canvas-inset);
         }
         :global(.CodeMirror-lines) {
             padding: 8px 0;

ts/graphs/CardCounts.svelte

@@ -143,7 +143,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     .search-link:hover {
         cursor: pointer;
-        color: var(--link);
+        color: var(--accent-link);
         text-decoration: underline;
     }
 </style>

ts/graphs/NoDataOverlay.svelte

@@ -19,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .no-data {
         rect {
-            fill: var(--window-bg);
+            fill: var(--canvas-default);
         }
 
         text {

ts/graphs/RangeBox.svelte

@@ -117,8 +117,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         z-index: 1;
         top: 0;
         width: 100%;
-        color: var(--text-fg);
+        color: var(--fg-default);
-        background: var(--window-bg);
+        background: var(--canvas-default);
         padding: 0.5em;
 
         @media print {

ts/graphs/Tooltip.svelte

@@ -51,8 +51,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.3s;
-        color: var(--text-fg);
+        color: var(--fg-default);
-        background: var(--tooltip-bg);
+        background: var(--canvas-overlay);
 
         :global(table) {
             border-spacing: 1em 0;

ts/import-csv/Header.svelte

@@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let heading: string;
 </script>
 
-<StickyContainer --sticky-border="var(--border)" --sticky-borders="0px 0 1px">
+<StickyContainer --sticky-border="var(--border-default)" --sticky-borders="0px 0 1px">
     <h1>
         {heading}
     </h1>

ts/import-csv/Preview.svelte

@@ -42,19 +42,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         td {
             text-overflow: ellipsis;
             overflow: hidden;
-            border: 1px solid var(--faint-border);
+            border: 1px solid var(--border-subtle);
             padding: 0.25rem 0.5rem;
             max-width: 15em;
         }
 
         th {
-            background: var(--medium-border);
+            background: var(--border-default);
             text-align: center;
         }
 
         tr {
             &:nth-child(even) {
-                background: var(--frame-bg);
+                background: var(--canvas-outset);
             }
         }
 

ts/import-csv/StickyFooter.svelte

@@ -50,9 +50,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         margin: 0;
         padding: 0.25rem;
 
-        background: var(--window-bg);
+        background: var(--canvas-default);
         border-style: solid none none;
-        border-color: var(--border);
+        border-color: var(--border-default);
         border-width: thin;
     }
 </style>

ts/reviewer/index.ts

@@ -210,7 +210,7 @@ export function _showAnswer(a: string, bodyclass: string): void {
 export function _drawFlag(flag: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7): void {
     const elem = document.getElementById("_flag")!;
     elem.toggleAttribute("hidden", flag === 0);
-    elem.style.color = `var(--flag${flag}-fg)`;
+    elem.style.color = `var(--flag-${flag})`;
 }
 
 export function _drawMark(mark: boolean): void {

ts/reviewer/reviewer.scss

@@ -1,21 +1,22 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+@use "vars" as *;
 
 hr {
-    background-color: #ccc;
+    background-color: palette(gray, 4);
 }
 
 body {
     margin: 20px;
     overflow-wrap: break-word;
-    background-color: var(--window-bg);
+    background-color: var(--canvas-default);
 }
 
 // explicit nightMode definition required
 // to override default .card styling
 body.nightMode {
-    background-color: var(--window-bg);
+    background-color: var(--canvas-default);
-    color: var(--text-fg);
+    color: var(--fg-default);
 }
 
 img {

ts/tag-editor/AutocompleteItem.svelte

@@ -37,6 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </button>
 
 <style lang="scss">
+    @use "sass/vars" as *;
     @use "sass/button-mixins" as button;
 
     .autocomplete-item {
@@ -74,8 +75,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         color: black;
 
         &.selected {
-            background-color: #e9ecef;
+            background-color: palette(gray, 1);
-            border-color: #e9ecef;
+            border-color: palette(gray, 1);
         }
     }
 

ts/tag-editor/Tag.svelte

@@ -61,7 +61,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         font-size: var(--base-font-size);
         padding: 0;
 
-        --border-color: var(--medium-border);
+        --border-color: var(--border-default);
 
         border: 1px solid var(--border-color) !important;
         border-radius: 5px;
@@ -77,8 +77,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
 
         &.selected {
-            box-shadow: 0 0 0 2px var(--focus-shadow);
+            box-shadow: 0 0 0 2px var(--border-focus);
-            --border-color: var(--focus-border);
+            --border-color: var(--border-focus);
         }
     }
 

ts/tag-editor/TagInput.svelte

@@ -265,7 +265,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .tag-input {
         width: 100%;
-        color: var(--text-fg);
+        color: var(--fg-default);
         background: none;
         resize: none;
         appearance: none;