From f2d5abb95d3219ef3794bfde944ebcfd5ca8fc22 Mon Sep 17 00:00:00 2001 From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com> Date: Mon, 29 Aug 2022 15:42:09 +0200 Subject: [PATCH] Improve categorization of global colors by renaming almost all of them and sorting them into separate maps. --- qt/aqt/browser/sidebar/searchbar.py | 4 +- qt/aqt/browser/sidebar/tree.py | 16 +- qt/aqt/browser/table/__init__.py | 34 +- qt/aqt/browser/table/table.py | 2 +- qt/aqt/data/web/css/deckbrowser.scss | 14 +- qt/aqt/data/web/css/overview.scss | 2 +- qt/aqt/data/web/css/reviewer-bottom.scss | 4 +- qt/aqt/data/web/css/toolbar.scss | 12 +- qt/aqt/data/web/css/webview.scss | 6 +- qt/aqt/editor.py | 2 +- qt/aqt/filtered_deck.py | 4 +- qt/aqt/flags.py | 16 +- qt/aqt/switch.py | 8 +- qt/aqt/theme.py | 50 +-- qt/aqt/webview.py | 14 +- qt/tools/extract_sass_vars.py | 20 +- sass/_button-mixins.scss | 6 +- sass/_colors.scss | 12 +- sass/_functions.scss | 25 ++ sass/_vars.scss | 309 ++++++++---------- sass/base.scss | 8 +- sass/bootstrap-dark.scss | 6 +- sass/buttons.scss | 4 +- sass/card-counts.scss | 10 +- sass/core.scss | 6 +- sass/night-mode.scss | 6 +- sass/scrollbar.scss | 4 +- ts/card-info/Revlog.svelte | 6 +- ts/change-notetype/StickyHeader.svelte | 2 +- ts/components/ButtonDropdown.svelte | 4 +- ts/components/DropdownMenu.svelte | 4 +- ts/components/Popover.svelte | 4 +- ts/components/SelectButton.svelte | 2 +- ts/components/SelectOption.svelte | 2 +- ts/components/StickyContainer.svelte | 4 +- ts/components/Switch.svelte | 4 +- ts/components/WithFloating.svelte | 2 +- ts/congrats/CongratsPage.svelte | 4 +- ts/deck-options/CardStateCustomizer.svelte | 4 +- ts/deck-options/Switch.svelte | 4 +- ts/deck-options/TabbedValue.svelte | 10 +- ts/deck-options/TextInputModal.svelte | 4 +- ts/deck-options/TitledContainer.svelte | 2 +- ts/editor/EditingArea.svelte | 8 +- ts/editor/EditorField.svelte | 2 +- ts/editor/NoteEditor.svelte | 6 +- ts/editor/Notification.svelte | 4 +- ts/editor/legacy.scss | 4 +- .../mathjax-overlay/MathjaxEditor.svelte | 2 +- ts/editor/mathjax-overlay/MathjaxMenu.svelte | 6 +- .../plain-text-input/PlainTextInput.svelte | 4 +- ts/graphs/CardCounts.svelte | 2 +- ts/graphs/NoDataOverlay.svelte | 2 +- ts/graphs/RangeBox.svelte | 4 +- ts/graphs/Tooltip.svelte | 4 +- ts/import-csv/Header.svelte | 2 +- ts/import-csv/Preview.svelte | 6 +- ts/import-csv/StickyFooter.svelte | 4 +- ts/reviewer/index.ts | 2 +- ts/reviewer/reviewer.scss | 6 +- ts/tag-editor/Tag.svelte | 6 +- ts/tag-editor/TagInput.svelte | 2 +- 62 files changed, 381 insertions(+), 361 deletions(-) create mode 100644 sass/_functions.scss diff --git a/qt/aqt/browser/sidebar/searchbar.py b/qt/aqt/browser/sidebar/searchbar.py index d8f11f6ee..ae640e618 100644 --- a/qt/aqt/browser/sidebar/searchbar.py +++ b/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)}; }} """ ) diff --git a/qt/aqt/browser/sidebar/tree.py b/qt/aqt/browser/sidebar/tree.py index 972e1555e..0a8c8eb35 100644 --- a/qt/aqt/browser/sidebar/tree.py +++ b/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), ) diff --git a/qt/aqt/browser/table/__init__.py b/qt/aqt/browser/table/__init__.py index 2cfd96b46..314ac742c 100644 --- a/qt/aqt/browser/table/__init__.py +++ b/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 - return None + temp_color = colors.FLAG_7 + + 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 diff --git a/qt/aqt/browser/table/table.py b/qt/aqt/browser/table/table.py index 29cdb67db..56de065a2 100644 --- a/qt/aqt/browser/table/table.py +++ b/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("") diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss index 5a8eae45b..f955b5e3b 100644 --- a/qt/aqt/data/web/css/deckbrowser.scss +++ b/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; diff --git a/qt/aqt/data/web/css/overview.scss b/qt/aqt/data/web/css/overview.scss index 23565f573..719581eef 100644 --- a/qt/aqt/data/web/css/overview.scss +++ b/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 { diff --git a/qt/aqt/data/web/css/reviewer-bottom.scss b/qt/aqt/data/web/css/reviewer-bottom.scss index 61e421a14..b6a02ee5b 100644 --- a/qt/aqt/data/web/css/reviewer-bottom.scss +++ b/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); } } diff --git a/qt/aqt/data/web/css/toolbar.scss b/qt/aqt/data/web/css/toolbar.scss index 235387461..b07dcd81d 100644 --- a/qt/aqt/data/web/css/toolbar.scss +++ b/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); } diff --git a/qt/aqt/data/web/css/webview.scss b/qt/aqt/data/web/css/webview.scss index 71a377303..831c91832 100644 --- a/qt/aqt/data/web/css/webview.scss +++ b/qt/aqt/data/web/css/webview.scss @@ -12,15 +12,15 @@ } body { - color: var(--text-fg); - background: var(--window-bg); + color: var(--fg-default); + 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; } diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index 034353023..fa9846776 100644 --- a/qt/aqt/editor.py +++ b/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) diff --git a/qt/aqt/filtered_deck.py b/qt/aqt/filtered_deck.py index 2fa6c3924..1c5a38728 100644 --- a/qt/aqt/filtered_deck.py +++ b/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) - grey = theme_manager.color(colors.DISABLED) + blue = theme_manager.color(colors.ACCENT_LINK) + grey = theme_manager.color(colors.FG_DISABLED) self.setStyleSheet( f"""QPushButton[label] {{ padding: 0; border: 0 }} QPushButton[label]:hover {{ text-decoration: underline }} diff --git a/qt/aqt/flags.py b/qt/aqt/flags.py index 7a3ea6862..5373206ab 100644 --- a/qt/aqt/flags.py +++ b/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", ), diff --git a/qt/aqt/switch.py b/qt/aqt/switch.py index d2285115b..2470e75f0 100644 --- a/qt/aqt/switch.py +++ b/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, - right_color: tuple[str, str] = colors.NOTE_VIEW_BG, + left_color: tuple[str, str] = colors.ACCENT_CARD, + 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) diff --git a/qt/aqt/theme.py b/qt/aqt/theme.py index 444af9aff..ad19f5761 100644 --- a/qt/aqt/theme.py +++ b/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)}; - background: {self.color(colors.WINDOW_BG) if self.night_mode else "white"}; + border-bottom: 1px solid {self.color(colors.BORDER_DEFAULT)}; + 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) - palette.setColor(QPalette.ColorRole.WindowText, text_fg) - palette.setColor(QPalette.ColorRole.ToolTipText, text_fg) - palette.setColor(QPalette.ColorRole.Text, text_fg) - palette.setColor(QPalette.ColorRole.ButtonText, text_fg) + TEXT = self.qcolor(colors.FG_DEFAULT) + palette.setColor(QPalette.ColorRole.WindowText, TEXT) + palette.setColor(QPalette.ColorRole.ToolTipText, TEXT) + palette.setColor(QPalette.ColorRole.Text, TEXT) + 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) - palette.setColor(QPalette.ColorRole.Window, window_bg) - palette.setColor(QPalette.ColorRole.AlternateBase, window_bg) + CANVAS_DEFAULT = self.qcolor(colors.CANVAS_DEFAULT) + palette.setColor(QPalette.ColorRole.Window, CANVAS_DEFAULT) + palette.setColor(QPalette.ColorRole.AlternateBase, CANVAS_DEFAULT) palette.setColor(QPalette.ColorRole.Button, QColor("#454545")) - frame_bg = self.qcolor(colors.FRAME_BG) - palette.setColor(QPalette.ColorRole.Base, frame_bg) - palette.setColor(QPalette.ColorRole.ToolTipBase, frame_bg) + CANVAS_INSET = self.qcolor(colors.CANVAS_INSET) + palette.setColor(QPalette.ColorRole.Base, CANVAS_INSET) + 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.colRelearn = self.color(colors.LEARN_COUNT) - s.colCram = self.color(colors.SUSPENDED_BG) - s.colSusp = self.color(colors.SUSPENDED_BG) - s.colMature = self.color(colors.REVIEW_COUNT) + s.colLearn = self.color(colors.STATE_NEW) + s.colRelearn = self.color(colors.STATE_LEARN) + s.colCram = self.color(colors.STATE_SUSPENDED) + s.colSusp = self.color(colors.STATE_SUSPENDED) + s.colMature = self.color(colors.STATE_REVIEW) s._legacy_nightmode = self._night_mode_preference diff --git a/qt/aqt/webview.py b/qt/aqt/webview.py index 11d2eaf66..75e93e0e2 100644 --- a/qt/aqt/webview.py +++ b/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[class*=night-mode] {{ --window-bg: {colors.WINDOW_BG[1]} }} +:root {{ --canvas-default: {colors.CANVAS_DEFAULT[0]} }} +: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( diff --git a/qt/tools/extract_sass_vars.py b/qt/tools/extract_sass_vars.py index 7d2fa1680..59d9721dc 100644 --- a/qt/tools/extract_sass_vars.py +++ b/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 reached_colors: - colors[current_key] = {} + if current_key == "": + current_key = m.group(1) 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 diff --git a/sass/_button-mixins.scss b/sass/_button-mixins.scss index cb772eff4..c98a5e231 100644 --- a/sass/_button-mixins.scss +++ b/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%, diff --git a/sass/_colors.scss b/sass/_colors.scss index 193983833..7318ed62f 100644 --- a/sass/_colors.scss +++ b/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 */ - -/* - * Anki Color Palette - * custom gray, rest from Tailwind CSS v3 palette + * 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 + * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ -$color: ( +$colors: ( gray: ( 0: #FFFFFF, 1: #F6F6F6, diff --git a/sass/_functions.scss b/sass/_functions.scss new file mode 100644 index 000000000..f3cd58783 --- /dev/null +++ b/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; +} diff --git a/sass/_vars.scss b/sass/_vars.scss index f68a2f995..c8ea5a08f 100644 --- a/sass/_vars.scss +++ b/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 *; - -@function get($map, $keys...) { - @each $key in $keys { - $map: map-get($map, $key); - } - @return $map; -} +@use "sass:map"; +@use "functions" as *; $vars: ( props: ( @@ -17,188 +11,169 @@ $vars: ( ), ), colors: ( - text-fg: ( - light: get($color, gray, 9), - dark: get($color, gray, 1), - ), - window-bg: ( - light: get($color, gray, 1), - dark: get($color, gray, 7), - ), - frame-bg: ( - light: get($color, gray, 0), - dark: get($color, gray, 5), + canvas: ( + default: ( + light: color(gray, 1), + dark: color(gray, 7), + ), + outset: ( + light: color(gray, 0), + dark: color(gray, 5), + ), + inset: ( + light: color(gray, 1), + dark: color(gray, 8), + ), + overlay: ( + light: color(gray, 0), + dark: color(gray, 9), + ), ), border: ( - light: get($color, gray, 3), - dark: get($color, gray, 8), + default: ( + 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: ( - light: get($color, gray, 2), - dark: get($color, gray, 7), + fg: ( + default: ( + 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: ( - light: get($color, gray, 7), - dark: get($color, gray, 3), + accent: ( + card: ( + 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: ( - light: get($color, gray, 5), - dark: get($color, gray, 5), + flag: ( + 1: ( + 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: ( - light: get($color, blue, 9), - dark: get($color, blue, 2), + state: ( + new: ( + 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: ( - light: get($color, green, 7), - dark: get($color, green, 5), - ), - new-count: ( - light: get($color, blue, 9), - dark: get($color, blue, 3), - ), - 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), + highlight: ( + bg: ( + light: color(cyan, 2), + dark: color(cyan, 2), + ), + fg: ( + light: black, + dark: white, + ), ), ), ); :root { - @each $name, $map in map-get($vars, colors) { - --#{$name}: #{map-get($map, light)}; + $colors: map.get($vars, colors); + @each $name, $val in vars-from-map($colors, light) { + #{$name}: #{$val}; } + color-scheme: light; &.night-mode { - @each $name, $map in get($vars, colors) { - --#{$name}: #{map-get($map, dark)}; + @each $name, $val in vars-from-map($colors, dark) { + #{$name}: #{$val}; } color-scheme: dark; } } :root { - @each $name, $map in map-get($vars, props) { - $val: map-get($map, default); - @if $val { - --#{$name}: #{$val}; - } + $props: map.get($vars, props); + + @each $name, $val in vars-from-map($props, default) { + #{$name}: #{$val}; } - @each $name, $map in map-get($vars, props) { - $val: map-get($map, light); - @if $val { - --#{$name}: #{$val}; - } + @each $name, $val in vars-from-map($props, light) { + #{$name}: #{$val}; } &.night-mode { - @each $name, $map in map-get($vars, props) { - $val: map-get($map, dark); - @if $val { - --#{$name}: #{$val}; - } + @each $name, $val in vars-from-map($props, dark) { + #{$name}: #{$val}; } } } diff --git a/sass/base.scss b/sass/base.scss index ab8054a6b..9a9a3d68f 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -1,10 +1,10 @@ @use "vars"; @use "scrollbar"; -$body-color: var(--text-fg); -$body-bg: var(--window-bg); +$body-color: var(--fg-default); +$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); } diff --git a/sass/bootstrap-dark.scss b/sass/bootstrap-dark.scss index 17de09341..252987f96 100644 --- a/sass/bootstrap-dark.scss +++ b/sass/bootstrap-dark.scss @@ -7,11 +7,11 @@ @mixin night-mode { input, select { - background-color: var(--frame-bg); - border-color: var(--border); + background-color: var(--canvas-outset); + border-color: var(--border-default); &:focus { - background-color: var(--window-bg); + background-color: var(--canvas-default); } } } diff --git a/sass/buttons.scss b/sass/buttons.scss index 413bdc7e4..70a28e363 100644 --- a/sass/buttons.scss +++ b/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( diff --git a/sass/card-counts.scss b/sass/card-counts.scss index 2ddc5c947..8539313f9 100644 --- a/sass/card-counts.scss +++ b/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; diff --git a/sass/core.scss b/sass/core.scss index 0fa86894c..c2cec3f0d 100644 --- a/sass/core.scss +++ b/sass/core.scss @@ -8,14 +8,14 @@ } body { - color: var(--text-fg); - background: var(--window-bg); + color: var(--fg-default); + 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; } diff --git a/sass/night-mode.scss b/sass/night-mode.scss index 3a7eff2dd..7d1ab53f8 100644 --- a/sass/night-mode.scss +++ b/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); - border-color: var(--border); + background-color: var(--canvas-outset); + border-color: var(--border-default); &:focus { - background-color: var(--window-bg); + background-color: var(--canvas-default); } } diff --git a/sass/scrollbar.scss b/sass/scrollbar.scss index e448be308..825638465 100644 --- a/sass/scrollbar.scss +++ b/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); } } diff --git a/ts/card-info/Revlog.svelte b/ts/card-info/Revlog.svelte index 88f2842cf..c71298de2 100644 --- a/ts/card-info/Revlog.svelte +++ b/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) { diff --git a/ts/change-notetype/StickyHeader.svelte b/ts/change-notetype/StickyHeader.svelte index 480fc76c5..c84a3a72f 100644 --- a/ts/change-notetype/StickyHeader.svelte +++ b/ts/change-notetype/StickyHeader.svelte @@ -28,7 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

