// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial


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

// helper to create material design token like path md.sys.colors.
struct Color  {
    background: color,
    surface: color,
    surface-variant: color,
    on-surface: color,
    on-surface-variant: color,
    primary: color,
    on-primary: color,
    primary-ripple: color,
    shadow: color,
    outline: color,
    outline-variant: color,
    secondary-container: color,
    on-secondary-container: color,
    secondary-ripple: color,
}

// typo settings
struct Label  {
    size: relative-font-size,
    weight: int
}

// helper to create material design token like path md.sys.elevation.
struct Elevation  {
    level0: length,
    level1: length,
    level2: length
}

// helper to create material design token like path md.sys.typescale.
struct Typescale  {
    label-large: Label,
    label-medium: Label,
    body-large: Label,
    body-small: Label,
    title-small: Label,
}

// helper to create material design token like path md.sys.
struct Sys  {
    color: Color,
    elevation: Elevation,
    typescale: Typescale
}

// Material Desigin v3 style defintions.
export global md  {
    in-out property<bool> dark-color-scheme: ColorSchemeSelector.dark-color-scheme;

    out property<Sys> sys: {
        color: {
            background: !root.dark-color-scheme ? #FFFBFE : #1C1B1F,
            surface: !root.dark-color-scheme ? #FFFBFE : #1C1B1F,
            surface-variant: !root.dark-color-scheme ? #E7E0EC.darker(0.2) : #49454F,
            on-surface: !root.dark-color-scheme ? #1C1B1F : #E6E1E5,
            on-surface-variant: !root.dark-color-scheme ? #49454E : #CAC4D0,
            surface-tint: !root.dark-color-scheme ? #6750A4 : #D0BCFF,
            primary: !root.dark-color-scheme ? #6750A4 : #D0BCFF,
            primary-ripple: !root.dark-color-scheme ? #D0BCFF : #6750A4,
            on-primary: !root.dark-color-scheme ? #FFFFFF : #371E73,
            shadow: #000000,
            outline: !root.dark-color-scheme ? #79747E : #938F99,
            outline-variant: !root.dark-color-scheme ? #C4C7C5 : #444746,
            secondary-container:  !root.dark-color-scheme ? #E8DEF8 : #4A4458,
            on-secondary-container:  !root.dark-color-scheme ? #1E192B : #E8DEF8,
            secondary-ripple: !root.dark-color-scheme ? #fffc : #000000,
        },

        elevation: {
            level0: 0px,
            level1: 1px,
            level2: 2px
        },

        typescale: {
            label-large: {
                size: 14 * 0.0625rem,
                weight: 500
            },
            label-medium: {
                size: 12 * 0.0625rem,
                weight: 500
            },
            body-large: {
                size: 16 * 0.0625rem,
                weight: 400
            },
            body-small: {
                size: 12 * 0.0625rem,
                weight: 400
            },
            title-small: {
                size: 14 * 0.0625rem,
                weight: 500
            },
        }
    };
}