Anki/ts
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
..
card-info Introduce new color palette using Sass maps (#2016) 2022-09-16 14:11:18 +10:00
change-notetype Join RichTextAPI and RichTextContextAPI + Expose anki/RichTextInput (#1918) 2022-06-20 16:11:27 +10:00
components Introduce new color palette using Sass maps (#2016) 2022-09-16 14:11:18 +10:00
congrats Introduce new color palette using Sass maps (#2016) 2022-09-16 14:11:18 +10:00
deck-options Introduce new color palette using Sass maps (#2016) 2022-09-16 14:11:18 +10:00
domlib Refactor how toolbar buttons get to surround within editor fields (#1931) 2022-08-15 13:34:16 +10:00
editable Insert symbols overlay (#2051) 2022-09-10 18:46:59 +10:00
editor Introduce new color palette using Sass maps (#2016) 2022-09-16 14:11:18 +10:00
fields Add a flag to allow loading the fields dialog in a web view (#1706) 2022-03-03 22:45:26 +10:00
graphs Introduce new color palette using Sass maps (#2016) 2022-09-16 14:11:18 +10:00
html-filter Preserve background-color when pasting external content in light mode 2022-08-19 12:31:26 +10:00
icons Add extra button group for cloze commands (#1756) 2022-03-31 13:30:00 +10:00
import-csv Introduce new color palette using Sass maps (#2016) 2022-09-16 14:11:18 +10:00
lib Insert symbols overlay (#2051) 2022-09-10 18:46:59 +10:00
mathjax Use same config for editor and reviewer Mathjax (#1865) 2022-05-13 13:23:35 +10:00
patches Override older protobufjs pulled in via @bazel/typescript 2022-06-03 13:15:48 +10:00
reviewer Introduce new color palette using Sass maps (#2016) 2022-09-16 14:11:18 +10:00
sql_format run buildifier/buildozer to tidy up BUILD files 2021-12-14 09:18:24 +10:00
svelte Improved add-on extension API (#1626) 2022-02-03 14:52:11 +10:00
sveltelib Fuzzy search in symbol insertion overlay (#2059) 2022-09-13 14:19:19 +10:00
tag-editor Introduce new color palette using Sass maps (#2016) 2022-09-16 14:11:18 +10:00
.eslintrc.js Use eslint for sorting our imports (#1637) 2022-02-04 18:36:34 +10:00
.gitignore Update eslint to 4.22.0 2021-04-22 19:19:39 +02:00
BUILD.bazel Add extra button group for cloze commands (#1756) 2022-03-31 13:30:00 +10:00
compile_sass.bzl Remove individual .html files + other refactorings (#1588) 2022-01-16 15:05:35 +10:00
copy.bzl include sourcemaps for pages/* in dev builds 2021-04-20 17:33:46 +10:00
esbuild.bzl Fix invisible tag input in Qt5 (thanks to Hikaru) 2022-04-05 09:53:36 +10:00
eslint.bzl Use eslint for sorting our imports (#1637) 2022-02-04 18:36:34 +10:00
format.sh prettier: don't depend on system node being available 2021-11-25 07:14:15 +10:00
generate_page.bzl Remove individual .html files + other refactorings (#1588) 2022-01-16 15:05:35 +10:00
jest.bzl Allow passing debug=True to jest_test for debugger support (#2013) 2022-08-16 10:55:16 +10:00
jest.config.js update to latest rules_nodejs & switch to ts_project 2021-10-01 12:52:53 +10:00
licenses.json Fuzzy search in symbol insertion overlay (#2059) 2022-09-13 14:19:19 +10:00
page.html Load page script after body created (#1802) 2022-04-19 17:16:56 +10:00
prettier.bzl prettier: don't depend on system node being available 2021-11-25 07:14:15 +10:00
proto.bzl update to latest rules_nodejs & switch to ts_project 2021-10-01 12:52:53 +10:00
protobuf-no-long.js add a hack to avoid Long.js in Jest tests 2021-04-17 17:05:48 +10:00
protobuf.bzl Consider using --force-message for ts/protobuf.bzl (#1694) 2022-02-27 17:35:07 +10:00
README.md add add.sh helper for adding dependency and updating licenses 2020-12-31 12:20:51 +10:00
tsconfig.json Use same config for editor and reviewer Mathjax (#1865) 2022-05-13 13:23:35 +10:00
typescript.bzl Refactor i18n (#1405) 2021-10-07 23:31:49 +10:00
update-licenses.sh fix update-licenses.sh 2021-12-03 20:35:53 +10:00
update.sh add add.sh helper for adding dependency and updating licenses 2020-12-31 12:20:51 +10:00
vendor.bzl copy_bootstrap_css/icons were unused 2022-01-15 20:35:11 +10:00
yarn.sh Replace individual d3 libraries with encompassing d3 2021-01-30 00:00:22 +01:00

Anki's TypeScript and Sass dependencies. Some TS/JS code is also stored separately in ../qt/aqt/data/web/.

To update all dependencies:

./update.sh

To add a new dev dependency, use something like:

./add.sh -D @rollup/plugin-alias