keyoxide-web/static-src/styles/vars.scss

/*
Copyright (C) 2023 Yarmo Mackenbach

This program is free software: you can redistribute it and/or modify it under
the terms of the GNU Affero General Public License as published by the Free
Software Foundation, either version 3 of the License, or (at your option)
any later version.

This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
details.

You should have received a copy of the GNU Affero General Public License along
with this program. If not, see <https://www.gnu.org/licenses/>.

Also add information on how to contact you by electronic and paper mail.

If your software can interact with users remotely through a computer network,
you should also make sure that it provides a way for users to get its source.
For example, if your program is a web application, its interface could display
a "Source" link that leads users to an archive of the code. There are many
ways you could offer source, and different solutions will be better for different
programs; see section 13 for the specific requirements.

You should also get your employer (if you work as a programmer) or school,
if any, to sign a "copyright disclaimer" for the program, if necessary. For
more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
*/
:root {
    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%);
    --grey-10: hsl(0, 0%, 99%);
    --grey-50: hsl(0, 0%, 95%);
    --grey-100: hsl(0, 0%, 90%);
    --grey-200: hsl(0, 0%, 80%);
    --grey-300: hsl(0, 0%, 70%);
    --grey-400: hsl(0, 0%, 60%);
    --grey-500: hsl(0, 0%, 50%);
    --grey-600: hsl(0, 0%, 40%);
    --grey-700: hsl(0, 0%, 30%);
    --grey-800: hsl(0, 0%, 20%);
    --grey-900: hsl(0, 0%, 10%);
    --grey-950: hsl(0, 0%, 7%);
    --green-300: hsl(110, 45%, 70%);
    --green-400: hsl(110, 45%, 60%);
    --green-600: hsl(110, 45%, 40%);
    --red-300: hsl(10, 60%, 70%);
    --red-400: hsl(10, 60%, 60%);
    --blue-500: rgb(67, 176, 234);
    --blue-700: hsl(201, 90%, 30%);
    --purple-50: rgb(249, 248, 251);
    --purple-100: rgb(238, 236, 248);
    --purple-200: hsl(250, 48%, 90%);
    --purple-300: hsl(250, 48%, 80%);
    --purple-400: hsl(250, 48%, 70%);
    --purple-500: hsl(250, 48%, 65%);
    --purple-600: hsl(250, 48%, 60%);
    --purple-700: hsl(250, 48%, 55%);
    --purple-900: hsl(250, 38%, 45%);
    --yellow-100: hsl(56, 100%, 95%);
    --yellow-200: hsl(56, 100%, 90%);
    --yellow-500: hsl(56, 100%, 65%);
}

:root {
    --primary-color-light: var(--purple-700);
    --primary-color-dark: var(--purple-300);

    --primary-color-subtle-light: var(--purple-400);
    --primary-color-subtle-dark: var(--purple-500);

    --background-color-light: #fafafa;
    --background-color-dark: #0a0a0a;
}
:root {
    --primary-color: var(--primary-color-light);
    --primary-color-subtle: var(--primary-color-subtle-light);

    --body-background-color: var(--background-color-light);
    --section-background-color: var(--white);

    --text-color: var(--grey-800);
    --text-color-subtle: var(--grey-500);
    --text-color-inverse: var(--white);
    --h1-color: var(--text-color);
    --h2-color: var(--text-color);
    --h2-small-color: var(--primary-color-subtle);
    --h3-color: var(--text-color-subtle);
    --h3-small-color: var(--primary-color-subtle);
    --h4-color: var(--text-color-subtle);
    --h4-small-color: var(--primary-color-subtle);

    --link-color: var(--blue-700);
    --link-color-subtle: var(--text-color);
    --link-color-hover: var(--primary-color);

    --line-color-subtle: var(--grey-200);

    --button-text-color: var(--text-color);
    --button-text-color-hover: var(--text-color);
    --button-border-color: var(--grey-300);
    --button-border-color-hover: var(--grey-300);
    --button-background-color: var(--grey-100);
    --button-background-color-hover: var(--grey-200);

    --input-text-color: var(--text-color);
    --input-text-color-hover: var(--text-color);
    --input-border-color: var(--grey-300);
    --input-border-color-hover: var(--grey-300);
    --input-background-color: var(--white);
    --input-background-color-hover: var(--white);

    --footer-text-color: var(--text-color-subtle);
    
    @media (prefers-color-scheme: dark) {
        color-scheme: dark;

        --primary-color: var(--primary-color-dark);
        --primary-color-subtle: var(--primary-color-subtle-dark);

        --body-background-color: var(--background-color-dark);
        --section-background-color: var(--grey-900);

        --text-color: var(--grey-50);
        --text-color-subtle: var(--grey-300);
        --text-color-inverse: var(--grey-800);
        --h1-color: var(--text-color);
        --h2-color: var(--text-color);
        --h2-small-color: var(--primary-color-subtle);
        --h3-color: var(--text-color-subtle);
        --h3-small-color: var(--primary-color-subtle);
        --h4-color: var(--text-color-subtle);
        --h4-small-color: var(--primary-color-subtle);

        --link-color: var(--blue-500);
        --link-color-subtle: var(--text-color);
        --link-color-hover: var(--primary-color);

        --line-color-subtle: var(--grey-700);

        --button-text-color: var(--text-color);
        --button-text-color-hover: var(--text-color);
        --button-border-color: var(--grey-700);
        --button-border-color-hover: var(--grey-700);
        --button-background-color: var(--grey-700);
        --button-background-color-hover: var(--grey-600);

        --input-text-color: var(--text-color);
        --input-text-color-hover: var(--text-color);
        --input-border-color: var(--grey-700);
        --input-border-color-hover: var(--grey-700);
        --input-background-color: var(--grey-800);
        --input-background-color-hover: var(--grey-800);

        --footer-text-color: var(--text-color-subtle);
    }
}

kx-claim, kx-key {
    --loader-color: var(--grey-400);
    --success-color: var(--green-600);
    --failure-color: var(--red-400);

    --background-color: var(--grey-10);
    --header-background-color: var(--grey-50);
    
    @media (prefers-color-scheme: dark) {
        --loader-color: var(--grey-400);
        --success-color: var(--green-400);
        --failure-color: var(--red-300);
    
        --background-color: var(--grey-800);
        --header-background-color: var(--grey-700);    
    }
}