mirror of
https://github.com/ankitects/anki.git
synced 2025-09-18 14:02:21 -04:00
8142176f84
* Remove --medium-border variable * Implement color palette using Sass maps I hand-picked the gray tones, the other colors are from the Tailwind CSS v3 palette. Significant changes: - light theme is brighter - dark theme is darker - borders are softer I also deleted some platform- and night-mode-specific code. * Use custom colors for note view switch * Use same placeholder color for all inputs * Skew color palette for more dark values by removing gray[3], which wasn't used anywhere. Slight adjustments were made to the darker tones. * Adjust frame- window- and border colors * Give deck browser entries --frame-bg as background color * Define styling for QComboBox and QLineEdit globally * Experiment with CSS filter for inline-colors Inside darker inputs, some colors like dark blue will be hard to read, so we could try to improve text-color contrast with global adjustments depending on the theme. * Use different map structure for _vars.scss after @hgiesel's idea: https://github.com/ankitects/anki/pull/2016#discussion_r947087871 * Move custom QLineEdit styles out of searchbar.py * Merge branch 'main' into color-palette * Revert QComboBox stylesheet override * Align gray color palette more with macOS * Adjust light theme * Use --slightly-grey-text for options tab color * Replace gray tones with more neutral values * Improve categorization of global colors by renaming almost all of them and sorting them into separate maps. * Saturate highlight-bg in light theme * Tweak gray tones * Adjust box-shadow of EditingArea to make fields look inset * Add Sass functions to access color palette and semantic variables in response to https://github.com/ankitects/anki/pull/2016#issuecomment-1220571076 * Showcase use of access functions in several locations @hgiesel in buttons.scss I access the color palette directly. Is this what you meant by "... keep it local to the component, and possibly make it global at a later time ..."? * Fix focus box shadow transition and remove default shadow for a cleaner look I couldn't quite get the inset look the way I wanted, because inset box-shadows do not respect the border radius, therefore causing aliasing. * Tweak light theme border and shadow colors * Add functions and colors to base_lib * Add vars_lib as dependency to base_lib and button_mixins_lib * Improve uses of default-themed variables * Use old --frame-bg color and use darker tone for canvas-default * Return CSS var by default and add palette-of function for raw value * Showcase use of palette-of function The #{...} syntax is required only because the use cases are CSS var definitions. In other cases a simple palette-of(keyword, theme) would suffice. * Light theme: decrease brightness of canvas-default and adjust fg-default * Use canvas-inset variable for switch knob * Adjust light theme * Add back box-shadow to EditingArea * Light theme: darken background and flatten transition also set hue and saturation of gray-8 to 0 (like all the other grays). * Reduce flag colors to single default value * Tweak card/note accent colors * Experiment with inset look for fields again Is this too dark in night mode? It's the same color used for all other text inputs. * Dark theme: make border-default one shade darker * Tweak inset shadow color * Dark theme: make border-faint darker than canvas-default meaning two shades darker than it currently was. * Fix PlainTextInput not expanding * Dark theme: use less saturated flag colors * Adjust gray tones * Fix nested variables not getting extracted correctly * Rename canvas-outset to canvas-elevated * Light theme: darken canvas-default * Make canvas-elevated a bit darker * Rename variables and use them in various components * Refactor button mixins * Remove fusion vars from Anki * Adjust button gradients * Refactor button mixins * Fix deck browser table td background color * Use color function in buttons.scss * Rework QTabWidget stylesheet * Fix crash on browser open * Perfect QTableView header * Fix bottom toolbar button gradient * Fix focus outline of bottom toolbar buttons * Fix custom webview scrollbar * Fix uses of vars in various webviews The command @use vars as * lead to repeated inclusion of the CSS vars. * Enable primary button color with mixin * Run prettier * Fix Python code style issues * Tweak colors * Lighten scrollbar shades in light theme * Fix code style issues caused by merge * Fix harsh border color in editor caused by leftover --medium-border variables, probably introduced with a merge commit. * Compile Sass before extracting Python colors/props This means the Python side doesn't need to worry about the map structure and Sass functions, just copy the output CSS values. * Desaturate primary button colors by 10% * Convert accidentally capitalized variable names to lowercase * Simplify color definitions with qcolor function * Remove default border-focus variable * Remove redundant colon * Apply custom scrollbar CSS only on Windows and Linux * Make border-subtle color brighter than background in dark theme * Make border-subtle color a shade brighter in light theme * Use border-subtle for NoteEditor and EditorToolbar border * Small patches
314 lines
8.7 KiB
SCSS
314 lines
8.7 KiB
SCSS
/* Copyright: Ankitects Pty Ltd and contributors
|
|
* License: GNU AGPL, version 3 or later, http://www.gnu.org/licenses/agpl.html */
|
|
|
|
@use "sass:map";
|
|
@use "sass:color";
|
|
@use "functions" as *;
|
|
@use "colors" as *;
|
|
|
|
@function palette($key, $shade) {
|
|
$color: map.get($colors, $key);
|
|
@return map.get($color, $shade);
|
|
}
|
|
|
|
$vars: (
|
|
props: (
|
|
border-radius: (
|
|
default: 5px,
|
|
),
|
|
),
|
|
colors: (
|
|
fg: (
|
|
default: (
|
|
light: palette(darkgray, 9),
|
|
dark: palette(lightgray, 0),
|
|
),
|
|
subtle: (
|
|
light: palette(darkgray, 6),
|
|
dark: palette(lightgray, 3),
|
|
),
|
|
disabled: (
|
|
light: palette(darkgray, 3),
|
|
dark: palette(lightgray, 6),
|
|
),
|
|
faint: (
|
|
light: palette(lightgray, 7),
|
|
dark: palette(darkgray, 2),
|
|
),
|
|
),
|
|
canvas: (
|
|
default: (
|
|
light: palette(lightgray, 3),
|
|
dark: palette(darkgray, 5),
|
|
),
|
|
elevated: (
|
|
light: white,
|
|
dark: palette(darkgray, 4),
|
|
),
|
|
inset: (
|
|
light: palette(lightgray, 4),
|
|
dark: palette(darkgray, 6),
|
|
),
|
|
overlay: (
|
|
light: white,
|
|
dark: black,
|
|
),
|
|
code: (
|
|
light: white,
|
|
dark: palette(darkgray, 6),
|
|
),
|
|
),
|
|
border: (
|
|
default: (
|
|
light: palette(lightgray, 7),
|
|
dark: palette(darkgray, 7),
|
|
),
|
|
subtle: (
|
|
light: palette(lightgray, 5),
|
|
dark: palette(darkgray, 4),
|
|
),
|
|
focus: (
|
|
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),
|
|
),
|
|
),
|
|
gradient: (
|
|
start: (
|
|
light: white,
|
|
dark: palette(darkgray, 3),
|
|
),
|
|
end: (
|
|
light: palette(lightgray, 1),
|
|
dark: palette(darkgray, 4),
|
|
),
|
|
),
|
|
hover: (
|
|
gradient: (
|
|
start: (
|
|
light: palette(lightgray, 1),
|
|
dark: palette(darkgray, 2),
|
|
),
|
|
end: (
|
|
light: palette(lightgray, 3),
|
|
dark: palette(darkgray, 3),
|
|
),
|
|
),
|
|
border: (
|
|
light: palette(lightgray, 8),
|
|
dark: palette(darkgray, 8),
|
|
),
|
|
),
|
|
primary: (
|
|
gradient: (
|
|
start: (
|
|
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%),
|
|
),
|
|
),
|
|
hover: (
|
|
gradient: (
|
|
start: (
|
|
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%),
|
|
),
|
|
),
|
|
),
|
|
disabled: (
|
|
light: palette(blue, 3),
|
|
dark: color.scale(palette(blue, 5), $saturation: -10%),
|
|
),
|
|
),
|
|
),
|
|
scrollbar: (
|
|
bg: (
|
|
default: (
|
|
light: palette(lightgray, 6),
|
|
dark: palette(darkgray, 4),
|
|
),
|
|
hover: (
|
|
light: palette(lightgray, 7),
|
|
dark: palette(darkgray, 3),
|
|
),
|
|
active: (
|
|
light: palette(lightgray, 8),
|
|
dark: palette(darkgray, 1),
|
|
),
|
|
),
|
|
),
|
|
shadow: (
|
|
default: (
|
|
light: palette(lightgray, 8),
|
|
dark: palette(darkgray, 7),
|
|
),
|
|
inset: (
|
|
light: palette(lightgray, 9),
|
|
dark: palette(darkgray, 7),
|
|
),
|
|
subtle: (
|
|
light: palette(lightgray, 5),
|
|
dark: palette(darkgray, 6),
|
|
),
|
|
focus: (
|
|
default: palette(indigo, 5),
|
|
),
|
|
),
|
|
accent: (
|
|
card: (
|
|
light: palette(blue, 3),
|
|
dark: palette(blue, 4),
|
|
),
|
|
note: (
|
|
light: palette(green, 5),
|
|
dark: palette(green, 4),
|
|
),
|
|
link: (
|
|
light: palette(blue, 7),
|
|
dark: palette(blue, 2),
|
|
),
|
|
danger: (
|
|
light: palette(red, 5),
|
|
dark: palette(red, 4),
|
|
),
|
|
),
|
|
flag: (
|
|
1: (
|
|
light: palette(red, 5),
|
|
dark: palette(red, 4),
|
|
),
|
|
2: (
|
|
light: palette(orange, 4),
|
|
dark: palette(orange, 3),
|
|
),
|
|
3: (
|
|
light: palette(green, 4),
|
|
dark: palette(green, 3),
|
|
),
|
|
4: (
|
|
light: palette(blue, 5),
|
|
dark: palette(blue, 4),
|
|
),
|
|
5: (
|
|
light: palette(fuchsia, 4),
|
|
dark: palette(fuchsia, 3),
|
|
),
|
|
6: (
|
|
light: palette(teal, 4),
|
|
dark: palette(teal, 3),
|
|
),
|
|
7: (
|
|
light: palette(purple, 5),
|
|
dark: palette(purple, 4),
|
|
),
|
|
),
|
|
state: (
|
|
new: (
|
|
light: palette(blue, 5),
|
|
dark: palette(blue, 3),
|
|
),
|
|
learn: (
|
|
light: palette(red, 6),
|
|
dark: palette(red, 4),
|
|
),
|
|
review: (
|
|
light: palette(green, 6),
|
|
dark: palette(green, 5),
|
|
),
|
|
buried: (
|
|
light: palette(amber, 5),
|
|
dark: palette(amber, 8),
|
|
),
|
|
suspended: (
|
|
light: palette(yellow, 4),
|
|
dark: palette(yellow, 1),
|
|
),
|
|
marked: (
|
|
light: palette(indigo, 2),
|
|
dark: palette(purple, 5),
|
|
),
|
|
),
|
|
highlight: (
|
|
bg: (
|
|
light: palette(blue, 3),
|
|
dark: palette(blue, 4),
|
|
),
|
|
fg: (
|
|
light: black,
|
|
dark: white,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
|
|
@function color($keyword) {
|
|
@return var(--#{$keyword});
|
|
}
|
|
|
|
@function palette-of($keyword, $theme: default) {
|
|
$colors: map.get($vars, colors);
|
|
@return get-value-from-map($colors, $keyword, $theme);
|
|
}
|
|
|
|
@function prop($keyword) {
|
|
@return var(--#{$keyword});
|
|
}
|
|
|
|
/*! colors */
|
|
:root {
|
|
$colors: map.get($vars, colors);
|
|
@each $name, $val in create-vars-from-map($colors, light) {
|
|
#{$name}: #{$val};
|
|
}
|
|
color-scheme: light;
|
|
&.night-mode {
|
|
@each $name, $val in create-vars-from-map($colors, dark) {
|
|
#{$name}: #{$val};
|
|
}
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
/*! props */
|
|
:root {
|
|
$props: map.get($vars, props);
|
|
@each $name, $val in create-vars-from-map($props, default) {
|
|
#{$name}: #{$val};
|
|
}
|
|
@each $name, $val in create-vars-from-map($props, light) {
|
|
#{$name}: #{$val};
|
|
}
|
|
&.night-mode {
|
|
@each $name, $val in create-vars-from-map($props, default) {
|
|
#{$name}: #{$val};
|
|
}
|
|
@each $name, $val in create-vars-from-map($props, dark) {
|
|
#{$name}: #{$val};
|
|
}
|
|
}
|
|
}
|