moment/src/themes/Default.qpl

// Copyright 2019 miruka
// This file is part of harmonyqml, licensed under LGPLv3.
// vim: syntax=qml

// Base variables

real uiScale: 1.0  /* TODO: Implement correctly, do not change for now */
real fontScale: uiScale

Behavior on uiScale   { HNumberAnimation {} }
Behavior on fontScale { HNumberAnimation {} }

int minimumSupportedWidth:  240 * uiScale
int minimumSupportedHeight: 120 * uiScale
int contentIsWideAbove:     439 * uiScale

int minimumSupportedWidthPlusSpacing:  minimumSupportedWidth + spacing * 2
int minimumSupportedHeightPlusSpacing: minimumSupportedHeight + spacing * 2

int baseElementsHeight: 36 * uiScale
int spacing:            12 * uiScale
int radius:             5
int animationDuration:  100

string preferredIconPack: "light-thin"

fontSize:
    int smaller: 8  * fontScale
    int small:   13 * fontScale
    int normal:  16 * fontScale
    int big:     22 * fontScale
    int bigger:  32 * fontScale
    int biggest: 48 * fontScale

fontFamily:
    string sans:  "Roboto"
    string serif: "Roboto Slab"
    string mono:  "Hack"

colors:
    int hue:        260
    int saturation: 40
    real intensity: 1.0
    real opacity:   1.0

    color weakBackground:   hsluv(hue, saturation, intensity * 12, opacity)
    color mediumBackground: hsluv(hue, saturation, intensity * 9, opacity)
    color strongBackground: hsluv(hue, saturation, intensity * 6, opacity)

    color inputBackground:
        hsluv(hue, saturation, intensity * 2, Math.min(0.6, opacity))

    color brightText: hsluv(0, 0, intensity * 100)
    color text:       hsluv(0, 0, intensity * 80)
    color dimText:    hsluv(0, 0, intensity * 55)
    color dimmerText: hsluv(0, 0, intensity * 30)
    color accentText: hsluv(hue - 10, saturation * 2.25, 60)
    color link:       accentText
    color code:       hsluv(hue + 5, saturation * 1.5, intensity * 60)

    NumberAnimation on intensity  // For testing
        running: false
        from: 0
        to: 10
        duration: 20000
        loops: Animation.Infinite


// Generic UI controls

controls:
    box:
        color background: colors.strongBackground
        int radius:       theme.radius

    header:
        color background: colors.strongBackground

    button:
        color background:     colors.inputBackground
        color hoveredOverlay: hsluv(0, 0, 100)
        color text:           colors.text
        color disabledText:   colors.dimmerText

    interactiveRectangle:
        color background: "transparent"

        color hoveredOverlay: hsluv(0, 0, 100)
        color pressedOverlay: hsluv(0, 0, 100)
        color checkedOverlay: hsluv(0, 0, 100)

        real hoveredOpacity: 0.1
        real pressedOpacity: 0.2
        real checkedOpacity: 0.2

    textField:
        color background:        colors.inputBackground
        color focusedBackground: background

        int borderWidth:     1
        color border:        "transparent"
        color focusedBorder: colors.accentText

        color text:        colors.text
        color focusedText: colors.text

    textArea:
        color background: colors.inputBackground
        color text:       colors.text

    avatar:
        int size:   baseElementsHeight
        int radius: theme.radius

        background:
            int saturation: colors.saturation - 5
            int lightness:  Math.min(50, colors.intensity * 20)
            real opacity:   1.0

        letter:
            int saturation: colors.saturation * 1.5
            int lightness:  colors.intensity * 60
            real opacity:   1.0

    displayName:
        int saturation: colors.saturation
        int lightness:  Math.min(55, colors.intensity * 55)


// Special UI parts

ui:
    // Supported: local file path or web URL
    url image: ""
    color background: colors.weakBackground


sidePane:
    real autoWidthRatio:  0.33 * uiScale
    int maximumAutoWidth: 320 * uiScale

    int autoCollapseBelowWidth: 128 * uiScale
    int collapsedWidth:         controls.avatar.size

    int autoReduceBelowWindowWidth:
        minimumSupportedWidthPlusSpacing + collapsedWidth

    color background: colors.strongBackground

    account:
        color background: "transparent"
        color name:       colors.text

    room:
        color background: "transparent"
        color name:       colors.text
        color subtitle:   colors.dimText

    settingsButton:
        color background: "transparent"

    filterRooms:
        color background: "transparent"


chat:
    roomHeader:
        color background: colors.strongBackground
        color name:       colors.text
        color topic:      colors.dimText

    roomSidePane:
        color background: colors.mediumBackground

    selectViewBar:
        color background: chat.roomHeader.background

    eventList:
        int ownEventsOnRightUnderWidth: 768
        color background:               "transparent"

    message:
        int radius:          theme.radius
        color background:    colors.strongBackground
        /* color ownBackground: hsluv(25, 40, 82, colors.opacity) */
        color ownBackground: background
        color body:          colors.text
        color date:          colors.dimText

        color greenText: hsluv(80, colors.saturation * 2.25, 80)
        color link:      colors.link
        color code:      colors.code

        string styleSheet:
            "a { color: " + link  + " }" +

            "code { font-family: " + fontFamily.mono + "; " +
                   "color: "       + code            + " }" +

            "h1, h2, h3 { font-weight: normal }" +
            "h1 { font-size: " + fontSize.biggest + "px }" +
            "h2 { font-size: " + fontSize.bigger + "px }" +
            "h3 { font-size: " + fontSize.big + "px }" +
            "h4 { font-size: " + fontSize.normal + "px }" +
            "h5 { font-size: " + fontSize.small + "px }" +
            "h6 { font-size: " + fontSize.smaller + "px }" +

            ".greentext { color: " + greenText + " }"

        string styleInclude:
            '<style type"text/css">\n' + styleSheet + '\n</style>\n'

    daybreak:
        color background: colors.strongBackground
        color text:       colors.text
        int radius:       theme.radius

    inviteBanner:
        color background: colors.mediumBackground

    leftBanner:
        color background: colors.mediumBackground

    unknownDevices:
        color background: colors.mediumBackground

    typingMembers:
        color background: colors.mediumBackground

    sendBox:
        color background: colors.strongBackground