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

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

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

export global Typography {
    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: 13 * 0.0769rem,
        font-weight: regular-font-weight
    };

    // needed?
    out property <TextStyle> body-strong: {
        font-size: 14 * 0.0769rem,
        font-weight: semibold-font-weight
    };
}

export global Palette {
    in-out property<bool> dark-color-scheme: ColorSchemeSelector.dark-color-scheme;

    // this are the final colors
    out property <brush> background: dark-color-scheme ? #282828 : #ffffff;
    out property <brush> background-secondary: dark-color-scheme ? #2c2c2c : #00000005;
    out property <brush> background-tertiary: dark-color-scheme ? #1e1e1e : #ffffff;
    out property <brush> background-quaternary: dark-color-scheme ? #1c1c1c : #f0f0f0;
    out property <brush> accent: dark-color-scheme ? #0055d1 : #007AFF;
    out property <brush> accent-secondary: dark-color-scheme ? #2076ee : #0063ea;
    out property <brush> accent-tertiary: dark-color-scheme ? #487aff : #66A1E3;
    out property <brush> accent-quaternary: dark-color-scheme ? #0055d14D : #007AFF4D;
    out property <brush> foreground: dark-color-scheme ? #ffffff : #000000;
    out property <brush> foreground-neg: dark-color-scheme ? #000000 : #ffffff;
    out property <brush> foreground-secondary: dark-color-scheme ? #ffffff40 : #00000040;
    out property <brush> surface: dark-color-scheme ? #616161 : #ffffff;
    out property <brush> surface-secondary: dark-color-scheme ? #7a7a7a : #f0f0f0;
    out property <brush> surface-tertiary: dark-color-scheme ? #616161B3 : #ffffffB3;
    out property <brush> surface-quaternary: dark-color-scheme ? #61616180 : #ffffff80;
    out property <brush> surface-alt: dark-color-scheme ? #414141 : #dadada;
    out property <brush> on-surface: #f0f0f0;
    out property <brush> hover: dark-color-scheme ? #2e2e2e : #e3e3e3;
    out property <brush> pressed: dark-color-scheme ? #b6b6b6 : #f0f0f0;
    out property <brush> border: dark-color-scheme ? #ffffff26 : #00000026;
    out property <brush> popup-border: dark-color-scheme ? #525252 :#0000000A;
    out property <brush> decent-border: dark-color-scheme ? #ffffff14 : #00000014;
    out property <brush> surface-thumb: dark-color-scheme ? #cacaca : #ffffff;
    out property <brush> separator: dark-color-scheme ? #000000 : #d9d9d9;

    // FIXME: dark color
    out property <brush> dimmer: @linear-gradient(180deg, #FFFFFFFF 100%, #FFFFFF00 0%);
}

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> chevron-down: @image-url("_chevron-down.svg");
    out property <image> chevron-up: @image-url("_chevron-up.svg");
    out property <image> down: @image-url("_down.svg");
    out property <image> dropdown: @image-url("_dropdown.svg");
    out property <image> left: @image-url("_left.svg");
    out property <image> right: @image-url("_right.svg");
    out property <image> up: @image-url("_up.svg");
}