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] 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};
+            }
+        }
     }
 }