mirror of
https://github.com/ankitects/anki.git
synced 2025-09-24 16:56:36 -04:00
Add comments to variables
This commit is contained in:
Matthias Metelka
parent
2f2f00adc0
commit
17e9e707af
15 changed files with 354 additions and 177 deletions
|
|
@ -63,7 +63,7 @@ body {
|
|||
}
|
||||
|
||||
.filtered {
|
||||
color: color(accent-link) !important;
|
||||
color: color(fg-link) !important;
|
||||
}
|
||||
|
||||
.gears {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-link);
|
||||
color: var(--fg-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
405
sass/_vars.scss
405
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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: (
|
||||
|
|
|
|||
|
|
@ -16,6 +16,6 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-link);
|
||||
color: var(--fg-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue