mirror of
https://github.com/ankitects/anki.git
synced 2025-09-24 16:56:36 -04:00
Use different map structure for _vars.scss
after @hgiesel's idea: https://github.com/ankitects/anki/pull/2016#discussion_r947087871
This commit is contained in:
Matthias Metelka
parent
d480e5ce5a
commit
59d618851d
2 changed files with 196 additions and 94 deletions
|
|
@ -36,14 +36,27 @@ for line in open(colors_scss):
|
||||||
|
|
||||||
# TODO: recursive extraction of arbitrarily nested Sass maps?
|
# TODO: recursive extraction of arbitrarily nested Sass maps?
|
||||||
reached_colors = False
|
reached_colors = False
|
||||||
|
current_key = ""
|
||||||
|
|
||||||
for line in open(vars_scss):
|
for line in open(vars_scss):
|
||||||
line = line.strip()
|
line = line.strip()
|
||||||
if not line:
|
|
||||||
|
if not line or line == "props: (":
|
||||||
|
continue
|
||||||
|
if line == ":root {":
|
||||||
|
break
|
||||||
|
if line == "colors: (":
|
||||||
|
reached_colors = True
|
||||||
continue
|
continue
|
||||||
|
|
||||||
if line == "themes: (":
|
if m := re.match(r"^([^$]+): \(", line):
|
||||||
reached_colors = True
|
current_key = m.group(1)
|
||||||
|
|
||||||
|
if reached_colors:
|
||||||
|
colors[current_key] = {}
|
||||||
|
else:
|
||||||
|
props[current_key] = {}
|
||||||
|
|
||||||
continue
|
continue
|
||||||
|
|
||||||
if reached_colors:
|
if reached_colors:
|
||||||
|
|
@ -53,14 +66,14 @@ for line in open(vars_scss):
|
||||||
line,
|
line,
|
||||||
)
|
)
|
||||||
|
|
||||||
if m := re.match(r"^(.+): ([^\(]+),$", line):
|
if m := re.match(r"^(.+): (.+),$", line):
|
||||||
var = m.group(1)
|
theme = m.group(1)
|
||||||
val = m.group(2)
|
val = m.group(2)
|
||||||
|
|
||||||
if reached_colors:
|
if reached_colors:
|
||||||
colors.setdefault(var, []).append(val)
|
colors[current_key][theme] = val
|
||||||
else:
|
else:
|
||||||
props.setdefault(var, []).append(val)
|
props[current_key][theme] = val
|
||||||
|
|
||||||
|
|
||||||
copyright_notice = """\
|
copyright_notice = """\
|
||||||
|
|
@ -72,7 +85,10 @@ with open(colors_py, "w") as buf:
|
||||||
buf.write(copyright_notice)
|
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 _vars.scss and _colors.scss\n")
|
||||||
|
|
||||||
for color, (day, night) in colors.items():
|
for color, val in colors.items():
|
||||||
|
day = val["light"] if "light" in val else val["default"]
|
||||||
|
night = val["dark"] if len(val) > 1 else day
|
||||||
|
|
||||||
color = color.replace("-", "_").upper()
|
color = color.replace("-", "_").upper()
|
||||||
buf.write(f'{color} = ("{day}", "{night}")\n')
|
buf.write(f'{color} = ("{day}", "{night}")\n')
|
||||||
|
|
||||||
|
|
@ -82,8 +98,8 @@ with open(props_py, "w") as buf:
|
||||||
buf.write("# this file is auto-generated from _vars.scss\n")
|
buf.write("# this file is auto-generated from _vars.scss\n")
|
||||||
|
|
||||||
for prop, val in props.items():
|
for prop, val in props.items():
|
||||||
day = val[0]
|
day = val["light"] if "light" in val else val["default"]
|
||||||
night = val[1] if len(val) > 1 else day
|
night = val["dark"] if "dark" in val else day
|
||||||
|
|
||||||
prop = prop.replace("-", "_").upper()
|
prop = prop.replace("-", "_").upper()
|
||||||
buf.write(f'{prop} = ("{day}", "{night}")\n')
|
buf.write(f'{prop} = ("{day}", "{night}")\n')
|
||||||
|
|
|
||||||
254
sass/_vars.scss
254
sass/_vars.scss
|
|
@ -12,103 +12,189 @@
|
||||||
|
|
||||||
$vars: (
|
$vars: (
|
||||||
props: (
|
props: (
|
||||||
border-radius-default: 5px,
|
border-radius: (
|
||||||
),
|
default: 5px,
|
||||||
themes: (
|
|
||||||
light: (
|
|
||||||
text-fg: get($color, gray, 9),
|
|
||||||
window-bg: get($color, gray, 1),
|
|
||||||
frame-bg: get($color, gray, 0),
|
|
||||||
border: get($color, gray, 3),
|
|
||||||
faint-border: get($color, gray, 2),
|
|
||||||
link: get($color, blue, 9),
|
|
||||||
review-count: #0a0,
|
|
||||||
new-count: get($color, blue, 9),
|
|
||||||
learn-count: get($color, orange, 7),
|
|
||||||
zero-count: get($color, gray, 2),
|
|
||||||
slightly-grey-text: get($color, gray, 7),
|
|
||||||
highlight-bg: get($color, cyan, 2),
|
|
||||||
highlight-fg: black,
|
|
||||||
disabled: get($color, gray, 5),
|
|
||||||
card-view-bg: get($color, blue, 5),
|
|
||||||
note-view-bg: get($color, green, 5),
|
|
||||||
flag1-fg: get($color, red, 6),
|
|
||||||
flag2-fg: get($color, orange, 5),
|
|
||||||
flag3-fg: get($color, green, 5),
|
|
||||||
flag4-fg: get($color, blue, 5),
|
|
||||||
flag5-fg: get($color, fuchsia, 4),
|
|
||||||
flag6-fg: get($color, teal, 5),
|
|
||||||
flag7-fg: get($color, purple, 6),
|
|
||||||
flag1-bg: get($color, red, 5),
|
|
||||||
flag2-bg: get($color, orange, 3),
|
|
||||||
flag3-bg: get($color, green, 3),
|
|
||||||
flag4-bg: get($color, blue, 3),
|
|
||||||
flag5-bg: get($color, fuchsia, 2),
|
|
||||||
flag6-bg: get($color, teal, 4),
|
|
||||||
flag7-bg: get($color, purple, 4),
|
|
||||||
buried-fg: get($color, amber, 5),
|
|
||||||
suspended-fg: get($color, yellow, 4),
|
|
||||||
suspended-bg: get($color, yellow, 1),
|
|
||||||
marked-bg: get($color, indigo, 2),
|
|
||||||
tooltip-bg: get($color, gray, 0),
|
|
||||||
focus-border: get($color, indigo, 6),
|
|
||||||
),
|
),
|
||||||
dark: (
|
),
|
||||||
text-fg: get($color, gray, 0),
|
colors: (
|
||||||
window-bg: get($color, gray, 6),
|
text-fg: (
|
||||||
frame-bg: get($color, gray, 7),
|
light: get($color, gray, 9),
|
||||||
border: get($color, gray, 5),
|
dark: get($color, gray, 0),
|
||||||
faint-border: get($color, gray, 8),
|
),
|
||||||
link: get($color, blue, 2),
|
window-bg: (
|
||||||
review-count: get($color, green, 4),
|
light: get($color, gray, 1),
|
||||||
new-count: get($color, blue, 2),
|
dark: get($color, gray, 6),
|
||||||
learn-count: get($color, red, 4),
|
),
|
||||||
zero-count: get($color, gray, 7),
|
frame-bg: (
|
||||||
slightly-grey-text: get($color, gray, 4),
|
light: get($color, gray, 0),
|
||||||
highlight-bg: get($color, cyan, 2),
|
dark: get($color, gray, 7),
|
||||||
highlight-fg: white,
|
),
|
||||||
disabled: get($color, gray, 6),
|
border: (
|
||||||
card-view-bg: get($color, blue, 4),
|
light: get($color, gray, 3),
|
||||||
note-view-bg: get($color, green, 4),
|
dark: get($color, gray, 5),
|
||||||
flag1-fg: get($color, red, 4),
|
),
|
||||||
flag2-fg: get($color, orange, 4),
|
faint-border: (
|
||||||
flag3-fg: get($color, green, 4),
|
light: get($color, gray, 2),
|
||||||
flag4-fg: get($color, blue, 4),
|
dark: get($color, gray, 8),
|
||||||
flag5-fg: get($color, fuchsia, 3),
|
),
|
||||||
flag6-fg: get($color, teal, 4),
|
link: (
|
||||||
flag7-fg: get($color, purple, 5),
|
light: get($color, blue, 9),
|
||||||
flag1-bg: get($color, red, 6),
|
dark: get($color, blue, 2),
|
||||||
flag2-bg: get($color, orange, 5),
|
),
|
||||||
flag3-bg: get($color, green, 5),
|
review-count: (
|
||||||
flag4-bg: get($color, blue, 5),
|
light: get($color, green, 7),
|
||||||
flag5-bg: get($color, fuchsia, 5),
|
dark: get($color, green, 4),
|
||||||
flag6-bg: get($color, teal, 5),
|
),
|
||||||
flag7-bg: get($color, purple, 7),
|
new-count: (
|
||||||
buried-fg: get($color, amber, 8),
|
light: get($color, blue, 9),
|
||||||
suspended-fg: get($color, yellow, 1),
|
dark: get($color, blue, 2),
|
||||||
suspended-bg: get($color, yellow, 5),
|
),
|
||||||
marked-bg: get($color, purple, 5),
|
learn-count: (
|
||||||
tooltip-bg: get($color, gray, 8),
|
light: get($color, orange, 7),
|
||||||
focus-border: get($color, indigo, 5),
|
dark: get($color, red, 4),
|
||||||
|
),
|
||||||
|
zero-count: (
|
||||||
|
light: get($color, gray, 2),
|
||||||
|
dark: get($color, gray, 7),
|
||||||
|
),
|
||||||
|
slightly-grey-text: (
|
||||||
|
light: get($color, gray, 7),
|
||||||
|
dark: get($color, gray, 4),
|
||||||
|
),
|
||||||
|
highlight-bg: (
|
||||||
|
light: get($color, cyan, 2),
|
||||||
|
dark: get($color, cyan, 2),
|
||||||
|
),
|
||||||
|
highlight-fg: (
|
||||||
|
light: black,
|
||||||
|
dark: white,
|
||||||
|
),
|
||||||
|
disabled: (
|
||||||
|
light: get($color, gray, 5),
|
||||||
|
dark: get($color, gray, 6),
|
||||||
|
),
|
||||||
|
card-view-bg: (
|
||||||
|
light: get($color, blue, 5),
|
||||||
|
dark: get($color, blue, 4),
|
||||||
|
),
|
||||||
|
note-view-bg: (
|
||||||
|
light: get($color, green, 5),
|
||||||
|
dark: get($color, green, 4),
|
||||||
|
),
|
||||||
|
flag1-fg: (
|
||||||
|
light: get($color, red, 6),
|
||||||
|
dark: get($color, red, 4),
|
||||||
|
),
|
||||||
|
flag2-fg: (
|
||||||
|
light: get($color, orange, 5),
|
||||||
|
dark: get($color, orange, 4),
|
||||||
|
),
|
||||||
|
flag3-fg: (
|
||||||
|
light: get($color, green, 5),
|
||||||
|
dark: get($color, green, 4),
|
||||||
|
),
|
||||||
|
flag4-fg: (
|
||||||
|
light: get($color, blue, 5),
|
||||||
|
dark: get($color, blue, 4),
|
||||||
|
),
|
||||||
|
flag5-fg: (
|
||||||
|
light: get($color, fuchsia, 4),
|
||||||
|
dark: get($color, fuchsia, 3),
|
||||||
|
),
|
||||||
|
flag6-fg: (
|
||||||
|
light: get($color, teal, 5),
|
||||||
|
dark: get($color, teal, 4),
|
||||||
|
),
|
||||||
|
flag7-fg: (
|
||||||
|
light: get($color, purple, 6),
|
||||||
|
dark: get($color, purple, 5),
|
||||||
|
),
|
||||||
|
flag1-bg: (
|
||||||
|
light: get($color, red, 5),
|
||||||
|
dark: get($color, red, 6),
|
||||||
|
),
|
||||||
|
flag2-bg: (
|
||||||
|
light: get($color, orange, 3),
|
||||||
|
dark: get($color, orange, 5),
|
||||||
|
),
|
||||||
|
flag3-bg: (
|
||||||
|
light: get($color, green, 3),
|
||||||
|
dark: get($color, green, 5),
|
||||||
|
),
|
||||||
|
flag4-bg: (
|
||||||
|
light: get($color, blue, 3),
|
||||||
|
dark: get($color, blue, 5),
|
||||||
|
),
|
||||||
|
flag5-bg: (
|
||||||
|
light: get($color, fuchsia, 2),
|
||||||
|
dark: get($color, fuchsia, 5),
|
||||||
|
),
|
||||||
|
flag6-bg: (
|
||||||
|
light: get($color, teal, 4),
|
||||||
|
dark: get($color, teal, 5),
|
||||||
|
),
|
||||||
|
flag7-bg: (
|
||||||
|
light: get($color, purple, 4),
|
||||||
|
dark: get($color, purple, 7),
|
||||||
|
),
|
||||||
|
buried-fg: (
|
||||||
|
light: get($color, amber, 5),
|
||||||
|
dark: get($color, amber, 8),
|
||||||
|
),
|
||||||
|
suspended-fg: (
|
||||||
|
light: get($color, yellow, 4),
|
||||||
|
dark: get($color, yellow, 1),
|
||||||
|
),
|
||||||
|
suspended-bg: (
|
||||||
|
light: get($color, yellow, 1),
|
||||||
|
dark: get($color, yellow, 5),
|
||||||
|
),
|
||||||
|
marked-bg: (
|
||||||
|
light: get($color, indigo, 2),
|
||||||
|
dark: get($color, purple, 5),
|
||||||
|
),
|
||||||
|
tooltip-bg: (
|
||||||
|
light: get($color, gray, 0),
|
||||||
|
dark: get($color, gray, 8),
|
||||||
|
),
|
||||||
|
focus-border: (
|
||||||
|
light: get($color, indigo, 6),
|
||||||
|
dark: get($color, indigo, 5),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@each $name, $value in get($vars, themes, light) {
|
@each $name, $map in map-get($vars, colors) {
|
||||||
--#{$name}: #{$value};
|
--#{$name}: #{map-get($map, light)};
|
||||||
}
|
}
|
||||||
&.night-mode {
|
&.night-mode {
|
||||||
@each $name, $value in get($vars, themes, dark) {
|
@each $name, $map in get($vars, colors) {
|
||||||
--#{$name}: #{$value};
|
--#{$name}: #{map-get($map, dark)};
|
||||||
}
|
}
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* separate rule for cleaner dev tools appearance */
|
|
||||||
:root {
|
:root {
|
||||||
@each $name, $value in get($vars, props) {
|
@each $name, $map in map-get($vars, props) {
|
||||||
--#{$name}: #{$value};
|
$val: map-get($map, default);
|
||||||
|
@if $val {
|
||||||
|
--#{$name}: #{$val};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@each $name, $map in map-get($vars, props) {
|
||||||
|
$val: map-get($map, light);
|
||||||
|
@if $val {
|
||||||
|
--#{$name}: #{$val};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.night-mode {
|
||||||
|
@each $name, $map in map-get($vars, props) {
|
||||||
|
$val: map-get($map, dark);
|
||||||
|
@if $val {
|
||||||
|
--#{$name}: #{$val};
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue