// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

import { ColorSchemeSelector } from "color-scheme.slint";

export struct TextStyle {
    font-size: relative-font-size,
    font-weight: int,
}

export global CosmicFontSettings {
    out property <int> light-font-weight: 300;
    out property <int> regular-font-weight: 400;
    out property <int> semibold-font-weight: 600;
    out property <TextStyle> body: {
        font-size: 14 * 0.0769rem,
        font-weight: regular-font-weight
    };
    out property <TextStyle> body-strong: {
        font-size: 14 * 0.0769rem,
        font-weight: semibold-font-weight
    };
    out property <TextStyle> title: {
        font-size: 24 * 0.0769rem,
        font-weight: light-font-weight
    };
}

export global CosmicPalette {
    in-out property <ColorScheme> color-scheme: ColorSchemeSelector.color-scheme;
    property <bool> dark-color-scheme: {
        if (color-scheme == ColorScheme.unknown) {
            return SlintInternal.color-scheme == ColorScheme.dark;
        }
        return color-scheme == ColorScheme.dark;
    }

    // base palette
    out property <brush> background: dark-color-scheme ? #1B1B1B : #D7D7D7;
    out property <brush> foreground: dark-color-scheme ? #C4C4C4 : #292929;
    out property <brush> alternate-background: dark-color-scheme ? #2E2E2E : #F2F2F2;
    out property <brush> alternate-foreground: dark-color-scheme ? #DEDEDE : #000000E6;
    out property <brush> control-background: dark-color-scheme ? #262626 : #C7C7C7;
    out property <brush> control-foreground: dark-color-scheme ? #C4C4C4 : #3D3D3D;
    out property <brush> accent-background: dark-color-scheme ? #63D0DF : #00525A;
    out property <brush> accent-foreground: dark-color-scheme ? #161616 : #FFFFFF;
    out property <brush> selection-background: dark-color-scheme ? #63D0DF : #00525A;
    out property <brush> selection-foreground: dark-color-scheme ? #161616 : #FFFFFF;
    out property <brush> border: dark-color-scheme ? #C4C4C433 : #29292933;

    // additional cosmic palette
    out property <brush> state-hover: #63636333;
    out property <brush> state-pressed: dark-color-scheme ? #16161680 : #BEBEBE80;
    out property <brush> state-selected: dark-color-scheme ? #4D4D4D4D : #98989833;
    out property <brush> state-focus: dark-color-scheme ? #63D0DF : #00525A;
    out property <brush> alternate-border: dark-color-scheme ? #BEBEBE : #161616;
    out property <brush> control-divider: dark-color-scheme ? #DEDEDE33 : #3D3D3D33;
    out property <brush> shadow: dark-color-scheme ? #00000052 : #00000014;
    out property <brush> accent-text: dark-color-scheme ? #63D0DF : #00525A;
    out property <brush> placeholder-foreground: dark-color-scheme ? #959595 : #585858;
    out property <brush> neutral-5-background: #636363;
    out property <brush> neutral-6-background: dark-color-scheme ? #808080 :#484848;

    out property <brush> control-disabled: dark-color-scheme ? #212121 :#cfcfcf;
    out property <brush> text-disabled: dark-color-scheme ? #707070 :#808080;
    out property <brush> secondary-accent-background: dark-color-scheme ? #51a3ae : #367378;

    out property <brush> state: dark-color-scheme ? #ffffff : #000000;
    out property <brush> state-secondary: dark-color-scheme ? #000000 : #ffffff;
}

export global Icons {
    out property <image> arrow-down: @image-url("_arrow_down.svg");
    out property <image> arrow-up: @image-url("_arrow_up.svg");
    out property <image> check-mark: @image-url("_check-mark.svg");
    out property <image> dropdown: @image-url("_pane_down.svg");
    out property <image> keyboard: @image-url("_keyboard.svg");
    out property <image> clock: @image-url("_clock.svg");
    out property <image> arrow-back: @image-url("_arrow_back.svg");
    out property <image> arrow-forward: @image-url("_arrow_forward.svg");
    out property <image> edit: @image-url("_edit.svg");
    out property <image> calendar: @image-url("_calendar.svg");
}

export global CosmicSizeSettings {
    out property <length> item-height: 40px;
}