GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-06 20:57:13 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Prevent multiple inclusion of variables in CSS files

Browse source
This commit is contained in:
Matthias Metelka 2022-10-20 09:49:35 +02:00
parent 3d47c9547a
commit eceb426831
17 changed files with 80 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
qt/aqt/BUILD.bazel
View file

@ -14,7 +14,7 @@ genrule(
genrule(
name = "extract_sass_vars",
srcs = [
"//sass:_vars.css",
"//sass:_root-vars.css",
],
outs = [
"colors.py",

2
qt/aqt/data/web/css/BUILD.bazel
View file

@ -9,7 +9,7 @@ compile_sass(
group = "css_local",
visibility = ["//visibility:private"],
deps = [
"//sass:vars_lib",
"//sass:base_lib",
"//sass:buttons_lib",
"//sass:card_counts_lib",
"//sass:scrollbar_lib",

18
qt/aqt/data/web/css/deckbrowser.scss
View file

@ -1,11 +1,11 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "sass/vars";
@use "sass/base";
@use "sass/vars" as *;
@use "sass/card-counts";
a.deck {
color: var(--fg);
color: color(fg);
text-decoration: none;
min-width: 5em;
display: inline-block;
@ -16,7 +16,7 @@ a.deck:hover {
}
tr.deck td {
border-bottom: 1px solid var(--border-subtle);
border-bottom: 1px solid color(border-subtle);
}
tr.top-level-drag-row td {
@ -28,7 +28,7 @@ td {
}
tr.drag-hover td {
border-bottom: 1px solid var(--border);
border-bottom: 1px solid color(border);
}
body {
@ -37,7 +37,7 @@ body {
}
.current {
background-color: var(--shadow-subtle);
background-color: color(shadow-subtle);
}
.decktd {
@ -56,14 +56,14 @@ body {
}
.collapse {
color: var(--fg);
color: color(fg);
text-decoration: none;
display: inline-block;
width: 1em;
}
.filtered {
color: var(--accent-link) !important;
color: color(accent-link) !important;
}
.gears {
@ -81,7 +81,7 @@ body {
}
.callout {
background: var(--border);
background: color(border);
padding: 1em;
margin: 1em;

3
qt/aqt/data/web/css/reviewer-bottom.scss
View file

@ -1,11 +1,12 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "sass/base";
@use "vars";
@use "sass/card-counts";
:root {
--focus-color: #{vars.palette-of(button-focus)};
--focus-color: #{vars.palette-of(border-focus)};
.isMac {
--focus-color: rgba(0 103 244 / 0.247);

2
qt/aqt/data/web/css/toolbar.scss
View file

@ -1,6 +1,8 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "sass/base";
#header {
padding: 3px;
font-weight: bold;

8
qt/tools/extract_sass_vars.py
View file

@ -7,7 +7,7 @@ import re
import sys
# bazel genrule "srcs"
vars_css = sys.argv[1]
root_vars_css = sys.argv[1]
# bazel genrule "outs"
colors_py = sys.argv[2]
@ -17,7 +17,7 @@ colors = {}
props = {}
reached_props = False
for line in re.split(r"[;\{\}]", open(vars_css).read()):
for line in re.split(r"[;\{\}]", open(root_vars_css).read()):
line = line.strip()
if not line:
@ -54,7 +54,7 @@ copyright_notice = """\
with open(colors_py, "w") as buf:
buf.write(copyright_notice)
buf.write("# this file is auto-generated from _vars.scss and _colors.scss\n")
buf.write("# this file is auto-generated from _root-vars.scss\n")
for color, val in colors.items():
day = val[0]
@ -66,7 +66,7 @@ with open(colors_py, "w") as buf:
with open(props_py, "w") as buf:
buf.write(copyright_notice)
buf.write("# this file is auto-generated from _vars.scss\n")
buf.write("# this file is auto-generated from _root-vars.scss\n")
for prop, val in props.items():
day = val[0]

4
sass/BUILD.bazel
View file

@ -17,7 +17,7 @@ sass_library(
sass_library(
name = "vars_lib",
srcs = [
"_colors.scss",
"_color-palette.scss",
"_functions.scss",
"_vars.scss",
],
@ -103,7 +103,7 @@ sass_library(
)
compile_sass(
srcs = ["_vars.scss"],
srcs = ["_root-vars.scss"],
group = "vars_css",
visibility = ["//visibility:public"],
)

2
sass/_colors.scss → sass/_color-palette.scss
View file

@ -5,7 +5,7 @@
* custom gray, rest from Tailwind CSS v3 palette
* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
$colors: (
$color-palette: (
lightgray: (
0: #fcfcfc,
1: #fafafa,

34
sass/_root-vars.scss Normal file
View file

@ -0,0 +1,34 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later, http://www.gnu.org/licenses/agpl.html */
@use "sass:map";
@use "vars" as *;
@use "functions" as *;
/*! 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, light) {
#{$name}: #{$val}; /*! #{$name} */
}
&.night-mode {
@each $name, $val in create-vars-from-map($props, dark) {
#{$name}: #{$val};
}
}
}

46
sass/_vars.scss
View file

@ -4,10 +4,10 @@
@use "sass:map";
@use "sass:color";
@use "functions" as *;
@use "colors" as *;
@use "color-palette" as *;
@function palette($key, $shade) {
$color: map.get($colors, $key);
$color: map.get($color-palette, $key);
@return map.get($color, $shade);
}
@ -290,6 +290,10 @@ $vars: (
),
);
@function prop($keyword) {
@return var(--#{$keyword});
}
@function color($keyword) {
@return var(--#{$keyword});
}
@ -298,41 +302,3 @@ $vars: (
$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};
}
}
}

20
sass/base.scss
View file

@ -1,11 +1,12 @@
@use "vars";
@use "vars" as *;
@use "root-vars";
@use "scrollbar";
@use "button-mixins" as button;
$body-color: var(--fg);
$body-bg: var(--canvas);
$body-color: color(fg);
$body-bg: color(canvas);
$link-hover-color: var(--accent-link);
$link-hover-color: color(accent-link);
$link-hover-decoration: none;
$utilities: (
@ -53,6 +54,7 @@ body {
button {
/* override transition for instant hover response */
transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
border-radius: prop(border-radius);
}
pre,
@ -82,12 +84,12 @@ samp {
}
.form-select:focus {
outline: none;
border: 1px solid var(--border-focus);
border: 1px solid color(border-focus);
box-shadow: none !important;
}
.night-mode .form-select:disabled {
background-color: var(--fg-disabled);
background-color: color(fg-disabled);
}
.reduced-motion * {
@ -104,10 +106,10 @@ select {
&:focus,
&.focus {
border: 1px solid var(--border-focus);
border: 1px solid color(border-focus);
}
option {
background: var(--canvas-elevated);
color: var(--fg);
background: color(canvas-elevated);
color: color(fg);
}
}

1
ts/change-notetype/change-notetype-base.scss
View file

@ -1,4 +1,3 @@
@use "sass/vars";
@use "sass/bootstrap-dark";
@import "sass/base";

14
ts/components/Popover.svelte
View file

@ -20,10 +20,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</div>
<style lang="scss">
@use "sass/vars";
@use "sass/vars" as *;
.popover {
border-radius: 5px;
background-color: var(--canvas-elevated);
background-color: color(canvas-elevated);
min-width: var(--popover-width, 1rem);
max-width: 95vw;
@ -31,20 +31,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
padding: var(--popover-padding-block, 6px) var(--popover-padding-inline, 6px);
font-size: 1rem;
color: var(--fg);
color: color(fg);
/* outer border */
border: 1px solid vars.palette(lightgray, 6);
border: 1px solid palette(lightgray, 6);
&.dark {
border-color: vars.palette(darkgray, 9);
border-color: palette(darkgray, 9);
}
/* inner border */
box-shadow: inset 0 0 0 1px vars.palette(lightgray, 3);
box-shadow: inset 0 0 0 1px palette(lightgray, 3);
&.dark {
box-shadow: inset 0 0 0 1px vars.palette(darkgray, 2);
box-shadow: inset 0 0 0 1px palette(darkgray, 2);
}
&.scrollable {
max-height: 80vh;

1
ts/editor/legacy.scss
View file

@ -1,6 +1,5 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "sass/vars";
@use "sass:color";
@use "sass/button-mixins" as button;

1
ts/fields/fields-base.scss
View file

@ -1,4 +1,3 @@
@use "sass/vars";
@use "sass/bootstrap-dark";
@import "sass/base";

1
ts/import-csv/import-csv-base.scss
View file

@ -1,4 +1,3 @@
@use "sass/vars";
@use "sass/bootstrap-dark";
@import "sass/base";

1
ts/tag-editor/AutocompleteItem.svelte
View file

@ -33,7 +33,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</button>
<style lang="scss">
@use "sass/vars";
@use "sass/button-mixins" as button;
.autocomplete-item {