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 "sass:map";
@use "functions" as *;

$vars: (
    props: (
        border-radius: (
            default: 5px,
        ),
    ),
    colors: (
        canvas: (
            default: (
                light: color(gray, 1),
                dark: color(gray, 7),
            ),
            outset: (
                light: color(gray, 0),
                dark: color(gray, 5),
            ),
            inset: (
                light: color(gray, 1),
                dark: color(gray, 8),
            ),
            overlay: (
                light: color(gray, 0),
                dark: color(gray, 9),
            ),
        ),
        border: (
            default: (
                light: color(gray, 3),
                dark: color(gray, 8),
            ),
            subtle: (
                light: color(gray, 2),
                dark: color(gray, 7),
            ),
            focus: (
                light: color(indigo, 6),
                dark: color(indigo, 5),
            ),
        ),
        fg: (
            default: (
                light: color(gray, 9),
                dark: color(gray, 1),
            ),
            subtle: (
                light: color(gray, 7),
                dark: color(gray, 3),
            ),
            disabled: (
                light: color(gray, 5),
                dark: color(gray, 5),
            ),
            faint: (
                light: color(gray, 2),
                dark: color(gray, 8),
            ),
        ),
        accent: (
            card: (
                light: color(blue, 5),
                dark: color(blue, 4),
            ),
            note: (
                light: color(green, 5),
                dark: color(green, 4),
            ),
            link: (
                light: color(blue, 9),
                dark: color(blue, 2),
            ),
            danger: (
                light: color(red, 5),
                dark: color(red, 4),
            ),
        ),
        flag: (
            1: (
                light: color(red, 6),
                dark: color(red, 4),
            ),
            2: (
                light: color(orange, 5),
                dark: color(orange, 4),
            ),
            3: (
                light: color(green, 5),
                dark: color(green, 4),
            ),
            4: (
                light: color(blue, 6),
                dark: color(blue, 5),
            ),
            5: (
                light: color(fuchsia, 5),
                dark: color(fuchsia, 4),
            ),
            6: (
                light: color(teal, 5),
                dark: color(teal, 4),
            ),
            7: (
                light: color(purple, 6),
                dark: color(purple, 5),
            ),
        ),
        state: (
            new: (
                light: color(blue, 5),
                dark: color(blue, 3),
            ),
            learn: (
                light: color(red, 6),
                dark: color(red, 4),
            ),
            review: (
                light: color(green, 6),
                dark: color(green, 5),
            ),
            buried: (
                light: color(amber, 5),
                dark: color(amber, 8),
            ),
            suspended: (
                light: color(yellow, 4),
                dark: color(yellow, 1),
            ),
            marked: (
                light: color(indigo, 2),
                dark: color(purple, 5),
            ),
        ),
        highlight: (
            bg: (
                light: color(cyan, 4),
                dark: color(cyan, 2),
            ),
            fg: (
                light: black,
                dark: white,
            ),
        ),
    ),
);

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

:root {
    $props: map.get($vars, props);

    @each $name, $val in vars-from-map($props, default) {
        #{$name}: #{$val};
    }
    @each $name, $val in vars-from-map($props, light) {
        #{$name}: #{$val};
    }
    &.night-mode {
        @each $name, $val in vars-from-map($props, dark) {
            #{$name}: #{$val};
        }
    }
}