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 *;
@use "colors" as *;

@function palette($key, $shade) {
    $color: map.get($colors, $key);
    @return map.get($color, $shade);
}

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

@function color($keyword) {
    @return var(--#{$keyword});
}

@function palette-of($keyword, $theme: default) {
    $colors: map.get($vars, colors);
    @return get-value-from-map($colors, $keyword, $theme);
}

@function prop($keyword) {
    @return var(--#{$keyword});
}

: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;
    }
}

: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, dark) {
            #{$name}: #{$val};
        }
    }
}