diff --git a/ts/components/ButtonDropdown.svelte b/ts/components/ButtonDropdown.svelte index 22c77cfc4..3288bf862 100644 --- a/ts/components/ButtonDropdown.svelte +++ b/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); - border-color: var(--border); + background-color: var(--canvas-default); + border-color: var(--border-default); :global(.btn-group) { position: static; diff --git a/ts/components/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte index 559f890a1..e0764bfd4 100644 --- a/ts/components/DropdownMenu.svelte +++ b/ts/components/DropdownMenu.svelte @@ -32,8 +32,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html diff --git a/ts/components/Popover.svelte b/ts/components/Popover.svelte index aa015eb52..84683b7ae 100644 --- a/ts/components/Popover.svelte +++ b/ts/components/Popover.svelte @@ -15,13 +15,13 @@ Alternative to DropdownMenu that avoids Bootstrap diff --git a/ts/components/StickyContainer.svelte b/ts/components/StickyContainer.svelte index bb4602c35..08c8fb95d 100644 --- a/ts/components/StickyContainer.svelte +++ b/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); } diff --git a/ts/components/Switch.svelte b/ts/components/Switch.svelte index 7db1e6a63..4c8a76ff3 100644 --- a/ts/components/Switch.svelte +++ b/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); - border-color: var(--border); + background-color: var(--canvas-outset); + border-color: var(--border-default); } diff --git a/ts/components/WithFloating.svelte b/ts/components/WithFloating.svelte index 63a88688d..919cc3543 100644 --- a/ts/components/WithFloating.svelte +++ b/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; diff --git a/ts/congrats/CongratsPage.svelte b/ts/congrats/CongratsPage.svelte index 55db748c3..159308ab0 100644 --- a/ts/congrats/CongratsPage.svelte +++ b/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; } diff --git a/ts/deck-options/CardStateCustomizer.svelte b/ts/deck-options/CardStateCustomizer.svelte index 08505b481..920ba33cf 100644 --- a/ts/deck-options/CardStateCustomizer.svelte +++ b/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); - background-color: var(--frame-bg); + color: var(--fg-default); + background-color: var(--canvas-outset); width: 100%; height: 10em; diff --git a/ts/deck-options/Switch.svelte b/ts/deck-options/Switch.svelte index 7db1e6a63..4c8a76ff3 100644 --- a/ts/deck-options/Switch.svelte +++ b/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); - border-color: var(--border); + background-color: var(--canvas-outset); + border-color: var(--border-default); } diff --git a/ts/deck-options/TabbedValue.svelte b/ts/deck-options/TabbedValue.svelte index 77293c687..6704f4219 100644 --- a/ts/deck-options/TabbedValue.svelte +++ b/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); - color: var(--text-fg); + border-color: var(--border-default) var(--border-default) var(--canvas-default); + color: var(--fg-default); } span:hover { - color: var(--text-fg); + color: var(--fg-default); } diff --git a/ts/deck-options/TextInputModal.svelte b/ts/deck-options/TextInputModal.svelte index 0937f4f86..0a267e264 100644 --- a/ts/deck-options/TextInputModal.svelte +++ b/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); - color: var(--text-fg); + background-color: var(--canvas-default); + color: var(--fg-default); } .invert { diff --git a/ts/deck-options/TitledContainer.svelte b/ts/deck-options/TitledContainer.svelte index d4e75ee56..0bfd2fae0 100644 --- a/ts/deck-options/TitledContainer.svelte +++ b/ts/deck-options/TitledContainer.svelte @@ -16,6 +16,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html diff --git a/ts/editor/EditingArea.svelte b/ts/editor/EditingArea.svelte index da5dfd0f9..80d3f18fb 100644 --- a/ts/editor/EditingArea.svelte +++ b/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); } } } diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte index bd3f1983d..1c2e4add5 100644 --- a/ts/editor/EditorField.svelte +++ b/ts/editor/EditorField.svelte @@ -109,6 +109,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte index 8a498cb37..b758b0444 100644 --- a/ts/editor/NoteEditor.svelte +++ b/ts/editor/NoteEditor.svelte @@ -314,7 +314,7 @@ the AddCards dialog) should be implemented in the user of this component. {#if hint} - {@html alertIcon} {@html hint} @@ -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(--window-bg)"} + ? "var(--flag-1)" + : "var(--canvas-default)"} > .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; } diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss index f92cb621a..92a823e37 100644 --- a/ts/editor/legacy.scss +++ b/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; diff --git a/ts/editor/mathjax-overlay/MathjaxEditor.svelte b/ts/editor/mathjax-overlay/MathjaxEditor.svelte index a341c38ca..7fe723fb7 100644 --- a/ts/editor/mathjax-overlay/MathjaxEditor.svelte +++ b/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); } } diff --git a/ts/editor/mathjax-overlay/MathjaxMenu.svelte b/ts/editor/mathjax-overlay/MathjaxMenu.svelte index 2971c45d6..5538d0bda 100644 --- a/ts/editor/mathjax-overlay/MathjaxMenu.svelte +++ b/ts/editor/mathjax-overlay/MathjaxMenu.svelte @@ -74,18 +74,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html diff --git a/ts/editor/plain-text-input/PlainTextInput.svelte b/ts/editor/plain-text-input/PlainTextInput.svelte index 67d4f8049..868ecdfbd 100644 --- a/ts/editor/plain-text-input/PlainTextInput.svelte +++ b/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); - background: var(--code-bg); + border-top: 1px solid var(--border-default); + background: var(--canvas-inset); } :global(.CodeMirror-lines) { padding: 8px 0; diff --git a/ts/graphs/CardCounts.svelte b/ts/graphs/CardCounts.svelte index bc261ca39..c8db491e3 100644 --- a/ts/graphs/CardCounts.svelte +++ b/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; } diff --git a/ts/graphs/NoDataOverlay.svelte b/ts/graphs/NoDataOverlay.svelte index a4dbf029f..cc92a4122 100644 --- a/ts/graphs/NoDataOverlay.svelte +++ b/ts/graphs/NoDataOverlay.svelte @@ -19,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html diff --git a/ts/reviewer/index.ts b/ts/reviewer/index.ts index e857df809..ad0b9a560 100644 --- a/ts/reviewer/index.ts +++ b/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 { diff --git a/ts/reviewer/reviewer.scss b/ts/reviewer/reviewer.scss index 2de00f6a6..fbf3b2641 100644 --- a/ts/reviewer/reviewer.scss +++ b/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); - color: var(--text-fg); + background-color: var(--canvas-default); + color: var(--fg-default); } img { diff --git a/ts/tag-editor/Tag.svelte b/ts/tag-editor/Tag.svelte index 2e08fe25a..a551a4969 100644 --- a/ts/tag-editor/Tag.svelte +++ b/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); - --border-color: var(--focus-border); + box-shadow: 0 0 0 2px var(--border-focus); + --border-color: var(--border-focus); } } diff --git a/ts/tag-editor/TagInput.svelte b/ts/tag-editor/TagInput.svelte index e388e2bf6..1d2804cb6 100644 --- a/ts/tag-editor/TagInput.svelte +++ b/ts/tag-editor/TagInput.svelte @@ -265,7 +265,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html