Improve categorization of global colors

by renaming almost all of them and sorting them into separate maps.

qt/aqt/browser/sidebar/searchbar.py

@@ -30,7 +30,7 @@ class SidebarSearchBar(QLineEdit):
     def setup_style(self) -> None:
         styles = [
             "padding: 2px",
-            f"border: 1px solid {theme_manager.color(colors.BORDER)}",
+            f"border: 1px solid {theme_manager.color(colors.BORDER_DEFAULT)}",
             "border-radius: 5px",
         ]
 
@@ -38,7 +38,7 @@ class SidebarSearchBar(QLineEdit):
             "QLineEdit { %s }" % ";".join(styles)
             + f"""
 QLineEdit:focus {{
-    border: 1px solid {theme_manager.color(colors.FOCUS_BORDER)};
+    border: 1px solid {theme_manager.color(colors.BORDER_FOCUS)};
 }}
             """
         )

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.BORDER)
+        border = theme_manager.color(colors.BORDER_DEFAULT)
         styles = [
             "padding: 3px",
             "padding-right: 0px",
@@ -304,7 +304,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()
@@ -654,36 +654,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(--frame-bg);
+    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(--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

@@ -73,13 +73,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,15 +12,15 @@
 }
 
 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;
 }
 
 a {
-    color: var(--link);
+    color: var(--accent-link);
     text-decoration: none;
 }
 

qt/aqt/editor.py

@@ -667,7 +667,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.CARD_VIEW_BG,
+        left_color: tuple[str, str] = colors.ACCENT_CARD,
-        right_color: tuple[str, str] = colors.NOTE_VIEW_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_INSET)
         painter.setBrush(QBrush(color))
         painter.drawEllipse(self._current_knob_rectangle())
 
     def _paint_label(self, painter: QPainter) -> None:
-        painter.setPen(theme_manager.qcolor(colors.TEXT_FG))
+        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

@@ -193,15 +193,15 @@ class ThemeManager:
             # also set for border to apply
             buf += f"""
 QMenuBar {{
-  border-bottom: 1px solid {self.color(colors.BORDER)};
+  border-bottom: 1px solid {self.color(colors.BORDER_DEFAULT)};
-  background: {self.color(colors.WINDOW_BG) if self.night_mode else "white"};
+  background: {self.color(colors.CANVAS_DEFAULT) 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)};
+  background: {self.color(colors.CANVAS_DEFAULT)};
 }}
             """
 
