From 87db774412fd2bfd75e2630d2c5e782daef96b5f Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Sun, 23 Oct 2022 12:59:05 +0200
Subject: [PATCH] Apply CSS variables from Python side

Why go full-circle with the Sass variables? This way we only need one interface for add-on authors to interact with. It also makes it easier for us to apply additional themes in the future.
---
 qt/aqt/data/web/css/deckbrowser.scss     |  1 -
 qt/aqt/data/web/css/overview.scss        |  1 -
 qt/aqt/data/web/css/reviewer-bottom.scss |  1 -
 qt/aqt/data/web/css/toolbar.scss         |  1 -
 qt/aqt/webview.py                        | 24 ++++++++++++++++++++----
 sass/base.scss                           |  1 -
 ts/graphs/graphs-base.scss               |  1 -
 7 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss
index 1b519eda8..85f1ce107 100644
--- a/qt/aqt/data/web/css/deckbrowser.scss
+++ b/qt/aqt/data/web/css/deckbrowser.scss
@@ -1,6 +1,5 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
-@use "root-vars";
 @use "sass/vars" as *;
 @use "sass/card-counts";
 
diff --git a/qt/aqt/data/web/css/overview.scss b/qt/aqt/data/web/css/overview.scss
index d2201f884..43afb5f03 100644
--- a/qt/aqt/data/web/css/overview.scss
+++ b/qt/aqt/data/web/css/overview.scss
@@ -1,7 +1,6 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "root-vars";
 @use "sass/vars" as *;
 @use "sass/card-counts";
 @use "sass/button-mixins" as button;
diff --git a/qt/aqt/data/web/css/reviewer-bottom.scss b/qt/aqt/data/web/css/reviewer-bottom.scss
index ab19ad511..6d5d54f29 100644
--- a/qt/aqt/data/web/css/reviewer-bottom.scss
+++ b/qt/aqt/data/web/css/reviewer-bottom.scss
@@ -1,7 +1,6 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "root-vars";
 @use "sass/vars" as *;
 @use "sass/card-counts";
 
diff --git a/qt/aqt/data/web/css/toolbar.scss b/qt/aqt/data/web/css/toolbar.scss
index 5028613bc..d0f690975 100644
--- a/qt/aqt/data/web/css/toolbar.scss
+++ b/qt/aqt/data/web/css/toolbar.scss
@@ -1,7 +1,6 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "root-vars";
 @use "sass/vars" as *;
 @use "sass/elevation";
 @use "sass/button-mixins" as button;
diff --git a/qt/aqt/webview.py b/qt/aqt/webview.py
index fe74b5322..9bdf6fa53 100644
--- a/qt/aqt/webview.py
+++ b/qt/aqt/webview.py
@@ -12,7 +12,7 @@ import anki.lang
 from anki._legacy import deprecated
 from anki.lang import is_rtl
 from anki.utils import is_lin, is_mac, is_win
-from aqt import colors, gui_hooks
+from aqt import colors, gui_hooks, props
 from aqt.qt import *
 from aqt.theme import theme_manager
 from aqt.utils import askUser, is_gesture_or_zoom_event, openLink, showInfo, tr
@@ -448,7 +448,6 @@ div[contenteditable="true"]:focus {{
             )
 
         zoom = self.app_zoom_factor()
-
         return f"""
 body {{ zoom: {zoom}; background-color: var(--canvas); }}
 html {{ {font} }}
@@ -457,6 +456,23 @@ html {{ {font} }}
 :root[class*=night-mode] {{ --canvas: {colors.CANVAS["dark"]} }}
 """
 
+    def css_vars(self) -> str:
+        br = "\n  "
+        return f"""
+:root {{
+  {br.join([f"/* {color['comment']} */{br}--{name.lower().replace('_', '-')}: {color['light']};" for name, color in colors.__dict__.items() if name != "__builtins__" and isinstance(color, dict)])}
+}}
+:root[class*=night-mode] {{
+  {br.join([f"/* {color['comment']} */{br}--{name.lower().replace('_', '-')}: {color['dark']};" for name, color in colors.__dict__.items() if name != "__builtins__" and isinstance(color, dict)])}
+}}
+:root {{
+  {br.join([f"/* {prop['comment']} */{br}--{name.lower().replace('_', '-')}: {prop['light']};" for name, prop in props.__dict__.items() if name != "__builtins__" and isinstance(prop, dict)])}
+}}
+:root[class*=night-mode] {{
+  {br.join([f"/* {prop['comment']} */{br}--{name.lower().replace('_', '-')}: {prop['dark']};" for name, prop in props.__dict__.items() if name != "__builtins__" and isinstance(prop, dict)])}
+}}
+        """
+
     def stdHtml(
         self,
         body: str,
@@ -478,13 +494,13 @@ html {{ {font} }}
 
         gui_hooks.webview_will_set_content(web_content, context)
 
-        csstxt = ""
+        csstxt = f'<style id="vars">{self.css_vars()}</style>'
         if "css/webview.css" in css:
             # we want our dynamic styling to override the defaults in
             # css/webview.css, but come before user-provided stylesheets so that
             # they can override us if necessary
             web_content.css.remove("css/webview.css")
-            csstxt = self.bundledCSS("css/webview.css")
+            csstxt += self.bundledCSS("css/webview.css")
             csstxt += f"<style>{self.standard_css()}</style>"
 
         csstxt += "\n".join(self.bundledCSS(fname) for fname in web_content.css)
diff --git a/sass/base.scss b/sass/base.scss
index f5cbf4275..5b9d9cda8 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -1,5 +1,4 @@
 @use "vars" as *;
-@use "root-vars";
 @use "scrollbar";
 @use "button-mixins" as button;
 
diff --git a/ts/graphs/graphs-base.scss b/ts/graphs/graphs-base.scss
index ce9379e02..01f4ecd09 100644
--- a/ts/graphs/graphs-base.scss
+++ b/ts/graphs/graphs-base.scss
@@ -1,4 +1,3 @@
-@use "root-vars";
 @use "sass/button-mixins" as button;
 
 label,