GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 06:22:22 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Improve categorization of global colors

Browse source 
by renaming almost all of them and sorting them into separate maps.
This commit is contained in:
Matthias Metelka 2022-08-29 15:42:09 +02:00
parent 017c3938ef
commit f2d5abb95d
62 changed files with 381 additions and 361 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
qt/aqt/browser/sidebar/searchbar.py
View file

@ -30,7 +30,7 @@ class SidebarSearchBar(QLineEdit):
def setup_style(self) -> None:
styles = [
"padding: 2px",
f"border: 1px solid {theme_manager.color(colors.BORDER)}",
f"border: 1px solid {theme_manager.color(colors.BORDER_DEFAULT)}",
"border-radius: 5px",
]
@ -38,7 +38,7 @@ class SidebarSearchBar(QLineEdit):
"QLineEdit { %s }" % ";".join(styles)
+ f"""
QLineEdit:focus {{
border: 1px solid {theme_manager.color(colors.FOCUS_BORDER)};
border: 1px solid {theme_manager.color(colors.BORDER_FOCUS)};
}}
"""
)

16
qt/aqt/browser/sidebar/tree.py
View file

@ -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.BORDER)
border = theme_manager.color(colors.BORDER_DEFAULT)
styles = [
"padding: 3px",
"padding-right: 0px",
@ -304,7 +304,7 @@ class SidebarTreeView(QTreeView):
) -> None:
if self.current_search and (item := self.model().item_for_index(idx)):
if item.is_highlighted():
brush = QBrush(theme_manager.qcolor(colors.SUSPENDED_BG))
brush = QBrush(theme_manager.qcolor(colors.STATE_SUSPENDED))
painter.save()
painter.fillRect(options.rect, brush)
painter.restore()
@ -654,36 +654,36 @@ class SidebarTreeView(QTreeView):
type=SidebarItemType.CARD_STATE_ROOT,
)
type = SidebarItemType.CARD_STATE
colored_icon = ColoredIcon(path=icon, color=colors.DISABLED)
colored_icon = ColoredIcon(path=icon, color=colors.FG_DISABLED)
root.add_simple(
tr.actions_new(),
icon=colored_icon.with_color(colors.NEW_COUNT),
icon=colored_icon.with_color(colors.STATE_NEW),
type=type,
search_node=SearchNode(card_state=SearchNode.CARD_STATE_NEW),
)
root.add_simple(
name=tr.scheduling_learning(),
icon=colored_icon.with_color(colors.LEARN_COUNT),
icon=colored_icon.with_color(colors.STATE_LEARN),
type=type,
search_node=SearchNode(card_state=SearchNode.CARD_STATE_LEARN),
)
root.add_simple(
name=tr.scheduling_review(),
icon=colored_icon.with_color(colors.REVIEW_COUNT),
icon=colored_icon.with_color(colors.STATE_REVIEW),
type=type,
search_node=SearchNode(card_state=SearchNode.CARD_STATE_REVIEW),
)
root.add_simple(
name=tr.browsing_suspended(),
icon=colored_icon.with_color(colors.SUSPENDED_FG),
icon=colored_icon.with_color(colors.STATE_SUSPENDED),
type=type,
search_node=SearchNode(card_state=SearchNode.CARD_STATE_SUSPENDED),
)
root.add_simple(
name=tr.browsing_buried(),
icon=colored_icon.with_color(colors.BURIED_FG),
icon=colored_icon.with_color(colors.STATE_BURIED),
type=type,
search_node=SearchNode(card_state=SearchNode.CARD_STATE_BURIED),
)

32
qt/aqt/browser/table/__init__.py
View file

@ -13,6 +13,7 @@ from anki.collection import BrowserColumns as Columns
from anki.collection import BrowserRow
from anki.notes import NoteId
from aqt import colors
from aqt.qt import QColor
from aqt.utils import tr
Column = Columns.Column
@ -76,24 +77,37 @@ class CellRow:
def backend_color_to_aqt_color(color: BrowserRow.Color.V) -> tuple[str, str] | None:
temp_color = None
if color == BrowserRow.COLOR_MARKED:
return colors.MARKED_BG
temp_color = colors.STATE_MARKED
if color == BrowserRow.COLOR_SUSPENDED:
return colors.SUSPENDED_BG
temp_color = colors.STATE_SUSPENDED
if color == BrowserRow.COLOR_FLAG_RED:
return colors.FLAG1_BG
temp_color = colors.FLAG_1
if color == BrowserRow.COLOR_FLAG_ORANGE:
return colors.FLAG2_BG
temp_color = colors.FLAG_2
if color == BrowserRow.COLOR_FLAG_GREEN:
return colors.FLAG3_BG
temp_color = colors.FLAG_3
if color == BrowserRow.COLOR_FLAG_BLUE:
return colors.FLAG4_BG
temp_color = colors.FLAG_4
if color == BrowserRow.COLOR_FLAG_PINK:
return colors.FLAG5_BG
temp_color = colors.FLAG_5
if color == BrowserRow.COLOR_FLAG_TURQUOISE:
return colors.FLAG6_BG
temp_color = colors.FLAG_6
if color == BrowserRow.COLOR_FLAG_PURPLE:
return colors.FLAG7_BG
temp_color = colors.FLAG_7
return adjusted_bg_color(temp_color)
def adjusted_bg_color(color: tuple[str, str]) -> tuple[str, str]:
if color:
return (
QColor(color[0]).lighter(150).name(),
QColor(color[1]).darker(150).name(),
)
else:
return None