@@ -235,10 +235,10 @@ QScrollBar::sub-line {{
 
 QTabWidget {{ background-color: {}; }}
 """.format(
-                    self.color(colors.WINDOW_BG),
+                    self.color(colors.CANVAS_DEFAULT),
                     # fushion-button-hover-bg
                     "#656565",
-                    self.color(colors.WINDOW_BG),
+                    self.color(colors.CANVAS_DEFAULT),
                 )
 
         # allow addons to modify the styling
@@ -252,7 +252,7 @@ QTabWidget {{ background-color: {}; }}
         if not self.night_mode:
             app.setStyle(QStyleFactory.create(self._default_style))  # type: ignore
             self.default_palette.setColor(
-                QPalette.ColorRole.Window, self.qcolor(colors.WINDOW_BG)
+                QPalette.ColorRole.Window, self.qcolor(colors.CANVAS_DEFAULT)
             )
             app.setPalette(self.default_palette)
             return
@@ -262,11 +262,11 @@ QTabWidget {{ background-color: {}; }}
 
         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)
@@ -275,21 +275,21 @@ QTabWidget {{ background-color: {}; }}
         )
         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)
 
         palette.setColor(
-            QPalette.ColorRole.PlaceholderText, self.qcolor(colors.SLIGHTLY_GREY_TEXT)
+            QPalette.ColorRole.PlaceholderText, self.qcolor(colors.FG_SUBTLE)
         )
 
-        disabled_color = self.qcolor(colors.DISABLED)
+        disabled_color = self.qcolor(colors.FG_DISABLED)
         palette.setColor(
             QPalette.ColorGroup.Disabled, QPalette.ColorRole.Text, disabled_color
         )
@@ -302,7 +302,7 @@ QTabWidget {{ background-color: {}; }}
             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)
 
@@ -311,11 +311,11 @@ QTabWidget {{ background-color: {}; }}
     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

@@ -233,7 +233,9 @@ class AnkiWebView(QWebEngineView):
         self.set_title(title)
         self._page = AnkiWebPage(self._onBridgeCmd)
         # reduce flicker
-        self._page.setBackgroundColor(QColor(theme_manager.color(colors.WINDOW_BG)))
+        self._page.setBackgroundColor(
+            QColor(theme_manager.color(colors.CANVAS_DEFAULT))
+        )
 
         # in new code, use .set_bridge_command() instead of setting this directly
         self.onBridgeCmd: Callable[[str], Any] = self.defaultOnBridgeCmd
@@ -449,11 +451,11 @@ div[contenteditable="true"]:focus {{
         zoom = self.app_zoom_factor()
 
         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: {colors.WINDOW_BG[0]} }}
+:root {{ --canvas-default: {colors.CANVAS_DEFAULT[0]} }}
-:root[class*=night-mode] {{ --window-bg: {colors.WINDOW_BG[1]} }}
+:root[class*=night-mode] {{ --canvas-default: {colors.CANVAS_DEFAULT[1]} }}
 """
 
     def stdHtml(
@@ -698,9 +700,9 @@ html {{ {font} }}
     def on_theme_did_change(self) -> None:
         # avoid flashes if page reloaded
         self._page.setBackgroundColor(
-            QColor(colors.WINDOW_BG[1])
+            QColor(colors.CANVAS_DEFAULT[1])
             if theme_manager.night_mode
-            else QColor(colors.WINDOW_BG[0])
+            else QColor(colors.CANVAS_DEFAULT[0])
         )
         # update night-mode class, and legacy nightMode/night-mode body classes
         self.eval(

qt/tools/extract_sass_vars.py

@@ -48,20 +48,22 @@ for line in open(vars_scss):
     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):
-        current_key = m.group(1)
+        if current_key == "":
-
+            current_key = m.group(1)
-        if reached_colors:
-            colors[current_key] = {}
         else:
-            props[current_key] = {}
+            current_key = "_".join([current_key, m.group(1)])
-
         continue
 
     if reached_colors:
         line = re.sub(
-            r"get\(\$color, (.+), (\d)\)",
+            r"color\((.+), (\d)\)",
             lambda m: palette[m.group(1)][m.group(2)],
             line,
         )
@@ -71,8 +73,12 @@ for line in open(vars_scss):
         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
 
 

sass/_button-mixins.scss

@@ -21,9 +21,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(--border) !important;
+    border-color: var(--border-default) !important;
 }
 
 @mixin btn-day(
@@ -70,7 +70,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(
         0deg,
         fusion-vars.$button-gradient-start 0%,

sass/_colors.scss

@@ -1,13 +1,11 @@
 /* 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 
-
-/*
- *  Anki Color Palette
- *  custom gray, rest from Tailwind CSS v3 palette
  *
- *  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+ * Anki Color Palette
+ * custom gray, rest from Tailwind CSS v3 palette
+ * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
 
-$color: (
+$colors: (
     gray: (
         0: #FFFFFF,
         1: #F6F6F6,

sass/_functions.scss

@@ -0,0 +1,25 @@
+/* Copyright: Ankitects Pty Ltd and contributors
+ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+ 
+ @use "sass:map";
+ @use "colors" as *;
+
+ @function color($key, $shade) {
+    $color: map.get($colors, $key);
+    @return map.get($color, $shade);
+}
+
+@function 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,
+                vars-from-map($value, $theme, #{$name}-#{$key}, $output)
+            );
+        }
+    }
+    @return $output;
+}

sass/_vars.scss

@@ -1,14 +1,8 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later, http://www.gnu.org/licenses/agpl.html */
 
-@use "colors" as *;
+@use "sass:map";
-
+@use "functions" as *;
-@function get($map, $keys...) {
-    @each $key in $keys {
-        $map: map-get($map, $key);
-    }
-    @return $map;
-}
 
 $vars: (
     props: (
@@ -17,188 +11,169 @@ $vars: (
         ),
     ),
     colors: (
-        text-fg: (
+        canvas: (
-            light: get($color, gray, 9),
+            default: (
-            dark: get($color, gray, 1),
+                light: color(gray, 1),
-        ),
+                dark: color(gray, 7),
-        window-bg: (
+            ),
-            light: get($color, gray, 1),
+            outset: (
-            dark: get($color, gray, 7),
+                light: color(gray, 0),
-        ),
+                dark: color(gray, 5),
-        frame-bg: (
+            ),
-            light: get($color, gray, 0),
+            inset: (
-            dark: get($color, gray, 5),
+                light: color(gray, 1),
+                dark: color(gray, 8),
+            ),
+            overlay: (
+                light: color(gray, 0),
+                dark: color(gray, 9),
+            ),
         ),
         border: (
-            light: get($color, gray, 3),
+            default: (
-            dark: get($color, gray, 8),
+                light: color(gray, 3),
+                dark: color(gray, 8),
+            ),
+            subtle: (
+                light: color(gray, 2),
+                dark: color(gray, 7),
+            ),
+            focus: (
+                light: color(indigo, 6),
+                dark: color(indigo, 5),
+            ),
         ),
-        faint-border: (
+        fg: (
-            light: get($color, gray, 2),
+            default: (
-            dark: get($color, gray, 7),
+                light: color(gray, 9),
+                dark: color(gray, 1),
+            ),
+            subtle: (
+                light: color(gray, 7),
+                dark: color(gray, 3),
+            ),
+            disabled: (
+                light: color(gray, 5),
+                dark: color(gray, 5),
+            ),
+            faint: (
+                light: color(gray, 2),
+                dark: color(gray, 8),
+            ),
         ),
-        slightly-grey-text: (
+        accent: (
-            light: get($color, gray, 7),
+            card: (
-            dark: get($color, gray, 3),
+                light: color(blue, 5),
+                dark: color(blue, 4),
+            ),
+            note: (
+                light: color(green, 5),
+                dark: color(green, 4),
+            ),
+            link: (
+                light: color(blue, 9),
+                dark: color(blue, 2),
+            ),
+            danger: (
+                light: color(red, 5),
+                dark: color(red, 4),
+            ),
         ),
-        disabled: (
+        flag: (
-            light: get($color, gray, 5),
+            1: (
-            dark: get($color, gray, 5),
+                light: color(red, 6),
+                dark: color(red, 4),
+            ),
+            2: (
+                light: color(orange, 5),
+                dark: color(orange, 4),
+            ),
+            3: (
+                light: color(green, 5),
+                dark: color(green, 4),
+            ),
+            4: (
+                light: color(blue, 6),
+                dark: color(blue, 5),
+            ),
+            5: (
+                light: color(fuchsia, 5),
+                dark: color(fuchsia, 4),
+            ),
+            6: (
+                light: color(teal, 5),
+                dark: color(teal, 4),
+            ),
+            7: (
+                light: color(purple, 6),
+                dark: color(purple, 5),
+            ),
         ),
-        link: (
+        state: (
-            light: get($color, blue, 9),
+            new: (
-            dark: get($color, blue, 2),
+                light: color(blue, 5),
+                dark: color(blue, 3),
+            ),
+            learn: (
+                light: color(red, 6),
+                dark: color(red, 4),
+            ),
+            review: (
+                light: color(green, 6),
+                dark: color(green, 5),
+            ),
+            buried: (
+                light: color(amber, 5),
+                dark: color(amber, 8),
+            ),
+            suspended: (
+                light: color(yellow, 4),
+                dark: color(yellow, 1),
+            ),
+            marked: (
+                light: color(indigo, 2),
+                dark: color(purple, 5),
+            ),
         ),
-        review-count: (
+        highlight: (
-            light: get($color, green, 7),
+            bg: (
-            dark: get($color, green, 5),
+                light: color(cyan, 2),
-        ),
+                dark: color(cyan, 2),
-        new-count: (
+            ),
-            light: get($color, blue, 9),
+            fg: (
-            dark: get($color, blue, 3),
+                light: black,
-        ),
+                dark: white,
-        learn-count: (
+            ),
-            light: get($color, orange, 7),
-            dark: get($color, red, 5),
-        ),
-        zero-count: (
-            light: get($color, gray, 2),
-            dark: get($color, gray, 8),
-        ),
-        highlight-bg: (
-            light: get($color, cyan, 2),
-            dark: get($color, cyan, 2),
-        ),
-        highlight-fg: (
-            light: black,
-            dark: white,
-        ),
-        card-view-bg: (
-            light: get($color, blue, 5),
-            dark: get($color, blue, 4),
-        ),
-        note-view-bg: (
-            light: get($color, green, 5),
-            dark: get($color, green, 4),
-        ),
-        flag1-fg: (
-            light: get($color, red, 6),
-            dark: get($color, red, 4),
-        ),
-        flag2-fg: (
-            light: get($color, orange, 5),
-            dark: get($color, orange, 4),
-        ),
-        flag3-fg: (
-            light: get($color, green, 5),
-            dark: get($color, green, 4),
-        ),
-        flag4-fg: (
-            light: get($color, blue, 5),
-            dark: get($color, blue, 4),
-        ),
-        flag5-fg: (
-            light: get($color, fuchsia, 4),
-            dark: get($color, fuchsia, 3),
-        ),
-        flag6-fg: (
-            light: get($color, teal, 5),
-            dark: get($color, teal, 4),
-        ),
-        flag7-fg: (
-            light: get($color, purple, 6),
-            dark: get($color, purple, 5),
-        ),
-        flag1-bg: (
-            light: get($color, red, 5),
-            dark: get($color, red, 6),
-        ),
-        flag2-bg: (
-            light: get($color, orange, 3),
-            dark: get($color, orange, 5),
-        ),
-        flag3-bg: (
-            light: get($color, green, 3),
-            dark: get($color, green, 5),
-        ),
-        flag4-bg: (
-            light: get($color, blue, 3),
-            dark: get($color, blue, 5),
-        ),
-        flag5-bg: (
-            light: get($color, fuchsia, 2),
-            dark: get($color, fuchsia, 5),
-        ),
-        flag6-bg: (
-            light: get($color, teal, 4),
-            dark: get($color, teal, 5),
-        ),
-        flag7-bg: (
-            light: get($color, purple, 4),
-            dark: get($color, purple, 7),
-        ),
-        buried-fg: (
-            light: get($color, amber, 5),
-            dark: get($color, amber, 8),
-        ),
-        suspended-fg: (
-            light: get($color, yellow, 4),
-            dark: get($color, yellow, 1),
-        ),
-        suspended-bg: (
-            light: get($color, yellow, 1),
-            dark: get($color, yellow, 5),
-        ),
-        marked-bg: (
-            light: get($color, indigo, 2),
-            dark: get($color, purple, 5),
-        ),
-        tooltip-bg: (
-            light: get($color, gray, 0),
-            dark: get($color, gray, 8),
-        ),
-        focus-border: (
-            light: get($color, indigo, 6),
-            dark: get($color, indigo, 5),
-        ),
-        code-bg: (
-            light: get($color, gray, 0),
-            dark: get($color, gray, 7),
         ),
     ),
 );
 
 :root {
-    @each $name, $map in map-get($vars, colors) {
+    $colors: map.get($vars, colors);
-        --#{$name}: #{map-get($map, light)};
+    @each $name, $val in vars-from-map($colors, light) {
+        #{$name}: #{$val};
     }
+    color-scheme: light;
     &.night-mode {
-        @each $name, $map in get($vars, colors) {
+        @each $name, $val in vars-from-map($colors, dark) {
-            --#{$name}: #{map-get($map, dark)};
+            #{$name}: #{$val};
         }
         color-scheme: dark;
     }
 }
 
 :root {
-    @each $name, $map in map-get($vars, props) {
+    $props: map.get($vars, props);
-        $val: map-get($map, default);
+
-        @if $val {
+    @each $name, $val in vars-from-map($props, default) {
-            --#{$name}: #{$val};
+        #{$name}: #{$val};
-        }
     }
-    @each $name, $map in map-get($vars, props) {
+    @each $name, $val in vars-from-map($props, light) {
-        $val: map-get($map, light);
+        #{$name}: #{$val};
-        @if $val {
-            --#{$name}: #{$val};
-        }
     }
     &.night-mode {
-        @each $name, $map in map-get($vars, props) {
+        @each $name, $val in vars-from-map($props, dark) {
-            $val: map-get($map, dark);
+            #{$name}: #{$val};
-            @if $val {
-                --#{$name}: #{$val};
-            }
         }
     }
 }

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: (
@@ -72,5 +72,5 @@ samp {
 }
 
 .night-mode .form-select:disabled {
-    background-color: var(--disabled);
+    background-color: var(--fg-disabled);
 }

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/buttons.scss

@@ -27,14 +27,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 night-mode {
     ::-webkit-scrollbar {
-        background-color: var(--window-bg);
+        background-color: var(--canvas-default);
 
         &:horizontal {
             height: 12px;
@@ -31,6 +31,6 @@
     }
 
     ::-webkit-scrollbar-corner {
-        background-color: var(--window-bg);
+        background-color: var(--canvas-default);
     }
 }

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(--border);
+        border-color: var(--border-default);
 
         :global(.btn-group) {
             position: static;

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(--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(--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(--slightly-grey-text);
+        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(--border);
+        border-bottom: 1px solid var(--border-default);
     }
 </style>

ts/editor/EditingArea.svelte

@@ -188,11 +188,11 @@ 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);
+        border: 1px solid var(--border-default);
 
-        box-shadow: 0px 0px 2px 0px var(--border);
+        box-shadow: 0px 0px 2px 0px var(--border-default);
         transition: box-shadow 80ms cubic-bezier(0.33, 1, 0.68, 1);
 
         &:focus-within {
@@ -209,7 +209,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 left: -1px;
                 pointer-events: none;
                 border-radius: 5px;
-                box-shadow: inset 0 0 0 2px var(--focus-border);
+                box-shadow: inset 0 0 0 2px var(--border-focus);
             }
         }
     }

ts/editor/EditorField.svelte

@@ -109,6 +109,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

@@ -314,7 +314,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>
@@ -349,8 +349,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(--border);
+        border: 1px solid var(--border-default);
         border-radius: 5px;
         padding: 0.9rem 1.2rem;
     }

ts/editor/legacy.scss

@@ -12,10 +12,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(--border);
+    border: 1px solid var(--border-default);
     @include button.btn-border-radius;
     margin-left: -1px;
 

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

@@ -160,8 +160,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         :global(.CodeMirror) {
             border-radius: 0 0 5px 5px;
-            border-top: 1px solid var(--border);
+            border-top: 1px solid var(--border-default);
-            background: var(--code-bg);
+            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(--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

@@ -8,14 +8,14 @@ hr {
 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/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(--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;