ncpn/styles/_theme.scss

@use "tailwind/border-radius";
@use "tailwind/colors";
@use "tailwind/spacing";
@use "tailwind/transition";
@use "tailwind/text";

html {
    color-scheme: light dark;
}

/* These need switchable client-side */
:root {
    /* Foreground */
    --color-fg-base: #{colors.$slate-700};
    --color-fg-deemphasized: #{colors.$slate-600};
    --color-fg-headings: #{colors.$slate-900};

    /* Background */
    --color-bg-base: #{colors.$slate-100};
    --color-bg-raised-1: #{colors.$slate-200};
    --color-bg-raised-2: #{colors.$slate-300};
    --color-bg-raised-3: #{colors.$slate-400};

    /* Borders */
    --color-bd-base: #{colors.$slate-300};
    --color-bd-highlighted-1: #{colors.$slate-500};
    --color-bd-highlighted-2: #{colors.$slate-600};

    @media (prefers-color-scheme: dark) {
        /* Foreground */
        --color-fg-base: #{colors.$slate-300};
        --color-fg-deemphasized: #{colors.$slate-400};
        --color-fg-headings: #{colors.$slate-100};

        /* Background */
        --color-bg-base: #{colors.$slate-900};
        --color-bg-raised-1: #{colors.$slate-800};
        --color-bg-raised-2: #{colors.$slate-700};

        /* Borders */
        --color-bd-base: #{colors.$slate-700};
        --color-bd-highlighted: #{colors.$slate-500};
    }
}

@mixin heading($disable-margin: false) {
    color: var(--color-fg-headings);
    font-weight: text.$font-weight-bold;
    @if $disable-margin {
        margin: 0;
    }
}

@mixin heading2($disable-margin: false) {
    @include heading($disable-margin);
    font-size: text.$font-size-4xl;
}

@mixin heading3($disable-margin: false) {
    @include heading($disable-margin);
    font-size: text.$font-size-3xl;
}

@mixin heading4($disable-margin: false) {
    @include heading($disable-margin);
    font-size: text.$font-size-2xl;
}

@mixin surface($is-interactive: false, $is-raised: false) {
    border: 1px solid var(--color-bd-base);
    border-radius: border-radius.$br-xl;
    transition-duration: transition.$duration-default;
    transition-timing-function: transition.$timing-fn-default;
    transition-property: background-color, border-color;

    @if $is-raised {
        background-color: var(--color-bg-raised-1);
    } @else {
        background-color: unset;
    }

    @if $is-interactive {
        cursor: pointer;

        &:hover,
        &:focus-visible {
            border-color: var(--color-bd-highlighted-1);
            @if $is-raised {
                background-color: var(--color-bg-raised-2);
            } @else {
                background-color: var(--color-bg-raised-1);
            }
        }

        &.active- {
            border-color: var(--color-bd-highlighted-1);
            @if $is-raised {
                background-color: var(--color-bg-raised-2);
            } @else {
                background-color: var(--color-bg-raised-1);
            }

            &:hover,
            &:focus-visible {
                border-color: var(--color-bd-highlighted-2);
                @if $is-raised {
                    background-color: var(--color-bg-raised-3);
                } @else {
                    background-color: var(--color-bg-raised-2);
                }
            }
        }
    }
}

@mixin button($is-raised: false) {
    @include surface(true, $is-raised);
    display: block;
    padding: spacing.s(1) spacing.s(3);
    font-size: text.$font-size-sm;
    color: unset;
}