2
qt/aqt/browser/table/table.py
View file

@ -375,7 +375,7 @@ class Table:
)
elif theme_manager.macos_dark_mode():
self._view.setStyleSheet(
f"QTableView {{ gridline-color: {colors.FRAME_BG} }}"
f"QTableView {{ gridline-color: {colors.CANVAS_INSET} }}"
)
else:
self._view.setStyleSheet("")

14
qt/aqt/data/web/css/deckbrowser.scss
View file

@ -4,7 +4,7 @@
@use "sass/card-counts";
a.deck {
color: var(--text-fg);
color: var(--fg-default);
text-decoration: none;
min-width: 5em;
display: inline-block;
@ -15,7 +15,7 @@ a.deck:hover {
}
tr.deck td {
border-bottom: 1px solid var(--faint-border);
border-bottom: 1px solid var(--border-subtle);
}
tr.top-level-drag-row td {
@ -27,7 +27,7 @@ td {
}
tr.drag-hover td {
border-bottom: 1px solid var(--border);
border-bottom: 1px solid var(--border-default);
}
body {
@ -36,7 +36,7 @@ body {
}
.current {
background-color: var(--frame-bg);
background-color: var(--canvas-outset);
}
.decktd {
@ -55,14 +55,14 @@ body {
}
.collapse {
color: var(--text-fg);
color: var(--fg-default);
text-decoration: none;
display: inline-block;
width: 1em;
}
.filtered {
color: var(--link) !important;
color: var(--accent-link) !important;
}
.gears {
@ -79,7 +79,7 @@ body {
}
.callout {
background: var(--border);
background: var(--border-default);
padding: 1em;
margin: 1em;

2
qt/aqt/data/web/css/overview.scss
View file

@ -13,7 +13,7 @@ h3 {
.descfont {
padding: 1em;
color: var(--slightly-grey-text);
color: var(--fg-subtle);
}
.description {

4
qt/aqt/data/web/css/reviewer-bottom.scss
View file

@ -73,13 +73,13 @@ button {
}
#outer {
border-top: 1px solid var(--border);
border-top: 1px solid var(--border-default);
/* Better compatibility with graphics pad/touchscreen */
-webkit-user-select: none;
}
.nightMode {
#outer {
border-top-color: var(--faint-border);
border-top-color: var(--border-subtle);
}
}

12
qt/aqt/data/web/css/toolbar.scss
View file

@ -4,7 +4,7 @@
#header {
padding: 3px;
font-weight: bold;
border-bottom: 1px solid var(--border);
border-bottom: 1px solid var(--border-default);
}
.tdcenter {
@ -26,7 +26,7 @@ body {
padding-right: 12px;
padding-left: 12px;
text-decoration: none;
color: var(--text-fg);
color: var(--fg-default);
}
.hitem:hover {
@ -38,11 +38,11 @@ body {
}
.nightMode #header {
border-bottom-color: var(--faint-border);
border-bottom-color: var(--border-subtle);
}
.isMac.nightMode #header {
border-bottom-color: var(--frame-bg);
border-bottom-color: var(--canvas-outset);
}
@keyframes spin {
@ -71,9 +71,9 @@ body {
}
.normal-sync {
color: var(--new-count);
color: var(--state-new);
}
.full-sync {
color: var(--learn-count);
color: var(--state-learn);
}

6
qt/aqt/data/web/css/webview.scss
View file

@ -12,15 +12,15 @@
}
body {
color: var(--text-fg);
background: var(--window-bg);
color: var(--fg-default);
background: var(--canvas-default);
transition: opacity 0.5s ease-out;
margin: 2em;
overscroll-behavior: none;
}
a {
color: var(--link);
color: var(--accent-link);
text-decoration: none;
}

2
qt/aqt/editor.py
View file

@ -667,7 +667,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
self.tags = aqt.tagedit.TagEdit(self.widget)
qconnect(self.tags.lostFocus, self.on_tag_focus_lost)
self.tags.setToolTip(shortcut(tr.editing_jump_to_tags_with_ctrlandshiftandt()))
border = theme_manager.color(colors.BORDER)
border = theme_manager.color(colors.BORDER_DEFAULT)
self.tags.setStyleSheet(f"border: 1px solid {border}")
tb.addWidget(self.tags, 1, 1)
g.setLayout(tb)

4
qt/aqt/filtered_deck.py
View file

@ -84,8 +84,8 @@ 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.color(colors.LINK)
grey = theme_manager.color(colors.DISABLED)
blue = theme_manager.color(colors.ACCENT_LINK)
grey = theme_manager.color(colors.FG_DISABLED)
self.setStyleSheet(
f"""QPushButton[label] {{ padding: 0; border: 0 }}
QPushButton[label]:hover {{ text-decoration: underline }}

16
qt/aqt/flags.py
View file

@ -61,55 +61,55 @@ class FlagManager:
def _load_flags(self) -> None:
labels = cast(dict[str, str], self.mw.col.get_config("flagLabels", {}))
icon = ColoredIcon(path="icons:flag-variant.svg", color=colors.DISABLED)
icon = ColoredIcon(path="icons:flag-variant.svg", color=colors.FG_DISABLED)
self._flags = [
Flag(
1,
labels["1"] if "1" in labels else tr.actions_flag_red(),
icon.with_color(colors.FLAG1_FG),
icon.with_color(colors.FLAG_1),
SearchNode(flag=SearchNode.FLAG_RED),
"actionRed_Flag",
),
Flag(
2,
labels["2"] if "2" in labels else tr.actions_flag_orange(),
icon.with_color(colors.FLAG2_FG),
icon.with_color(colors.FLAG_2),
SearchNode(flag=SearchNode.FLAG_ORANGE),
"actionOrange_Flag",
),
Flag(
3,
labels["3"] if "3" in labels else tr.actions_flag_green(),
icon.with_color(colors.FLAG3_FG),
icon.with_color(colors.FLAG_3),
SearchNode(flag=SearchNode.FLAG_GREEN),
"actionGreen_Flag",
),
Flag(
4,
labels["4"] if "4" in labels else tr.actions_flag_blue(),
icon.with_color(colors.FLAG4_FG),
icon.with_color(colors.FLAG_4),
SearchNode(flag=SearchNode.FLAG_BLUE),
"actionBlue_Flag",
),
Flag(
5,
labels["5"] if "5" in labels else tr.actions_flag_pink(),
icon.with_color(colors.FLAG5_FG),
icon.with_color(colors.FLAG_5),
SearchNode(flag=SearchNode.FLAG_PINK),
"actionPink_Flag",
),
Flag(
6,
labels["6"] if "6" in labels else tr.actions_flag_turquoise(),
icon.with_color(colors.FLAG6_FG),
icon.with_color(colors.FLAG_6),
SearchNode(flag=SearchNode.FLAG_TURQUOISE),
"actionTurquoise_Flag",
),
Flag(
7,
labels["7"] if "7" in labels else tr.actions_flag_purple(),
icon.with_color(colors.FLAG7_FG),
icon.with_color(colors.FLAG_7),
SearchNode(flag=SearchNode.FLAG_PURPLE),
"actionPurple_Flag",
),

8
qt/aqt/switch.py
View file

@ -19,8 +19,8 @@ class Switch(QAbstractButton):
radius: int = 10,
left_label: str = "",
right_label: str = "",
left_color: tuple[str, str] = colors.CARD_VIEW_BG,
right_color: tuple[str, str] = colors.NOTE_VIEW_BG,
left_color: tuple[str, str] = colors.ACCENT_CARD,
right_color: tuple[str, str] = colors.ACCENT_NOTE,
parent: QWidget = None,
) -> None:
super().__init__(parent=parent)
@ -103,12 +103,12 @@ class Switch(QAbstractButton):
if theme_manager.night_mode:
color = QColor(theme_manager.DARK_MODE_BUTTON_BG_MIDPOINT)
else:
color = theme_manager.qcolor(colors.FRAME_BG)
color = theme_manager.qcolor(colors.CANVAS_INSET)
painter.setBrush(QBrush(color))
painter.drawEllipse(self._current_knob_rectangle())
def _paint_label(self, painter: QPainter) -> None:
painter.setPen(theme_manager.qcolor(colors.TEXT_FG))
painter.setPen(theme_manager.qcolor(colors.FG_DEFAULT))
font = painter.font()
font.setPixelSize(int(1.2 * self._knob_radius))
painter.setFont(font)

50
qt/aqt/theme.py
View file

@ -193,15 +193,15 @@ class ThemeManager:
# also set for border to apply
buf += f"""
QMenuBar {{
border-bottom: 1px solid {self.color(colors.BORDER)};
background: {self.color(colors.WINDOW_BG) if self.night_mode else "white"};
border-bottom: 1px solid {self.color(colors.BORDER_DEFAULT)};
background: {self.color(colors.CANVAS_DEFAULT) if self.night_mode else "white"};
}}
"""
# qt bug? setting the above changes the browser sidebar
# to white as well, so set it back
buf += f"""
QTreeWidget {{
background: {self.color(colors.WINDOW_BG)};
background: {self.color(colors.CANVAS_DEFAULT)};
}}
"""
@ -235,10 +235,10 @@ QScrollBar::sub-line {{
QTabWidget {{ background-color: {}; }}
""".format(
self.color(colors.WINDOW_BG),
self.color(colors.CANVAS_DEFAULT),
# fushion-button-hover-bg
"#656565",
self.color(colors.WINDOW_BG),
self.color(colors.CANVAS_DEFAULT),
)
# allow addons to modify the styling
@ -252,7 +252,7 @@ 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)
QPalette.ColorRole.Window, self.qcolor(colors.CANVAS_DEFAULT)
)
app.setPalette(self.default_palette)
return
@ -262,11 +262,11 @@ QTabWidget {{ background-color: {}; }}
palette = QPalette()
text_fg = self.qcolor(colors.TEXT_FG)
palette.setColor(QPalette.ColorRole.WindowText, text_fg)
palette.setColor(QPalette.ColorRole.ToolTipText, text_fg)
palette.setColor(QPalette.ColorRole.Text, text_fg)
palette.setColor(QPalette.ColorRole.ButtonText, text_fg)
TEXT = self.qcolor(colors.FG_DEFAULT)
palette.setColor(QPalette.ColorRole.WindowText, TEXT)
palette.setColor(QPalette.ColorRole.ToolTipText, TEXT)
palette.setColor(QPalette.ColorRole.Text, TEXT)
palette.setColor(QPalette.ColorRole.ButtonText, TEXT)
hlbg = self.qcolor(colors.HIGHLIGHT_BG)
hlbg.setAlpha(64)
@ -275,21 +275,21 @@ QTabWidget {{ background-color: {}; }}
)
palette.setColor(QPalette.ColorRole.Highlight, hlbg)
window_bg = self.qcolor(colors.WINDOW_BG)
palette.setColor(QPalette.ColorRole.Window, window_bg)
palette.setColor(QPalette.ColorRole.AlternateBase, window_bg)
CANVAS_DEFAULT = self.qcolor(colors.CANVAS_DEFAULT)
palette.setColor(QPalette.ColorRole.Window, CANVAS_DEFAULT)
palette.setColor(QPalette.ColorRole.AlternateBase, CANVAS_DEFAULT)
palette.setColor(QPalette.ColorRole.Button, QColor("#454545"))
frame_bg = self.qcolor(colors.FRAME_BG)
palette.setColor(QPalette.ColorRole.Base, frame_bg)
palette.setColor(QPalette.ColorRole.ToolTipBase, frame_bg)
CANVAS_INSET = self.qcolor(colors.CANVAS_INSET)
palette.setColor(QPalette.ColorRole.Base, CANVAS_INSET)
palette.setColor(QPalette.ColorRole.ToolTipBase, CANVAS_INSET)
palette.setColor(
QPalette.ColorRole.PlaceholderText, self.qcolor(colors.SLIGHTLY_GREY_TEXT)
QPalette.ColorRole.PlaceholderText, self.qcolor(colors.FG_SUBTLE)
)
disabled_color = self.qcolor(colors.DISABLED)
disabled_color = self.qcolor(colors.FG_DISABLED)
palette.setColor(
QPalette.ColorGroup.Disabled, QPalette.ColorRole.Text, disabled_color
)
@ -302,7 +302,7 @@ QTabWidget {{ background-color: {}; }}
disabled_color,
)
palette.setColor(QPalette.ColorRole.Link, self.qcolor(colors.LINK))
palette.setColor(QPalette.ColorRole.Link, self.qcolor(colors.ACCENT_LINK))
palette.setColor(QPalette.ColorRole.BrightText, Qt.GlobalColor.red)
@ -311,11 +311,11 @@ QTabWidget {{ background-color: {}; }}
def _update_stat_colors(self) -> None:
import anki.stats as s
s.colLearn = self.color(colors.NEW_COUNT)
s.colRelearn = self.color(colors.LEARN_COUNT)
s.colCram = self.color(colors.SUSPENDED_BG)
s.colSusp = self.color(colors.SUSPENDED_BG)
s.colMature = self.color(colors.REVIEW_COUNT)
s.colLearn = self.color(colors.STATE_NEW)
s.colRelearn = self.color(colors.STATE_LEARN)
s.colCram = self.color(colors.STATE_SUSPENDED)
s.colSusp = self.color(colors.STATE_SUSPENDED)
s.colMature = self.color(colors.STATE_REVIEW)
s._legacy_nightmode = self._night_mode_preference

14
qt/aqt/webview.py
View file

@ -233,7 +233,9 @@ class AnkiWebView(QWebEngineView):
self.set_title(title)
self._page = AnkiWebPage(self._onBridgeCmd)
# reduce flicker
self._page.setBackgroundColor(QColor(theme_manager.color(colors.WINDOW_BG)))
self._page.setBackgroundColor(
QColor(theme_manager.color(colors.CANVAS_DEFAULT))
)
# in new code, use .set_bridge_command() instead of setting this directly
self.onBridgeCmd: Callable[[str], Any] = self.defaultOnBridgeCmd
@ -449,11 +451,11 @@ div[contenteditable="true"]:focus {{
zoom = self.app_zoom_factor()
return f"""
body {{ zoom: {zoom}; background-color: var(--window-bg); }}
body {{ zoom: {zoom}; background-color: var(--canvas-default); }}
html {{ {font} }}
{button_style}
:root {{ --window-bg: {colors.WINDOW_BG[0]} }}
:root[class*=night-mode] {{ --window-bg: {colors.WINDOW_BG[1]} }}
:root {{ --canvas-default: {colors.CANVAS_DEFAULT[0]} }}
:root[class*=night-mode] {{ --canvas-default: {colors.CANVAS_DEFAULT[1]} }}
"""
def stdHtml(
@ -698,9 +700,9 @@ html {{ {font} }}
def on_theme_did_change(self) -> None:
# avoid flashes if page reloaded
self._page.setBackgroundColor(
QColor(colors.WINDOW_BG[1])
QColor(colors.CANVAS_DEFAULT[1])
if theme_manager.night_mode
else QColor(colors.WINDOW_BG[0])
else QColor(colors.CANVAS_DEFAULT[0])
)
# update night-mode class, and legacy nightMode/night-mode body classes
self.eval(

18
qt/tools/extract_sass_vars.py
View file

@ -48,20 +48,22 @@ for line in open(vars_scss):
if line == "colors: (":
reached_colors = True
continue
if line == "),":
if "_" in current_key:
current_key = re.sub(r"_.+?$", "", current_key)
else:
current_key = ""
if m := re.match(r"^([^$]+): \(", line):
if current_key == "":
current_key = m.group(1)
if reached_colors:
colors[current_key] = {}
else:
props[current_key] = {}
current_key = "_".join([current_key, m.group(1)])
continue
if reached_colors:
line = re.sub(
r"get\(\$color, (.+), (\d)\)",
r"color\((.+), (\d)\)",
lambda m: palette[m.group(1)][m.group(2)],
line,
)
@ -71,8 +73,12 @@ for line in open(vars_scss):
val = m.group(2)
if reached_colors:
if not current_key in colors:
colors[current_key] = {}
colors[current_key][theme] = val
else:
if not current_key in props:
props[current_key] = {}
props[current_key][theme] = val

6
sass/_button-mixins.scss
View file

@ -21,9 +21,9 @@
$btn-base-color-day: white;
@mixin btn-day-base {
color: var(--text-fg);
color: var(--fg-default);
background-color: $btn-base-color-day;
border-color: var(--border) !important;
border-color: var(--border-default) !important;
}
@mixin btn-day(
@ -70,7 +70,7 @@ $btn-base-color-day: white;
$btn-base-color-night: fusion-vars.$button-border;
@mixin btn-night-base {
color: var(--text-fg);
color: var(--fg-default);
background: linear-gradient(
0deg,
fusion-vars.$button-gradient-start 0%,

10
sass/_colors.scss
View file

@ -1,13 +1,11 @@
/* 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
*
* Anki Color Palette
* custom gray, rest from Tailwind CSS v3 palette
*
* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
$color: (
$colors: (
gray: (
0: #FFFFFF,
1: #F6F6F6,

25
sass/_functions.scss Normal file
View file

@ -0,0 +1,25 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "sass:map";
@use "colors" as *;
@function color($key, $shade) {
$color: map.get($colors, $key);
@return map.get($color, $shade);
}
@function vars-from-map($map, $theme, $name: "-", $output: ()) {
@each $key, $value in $map {
@if $key == $theme {
@return map.set($output, $name, map.get($map, $key));
}
@if type-of($value) == "map" {
$output: map-merge(
$output,
vars-from-map($value, $theme, #{$name}-#{$key}, $output)
);
}
}
@return $output;
}

285
sass/_vars.scss
View file

@ -1,14 +1,8 @@
/* Copyright: Ankitects Pty Ltd and contributors
* 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;
}
@use "sass:map";
@use "functions" as *;
$vars: (
props: (
@ -17,188 +11,169 @@ $vars: (
),
),
colors: (
text-fg: (
light: get($color, gray, 9),
dark: get($color, gray, 1),
canvas: (
default: (
light: color(gray, 1),
dark: color(gray, 7),
),
window-bg: (
light: get($color, gray, 1),
dark: get($color, gray, 7),
outset: (
light: color(gray, 0),
dark: color(gray, 5),
),
inset: (
light: color(gray, 1),
dark: color(gray, 8),
),
overlay: (
light: color(gray, 0),
dark: color(gray, 9),
),
frame-bg: (
light: get($color, gray, 0),
dark: get($color, gray, 5),
),
border: (
light: get($color, gray, 3),
dark: get($color, gray, 8),
default: (
light: color(gray, 3),
dark: color(gray, 8),
),
faint-border: (
light: get($color, gray, 2),
dark: get($color, gray, 7),
subtle: (
light: color(gray, 2),
dark: color(gray, 7),
),
slightly-grey-text: (
light: get($color, gray, 7),
dark: get($color, gray, 3),
focus: (
light: color(indigo, 6),
dark: color(indigo, 5),
),
),
fg: (
default: (
light: color(gray, 9),
dark: color(gray, 1),
),
subtle: (
light: color(gray, 7),
dark: color(gray, 3),
),
disabled: (
light: get($color, gray, 5),
dark: get($color, gray, 5),
light: color(gray, 5),
dark: color(gray, 5),
),
faint: (
light: color(gray, 2),
dark: color(gray, 8),
),
),
accent: (
card: (
light: color(blue, 5),
dark: color(blue, 4),
),
note: (
light: color(green, 5),
dark: color(green, 4),
),
link: (
light: get($color, blue, 9),
dark: get($color, blue, 2),
light: color(blue, 9),
dark: color(blue, 2),
),
review-count: (
light: get($color, green, 7),
dark: get($color, green, 5),
danger: (
light: color(red, 5),
dark: color(red, 4),
),
new-count: (
light: get($color, blue, 9),
dark: get($color, blue, 3),
),
learn-count: (
light: get($color, orange, 7),
dark: get($color, red, 5),
flag: (
1: (
light: color(red, 6),
dark: color(red, 4),
),
zero-count: (
light: get($color, gray, 2),
dark: get($color, gray, 8),
2: (
light: color(orange, 5),
dark: color(orange, 4),
),
highlight-bg: (
light: get($color, cyan, 2),
dark: get($color, cyan, 2),
3: (
light: color(green, 5),
dark: color(green, 4),
),
highlight-fg: (
4: (
light: color(blue, 6),
dark: color(blue, 5),
),
5: (
light: color(fuchsia, 5),
dark: color(fuchsia, 4),
),
6: (
light: color(teal, 5),
dark: color(teal, 4),
),
7: (
light: color(purple, 6),
dark: color(purple, 5),
),
),
state: (
new: (
light: color(blue, 5),
dark: color(blue, 3),
),
learn: (
light: color(red, 6),
dark: color(red, 4),
),
review: (
light: color(green, 6),
dark: color(green, 5),
),
buried: (
light: color(amber, 5),
dark: color(amber, 8),
),
suspended: (
light: color(yellow, 4),
dark: color(yellow, 1),
),
marked: (
light: color(indigo, 2),
dark: color(purple, 5),
),
),
highlight: (
bg: (
light: color(cyan, 2),
dark: color(cyan, 2),
),
fg: (
light: black,
dark: white,
),
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),
),
code-bg: (
light: get($color, gray, 0),
dark: get($color, gray, 7),
),
),
);
:root {
@each $name, $map in map-get($vars, colors) {
--#{$name}: #{map-get($map, light)};
$colors: map.get($vars, colors);
@each $name, $val in vars-from-map($colors, light) {
#{$name}: #{$val};
}
color-scheme: light;
&.night-mode {
@each $name, $map in get($vars, colors) {
--#{$name}: #{map-get($map, dark)};
@each $name, $val in vars-from-map($colors, dark) {
#{$name}: #{$val};
}
color-scheme: dark;
}
}
:root {
@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};
$props: map.get($vars, props);
@each $name, $val in vars-from-map($props, default) {
#{$name}: #{$val};
}
@each $name, $val in vars-from-map($props, light) {
#{$name}: #{$val};
}
&.night-mode {
@each $name, $map in map-get($vars, props) {
$val: map-get($map, dark);
@if $val {
--#{$name}: #{$val};
}
@each $name, $val in vars-from-map($props, dark) {
#{$name}: #{$val};
}
}
}

8
sass/base.scss
View file

@ -1,10 +1,10 @@
@use "vars";
@use "scrollbar";
$body-color: var(--text-fg);
$body-bg: var(--window-bg);
$body-color: var(--fg-default);
$body-bg: var(--canvas-default);
$link-hover-color: var(--link);
$link-hover-color: var(--accent-link);
$link-hover-decoration: none;
$utilities: (
@ -72,5 +72,5 @@ samp {
}
.night-mode .form-select:disabled {
background-color: var(--disabled);
background-color: var(--fg-disabled);
}

6
sass/bootstrap-dark.scss vendored
View file

@ -7,11 +7,11 @@
@mixin night-mode {
input,
select {
background-color: var(--frame-bg);
border-color: var(--border);
background-color: var(--canvas-outset);
border-color: var(--border-default);
&:focus {
background-color: var(--window-bg);
background-color: var(--canvas-default);
}
}
}

4
sass/buttons.scss
View file

@ -27,14 +27,14 @@
-webkit-appearance: none;
border-radius: 5px;
padding: 5px;
border: 1px solid var(--border);
border: 1px solid var(--border-default);
}
}
.nightMode {
button {
-webkit-appearance: none;
color: var(--text-fg);
color: var(--fg-default);
/* match the fusion button gradient */
background: linear-gradient(

10
sass/card-counts.scss
View file

@ -1,21 +1,21 @@
.review-count {
color: var(--review-count);
color: var(--state-review);
}
.new-count {
color: var(--new-count);
color: var(--state-new);
}
.learn-count {
color: var(--learn-count);
color: var(--state-learn);
}
.zero-count {
color: var(--zero-count);
color: var(--fg-faint);
}
.bury-count {
color: var(--disabled);
color: var(--fg-disabled);
font-weight: bold;
margin-inline-start: 2px;

6
sass/core.scss
View file

@ -8,14 +8,14 @@
}
body {
color: var(--text-fg);
background: var(--window-bg);
color: var(--fg-default);
background: var(--canvas-default);
margin: 1em;
transition: opacity 0.5s ease-out;
overscroll-behavior: none;
}
a {
color: var(--link);
color: var(--accent-link);
text-decoration: none;
}

6
sass/night-mode.scss
View file

@ -2,10 +2,10 @@
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@mixin input {
background-color: var(--frame-bg);
border-color: var(--border);
background-color: var(--canvas-outset);
border-color: var(--border-default);
&:focus {
background-color: var(--window-bg);
background-color: var(--canvas-default);
}
}

4
sass/scrollbar.scss
View file

@ -6,7 +6,7 @@
@mixin night-mode {
::-webkit-scrollbar {
background-color: var(--window-bg);
background-color: var(--canvas-default);
&:horizontal {
height: 12px;
@ -31,6 +31,6 @@
}
::-webkit-scrollbar-corner {
background-color: var(--window-bg);
background-color: var(--canvas-default);
}
}

6
ts/card-info/Revlog.svelte
View file

@ -177,16 +177,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
.revlog-learn {
color: var(--new-count);
color: var(--state-new);
}
.revlog-review {
color: var(--review-count);
color: var(--state-review);
}
.revlog-relearn,
.revlog-ease1 {
color: var(--learn-count);
color: var(--state-learn);
}
@media only screen and (max-device-width: 480px) and (orientation: portrait) {

2
ts/change-notetype/StickyHeader.svelte
View file

@ -28,7 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<StickyContainer
--sticky-top={ctx === MapContext.Template ? "-1px" : "0"}
--sticky-border="var(--border)"
--sticky-border="var(--border-default)"
--sticky-borders="0px 0 1px"
>
<h1>

4
ts/components/ButtonDropdown.svelte
View file

@ -31,8 +31,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
min-width: 0;
padding: calc(var(--buttons-size) / 10) 0;
background-color: var(--window-bg);
border-color: var(--border);
background-color: var(--canvas-default);
border-color: var(--border-default);
:global(.btn-group) {
position: static;

4
ts/components/DropdownMenu.svelte
View file

@ -32,8 +32,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss">
.dropdown-menu {
border-radius: 5px;
background-color: var(--frame-bg);
border-color: var(--border);
background-color: var(--canvas-outset);
border-color: var(--border-default);
min-width: 1rem;
}
</style>

4
ts/components/Popover.svelte
View file

@ -15,13 +15,13 @@ Alternative to DropdownMenu that avoids Bootstrap
<style lang="scss">
.popover {
border-radius: 5px;
background-color: var(--frame-bg);
background-color: var(--canvas-outset);
min-width: 1rem;
max-width: 95vw;
padding: 0.5rem 0;
font-size: 1rem;
color: var(--text-fg);
color: var(--fg-default);
/* outer border */
border: 1px solid #b6b6b6;

2
ts/components/SelectButton.svelte
View file

@ -61,7 +61,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
&.btn-day {
/* Hide default arrow for consistency */
background: var(--frame-bg);
background: var(--canvas-outset);
}
}

2
ts/components/SelectOption.svelte
View file

@ -13,6 +13,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss">
.select-option {
background-color: var(--frame-bg);
background-color: var(--canvas-outset);
}
</style>

4
ts/components/StickyContainer.svelte
View file

@ -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);
}
</style>

4
ts/components/Switch.svelte
View file

@ -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);
}
</style>

2
ts/components/WithFloating.svelte
View file

@ -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;

4
ts/congrats/CongratsPage.svelte
View file

@ -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;
}
</style>

4
ts/deck-options/CardStateCustomizer.svelte
View file

@ -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;

4
ts/deck-options/Switch.svelte
View file

@ -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);
}
</style>

10
ts/deck-options/TabbedValue.svelte
View file

@ -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);
}
</style>

4
ts/deck-options/TextInputModal.svelte
View file

@ -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 {

2
ts/deck-options/TitledContainer.svelte
View file

@ -16,6 +16,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss">
h1 {
border-bottom: 1px solid var(--border);
border-bottom: 1px solid var(--border-default);
}
</style>

8
ts/editor/EditingArea.svelte
View file

@ -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);
}
}
}

2
ts/editor/EditorField.svelte
View file

@ -109,6 +109,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss">
.editor-field {
position: relative;
--border-color: var(--border);
--border-color: var(--border-default);
}
</style>

6
ts/editor/NoteEditor.svelte
View file

@ -314,7 +314,7 @@ the AddCards dialog) should be implemented in the user of this component.
{#if hint}
<Absolute bottom right --margin="10px">
<Notification>
<Badge --badge-color="tomato" --icon-align="top"
<Badge --badge-color="var(--accent-danger)" --icon-align="top"
>{@html alertIcon}</Badge
>
<span>{@html hint}</span>
@ -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)"}
>
<svelte:fragment slot="field-label">
<LabelContainer

