/* 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, ), 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), window-bg: get($color, gray, 6), frame-bg: get($color, gray, 7), border: get($color, gray, 5), faint-border: get($color, gray, 8), link: get($color, blue, 2), review-count: get($color, green, 4), new-count: get($color, blue, 2), learn-count: get($color, red, 4), zero-count: get($color, gray, 7), slightly-grey-text: get($color, gray, 4), highlight-bg: get($color, cyan, 2), highlight-fg: white, disabled: get($color, gray, 6), card-view-bg: get($color, blue, 4), note-view-bg: get($color, green, 4), flag1-fg: get($color, red, 4), flag2-fg: get($color, orange, 4), flag3-fg: get($color, green, 4), flag4-fg: get($color, blue, 4), flag5-fg: get($color, fuchsia, 3), flag6-fg: get($color, teal, 4), flag7-fg: get($color, purple, 5), flag1-bg: get($color, red, 6), flag2-bg: get($color, orange, 5), flag3-bg: get($color, green, 5), flag4-bg: get($color, blue, 5), flag5-bg: get($color, fuchsia, 5), flag6-bg: get($color, teal, 5), flag7-bg: get($color, purple, 7), buried-fg: get($color, amber, 8), suspended-fg: get($color, yellow, 1), suspended-bg: get($color, yellow, 5), marked-bg: get($color, purple, 5), tooltip-bg: get($color, gray, 8), focus-border: get($color, indigo, 5), ), ), ); :root { @each $name, $value in get($vars, themes, light) { --#{$name}: #{$value}; } &.night-mode { @each $name, $value in get($vars, themes, dark) { --#{$name}: #{$value}; } color-scheme: dark; } } /* separate rule for cleaner dev tools appearance */ :root { @each $name, $value in get($vars, props) { --#{$name}: #{$value}; } }