Anki is a smart spaced repetition flashcard program
Find a file
Matthias Metelka 8142176f84
Introduce new color palette using Sass maps (#2016)
* 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
2022-09-16 14:11:18 +10:00
.buildkite Make build step optional in Linux docker containers 2022-03-09 18:20:13 +10:00
.github/ISSUE_TEMPLATE update bug report template 2021-11-12 12:20:02 +10:00
.vscode.dist Move VS Code settings to .vscode.dist and update docs (#2029) 2022-08-24 16:08:58 +10:00
cargo Partially migrate type answer to backend 2022-07-22 19:28:34 +10:00
docs Document Protocol Buffers used in Anki (#2042) 2022-09-01 22:01:14 +10:00
ftl More template checks (#2032) 2022-09-05 16:52:25 +10:00
platforms use x86 binaries for clang format/protobuf on Mac 2021-10-16 18:07:39 +10:00
proto Enable state-dependent custom scheduling data (#2049) 2022-09-05 16:48:01 +10:00
pylib Enable state-dependent custom scheduling data (#2049) 2022-09-05 16:48:01 +10:00
python Fix build failing on macOS 2022-08-25 18:04:37 +10:00
qt Introduce new color palette using Sass maps (#2016) 2022-09-16 14:11:18 +10:00
rslib More template checks (#2032) 2022-09-05 16:52:25 +10:00
sass Introduce new color palette using Sass maps (#2016) 2022-09-16 14:11:18 +10:00
tools Update Mac build to Qt 6.3 2022-04-20 21:33:31 +10:00
ts Introduce new color palette using Sass maps (#2016) 2022-09-16 14:11:18 +10:00
.bazelignore updates to the build process and binary bundles 2022-02-10 19:23:07 +10:00
.bazelrc Add apkg import/export on backend (#1743) 2022-05-02 21:12:46 +10:00
.bazelversion Bump bazel version 2022-04-20 21:53:59 +10:00
.gitattributes try again to improve GitHub's language stats 2021-01-20 13:20:45 +10:00
.gitignore Move VS Code settings to .vscode.dist and update docs (#2029) 2022-08-24 16:08:58 +10:00
.prettierignore Improved add-on extension API (#1626) 2022-02-03 14:52:11 +10:00
.prettierrc Mathjax editor improvements (#1502) 2021-11-23 10:27:32 +10:00
.user.bazelrc move Bazel convenience symlinks outside of repo folder 2022-01-23 19:18:44 +10:00
BUILD.bazel updates to the build process and binary bundles 2022-02-10 19:23:07 +10:00
Cargo.lock Partially migrate type answer to backend 2022-07-22 19:28:34 +10:00
Cargo.toml Plaintext import/export (#1850) 2022-06-01 20:26:16 +10:00
CONTRIBUTORS Fix Windows dark mode detection: OpenKey can fail (#2068) 2022-09-15 12:04:19 +10:00
defs.bzl Bump version 2022-06-24 16:02:39 +10:00
late_deps.bzl download wheels using rules_python 2021-10-15 16:02:26 +10:00
LICENSE move aqt_data into source folder; implement wheel building 2020-11-04 12:14:03 +10:00
package.json Fuzzy search in symbol insertion overlay (#2059) 2022-09-13 14:19:19 +10:00
pkgkey.asc add public key for release signing 2018-09-18 10:40:45 +10:00
pyrightconfig.json updates to the build process and binary bundles 2022-02-10 19:23:07 +10:00
README.md fix build badge 2021-06-24 09:21:56 +10:00
repos.bzl Update translations 2022-09-02 15:04:10 +10:00
run get PyQt working directly with ./run on macOS 2021-10-16 18:07:29 +10:00
run.bat updates to the build process and binary bundles 2022-02-10 19:23:07 +10:00
SECURITY.md add SECURITY.md 2021-09-22 22:55:19 +10:00
WORKSPACE move node_modules into root folder [action required] 2021-10-07 11:42:27 +10:00
yarn.lock Fuzzy search in symbol insertion overlay (#2059) 2022-09-13 14:19:19 +10:00

Anki

Build status

This repo contains the source code for the computer version of Anki.

If you'd like to try development builds of Anki but don't feel comfortable building the code, please see https://betas.ankiweb.net/

For more information on building, please see Development.