GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-23 16:26:40 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Add Sass functions to access color palette and semantic variables

Browse source 
in response to https://github.com/ankitects/anki/pull/2016#issuecomment-1220571076
This commit is contained in:
Matthias Metelka 2022-08-30 17:14:28 +02:00
parent bb172edf05
commit e9f75e1756
3 changed files with 123 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
qt/tools/extract_sass_vars.py
View file

@ -63,7 +63,7 @@ for line in open(vars_scss):
if reached_colors: if reached_colors:
line = re.sub( line = re.sub(
r"color\((.+), (\d)\)", r"palette\((.+), (\d)\)",
lambda m: palette[m.group(1)][m.group(2)], lambda m: palette[m.group(1)][m.group(2)],
line, line,
) )

41
sass/_functions.scss
View file

@ -1,15 +1,10 @@
/* Copyright: Ankitects Pty Ltd and contributors /* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "sass:map";
@use "colors" as *;
@function color($key, $shade) { @use "sass:map";
$color: map.get($colors, $key); @use "sass:list";
@return map.get($color, $shade);
}
@function vars-from-map($map, $theme, $name: "-", $output: ()) { @function create-vars-from-map($map, $theme, $name: "-", $output: ()) {
@each $key, $value in $map { @each $key, $value in $map {
@if $key == $theme { @if $key == $theme {
@return map.set($output, $name, map.get($map, $key)); @return map.set($output, $name, map.get($map, $key));
@ -17,9 +12,37 @@
@if type-of($value) == "map" { @if type-of($value) == "map" {
$output: map-merge( $output: map-merge(
$output, $output,
vars-from-map($value, $theme, #{$name}-#{$key}, $output) create-vars-from-map($value, $theme, #{$name}-#{$key}, $output)
); );
} }
} }
@return $output; @return $output;
} }
@function map-deep-get($map, $keys) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
@function get-var-from-map($map, $keyword, $theme: default, $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);
}

156
sass/_vars.scss
View file

@ -3,6 +3,12 @@
@use "sass:map"; @use "sass:map";
@use "functions" as *; @use "functions" as *;
@use "colors" as *;
@function palette($key, $shade) {
$color: map.get($colors, $key);
@return map.get($color, $shade);
}
$vars: ( $vars: (
props: ( props: (
@ -13,142 +19,151 @@ $vars: (
colors: ( colors: (
canvas: ( canvas: (
default: ( default: (
light: color(gray, 0), light: palette(gray, 0),
dark: color(gray, 6), dark: palette(gray, 6),
), ),
outset: ( outset: (
light: white, light: white,
dark: color(gray, 5), dark: palette(gray, 5),
), ),
inset: ( inset: (
light: color(gray, 1), light: palette(gray, 1),
dark: color(gray, 7), dark: palette(gray, 7),
), ),
overlay: ( overlay: (
light: white, light: white,
dark: color(gray, 9), dark: palette(gray, 9),
), ),
), ),
border: ( border: (
default: ( default: (
light: color(gray, 3), light: palette(gray, 3),
dark: color(gray, 8), dark: palette(gray, 8),
), ),
subtle: ( subtle: (
light: color(gray, 3), light: palette(gray, 2),
dark: color(gray, 7), dark: palette(gray, 7),
), ),
focus: ( focus: (
light: color(indigo, 5), light: palette(indigo, 5),
dark: color(indigo, 5), dark: palette(indigo, 5),
),
),
button: (
focus: (
light: palette(cyan, 2),
dark: palette(cyan, 4),
), ),
), ),
fg: ( fg: (
default: ( default: (
light: color(gray, 9), light: palette(gray, 9),
dark: color(gray, 1), dark: palette(gray, 1),
), ),
subtle: ( subtle: (
light: color(gray, 7), light: palette(gray, 7),
dark: color(gray, 3), dark: palette(gray, 3),
), ),
disabled: ( disabled: (
light: color(gray, 5), light: palette(gray, 5),
dark: color(gray, 5), dark: palette(gray, 5),
), ),
faint: ( faint: (
light: color(gray, 2), light: palette(gray, 2),
dark: color(gray, 8), dark: palette(gray, 8),
), ),
), ),
shadow: ( shadow: (
default: ( default: (
light: color(gray, 3), light: palette(gray, 3),
dark: color(gray, 8), dark: palette(gray, 8),
), ),
inset: ( inset: (
light: color(gray, 2), light: palette(gray, 2),
dark: color(gray, 7), dark: palette(gray, 7),
),
focus: (
default: palette(indigo, 5),
), ),
), ),
accent: ( accent: (
card: ( card: (
light: color(blue, 5), light: palette(blue, 5),
dark: color(blue, 4), dark: palette(blue, 4),
), ),
note: ( note: (
light: color(green, 5), light: palette(green, 5),
dark: color(green, 4), dark: palette(green, 4),
), ),
link: ( link: (
light: color(blue, 9), light: palette(blue, 9),
dark: color(blue, 2), dark: palette(blue, 2),
), ),
danger: ( danger: (
light: color(red, 5), light: palette(red, 5),
dark: color(red, 4), dark: palette(red, 4),
), ),
), ),
flag: ( flag: (
1: ( 1: (
light: color(red, 6), light: palette(red, 6),
dark: color(red, 4), dark: palette(red, 4),
), ),
2: ( 2: (
light: color(orange, 5), light: palette(orange, 5),
dark: color(orange, 4), dark: palette(orange, 4),
), ),
3: ( 3: (
light: color(green, 5), light: palette(green, 5),
dark: color(green, 4), dark: palette(green, 4),
), ),
4: ( 4: (
light: color(blue, 6), light: palette(blue, 6),
dark: color(blue, 5), dark: palette(blue, 5),
), ),
5: ( 5: (
light: color(fuchsia, 5), light: palette(fuchsia, 5),
dark: color(fuchsia, 4), dark: palette(fuchsia, 4),
), ),
6: ( 6: (
light: color(teal, 5), light: palette(teal, 5),
dark: color(teal, 4), dark: palette(teal, 4),
), ),
7: ( 7: (
light: color(purple, 6), light: palette(purple, 6),
dark: color(purple, 5), dark: palette(purple, 5),
), ),
), ),
state: ( state: (
new: ( new: (
light: color(blue, 5), light: palette(blue, 5),
dark: color(blue, 3), dark: palette(blue, 3),
), ),
learn: ( learn: (
light: color(red, 6), light: palette(red, 6),
dark: color(red, 4), dark: palette(red, 4),
), ),
review: ( review: (
light: color(green, 6), light: palette(green, 6),
dark: color(green, 5), dark: palette(green, 5),
), ),
buried: ( buried: (
light: color(amber, 5), light: palette(amber, 5),
dark: color(amber, 8), dark: palette(amber, 8),
), ),
suspended: ( suspended: (
light: color(yellow, 4), light: palette(yellow, 4),
dark: color(yellow, 1), dark: palette(yellow, 1),
), ),
marked: ( marked: (
light: color(indigo, 2), light: palette(indigo, 2),
dark: color(purple, 5), dark: palette(purple, 5),
), ),
), ),
highlight: ( highlight: (
bg: ( bg: (
light: color(cyan, 4), light: palette(cyan, 4),
dark: color(cyan, 2), dark: palette(cyan, 2),
), ),
fg: ( fg: (
light: black, light: black,
@ -158,14 +173,24 @@ $vars: (
), ),
); );
@function color($keyword, $theme) {
$colors: map.get($vars, colors);
@return get-var-from-map($colors, $keyword, $theme);
}
@function prop($keyword, $theme) {
$props: map.get($vars, props);
@return get-var-from-map($props, $keyword, $theme);
}
:root { :root {
$colors: map.get($vars, colors); $colors: map.get($vars, colors);
@each $name, $val in vars-from-map($colors, light) { @each $name, $val in create-vars-from-map($colors, light) {
#{$name}: #{$val}; #{$name}: #{$val};
} }
color-scheme: light; color-scheme: light;
&.night-mode { &.night-mode {
@each $name, $val in vars-from-map($colors, dark) { @each $name, $val in create-vars-from-map($colors, dark) {
#{$name}: #{$val}; #{$name}: #{$val};
} }
color-scheme: dark; color-scheme: dark;
@ -174,15 +199,14 @@ $vars: (
:root { :root {
$props: map.get($vars, props); $props: map.get($vars, props);
@each $name, $val in create-vars-from-map($props, default) {
@each $name, $val in vars-from-map($props, default) {
#{$name}: #{$val}; #{$name}: #{$val};
} }
@each $name, $val in vars-from-map($props, light) { @each $name, $val in create-vars-from-map($props, light) {
#{$name}: #{$val}; #{$name}: #{$val};
} }
&.night-mode { &.night-mode {
@each $name, $val in vars-from-map($props, dark) { @each $name, $val in create-vars-from-map($props, dark) {
#{$name}: #{$val}; #{$name}: #{$val};
} }
} }