4
ts/editor/Notification.svelte
View file

@ -12,10 +12,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss">
.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;
}

4
ts/editor/legacy.scss
View file

@ -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;

2
ts/editor/mathjax-overlay/MathjaxEditor.svelte
View file

@ -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);
}
}
</style>

6
ts/editor/mathjax-overlay/MathjaxMenu.svelte
View file

@ -74,18 +74,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss">
.mathjax-menu :global(.dropdown-menu) {
border-color: var(--border);
border-color: var(--border-default);
}
.light-theme {
:global(.dropdown-menu) {
background-color: var(--window-bg);
background-color: var(--canvas-default);
}
:global(.CodeMirror) {
border-width: 1px 0;
border-style: solid;
border-color: var(--border);
border-color: var(--border-default);
}
}
</style>

4
ts/editor/plain-text-input/PlainTextInput.svelte
View file

@ -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;

2
ts/graphs/CardCounts.svelte
View file

@ -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;
}
</style>

2
ts/graphs/NoDataOverlay.svelte
View file

@ -19,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss">
.no-data {
rect {
fill: var(--window-bg);
fill: var(--canvas-default);
}
text {

4
ts/graphs/RangeBox.svelte
View file

@ -117,8 +117,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
z-index: 1;
top: 0;
width: 100%;
color: var(--text-fg);
background: var(--window-bg);
color: var(--fg-default);
background: var(--canvas-default);
padding: 0.5em;
@media print {

4
ts/graphs/Tooltip.svelte
View file

@ -51,8 +51,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
color: var(--text-fg);
background: var(--tooltip-bg);
color: var(--fg-default);
background: var(--canvas-overlay);
:global(table) {
border-spacing: 1em 0;

2
ts/import-csv/Header.svelte
View file

@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let heading: string;
</script>
<StickyContainer --sticky-border="var(--border)" --sticky-borders="0px 0 1px">
<StickyContainer --sticky-border="var(--border-default)" --sticky-borders="0px 0 1px">
<h1>
{heading}
</h1>

6
ts/import-csv/Preview.svelte
View file

@ -42,19 +42,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
td {
text-overflow: ellipsis;
overflow: hidden;
border: 1px solid var(--faint-border);
border: 1px solid var(--border-subtle);
padding: 0.25rem 0.5rem;
max-width: 15em;
}
th {
background: var(--border);
background: var(--border-default);
text-align: center;
}
tr {
&:nth-child(even) {
background: var(--frame-bg);
background: var(--canvas-outset);
}
}

4
ts/import-csv/StickyFooter.svelte
View file

@ -50,9 +50,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
margin: 0;
padding: 0.25rem;
background: var(--window-bg);
background: var(--canvas-default);
border-style: solid none none;
border-color: var(--border);
border-color: var(--border-default);
border-width: thin;
}
</style>

2
ts/reviewer/index.ts
View file

@ -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 {

6
ts/reviewer/reviewer.scss
View file

@ -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 {

6
ts/tag-editor/Tag.svelte
View file

@ -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);
}
}

2
ts/tag-editor/TagInput.svelte
View file

@ -265,7 +265,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss">
.tag-input {
width: 100%;
color: var(--text-fg);
color: var(--fg-default);
background: none;
resize: none;
appearance: none;