From fb197aa32ec840aa6ff7f2e7c455489bb001a539 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Tue, 16 Aug 2022 14:16:22 +0200
Subject: [PATCH 01/45] Remove --medium-border variable
---
qt/aqt/browser/sidebar/tree.py | 2 +-
qt/aqt/data/web/css/deckbrowser.scss | 2 +-
sass/_button-mixins.scss | 2 +-
ts/components/ButtonDropdown.svelte | 2 +-
ts/components/DropdownMenu.svelte | 2 +-
ts/components/StickyContainer.svelte | 2 +-
ts/deck-options/TitledContainer.svelte | 2 +-
ts/editor/Notification.svelte | 2 +-
ts/editor/legacy.scss | 2 +-
ts/import-csv/Preview.svelte | 2 +-
ts/tag-editor/Tag.svelte | 2 +-
11 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/qt/aqt/browser/sidebar/tree.py b/qt/aqt/browser/sidebar/tree.py
index d173d65e0..972e1555e 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.MEDIUM_BORDER)
+ border = theme_manager.color(colors.BORDER)
styles = [
"padding: 3px",
"padding-right: 0px",
diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss
index 4e32bcc46..72c94a145 100644
--- a/qt/aqt/data/web/css/deckbrowser.scss
+++ b/qt/aqt/data/web/css/deckbrowser.scss
@@ -79,7 +79,7 @@ body {
}
.callout {
- background: var(--medium-border);
+ background: var(--border);
padding: 1em;
margin: 1em;
diff --git a/sass/_button-mixins.scss b/sass/_button-mixins.scss
index aa7f74961..cb772eff4 100644
--- a/sass/_button-mixins.scss
+++ b/sass/_button-mixins.scss
@@ -23,7 +23,7 @@ $btn-base-color-day: white;
@mixin btn-day-base {
color: var(--text-fg);
background-color: $btn-base-color-day;
- border-color: var(--medium-border) !important;
+ border-color: var(--border) !important;
}
@mixin btn-day(
diff --git a/ts/components/ButtonDropdown.svelte b/ts/components/ButtonDropdown.svelte
index 0a3ebe0c0..22c77cfc4 100644
--- a/ts/components/ButtonDropdown.svelte
+++ b/ts/components/ButtonDropdown.svelte
@@ -32,7 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
padding: calc(var(--buttons-size) / 10) 0;
background-color: var(--window-bg);
- border-color: var(--medium-border);
+ border-color: var(--border);
:global(.btn-group) {
position: static;
diff --git a/ts/components/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte
index 4720a4fe4..559f890a1 100644
--- a/ts/components/DropdownMenu.svelte
+++ b/ts/components/DropdownMenu.svelte
@@ -33,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
.dropdown-menu {
border-radius: 5px;
background-color: var(--frame-bg);
- border-color: var(--medium-border);
+ border-color: var(--border);
min-width: 1rem;
}
diff --git a/ts/components/StickyContainer.svelte b/ts/components/StickyContainer.svelte
index f64507d41..bb4602c35 100644
--- a/ts/components/StickyContainer.svelte
+++ b/ts/components/StickyContainer.svelte
@@ -31,7 +31,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
background: var(--sticky-bg, var(--window-bg));
border-style: solid;
- border-color: var(--sticky-border, var(--medium-border));
+ border-color: var(--sticky-border, var(--border));
border-width: var(--sticky-borders, 0);
}
diff --git a/ts/deck-options/TitledContainer.svelte b/ts/deck-options/TitledContainer.svelte
index 7fb1e4ed0..d4e75ee56 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/Notification.svelte b/ts/editor/Notification.svelte
index 297232856..d92874576 100644
--- a/ts/editor/Notification.svelte
+++ b/ts/editor/Notification.svelte
@@ -15,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
background-color: var(--notification-bg, var(--window-bg));
user-select: none;
- border: 1px solid var(--medium-border);
+ border: 1px solid var(--border);
border-radius: 5px;
padding: 0.9rem 1.2rem;
}
diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss
index 1bf6d591b..f92cb621a 100644
--- a/ts/editor/legacy.scss
+++ b/ts/editor/legacy.scss
@@ -15,7 +15,7 @@ $padding: 2px;
color: var(--text-fg);
font-size: calc($size * 0.6);
background-color: $btn-base-color-day;
- border: 1px solid var(--medium-border);
+ border: 1px solid var(--border);
@include button.btn-border-radius;
margin-left: -1px;
diff --git a/ts/import-csv/Preview.svelte b/ts/import-csv/Preview.svelte
index 5b476dd2d..a70587830 100644
--- a/ts/import-csv/Preview.svelte
+++ b/ts/import-csv/Preview.svelte
@@ -48,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
th {
- background: var(--medium-border);
+ background: var(--border);
text-align: center;
}
diff --git a/ts/tag-editor/Tag.svelte b/ts/tag-editor/Tag.svelte
index acf66d446..2e08fe25a 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(--medium-border);
+ --border-color: var(--border);
border: 1px solid var(--border-color) !important;
border-radius: 5px;
From 6c48dbcc7fa6c43fd8f3a0e485119b3e58cbf8b1 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Tue, 16 Aug 2022 14:54:12 +0200
Subject: [PATCH 02/45] Implement color palette using Sass maps
I hand-picked the gray tones, the other colors are from the Tailwind CSS v3 palette.
Significant changes:
- light theme is brighter
- dark theme is darker
- borders are softer
I also deleted some platform- and night-mode-specific code.
---
qt/BUILD.bazel | 4 +-
qt/aqt/BUILD.bazel | 9 +-
qt/aqt/editor.py | 2 +-
qt/aqt/theme.py | 3 +
qt/aqt/webview.py | 51 +-------
qt/tools/extract_sass_colors.py | 45 -------
qt/tools/extract_sass_vars.py | 89 ++++++++++++++
sass/BUILD.bazel | 2 +-
sass/_colors.scss | 203 ++++++++++++++++++++++++++++++++
sass/_vars.scss | 179 ++++++++++++++++------------
10 files changed, 414 insertions(+), 173 deletions(-)
delete mode 100644 qt/tools/extract_sass_colors.py
create mode 100644 qt/tools/extract_sass_vars.py
create mode 100644 sass/_colors.scss
diff --git a/qt/BUILD.bazel b/qt/BUILD.bazel
index be49bc6a6..3c1db25f5 100644
--- a/qt/BUILD.bazel
+++ b/qt/BUILD.bazel
@@ -16,9 +16,9 @@ py_binary(
)
py_binary(
- name = "extract_sass_colors",
+ name = "extract_sass_vars",
srcs = [
- "tools/extract_sass_colors.py",
+ "tools/extract_sass_vars.py",
],
imports = ["."],
visibility = [":__subpackages__"],
diff --git a/qt/aqt/BUILD.bazel b/qt/aqt/BUILD.bazel
index 9248b51af..65fba5a32 100644
--- a/qt/aqt/BUILD.bazel
+++ b/qt/aqt/BUILD.bazel
@@ -11,14 +11,15 @@ genrule(
)
genrule(
- name = "extract_sass_colors",
+ name = "extract_sass_vars",
srcs = [
+ "//sass:_colors.scss",
"//sass:_vars.scss",
],
- outs = ["colors.py"],
- cmd = "$(location //qt:extract_sass_colors) $< $@",
+ outs = ["colors.py", "props.py"],
+ cmd = "$(location //qt:extract_sass_vars) $(SRCS) $(OUTS)",
tools = [
- "//qt:extract_sass_colors",
+ "//qt:extract_sass_vars",
],
)
diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index c1049a9ad..d70acb870 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -162,7 +162,7 @@ class Editor:
context=self,
default_css=False,
)
- self.web._fix_editor_background_color_and_show()
+ self.web.show()
lefttopbtns: list[str] = []
gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
diff --git a/qt/aqt/theme.py b/qt/aqt/theme.py
index 6a943e042..f10eea944 100644
--- a/qt/aqt/theme.py
+++ b/qt/aqt/theme.py
@@ -251,6 +251,9 @@ 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)
+ )
app.setPalette(self.default_palette)
return
diff --git a/qt/aqt/webview.py b/qt/aqt/webview.py
index f68b58926..11d2eaf66 100644
--- a/qt/aqt/webview.py
+++ b/qt/aqt/webview.py
@@ -233,9 +233,7 @@ class AnkiWebView(QWebEngineView):
self.set_title(title)
self._page = AnkiWebPage(self._onBridgeCmd)
# reduce flicker
- self._page.setBackgroundColor(
- self.get_window_bg_color(theme_manager.night_mode)
- )
+ self._page.setBackgroundColor(QColor(theme_manager.color(colors.WINDOW_BG)))
# in new code, use .set_bridge_command() instead of setting this directly
self.onBridgeCmd: Callable[[str], Any] = self.defaultOnBridgeCmd
@@ -404,15 +402,6 @@ class AnkiWebView(QWebEngineView):
else:
return 3
- def get_window_bg_color(self, night_mode: bool) -> QColor:
- if night_mode:
- return QColor(colors.WINDOW_BG[1])
- elif is_mac:
- # standard palette does not return correct window color on macOS
- return QColor("#ececec")
- else:
- return theme_manager.default_palette.color(QPalette.ColorRole.Window)
-
def standard_css(self) -> str:
palette = theme_manager.default_palette
color_hl = palette.color(QPalette.ColorRole.Highlight).name()
@@ -459,15 +448,12 @@ div[contenteditable="true"]:focus {{
zoom = self.app_zoom_factor()
- window_bg_day = self.get_window_bg_color(False).name()
- window_bg_night = self.get_window_bg_color(True).name()
-
return f"""
body {{ zoom: {zoom}; background-color: var(--window-bg); }}
html {{ {font} }}
{button_style}
-:root {{ --window-bg: {window_bg_day} }}
-:root[class*=night-mode] {{ --window-bg: {window_bg_night} }}
+:root {{ --window-bg: {colors.WINDOW_BG[0]} }}
+:root[class*=night-mode] {{ --window-bg: {colors.WINDOW_BG[1]} }}
"""
def stdHtml(
@@ -712,7 +698,9 @@ html {{ {font} }}
def on_theme_did_change(self) -> None:
# avoid flashes if page reloaded
self._page.setBackgroundColor(
- self.get_window_bg_color(theme_manager.night_mode)
+ QColor(colors.WINDOW_BG[1])
+ if theme_manager.night_mode
+ else QColor(colors.WINDOW_BG[0])
)
# update night-mode class, and legacy nightMode/night-mode body classes
self.eval(
@@ -732,30 +720,3 @@ html {{ {font} }}
}})();
"""
)
-
- def _fix_editor_background_color_and_show(self) -> None:
- # The editor does not use our standard CSS, which takes care of matching the background
- # colour of the webview to the window we're showing it in. This causes a difference in
- # shades on Windows/Linux in day mode, that we need to work around. This is a temporary
- # fix before the 2.1.50 release; with more time there may be a better way to do this.
-
- if theme_manager.night_mode:
- # The styling changes are not required for night mode, and hiding+showing the
- # webview causes a flash of black.
- return
-
- self.hide()
-
- window_bg_day = self.get_window_bg_color(False).name()
- css = f":root {{ --window-bg: {window_bg_day} }}"
- self.evalWithCallback(
- f"""
-(function(){{
- const style = document.createElement('style');
- style.innerHTML = `{css}`;
- document.head.appendChild(style);
-}})();
-""",
- # avoids FOUC
- lambda _: self.show(),
- )
diff --git a/qt/tools/extract_sass_colors.py b/qt/tools/extract_sass_colors.py
deleted file mode 100644
index 219fd6a26..000000000
--- a/qt/tools/extract_sass_colors.py
+++ /dev/null
@@ -1,45 +0,0 @@
-#!/usr/bin/env python3
-# Copyright: Ankitects Pty Ltd and contributors
-# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-import json
-import re
-import sys
-
-input_scss = sys.argv[1]
-output_py = sys.argv[2]
-
-colors = {}
-
-for line in open(input_scss):
- line = line.strip()
- if not line:
- continue
- m = re.match(r"--(.+): (.+);$", line)
- if not m:
- if (
- line != "}"
- and not ":root" in line
- and "Copyright" not in line
- and "License" not in line
- and "color-scheme" not in line
- ):
- print("failed to match", line)
- continue
-
- var = m.group(1)
- val = m.group(2)
-
- colors.setdefault(var, []).append(val)
-
-with open(output_py, "w") as buf:
- buf.write(
- """\
-# Copyright: Ankitects Pty Ltd and contributors
-# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-"""
- )
- buf.write("# this file is auto-generated from _vars.scss\n")
- for color, (day, night) in colors.items():
- color = color.replace("-", "_").upper()
- buf.write(f'{color} = ("{day}", "{night}")\n')
diff --git a/qt/tools/extract_sass_vars.py b/qt/tools/extract_sass_vars.py
new file mode 100644
index 000000000..d1dc72a41
--- /dev/null
+++ b/qt/tools/extract_sass_vars.py
@@ -0,0 +1,89 @@
+#!/usr/bin/env python3
+# Copyright: Ankitects Pty Ltd and contributors
+# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import json
+import re
+import sys
+
+# bazel genrule "srcs"
+colors_scss = sys.argv[1]
+vars_scss = sys.argv[2]
+
+# bazel genrule "outs"
+colors_py = sys.argv[3]
+props_py = sys.argv[4]
+
+palette = {}
+colors = {}
+props = {}
+
+color = ""
+
+
+for line in open(colors_scss):
+ line = line.strip()
+ if not line:
+ continue
+
+ if m := re.match(r"^([a-z]+): \($", line):
+ color = m.group(1)
+ palette[color] = {}
+
+ elif m := re.match(r"(\d): (.+),$", line):
+ palette[color][m.group(1)] = m.group(2)
+
+
+# TODO: recursive extraction of arbitrarily nested Sass maps?
+reached_colors = False
+
+for line in open(vars_scss):
+ line = line.strip()
+ if not line:
+ continue
+
+ if line == "themes: (":
+ reached_colors = True
+ continue
+
+ if reached_colors:
+ line = re.sub(
+ r"get\(\$color, (.+), (\d)\)",
+ lambda m: palette[m.group(1)][m.group(2)],
+ line,
+ )
+
+ if m := re.match(r"^(.+): ([^\(]+),$", line):
+ var = m.group(1)
+ val = m.group(2)
+
+ if reached_colors:
+ colors.setdefault(var, []).append(val)
+ else:
+ props.setdefault(var, []).append(val)
+
+
+copyright_notice = """\
+# Copyright: Ankitects Pty Ltd and contributors
+# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+"""
+
+with open(colors_py, "w") as buf:
+ buf.write(copyright_notice)
+ buf.write("# this file is auto-generated from _vars.scss and _colors.scss\n")
+
+ for color, (day, night) in colors.items():
+ color = color.replace("-", "_").upper()
+ buf.write(f'{color} = ("{day}", "{night}")\n')
+
+
+with open(props_py, "w") as buf:
+ buf.write(copyright_notice)
+ buf.write("# this file is auto-generated from _vars.scss\n")
+
+ for prop, val in props.items():
+ day = val[0]
+ night = val[1] if len(val) > 1 else day
+
+ prop = prop.replace("-", "_").upper()
+ buf.write(f'{prop} = ("{day}", "{night}")\n')
diff --git a/sass/BUILD.bazel b/sass/BUILD.bazel
index 2e5ac043c..19885ed97 100644
--- a/sass/BUILD.bazel
+++ b/sass/BUILD.bazel
@@ -84,6 +84,6 @@ sass_library(
)
exports_files(
- ["_vars.scss"],
+ ["_colors.scss", "_vars.scss"],
visibility = ["//visibility:public"],
)
diff --git a/sass/_colors.scss b/sass/_colors.scss
new file mode 100644
index 000000000..001b7b19b
--- /dev/null
+++ b/sass/_colors.scss
@@ -0,0 +1,203 @@
+/* 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
+ *
+ * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+$color: (
+ gray: (
+ 0: #fcfdfe,
+ 1: #f2f5f8,
+ 2: #dde1e7,
+ 3: #aeb5be,
+ 4: #7a818a,
+ 5: #4a5058,
+ 6: #2d3138,
+ 7: #181b1f,
+ 8: #101215,
+ 9: #0b0c0e,
+ ),
+ red: (
+ 0: #fef2f2,
+ 1: #fee2e2,
+ 2: #fecaca,
+ 3: #fca5a5,
+ 4: #f87171,
+ 5: #ef4444,
+ 6: #dc2626,
+ 7: #b91c1c,
+ 8: #991b1b,
+ 9: #7f1d1d,
+ ),
+ orange: (
+ 0: #fff7ed,
+ 1: #ffedd5,
+ 2: #fed7aa,
+ 3: #fdba74,
+ 4: #fb923c,
+ 5: #f97316,
+ 6: #ea580c,
+ 7: #c2410c,
+ 8: #9a3412,
+ 9: #7c2d12,
+ ),
+ amber: (
+ 0: #fffbeb,
+ 1: #fef3c7,
+ 2: #fde68a,
+ 3: #fcd34d,
+ 4: #fbbf24,
+ 5: #f59e0b,
+ 6: #d97706,
+ 7: #b45309,
+ 8: #92400e,
+ 9: #78350f,
+ ),
+ yellow: (
+ 0: #fefce8,
+ 1: #fef9c3,
+ 2: #fef08a,
+ 3: #fde047,
+ 4: #facc15,
+ 5: #eab308,
+ 6: #ca8a04,
+ 7: #a16207,
+ 8: #854d0e,
+ 9: #713f12,
+ ),
+ lime: (
+ 0: #f7fee7,
+ 1: #ecfccb,
+ 2: #d9f99d,
+ 3: #bef264,
+ 4: #a3e635,
+ 5: #84cc16,
+ 6: #65a30d,
+ 7: #4d7c0f,
+ 8: #3f6212,
+ 9: #365314,
+ ),
+ green: (
+ 0: #f0fdf4,
+ 1: #dcfce7,
+ 2: #bbf7d0,
+ 3: #86efac,
+ 4: #4ade80,
+ 5: #22c55e,
+ 6: #16a34a,
+ 7: #15803d,
+ 8: #166534,
+ 9: #14532d,
+ ),
+ teal: (
+ 0: #f0fdfa,
+ 1: #ccfbf1,
+ 2: #99f6e4,
+ 3: #5eead4,
+ 4: #2dd4bf,
+ 5: #14b8a6,
+ 6: #0d9488,
+ 7: #0f766e,
+ 8: #115e59,
+ 9: #134e4a,
+ ),
+ cyan: (
+ 0: #ecfeff,
+ 1: #cffafe,
+ 2: #a5f3fc,
+ 3: #67e8f9,
+ 4: #22d3ee,
+ 5: #06b6d4,
+ 6: #0891b2,
+ 7: #0e7490,
+ 8: #155e75,
+ 9: #164e63,
+ ),
+ sky: (
+ 0: #f0f9ff,
+ 1: #e0f2fe,
+ 2: #bae6fd,
+ 3: #7dd3fc,
+ 4: #38bdf8,
+ 5: #0ea5e9,
+ 6: #0284c7,
+ 7: #0369a1,
+ 8: #075985,
+ 9: #0c4a6e,
+ ),
+ blue: (
+ 0: #eff6ff,
+ 1: #dbeafe,
+ 2: #bfdbfe,
+ 3: #93c5fd,
+ 4: #60a5fa,
+ 5: #3b82f6,
+ 6: #2563eb,
+ 7: #1d4ed8,
+ 8: #1e40af,
+ 9: #1e3a8a,
+ ),
+ indigo: (
+ 0: #eef2ff,
+ 1: #e0e7ff,
+ 2: #c7d2fe,
+ 3: #a5b4fc,
+ 4: #818cf8,
+ 5: #6366f1,
+ 6: #4f46e5,
+ 7: #4338ca,
+ 8: #3730a3,
+ 9: #312e81,
+ ),
+ violet: (
+ 0: #f5f3ff,
+ 1: #ede9fe,
+ 2: #ddd6fe,
+ 3: #c4b5fd,
+ 4: #a78bfa,
+ 5: #8b5cf6,
+ 6: #7c3aed,
+ 7: #6d28d9,
+ 8: #5b21b6,
+ 9: #4c1d95,
+ ),
+ purple: (
+ 0: #faf5ff,
+ 1: #f3e8ff,
+ 2: #e9d5ff,
+ 3: #d8b4fe,
+ 4: #c084fc,
+ 5: #a855f7,
+ 6: #9333ea,
+ 7: #7e22ce,
+ 8: #6b21a8,
+ 9: #581c87,
+ ),
+ fuchsia: (
+ 0: #fdf4ff,
+ 1: #fae8ff,
+ 2: #f5d0fe,
+ 3: #f0abfc,
+ 4: #e879f9,
+ 5: #d946ef,
+ 6: #c026d3,
+ 7: #a21caf,
+ 8: #86198f,
+ 9: #701a75,
+ ),
+ pink: (
+ 0: #fdf2f8,
+ 1: #fce7f3,
+ 2: #fbcfe8,
+ 3: #f9a8d4,
+ 4: #f472b6,
+ 5: #ec4899,
+ 6: #db2777,
+ 7: #be185d,
+ 8: #9d174d,
+ 9: #831843,
+ ),
+);
diff --git a/sass/_vars.scss b/sass/_vars.scss
index 2e584d1da..481298fa8 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -1,81 +1,110 @@
/* Copyright: Ankitects Pty Ltd and contributors
- * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+ * License: GNU AGPL, version 3 or later, http://www.gnu.org/licenses/agpl.html */
+
+@use "colors" as *;
+
+@function get($map, $keys...) {
+ @each $key in $keys {
+ $map: map-get($map, $key);
+ }
+ @return $map;
+}
+
+$vars: (
+ props: (
+ border-radius-default: 5px,
+ ),
+ themes: (
+ light: (
+ text-fg: get($color, gray, 9),
+ window-bg: get($color, gray, 1),
+ frame-bg: white,
+ border: get($color, gray, 4),
+ faint-border: get($color, gray, 2),
+ link: get($color, blue, 9),
+ review-count: #0a0,
+ new-count: get($color, blue, 9),
+ learn-count: get($color, orange, 7),
+ zero-count: get($color, gray, 2),
+ slightly-grey-text: get($color, gray, 8),
+ highlight-bg: get($color, cyan, 2),
+ highlight-fg: black,
+ disabled: get($color, gray, 5),
+ flag1-fg: get($color, red, 6),
+ flag2-fg: get($color, orange, 5),
+ flag3-fg: get($color, green, 5),
+ flag4-fg: get($color, blue, 5),
+ flag5-fg: get($color, fuchsia, 4),
+ flag6-fg: get($color, teal, 5),
+ flag7-fg: get($color, purple, 6),
+ flag1-bg: get($color, red, 5),
+ flag2-bg: get($color, orange, 3),
+ flag3-bg: get($color, green, 3),
+ flag4-bg: get($color, blue, 3),
+ flag5-bg: get($color, fuchsia, 2),
+ flag6-bg: get($color, teal, 4),
+ flag7-bg: get($color, purple, 4),
+ buried-fg: get($color, amber, 5),
+ suspended-fg: get($color, yellow, 4),
+ suspended-bg: get($color, yellow, 1),
+ marked-bg: get($color, indigo, 2),
+ tooltip-bg: get($color, gray, 0),
+ focus-border: get($color, indigo, 6),
+ ),
+ dark: (
+ text-fg: get($color, gray, 0),
+ window-bg: get($color, gray, 7),
+ frame-bg: get($color, gray, 6),
+ border: get($color, gray, 9),
+ faint-border: get($color, gray, 8),
+ link: get($color, blue, 2),
+ review-count: get($color, green, 4),
+ new-count: get($color, blue, 2),
+ learn-count: get($color, red, 4),
+ zero-count: get($color, gray, 7),
+ slightly-grey-text: get($color, gray, 4),
+ highlight-bg: get($color, cyan, 2),
+ highlight-fg: white,
+ disabled: get($color, gray, 6),
+ flag1-fg: get($color, red, 4),
+ flag2-fg: get($color, orange, 4),
+ flag3-fg: get($color, green, 4),
+ flag4-fg: get($color, blue, 4),
+ flag5-fg: get($color, fuchsia, 3),
+ flag6-fg: get($color, teal, 4),
+ flag7-fg: get($color, purple, 5),
+ flag1-bg: get($color, red, 6),
+ flag2-bg: get($color, orange, 5),
+ flag3-bg: get($color, green, 5),
+ flag4-bg: get($color, blue, 5),
+ flag5-bg: get($color, fuchsia, 5),
+ flag6-bg: get($color, teal, 5),
+ flag7-bg: get($color, purple, 7),
+ buried-fg: get($color, amber, 8),
+ suspended-fg: get($color, yellow, 1),
+ suspended-bg: get($color, yellow, 5),
+ marked-bg: get($color, purple, 5),
+ tooltip-bg: get($color, gray, 8),
+ focus-border: get($color, indigo, 5),
+ ),
+ ),
+);
:root {
- --text-fg: black;
- --window-bg: #ececec;
- --frame-bg: white;
- --border: #aaa;
- --medium-border: #b6b6b6;
- --faint-border: #e7e7e7;
- --link: #00a;
- --review-count: #0a0;
- --new-count: #00a;
- --learn-count: #c35617;
- --zero-count: #ddd;
- --slightly-grey-text: #333;
- --highlight-bg: #77ccff;
- --highlight-fg: black;
- --disabled: #777;
- --flag1-fg: #e25252;
- --flag2-fg: #ffb347;
- --flag3-fg: #54c414;
- --flag4-fg: #578cff;
- --flag5-fg: #ff82ee;
- --flag6-fg: #00d1b5;
- --flag7-fg: #9649dd;
- --flag1-bg: #ff9b9b;
- --flag2-bg: #ffb347;
- --flag3-bg: #93e066;
- --flag4-bg: #9dbcff;
- --flag5-bg: #f5a8eb;
- --flag6-bg: #7edbd7;
- --flag7-bg: #cca3f1;
- --buried-fg: #aaaa33;
- --suspended-fg: #dd0;
- --suspended-bg: #ffffb2;
- --marked-bg: #cce;
- --tooltip-bg: #fcfcfc;
- --focus-border: #0969da;
- --focus-shadow: rgba(9 105 218 / 0.3);
+ @each $name, $value in get($vars, themes, light) {
+ --#{$name}: #{$value};
+ }
+ &.night-mode {
+ @each $name, $value in get($vars, themes, dark) {
+ --#{$name}: #{$value};
+ }
+ color-scheme: dark;
+ }
}
-:root[class*="night-mode"] {
- --text-fg: white;
- --window-bg: #2f2f31;
- --frame-bg: #3a3a3a;
- --border: #777;
- --medium-border: #444;
- --faint-border: #29292b;
- --link: #77ccff;
- --review-count: #5ccc00;
- --new-count: #77ccff;
- --learn-count: #ff935b;
- --zero-count: #444;
- --slightly-grey-text: #ccc;
- --highlight-bg: #77ccff;
- --highlight-fg: white;
- --disabled: #777;
- --flag1-fg: #ff7b7b;
- --flag2-fg: #f5aa41;
- --flag3-fg: #86ce5d;
- --flag4-fg: #6f9dff;
- --flag5-fg: #f097e4;
- --flag6-fg: #5ccfca;
- --flag7-fg: #9f63d3;
- --flag1-bg: #aa5555;
- --flag2-bg: #ac653a;
- --flag3-bg: #559238;
- --flag4-bg: #506aa3;
- --flag5-bg: #975d8f;
- --flag6-bg: #399185;
- --flag7-bg: #624b77;
- --buried-fg: #777733;
- --suspended-fg: #ffffb2;
- --suspended-bg: #aaaa33;
- --marked-bg: #77c;
- --tooltip-bg: #272727;
- --focus-border: #316dca;
- --focus-shadow: #194380;
- color-scheme: dark;
+/* separate rule for cleaner dev tools appearance */
+:root {
+ @each $name, $value in get($vars, props) {
+ --#{$name}: #{$value};
+ }
}
From cb9b452666f27192b5f0bf3ca1e1c4955404d113 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Tue, 16 Aug 2022 14:54:48 +0200
Subject: [PATCH 03/45] Use custom colors for note view switch
---
qt/aqt/switch.py | 6 +++---
sass/_vars.scss | 4 ++++
2 files changed, 7 insertions(+), 3 deletions(-)
diff --git a/qt/aqt/switch.py b/qt/aqt/switch.py
index ca92fafbc..d2285115b 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.FLAG4_BG,
- right_color: tuple[str, str] = colors.FLAG3_BG,
+ left_color: tuple[str, str] = colors.CARD_VIEW_BG,
+ right_color: tuple[str, str] = colors.NOTE_VIEW_BG,
parent: QWidget = None,
) -> None:
super().__init__(parent=parent)
@@ -108,7 +108,7 @@ class Switch(QAbstractButton):
painter.drawEllipse(self._current_knob_rectangle())
def _paint_label(self, painter: QPainter) -> None:
- painter.setPen(theme_manager.qcolor(colors.SLIGHTLY_GREY_TEXT))
+ painter.setPen(theme_manager.qcolor(colors.TEXT_FG))
font = painter.font()
font.setPixelSize(int(1.2 * self._knob_radius))
painter.setFont(font)
diff --git a/sass/_vars.scss b/sass/_vars.scss
index 481298fa8..3b0933751 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -30,6 +30,8 @@ $vars: (
highlight-bg: get($color, cyan, 2),
highlight-fg: black,
disabled: get($color, gray, 5),
+ card-view-bg: get($color, blue, 5),
+ note-view-bg: get($color, green, 5),
flag1-fg: get($color, red, 6),
flag2-fg: get($color, orange, 5),
flag3-fg: get($color, green, 5),
@@ -66,6 +68,8 @@ $vars: (
highlight-bg: get($color, cyan, 2),
highlight-fg: white,
disabled: get($color, gray, 6),
+ card-view-bg: get($color, blue, 4),
+ note-view-bg: get($color, green, 4),
flag1-fg: get($color, red, 4),
flag2-fg: get($color, orange, 4),
flag3-fg: get($color, green, 4),
From 04781de828f841c1c0ac74bbd957e35e3ce9ffdc Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Tue, 16 Aug 2022 19:27:44 +0200
Subject: [PATCH 04/45] Use same placeholder color for all inputs
---
qt/aqt/theme.py | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/qt/aqt/theme.py b/qt/aqt/theme.py
index f10eea944..444af9aff 100644
--- a/qt/aqt/theme.py
+++ b/qt/aqt/theme.py
@@ -285,8 +285,11 @@ QTabWidget {{ background-color: {}; }}
palette.setColor(QPalette.ColorRole.Base, frame_bg)
palette.setColor(QPalette.ColorRole.ToolTipBase, frame_bg)
+ palette.setColor(
+ QPalette.ColorRole.PlaceholderText, self.qcolor(colors.SLIGHTLY_GREY_TEXT)
+ )
+
disabled_color = self.qcolor(colors.DISABLED)
- palette.setColor(QPalette.ColorRole.PlaceholderText, disabled_color)
palette.setColor(
QPalette.ColorGroup.Disabled, QPalette.ColorRole.Text, disabled_color
)
From eba1fc18b67ec441f706a6f56afcbe44d9591201 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Tue, 16 Aug 2022 22:32:24 +0200
Subject: [PATCH 05/45] Skew color palette for more dark values
by removing gray[3], which wasn't used anywhere. Slight adjustments were made to the darker tones.
---
sass/_colors.scss | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/sass/_colors.scss b/sass/_colors.scss
index 001b7b19b..664286c79 100644
--- a/sass/_colors.scss
+++ b/sass/_colors.scss
@@ -11,14 +11,14 @@ $color: (
gray: (
0: #fcfdfe,
1: #f2f5f8,
- 2: #dde1e7,
- 3: #aeb5be,
- 4: #7a818a,
- 5: #4a5058,
- 6: #2d3138,
- 7: #181b1f,
- 8: #101215,
- 9: #0b0c0e,
+ 2: #d7dbe1,
+ 3: #7e868f,
+ 4: #4a5058,
+ 5: #2d3138,
+ 6: #1d2126,
+ 7: #161a1d,
+ 8: #121518,
+ 9: #0c0e10,
),
red: (
0: #fef2f2,
From 08553e0009519524a6386a66330a1dcc3246acf0 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Tue, 16 Aug 2022 22:33:27 +0200
Subject: [PATCH 06/45] Adjust frame- window- and border colors
---
sass/_vars.scss | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/sass/_vars.scss b/sass/_vars.scss
index 3b0933751..86111211d 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -18,15 +18,15 @@ $vars: (
light: (
text-fg: get($color, gray, 9),
window-bg: get($color, gray, 1),
- frame-bg: white,
- border: get($color, gray, 4),
+ frame-bg: get($color, gray, 0),
+ border: get($color, gray, 3),
faint-border: get($color, gray, 2),
link: get($color, blue, 9),
review-count: #0a0,
new-count: get($color, blue, 9),
learn-count: get($color, orange, 7),
zero-count: get($color, gray, 2),
- slightly-grey-text: get($color, gray, 8),
+ slightly-grey-text: get($color, gray, 7),
highlight-bg: get($color, cyan, 2),
highlight-fg: black,
disabled: get($color, gray, 5),
@@ -55,9 +55,9 @@ $vars: (
),
dark: (
text-fg: get($color, gray, 0),
- window-bg: get($color, gray, 7),
- frame-bg: get($color, gray, 6),
- border: get($color, gray, 9),
+ window-bg: get($color, gray, 6),
+ frame-bg: get($color, gray, 7),
+ border: get($color, gray, 5),
faint-border: get($color, gray, 8),
link: get($color, blue, 2),
review-count: get($color, green, 4),
From dfe06c0643d44cbd9fedf044bec7e120697384f2 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Tue, 16 Aug 2022 22:34:20 +0200
Subject: [PATCH 07/45] Give deck browser entries --frame-bg as background
color
---
qt/aqt/data/web/css/deckbrowser.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss
index 72c94a145..5a8eae45b 100644
--- a/qt/aqt/data/web/css/deckbrowser.scss
+++ b/qt/aqt/data/web/css/deckbrowser.scss
@@ -36,7 +36,7 @@ body {
}
.current {
- background-color: var(--faint-border);
+ background-color: var(--frame-bg);
}
.decktd {
From bcf8992a9df57aed7341c2fa9ccef9cced8a4973 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Tue, 16 Aug 2022 22:35:34 +0200
Subject: [PATCH 08/45] Define styling for QComboBox and QLineEdit globally
---
qt/aqt/data/qt/icons/BUILD.bazel | 3 +++
qt/aqt/theme.py | 28 +++++++++++++++++++++++++++-
2 files changed, 30 insertions(+), 1 deletion(-)
diff --git a/qt/aqt/data/qt/icons/BUILD.bazel b/qt/aqt/data/qt/icons/BUILD.bazel
index bf5c44ba4..b3f131a17 100644
--- a/qt/aqt/data/qt/icons/BUILD.bazel
+++ b/qt/aqt/data/qt/icons/BUILD.bazel
@@ -33,6 +33,9 @@ copy_mdi_icons(
# tags
"tag-outline.svg",
"tag-off-outline.svg",
+
+ # QComboBox arrow
+ "chevron-down.svg",
],
)
diff --git a/qt/aqt/theme.py b/qt/aqt/theme.py
index 444af9aff..976124182 100644
--- a/qt/aqt/theme.py
+++ b/qt/aqt/theme.py
@@ -186,7 +186,33 @@ class ThemeManager:
gui_hooks.theme_did_change()
def _apply_style(self, app: QApplication) -> None:
- buf = ""
+ buf = f"""
+QComboBox,
+QLineEdit {{
+ border: 1px solid {self.color(colors.BORDER)};
+ border-radius: 5px;
+ padding: 2px;
+}}
+QComboBox:focus,
+QLineEdit:focus {{
+ border: 1px solid {self.color(colors.FOCUS_BORDER)};
+}}
+QComboBox:on {{
+ border-bottom: none;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+}}
+QComboBox::drop-down {{
+ border: 0px; /* This resets the arrow styles */
+ subcontrol-origin: padding;
+ padding: 4px;
+ subcontrol-position: top right;
+ width: 18px;
+}}
+QComboBox::down-arrow {{
+ image: url(icons:chevron-down.svg);
+}}
+ """
if is_win and platform.release() == "10":
# day mode is missing a bottom border; background must be
From d480e5ce5afaf6ac39627f1d3950f008a6303af7 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Tue, 16 Aug 2022 22:39:39 +0200
Subject: [PATCH 09/45] Experiment with CSS filter for inline-colors
Inside darker inputs, some colors like dark blue will be hard to read, so we could try to improve text-color contrast with global adjustments depending on the theme.
---
ts/editable/editable-base.scss | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/ts/editable/editable-base.scss b/ts/editable/editable-base.scss
index ac31a51ea..0e5a349fd 100644
--- a/ts/editable/editable-base.scss
+++ b/ts/editable/editable-base.scss
@@ -18,6 +18,15 @@ p {
display: none;
}
+/* Nudge users towards using brighter colors,
+ so they are more readable in dark themes */
+span[style*="color"] {
+ filter: brightness(0.8);
+}
+
:host(.night-mode) {
@include scrollbar.night-mode;
+ span[style*="color"] {
+ filter: brightness(1.2);
+ }
}
From 59d618851d3978cc8703655a995c053191cf67cf Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Wed, 17 Aug 2022 00:01:19 +0200
Subject: [PATCH 10/45] Use different map structure for _vars.scss
after @hgiesel's idea: https://github.com/ankitects/anki/pull/2016#discussion_r947087871
---
qt/tools/extract_sass_vars.py | 36 +++--
sass/_vars.scss | 254 +++++++++++++++++++++++-----------
2 files changed, 196 insertions(+), 94 deletions(-)
diff --git a/qt/tools/extract_sass_vars.py b/qt/tools/extract_sass_vars.py
index d1dc72a41..7d2fa1680 100644
--- a/qt/tools/extract_sass_vars.py
+++ b/qt/tools/extract_sass_vars.py
@@ -36,14 +36,27 @@ for line in open(colors_scss):
# TODO: recursive extraction of arbitrarily nested Sass maps?
reached_colors = False
+current_key = ""
for line in open(vars_scss):
line = line.strip()
- if not line:
+
+ if not line or line == "props: (":
+ continue
+ if line == ":root {":
+ break
+ if line == "colors: (":
+ reached_colors = True
continue
- if line == "themes: (":
- reached_colors = True
+ if m := re.match(r"^([^$]+): \(", line):
+ current_key = m.group(1)
+
+ if reached_colors:
+ colors[current_key] = {}
+ else:
+ props[current_key] = {}
+
continue
if reached_colors:
@@ -53,14 +66,14 @@ for line in open(vars_scss):
line,
)
- if m := re.match(r"^(.+): ([^\(]+),$", line):
- var = m.group(1)
+ if m := re.match(r"^(.+): (.+),$", line):
+ theme = m.group(1)
val = m.group(2)
if reached_colors:
- colors.setdefault(var, []).append(val)
+ colors[current_key][theme] = val
else:
- props.setdefault(var, []).append(val)
+ props[current_key][theme] = val
copyright_notice = """\
@@ -72,7 +85,10 @@ with open(colors_py, "w") as buf:
buf.write(copyright_notice)
buf.write("# this file is auto-generated from _vars.scss and _colors.scss\n")
- for color, (day, night) in colors.items():
+ for color, val in colors.items():
+ day = val["light"] if "light" in val else val["default"]
+ night = val["dark"] if len(val) > 1 else day
+
color = color.replace("-", "_").upper()
buf.write(f'{color} = ("{day}", "{night}")\n')
@@ -82,8 +98,8 @@ with open(props_py, "w") as buf:
buf.write("# this file is auto-generated from _vars.scss\n")
for prop, val in props.items():
- day = val[0]
- night = val[1] if len(val) > 1 else day
+ day = val["light"] if "light" in val else val["default"]
+ night = val["dark"] if "dark" in val else day
prop = prop.replace("-", "_").upper()
buf.write(f'{prop} = ("{day}", "{night}")\n')
diff --git a/sass/_vars.scss b/sass/_vars.scss
index 86111211d..0a580ec0a 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -12,103 +12,189 @@
$vars: (
props: (
- border-radius-default: 5px,
- ),
- themes: (
- light: (
- text-fg: get($color, gray, 9),
- window-bg: get($color, gray, 1),
- frame-bg: get($color, gray, 0),
- border: get($color, gray, 3),
- faint-border: get($color, gray, 2),
- link: get($color, blue, 9),
- review-count: #0a0,
- new-count: get($color, blue, 9),
- learn-count: get($color, orange, 7),
- zero-count: get($color, gray, 2),
- slightly-grey-text: get($color, gray, 7),
- highlight-bg: get($color, cyan, 2),
- highlight-fg: black,
- disabled: get($color, gray, 5),
- card-view-bg: get($color, blue, 5),
- note-view-bg: get($color, green, 5),
- flag1-fg: get($color, red, 6),
- flag2-fg: get($color, orange, 5),
- flag3-fg: get($color, green, 5),
- flag4-fg: get($color, blue, 5),
- flag5-fg: get($color, fuchsia, 4),
- flag6-fg: get($color, teal, 5),
- flag7-fg: get($color, purple, 6),
- flag1-bg: get($color, red, 5),
- flag2-bg: get($color, orange, 3),
- flag3-bg: get($color, green, 3),
- flag4-bg: get($color, blue, 3),
- flag5-bg: get($color, fuchsia, 2),
- flag6-bg: get($color, teal, 4),
- flag7-bg: get($color, purple, 4),
- buried-fg: get($color, amber, 5),
- suspended-fg: get($color, yellow, 4),
- suspended-bg: get($color, yellow, 1),
- marked-bg: get($color, indigo, 2),
- tooltip-bg: get($color, gray, 0),
- focus-border: get($color, indigo, 6),
+ border-radius: (
+ default: 5px,
),
- dark: (
- text-fg: get($color, gray, 0),
- window-bg: get($color, gray, 6),
- frame-bg: get($color, gray, 7),
- border: get($color, gray, 5),
- faint-border: get($color, gray, 8),
- link: get($color, blue, 2),
- review-count: get($color, green, 4),
- new-count: get($color, blue, 2),
- learn-count: get($color, red, 4),
- zero-count: get($color, gray, 7),
- slightly-grey-text: get($color, gray, 4),
- highlight-bg: get($color, cyan, 2),
- highlight-fg: white,
- disabled: get($color, gray, 6),
- card-view-bg: get($color, blue, 4),
- note-view-bg: get($color, green, 4),
- flag1-fg: get($color, red, 4),
- flag2-fg: get($color, orange, 4),
- flag3-fg: get($color, green, 4),
- flag4-fg: get($color, blue, 4),
- flag5-fg: get($color, fuchsia, 3),
- flag6-fg: get($color, teal, 4),
- flag7-fg: get($color, purple, 5),
- flag1-bg: get($color, red, 6),
- flag2-bg: get($color, orange, 5),
- flag3-bg: get($color, green, 5),
- flag4-bg: get($color, blue, 5),
- flag5-bg: get($color, fuchsia, 5),
- flag6-bg: get($color, teal, 5),
- flag7-bg: get($color, purple, 7),
- buried-fg: get($color, amber, 8),
- suspended-fg: get($color, yellow, 1),
- suspended-bg: get($color, yellow, 5),
- marked-bg: get($color, purple, 5),
- tooltip-bg: get($color, gray, 8),
- focus-border: get($color, indigo, 5),
+ ),
+ colors: (
+ text-fg: (
+ light: get($color, gray, 9),
+ dark: get($color, gray, 0),
+ ),
+ window-bg: (
+ light: get($color, gray, 1),
+ dark: get($color, gray, 6),
+ ),
+ frame-bg: (
+ light: get($color, gray, 0),
+ dark: get($color, gray, 7),
+ ),
+ border: (
+ light: get($color, gray, 3),
+ dark: get($color, gray, 5),
+ ),
+ faint-border: (
+ light: get($color, gray, 2),
+ dark: get($color, gray, 8),
+ ),
+ link: (
+ light: get($color, blue, 9),
+ dark: get($color, blue, 2),
+ ),
+ review-count: (
+ light: get($color, green, 7),
+ dark: get($color, green, 4),
+ ),
+ new-count: (
+ light: get($color, blue, 9),
+ dark: get($color, blue, 2),
+ ),
+ learn-count: (
+ light: get($color, orange, 7),
+ dark: get($color, red, 4),
+ ),
+ zero-count: (
+ light: get($color, gray, 2),
+ dark: get($color, gray, 7),
+ ),
+ slightly-grey-text: (
+ light: get($color, gray, 7),
+ dark: get($color, gray, 4),
+ ),
+ highlight-bg: (
+ light: get($color, cyan, 2),
+ dark: get($color, cyan, 2),
+ ),
+ highlight-fg: (
+ light: black,
+ dark: white,
+ ),
+ disabled: (
+ light: get($color, gray, 5),
+ dark: get($color, gray, 6),
+ ),
+ 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),
),
),
);
:root {
- @each $name, $value in get($vars, themes, light) {
- --#{$name}: #{$value};
+ @each $name, $map in map-get($vars, colors) {
+ --#{$name}: #{map-get($map, light)};
}
&.night-mode {
- @each $name, $value in get($vars, themes, dark) {
- --#{$name}: #{$value};
+ @each $name, $map in get($vars, colors) {
+ --#{$name}: #{map-get($map, dark)};
}
color-scheme: dark;
}
}
-/* separate rule for cleaner dev tools appearance */
:root {
- @each $name, $value in get($vars, props) {
- --#{$name}: #{$value};
+ @each $name, $map in map-get($vars, props) {
+ $val: map-get($map, default);
+ @if $val {
+ --#{$name}: #{$val};
+ }
+ }
+ @each $name, $map in map-get($vars, props) {
+ $val: map-get($map, light);
+ @if $val {
+ --#{$name}: #{$val};
+ }
+ }
+ &.night-mode {
+ @each $name, $map in map-get($vars, props) {
+ $val: map-get($map, dark);
+ @if $val {
+ --#{$name}: #{$val};
+ }
+ }
}
}
From e036edd5844c3d77cc8ffd2b5dd34ba034f56e22 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Tue, 16 Aug 2022 22:36:10 +0200
Subject: [PATCH 11/45] Move custom QLineEdit styles out of searchbar.py
---
qt/aqt/browser/sidebar/searchbar.py | 24 ------------------------
qt/aqt/browser/sidebar/tree.py | 1 -
2 files changed, 25 deletions(-)
diff --git a/qt/aqt/browser/sidebar/searchbar.py b/qt/aqt/browser/sidebar/searchbar.py
index d8f11f6ee..b73d90f12 100644
--- a/qt/aqt/browser/sidebar/searchbar.py
+++ b/qt/aqt/browser/sidebar/searchbar.py
@@ -6,9 +6,7 @@ from __future__ import annotations
import aqt
import aqt.browser
import aqt.gui_hooks
-from aqt import colors
from aqt.qt import *
-from aqt.theme import theme_manager
class SidebarSearchBar(QLineEdit):
@@ -20,29 +18,10 @@ class SidebarSearchBar(QLineEdit):
self.timer.setInterval(600)
self.timer.setSingleShot(True)
self.setFrame(False)
- self.setup_style()
qconnect(self.timer.timeout, self.onSearch)
qconnect(self.textChanged, self.onTextChanged)
- aqt.gui_hooks.theme_did_change.append(self.setup_style)
-
- def setup_style(self) -> None:
- styles = [
- "padding: 2px",
- f"border: 1px solid {theme_manager.color(colors.BORDER)}",
- "border-radius: 5px",
- ]
-
- self.setStyleSheet(
- "QLineEdit { %s }" % ";".join(styles)
- + f"""
-QLineEdit:focus {{
- border: 1px solid {theme_manager.color(colors.FOCUS_BORDER)};
-}}
- """
- )
-
def onTextChanged(self, text: str) -> None:
if not self.timer.isActive():
self.timer.start()
@@ -57,6 +36,3 @@ QLineEdit:focus {{
self.onSearch()
else:
QLineEdit.keyPressEvent(self, evt)
-
- def cleanup(self) -> None:
- aqt.gui_hooks.theme_did_change.remove(self.setup_style)
diff --git a/qt/aqt/browser/sidebar/tree.py b/qt/aqt/browser/sidebar/tree.py
index 972e1555e..ebb3fcb90 100644
--- a/qt/aqt/browser/sidebar/tree.py
+++ b/qt/aqt/browser/sidebar/tree.py
@@ -116,7 +116,6 @@ class SidebarTreeView(QTreeView):
def cleanup(self) -> None:
self.toolbar.cleanup()
- self.searchBar.cleanup()
gui_hooks.flag_label_did_change.remove(self.refresh)
gui_hooks.theme_did_change.remove(self._setup_style)
From ac4c88afdc84de48f19ff0474b2be0a7ed4965dd Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Thu, 18 Aug 2022 07:48:34 +0200
Subject: [PATCH 12/45] Merge branch 'main' into color-palette
---
ftl/core/editing.ftl | 1 +
ftl/core/fields.ftl | 1 +
proto/anki/notetypes.proto | 1 +
qt/aqt/data/web/css/webview.scss | 7 +-
qt/aqt/editor.py | 28 +-
qt/aqt/fields.py | 5 +
qt/aqt/forms/fields.ui | 76 +++---
rslib/src/notetype/fields.rs | 1 +
rslib/src/notetype/schema11.rs | 9 +-
sass/base.scss | 2 +-
ts/components/WithTooltip.svelte | 11 -
ts/editable/mathjax-element.ts | 7 +
ts/editor/EditorField.svelte | 1 +
ts/editor/FieldDescription.svelte | 7 +-
ts/editor/NoteEditor.svelte | 22 +-
ts/editor/editor-toolbar/LatexButton.svelte | 10 +
.../editor-toolbar/RemoveFormatButton.svelte | 93 ++++---
.../rich-text-input/RichTextInput.svelte | 13 +-
ts/editor/surround.ts | 243 +++++++++++-------
ts/lib/functional.ts | 4 +
20 files changed, 337 insertions(+), 205 deletions(-)
diff --git a/ftl/core/editing.ftl b/ftl/core/editing.ftl
index 6e4d9086a..96e5af0e5 100644
--- a/ftl/core/editing.ftl
+++ b/ftl/core/editing.ftl
@@ -58,6 +58,7 @@ editing-toggle-visual-editor = Toggle Visual Editor
editing-underline-text = Underline text
editing-unordered-list = Unordered list
editing-warning-cloze-deletions-will-not-work = Warning, cloze deletions will not work until you switch the type at the top to Cloze.
+editing-toggle-mathjax-rendering = Toggle MathJax Rendering
## You don't need to translate these strings, as they will be replaced with different ones soon.
diff --git a/ftl/core/fields.ftl b/ftl/core/fields.ftl
index 3f8b3581f..dfcb6f3f0 100644
--- a/ftl/core/fields.ftl
+++ b/ftl/core/fields.ftl
@@ -10,6 +10,7 @@ fields-font = Font:
fields-new-position-1 = New position (1...{ $val }):
fields-notes-require-at-least-one-field = Notes require at least one field.
fields-reverse-text-direction-rtl = Reverse text direction (RTL)
+fields-html-by-default = Use HTML editor by default
fields-size = Size:
fields-sort-by-this-field-in-the = Sort by this field in the browser
fields-that-field-name-is-already-used = That field name is already used.
diff --git a/proto/anki/notetypes.proto b/proto/anki/notetypes.proto
index 6bd9d37ab..ff9f0ee0c 100644
--- a/proto/anki/notetypes.proto
+++ b/proto/anki/notetypes.proto
@@ -72,6 +72,7 @@ message Notetype {
string font_name = 3;
uint32 font_size = 4;
string description = 5;
+ bool plain_text = 6;
bytes other = 255;
}
diff --git a/qt/aqt/data/web/css/webview.scss b/qt/aqt/data/web/css/webview.scss
index ee0f9cd4b..71a377303 100644
--- a/qt/aqt/data/web/css/webview.scss
+++ b/qt/aqt/data/web/css/webview.scss
@@ -14,8 +14,8 @@
body {
color: var(--text-fg);
background: var(--window-bg);
- margin: 1em;
transition: opacity 0.5s ease-out;
+ margin: 2em;
overscroll-behavior: none;
}
@@ -24,11 +24,6 @@ a {
text-decoration: none;
}
-body {
- margin: 2em;
- overscroll-behavior: none;
-}
-
h1 {
margin-bottom: 0.2em;
}
diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index d70acb870..034353023 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -125,6 +125,7 @@ class Editor:
self.card: Card | None = None
self._init_links()
self.setupOuter()
+ self.add_webview()
self.setupWeb()
self.setupShortcuts()
gui_hooks.editor_did_init(self)
@@ -139,11 +140,12 @@ class Editor:
self.widget.setLayout(l)
self.outerLayout = l
- def setupWeb(self) -> None:
+ def add_webview(self) -> None:
self.web = EditorWebView(self.widget, self)
self.web.set_bridge_command(self.onBridgeCmd, self)
self.outerLayout.addWidget(self.web, 1)
+ def setupWeb(self) -> None:
if self.editorMode == EditorMode.ADD_CARDS:
file = "note_creator"
elif self.editorMode == EditorMode.BROWSER:
@@ -499,6 +501,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
]
flds = self.note.note_type()["flds"]
+ plain_texts = [fld.get("plainText", False) for fld in flds]
descriptions = [fld.get("description", "") for fld in flds]
self.widget.show()
@@ -519,14 +522,26 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
text_color = self.mw.pm.profile.get("lastTextColor", "#00f")
highlight_color = self.mw.pm.profile.get("lastHighlightColor", "#00f")
- js = "setFields({}); setDescriptions({}); setFonts({}); focusField({}); setNoteId({}); setColorButtons({}); setTags({}); ".format(
+ js = """
+ setFields({});
+ setPlainTexts({});
+ setDescriptions({});
+ setFonts({});
+ focusField({});
+ setNoteId({});
+ setColorButtons({});
+ setTags({});
+ setMathjaxEnabled({});
+ """.format(
json.dumps(data),
+ json.dumps(plain_texts),
json.dumps(descriptions),
json.dumps(self.fonts()),
json.dumps(focusTo),
json.dumps(self.note.id),
json.dumps([text_color, highlight_color]),
json.dumps(self.note.tags),
+ json.dumps(self.mw.col.get_config("renderMathjax", True)),
)
if self.addMode:
@@ -1130,6 +1145,14 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
def insertMathjaxChemistry(self) -> None:
self.web.eval("wrap('\\\\(\\\\ce{', '}\\\\)');")
+ def toggleMathjax(self) -> None:
+ self.mw.col.set_config(
+ "renderMathjax", not self.mw.col.get_config("renderMathjax", False)
+ )
+ # hackily redraw the page
+ self.setupWeb()
+ self.loadNoteKeepingFocus()
+
# Links from HTML
######################################################################
@@ -1156,6 +1179,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
mathjaxInline=Editor.insertMathjaxInline,
mathjaxBlock=Editor.insertMathjaxBlock,
mathjaxChemistry=Editor.insertMathjaxChemistry,
+ toggleMathjax=Editor.toggleMathjax,
)
diff --git a/qt/aqt/fields.py b/qt/aqt/fields.py
index a3c25f938..7bbddfe7b 100644
--- a/qt/aqt/fields.py
+++ b/qt/aqt/fields.py
@@ -243,6 +243,7 @@ class FieldDialog(QDialog):
f.fontSize.setValue(fld["size"])
f.sortField.setChecked(self.model["sortf"] == fld["ord"])
f.rtl.setChecked(fld["rtl"])
+ f.plainTextByDefault.setChecked(fld["plainText"])
f.fieldDescription.setText(fld.get("description", ""))
def saveField(self) -> None:
@@ -264,6 +265,10 @@ class FieldDialog(QDialog):
if fld["rtl"] != rtl:
fld["rtl"] = rtl
self.change_tracker.mark_basic()
+ plain_text = f.plainTextByDefault.isChecked()
+ if fld["plainText"] != plain_text:
+ fld["plainText"] = plain_text
+ self.change_tracker.mark_basic()
desc = f.fieldDescription.text()
if fld.get("description", "") != desc:
fld["description"] = desc
diff --git a/qt/aqt/forms/fields.ui b/qt/aqt/forms/fields.ui
index 81f3ce3e0..cb2a04b1b 100644
--- a/qt/aqt/forms/fields.ui
+++ b/qt/aqt/forms/fields.ui
@@ -6,8 +6,8 @@
0
0
- 586
- 376
+ 598
+ 378
@@ -84,13 +84,6 @@
-
-
-
-
-
- fields_editing_font
-
-
-
-
@@ -98,13 +91,27 @@
- -
-
-
- 5
+
-
+
+
+
+ 0
+ 25
+
-
- 300
+
+
+ -
+
+
+ fields_editing_font
+
+
+
+ -
+
+
+ fields_description_placeholder
@@ -115,13 +122,6 @@
- -
-
-
- fields_sort_by_this_field_in_the
-
-
-
-
@@ -135,20 +135,30 @@
- -
-
-
-
- 0
- 25
-
+
-
+
+
+ 5
+
+
+ 300
- -
-
-
- fields_description_placeholder
+
-
+
+
+ fields_sort_by_this_field_in_the
+
+
+
+ -
+
+
+ true
+
+
+ fields_html_by_default
diff --git a/rslib/src/notetype/fields.rs b/rslib/src/notetype/fields.rs
index 1b126f0cf..ca1908e3d 100644
--- a/rslib/src/notetype/fields.rs
+++ b/rslib/src/notetype/fields.rs
@@ -42,6 +42,7 @@ impl NoteField {
config: NoteFieldConfig {
sticky: false,
rtl: false,
+ plain_text: false,
font_name: "Arial".into(),
font_size: 20,
description: "".into(),
diff --git a/rslib/src/notetype/schema11.rs b/rslib/src/notetype/schema11.rs
index 5db53d56b..0fab7e560 100644
--- a/rslib/src/notetype/schema11.rs
+++ b/rslib/src/notetype/schema11.rs
@@ -161,7 +161,7 @@ impl From for NotetypeSchema11 {
/// See [crate::deckconfig::schema11::clear_other_duplicates()].
fn clear_other_field_duplicates(other: &mut HashMap) {
- for key in &["description"] {
+ for key in &["description", "plainText"] {
other.remove(*key);
}
}
@@ -195,6 +195,7 @@ impl From for CardRequirementSchema11 {
}
#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
pub struct NoteFieldSchema11 {
pub(crate) name: String,
pub(crate) ord: Option,
@@ -211,6 +212,9 @@ pub struct NoteFieldSchema11 {
#[serde(default, deserialize_with = "default_on_invalid")]
pub(crate) description: String,
+ #[serde(default, deserialize_with = "default_on_invalid")]
+ pub(crate) plain_text: bool,
+
#[serde(flatten)]
pub(crate) other: HashMap,
}
@@ -222,6 +226,7 @@ impl Default for NoteFieldSchema11 {
ord: None,
sticky: false,
rtl: false,
+ plain_text: false,
font: "Arial".to_string(),
size: 20,
description: String::new(),
@@ -238,6 +243,7 @@ impl From for NoteField {
config: NoteFieldConfig {
sticky: f.sticky,
rtl: f.rtl,
+ plain_text: f.plain_text,
font_name: f.font,
font_size: f.size as u32,
description: f.description,
@@ -259,6 +265,7 @@ impl From for NoteFieldSchema11 {
ord: p.ord.map(|o| o as u16),
sticky: conf.sticky,
rtl: conf.rtl,
+ plain_text: conf.plain_text,
font: conf.font_name,
size: conf.font_size as u16,
description: conf.description,
diff --git a/sass/base.scss b/sass/base.scss
index fa5e21cf1..ab8054a6b 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -32,7 +32,7 @@ $utilities: (
flex-basis: 75%;
}
-* {
+body {
overscroll-behavior: none;
}
diff --git a/ts/components/WithTooltip.svelte b/ts/components/WithTooltip.svelte
index 6adbb7c11..6ad68a673 100644
--- a/ts/components/WithTooltip.svelte
+++ b/ts/components/WithTooltip.svelte
@@ -38,17 +38,6 @@
}
onDestroy(() => tooltipObject?.dispose());
-
- // hack to update field description tooltips
- let previousTooltip: string = tooltip;
- $: if (tooltip !== previousTooltip) {
- previousTooltip = tooltip;
- if (tooltipObject !== undefined) {
- const element: HTMLElement = tooltipObject["_element"];
- tooltipObject.dispose();
- createTooltip(element);
- }
- }
diff --git a/ts/editable/mathjax-element.ts b/ts/editable/mathjax-element.ts
index 247ccb458..1c1480e50 100644
--- a/ts/editable/mathjax-element.ts
+++ b/ts/editable/mathjax-element.ts
@@ -20,6 +20,10 @@ function trimBreaks(text: string): string {
.replace(/\n*$/, "");
}
+export const mathjaxConfig = {
+ enabled: true,
+};
+
export const Mathjax: DecoratedElementConstructor = class Mathjax
extends HTMLElement
implements DecoratedElement
@@ -41,6 +45,9 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax
}
static toUndecorated(stored: string): string {
+ if (!mathjaxConfig.enabled) {
+ return stored;
+ }
return stored
.replace(mathjaxBlockDelimiterPattern, (_match: string, text: string) => {
const trimmed = trimBreaks(text);
diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte
index 447460e10..23588ffb6 100644
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@@ -12,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
fontFamily: string;
fontSize: number;
direction: "ltr" | "rtl";
+ plainText: boolean;
description: string;
}
diff --git a/ts/editor/FieldDescription.svelte b/ts/editor/FieldDescription.svelte
index af2cd4270..41f2cd105 100644
--- a/ts/editor/FieldDescription.svelte
+++ b/ts/editor/FieldDescription.svelte
@@ -32,10 +32,13 @@ 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