anki/qt/aqt/BUILD.bazel
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

158 lines
3.3 KiB
Python

load("@rules_python//python:defs.bzl", "py_library")
load("@py_deps//:requirements.bzl", "requirement")
load("@rules_python//python:packaging.bzl", "py_package", "py_wheel")
load("//:defs.bzl", "anki_version")
load("//ts:copy.bzl", "copy_files_into_group")
load("//ts:compile_sass.bzl", "compile_sass")
genrule(
name = "copy_vars",
srcs = ["//sass:_vars.scss"],
outs = ["_vars.scss"],
cmd = "cp $(SRCS) $(RULEDIR)",
)
compile_sass(
srcs = ["_vars.scss"],
group = "vars",
visibility = ["//visibility:private"],
)
genrule(
name = "hooks_gen",
outs = ["hooks_gen.py"],
cmd = "$(location //qt:genhooks_gui) $@",
tools = ["//qt:genhooks_gui"],
)
genrule(
name = "extract_sass_vars",
srcs = [
"_vars.css",
],
outs = ["colors.py", "props.py"],
cmd = "$(location //qt:extract_sass_vars) $(SRCS) $(OUTS)",
tools = [
"//qt:extract_sass_vars",
],
)
_py_srcs = glob(
[
"**/*.py",
],
exclude = ["hooks_gen.py"],
)
_py_srcs_and_forms = _py_srcs + [
"//qt/aqt/forms:forms",
]
aqt_core_data = [
"colors.py",
"props.py",
"py.typed",
":hooks_gen",
]
aqt_deps = [
requirement("protobuf"),
requirement("decorator"),
requirement("requests"),
requirement("beautifulsoup4"),
requirement("flask"),
requirement("flask-cors"),
requirement("waitress"),
requirement("send2trash"),
requirement("jsonschema"),
] + select({
"@bazel_tools//src/conditions:host_windows": [
requirement("psutil"),
requirement("pywin32"),
requirement("winrt"),
],
"//conditions:default": [],
})
# library without web/i18n data; faster for testing
py_library(
name = "aqt_without_data",
srcs = _py_srcs_and_forms,
data = aqt_core_data,
visibility = ["//visibility:public"],
deps = aqt_deps + [
"@pyqt6",
],
)
py_library(
name = "aqt_with_data",
srcs = _py_srcs_and_forms,
data = aqt_core_data + ["//qt/aqt/data"],
visibility = ["//visibility:public"],
deps = aqt_deps,
)
py_package(
name = "aqt_pkg",
packages = [
"qt.aqt",
],
deps = [
":aqt_with_data",
],
)
py_wheel(
name = "wheel",
description_file = "wheel_description.txt",
distribution = "aqt",
entry_points = {
"console_scripts": ["anki = aqt:run"],
},
extra_requires = {
"qt5": [
"pyqt5>=5.14",
"pyqtwebengine",
],
"qt6": [
"pyqt6>=6.2",
"pyqt6-webengine>=6.2",
],
},
homepage = "https://apps.ankiweb.net",
license = "License :: OSI Approved :: GNU Affero General Public License v3 or later (AGPLv3+)",
python_tag = "py3",
requires = [
"beautifulsoup4",
"requests",
"send2trash",
"jsonschema",
"flask",
"flask_cors",
"waitress",
'psutil; sys.platform == "win32"',
'pywin32; sys.platform == "win32"',
'winrt; sys.platform == "win32"',
"anki==" + anki_version,
],
strip_path_prefixes = [
"qt/",
],
tags = ["manual"],
version = anki_version,
visibility = ["//visibility:public"],
deps = [
":aqt_pkg",
],
)
filegroup(
name = "py_source_files",
srcs = _py_srcs,
visibility = [
"//qt:__subpackages__",
],
)