Anki/sass/_vars.scss

/* Copyright: Ankitects Pty Ltd and contributors
 * License: GNU AGPL, version 3 or later, http://www.gnu.org/licenses/agpl.html */

@use "colors" as *;

@function get($map, $keys...) {
    @each $key in $keys {
        $map: map-get($map, $key);
    }
    @return $map;
}

$vars: (
    props: (
        border-radius: (
            default: 5px,
        ),
    ),
    colors: (
        text-fg: (
            light: get($color, gray, 9),
            dark: get($color, gray, 0),
        ),
        window-bg: (
            light: get($color, gray, 0),
            dark: get($color, gray, 6),
        ),
        frame-bg: (
            light: white,
            dark: get($color, gray, 7),
        ),
        border: (
            light: get($color, gray, 3),
            dark: get($color, gray, 8),
        ),
        faint-border: (
            light: get($color, gray, 2),
            dark: get($color, gray, 7),
        ),
        slightly-grey-text: (
            light: get($color, gray, 7),
            dark: get($color, gray, 4),
        ),
        disabled: (
            light: get($color, gray, 5),
            dark: get($color, gray, 6),
        ),
        link: (
            light: get($color, blue, 9),
            dark: get($color, blue, 2),
        ),
        review-count: (
            light: get($color, green, 7),
            dark: get($color, green, 4),
        ),
        new-count: (
            light: get($color, blue, 9),
            dark: get($color, blue, 2),
        ),
        learn-count: (
            light: get($color, orange, 7),
            dark: get($color, red, 4),
        ),
        zero-count: (
            light: get($color, gray, 2),
            dark: get($color, gray, 7),
        ),
        highlight-bg: (
            light: get($color, cyan, 2),
            dark: get($color, cyan, 2),
        ),
        highlight-fg: (
            light: black,
            dark: white,
        ),
        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),
        ),
        code-bg: (
            light: white,
            dark: #272822,
        ),
    ),
);

:root {
    @each $name, $map in map-get($vars, colors) {
        --#{$name}: #{map-get($map, light)};
    }
    &.night-mode {
        @each $name, $map in get($vars, colors) {
            --#{$name}: #{map-get($map, dark)};
        }
        color-scheme: dark;
    }
}

:root {
    @each $name, $map in map-get($vars, props) {
        $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};
            }
        }
    }
}