slint/demos/energy-monitor/ui/theme.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

export struct Palette {
    // primary
    slint-blue: brush,
    pure-black: brush,
    dark-deep-blue: brush,
    shark-gray: brush,
    lemon-green: brush,
    lemon-green-op10: brush,
    white: brush,
    dimmer: brush,

    // slint blue
    slint-blue-50: brush,
    slint-blue-100: brush,
    slint-blue-200: brush,
    slint-blue-300: brush,
    slint-blue-400: brush,
    slint-blue-500: brush,
    slint-blue-600: brush,
    slint-blue-700: brush,
    slint-blue-800: brush,
    slint-blue-900: brush,

    // lime green
    lime-green-50: brush,
    lime-green-100: brush,
    lime-green-200: brush,
    lime-green-300: brush,
    lime-green-400: brush,
    lime-green-500: brush,
    lime-green-600: brush,
    lime-green-700: brush,
    lime-green-800: brush,
    lime-green-900: brush,

    // gradients
    lemon-green-gradient: brush,
    lemon-green-light-gradient: brush,
    lemon-green-radial-gradient: brush,
    slint-blue-gradient: brush,
    heliotrope-gradient: brush,
    dark-left-gradient: brush,
    dark-right-gradient: brush,
    ebony-radial-gradient: brush,
    bar-gradient: brush,
    alternative-bar-gradient: brush,
    alternative-light-bar-gradient: brush,
    inverted-bar-gradient: brush,
    inverted-alternative-bar-gradient: brush,
    bar-background-gradient: brush,
    tab-gradient: brush,
    background-gradient: brush,
}

export struct Spaces {
    small: length,
    medium: length,
    large: length,
}

export struct Durations {
    fast: duration,
    medium: duration,
    slow: duration,
}

struct Font {
    size: length,
    weight: float,
}

export struct Typo {
    label: Font,
    label-light: Font,
    header: Font,
    header-item: Font,
    header-item-light: Font,
    value: Font,
    description: Font,
    description-light: Font,
    value-big: Font,
}

export global Theme {
    in property <Palette> palette: {
        // primary
        slint-blue: #0025FF,
        pure-black: #000000,
        dark-deep-blue: #040708,
        shark-gray: #2C2F36,
        lemon-green: #DEFB3A,
        lemon-green-op10: #defb3a1a,
        white: #FFFFFF,
        dimmer: #0000007b,

        // slint blue
        slint-blue-50: #EEE6FF,
        slint-blue-100: #D0C3FF,
        slint-blue-200: #AF9AFF,
        slint-blue-300: #896FFF,
        slint-blue-400: #654EFF,
        slint-blue-500: #2F2AFF,
        slint-blue-600: #0025FF,
        slint-blue-700: #001FF7,
        slint-blue-800: #0019F2,
        slint-blue-900: #000AEF,

        // lime green
        lime-green-50: #FBFFE6,
        lime-green-100: #F4FDC0,
        lime-green-200: #EBFC93,
        lime-green-300: #E2FA63,
        lime-green-400: #DEFB3A,
        lime-green-500: #D6F800,
        lime-green-600: #CBE600,
        lime-green-700: #BBCF00,
        lime-green-800: #ACB700,
        lime-green-900: #D9D9D9,

        // gradients
        lemon-green-gradient: @linear-gradient(135deg, #defb3a75 0%, #defb3a00 100%),
        lemon-green-light-gradient: @linear-gradient(135deg, #DEFB3A 0%, #defb3a33 100%),
        lemon-green-radial-gradient: @radial-gradient(circle, #DEFB3A20 0%, #DEFB3A00 100%),
        slint-blue-gradient: @linear-gradient(135deg, #6c4bff76 0%, #6C4BFF00 100%),
        heliotrope-gradient: @linear-gradient(180deg, #896fff 0%, #39316B 100%),
        dark-left-gradient: @linear-gradient(90deg, #040708 0%, #04070875 50%, #04070800 100%),
        dark-right-gradient: @linear-gradient(90deg, #04070800 0%, #04070875 50%, #040708 100%),
        ebony-radial-gradient: @radial-gradient(circle, #100F23 0%, #1F1946 100%),
        bar-gradient: @linear-gradient(180deg, #6C4BFF 0%, #6c4bff00 100%),
        alternative-bar-gradient: @linear-gradient(180deg, #CBE600 0%, #CBE60000 100%),
        alternative-light-bar-gradient: @linear-gradient(180deg, #EBFC93 0%, #EBFC9300 100%),
        inverted-bar-gradient: @linear-gradient(180deg, #6c4bff00 0%, #6C4BFF 100%),
        inverted-alternative-bar-gradient: @linear-gradient(180deg, #CBE60000 0%, #CBE600 100%),
        bar-background-gradient: @linear-gradient(180deg, #896FFF 0%, #896FFF00 100%),
        tab-gradient: @linear-gradient(180deg, #0026ff21 0%, #0026ff01 100%),
        background-gradient: @radial-gradient(circle, #0026ff40 50%, #0025FF00 100%),
    };

    in property <Spaces> spaces: {
        small: 5px,
        medium: 10px,
        large: 20px,
    };

    in property <Durations> durations: {
        fast: 125ms,
        medium: 200ms,
        slow: 500ms,
    };

    in property <Typo> typo: {
        label-light: {
            size: 12px,
            weight: 400
        },
        label: {
            size: 12px,
            weight: 500
        },
        header: {
            size: 16px,
            weight: 600
        },
        header-item: {
            size: 18px,
            weight: 400
        },
        header-item-light: {
            size: 18px,
            weight: 200
        },
        value: {
            size: 26px,
            weight: 500
        },
        description: {
            size: 14px,
            weight: 400
        },
        description-light: {
            size: 14px,
            weight: 200
        },
        value-big: {
            size: 40px,
            weight: 200
        },
    };
}

export enum ScreenSize {
    EmbeddedSmall,
    EmbeddedMedium,
    Mobile,
    Desktop
}