Add comments to variables

qt/aqt/data/web/css/deckbrowser.scss

@@ -63,7 +63,7 @@ body {
 }
 
 .filtered {
-    color: color(accent-link) !important;
+    color: color(fg-link) !important;
 }
 
 .gears {

qt/aqt/data/web/css/webview.scss

@@ -24,7 +24,7 @@ body {
 }
 
 a {
-    color: var(--accent-link);
+    color: var(--fg-link);
     text-decoration: none;
 }
 

qt/aqt/filtered_deck.py

@@ -84,7 +84,7 @@ 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.var(colors.ACCENT_LINK)
+        blue = theme_manager.var(colors.FG_LINK)
         grey = theme_manager.var(colors.FG_DISABLED)
         self.setStyleSheet(
             f"""QPushButton[label] {{ padding: 0; border: 0 }}

qt/aqt/stylesheets.py

@@ -85,12 +85,12 @@ QComboBox:!editable:hover {{
 }}
 QPushButton:pressed,
 QComboBox:!editable:pressed {{
-    border: 1px solid {tm.var(colors.BUTTON_PRESSED_BORDER)};
+    border: 1px solid {tm.var(colors.BORDER_STRONG)};
     background: {
         button_pressed_gradient(
             tm.var(colors.BUTTON_GRADIENT_START),
             tm.var(colors.BUTTON_GRADIENT_END),
-            tm.var(colors.BUTTON_PRESSED_SHADOW)
+            tm.var(colors.SHADOW)
         )
     };
 }}
@@ -148,7 +148,7 @@ QComboBox::drop-down {{
     padding: 2px;
     width: 16px;
     subcontrol-position: top right;
-    border: 1px solid {tm.var(colors.BUTTON_BORDER)};
+    border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
     border-top-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)};
     border-bottom-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)};
 }}
@@ -226,8 +226,8 @@ def table_styles(tm: ThemeManager) -> str:
 QTableView {{
     border-radius: {tm.var(props.BORDER_RADIUS)};
     gridline-color: {tm.var(colors.BORDER)};
-    selection-background-color: {tm.var(colors.SELECTION_BG)};
+    selection-background-color: {tm.var(colors.SELECTED_BG)};
-    selection-color: {tm.var(colors.SELECTION_FG)};
+    selection-color: {tm.var(colors.SELECTED_FG)};
 }}
 QHeaderView {{
     background: {tm.var(colors.CANVAS)};
@@ -243,12 +243,12 @@ QHeaderView::section {{
 }}
 QHeaderView::section:pressed,
 QHeaderView::section:pressed:!first {{
-    border: 1px solid {tm.var(colors.BUTTON_PRESSED_BORDER)};
+    border: 1px solid {tm.var(colors.BORDER_STRONG)};
     background: {
         button_pressed_gradient(
             tm.var(colors.BUTTON_GRADIENT_START),
             tm.var(colors.BUTTON_GRADIENT_END),
-            tm.var(colors.BUTTON_PRESSED_SHADOW)
+            tm.var(colors.SHADOW)
         )
     }
 }}
@@ -297,7 +297,7 @@ QSpinBox::up-button,
 QSpinBox::down-button {{
     subcontrol-origin: border;
     width: 16px;
-    border: 1px solid {tm.var(colors.BUTTON_BORDER)};
+    border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
     background: {
         button_gradient(
             tm.var(colors.BUTTON_GRADIENT_START),
@@ -307,12 +307,12 @@ QSpinBox::down-button {{
 }}
 QSpinBox::up-button:pressed,
 QSpinBox::down-button:pressed {{
-    border: 1px solid {tm.var(colors.BUTTON_PRESSED_BORDER)};
+    border: 1px solid {tm.var(colors.BORDER_STRONG)};
     background: {
         button_pressed_gradient(
             tm.var(colors.BUTTON_GRADIENT_START),
             tm.var(colors.BUTTON_GRADIENT_END),
-            tm.var(colors.BUTTON_PRESSED_SHADOW)
+            tm.var(colors.SHADOW)
         )
     }
 }}
@@ -375,7 +375,7 @@ QRadioButton {{
 }}
 QCheckBox::indicator,
 QRadioButton::indicator {{
-    border: 1px solid {tm.var(colors.BUTTON_BORDER)};
+    border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
     background: {tm.var(colors.CANVAS_INSET)};
     width: 16px;
     height: 16px;

qt/aqt/theme.py

@@ -311,7 +311,7 @@ class ThemeManager:
             disabled_color,
         )
 
-        palette.setColor(QPalette.ColorRole.Link, self.qcolor(colors.ACCENT_LINK))
+        palette.setColor(QPalette.ColorRole.Link, self.qcolor(colors.FG_LINK))
 
         palette.setColor(QPalette.ColorRole.BrightText, Qt.GlobalColor.red)
 

qt/tools/extract_sass_vars.py

@@ -13,14 +13,6 @@ root_vars_css = sys.argv[1]
 colors_py = sys.argv[2]
 props_py = sys.argv[3]
 
-class Var(str):
-    def __new__(self, value: str, comment: str):
-        self.comment = comment
-        return str.__new__(self, value)
-
-    def comment(self):
-        return self.comment
-
 colors = {}
 props = {}
 reached_props = False

sass/_button-mixins.scss

@@ -62,7 +62,7 @@
     -webkit-appearance: none;
     cursor: pointer;
     @if $border {
-        border: 1px solid var(--button-border);
+        border: 1px solid var(--border-subtle);
     } @else {
         border: none;
     }
@@ -77,12 +77,12 @@
     @if ($with-active) {
         &:active {
             @include impressed-shadow(0.35);
-            border-color: var(--button-border);
+            border-color: var(--border-subtle);
         }
         @if ($active-class != "") {
             &.#{$active-class} {
                 @include impressed-shadow(0.35);
-                border-color: var(--button-border);
+                border-color: var(--border-subtle);
             }
         }
     }

sass/_functions.scss

@@ -6,7 +6,17 @@
 
 @function create-vars-from-map($map, $theme, $name: "-", $output: ()) {
     @each $key, $value in $map {
-        @if $key == $theme {
+        @if $key ==
+            $theme or
+            (
+                $key ==
+                    "default" and
+                    type-of($value) !=
+                    "map" and
+                    type-of($value) !=
+                    "list"
+            )
+        {
             @return map.set($output, $name, map.get($map, $key));
         }
         @if type-of($value) == "map" {
@@ -21,8 +31,24 @@
                     create-vars-from-map($value, $theme, #{$name}-#{$key}, $output)
                 );
             }
-        } @else if $key == "default" {
+        } @else if type-of($value) == "list" and list.length($value) > 1 {
-            @return map.set($output, $name, map.get($map, $key));
+            $next-name: #{$name}-#{$key};
+            @if $key == "default" {
+                $next-name: $name;
+            }
+            $output: map-merge(
+                $output,
+                (#{"comment"}#{$next-name}: list.nth($value, 1))
+            );
+            $output: map-merge(
+                $output,
+                create-vars-from-map(
+                    list.nth($value, 2),
+                    $theme,
+                    #{$next-name},
+                    $output
+                )
+            );
         }
     }
     @return $output;
@@ -30,8 +56,12 @@
 
 @function map-deep-get($map, $keys) {
     @each $key in $keys {
+        @if type-of($map) == "list" and list.length($map) > 1 {
+            $map: map-get(list.nth($map, 2), $key);
+        } @else {
             $map: map-get($map, $key);
         }
+    }
     @return $map;
 }
 

sass/_root-vars.scss

@@ -9,15 +9,21 @@
 :root {
     $colors: map.get($vars, colors);
     @each $name, $val in create-vars-from-map($colors, light) {
-        /*! #{$name} */
+        @if str-index($name, "comment") == 1 {
+            /*! #{$val} */
+        } @else {
             #{$name}: #{$val};
         }
+    }
     color-scheme: light;
     &.night-mode {
         @each $name, $val in create-vars-from-map($colors, dark) {
-            /*! #{$name} */
+            @if str-index($name, "comment") == 1 {
+                /*! #{$val} */
+            } @else {
                 #{$name}: #{$val};
             }
+        }
         color-scheme: dark;
     }
 }
@@ -26,13 +32,19 @@
 :root {
     $props: map.get($vars, props);
     @each $name, $val in create-vars-from-map($props, light) {
-        /*! #{$name} */
+        @if str-index($name, "comment") == 1 {
+            /*! #{$val} */
+        } @else {
             #{$name}: #{$val};
         }
+    }
     &.night-mode {
         @each $name, $val in create-vars-from-map($props, dark) {
-            /*! #{$name} */
+            @if str-index($name, "comment") == 1 {
+                /*! #{$val} */
+            } @else {
                 #{$name}: #{$val};
             }
         }
     }
+}

sass/_vars.scss

@@ -14,280 +14,423 @@
 $vars: (
     props: (
         border-radius: (
+            default: (
+                "Used to round corners of various UI elements",
+                (
                     default: 5px,
                 ),
             ),
+            large: (
+                "Used for big centered buttons",
+                (
+                    default: 15px,
+                ),
+            ),
+        ),
+    ),
     colors: (
-        white: (
-            default: white,
-        ),
-        black: (
-            default: black,
-        ),
         fg: (
             default: (
+                "Default text/icon color",
+                (
                     light: palette(darkgray, 9),
                     dark: palette(lightgray, 0),
                 ),
+            ),
             subtle: (
+                "Placeholder text, icons in idle state",
+                (
                     light: palette(darkgray, 6),
                     dark: palette(lightgray, 3),
                 ),
+            ),
             disabled: (
+                "Foreground color of disabled UI elements",
+                (
                     light: palette(lightgray, 9),
                     dark: palette(darkgray, 0),
                 ),
+            ),
             faint: (
+                "Foreground color that barely stands out against canvas",
+                (
                     light: palette(lightgray, 7),
                     dark: palette(darkgray, 2),
                 ),
             ),
+            link: (
+                "Hyperlink foreground color",
+                (
+                    light: palette(blue, 7),
+                    dark: palette(blue, 2),
+                ),
+            ),
+        ),
         canvas: (
             default: (
+                "Window background",
+                (
                     light: palette(lightgray, 3),
                     dark: palette(darkgray, 5),
                 ),
+            ),
             elevated: (
+                "Slightly brighter than window background",
+                (
                     light: white,
                     dark: palette(darkgray, 4),
                 ),
+            ),
             inset: (
+                "Slightly darker than window background",
+                (
                     light: palette(lightgray, 4),
                     dark: palette(darkgray, 6),
                 ),
+            ),
             overlay: (
+                "Background of floating elements (menus, tooltips)",
+                (
                     light: white,
                     dark: black,
                 ),
+            ),
             code: (
+                "Background of code editors",
+                (
                     light: white,
                     dark: palette(darkgray, 6),
                 ),
             ),
+        ),
         border: (
             default: (
+                "Border color with medium contrast against window background",
+                (
                     light: palette(lightgray, 6),
                     dark: palette(darkgray, 7),
                 ),
+            ),
             subtle: (
+                "Border color with low contrast against window background",
+                (
                     light: palette(lightgray, 5),
                     dark: palette(darkgray, 6),
                 ),
+            ),
             strong: (
+                "Border color with high contrast against window background",
+                (
                     light: palette(lightgray, 9),
                     dark: palette(darkgray, 1),
                 ),
+            ),
             focus: (
+                "Border color of focused input elements",
+                (
                     light: palette(blue, 5),
                     dark: palette(blue, 5),
                 ),
             ),
+        ),
         button: (
-            border: (
-                light: palette(lightgray, 6),
-                dark: palette(darkgray, 6),
-            ),
-            focus: (
-                light: palette(cyan, 3),
-                dark: palette(cyan, 4),
-            ),
-            pressed: (
-                shadow: (
-                    light: palette(lightgray, 7),
-                    dark: palette(darkgray, 7),
-                ),
-                border: (
-                    light: palette(lightgray, 9),
-                    dark: palette(darkgray, 9),
-                ),
-            ),
             disabled: (
+                "Background color of disabled buttons",
+                (
                     light: color.scale(palette(lightgray, 5), $alpha: -50%),
                     dark: color.scale(palette(darkgray, 3), $alpha: -50%),
                 ),
+            ),
             gradient: (
                 start: (
+                    "Start value of default button gradient",
+                    (
                         light: white,
                         dark: palette(darkgray, 3),
                     ),
+                ),
                 end: (
+                    "End value of default button gradient",
+                    (
                         light: palette(lightgray, 1),
                         dark: palette(darkgray, 4),
                     ),
                 ),
+            ),
             hover: (
                 gradient: (
                     start: (
+                        "Start value of default button gradient in hover state",
+                        (
                             light: palette(lightgray, 1),
                             dark: palette(darkgray, 2),
                         ),
+                    ),
                     end: (
+                        "End value of default button gradient in hover state",
+                        (
                             light: palette(lightgray, 4),
                             dark: palette(darkgray, 3),
                         ),
                     ),
+                ),
                 border: (
+                    "Border color of default button in hover state",
+                    (
                         light: palette(lightgray, 8),
                         dark: palette(darkgray, 8),
                     ),
                 ),
+            ),
             primary: (
                 gradient: (
                     start: (
+                        "Start value of primary button gradient",
+                        (
                             light: palette(blue, 4),
                             dark: color.scale(palette(blue, 6), $saturation: -10%),
                         ),
+                    ),
                     end: (
+                        "End value of primary button gradient",
+                        (
                             light: palette(blue, 6),
                             dark: color.scale(palette(blue, 8), $saturation: -10%),
                         ),
                     ),
+                ),
                 hover: (
                     gradient: (
                         start: (
+                            "Start value of primary button gradient in hover state",
+                            (
                                 light: palette(blue, 3),
                                 dark: color.scale(palette(blue, 5), $saturation: -10%),
                             ),
+                        ),
                         end: (
+                            "End value of primary button gradient in hover state",
+                            (
                                 light: palette(blue, 5),
                                 dark: color.scale(palette(blue, 7), $saturation: -10%),
                             ),
                         ),
                     ),
+                ),
                 disabled: (
+                    "Background of primary button in disabled state",
+                    (
                         light: palette(blue, 3),
                         dark: color.scale(palette(blue, 5), $saturation: -10%),
                     ),
                 ),
             ),
+        ),
         scrollbar: (
             bg: (
                 default: (
+                    "Background of scrollbar in idle state (Win/Lin only)",
+                    (
                         light: palette(lightgray, 5),
                         dark: palette(darkgray, 4),
                     ),
+                ),
                 hover: (
+                    "Background of scrollbar in hover state (Win/Lin only)",
+                    (
                         light: palette(lightgray, 6),
                         dark: palette(darkgray, 3),
                     ),
+                ),
                 active: (
+                    "Background of scrollbar in pressed state (Win/Lin only)",
+                    (
                         light: palette(lightgray, 7),
                         dark: palette(darkgray, 1),
                     ),
                 ),
             ),
+        ),
         shadow: (
             default: (
+                "Default box-shadow color",
+                (
                     light: palette(lightgray, 8),
                     dark: palette(darkgray, 7),
                 ),
+            ),
             inset: (
+                "Inset box-shadow color",
+                (
                     light: palette(lightgray, 9),
                     dark: palette(darkgray, 7),
                 ),
+            ),
             subtle: (
+                "Box-shadow color with lower contrast against window background",
+                (
                     light: palette(lightgray, 5),
                     dark: palette(darkgray, 6),
                 ),
+            ),
             focus: (
+                "Box-shadow color for elements in focused state",
+                (
                     default: palette(indigo, 5),
                 ),
             ),
+        ),
         accent: (
             card: (
+                "Accent color for cards",
+                (
                     light: palette(blue, 4),
                     dark: palette(blue, 3),
                 ),
+            ),
             note: (
+                "Accent color for notes",
+                (
                     light: palette(green, 5),
                     dark: palette(green, 4),
                 ),
-            link: (
-                light: palette(blue, 7),
-                dark: palette(blue, 2),
             ),
             danger: (
+                "Saturated accent color to grab attention",
+                (
                     light: palette(red, 5),
                     dark: palette(red, 4),
                 ),
             ),
+        ),
         flag: (
             1: (
+                "Flag 1 (red)",
+                (
                     light: palette(red, 5),
                     dark: palette(red, 4),
                 ),
+            ),
             2: (
+                "Flag 2 (orange)",
+                (
                     light: palette(orange, 4),
                     dark: palette(orange, 3),
                 ),
+            ),
             3: (
+                "Flag 3 (green)",
+                (
                     light: palette(green, 4),
                     dark: palette(green, 3),
                 ),
+            ),
             4: (
+                "Flag 4 (blue)",
+                (
                     light: palette(blue, 5),
                     dark: palette(blue, 4),
                 ),
+            ),
             5: (
+                "Flag 5 (pink)",
+                (
                     light: palette(fuchsia, 4),
                     dark: palette(fuchsia, 3),
                 ),
+            ),
             6: (
+                "Flag 6 (turquoise)",
+                (
                     light: palette(teal, 4),
                     dark: palette(teal, 3),
                 ),
+            ),
             7: (
+                "Flag 7 (purple)",
+                (
                     light: palette(purple, 5),
                     dark: palette(purple, 4),
                 ),
             ),
+        ),
         state: (
             new: (
+                "Accent color for new cards",
+                (
                     light: palette(blue, 5),
                     dark: palette(blue, 3),
                 ),
+            ),
             learn: (
+                "Accent color for cards in learning state",
+                (
                     light: palette(red, 6),
                     dark: palette(red, 4),
                 ),
+            ),
             review: (
+                "Accent color for cards in review state",
+                (
                     light: palette(green, 6),
                     dark: palette(green, 5),
                 ),
+            ),
             buried: (
+                "Accent color for buried cards",
+                (
                     light: palette(amber, 5),
                     dark: palette(amber, 8),
                 ),
+            ),
             suspended: (
+                "Accent color for suspended cards",
+                (
                     light: palette(yellow, 4),
                     dark: palette(yellow, 1),
                 ),
+            ),
             marked: (
+                "Accent color for marked cards",
+                (
                     light: palette(indigo, 2),
                     dark: palette(purple, 5),
                 ),
             ),
+        ),
         highlight: (
             bg: (
+                "Background color of highlighted items",
+                (
                     light: palette(blue, 3),
                     dark: palette(blue, 4),
                 ),
+            ),
             fg: (
+                "Foreground color of highlighted items",
+                (
                     light: black,
                     dark: white,
                 ),
             ),
-        selection: (
+        ),
+        selected: (
             bg: (
+                "Background color of selected text",
+                (
                     light: color.scale(palette(lightgray, 5), $alpha: -50%),
                     dark: color.scale(palette(blue, 3), $alpha: -50%),
                 ),
+            ),
             fg: (
+                "Foreground color of selected text",
+                (
                     light: black,
                     dark: white,
                 ),
             ),
         ),
+    ),
 );
 
 @function prop($keyword) {

sass/base.scss

@@ -6,7 +6,7 @@
 $body-color: color(fg);
 $body-bg: color(canvas);
 
-$link-hover-color: color(accent-link);
+$link-hover-color: color(fg-link);
 $link-hover-decoration: none;
 
 $utilities: (

sass/core.scss

@@ -16,6 +16,6 @@ body {
 }
 
 a {
-    color: var(--accent-link);
+    color: var(--fg-link);
     text-decoration: none;
 }

ts/components/Select.svelte

@@ -75,13 +75,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .chevron {
         position: absolute;
         inset: 0 0 0 auto;
-        border-left: 1px solid var(--button-border);
+        border-left: 1px solid var(--border-subtle);
     }
     :global([dir="rtl"]) {
         .chevron {
             inset: 0 auto 0 0;
             border-left: none;
-            border-right: 1px solid var(--button-border);
+            border-right: 1px solid var(--border-subtle);
         }
     }
 </style>

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(--accent-link);
+            color: var(--fg-link);
             text-decoration: none;
         }
 

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(--accent-link);
+        color: var(--fg-link);
         text-decoration: underline;
     }
 </style>