diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss index f0d805df5..282c6e49f 100644 --- a/qt/aqt/data/web/css/deckbrowser.scss +++ b/qt/aqt/data/web/css/deckbrowser.scss @@ -63,7 +63,7 @@ body { } .filtered { - color: color(accent-link) !important; + color: color(fg-link) !important; } .gears { diff --git a/qt/aqt/data/web/css/webview.scss b/qt/aqt/data/web/css/webview.scss index 31710c8c8..f94445246 100644 --- a/qt/aqt/data/web/css/webview.scss +++ b/qt/aqt/data/web/css/webview.scss @@ -24,7 +24,7 @@ body { } a { - color: var(--accent-link); + color: var(--fg-link); text-decoration: none; } diff --git a/qt/aqt/filtered_deck.py b/qt/aqt/filtered_deck.py index 1e8a7e262..9aad52cef 100644 --- a/qt/aqt/filtered_deck.py +++ b/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 }} diff --git a/qt/aqt/stylesheets.py b/qt/aqt/stylesheets.py index 98bebf6d3..54afdb83d 100644 --- a/qt/aqt/stylesheets.py +++ b/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-color: {tm.var(colors.SELECTION_FG)}; + selection-background-color: {tm.var(colors.SELECTED_BG)}; + 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; diff --git a/qt/aqt/theme.py b/qt/aqt/theme.py index ee74a0407..2e869f5d5 100644 --- a/qt/aqt/theme.py +++ b/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) diff --git a/qt/tools/extract_sass_vars.py b/qt/tools/extract_sass_vars.py index 733e47183..99ce6eee3 100644 --- a/qt/tools/extract_sass_vars.py +++ b/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 diff --git a/sass/_button-mixins.scss b/sass/_button-mixins.scss index 1c4044dad..9026c2a8d 100644 --- a/sass/_button-mixins.scss +++ b/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); } } } diff --git a/sass/_functions.scss b/sass/_functions.scss index 2c0496bed..943eff55c 100644 --- a/sass/_functions.scss +++ b/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" { - @return map.set($output, $name, map.get($map, $key)); + } @else if type-of($value) == "list" and list.length($value) > 1 { + $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,7 +56,11 @@ @function map-deep-get($map, $keys) { @each $key in $keys { - $map: map-get($map, $key); + @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; } diff --git a/sass/_root-vars.scss b/sass/_root-vars.scss index b355ab995..dfaf6ce1e 100644 --- a/sass/_root-vars.scss +++ b/sass/_root-vars.scss @@ -9,14 +9,20 @@ :root { $colors: map.get($vars, colors); @each $name, $val in create-vars-from-map($colors, light) { - /*! #{$name} */ - #{$name}: #{$val}; + @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} */ - #{$name}: #{$val}; + @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} */ - #{$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}; } } + &.night-mode { + @each $name, $val in create-vars-from-map($props, dark) { + @if str-index($name, "comment") == 1 { + /*! #{$val} */ + } @else { + #{$name}: #{$val}; + } + } + } } diff --git a/sass/_vars.scss b/sass/_vars.scss index 559664134..3b99eff4e 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -14,277 +14,420 @@ $vars: ( props: ( border-radius: ( - default: 5px, + 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: ( - light: palette(darkgray, 9), - dark: palette(lightgray, 0), + "Default text/icon color", + ( + light: palette(darkgray, 9), + dark: palette(lightgray, 0), + ), ), subtle: ( - light: palette(darkgray, 6), - dark: palette(lightgray, 3), + "Placeholder text, icons in idle state", + ( + light: palette(darkgray, 6), + dark: palette(lightgray, 3), + ), ), disabled: ( - light: palette(lightgray, 9), - dark: palette(darkgray, 0), + "Foreground color of disabled UI elements", + ( + light: palette(lightgray, 9), + dark: palette(darkgray, 0), + ), ), faint: ( - light: palette(lightgray, 7), - dark: palette(darkgray, 2), + "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: ( - light: palette(lightgray, 3), - dark: palette(darkgray, 5), + "Window background", + ( + light: palette(lightgray, 3), + dark: palette(darkgray, 5), + ), ), elevated: ( - light: white, - dark: palette(darkgray, 4), + "Slightly brighter than window background", + ( + light: white, + dark: palette(darkgray, 4), + ), ), inset: ( - light: palette(lightgray, 4), - dark: palette(darkgray, 6), + "Slightly darker than window background", + ( + light: palette(lightgray, 4), + dark: palette(darkgray, 6), + ), ), overlay: ( - light: white, - dark: black, + "Background of floating elements (menus, tooltips)", + ( + light: white, + dark: black, + ), ), code: ( - light: white, - dark: palette(darkgray, 6), + "Background of code editors", + ( + light: white, + dark: palette(darkgray, 6), + ), ), ), border: ( default: ( - light: palette(lightgray, 6), - dark: palette(darkgray, 7), + "Border color with medium contrast against window background", + ( + light: palette(lightgray, 6), + dark: palette(darkgray, 7), + ), ), subtle: ( - light: palette(lightgray, 5), - dark: palette(darkgray, 6), + "Border color with low contrast against window background", + ( + light: palette(lightgray, 5), + dark: palette(darkgray, 6), + ), ), strong: ( - light: palette(lightgray, 9), - dark: palette(darkgray, 1), + "Border color with high contrast against window background", + ( + light: palette(lightgray, 9), + dark: palette(darkgray, 1), + ), ), focus: ( - light: palette(blue, 5), - dark: palette(blue, 5), + "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: ( - light: color.scale(palette(lightgray, 5), $alpha: -50%), - dark: color.scale(palette(darkgray, 3), $alpha: -50%), + "Background color of disabled buttons", + ( + light: color.scale(palette(lightgray, 5), $alpha: -50%), + dark: color.scale(palette(darkgray, 3), $alpha: -50%), + ), ), gradient: ( start: ( - light: white, - dark: palette(darkgray, 3), + "Start value of default button gradient", + ( + light: white, + dark: palette(darkgray, 3), + ), ), end: ( - light: palette(lightgray, 1), - dark: palette(darkgray, 4), + "End value of default button gradient", + ( + light: palette(lightgray, 1), + dark: palette(darkgray, 4), + ), ), ), hover: ( gradient: ( start: ( - light: palette(lightgray, 1), - dark: palette(darkgray, 2), + "Start value of default button gradient in hover state", + ( + light: palette(lightgray, 1), + dark: palette(darkgray, 2), + ), ), end: ( - light: palette(lightgray, 4), - dark: palette(darkgray, 3), + "End value of default button gradient in hover state", + ( + light: palette(lightgray, 4), + dark: palette(darkgray, 3), + ), ), ), border: ( - light: palette(lightgray, 8), - dark: palette(darkgray, 8), + "Border color of default button in hover state", + ( + light: palette(lightgray, 8), + dark: palette(darkgray, 8), + ), ), ), primary: ( gradient: ( start: ( - light: palette(blue, 4), - dark: color.scale(palette(blue, 6), $saturation: -10%), + "Start value of primary button gradient", + ( + light: palette(blue, 4), + dark: color.scale(palette(blue, 6), $saturation: -10%), + ), ), end: ( - light: palette(blue, 6), - dark: color.scale(palette(blue, 8), $saturation: -10%), + "End value of primary button gradient", + ( + light: palette(blue, 6), + dark: color.scale(palette(blue, 8), $saturation: -10%), + ), ), ), hover: ( gradient: ( start: ( - light: palette(blue, 3), - dark: color.scale(palette(blue, 5), $saturation: -10%), + "Start value of primary button gradient in hover state", + ( + light: palette(blue, 3), + dark: color.scale(palette(blue, 5), $saturation: -10%), + ), ), end: ( - light: palette(blue, 5), - dark: color.scale(palette(blue, 7), $saturation: -10%), + "End value of primary button gradient in hover state", + ( + light: palette(blue, 5), + dark: color.scale(palette(blue, 7), $saturation: -10%), + ), ), ), ), disabled: ( - light: palette(blue, 3), - dark: color.scale(palette(blue, 5), $saturation: -10%), + "Background of primary button in disabled state", + ( + light: palette(blue, 3), + dark: color.scale(palette(blue, 5), $saturation: -10%), + ), ), ), ), scrollbar: ( bg: ( default: ( - light: palette(lightgray, 5), - dark: palette(darkgray, 4), + "Background of scrollbar in idle state (Win/Lin only)", + ( + light: palette(lightgray, 5), + dark: palette(darkgray, 4), + ), ), hover: ( - light: palette(lightgray, 6), - dark: palette(darkgray, 3), + "Background of scrollbar in hover state (Win/Lin only)", + ( + light: palette(lightgray, 6), + dark: palette(darkgray, 3), + ), ), active: ( - light: palette(lightgray, 7), - dark: palette(darkgray, 1), + "Background of scrollbar in pressed state (Win/Lin only)", + ( + light: palette(lightgray, 7), + dark: palette(darkgray, 1), + ), ), ), ), shadow: ( default: ( - light: palette(lightgray, 8), - dark: palette(darkgray, 7), + "Default box-shadow color", + ( + light: palette(lightgray, 8), + dark: palette(darkgray, 7), + ), ), inset: ( - light: palette(lightgray, 9), - dark: palette(darkgray, 7), + "Inset box-shadow color", + ( + light: palette(lightgray, 9), + dark: palette(darkgray, 7), + ), ), subtle: ( - light: palette(lightgray, 5), - dark: palette(darkgray, 6), + "Box-shadow color with lower contrast against window background", + ( + light: palette(lightgray, 5), + dark: palette(darkgray, 6), + ), ), focus: ( - default: palette(indigo, 5), + "Box-shadow color for elements in focused state", + ( + default: palette(indigo, 5), + ), ), ), accent: ( card: ( - light: palette(blue, 4), - dark: palette(blue, 3), + "Accent color for cards", + ( + light: palette(blue, 4), + dark: palette(blue, 3), + ), ), note: ( - light: palette(green, 5), - dark: palette(green, 4), - ), - link: ( - light: palette(blue, 7), - dark: palette(blue, 2), + "Accent color for notes", + ( + light: palette(green, 5), + dark: palette(green, 4), + ), ), danger: ( - light: palette(red, 5), - dark: palette(red, 4), + "Saturated accent color to grab attention", + ( + light: palette(red, 5), + dark: palette(red, 4), + ), ), ), flag: ( 1: ( - light: palette(red, 5), - dark: palette(red, 4), + "Flag 1 (red)", + ( + light: palette(red, 5), + dark: palette(red, 4), + ), ), 2: ( - light: palette(orange, 4), - dark: palette(orange, 3), + "Flag 2 (orange)", + ( + light: palette(orange, 4), + dark: palette(orange, 3), + ), ), 3: ( - light: palette(green, 4), - dark: palette(green, 3), + "Flag 3 (green)", + ( + light: palette(green, 4), + dark: palette(green, 3), + ), ), 4: ( - light: palette(blue, 5), - dark: palette(blue, 4), + "Flag 4 (blue)", + ( + light: palette(blue, 5), + dark: palette(blue, 4), + ), ), 5: ( - light: palette(fuchsia, 4), - dark: palette(fuchsia, 3), + "Flag 5 (pink)", + ( + light: palette(fuchsia, 4), + dark: palette(fuchsia, 3), + ), ), 6: ( - light: palette(teal, 4), - dark: palette(teal, 3), + "Flag 6 (turquoise)", + ( + light: palette(teal, 4), + dark: palette(teal, 3), + ), ), 7: ( - light: palette(purple, 5), - dark: palette(purple, 4), + "Flag 7 (purple)", + ( + light: palette(purple, 5), + dark: palette(purple, 4), + ), ), ), state: ( new: ( - light: palette(blue, 5), - dark: palette(blue, 3), + "Accent color for new cards", + ( + light: palette(blue, 5), + dark: palette(blue, 3), + ), ), learn: ( - light: palette(red, 6), - dark: palette(red, 4), + "Accent color for cards in learning state", + ( + light: palette(red, 6), + dark: palette(red, 4), + ), ), review: ( - light: palette(green, 6), - dark: palette(green, 5), + "Accent color for cards in review state", + ( + light: palette(green, 6), + dark: palette(green, 5), + ), ), buried: ( - light: palette(amber, 5), - dark: palette(amber, 8), + "Accent color for buried cards", + ( + light: palette(amber, 5), + dark: palette(amber, 8), + ), ), suspended: ( - light: palette(yellow, 4), - dark: palette(yellow, 1), + "Accent color for suspended cards", + ( + light: palette(yellow, 4), + dark: palette(yellow, 1), + ), ), marked: ( - light: palette(indigo, 2), - dark: palette(purple, 5), + "Accent color for marked cards", + ( + light: palette(indigo, 2), + dark: palette(purple, 5), + ), ), ), highlight: ( bg: ( - light: palette(blue, 3), - dark: palette(blue, 4), + "Background color of highlighted items", + ( + light: palette(blue, 3), + dark: palette(blue, 4), + ), ), fg: ( - light: black, - dark: white, + "Foreground color of highlighted items", + ( + light: black, + dark: white, + ), ), ), - selection: ( + selected: ( bg: ( - light: color.scale(palette(lightgray, 5), $alpha: -50%), - dark: color.scale(palette(blue, 3), $alpha: -50%), + "Background color of selected text", + ( + light: color.scale(palette(lightgray, 5), $alpha: -50%), + dark: color.scale(palette(blue, 3), $alpha: -50%), + ), ), fg: ( - light: black, - dark: white, + "Foreground color of selected text", + ( + light: black, + dark: white, + ), ), ), ), diff --git a/sass/base.scss b/sass/base.scss index 711e02603..f5cbf4275 100644 --- a/sass/base.scss +++ b/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: ( diff --git a/sass/core.scss b/sass/core.scss index 9cd31d459..d6562ed17 100644 --- a/sass/core.scss +++ b/sass/core.scss @@ -16,6 +16,6 @@ body { } a { - color: var(--accent-link); + color: var(--fg-link); text-decoration: none; } diff --git a/ts/components/Select.svelte b/ts/components/Select.svelte index f505ef7c1..544a260ab 100644 --- a/ts/components/Select.svelte +++ b/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); } } diff --git a/ts/congrats/CongratsPage.svelte b/ts/congrats/CongratsPage.svelte index 1cb23b387..d35e15ec7 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(--accent-link); + color: var(--fg-link); text-decoration: none; } diff --git a/ts/graphs/CardCounts.svelte b/ts/graphs/CardCounts.svelte index c8db491e3..d123e1906 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(--accent-link); + color: var(--fg-link); text-decoration: underline; }