anki/sass/_functions.scss
Matthias Metelka 0c340c4f74
Add comments to Sass variables and tweak main window (#2137)
* Prevent multiple inclusion of variables in CSS files

* Use dict instead of tuple for variables

* Add comments to variables

* Improve appearance of main window

* Tweak main window styles

* Use json.dumps over pprint.format

* Make study button primary

* Improve header margin

* Make bottom toolbar slimmer

* Make congrats page more balanced

* Fix type issue

* Replace day/night with light/dark

* Exclude top-level-drag-row from hover effect

* Create dataclass for variables

* Run formatter

* Apply CSS variables from Python side

Why go full-circle with the Sass variables? This way we only need one interface for add-on authors to interact with. It also makes it easier for us to apply additional themes in the future.

* Fix typing

* Fix rgba values in Qt

* Darken button background

* Fix palette not being applied in light theme

For some odd reason this problem arose much later than #2016.

* Tweak default button look

* Reformat

* Apply CSS vars to ts pages

* Include elevation in button_mixins_lib

* Cast opacity to int

* Add some margin to studiedToday info

* Tweak light theme button gradient

* Tweak highlight-bg for light theme

* Add back default button color

as it made the browser sidebar tool icons dark in light theme.

* Reformat

* Tweak light theme buttons once more

Sorry for the back-and-forth. Sass only compiles when there are changes in user files, not when I only change the vars.

* Fix bottom toolbar button indicators

* Make buttons more clicky

* Fix button padding

* Handle macOS separately again

* Decrease elevation effect for main window buttons to 1

* Imitate box-shadow for Qt elements

* Adjust shadow vars

* Adjust primary border color

because the save button in the deck options had a lighter color than its background gradient.

* Boost box-shadow color of primary buttons

* Format

* Adjust Qt box-shadow imitation and shadow colors

* Use more subtle default shadow color

* Add some more padding to top toolbar

* Revert "Apply CSS vars to ts pages"

This reverts commit 5d8e7f6b7ffc8894b6517ecbb8cfba35407fc69a.

* Revert "Apply CSS variables from Python side"

This reverts commit 87db774412fd2bfd75e2630d2c5e782daef96b5f.

* Better match the standard macOS buttons

In the dark theme the standard color is a lighter grey, but at least
the size/shape is similar again.

This doesn't work for the editor buttons.

* Reduce the top margin of the congrats screen

* Fix illegible buttons when changing theme on macOS; match dark button style
2022-10-29 10:48:53 +10:00

88 lines
2.5 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:list";
@function create-vars-from-map($map, $theme, $name: "-", $output: ()) {
@each $key, $value in $map {
@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" {
@if $key == "default" {
$output: map-merge(
$output,
create-vars-from-map($value, $theme, #{$name}, $output)
);
} @else {
$output: map-merge(
$output,
create-vars-from-map($value, $theme, #{$name}-#{$key}, $output)
);
}
} @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;
}
@function map-deep-get($map, $keys) {
@each $key in $keys {
@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;
}
@function get-value-from-map($map, $keyword, $theme, $keys: ()) {
$i: str-index($keyword, "-");
@if $i {
@while $i {
$sub: str-slice($keyword, 0, $i - 1);
@if list.length($keys) == 0 {
$keys: ($sub);
} @else {
$keys: list.append($keys, $sub);
}
$keyword: str-slice($keyword, $i + 1, -1);
$i: str-index($keyword, "-");
}
}
$keys: list.join($keys, ($keyword, $theme));
@return map-deep-get($map, $keys);
}