From f599c998b6d2309b015efbe77cf07fc0b26d5e75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Wed, 19 Nov 2025 12:35:27 +0100 Subject: [PATCH 01/32] Theme: basic types for new theming system --- storybook/pages/ThemePage.qml | 151 +++++++ ui/StatusQ/CMakeLists.txt | 10 +- ui/StatusQ/include/StatusQ/statuscolors.h | 19 + ui/StatusQ/include/StatusQ/theme.h | 83 ++++ ui/StatusQ/include/StatusQ/themepalette.h | 364 +++++++++++++++++ ui/StatusQ/src/statuscolors.cpp | 128 ++++++ ui/StatusQ/src/theme.cpp | 182 +++++++++ ui/StatusQ/src/themepalette.cpp | 457 ++++++++++++++++++++++ ui/StatusQ/src/typesregistration.cpp | 16 +- 9 files changed, 1407 insertions(+), 3 deletions(-) create mode 100644 storybook/pages/ThemePage.qml create mode 100644 ui/StatusQ/include/StatusQ/statuscolors.h create mode 100644 ui/StatusQ/include/StatusQ/theme.h create mode 100644 ui/StatusQ/include/StatusQ/themepalette.h create mode 100644 ui/StatusQ/src/statuscolors.cpp create mode 100644 ui/StatusQ/src/theme.cpp create mode 100644 ui/StatusQ/src/themepalette.cpp diff --git a/storybook/pages/ThemePage.qml b/storybook/pages/ThemePage.qml new file mode 100644 index 00000000000..8316771349a --- /dev/null +++ b/storybook/pages/ThemePage.qml @@ -0,0 +1,151 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +import StatusQ.Core.Theme + +Item { + id: root + + component Panel: Control { + id: panel + + default property alias content: page.contentChildren + property alias color: background.color + + background: Rectangle { + id: background + + color: "yellow" + } + + padding: Theme.padding + + contentItem: Page { + id: page + + footer: ColumnLayout { + Slider { + from: 0 + to: 50 + stepSize: 1 + + value: panel.Theme.padding + + onValueChanged: { + if (value !== panel.Theme.padding) + panel.Theme.padding = value + } + } + + RowLayout { + Button { + text: "reset padding" + + onClicked: { + panel.Theme.padding = undefined + //panel.Theme.resetPadding() + } + + enabled: panel.Theme.explicitPadding + } + + Label { + text: `padding: ${panel.Theme.padding}` + } + + Button { + text: "Dark" + onClicked: panel.Theme.style = Theme.Dark + } + + Button { + text: "Light" + onClicked: panel.Theme.style = Theme.Light + } + + Button { + text: "Reset" + enabled: panel.Theme.explicitStyle + onClicked: panel.Theme.style = undefined + } + + Rectangle { + border.width: 1 + Layout.fillHeight: true + Layout.preferredWidth: height + + color: Theme.palette.background + } + } + } + } + } + + Panel { + anchors.fill: parent + + Panel { + anchors.fill: parent + + color: "green" + + RowLayout { + anchors.fill: parent + + spacing: 0 + + Panel { + Layout.fillWidth: true + Layout.fillHeight: true + Layout.minimumWidth: parent.width / 2 + + color: "red" + } + + Panel { + Layout.fillWidth: true + Layout.fillHeight: true + Layout.minimumWidth: parent.width / 2 + + color: "blue" + } + } + } + } + + Rectangle { + anchors.fill: row + anchors.margins: -10 + border.color: "gray" + opacity: 0.8 + } + + RowLayout { + id: row + + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.margins: 100 + + Label { + text: "Top level padding:" + } + + Slider { + + from: 0 + to: 50 + stepSize: 1 + + value: root.Theme.padding + + onValueChanged: { + root.Theme.padding = value + } + } + } +} + +// category: Utils +// status: good diff --git a/ui/StatusQ/CMakeLists.txt b/ui/StatusQ/CMakeLists.txt index 5be27b8d47a..a48c67e61b1 100644 --- a/ui/StatusQ/CMakeLists.txt +++ b/ui/StatusQ/CMakeLists.txt @@ -169,17 +169,20 @@ add_library(StatusQ ${LIB_TYPE} include/StatusQ/fastexpressionfilter.h include/StatusQ/fastexpressionrole.h include/StatusQ/fastexpressionsorter.h - include/StatusQ/oneoffilter.h include/StatusQ/formatteddoubleproperty.h include/StatusQ/genericvalidator.h include/StatusQ/keychain.h include/StatusQ/networkchecker.h + include/StatusQ/oneoffilter.h include/StatusQ/permissionutilsinternal.h include/StatusQ/rxvalidator.h + include/StatusQ/statuscolors.h include/StatusQ/statusemojimodel.h include/StatusQ/statussyntaxhighlighter.h include/StatusQ/stringutilsinternal.h include/StatusQ/systemutilsinternal.h + include/StatusQ/theme.h + include/StatusQ/themepalette.h include/StatusQ/typesregistration.h include/StatusQ/undefinedfilter.h include/StatusQ/urlutils.h @@ -188,19 +191,22 @@ add_library(StatusQ ${LIB_TYPE} src/constantrole.cpp src/externc.cpp src/fastexpressionfilter.cpp - src/oneoffilter.cpp src/fastexpressionrole.cpp src/fastexpressionsorter.cpp src/formatteddoubleproperty.cpp src/genericvalidator.cpp src/keychain.cpp src/networkchecker.cpp + src/oneoffilter.cpp src/permissionutilsinternal.cpp src/rxvalidator.cpp + src/statuscolors.cpp src/statusemojimodel.cpp src/statussyntaxhighlighter.cpp src/stringutilsinternal.cpp src/systemutilsinternal.cpp + src/theme.cpp + src/themepalette.cpp src/typesregistration.cpp src/undefinedfilter.cpp src/urlutils.cpp diff --git a/ui/StatusQ/include/StatusQ/statuscolors.h b/ui/StatusQ/include/StatusQ/statuscolors.h new file mode 100644 index 00000000000..6580050d99f --- /dev/null +++ b/ui/StatusQ/include/StatusQ/statuscolors.h @@ -0,0 +1,19 @@ +#pragma once + +#include +#include +#include + +class StatusColors : public QObject +{ + Q_OBJECT + Q_PROPERTY(QVariantMap colors READ colors CONSTANT) + +public: + explicit StatusColors(QObject* parent = nullptr); + + static const QVariantMap& colors(); + + Q_INVOKABLE static QColor getColor(const QString& name, qreal alpha = -1); + Q_INVOKABLE static QColor alphaColor(const QColor& color, qreal alpha); +}; diff --git a/ui/StatusQ/include/StatusQ/theme.h b/ui/StatusQ/include/StatusQ/theme.h new file mode 100644 index 00000000000..44a2ad4f057 --- /dev/null +++ b/ui/StatusQ/include/StatusQ/theme.h @@ -0,0 +1,83 @@ +#pragma once + +#include "StatusQ/themepalette.h" + +#include +#include +#include + +class Theme : public QQuickAttachedPropertyPropagator +{ + Q_OBJECT + + Q_PROPERTY(qreal padding READ padding WRITE setPadding RESET resetPadding NOTIFY paddingChanged) + Q_PROPERTY(qreal xlPadding READ xlPadding NOTIFY paddingChanged) + Q_PROPERTY(qreal bigPadding READ bigPadding NOTIFY paddingChanged) + Q_PROPERTY(qreal halfPadding READ halfPadding NOTIFY paddingChanged) + Q_PROPERTY(qreal smallPadding READ smallPadding NOTIFY paddingChanged) + + Q_PROPERTY(bool explicitPadding READ explicitPadding NOTIFY explicitPaddingChanged) + + Q_PROPERTY(Style style READ style WRITE setStyle RESET resetStyle NOTIFY styleChanged) + Q_PROPERTY(const ThemePalette* palette READ palette NOTIFY styleChanged) + + Q_PROPERTY(bool explicitStyle READ explicitStyle NOTIFY explicitStyleChanged) + + enum class Style { + Light, + Dark + }; + + Q_ENUM(Style) + +public: + explicit Theme(QObject *parent = nullptr); + + qreal padding() const; + qreal xlPadding() const; + qreal bigPadding() const; + qreal halfPadding() const; + qreal smallPadding() const; + + void setPadding(qreal padding); + void resetPadding(); + + void inheritPadding(qreal padding); + void propagatePadding(); + + bool explicitPadding() const; + + Style style() const; + void setStyle(Style style); + void resetStyle(); + + void inheritStyle(Style style); + void propagateStyle(); + + bool explicitStyle() const; + + const ThemePalette* palette() const; + + static Theme *qmlAttachedProperties(QObject *object); + +signals: + void paddingChanged(); + void explicitPaddingChanged(); + + void explicitStyleChanged(); + void styleChanged(); + +protected: + void attachedParentChange( + QQuickAttachedPropertyPropagator *newParent, + QQuickAttachedPropertyPropagator *oldParent) override; + +private: + bool m_explicitPadding = false; + qreal m_padding = 0.0; + + bool m_explicitStyle = false; + Style m_style = Style::Light; +}; + +QML_DECLARE_TYPEINFO(Theme, QML_HAS_ATTACHED_PROPERTIES) diff --git a/ui/StatusQ/include/StatusQ/themepalette.h b/ui/StatusQ/include/StatusQ/themepalette.h new file mode 100644 index 00000000000..8cae7285a51 --- /dev/null +++ b/ui/StatusQ/include/StatusQ/themepalette.h @@ -0,0 +1,364 @@ +#pragma once + +#include +#include +#include + +#include + +class StatusAppLayout { + Q_GADGET + Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT) + Q_PROPERTY(QColor rightPanelBackgroundColor MEMBER rightPanelBackgroundColor CONSTANT) +public: + QColor backgroundColor, rightPanelBackgroundColor; +}; + +class StatusAppNavBar { + Q_GADGET + Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT) +public: + QColor backgroundColor; +}; + +class StatusToastMessage { + Q_GADGET + Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT) +public: + QColor backgroundColor; +}; + +class StatusListItem { + Q_GADGET + Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT) + Q_PROPERTY(QColor secondaryHoverBackgroundColor MEMBER secondaryHoverBackgroundColor CONSTANT) + Q_PROPERTY(QColor highlightColor MEMBER highlightColor CONSTANT) +public: + QColor backgroundColor, secondaryHoverBackgroundColor, highlightColor; +}; + +class StatusChatListItem { + Q_GADGET + Q_PROPERTY(QColor hoverBackgroundColor MEMBER hoverBackgroundColor CONSTANT) + Q_PROPERTY(QColor selectedBackgroundColor MEMBER selectedBackgroundColor CONSTANT) +public: + QColor hoverBackgroundColor, selectedBackgroundColor; +}; + +class StatusChatListCategoryItem { + Q_GADGET + Q_PROPERTY(QColor buttonHoverBackgroundColor MEMBER buttonHoverBackgroundColor CONSTANT) +public: + QColor buttonHoverBackgroundColor; +}; + +class StatusNavigationListItem { + Q_GADGET + Q_PROPERTY(QColor hoverBackgroundColor MEMBER hoverBackgroundColor CONSTANT) + Q_PROPERTY(QColor selectedBackgroundColor MEMBER selectedBackgroundColor CONSTANT) +public: + QColor hoverBackgroundColor, selectedBackgroundColor; +}; + +class StatusBadge { + Q_GADGET + Q_PROPERTY(QColor foregroundColor MEMBER foregroundColor CONSTANT) + Q_PROPERTY(QColor borderColor MEMBER borderColor CONSTANT) + Q_PROPERTY(QColor hoverBorderColor MEMBER hoverBorderColor CONSTANT) +public: + QColor foregroundColor, borderColor, hoverBorderColor; +}; + +class StatusMenu { + Q_GADGET + Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT) + Q_PROPERTY(QColor hoverBackgroundColor MEMBER hoverBackgroundColor CONSTANT) + Q_PROPERTY(QColor separatorColor MEMBER separatorColor CONSTANT) +public: + QColor backgroundColor, hoverBackgroundColor, separatorColor; +}; + +class StatusModal { + Q_GADGET + Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT) +public: + QColor backgroundColor; +}; + +class StatusRoundedImage { + Q_GADGET + Q_PROPERTY(QColor backgroundColor MEMBER backgroundColor CONSTANT) +public: + QColor backgroundColor; +}; + +class StatusChatInput { + Q_GADGET + Q_PROPERTY(QColor secondaryBackgroundColor MEMBER secondaryBackgroundColor CONSTANT) +public: + QColor secondaryBackgroundColor; +}; + +class StatusSwitchTab { + Q_GADGET + Q_PROPERTY(QColor buttonBackgroundColor MEMBER buttonBackgroundColor CONSTANT) + Q_PROPERTY(QColor barBackgroundColor MEMBER barBackgroundColor CONSTANT) + Q_PROPERTY(QColor selectedTextColor MEMBER selectedTextColor CONSTANT) + Q_PROPERTY(QColor textColor MEMBER textColor CONSTANT) +public: + QColor buttonBackgroundColor, barBackgroundColor, selectedTextColor, + textColor; +}; + +class StatusSelect { + Q_GADGET + Q_PROPERTY(QColor menuItemBackgroundColor MEMBER menuItemBackgroundColor CONSTANT) + Q_PROPERTY(QColor menuItemHoverBackgroundColor MEMBER menuItemHoverBackgroundColor CONSTANT) +public: + QColor menuItemBackgroundColor, menuItemHoverBackgroundColor; +}; + +class StatusMessage { + Q_GADGET + Q_PROPERTY(QColor emojiReactionBackground MEMBER emojiReactionBackground CONSTANT) + Q_PROPERTY(QColor emojiReactionBorderHovered MEMBER emojiReactionBorderHovered CONSTANT) + Q_PROPERTY(QColor emojiReactionBackgroundHovered MEMBER emojiReactionBackgroundHovered CONSTANT) +public: + QColor emojiReactionBackground, emojiReactionBorderHovered, + emojiReactionBackgroundHovered; +}; + +class CustomisationColors { + Q_GADGET + Q_PROPERTY(QColor blue MEMBER blue CONSTANT) + Q_PROPERTY(QColor purple MEMBER purple CONSTANT) + Q_PROPERTY(QColor orange MEMBER orange CONSTANT) + Q_PROPERTY(QColor army MEMBER army CONSTANT) + Q_PROPERTY(QColor turquoise MEMBER turquoise CONSTANT) + Q_PROPERTY(QColor sky MEMBER sky CONSTANT) + Q_PROPERTY(QColor yellow MEMBER yellow CONSTANT) + Q_PROPERTY(QColor pink MEMBER pink CONSTANT) + Q_PROPERTY(QColor copper MEMBER copper CONSTANT) + Q_PROPERTY(QColor camel MEMBER camel CONSTANT) + Q_PROPERTY(QColor magenta MEMBER magenta CONSTANT) + Q_PROPERTY(QColor yinYang MEMBER yinYang CONSTANT) + Q_PROPERTY(QColor purple2 MEMBER purple2 CONSTANT) +public: + QColor blue, purple, orange, army, turquoise, sky, yellow, pink, copper, camel, magenta, yinYang, purple2; +}; + +class PrivacyModeColors { + Q_GADGET + Q_PROPERTY(QColor navBarColor MEMBER navBarColor CONSTANT) + Q_PROPERTY(QColor navButtonColor MEMBER navButtonColor CONSTANT) + Q_PROPERTY(QColor navButtonHighlightedColor MEMBER navButtonHighlightedColor CONSTANT) +public: + QColor navBarColor, navButtonColor, navButtonHighlightedColor; +}; + +class PrivacyColors { + Q_GADGET + Q_PROPERTY(QColor primary MEMBER primary CONSTANT) + Q_PROPERTY(QColor secondary MEMBER secondary CONSTANT) + Q_PROPERTY(QColor tertiary MEMBER tertiary CONSTANT) + Q_PROPERTY(QColor tertiaryOpaque MEMBER tertiaryOpaque CONSTANT) +public: + QColor primary, secondary, tertiary, tertiaryOpaque; +}; + +// Main ThemePalette class +class ThemePalette : public QObject { + Q_OBJECT + Q_PROPERTY(QString name MEMBER name CONSTANT) + + // Existing basic colors + Q_PROPERTY(QColor black MEMBER black CONSTANT) + Q_PROPERTY(QColor white MEMBER white CONSTANT) + Q_PROPERTY(QColor transparent MEMBER transparent CONSTANT) + + // Base colors + Q_PROPERTY(QColor baseColor1 MEMBER baseColor1 CONSTANT) + Q_PROPERTY(QColor baseColor2 MEMBER baseColor2 CONSTANT) + Q_PROPERTY(QColor baseColor3 MEMBER baseColor3 CONSTANT) + Q_PROPERTY(QColor baseColor4 MEMBER baseColor4 CONSTANT) + Q_PROPERTY(QColor baseColor5 MEMBER baseColor5 CONSTANT) + + // Primary + Q_PROPERTY(QColor primaryColor1 MEMBER primaryColor1 CONSTANT) + Q_PROPERTY(QColor primaryColor2 MEMBER primaryColor2 CONSTANT) + Q_PROPERTY(QColor primaryColor3 MEMBER primaryColor3 CONSTANT) + + // Danger + Q_PROPERTY(QColor dangerColor1 MEMBER dangerColor1 CONSTANT) + Q_PROPERTY(QColor dangerColor2 MEMBER dangerColor2 CONSTANT) + Q_PROPERTY(QColor dangerColor3 MEMBER dangerColor3 CONSTANT) + + // Warning + Q_PROPERTY(QColor warningColor1 MEMBER warningColor1 CONSTANT) + Q_PROPERTY(QColor warningColor2 MEMBER warningColor2 CONSTANT) + Q_PROPERTY(QColor warningColor3 MEMBER warningColor3 CONSTANT) + + // Success + Q_PROPERTY(QColor successColor1 MEMBER successColor1 CONSTANT) + Q_PROPERTY(QColor successColor2 MEMBER successColor2 CONSTANT) + Q_PROPERTY(QColor successColor3 MEMBER successColor3 CONSTANT) + + // Mention + Q_PROPERTY(QColor mentionColor1 MEMBER mentionColor1 CONSTANT) + Q_PROPERTY(QColor mentionColor2 MEMBER mentionColor2 CONSTANT) + Q_PROPERTY(QColor mentionColor3 MEMBER mentionColor3 CONSTANT) + Q_PROPERTY(QColor mentionColor4 MEMBER mentionColor4 CONSTANT) + + // Pin + Q_PROPERTY(QColor pinColor1 MEMBER pinColor1 CONSTANT) + Q_PROPERTY(QColor pinColor2 MEMBER pinColor2 CONSTANT) + Q_PROPERTY(QColor pinColor3 MEMBER pinColor3 CONSTANT) + + // Direct + Q_PROPERTY(QColor directColor1 MEMBER directColor1 CONSTANT) + Q_PROPERTY(QColor directColor2 MEMBER directColor2 CONSTANT) + Q_PROPERTY(QColor directColor3 MEMBER directColor3 CONSTANT) + Q_PROPERTY(QColor directColor4 MEMBER directColor4 CONSTANT) + Q_PROPERTY(QColor directColor5 MEMBER directColor5 CONSTANT) + Q_PROPERTY(QColor directColor6 MEMBER directColor6 CONSTANT) + Q_PROPERTY(QColor directColor7 MEMBER directColor7 CONSTANT) + Q_PROPERTY(QColor directColor8 MEMBER directColor8 CONSTANT) + Q_PROPERTY(QColor directColor9 MEMBER directColor9 CONSTANT) + + // Indirect + Q_PROPERTY(QColor indirectColor1 MEMBER indirectColor1 CONSTANT) + Q_PROPERTY(QColor indirectColor2 MEMBER indirectColor2 CONSTANT) + Q_PROPERTY(QColor indirectColor3 MEMBER indirectColor3 CONSTANT) + Q_PROPERTY(QColor indirectColor4 MEMBER indirectColor4 CONSTANT) + + // Misc + Q_PROPERTY(QColor miscColor1 MEMBER miscColor1 CONSTANT) + Q_PROPERTY(QColor miscColor2 MEMBER miscColor2 CONSTANT) + Q_PROPERTY(QColor miscColor3 MEMBER miscColor3 CONSTANT) + Q_PROPERTY(QColor miscColor4 MEMBER miscColor4 CONSTANT) + Q_PROPERTY(QColor miscColor5 MEMBER miscColor5 CONSTANT) + Q_PROPERTY(QColor miscColor6 MEMBER miscColor6 CONSTANT) + Q_PROPERTY(QColor miscColor7 MEMBER miscColor7 CONSTANT) + Q_PROPERTY(QColor miscColor8 MEMBER miscColor8 CONSTANT) + Q_PROPERTY(QColor miscColor9 MEMBER miscColor9 CONSTANT) + Q_PROPERTY(QColor miscColor10 MEMBER miscColor10 CONSTANT) + Q_PROPERTY(QColor miscColor11 MEMBER miscColor11 CONSTANT) + Q_PROPERTY(QColor miscColor12 MEMBER miscColor12 CONSTANT) + + // Other single values + Q_PROPERTY(QColor neutral95 MEMBER neutral95 CONSTANT) + Q_PROPERTY(QColor dropShadow MEMBER dropShadow CONSTANT) + Q_PROPERTY(QColor dropShadow2 MEMBER dropShadow2 CONSTANT) + Q_PROPERTY(QColor dropShadow3 MEMBER dropShadow3 CONSTANT) + Q_PROPERTY(QColor backdropColor MEMBER backdropColor CONSTANT) + Q_PROPERTY(QColor statusFloatingButtonHighlight MEMBER statusFloatingButtonHighlight CONSTANT) + Q_PROPERTY(QColor statusLoadingHighlight MEMBER statusLoadingHighlight CONSTANT) + Q_PROPERTY(QColor statusLoadingHighlight2 MEMBER statusLoadingHighlight2 CONSTANT) + Q_PROPERTY(QColor messageHighlightColor MEMBER messageHighlightColor CONSTANT) + Q_PROPERTY(QColor desktopBlue10 MEMBER desktopBlue10 CONSTANT) + Q_PROPERTY(QColor blockProgressBarColor MEMBER blockProgressBarColor CONSTANT) + + // Style compat + Q_PROPERTY(QColor background MEMBER background CONSTANT) + Q_PROPERTY(QColor backgroundHover MEMBER backgroundHover CONSTANT) + Q_PROPERTY(QColor border MEMBER border CONSTANT) + Q_PROPERTY(QColor textColor MEMBER textColor CONSTANT) + Q_PROPERTY(QColor secondaryText MEMBER secondaryText CONSTANT) + Q_PROPERTY(QColor separator MEMBER separator CONSTANT) + Q_PROPERTY(QColor darkGrey MEMBER darkGrey CONSTANT) + Q_PROPERTY(QColor secondaryBackground MEMBER secondaryBackground CONSTANT) + Q_PROPERTY(QColor secondaryMenuBackground MEMBER secondaryMenuBackground CONSTANT) + + // Arrays + Q_PROPERTY(QList customisationColorsArray MEMBER customisationColorsArray CONSTANT) + Q_PROPERTY(QList communityColorsArray MEMBER communityColorsArray CONSTANT) + Q_PROPERTY(QList userCustomizationColors MEMBER userCustomizationColors CONSTANT) + + // Nested gadgets + Q_PROPERTY(StatusAppLayout statusAppLayout MEMBER statusAppLayout CONSTANT) + Q_PROPERTY(StatusAppNavBar statusAppNavBar MEMBER statusAppNavBar CONSTANT) + Q_PROPERTY(StatusToastMessage statusToastMessage MEMBER statusToastMessage CONSTANT) + Q_PROPERTY(StatusListItem statusListItem MEMBER statusListItem CONSTANT) + Q_PROPERTY(StatusChatListItem statusChatListItem MEMBER statusChatListItem CONSTANT) + Q_PROPERTY(StatusChatListCategoryItem statusChatListCategoryItem MEMBER statusChatListCategoryItem CONSTANT) + Q_PROPERTY(StatusNavigationListItem statusNavigationListItem MEMBER statusNavigationListItem CONSTANT) + Q_PROPERTY(StatusBadge statusBadge MEMBER statusBadge CONSTANT) + Q_PROPERTY(StatusMenu statusMenu MEMBER statusMenu CONSTANT) + Q_PROPERTY(StatusModal statusModal MEMBER statusModal CONSTANT) + Q_PROPERTY(StatusRoundedImage statusRoundedImage MEMBER statusRoundedImage CONSTANT) + Q_PROPERTY(StatusChatInput statusChatInput MEMBER statusChatInput CONSTANT) + Q_PROPERTY(StatusSwitchTab statusSwitchTab MEMBER statusSwitchTab CONSTANT) + Q_PROPERTY(StatusSelect statusSelect MEMBER statusSelect CONSTANT) + Q_PROPERTY(StatusMessage statusMessage MEMBER statusMessage CONSTANT) + Q_PROPERTY(CustomisationColors customisationColors MEMBER customisationColors CONSTANT) + Q_PROPERTY(PrivacyModeColors privacyModeColors MEMBER privacyModeColors CONSTANT) + +public: + explicit ThemePalette(QObject* parent = nullptr); + + Q_INVOKABLE QColor hoverColor(const QColor& normalColor) const; + void buildArrays(); + + // Members + QString name; + + QColor black; + QColor white; + QColor transparent; + + QColor baseColor1, baseColor2, baseColor3, baseColor4, baseColor5; + + QColor primaryColor1, primaryColor2, primaryColor3; + QColor dangerColor1, dangerColor2, dangerColor3; + QColor warningColor1, warningColor2, warningColor3; + QColor successColor1, successColor2, successColor3; + QColor mentionColor1, mentionColor2, mentionColor3, mentionColor4; + QColor pinColor1, pinColor2, pinColor3; + QColor directColor1, directColor2, directColor3, directColor4, directColor5, + directColor6, directColor7, directColor8, directColor9; + QColor indirectColor1, indirectColor2, indirectColor3, indirectColor4; + QColor miscColor1, miscColor2, miscColor3, miscColor4, miscColor5, + miscColor6, miscColor7, miscColor8, miscColor9, miscColor10, miscColor11, + miscColor12; + + QColor neutral95; + QColor dropShadow, dropShadow2, dropShadow3, backdropColor; + QColor statusFloatingButtonHighlight; + QColor statusLoadingHighlight, statusLoadingHighlight2; + QColor messageHighlightColor; + QColor desktopBlue10; + QColor blockProgressBarColor; + + QColor background, backgroundHover, border, textColor, secondaryText, + separator, darkGrey, secondaryBackground, secondaryMenuBackground; + + QList customisationColorsArray; + QList communityColorsArray; + QList userCustomizationColors; + + StatusAppLayout statusAppLayout; + StatusAppNavBar statusAppNavBar; + StatusToastMessage statusToastMessage; + StatusListItem statusListItem; + StatusChatListItem statusChatListItem; + StatusChatListCategoryItem statusChatListCategoryItem; + StatusNavigationListItem statusNavigationListItem; + StatusBadge statusBadge; + StatusMenu statusMenu; + StatusModal statusModal; + StatusRoundedImage statusRoundedImage; + StatusChatInput statusChatInput; + StatusSwitchTab statusSwitchTab; + StatusSelect statusSelect; + StatusMessage statusMessage; + CustomisationColors customisationColors; + PrivacyModeColors privacyModeColors; + PrivacyColors privacyColors; +}; + +std::unique_ptr createDarkThemePalette(QObject* parent = nullptr); +std::unique_ptr createLightThemePalette(QObject* parent = nullptr); + +// Registration helper +void registerThemePaletteType(); + diff --git a/ui/StatusQ/src/statuscolors.cpp b/ui/StatusQ/src/statuscolors.cpp new file mode 100644 index 00000000000..17b917ca232 --- /dev/null +++ b/ui/StatusQ/src/statuscolors.cpp @@ -0,0 +1,128 @@ +#include "StatusQ/statuscolors.h" + +#include +#include + +using namespace Qt::StringLiterals; + +namespace { + +const QVariantMap s_colors = { + { "black"_L1, QColor(0x00, 0x00, 0x00) }, + { "white"_L1, QColor(0xFF, 0xFF, 0xFF) }, + + { "blue"_L1, QColor(0x43, 0x60, 0xDF) }, + { "blue2"_L1, QColor(0x29, 0x46, 0xC4) }, + { "blue3"_L1, QColor(0x88, 0xB0, 0xFF) }, + { "blue4"_L1, QColor(0x86, 0x9E, 0xFF) }, + { "blue5"_L1, QColor(0xAA, 0xC6, 0xFF) }, + { "blue6"_L1, QColor(0xEC, 0xEF, 0xFC) }, + { "blue7"_L1, QColor(0x09, 0x10, 0x1C) }, + { "blue8"_L1, QColor(0x6B, 0x6F, 0x76) }, + + { "brown"_L1, QColor(0x8B, 0x31, 0x31) }, + { "brown2"_L1, QColor(0x9B, 0x83, 0x2F) }, + { "brown3"_L1, QColor(0xAD, 0x43, 0x43) }, + + { "cyan"_L1, QColor(0x51, 0xD0, 0xF0) }, + + { "graphite"_L1, QColor(0x21, 0x21, 0x21) }, + { "graphite2"_L1, QColor(0x25, 0x25, 0x25) }, + { "graphite3"_L1, QColor(0x2C, 0x2C, 0x2C) }, + { "graphite4"_L1, QColor(0x37, 0x37, 0x37) }, + { "graphite5"_L1, QColor(0x90, 0x90, 0x90) }, + + { "green"_L1, QColor(0x4E, 0xBC, 0x60) }, + { "green2"_L1, QColor(0x7C, 0xDA, 0x00) }, + { "green3"_L1, QColor(0x60, 0xC3, 0x70) }, + { "green4"_L1, QColor(0x93, 0xDB, 0x33) }, + { "green5"_L1, QColor(0x9E, 0xA8, 0x5D) }, + { "green6"_L1, QColor(0xAF, 0xB5, 0x51) }, + + { "grey"_L1, QColor(0xF0, 0xF2, 0xF5) }, + { "grey2"_L1, QColor(0xF6, 0xF8, 0xFA) }, + { "grey3"_L1, QColor(0xE9, 0xED, 0xF1) }, + { "grey4"_L1, QColor(0xEE, 0xF2, 0xF5) }, + { "grey5"_L1, QColor(0x93, 0x9B, 0xA1) }, + + { "moss"_L1, QColor(0x26, 0xA6, 0x9A) }, + { "moss2"_L1, QColor(0x10, 0xA8, 0x8E) }, + + { "orange"_L1, QColor(0xFE, 0x8F, 0x59) }, + { "orange2"_L1, QColor(0xFF, 0x9F, 0x0F) }, + { "orange3"_L1, QColor(0xFF, 0xA6, 0x7B) }, + { "orange4"_L1, QColor(0xFE, 0x8F, 0x59) }, + + { "warning_orange"_L1, QColor(0xF6, 0x79, 0x3C) }, + + { "purple"_L1, QColor(0x88, 0x7A, 0xF9) }, + + { "red"_L1, QColor(0xFF, 0x2D, 0x55) }, + { "red2"_L1, QColor(0xFA, 0x65, 0x65) }, + { "red3"_L1, QColor(0xFF, 0x5C, 0x7B) }, + + { "turquoise"_L1, QColor(0x0D, 0xA4, 0xC9) }, + { "turquoise2"_L1, QColor(0x07, 0xBC, 0xE9) }, + { "turquoise3"_L1, QColor(0x7B, 0xE5, 0xFF) }, + { "turquoise4"_L1, QColor(0x0D, 0xA4, 0xC9) }, + + { "violet"_L1, QColor(0xD3, 0x7E, 0xF4) }, + + { "yellow"_L1, QColor(0xFF, 0xCA, 0x0F) }, + { "yellow2"_L1, QColor(0xEA, 0xD2, 0x7B) }, + + { "blueHijab"_L1, QColor(0xCD, 0xF2, 0xFB) }, + + { "lightPattensBlue"_L1, QColor(0xD7, 0xDE, 0xE4) }, + + { "blackHovered"_L1, QColor(0x1D, 0x23, 0x2E) }, + { "blueHovered"_L1, QColor(0x36, 0x4D, 0xB2) }, + { "purpleHovered"_L1, QColor(0x6D, 0x62, 0xC7) }, + { "cyanHovered"_L1, QColor(0x41, 0xA6, 0xC0) }, + { "violetHovered"_L1, QColor(0xA9, 0x65, 0xC3) }, + { "redHovered"_L1, QColor(0xC8, 0x51, 0x51) }, + { "yellowHovered"_L1, QColor(0xCC, 0xA2, 0x0C) }, + { "greenHovered"_L1, QColor(0x63, 0xAE, 0x00) }, + { "mossHovered"_L1, QColor(0x1E, 0x85, 0x7B) }, + { "brownHovered"_L1, QColor(0x6F, 0x27, 0x27) }, + { "brown2Hovered"_L1, QColor(0x7C, 0x69, 0x26) }, + + { "lightDesktopBlue10"_L1, QColor(0xEC, 0xEF, 0xFB) }, + { "darkDesktopBlue10"_L1, QColor(0x27, 0x32, 0x51) } +}; + +} // unnamed namespace + +StatusColors::StatusColors(QObject* parent) + : QObject(parent) +{ +} + +const QVariantMap& StatusColors::colors() +{ + return s_colors; +} + +QColor StatusColors::getColor(const QString& name, qreal alpha) +{ + QColor base; + + if (s_colors.contains(name)) { + base = s_colors.value(name).value(); + } else { + base = QColor::fromString(name); + } + + if (alpha > 0.0 && alpha <= 1.0) + base.setAlphaF(alpha); + + return base; +} + +QColor StatusColors::alphaColor(const QColor& color, qreal alpha) +{ + QColor c = color; + if (alpha > 0.0 && alpha <= 1.0) + c.setAlphaF(alpha); + return c; +} diff --git a/ui/StatusQ/src/theme.cpp b/ui/StatusQ/src/theme.cpp new file mode 100644 index 00000000000..898c847cc9f --- /dev/null +++ b/ui/StatusQ/src/theme.cpp @@ -0,0 +1,182 @@ +#include "StatusQ/theme.h" + +namespace { + +constexpr qreal s_defaultPadding = 16; +constexpr qreal s_xlPaddingFactor = 2.0; +constexpr qreal s_bigPaddingFactor = 1.5; +constexpr qreal s_halfPaddingFactor = 0.5; +constexpr qreal s_smallPaddingFactor = 0.625; + +const std::unique_ptr s_paletteDark = createDarkThemePalette(); +const std::unique_ptr s_paletteLight = createLightThemePalette(); + +} // unnamed namespace + +Theme::Theme(QObject *parent) + : QQuickAttachedPropertyPropagator(parent), m_padding(s_defaultPadding) +{ + initialize(); +} + +qreal Theme::padding() const { + return m_padding; +} + +qreal Theme::xlPadding() const { + return m_padding * s_xlPaddingFactor; +} + +qreal Theme::bigPadding() const { + return m_padding * s_bigPaddingFactor; +} + +qreal Theme::halfPadding() const { + return m_padding * s_halfPaddingFactor; +} + +qreal Theme::smallPadding() const { + return m_padding * s_smallPaddingFactor; +} + +void Theme::setPadding(qreal padding) +{ + auto explicitPaddingOld = m_explicitPadding; + m_explicitPadding = true; + + if (qFuzzyCompare(m_padding, padding)) { + if (!explicitPaddingOld) + emit explicitPaddingChanged(); + + return; + } + + m_padding = padding; + propagatePadding(); + emit paddingChanged(); + + if (!explicitPaddingOld) + emit explicitPaddingChanged(); +} + +void Theme::resetPadding() +{ + if (!m_explicitPadding) + return; + + m_explicitPadding = false; + auto theme = qobject_cast(attachedParent()); + + inheritPadding(theme ? theme->padding() : 0); + + emit explicitPaddingChanged(); +} + +void Theme::inheritPadding(qreal padding) +{ + if (m_explicitPadding || qFuzzyCompare(m_padding, padding)) + return; + + m_padding = padding; + propagatePadding(); + emit paddingChanged(); +} + +void Theme::propagatePadding() +{ + const auto themes = attachedChildren(); + for (QQuickAttachedPropertyPropagator *child : themes) { + auto theme = qobject_cast(child); + if (theme) + theme->inheritPadding(m_padding); + } +} + +bool Theme::explicitPadding() const { + return m_explicitPadding; +} + +Theme::Style Theme::style() const +{ + return m_style; +} + +void Theme::setStyle(Style style) +{ + auto explicitStyleOld = m_explicitStyle; + m_explicitStyle = true; + + if (m_style == style) { + if (!explicitStyleOld) + emit explicitStyleChanged(); + + return; + } + + m_style = style; + + propagateStyle(); + emit styleChanged(); + + if (!explicitStyleOld) + emit explicitStyleChanged(); +} + +void Theme::resetStyle() +{ + if (!m_explicitStyle) + return; + + m_explicitStyle = false; + auto theme = qobject_cast(attachedParent()); + + inheritStyle(theme ? theme->style() : Style::Light); + + emit explicitStyleChanged(); +} + +void Theme::inheritStyle(Style style) +{ + if (m_explicitStyle || m_style == style) + return; + + m_style = style; + propagateStyle(); + emit styleChanged(); +} + +void Theme::propagateStyle() +{ + const auto themes = attachedChildren(); + for (QQuickAttachedPropertyPropagator *child : themes) { + auto theme = qobject_cast(child); + if (theme) + theme->inheritStyle(m_style); + } +} + +bool Theme::explicitStyle() const { + return m_explicitStyle; +} + +const ThemePalette* Theme::palette() const +{ + return m_style == Style::Light ? s_paletteLight.get() + : s_paletteDark.get(); +} + +Theme* Theme::qmlAttachedProperties(QObject *object) +{ + return new Theme(object); +} + +void Theme::attachedParentChange(QQuickAttachedPropertyPropagator* newParent, + QQuickAttachedPropertyPropagator* oldParent) +{ + Q_UNUSED(oldParent); + auto attachedParentTheme = qobject_cast(newParent); + if (attachedParentTheme) { + inheritPadding(attachedParentTheme->padding()); + inheritStyle(attachedParentTheme->style()); + } +} diff --git a/ui/StatusQ/src/themepalette.cpp b/ui/StatusQ/src/themepalette.cpp new file mode 100644 index 00000000000..85d884e111e --- /dev/null +++ b/ui/StatusQ/src/themepalette.cpp @@ -0,0 +1,457 @@ +#include "StatusQ/themepalette.h" +#include "StatusQ/statuscolors.h" +#include + +ThemePalette::ThemePalette(QObject* parent) + : QObject(parent) +{ + black = QColor(0,0,0); + white = QColor(255,255,255); + transparent = QColor(0,0,0,0); +} + +QColor ThemePalette::hoverColor(const QColor& normalColor) const +{ + if (name == QLatin1String("light")) + return QColor(normalColor).darker(120); + return QColor(normalColor).lighter(120); +} + +void ThemePalette::buildArrays() +{ + customisationColorsArray = { + customisationColors.blue, + customisationColors.purple, + customisationColors.orange, + customisationColors.army, + customisationColors.turquoise, + customisationColors.sky, + customisationColors.yellow, + customisationColors.pink, + customisationColors.copper, + customisationColors.camel, + customisationColors.magenta, + customisationColors.yinYang + }; + + communityColorsArray = { + customisationColors.blue, + customisationColors.yellow, + customisationColors.magenta, + customisationColors.purple, + customisationColors.army, + customisationColors.sky, + customisationColors.orange, + customisationColors.camel + }; +} + +std::unique_ptr createDarkThemePalette(QObject* parent) +{ + auto t = std::make_unique(parent); + t->name = QStringLiteral("dark"); + + // Base colors + t->baseColor1 = StatusColors::getColor("graphite5"); + t->baseColor2 = StatusColors::getColor("graphite4"); + t->baseColor3 = StatusColors::getColor("graphite3"); + t->baseColor4 = StatusColors::getColor("graphite2"); + t->baseColor5 = StatusColors::getColor("graphite"); + + // Primary + t->primaryColor1 = StatusColors::getColor("blue3"); + t->primaryColor2 = StatusColors::getColor("blue4", 0.3); + t->primaryColor3 = StatusColors::getColor("blue4", 0.2); + + // Danger + t->dangerColor1 = StatusColors::getColor("red3"); + t->dangerColor2 = StatusColors::getColor("red3", 0.3); + t->dangerColor3 = StatusColors::getColor("red3", 0.2); + + // Warning + t->warningColor1 = StatusColors::getColor("warning_orange"); + t->warningColor2 = StatusColors::getColor("warning_orange", 0.2); + t->warningColor3 = StatusColors::getColor("warning_orange", 0.1); + + // Success + t->successColor1 = StatusColors::getColor("green3"); + t->successColor2 = StatusColors::getColor("green3", 0.2); + t->successColor3 = StatusColors::getColor("green3", 0.3); + + // Mention + t->mentionColor1 = StatusColors::getColor("turquoise3"); + t->mentionColor2 = StatusColors::getColor("turquoise4", 0.3); + t->mentionColor3 = StatusColors::getColor("turquoise4", 0.2); + t->mentionColor4 = StatusColors::getColor("turquoise4", 0.1); + + // Pin + t->pinColor1 = StatusColors::getColor("orange3"); + t->pinColor2 = StatusColors::getColor("orange4", 0.2); + t->pinColor3 = StatusColors::getColor("orange4", 0.1); + + // Direct (white with varying alpha) + t->directColor1 = StatusColors::getColor("white"); + t->directColor2 = StatusColors::getColor("white", 0.9); + t->directColor3 = StatusColors::getColor("white", 0.8); + t->directColor4 = StatusColors::getColor("white", 0.7); + t->directColor5 = StatusColors::getColor("white", 0.4); + t->directColor6 = StatusColors::getColor("white", 0.2); + t->directColor7 = StatusColors::getColor("white", 0.1); + t->directColor8 = StatusColors::getColor("white", 0.05); + t->directColor9 = StatusColors::getColor("white", 0.2); // as per QML duplicate + + // Indirect + t->indirectColor1 = StatusColors::getColor("black"); + t->indirectColor2 = StatusColors::getColor("black", 0.7); + t->indirectColor3 = StatusColors::getColor("black", 0.4); + t->indirectColor4 = StatusColors::getColor("graphite3"); + + // Misc + t->miscColor1 = StatusColors::getColor("blue5"); + t->miscColor2 = StatusColors::getColor("purple"); + t->miscColor3 = StatusColors::getColor("cyan"); + t->miscColor4 = StatusColors::getColor("violet"); + t->miscColor5 = StatusColors::getColor("red2"); + t->miscColor6 = StatusColors::getColor("orange"); + t->miscColor7 = StatusColors::getColor("yellow"); + t->miscColor8 = StatusColors::getColor("green4"); + t->miscColor9 = StatusColors::getColor("moss2"); + t->miscColor10 = StatusColors::getColor("brown3"); + t->miscColor11 = StatusColors::getColor("yellow2"); + t->miscColor12 = StatusColors::getColor("green6"); + + // Other + t->neutral95 = QColor(0x06, 0x0F, 0x1F); + t->dropShadow = StatusColors::getColor("black", 0.08); + t->dropShadow2 = StatusColors::getColor("blue8", 0.02); + t->dropShadow3 = StatusColors::getColor("blue8", 0.05); + t->backdropColor = StatusColors::getColor("black", 0.4); + t->statusFloatingButtonHighlight = StatusColors::getColor("blue4", 0.3); + t->statusLoadingHighlight = StatusColors::getColor("white", 0.03); + t->statusLoadingHighlight2 = StatusColors::getColor("white", 0.07); + t->messageHighlightColor = StatusColors::getColor("blue4", 0.2); + t->desktopBlue10 = StatusColors::getColor("darkDesktopBlue10"); + t->blockProgressBarColor = t->directColor7; + + t->background = t->baseColor3; + t->backgroundHover = t->baseColor2; + t->border = t->baseColor2; + t->textColor = t->directColor1; + t->secondaryText = t->baseColor1; + t->separator = t->directColor7; + t->darkGrey = t->baseColor2; + t->secondaryBackground = t->primaryColor2; + t->secondaryMenuBackground = StatusColors::getColor("graphite2"); + + // Status app layout + t->statusAppLayout.backgroundColor = t->baseColor3; + t->statusAppLayout.rightPanelBackgroundColor = t->baseColor3; + + // Status app nav bar + t->statusAppNavBar.backgroundColor = t->baseColor5; + + // Status toast message + t->statusToastMessage.backgroundColor = t->baseColor3; + + // Status list item + t->statusListItem.backgroundColor = t->baseColor3; + t->statusListItem.secondaryHoverBackgroundColor = t->primaryColor3; + t->statusListItem.highlightColor = StatusColors::getColor("blue3", 0.05); + + // Status chat list item + t->statusChatListItem.hoverBackgroundColor = t->directColor8; + t->statusChatListItem.selectedBackgroundColor = t->directColor7; + + // Status chat list category item + t->statusChatListCategoryItem.buttonHoverBackgroundColor = t->directColor7; + + // Status navigation list item + t->statusNavigationListItem.hoverBackgroundColor = t->directColor8; + t->statusNavigationListItem.selectedBackgroundColor = t->directColor7; + + // Status badge + t->statusBadge.foregroundColor = t->baseColor3; + t->statusBadge.borderColor = t->baseColor5; + t->statusBadge.hoverBorderColor = QColor(0x35, 0x3A, 0x4D); + + // Status menu + t->statusMenu.backgroundColor = t->baseColor3; + t->statusMenu.hoverBackgroundColor = t->directColor7; + t->statusMenu.separatorColor = t->separator; + + // Status modal + t->statusModal.backgroundColor = t->baseColor3; + + // Status rounded image + t->statusRoundedImage.backgroundColor = t->baseColor3; + + // Status chat input + t->statusChatInput.secondaryBackgroundColor = QColor(0x41, 0x41, 0x41); + + // Status switch tab + t->statusSwitchTab.buttonBackgroundColor = t->primaryColor1; + t->statusSwitchTab.barBackgroundColor = t->primaryColor3; + t->statusSwitchTab.selectedTextColor = t->indirectColor1; + t->statusSwitchTab.textColor = t->primaryColor1; + + // Status select + t->statusSelect.menuItemBackgroundColor = t->baseColor3; + t->statusSelect.menuItemHoverBackgroundColor = t->directColor7; + + // Status message + t->statusMessage.emojiReactionBackground = t->baseColor2; + t->statusMessage.emojiReactionBackgroundHovered = t->primaryColor3; + t->statusMessage.emojiReactionBorderHovered = t->primaryColor2; + + // Privacy mode colors + t->privacyModeColors.navBarColor = QColor(0x5A, 0x33, 0xCA); + t->privacyModeColors.navButtonColor = StatusColors::getColor("white", 0.4); + t->privacyModeColors.navButtonHighlightedColor = StatusColors::getColor("white"); + + // Customisation colors + t->customisationColors.blue = QColor(0x22, 0x3B, 0xC4); + t->customisationColors.purple = QColor(0x5A, 0x33, 0xCA); + t->customisationColors.orange = QColor(0xCC, 0x64, 0x38); + t->customisationColors.army = QColor(0x1A, 0x4E, 0x52); + t->customisationColors.turquoise = QColor(0x22, 0x61, 0x7C); + t->customisationColors.sky = QColor(0x14, 0x75, 0xAC); + t->customisationColors.yellow = QColor(0xC5, 0x8D, 0x30); + t->customisationColors.pink = QColor(0xC5, 0x59, 0x72); + t->customisationColors.copper = QColor(0xA2, 0x4E, 0x45); + t->customisationColors.camel = QColor(0x9F, 0x72, 0x52); + t->customisationColors.magenta = QColor(0xBD, 0x1E, 0x56); + t->customisationColors.yinYang = QColor(0xFF, 0xFF, 0xFF); + t->customisationColors.purple2 = QColor(0x71, 0x40, 0xFD); + + // User customization colors + t->userCustomizationColors = { + QColor(0xAA, 0xC6, 0xFF), QColor(0x88, 0x7A, 0xF9), + QColor(0x51, 0xD0, 0xF0), QColor(0xD3, 0x7E, 0xF4), + QColor(0xFA, 0x65, 0x65), QColor(0xFF, 0xCA, 0x0F), + QColor(0x93, 0xDB, 0x33), QColor(0x10, 0xA8, 0x8E), + QColor(0xAD, 0x43, 0x43), QColor(0xEA, 0xD2, 0x7B), + QColor(0xC0, 0xC0, 0xC0), QColor(0xA9, 0xA9, 0xA9) // silver, darkgrey + }; + + t->buildArrays(); + + return t; +} + + +std::unique_ptr createLightThemePalette(QObject* parent) +{ + auto t = std::make_unique(parent); + t->name = QStringLiteral("light"); + + // Base colors + t->baseColor1 = StatusColors::getColor("grey5"); + t->baseColor2 = StatusColors::getColor("grey4"); + t->baseColor3 = StatusColors::getColor("grey3"); + t->baseColor4 = StatusColors::getColor("grey2"); + t->baseColor5 = StatusColors::getColor("grey"); + + // Primary + t->primaryColor1 = StatusColors::getColor("blue"); + t->primaryColor2 = StatusColors::getColor("blue", 0.2); + t->primaryColor3 = StatusColors::getColor("blue", 0.1); + + // Danger + t->dangerColor1 = StatusColors::getColor("red"); + t->dangerColor2 = StatusColors::getColor("red", 0.2); + t->dangerColor3 = StatusColors::getColor("red", 0.1); + + // Warning + t->warningColor1 = StatusColors::getColor("warning_orange"); + t->warningColor2 = StatusColors::getColor("warning_orange", 0.2); + t->warningColor3 = StatusColors::getColor("warning_orange", 0.1); + + // Success + t->successColor1 = StatusColors::getColor("green"); + t->successColor2 = StatusColors::getColor("green", 0.1); + t->successColor3 = StatusColors::getColor("green", 0.2); + + // Mention + t->mentionColor1 = StatusColors::getColor("turquoise"); + t->mentionColor2 = StatusColors::getColor("turquoise2", 0.3); + t->mentionColor3 = StatusColors::getColor("turquoise2", 0.2); + t->mentionColor4 = StatusColors::getColor("turquoise2", 0.1); + + // Pin + t->pinColor1 = StatusColors::getColor("orange"); + t->pinColor2 = StatusColors::getColor("orange2", 0.2); + t->pinColor3 = StatusColors::getColor("orange2", 0.1); + + // Direct (black with varying alpha) + t->directColor1 = StatusColors::getColor("black"); + t->directColor2 = StatusColors::getColor("black", 0.9); + t->directColor3 = StatusColors::getColor("black", 0.8); + t->directColor4 = StatusColors::getColor("black", 0.7); + t->directColor5 = StatusColors::getColor("black", 0.4); + t->directColor6 = StatusColors::getColor("black", 0.3); + t->directColor7 = StatusColors::getColor("black", 0.1); + t->directColor8 = StatusColors::getColor("black", 0.05); + t->directColor9 = StatusColors::getColor("black", 0.2); + + // Indirect + t->indirectColor1 = StatusColors::getColor("white"); + t->indirectColor2 = StatusColors::getColor("white", 0.7); + t->indirectColor3 = StatusColors::getColor("white", 0.4); + t->indirectColor4 = StatusColors::getColor("white"); + + // Misc + t->miscColor1 = StatusColors::getColor("blue2"); + t->miscColor2 = StatusColors::getColor("purple"); + t->miscColor3 = StatusColors::getColor("cyan"); + t->miscColor4 = StatusColors::getColor("violet"); + t->miscColor5 = StatusColors::getColor("red2"); + t->miscColor6 = StatusColors::getColor("orange"); + t->miscColor7 = StatusColors::getColor("yellow"); + t->miscColor8 = StatusColors::getColor("green2"); + t->miscColor9 = StatusColors::getColor("moss"); + t->miscColor10 = StatusColors::getColor("brown"); + t->miscColor11 = StatusColors::getColor("brown2"); + t->miscColor12 = StatusColors::getColor("green5"); + + // Other + t->neutral95 = QColor(0x0D, 0x16, 0x25); + t->dropShadow = QColor::fromRgbF(0.0, 34.0/255.0, 51.0/255.0, 0.03); + t->dropShadow2 = StatusColors::getColor("blue7", 0.02); + t->dropShadow3 = StatusColors::getColor("black", 0.15); + t->backdropColor = StatusColors::getColor("black", 0.4); + t->statusFloatingButtonHighlight = StatusColors::getColor("blueHijab"); + t->statusLoadingHighlight = StatusColors::getColor("lightPattensBlue", 0.5); + t->statusLoadingHighlight2 = t->indirectColor3; + t->messageHighlightColor = StatusColors::getColor("blue", 0.2); + t->desktopBlue10 = StatusColors::getColor("lightDesktopBlue10"); + t->blockProgressBarColor = t->baseColor3; + + t->background = t->white; + t->backgroundHover = t->baseColor2; + t->border = t->baseColor2; + t->textColor = t->directColor1; + t->secondaryText = t->baseColor1; + t->separator = t->baseColor2; + t->darkGrey = t->baseColor1; + t->secondaryBackground = t->primaryColor2; + t->secondaryMenuBackground = t->baseColor4; + + // Status app layout + t->statusAppLayout.backgroundColor = t->white; + t->statusAppLayout.rightPanelBackgroundColor = t->white; + + // Status app nav bar + t->statusAppNavBar.backgroundColor = t->baseColor2; + + // Status toast message + t->statusToastMessage.backgroundColor = t->white; + + // Status list item + t->statusListItem.backgroundColor = t->white; + t->statusListItem.secondaryHoverBackgroundColor = StatusColors::getColor("blue6"); + t->statusListItem.highlightColor = StatusColors::getColor("blue", 0.05); + + // Status chat list item + t->statusChatListItem.hoverBackgroundColor = t->baseColor2; + t->statusChatListItem.selectedBackgroundColor = t->baseColor3; + + // Status chat list category item + t->statusChatListCategoryItem.buttonHoverBackgroundColor = t->directColor8; + + // Status navigation list item + t->statusNavigationListItem.hoverBackgroundColor = t->baseColor2; + t->statusNavigationListItem.selectedBackgroundColor = t->baseColor3; + + // Status badge + t->statusBadge.foregroundColor = t->white; + t->statusBadge.borderColor = t->baseColor4; + t->statusBadge.hoverBorderColor = QColor(0xDD, 0xE3, 0xF3); + + // Status menu + t->statusMenu.backgroundColor = t->white; + t->statusMenu.hoverBackgroundColor = t->baseColor2; + t->statusMenu.separatorColor = t->separator; + + // Status modal + t->statusModal.backgroundColor = t->white; + + // Status rounded image + t->statusRoundedImage.backgroundColor = t->white; + + // Status chat input + t->statusChatInput.secondaryBackgroundColor = QColor(0xE2, 0xE6, 0xE8); + + // Status switch tab + t->statusSwitchTab.buttonBackgroundColor = t->primaryColor1; + t->statusSwitchTab.barBackgroundColor = t->primaryColor3; + t->statusSwitchTab.selectedTextColor = t->indirectColor1; + t->statusSwitchTab.textColor = t->primaryColor1; + + // Status select + t->statusSelect.menuItemBackgroundColor = t->white; + t->statusSelect.menuItemHoverBackgroundColor = t->baseColor2; + + // Status message + t->statusMessage.emojiReactionBackground = t->baseColor2; + t->statusMessage.emojiReactionBackgroundHovered = t->primaryColor2; + t->statusMessage.emojiReactionBorderHovered = t->primaryColor3; + + // Privacy mode colors + t->privacyModeColors.navBarColor = QColor(0x5A, 0x33, 0xCA); + t->privacyModeColors.navButtonColor = StatusColors::getColor("white", 0.4); + t->privacyModeColors.navButtonHighlightedColor = StatusColors::getColor("white"); + + // Customisation colors + t->customisationColors.blue = QColor(0x2A, 0x4A, 0xF5); + t->customisationColors.purple = QColor(0x71, 0x40, 0xFD); + t->customisationColors.orange = QColor(0xFF, 0x7D, 0x46); + t->customisationColors.army = QColor(0x21, 0x62, 0x66); + t->customisationColors.turquoise = QColor(0x2A, 0x79, 0x9B); + t->customisationColors.sky = QColor(0x19, 0x92, 0xD7); + t->customisationColors.yellow = QColor(0xF6, 0xAF, 0x3C); + t->customisationColors.pink = QColor(0xF6, 0x6F, 0x8F); + t->customisationColors.copper = QColor(0xCB, 0x62, 0x56); + t->customisationColors.camel = QColor(0xC7, 0x8F, 0x67); + t->customisationColors.magenta = QColor(0xEC, 0x26, 0x6C); + t->customisationColors.yinYang = QColor(0x09, 0x10, 0x1C); + t->customisationColors.purple2 = QColor(0x5A, 0x33, 0xCA); + + // User customization colors + t->userCustomizationColors = { + QColor(0x29, 0x46, 0xC4), QColor(0x88, 0x7A, 0xF9), + QColor(0x51, 0xD0, 0xF0), QColor(0xD3, 0x7E, 0xF4), + QColor(0xFA, 0x65, 0x65), QColor(0xFF, 0xCA, 0x0F), + QColor(0x7C, 0xDA, 0x00), QColor(0x26, 0xA6, 0x9A), + QColor(0x8B, 0x31, 0x31), QColor(0x9B, 0x83, 0x2F), + QColor(0xC0, 0xC0, 0xC0), QColor(0xA9, 0xA9, 0xA9) + }; + + t->buildArrays(); + + return t; +} + +void registerThemePaletteType() +{ + // Register gadget meta types. Technically it's not needed, but helps QtCreator + // providing hints on the fly. + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusAppLayout", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusAppNavBar", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusToastMessage", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusListItem", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusChatListItem", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusChatListCategoryItem", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusNavigationListItem", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusBadge", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusMenu", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusModal", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusRoundedImage", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusChatInput", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusSwitchTab", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusSelect", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "StatusMessage", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "CustomisationColors", ""); + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "PrivacyModeColors", ""); + + qmlRegisterUncreatableType("StatusQ.Core.Theme", 1, 0, "ThemePalette", ""); +} diff --git a/ui/StatusQ/src/typesregistration.cpp b/ui/StatusQ/src/typesregistration.cpp index 3678686f4d4..be35b3fa533 100644 --- a/ui/StatusQ/src/typesregistration.cpp +++ b/ui/StatusQ/src/typesregistration.cpp @@ -2,19 +2,21 @@ #include "StatusQ/clipboardutils.h" #include "StatusQ/constantrole.h" #include "StatusQ/fastexpressionfilter.h" -#include "StatusQ/oneoffilter.h" #include "StatusQ/fastexpressionrole.h" #include "StatusQ/fastexpressionsorter.h" #include "StatusQ/formatteddoubleproperty.h" #include "StatusQ/genericvalidator.h" #include "StatusQ/keychain.h" #include "StatusQ/networkchecker.h" +#include "StatusQ/oneoffilter.h" #include "StatusQ/permissionutilsinternal.h" #include "StatusQ/rxvalidator.h" +#include "StatusQ/statuscolors.h" #include "StatusQ/statusemojimodel.h" #include "StatusQ/statussyntaxhighlighter.h" #include "StatusQ/stringutilsinternal.h" #include "StatusQ/systemutilsinternal.h" +#include "StatusQ/theme.h" #include "StatusQ/undefinedfilter.h" #include "StatusQ/urlutils.h" @@ -97,6 +99,18 @@ void registerStatusQTypes() { return new OnboardingEnums; }); + qmlRegisterSingletonType("StatusQ.Core.Theme", 0, 1, "StatusColors", + [](QQmlEngine*, QJSEngine*) { + return new StatusColors; + }); + + qmlRegisterUncreatableType("StatusQ.Core.Theme", 0, 1, + "Theme", QStringLiteral("This is attached type, cannot be created directly.")); + + qmlRegisterUncreatableType("StatusQ.Core.Theme", 0, 1, + "ThemePalette", QStringLiteral("Theme palette cannot be created directly.")); + + #ifdef BUNDLE_QML_RESOURCES Q_INIT_RESOURCE(TestConfig); Q_INIT_RESOURCE(statusq); From eef1a7b3b8568599b82fb62573ea575f74d62f12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Wed, 19 Nov 2025 16:20:27 +0100 Subject: [PATCH 02/32] Theme: added ability to access root Theme via attached property --- ui/StatusQ/include/StatusQ/theme.h | 2 ++ ui/StatusQ/src/theme.cpp | 19 +++++++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/ui/StatusQ/include/StatusQ/theme.h b/ui/StatusQ/include/StatusQ/theme.h index 44a2ad4f057..a2c1dd67487 100644 --- a/ui/StatusQ/include/StatusQ/theme.h +++ b/ui/StatusQ/include/StatusQ/theme.h @@ -58,6 +58,8 @@ class Theme : public QQuickAttachedPropertyPropagator const ThemePalette* palette() const; + Q_INVOKABLE Theme* rootTheme(); + static Theme *qmlAttachedProperties(QObject *object); signals: diff --git a/ui/StatusQ/src/theme.cpp b/ui/StatusQ/src/theme.cpp index 898c847cc9f..ca80d28ec2a 100644 --- a/ui/StatusQ/src/theme.cpp +++ b/ui/StatusQ/src/theme.cpp @@ -1,5 +1,7 @@ #include "StatusQ/theme.h" +#include + namespace { constexpr qreal s_defaultPadding = 16; @@ -165,6 +167,23 @@ const ThemePalette* Theme::palette() const : s_paletteDark.get(); } +Theme *Theme::rootTheme() +{ + auto theme = qobject_cast(attachedParent()); + + if (!theme) + return this; + + while (true) { + auto next = qobject_cast(theme->attachedParent()); + + if (!next || qobject_cast(next->parent())) + return theme; + else + theme = next; + } +} + Theme* Theme::qmlAttachedProperties(QObject *object) { return new Theme(object); From 37e7ed77ae083b417ccc54b964fc8855a3de9d82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Mon, 24 Nov 2025 11:49:44 +0100 Subject: [PATCH 03/32] Theme: radius property added --- ui/StatusQ/include/StatusQ/theme.h | 2 ++ ui/StatusQ/src/theme.cpp | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/ui/StatusQ/include/StatusQ/theme.h b/ui/StatusQ/include/StatusQ/theme.h index a2c1dd67487..be2722a3aa0 100644 --- a/ui/StatusQ/include/StatusQ/theme.h +++ b/ui/StatusQ/include/StatusQ/theme.h @@ -15,6 +15,7 @@ class Theme : public QQuickAttachedPropertyPropagator Q_PROPERTY(qreal bigPadding READ bigPadding NOTIFY paddingChanged) Q_PROPERTY(qreal halfPadding READ halfPadding NOTIFY paddingChanged) Q_PROPERTY(qreal smallPadding READ smallPadding NOTIFY paddingChanged) + Q_PROPERTY(qreal radius READ radius CONSTANT) Q_PROPERTY(bool explicitPadding READ explicitPadding NOTIFY explicitPaddingChanged) @@ -38,6 +39,7 @@ class Theme : public QQuickAttachedPropertyPropagator qreal bigPadding() const; qreal halfPadding() const; qreal smallPadding() const; + qreal radius() const; void setPadding(qreal padding); void resetPadding(); diff --git a/ui/StatusQ/src/theme.cpp b/ui/StatusQ/src/theme.cpp index ca80d28ec2a..91be4ee5f9b 100644 --- a/ui/StatusQ/src/theme.cpp +++ b/ui/StatusQ/src/theme.cpp @@ -41,6 +41,10 @@ qreal Theme::smallPadding() const { return m_padding * s_smallPaddingFactor; } +qreal Theme::radius() const { + return s_defaultPadding * s_halfPaddingFactor; +} + void Theme::setPadding(qreal padding) { auto explicitPaddingOld = m_explicitPadding; From 81ecb5b7d5803eb323942c7b87736057d4d80aa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Wed, 19 Nov 2025 16:21:42 +0100 Subject: [PATCH 04/32] Theme: Assets and Fonts component added --- ui/StatusQ/src/StatusQ/Core/Theme/Assets.qml | 17 +++ ui/StatusQ/src/StatusQ/Core/Theme/Fonts.qml | 108 +++++++++++++++++++ ui/StatusQ/src/StatusQ/Core/Theme/qmldir | 9 +- ui/StatusQ/src/statusq.qrc | 2 + 4 files changed, 132 insertions(+), 4 deletions(-) create mode 100644 ui/StatusQ/src/StatusQ/Core/Theme/Assets.qml create mode 100644 ui/StatusQ/src/StatusQ/Core/Theme/Fonts.qml diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/Assets.qml b/ui/StatusQ/src/StatusQ/Core/Theme/Assets.qml new file mode 100644 index 00000000000..238d7958c6c --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Core/Theme/Assets.qml @@ -0,0 +1,17 @@ +pragma Singleton + +import QtQml + +QtObject { + readonly property string assetPath: Qt.resolvedUrl("../../../assets/") + + function png(name) { + return assetPath + "png/" + name + ".png" + } + function svg(name) { + return assetPath + "img/icons/" + name + ".svg" + } + function emoji(name) { + return assetPath + "twemoji/svg/" + name + ".svg" + } +} diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/Fonts.qml b/ui/StatusQ/src/StatusQ/Core/Theme/Fonts.qml new file mode 100644 index 00000000000..1416aeef98b --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Core/Theme/Fonts.qml @@ -0,0 +1,108 @@ +pragma Singleton + +import QtQuick + +import StatusQ.Core.Utils as SQUtils + +SQUtils.QObject { + readonly property alias baseFont: baseFont.font + readonly property alias monoFont: monoFont.font + readonly property alias codeFont: codeFont.font + + FontLoader { + id: baseFont + + source: Assets.assetPath + "fonts/Inter/Inter-Regular.otf" + } + + FontLoader { + id: monoFont + + source: Assets.assetPath + "fonts/InterStatus/InterStatus-Regular.otf" + } + + FontLoader { + id: codeFont + + source: Assets.assetPath + "fonts/RobotoMono/RobotoMono-Regular.ttf" + } + + // Inter font variants + FontLoader { + source: Assets.assetPath + "fonts/Inter/Inter-Thin.otf" + } + + FontLoader { + source: Assets.assetPath + "fonts/Inter/Inter-ExtraLight.otf" + } + + FontLoader { + source: Assets.assetPath + "fonts/Inter/Inter-Light.otf" + } + + FontLoader { + source: Assets.assetPath + "fonts/Inter/Inter-Medium.otf" + } + + FontLoader { + source: Assets.assetPath + "fonts/Inter/Inter-Bold.otf" + } + + FontLoader { + source: Assets.assetPath + "fonts/Inter/Inter-ExtraBold.otf" + } + + FontLoader { + source: Assets.assetPath + "fonts/Inter/Inter-Black.otf" + } + + // Inter Status font variants + FontLoader { + source: Assets.assetPath + "fonts/InterStatus/InterStatus-Thin.otf" + } + + FontLoader { + source: Assets.assetPath + "fonts/InterStatus/InterStatus-ExtraLight.otf" + } + + FontLoader { + source: Assets.assetPath + "fonts/InterStatus/InterStatus-Light.otf" + } + + FontLoader { + source: Assets.assetPath + "fonts/InterStatus/InterStatus-Medium.otf" + } + + FontLoader { + source: Assets.assetPath + "fonts/InterStatus/InterStatus-Bold.otf" + } + + FontLoader { + source: Assets.assetPath + "fonts/InterStatus/InterStatus-ExtraBold.otf" + } + + FontLoader { + source: Assets.assetPath + "fonts/InterStatus/InterStatus-Black.otf" + } + + // Roboto font variants + FontLoader { + source: Assets.assetPath + "fonts/RobotoMono/RobotoMono-Thin.ttf" + } + + FontLoader { + source: Assets.assetPath + "fonts/RobotoMono/RobotoMono-ExtraLight.ttf" + } + + FontLoader { + source: Assets.assetPath + "fonts/RobotoMono/RobotoMono-Light.ttf" + } + + FontLoader { + source: Assets.assetPath + "fonts/RobotoMono/RobotoMono-Medium.ttf" + } + + FontLoader { + source: Assets.assetPath + "fonts/RobotoMono/RobotoMono-Bold.ttf" + } +} diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/qmldir b/ui/StatusQ/src/StatusQ/Core/Theme/qmldir index 0fab64e2866..03e3013434a 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/qmldir +++ b/ui/StatusQ/src/StatusQ/Core/Theme/qmldir @@ -1,8 +1,9 @@ module StatusQ.Core.Theme -singleton StatusColors 0.1 StatusColors.qml -ThemePalette 0.1 ThemePalette.qml -StatusLightTheme 0.1 StatusLightTheme.qml StatusDarkTheme 0.1 StatusDarkTheme.qml +StatusLightTheme 0.1 StatusLightTheme.qml +ThemePalette 0.1 ThemePalette.qml +singleton Assets 0.1 Assets.qml +singleton Fonts 0.1 Fonts.qml +singleton StatusColors 0.1 StatusColors.qml singleton Theme 0.1 Theme.qml - diff --git a/ui/StatusQ/src/statusq.qrc b/ui/StatusQ/src/statusq.qrc index ce91aa4c260..4eef05d142c 100644 --- a/ui/StatusQ/src/statusq.qrc +++ b/ui/StatusQ/src/statusq.qrc @@ -186,6 +186,8 @@ StatusQ/Core/StatusScrollView.qml StatusQ/Core/StatusSharedUpdateTimer.qml StatusQ/Core/StatusTooltipSettings.qml + StatusQ/Core/Theme/Assets.qml + StatusQ/Core/Theme/Fonts.qml StatusQ/Core/Theme/StatusColors.qml StatusQ/Core/Theme/StatusDarkTheme.qml StatusQ/Core/Theme/StatusLightTheme.qml From 05fa413dc67ca0d238d6c856bbb11e29fd4f03dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Thu, 20 Nov 2025 11:19:11 +0100 Subject: [PATCH 05/32] Theme: font size handling added --- storybook/pages/ThemePage.qml | 71 ++++++-- ui/StatusQ/include/StatusQ/theme.h | 84 ++++++++-- ui/StatusQ/include/StatusQ/themepalette.h | 3 +- ui/StatusQ/src/theme.cpp | 190 +++++++++++++++++----- ui/StatusQ/src/themepalette.cpp | 2 +- 5 files changed, 283 insertions(+), 67 deletions(-) diff --git a/storybook/pages/ThemePage.qml b/storybook/pages/ThemePage.qml index 8316771349a..e45b1af9df2 100644 --- a/storybook/pages/ThemePage.qml +++ b/storybook/pages/ThemePage.qml @@ -25,35 +25,80 @@ Item { id: page footer: ColumnLayout { - Slider { - from: 0 - to: 50 - stepSize: 1 + RowLayout { + Button { + text: "reset padding" - value: panel.Theme.padding + onClicked: { + panel.Theme.padding = undefined + } - onValueChanged: { - if (value !== panel.Theme.padding) - panel.Theme.padding = value + enabled: panel.Theme.explicitPadding + } + + Slider { + Layout.preferredWidth: 150 + + from: 0 + to: 50 + stepSize: 1 + + value: panel.Theme.padding + + onValueChanged: { + if (value !== panel.Theme.padding) + panel.Theme.padding = value + } + } + + Label { + Layout.fillWidth: true + wrapMode: Text.Wrap + + font.pixelSize: Theme.fontSize(13) + text: `padding: ${panel.Theme.padding}` } } RowLayout { Button { - text: "reset padding" + text: "reset font size" onClicked: { - panel.Theme.padding = undefined - //panel.Theme.resetPadding() + panel.Theme.fontSizeOffset = undefined } - enabled: panel.Theme.explicitPadding + enabled: panel.Theme.explicitFontSizeOffset + } + + Slider { + Layout.preferredWidth: 150 + + from: -5 + to: 10 + stepSize: 1 + + value: panel.Theme.fontSizeOffset + + onValueChanged: { + if (value !== panel.Theme.fontSizeOffset) + panel.Theme.fontSizeOffset = value + } } Label { - text: `padding: ${panel.Theme.padding}` + Layout.fillWidth: true + wrapMode: Text.Wrap + + font.pixelSize: Theme.fontSize(13) + text: `font size offset: ${panel.Theme.fontSizeOffset}` } + } + RowLayout { + Label { + text: `theme:` + } Button { text: "Dark" onClicked: panel.Theme.style = Theme.Dark diff --git a/ui/StatusQ/include/StatusQ/theme.h b/ui/StatusQ/include/StatusQ/theme.h index be2722a3aa0..6df09be9665 100644 --- a/ui/StatusQ/include/StatusQ/theme.h +++ b/ui/StatusQ/include/StatusQ/theme.h @@ -2,7 +2,7 @@ #include "StatusQ/themepalette.h" -#include +#include #include #include @@ -10,19 +10,46 @@ class Theme : public QQuickAttachedPropertyPropagator { Q_OBJECT - Q_PROPERTY(qreal padding READ padding WRITE setPadding RESET resetPadding NOTIFY paddingChanged) + Q_PROPERTY(qreal padding READ padding WRITE setPadding + RESET resetPadding NOTIFY paddingChanged) Q_PROPERTY(qreal xlPadding READ xlPadding NOTIFY paddingChanged) Q_PROPERTY(qreal bigPadding READ bigPadding NOTIFY paddingChanged) Q_PROPERTY(qreal halfPadding READ halfPadding NOTIFY paddingChanged) Q_PROPERTY(qreal smallPadding READ smallPadding NOTIFY paddingChanged) Q_PROPERTY(qreal radius READ radius CONSTANT) - Q_PROPERTY(bool explicitPadding READ explicitPadding NOTIFY explicitPaddingChanged) + Q_PROPERTY(bool explicitPadding READ explicitPadding + NOTIFY explicitPaddingChanged) - Q_PROPERTY(Style style READ style WRITE setStyle RESET resetStyle NOTIFY styleChanged) - Q_PROPERTY(const ThemePalette* palette READ palette NOTIFY styleChanged) + Q_PROPERTY(Style style READ style WRITE setStyle RESET resetStyle + NOTIFY styleChanged) + Q_PROPERTY(const ThemePalette* palette READ palette + NOTIFY styleChanged) - Q_PROPERTY(bool explicitStyle READ explicitStyle NOTIFY explicitStyleChanged) + Q_PROPERTY(bool explicitStyle READ explicitStyle + NOTIFY explicitStyleChanged) + + Q_PROPERTY(int fontSizeOffset READ fontSizeOffset WRITE setFontSizeOffset + RESET resetFontSizeOffset NOTIFY fontSizeOffsetChanged) + + Q_PROPERTY(int secondaryAdditionalTextSize + READ secondaryAdditionalTextSize + NOTIFY fontSizeOffsetChanged) + Q_PROPERTY(int primaryTextFontSize READ primaryTextFontSize + NOTIFY fontSizeOffsetChanged) + Q_PROPERTY(int secondaryTextFontSize READ secondaryTextFontSize + NOTIFY fontSizeOffsetChanged) + Q_PROPERTY(int additionalTextSize READ additionalTextSize + NOTIFY fontSizeOffsetChanged) + Q_PROPERTY(int tertiaryTextFontSize READ tertiaryTextFontSize + NOTIFY fontSizeOffsetChanged) + Q_PROPERTY(int asideTextFontSize READ asideTextFontSize + NOTIFY fontSizeOffsetChanged) + + Q_PROPERTY(bool explicitFontSizeOffset READ explicitFontSizeOffset + NOTIFY explicitFontSizeOffsetChanged) + + Q_PROPERTY(QJSValue fontSize READ fontSize NOTIFY fontSizeOffsetChanged) enum class Style { Light, @@ -34,6 +61,7 @@ class Theme : public QQuickAttachedPropertyPropagator public: explicit Theme(QObject *parent = nullptr); + // paddings qreal padding() const; qreal xlPadding() const; qreal bigPadding() const; @@ -43,35 +71,57 @@ class Theme : public QQuickAttachedPropertyPropagator void setPadding(qreal padding); void resetPadding(); - - void inheritPadding(qreal padding); - void propagatePadding(); - bool explicitPadding() const; + // light/dark style Style style() const; + const ThemePalette* palette() const; + void setStyle(Style style); void resetStyle(); + bool explicitStyle() const; - void inheritStyle(Style style); - void propagateStyle(); + // font size + int fontSizeOffset() const; + int secondaryAdditionalTextSize() const; + int primaryTextFontSize() const; + int secondaryTextFontSize() const; + int additionalTextSize() const; + int tertiaryTextFontSize() const; + int asideTextFontSize() const; - bool explicitStyle() const; + QJSValue fontSize() const; - const ThemePalette* palette() const; + void setFontSizeOffset(int fontSizeOffset); + void resetFontSizeOffset(); + bool explicitFontSizeOffset() const; + // top level object access Q_INVOKABLE Theme* rootTheme(); + // attached object instantiation static Theme *qmlAttachedProperties(QObject *object); signals: void paddingChanged(); void explicitPaddingChanged(); - void explicitStyleChanged(); void styleChanged(); + void explicitStyleChanged(); + + void fontSizeOffsetChanged(); + void explicitFontSizeOffsetChanged(); protected: + void inheritPadding(qreal padding); + void propagatePadding(); + + void inheritStyle(Style style); + void propagateStyle(); + + void inheritFontSizeOffset(int fontSizeOffset); + void propagateFontSizeOffset(); + void attachedParentChange( QQuickAttachedPropertyPropagator *newParent, QQuickAttachedPropertyPropagator *oldParent) override; @@ -82,6 +132,10 @@ class Theme : public QQuickAttachedPropertyPropagator bool m_explicitStyle = false; Style m_style = Style::Light; + + bool m_explicitFontSizeOffset = false; + int m_fontSizeOffset = 0; + mutable QJSValue m_fontSizeFn; }; QML_DECLARE_TYPEINFO(Theme, QML_HAS_ATTACHED_PROPERTIES) diff --git a/ui/StatusQ/include/StatusQ/themepalette.h b/ui/StatusQ/include/StatusQ/themepalette.h index 8cae7285a51..cb92a9d605f 100644 --- a/ui/StatusQ/include/StatusQ/themepalette.h +++ b/ui/StatusQ/include/StatusQ/themepalette.h @@ -144,7 +144,8 @@ class CustomisationColors { Q_PROPERTY(QColor yinYang MEMBER yinYang CONSTANT) Q_PROPERTY(QColor purple2 MEMBER purple2 CONSTANT) public: - QColor blue, purple, orange, army, turquoise, sky, yellow, pink, copper, camel, magenta, yinYang, purple2; + QColor blue, purple, orange, army, turquoise, sky, yellow, pink, copper, + camel, magenta, yinYang, purple2; }; class PrivacyModeColors { diff --git a/ui/StatusQ/src/theme.cpp b/ui/StatusQ/src/theme.cpp index 91be4ee5f9b..93772818ec8 100644 --- a/ui/StatusQ/src/theme.cpp +++ b/ui/StatusQ/src/theme.cpp @@ -1,6 +1,7 @@ #include "StatusQ/theme.h" #include +#include namespace { @@ -10,6 +11,13 @@ constexpr qreal s_bigPaddingFactor = 1.5; constexpr qreal s_halfPaddingFactor = 0.5; constexpr qreal s_smallPaddingFactor = 0.625; +constexpr int s_secondaryAdditionalTextBaseSize = 17; +constexpr int s_primaryTextFontBaseSize = 15; +constexpr int s_secondaryTextFontBaseSize = 14; +constexpr int s_additionalTextBaseSize = 13; +constexpr int s_tertiaryTextFontBaseSize = 12; +constexpr int s_asideTextFontBaseSize = 10; + const std::unique_ptr s_paletteDark = createDarkThemePalette(); const std::unique_ptr s_paletteLight = createLightThemePalette(); @@ -78,26 +86,6 @@ void Theme::resetPadding() emit explicitPaddingChanged(); } -void Theme::inheritPadding(qreal padding) -{ - if (m_explicitPadding || qFuzzyCompare(m_padding, padding)) - return; - - m_padding = padding; - propagatePadding(); - emit paddingChanged(); -} - -void Theme::propagatePadding() -{ - const auto themes = attachedChildren(); - for (QQuickAttachedPropertyPropagator *child : themes) { - auto theme = qobject_cast(child); - if (theme) - theme->inheritPadding(m_padding); - } -} - bool Theme::explicitPadding() const { return m_explicitPadding; } @@ -107,6 +95,12 @@ Theme::Style Theme::style() const return m_style; } +const ThemePalette* Theme::palette() const +{ + return m_style == Style::Light ? s_paletteLight.get() + : s_paletteDark.get(); +} + void Theme::setStyle(Style style) { auto explicitStyleOld = m_explicitStyle; @@ -141,34 +135,94 @@ void Theme::resetStyle() emit explicitStyleChanged(); } -void Theme::inheritStyle(Style style) +bool Theme::explicitStyle() const { + return m_explicitStyle; +} + +int Theme::fontSizeOffset() const { - if (m_explicitStyle || m_style == style) - return; + return m_fontSizeOffset; +} - m_style = style; - propagateStyle(); - emit styleChanged(); +int Theme::secondaryAdditionalTextSize() const +{ + return s_secondaryAdditionalTextBaseSize + m_fontSizeOffset; } -void Theme::propagateStyle() +int Theme::primaryTextFontSize() const { - const auto themes = attachedChildren(); - for (QQuickAttachedPropertyPropagator *child : themes) { - auto theme = qobject_cast(child); - if (theme) - theme->inheritStyle(m_style); + return s_primaryTextFontBaseSize + m_fontSizeOffset; +} + +int Theme::secondaryTextFontSize() const +{ + return s_secondaryTextFontBaseSize + m_fontSizeOffset; +} + +int Theme::additionalTextSize() const +{ + return s_additionalTextBaseSize + m_fontSizeOffset; +} + +int Theme::tertiaryTextFontSize() const +{ + return s_tertiaryTextFontBaseSize + m_fontSizeOffset; +} + +int Theme::asideTextFontSize() const +{ + return s_asideTextFontBaseSize + m_fontSizeOffset; +} + +QJSValue Theme::fontSize() const +{ + if (!m_fontSizeFn.isCallable()) { + QQmlEngine *engine = qmlEngine(parent()); + if (engine) { + auto str = QStringLiteral("value => value + %1").arg(m_fontSizeOffset); + m_fontSizeFn = engine->evaluate(str); + } } + return m_fontSizeFn; } -bool Theme::explicitStyle() const { - return m_explicitStyle; +void Theme::setFontSizeOffset(int fontSizeOffset) +{ + auto explicitFontSizeOffsetOld = m_explicitFontSizeOffset; + m_explicitFontSizeOffset = true; + + if (m_fontSizeOffset == fontSizeOffset) { + if (!explicitFontSizeOffsetOld) + emit explicitFontSizeOffsetChanged(); + + return; + } + + m_fontSizeOffset = fontSizeOffset; + propagateFontSizeOffset(); + m_fontSizeFn = QJSValue(); + emit fontSizeOffsetChanged(); + + if (!explicitFontSizeOffsetOld) + emit explicitFontSizeOffsetChanged(); } -const ThemePalette* Theme::palette() const +void Theme::resetFontSizeOffset() { - return m_style == Style::Light ? s_paletteLight.get() - : s_paletteDark.get(); + if (!m_explicitFontSizeOffset) + return; + + m_explicitFontSizeOffset = false; + auto theme = qobject_cast(attachedParent()); + + inheritFontSizeOffset(theme ? theme->fontSizeOffset() : 0); + + emit explicitFontSizeOffsetChanged(); +} + +bool Theme::explicitFontSizeOffset() const +{ + return m_explicitFontSizeOffset; } Theme *Theme::rootTheme() @@ -193,6 +247,67 @@ Theme* Theme::qmlAttachedProperties(QObject *object) return new Theme(object); } +void Theme::inheritPadding(qreal padding) +{ + if (m_explicitPadding || qFuzzyCompare(m_padding, padding)) + return; + + m_padding = padding; + propagatePadding(); + emit paddingChanged(); +} + +void Theme::propagatePadding() +{ + const auto themes = attachedChildren(); + for (QQuickAttachedPropertyPropagator *child : themes) { + auto theme = qobject_cast(child); + if (theme) + theme->inheritPadding(m_padding); + } +} + +void Theme::inheritStyle(Style style) +{ + if (m_explicitStyle || m_style == style) + return; + + m_style = style; + propagateStyle(); + emit styleChanged(); +} + +void Theme::propagateStyle() +{ + const auto themes = attachedChildren(); + for (QQuickAttachedPropertyPropagator *child : themes) { + auto theme = qobject_cast(child); + if (theme) + theme->inheritStyle(m_style); + } +} + +void Theme::inheritFontSizeOffset(int fontSizeOffset) +{ + if (m_explicitFontSizeOffset || m_fontSizeOffset == fontSizeOffset) + return; + + m_fontSizeOffset = fontSizeOffset; + propagateFontSizeOffset(); + m_fontSizeFn = QJSValue(); + emit fontSizeOffsetChanged(); +} + +void Theme::propagateFontSizeOffset() +{ + const auto themes = attachedChildren(); + for (QQuickAttachedPropertyPropagator *child : themes) { + auto theme = qobject_cast(child); + if (theme) + theme->inheritFontSizeOffset(m_fontSizeOffset); + } +} + void Theme::attachedParentChange(QQuickAttachedPropertyPropagator* newParent, QQuickAttachedPropertyPropagator* oldParent) { @@ -201,5 +316,6 @@ void Theme::attachedParentChange(QQuickAttachedPropertyPropagator* newParent, if (attachedParentTheme) { inheritPadding(attachedParentTheme->padding()); inheritStyle(attachedParentTheme->style()); + inheritFontSizeOffset(attachedParentTheme->fontSizeOffset()); } } diff --git a/ui/StatusQ/src/themepalette.cpp b/ui/StatusQ/src/themepalette.cpp index 85d884e111e..26147e8454c 100644 --- a/ui/StatusQ/src/themepalette.cpp +++ b/ui/StatusQ/src/themepalette.cpp @@ -98,7 +98,7 @@ std::unique_ptr createDarkThemePalette(QObject* parent) t->directColor6 = StatusColors::getColor("white", 0.2); t->directColor7 = StatusColors::getColor("white", 0.1); t->directColor8 = StatusColors::getColor("white", 0.05); - t->directColor9 = StatusColors::getColor("white", 0.2); // as per QML duplicate + t->directColor9 = StatusColors::getColor("white", 0.2); // Indirect t->indirectColor1 = StatusColors::getColor("black"); From 4973744a6f2978fe421f9b623cf89029a3bbbde8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Fri, 21 Nov 2025 16:48:27 +0100 Subject: [PATCH 06/32] Theme: ThemeUtils component added --- ui/StatusQ/include/StatusQ/theme.h | 2 + .../src/StatusQ/Core/Theme/ThemeUtils.qml | 102 ++++++++++++++++++ ui/StatusQ/src/StatusQ/Core/Theme/qmldir | 1 + ui/StatusQ/src/statusq.qrc | 1 + ui/StatusQ/src/theme.cpp | 4 + 5 files changed, 110 insertions(+) create mode 100644 ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml diff --git a/ui/StatusQ/include/StatusQ/theme.h b/ui/StatusQ/include/StatusQ/theme.h index 6df09be9665..2a40c7181d5 100644 --- a/ui/StatusQ/include/StatusQ/theme.h +++ b/ui/StatusQ/include/StatusQ/theme.h @@ -10,6 +10,7 @@ class Theme : public QQuickAttachedPropertyPropagator { Q_OBJECT + Q_PROPERTY(qreal defaultPadding READ defaultPadding CONSTANT) Q_PROPERTY(qreal padding READ padding WRITE setPadding RESET resetPadding NOTIFY paddingChanged) Q_PROPERTY(qreal xlPadding READ xlPadding NOTIFY paddingChanged) @@ -62,6 +63,7 @@ class Theme : public QQuickAttachedPropertyPropagator explicit Theme(QObject *parent = nullptr); // paddings + qreal defaultPadding() const; qreal padding() const; qreal xlPadding() const; qreal bigPadding() const; diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml new file mode 100644 index 00000000000..f4a35bcf024 --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml @@ -0,0 +1,102 @@ +pragma Singleton + +import QtQml +import QtQuick +import QtQuick.Window + +import StatusQ.Core.Theme + +QtObject { + enum Style { + Light, + Dark, + System + } + + enum FontSize { + FontSizeXS, + FontSizeS, + FontSizeM, + FontSizeL, + FontSizeXL, + FontSizeXXL + } + + enum PaddingFactor { + PaddingXXS, + PaddingXS, + PaddingS, + PaddingM, + PaddingL + } + + enum AnimationDuration { + Fast = 100, + Default = 250, // https://doc.qt.io/qt-5/qml-qtquick-propertyanimation.html#duration-prop + Slow = 400 + } + + readonly property size portraitBreakpoint: Qt.size(1200, 680) + readonly property real disabledOpacity: 0.3 + readonly property real pressedOpacity: 0.7 + + function setTheme(target: QtObject, theme: int) { + switch (theme) { + case ThemeUtils.Style.Light: + target.Theme.style = Theme.Style.Light + break + case ThemeUtils.Style.Dark: + target.Theme.style = Theme.Style.Dark + break + case ThemeUtils.Style.System: + target.Theme.style = Qt.binding(() => Application.styleHints.colorScheme === Qt.ColorScheme.Dark + ? Theme.Style.Dark : Theme.Style.Light) + break + default: + console.warn('Unknown theme. Valid themes are "light" and "dark"') + } + } + + function setFontSize(target: QtObject, fontSize: int) { + switch (fontSize) { + case ThemeUtils.FontSizeXS: + target.Theme.fontSizeOffset = -2 + break + case ThemeUtils.FontSizeS: + target.Theme.fontSizeOffset = -1 + break + case ThemeUtils.FontSizeM: + target.Theme.fontSizeOffset = 0 + break + case ThemeUtils.FontSizeL: + target.Theme.fontSizeOffset = 1 + break + case ThemeUtils.FontSizeXL: + target.Theme.fontSizeOffset = 2 + break + case ThemeUtils.FontSizeXXL: + target.Theme.fontSizeOffset = 3 + break + } + } + + function setPaddingFactor(target: QtObject, paddingFactor: int) { + switch (paddingFactor) { + case ThemeUtils.PaddingXXS: + target.Theme.padding = target.Theme.defaultPadding * 0.4 + break + case ThemeUtils.PaddingXS: + target.Theme.padding = target.Theme.defaultPadding * 0.6 + break + case ThemeUtils.PaddingS: + target.Theme.padding = target.Theme.defaultPadding * 0.8 + break + case ThemeUtils.PaddingM: + target.Theme.padding = target.Theme.defaultPadding + break + case ThemeUtils.PaddingL: + target.Theme.padding = target.Theme.defaultPadding * 1.2 + break + } + } +} diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/qmldir b/ui/StatusQ/src/StatusQ/Core/Theme/qmldir index 03e3013434a..418e6c5f3f4 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/qmldir +++ b/ui/StatusQ/src/StatusQ/Core/Theme/qmldir @@ -7,3 +7,4 @@ singleton Assets 0.1 Assets.qml singleton Fonts 0.1 Fonts.qml singleton StatusColors 0.1 StatusColors.qml singleton Theme 0.1 Theme.qml +singleton ThemeUtils 0.1 ThemeUtils.qml diff --git a/ui/StatusQ/src/statusq.qrc b/ui/StatusQ/src/statusq.qrc index 4eef05d142c..364d68563bb 100644 --- a/ui/StatusQ/src/statusq.qrc +++ b/ui/StatusQ/src/statusq.qrc @@ -192,6 +192,7 @@ StatusQ/Core/Theme/StatusDarkTheme.qml StatusQ/Core/Theme/StatusLightTheme.qml StatusQ/Core/Theme/Theme.qml + StatusQ/Core/Theme/ThemeUtils.qml StatusQ/Core/Theme/ThemePalette.qml StatusQ/Core/Theme/qmldir StatusQ/Core/Utils/AmountsArithmetic.qml diff --git a/ui/StatusQ/src/theme.cpp b/ui/StatusQ/src/theme.cpp index 93772818ec8..a7a382c65c0 100644 --- a/ui/StatusQ/src/theme.cpp +++ b/ui/StatusQ/src/theme.cpp @@ -29,6 +29,10 @@ Theme::Theme(QObject *parent) initialize(); } +qreal Theme::defaultPadding() const { + return s_defaultPadding; +} + qreal Theme::padding() const { return m_padding; } From f92bec826f53b5a884a1504d834aa3999b6e4770 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Tue, 25 Nov 2025 02:24:15 +0100 Subject: [PATCH 07/32] Theme: old components removed --- .../src/StatusQ/Core/Theme/StatusColors.qml | 90 ------ .../StatusQ/Core/Theme/StatusDarkTheme.qml | 198 ------------ .../StatusQ/Core/Theme/StatusLightTheme.qml | 198 ------------ ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml | 297 ------------------ .../src/StatusQ/Core/Theme/ThemePalette.qml | 261 --------------- ui/StatusQ/src/StatusQ/Core/Theme/qmldir | 7 - ui/StatusQ/src/statusq.qrc | 5 - 7 files changed, 1056 deletions(-) delete mode 100644 ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml delete mode 100644 ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml delete mode 100644 ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml delete mode 100644 ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml delete mode 100644 ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml deleted file mode 100644 index 4e8c35092d9..00000000000 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml +++ /dev/null @@ -1,90 +0,0 @@ -pragma Singleton - -import QtQml - -QtObject { - - readonly property var colors: { - 'black': '#000000', - 'white': '#FFFFFF', - - 'blue': '#4360DF', - 'blue2': '#2946C4', - 'blue3': '#88B0FF', - 'blue4': '#869EFF', - 'blue5': '#AAC6FF', - 'blue6': '#ECEFFC', - 'blue7': '#09101C', - 'blue8': '#6B6F76', - - 'brown': '#8B3131', - 'brown2': '#9B832F', - 'brown3': '#AD4343', - - 'cyan': '#51D0F0', - - 'graphite': '#212121', - 'graphite2': '#252525', - 'graphite3': '#2C2C2C', - 'graphite4': '#373737', - 'graphite5': '#909090', - - 'green': '#4EBC60', - 'green2': '#7CDA00', - 'green3': '#60C370', - 'green4': '#93DB33', - 'green5': '#9EA85D', - 'green6': '#AFB551', - - 'grey': '#F0F2F5', - 'grey2': '#F6F8FA', - 'grey3': '#E9EDF1', - 'grey4': '#EEF2F5', - 'grey5': '#939BA1', - - 'moss': '#26A69A', - 'moss2': '#10A88E', - - 'orange': '#FE8F59', - 'orange2': '#FF9F0F', - 'orange3': '#FFA67B', - 'orange4': '#FE8F59', - - 'warning_orange': '#F6793C', - - 'purple': '#887AF9', - - 'red': '#FF2D55', - 'red2': '#FA6565', - 'red3': '#FF5C7B', - - 'turquoise': '#0DA4C9', - 'turquoise2': '#07BCE9', - 'turquoise3': '#7BE5FF', - 'turquoise4': '#0DA4C9', - - 'violet': '#D37EF4', - - 'yellow': '#FFCA0F', - 'yellow2': '#EAD27B', - - 'blueHijab': '#CDF2FB', - - 'lightPattensBlue': '#D7DEE4', - - 'blackHovered': '#1D232E', - 'blueHovered': '#364DB2', - 'purpleHovered': '#6D62C7', - 'cyanHovered': '#41A6C0', - 'violetHovered': '#A965C3', - 'redHovered': '#C85151', - 'yellowHovered': '#CCA20C', - 'greenHovered': '#63AE00', - 'mossHovered': '#1E857B', - 'brownHovered': '#6F2727', - 'brown2Hovered': '#7C6926', - - 'lightDesktopBlue10': '#ECEFFB', - 'darkDesktopBlue10': '#273251' - } -} diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml deleted file mode 100644 index 41b7cec62c8..00000000000 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml +++ /dev/null @@ -1,198 +0,0 @@ -import QtQuick - -ThemePalette { - id: root - - name: "dark" - - baseColor1: getColor('graphite5') - baseColor2: getColor('graphite4') - baseColor3: getColor('graphite3') - baseColor4: getColor('graphite2') - baseColor5: getColor('graphite') - - primaryColor1: getColor('blue3') - primaryColor2: getColor('blue4', 0.3) - primaryColor3: getColor('blue4', 0.2) - - dangerColor1: getColor('red3') - dangerColor2: getColor('red3', 0.3) - dangerColor3: getColor('red3', 0.2) - - warningColor1: getColor('warning_orange') - warningColor2: getColor('warning_orange', 0.2) - warningColor3: getColor('warning_orange', 0.1) - - successColor1: getColor('green3') - successColor2: getColor('green3', 0.2) - successColor3: getColor('green3', 0.3) - - mentionColor1: getColor('turquoise3') - mentionColor2: getColor('turquoise4', 0.3) - mentionColor3: getColor('turquoise4', 0.2) - mentionColor4: getColor('turquoise4', 0.1) - - pinColor1: getColor('orange3') - pinColor2: getColor('orange4', 0.2) - pinColor3: getColor('orange4', 0.1) - - directColor1: getColor('white') - directColor2: getColor('white', 0.9) - directColor3: getColor('white', 0.8) - directColor4: getColor('white', 0.7) - directColor5: getColor('white', 0.4) - directColor6: getColor('white', 0.2) - directColor7: getColor('white', 0.1) - directColor8: getColor('white', 0.05) - directColor9: getColor('white', 0.2) - - indirectColor1: getColor('black') - indirectColor2: getColor('black', 0.7) - indirectColor3: getColor('black', 0.4) - indirectColor4: getColor('graphite3') - - miscColor1: getColor('blue5') - miscColor2: getColor('purple') - miscColor3: getColor('cyan') - miscColor4: getColor('violet') - miscColor5: getColor('red2') - miscColor6: getColor('orange') - miscColor7: getColor('yellow') - miscColor8: getColor('green4') - miscColor9: getColor('moss2') - miscColor10: getColor('brown3') - miscColor11: getColor('yellow2') - miscColor12: getColor('green6') - - neutral95: "#060F1F" - - dropShadow: getColor('black', 0.08) - dropShadow2: getColor('blue8', 0.02) - dropShadow3: getColor('blue8', 0.05) // suitable for MultiEffect - - statusFloatingButtonHighlight: getColor('blue4', 0.3) - - statusLoadingHighlight: getColor('white', 0.03) - statusLoadingHighlight2: getColor('white', 0.07) - - messageHighlightColor: getColor('blue4', 0.2) - - desktopBlue10: getColor('darkDesktopBlue10') - - userCustomizationColors: [ - "#AAC6FF", - "#887AF9", - "#51D0F0", - "#D37EF4", - "#FA6565", - "#FFCA0F", - "#93DB33", - "#10A88E", - "#AD4343", - "#EAD27B", - "silver", // update me when figma is ready - "darkgrey", // update me when figma is ready - ] - - blockProgressBarColor: directColor7 - - // Style compat - background: baseColor3 - separator: directColor7 - darkGrey: baseColor2 - secondaryMenuBackground: getColor("graphite2") - - statusAppLayout: QtObject { - property color backgroundColor: baseColor3 - property color rightPanelBackgroundColor: baseColor3 - } - - statusAppNavBar: QtObject { - property color backgroundColor: baseColor5 - } - - statusToastMessage: QtObject { - property color backgroundColor: baseColor3 - } - - statusListItem: QtObject { - property color backgroundColor: baseColor3 - property color secondaryHoverBackgroundColor: primaryColor3 - property color highlightColor: getColor('blue3', 0.05) - } - - statusChatListItem: QtObject { - property color hoverBackgroundColor: directColor8 - property color selectedBackgroundColor: directColor7 - } - - statusChatListCategoryItem: QtObject { - property color buttonHoverBackgroundColor: directColor7 - } - - statusNavigationListItem: QtObject { - property color hoverBackgroundColor: directColor8 - property color selectedBackgroundColor: directColor7 - } - - statusBadge: QtObject { - property color foregroundColor: baseColor3 - property color borderColor: baseColor5 - property color hoverBorderColor: "#353A4D" - } - - statusChatInfoButton: QtObject { - property color backgroundColor: baseColor3 - } - - statusMenu: QtObject { - property color backgroundColor: baseColor3 - property color hoverBackgroundColor: directColor7 - property color separatorColor: root.separator - } - - statusModal: QtObject { - property color backgroundColor: baseColor3 - } - - statusRoundedImage: QtObject { - property color backgroundColor: baseColor3 - } - - statusChatInput: QtObject { - property color secondaryBackgroundColor: "#414141" - } - - statusSelect: QtObject { - property color menuItemBackgroundColor: baseColor3 - property color menuItemHoverBackgroundColor: directColor7 - } - - statusMessage: QtObject { - property color emojiReactionBackground: baseColor2 - property color emojiReactionBackgroundHovered: primaryColor3 - property color emojiReactionBorderHovered: primaryColor2 - } - - customisationColors: QtObject { - property color blue: "#223BC4" - property color purple: "#5A33CA" - property color orange: "#CC6438" - property color army: "#1A4E52" - property color turquoise: "#22617C" - property color sky: "#1475AC" - property color yellow: "#C58D30" - property color pink: "#C55972" - property color copper:"#A24E45" - property color camel: "#9F7252" - property color magenta: "#BD1E56" - property color yinYang: "#FFFFFF" - } - - privacyColors: QtObject { - property color primary: "#341D65" - property color secondary: "#5B438E" - property color tertiary: white - property color tertiaryOpaque: getColor(white, 0.3) - } -} diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml deleted file mode 100644 index c3423a9e23f..00000000000 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml +++ /dev/null @@ -1,198 +0,0 @@ -import QtQuick - -ThemePalette { - id: root - - name: "light" - - baseColor1: getColor('grey5') - baseColor2: getColor('grey4') - baseColor3: getColor('grey3') - baseColor4: getColor('grey2') - baseColor5: getColor('grey') - - primaryColor1: getColor('blue') - primaryColor2: getColor('blue', 0.2) - primaryColor3: getColor('blue', 0.1) - - dangerColor1: getColor('red') - dangerColor2: getColor('red', 0.2) - dangerColor3: getColor('red', 0.1) - - warningColor1: getColor('warning_orange') - warningColor2: getColor('warning_orange', 0.2) - warningColor3: getColor('warning_orange', 0.1) - - successColor1: getColor('green') - successColor2: getColor('green', 0.1) - successColor3: getColor('green', 0.2) - - mentionColor1: getColor('turquoise') - mentionColor2: getColor('turquoise2', 0.3) - mentionColor3: getColor('turquoise2', 0.2) - mentionColor4: getColor('turquoise2', 0.1) - - pinColor1: getColor('orange') - pinColor2: getColor('orange2', 0.2) - pinColor3: getColor('orange2', 0.1) - - directColor1: getColor('black') - directColor2: getColor('black', 0.9) - directColor3: getColor('black', 0.8) - directColor4: getColor('black', 0.7) - directColor5: getColor('black', 0.4) - directColor6: getColor('black', 0.3) - directColor7: getColor('black', 0.1) - directColor8: getColor('black', 0.05) - directColor9: getColor('black', 0.2) - - indirectColor1: getColor('white') - indirectColor2: getColor('white', 0.7) - indirectColor3: getColor('white', 0.4) - indirectColor4: getColor('white') - - miscColor1: getColor('blue2') - miscColor2: getColor('purple') - miscColor3: getColor('cyan') - miscColor4: getColor('violet') - miscColor5: getColor('red2') - miscColor6: getColor('orange') - miscColor7: getColor('yellow') - miscColor8: getColor('green2') - miscColor9: getColor('moss') - miscColor10: getColor('brown') - miscColor11: getColor('brown2') - miscColor12: getColor('green5') - - neutral95: "#0D1625" - - dropShadow: Qt.rgba(0, 34/255, 51/255, 0.03) - dropShadow2: getColor('blue7', 0.02) - dropShadow3: getColor('black', 0.15) // suitable for MultiEffect - - statusFloatingButtonHighlight: getColor('blueHijab') - - statusLoadingHighlight: getColor('lightPattensBlue', 0.5) - statusLoadingHighlight2: indirectColor3 - - messageHighlightColor: getColor('blue', 0.2) - - desktopBlue10: getColor('lightDesktopBlue10') - - userCustomizationColors: [ - "#2946C4", - "#887AF9", - "#51D0F0", - "#D37EF4", - "#FA6565", - "#FFCA0F", - "#7CDA00", - "#26A69A", - "#8B3131", - "#9B832F", - "silver", // update me when figma is ready - "darkgrey", // update me when figma is ready - ] - - blockProgressBarColor: baseColor3 - - // Style compat - background: white - separator: baseColor2 - darkGrey: baseColor1 - secondaryMenuBackground: baseColor4 - - statusAppLayout: QtObject { - property color backgroundColor: white - property color rightPanelBackgroundColor: white - } - - statusAppNavBar: QtObject { - property color backgroundColor: baseColor2 - } - - statusToastMessage: QtObject { - property color backgroundColor: white - } - - statusListItem: QtObject { - property color backgroundColor: white - property color secondaryHoverBackgroundColor: getColor('blue6') - property color highlightColor: getColor('blue', 0.05) - } - - statusChatListItem: QtObject { - property color hoverBackgroundColor: baseColor2 - property color selectedBackgroundColor: baseColor3 - } - - statusChatListCategoryItem: QtObject { - property color buttonHoverBackgroundColor: directColor8 - } - - statusNavigationListItem: QtObject { - property color hoverBackgroundColor: baseColor2 - property color selectedBackgroundColor: baseColor3 - } - - statusBadge: QtObject { - property color foregroundColor: white - property color borderColor: baseColor4 - property color hoverBorderColor: "#DDE3F3" - } - - statusChatInfoButton: QtObject { - property color backgroundColor: white - } - - statusMenu: QtObject { - property color backgroundColor: white - property color hoverBackgroundColor: baseColor2 - property color separatorColor: root.separator - } - - statusModal: QtObject { - property color backgroundColor: white - } - - statusRoundedImage: QtObject { - property color backgroundColor: white - } - - statusChatInput: QtObject { - property color secondaryBackgroundColor: "#E2E6E8" - } - - statusSelect: QtObject { - property color menuItemBackgroundColor: white - property color menuItemHoverBackgroundColor: baseColor2 - } - - statusMessage: QtObject { - property color emojiReactionBackground: baseColor2 - property color emojiReactionBackgroundHovered: primaryColor2 - property color emojiReactionBorderHovered: primaryColor3 - } - - customisationColors: QtObject { - property color blue: "#2A4AF5" - property color purple: "#7140FD" - property color orange: "#FF7D46" - property color army: "#216266" - property color turquoise: "#2A799B" - property color sky: "#1992D7" - property color yellow: "#F6AF3C" - property color pink: "#F66F8F" - property color copper:"#CB6256" - property color camel: "#C78F67" - property color magenta: "#EC266C" - property color yinYang: "#09101C" - } - - privacyColors: QtObject { - property color primary: "#BEBBF9" - property color secondary: "#D6D7F7" - property color tertiary: "#201C76" - property color tertiaryOpaque: getColor("#201C76", 0.3) - } -} diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml deleted file mode 100644 index eb6028c66a3..00000000000 --- a/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml +++ /dev/null @@ -1,297 +0,0 @@ -pragma Singleton - -import QtQuick - -import StatusQ.Core.Utils as SQUtils - -SQUtils.QObject { - enum FontSize { - FontSizeXS, - FontSizeS, - FontSizeM, - FontSizeL, - FontSizeXL, - FontSizeXXL - } - - enum Style { - Light, - Dark, - System - } - - enum PaddingFactor { - PaddingXXS, - PaddingXS, - PaddingS, - PaddingM, - PaddingL - } - - property ThemePalette palette: Application.styleHints.colorScheme === Qt.ColorScheme.Dark ? statusQDarkTheme : statusQLightTheme - - readonly property ThemePalette statusQLightTheme: StatusLightTheme {} - readonly property ThemePalette statusQDarkTheme: StatusDarkTheme {} - - readonly property bool isDarkTheme: palette === statusQDarkTheme - - readonly property string assetPath: Qt.resolvedUrl("../../../assets/") - - function changeTheme(theme:int) { - switch (theme) { - case Theme.Style.Light: - Theme.palette = statusQLightTheme - break - case Theme.Style.Dark: - Theme.palette = statusQDarkTheme - break - case Theme.Style.System: - Theme.palette = Application.styleHints.colorScheme === Qt.ColorScheme.Dark ? statusQDarkTheme : statusQLightTheme - break - default: - console.warn('Unknown theme. Valid themes are "light" and "dark"') - } - } - - function changeFontSize(fontSize:int) { - updateFontSize(fontSize) - } - - function changePaddingFactor(paddingFactor:int) { - updatePaddingFactor(paddingFactor) - } - - readonly property var baseFont: FontLoader { - source: assetPath + "fonts/Inter/Inter-Regular.otf" - } - - readonly property var monoFont: FontLoader { - source: assetPath + "fonts/InterStatus/InterStatus-Regular.otf" - } - - readonly property var codeFont: FontLoader { - source: assetPath + "fonts/RobotoMono/RobotoMono-Regular.ttf" - } - - readonly property var _d: QtObject { - // specific font variants should not be accessed directly - - // Inter font variants - property var baseFontThin: FontLoader { - source: assetPath + "fonts/Inter/Inter-Thin.otf" - } - - property var baseFontExtraLight: FontLoader { - source: assetPath + "fonts/Inter/Inter-ExtraLight.otf" - } - - property var baseFontLight: FontLoader { - source: assetPath + "fonts/Inter/Inter-Light.otf" - } - - property var baseFontMedium: FontLoader { - source: assetPath + "fonts/Inter/Inter-Medium.otf" - } - - property var baseFontBold: FontLoader { - source: assetPath + "fonts/Inter/Inter-Bold.otf" - } - - property var baseFontExtraBold: FontLoader { - source: assetPath + "fonts/Inter/Inter-ExtraBold.otf" - } - - property var baseFontBlack: FontLoader { - source: assetPath + "fonts/Inter/Inter-Black.otf" - } - - // Inter Status font variants - property var monoFontThin: FontLoader { - source: assetPath + "fonts/InterStatus/InterStatus-Thin.otf" - } - - property var monoFontExtraLight: FontLoader { - source: assetPath + "fonts/InterStatus/InterStatus-ExtraLight.otf" - } - - property var monoFontLight: FontLoader { - source: assetPath + "fonts/InterStatus/InterStatus-Light.otf" - } - - property var monoFontMedium: FontLoader { - source: assetPath + "fonts/InterStatus/InterStatus-Medium.otf" - } - - property var monoFontBold: FontLoader { - source: assetPath + "fonts/InterStatus/InterStatus-Bold.otf" - } - - property var monoFontExtraBold: FontLoader { - source: assetPath + "fonts/InterStatus/InterStatus-ExtraBold.otf" - } - - property var monoFontBlack: FontLoader { - source: assetPath + "fonts/InterStatus/InterStatus-Black.otf" - } - - // Roboto font variants - property var codeFontThin: FontLoader { - source: assetPath + "fonts/RobotoMono/RobotoMono-Thin.ttf" - } - - property var codeFontExtraLight: FontLoader { - source: assetPath + "fonts/RobotoMono/RobotoMono-ExtraLight.ttf" - } - - property var codeFontLight: FontLoader { - source: assetPath + "fonts/RobotoMono/RobotoMono-Light.ttf" - } - - property var codeFontMedium: FontLoader { - source: assetPath + "fonts/RobotoMono/RobotoMono-Medium.ttf" - } - - property var codeFontBold: FontLoader { - source: assetPath + "fonts/RobotoMono/RobotoMono-Bold.ttf" - } - } - - readonly property int secondaryAdditionalTextSize: fontSize17 - readonly property int primaryTextFontSize: fontSize15 - readonly property int secondaryTextFontSize: fontSize14 - readonly property int additionalTextSize: fontSize13 - readonly property int tertiaryTextFontSize: fontSize12 - readonly property int asideTextFontSize: fontSize10 - - readonly property int fontSize9: 9 + dynamicFontUnits - readonly property int fontSize10: 10 + dynamicFontUnits - readonly property int fontSize11: 11 + dynamicFontUnits - readonly property int fontSize12: 12 + dynamicFontUnits - readonly property int fontSize13: 13 + dynamicFontUnits - readonly property int fontSize14: 14 + dynamicFontUnits - readonly property int fontSize15: 15 + dynamicFontUnits - readonly property int fontSize16: 16 + dynamicFontUnits - readonly property int fontSize17: 17 + dynamicFontUnits - readonly property int fontSize18: 18 + dynamicFontUnits - readonly property int fontSize19: 19 + dynamicFontUnits - readonly property int fontSize20: 20 + dynamicFontUnits - readonly property int fontSize21: 21 + dynamicFontUnits - readonly property int fontSize22: 22 + dynamicFontUnits - readonly property int fontSize23: 23 + dynamicFontUnits - readonly property int fontSize24: 24 + dynamicFontUnits - readonly property int fontSize25: 25 + dynamicFontUnits - readonly property int fontSize26: 26 + dynamicFontUnits - readonly property int fontSize27: 27 + dynamicFontUnits - readonly property int fontSize28: 28 + dynamicFontUnits - readonly property int fontSize29: 29 + dynamicFontUnits - readonly property int fontSize30: 30 + dynamicFontUnits - readonly property int fontSize34: 34 + dynamicFontUnits - readonly property int fontSize38: 38 + dynamicFontUnits - readonly property int fontSize40: 40 + dynamicFontUnits - - - // Responsive properties used for responsive components (e.g. containers) - property int xlPadding: defaultXlPadding * dynamicPaddingFactorUnit - property int bigPadding: defaultBigPadding * dynamicPaddingFactorUnit - property int padding: defaultPadding * dynamicPaddingFactorUnit - property int halfPadding: defaultHalfPadding * dynamicPaddingFactorUnit - property int smallPadding: defaultSmallPadding * dynamicPaddingFactorUnit - property int radius: defaultRadius - - // Constant properties used for non-responsive components (e.g. buttons) - readonly property int defaultXlPadding: defaultPadding * 2 - readonly property int defaultBigPadding: defaultPadding * 1.5 - readonly property int defaultPadding: 16 - readonly property int defaultHalfPadding: defaultPadding / 2 - readonly property int defaultSmallPadding: defaultPadding * 0.625 - readonly property int defaultRadius: defaultHalfPadding - - readonly property var portraitBreakpoint: Qt.size(1200, 680) - - readonly property real disabledOpacity: 0.3 - readonly property real pressedOpacity: 0.7 - - property int dynamicFontUnits: 0 - property real dynamicPaddingFactorUnit: 1.0 - - readonly property int currentFontSize: d.fontSize - readonly property real currentPaddingFactor: d.paddingFactor - - function updateFontSize(fontSize:int) { - d.fontSize = fontSize - switch (fontSize) { - case Theme.FontSizeXS: - dynamicFontUnits = -2 - break; - - case Theme.FontSizeS: - dynamicFontUnits = -1 - break; - - case Theme.FontSizeM: - dynamicFontUnits = 0 - break; - - case Theme.FontSizeL: - dynamicFontUnits = 1 - break; - - case Theme.FontSizeXL: - dynamicFontUnits = 2 - break; - - case Theme.FontSizeXXL: - dynamicFontUnits = 3 - break; - } - } - - function updatePaddingFactor(paddingFactor:int) { - d.paddingFactor = paddingFactor - switch (paddingFactor) { - case Theme.PaddingXXS: - dynamicPaddingFactorUnit = 0.4 - break; - case Theme.PaddingXS: - dynamicPaddingFactorUnit = 0.6 - break; - - case Theme.PaddingS: - dynamicPaddingFactorUnit = 0.8 - break; - - case Theme.PaddingM: - dynamicPaddingFactorUnit = 1 - break; - - case Theme.PaddingL: - dynamicPaddingFactorUnit = 1.2 - break; - } - } - - enum AnimationDuration { - Fast = 100, - Default = 250, // https://doc.qt.io/qt-5/qml-qtquick-propertyanimation.html#duration-prop - Slow = 400 - } - - // Style compat - function png(name) { - return assetPath + "png/" + name + ".png" - } - function svg(name) { - return assetPath + "img/icons/" + name + ".svg" - } - function emoji(name) { - return assetPath + "twemoji/svg/" + name + ".svg" - } - - - QtObject { - id: d - - property int fontSize: Theme.FontSizeM - property int paddingFactor: Theme.PaddingM - } -} diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml deleted file mode 100644 index bb0da8407a9..00000000000 --- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml +++ /dev/null @@ -1,261 +0,0 @@ -import QtQuick - -QtObject { - id: theme - - property string name - - property color black: Qt.rgba(0, 0, 0) - property color white: Qt.rgba(1, 1, 1) - property color transparent: "#00000000" - - property color green: getColor('green') - - property color blue: getColor('blue') - property color darkBlue: getColor('blue2') - - property color dropShadow - property color dropShadow2 - property color dropShadow3 // suitable for MultiEffect - property color backdropColor: getColor('black', 0.4) - - property color baseColor1 - property color baseColor2 - property color baseColor3 - property color baseColor4 - property color baseColor5 - - property color primaryColor1 - property color primaryColor2 - property color primaryColor3 - - property color dangerColor1 - property color dangerColor2 - property color dangerColor3 - - property color warningColor1 - property color warningColor2 - property color warningColor3 - - property color successColor1 - property color successColor2 - property color successColor3 - - property color mentionColor1 - property color mentionColor2 - property color mentionColor3 - property color mentionColor4 - - property color pinColor1 - property color pinColor2 - property color pinColor3 - - property color directColor1 - property color directColor2 - property color directColor3 - property color directColor4 - property color directColor5 - property color directColor6 - property color directColor7 - property color directColor8 - property color directColor9 - - property color indirectColor1 - property color indirectColor2 - property color indirectColor3 - property color indirectColor4 - - property color miscColor1 - property color miscColor2 - property color miscColor3 - property color miscColor4 - property color miscColor5 - property color miscColor6 - property color miscColor7 - property color miscColor8 - property color miscColor9 - property color miscColor10 - property color miscColor11 - property color miscColor12 - - property color neutral95 - - property color statusFloatingButtonHighlight - - property color statusLoadingHighlight - property color statusLoadingHighlight2 - - property color messageHighlightColor - - property color desktopBlue10 - - property var userCustomizationColors: [] - - property color blockProgressBarColor - - // Style compat - property color background - property color backgroundHover: baseColor2 - property color border: baseColor2 - property color textColor: directColor1 - property color secondaryText: baseColor1 - property color separator - property color darkGrey - property color secondaryBackground: primaryColor2 - property color secondaryMenuBackground - - property QtObject statusAppLayout: QtObject { - property color backgroundColor - property color rightPanelBackgroundColor - } - - property QtObject statusAppNavBar: QtObject { - property color backgroundColor - } - - property QtObject statusToastMessage: QtObject { - property color backgroundColor - } - - property QtObject statusListItem: QtObject { - property color backgroundColor - property color secondaryHoverBackgroundColor - property color highlightColor - } - - property QtObject statusChatListItem: QtObject { - property color hoverBackgroundColor - property color selectedBackgroundColor - } - - property QtObject statusChatListCategoryItem: QtObject { - property color buttonHoverBackgroundColor - } - - property QtObject statusNavigationListItem: QtObject { - property color hoverBackgroundColor - property color selectedBackgroundColor - } - - property QtObject statusBadge: QtObject { - property color foregroundColor - property color borderColor - property color hoverBorderColor - } - - property QtObject statusChatInfoButton: QtObject { - property color backgroundColor - property color hoverBackgroundColor - } - - property QtObject statusMenu: QtObject { - property color backgroundColor - property color hoverBackgroundColor - property color separatorColor - } - - property QtObject statusModal: QtObject { - property color backgroundColor - } - - property QtObject statusRoundedImage: QtObject { - property color backgroundColor - } - - property QtObject statusChatInput: QtObject { - property color secondaryBackgroundColor - } - - readonly property QtObject statusSwitchTab: QtObject { - property color buttonBackgroundColor: primaryColor1 - property color barBackgroundColor: primaryColor3 - property color selectedTextColor: indirectColor1 - property color textColor: primaryColor1 - } - - property QtObject statusSelect: QtObject { - property color menuItemBackgroundColor - property color menuItemHoverBackgroundColor - } - - property QtObject statusMessage: QtObject { - property color emojiReactionBackground - property color emojiReactionBorderHovered - property color emojiReactionBackgroundHovered - } - - property QtObject customisationColors: QtObject { - property color blue - property color purple - property color orange - property color army - property color turquoise - property color sky - property color yellow - property color pink - property color copper - property color camel - property color magenta - property color yinYang - } - - readonly property var customisationColorsArray: [ - customisationColors.blue, - customisationColors.purple, - customisationColors.orange, - customisationColors.army, - customisationColors.turquoise, - customisationColors.sky, - customisationColors.yellow, - customisationColors.pink, - customisationColors.copper, - customisationColors.camel, - customisationColors.magenta, - customisationColors.yinYang - ] - - readonly property var communityColorsArray: [ - customisationColors.blue, - customisationColors.yellow, - customisationColors.magenta, - customisationColors.purple, - customisationColors.army, - customisationColors.sky, - customisationColors.orange, - customisationColors.camel - ] - - property QtObject privacyModeColors: QtObject { - readonly property color navBarColor: customisationColors.purple - readonly property color navButtonColor: getColor('white', 0.4) - readonly property color navButtonHighlightedColor: getColor('white') - } - - property QtObject privacyColors: QtObject { - property color primary - property color secondary - property color tertiary - property color tertiaryOpaque - } - - function alphaColor(color, alpha) { - let actualColor = Qt.darker(color, 1) - actualColor.a = alpha - return actualColor - } - - function hoverColor(normalColor) { - return theme.name === "light" ? Qt.darker(normalColor, 1.2) : Qt.lighter(normalColor, 1.2) - } - - function getColor(name, alpha) { - if(StatusColors.colors[name]) - // It means name is just the key to find inside the specific `StatusColors` object - return !!alpha ? alphaColor(StatusColors.colors[name], alpha) - : StatusColors.colors[name] - else - // It means name is directly the color itself - return !!alpha ? alphaColor(name, alpha) - : name - } -} diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/qmldir b/ui/StatusQ/src/StatusQ/Core/Theme/qmldir index 418e6c5f3f4..1f4b9b7cde5 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/qmldir +++ b/ui/StatusQ/src/StatusQ/Core/Theme/qmldir @@ -1,10 +1,3 @@ -module StatusQ.Core.Theme - -StatusDarkTheme 0.1 StatusDarkTheme.qml -StatusLightTheme 0.1 StatusLightTheme.qml -ThemePalette 0.1 ThemePalette.qml singleton Assets 0.1 Assets.qml singleton Fonts 0.1 Fonts.qml -singleton StatusColors 0.1 StatusColors.qml -singleton Theme 0.1 Theme.qml singleton ThemeUtils 0.1 ThemeUtils.qml diff --git a/ui/StatusQ/src/statusq.qrc b/ui/StatusQ/src/statusq.qrc index 364d68563bb..dcc251e40ae 100644 --- a/ui/StatusQ/src/statusq.qrc +++ b/ui/StatusQ/src/statusq.qrc @@ -188,12 +188,7 @@ StatusQ/Core/StatusTooltipSettings.qml StatusQ/Core/Theme/Assets.qml StatusQ/Core/Theme/Fonts.qml - StatusQ/Core/Theme/StatusColors.qml - StatusQ/Core/Theme/StatusDarkTheme.qml - StatusQ/Core/Theme/StatusLightTheme.qml - StatusQ/Core/Theme/Theme.qml StatusQ/Core/Theme/ThemeUtils.qml - StatusQ/Core/Theme/ThemePalette.qml StatusQ/Core/Theme/qmldir StatusQ/Core/Utils/AmountsArithmetic.qml StatusQ/Core/Utils/ClippingWrapper.qml From a60334e0746e1f698045a988f15723bdff749dc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Fri, 21 Nov 2025 19:11:00 +0100 Subject: [PATCH 08/32] Theme: convert Theme.fontSizeXX access --- monitoring/MonitorEntryPoint.qml | 2 +- storybook/pages/BiometricsPopup.qml | 2 +- storybook/pages/ConcatModelPage.qml | 2 +- storybook/pages/CurrencyAmountToLocaleStringPage.qml | 2 +- storybook/pages/DerivationPathInputPage.qml | 4 ++-- storybook/pages/FunctionAggregatorPage.qml | 4 ++-- storybook/pages/ImagesGridViewPage.qml | 2 +- storybook/pages/JoinCommunityViewPage.qml | 6 +++--- storybook/pages/ModelEntryPage.qml | 6 +++--- storybook/pages/MovableModelWithSfpmPage.qml | 2 +- storybook/pages/ProfileShowcaseModelsPage.qml | 12 ++++++------ storybook/pages/StatusDialogPage.qml | 2 +- storybook/pages/StatusScrollViewPage.qml | 2 +- ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml | 2 +- .../src/StatusQ/Components/StatusCommunityCard.qml | 2 +- ui/StatusQ/src/StatusQ/Components/StatusListItem.qml | 2 +- .../src/StatusQ/Components/StatusMessageHeader.qml | 2 +- .../statusMessage/StatusMessageEmojiReactions.qml | 3 ++- .../statusMessage/StatusMessageImageAlbum.qml | 2 +- ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml | 2 +- ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml | 2 +- ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml | 4 ++-- .../ActivityCenter/ActivityCenterLayout.qml | 4 ++-- .../ActivityCenter/controls/NotificationCard.qml | 4 ++-- .../controls/NotificationContentBlock.qml | 2 +- .../controls/NotificationContextRow.qml | 8 ++++---- .../controls/NotificationHeaderRow.qml | 4 ++-- .../Chat/panels/SuggestedChannelsPanel.qml | 2 +- .../Communities/controls/SettingsPageHeader.qml | 2 +- .../Communities/panels/OverviewSettingsPanel.qml | 2 +- .../panels/PrivilegedTokenArtworkPanel.qml | 2 +- ui/app/AppLayouts/HomePage/HomePage.qml | 2 +- ui/app/AppLayouts/HomePage/HomePageSearchField.qml | 2 +- ui/app/AppLayouts/Market/MarketLayout.qml | 2 +- ui/app/AppLayouts/Node/NodeLayout.qml | 12 ++++++------ .../Onboarding/pages/BackupSeedphraseIntro.qml | 2 +- .../Onboarding/pages/BackupSeedphraseOutro.qml | 2 +- .../Onboarding/pages/BackupSeedphraseReveal.qml | 2 +- .../Onboarding/pages/BackupSeedphraseVerify.qml | 2 +- .../pages/ConvertKeycardAccountAcksPage.qml | 2 +- .../Onboarding/pages/ConvertKeycardAccountPage.qml | 2 +- .../Onboarding/pages/CreateKeycardProfilePage.qml | 2 +- .../Onboarding/pages/CreateProfilePage.qml | 2 +- .../Onboarding/pages/EnableBiometricsPage.qml | 2 +- .../Onboarding/pages/HelpUsImproveStatusPage.qml | 2 +- .../Onboarding/pages/ImportLocalBackupPage.qml | 2 +- .../Onboarding/pages/KeycardAddKeyPairPage.qml | 2 +- .../AppLayouts/Onboarding/pages/KeycardBasePage.qml | 2 +- .../Onboarding/pages/LoginBySyncingPage.qml | 2 +- ui/app/AppLayouts/Onboarding/pages/LoginScreen.qml | 2 +- .../Onboarding/pages/NewAccountLoginPage.qml | 2 +- .../AppLayouts/Onboarding/pages/SeedphrasePage.qml | 2 +- .../AppLayouts/Onboarding/pages/SyncProgressPage.qml | 2 +- ui/app/AppLayouts/Onboarding/pages/WelcomePage.qml | 2 +- ui/app/AppLayouts/Profile/views/AboutView.qml | 2 +- ui/app/AppLayouts/Profile/views/EnsAddedView.qml | 8 ++++---- ui/app/AppLayouts/Profile/views/EnsConnectedView.qml | 6 +++--- ui/app/AppLayouts/Profile/views/EnsDetailsView.qml | 2 +- ui/app/AppLayouts/Profile/views/EnsListView.qml | 8 ++++---- .../AppLayouts/Profile/views/EnsRegisteredView.qml | 6 +++--- ui/app/AppLayouts/Profile/views/EnsReleasedView.qml | 6 +++--- ui/app/AppLayouts/Profile/views/EnsSearchView.qml | 2 +- .../Profile/views/EnsTermsAndConditionsView.qml | 6 +++--- ui/app/AppLayouts/Profile/views/EnsWelcomeView.qml | 4 ++-- .../AppLayouts/Profile/views/wallet/AccountView.qml | 2 +- .../Wallet/controls/CollectibleDetailsHeader.qml | 4 ++-- .../AppLayouts/Wallet/panels/WalletAccountHeader.qml | 4 ++-- .../Wallet/panels/WalletFollowingAddressesHeader.qml | 2 +- .../Wallet/panels/WalletSavedAddressesHeader.qml | 2 +- .../Wallet/popups/SavedAddressActivityPopup.qml | 2 +- ui/app/AppLayouts/Wallet/views/LeftTabView.qml | 2 +- ui/app/mainui/SplashScreen.qml | 2 +- ui/imports/shared/controls/AssetsDetailsHeader.qml | 4 ++-- ui/imports/shared/controls/chat/EmojiReaction.qml | 4 ++-- ui/imports/shared/popups/DownloadPage.qml | 6 +++--- .../addaccount/states/ConfirmAddingNewMasterKey.qml | 2 +- .../addaccount/states/ConfirmSeedPhraseBackup.qml | 2 +- .../shared/popups/send/controls/HeaderTitleText.qml | 2 +- .../shared/popups/send/views/AmountToReceive.qml | 2 +- ui/imports/shared/popups/send/views/AmountToSend.qml | 2 +- .../popups/walletconnect/panels/MaxFeesDisplay.qml | 2 +- ui/imports/shared/views/PasswordConfirmationView.qml | 2 +- ui/imports/shared/views/ProfileDialogView.qml | 2 +- ui/imports/shared/views/SyncingDeviceView.qml | 4 ++-- .../shared/views/chat/ChannelIdentifierView.qml | 2 +- ui/imports/shared/views/chat/NewMessagesMarker.qml | 2 +- ui/imports/utils/Constants.qml | 12 ++++++------ 87 files changed, 138 insertions(+), 137 deletions(-) diff --git a/monitoring/MonitorEntryPoint.qml b/monitoring/MonitorEntryPoint.qml index 912be5ad578..d2a8d265493 100644 --- a/monitoring/MonitorEntryPoint.qml +++ b/monitoring/MonitorEntryPoint.qml @@ -303,7 +303,7 @@ Component { readonly property bool last: headerRepeater.count - 1 === index text: model.name + (last ? "" : " -> ") - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) font.bold: true selectByMouse: true diff --git a/storybook/pages/BiometricsPopup.qml b/storybook/pages/BiometricsPopup.qml index 73aa54e8e78..fabd7aee012 100644 --- a/storybook/pages/BiometricsPopup.qml +++ b/storybook/pages/BiometricsPopup.qml @@ -40,7 +40,7 @@ Dialog { Layout.fillWidth: true horizontalAlignment: Qt.AlignHCenter text: "Status Desktop" - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) } Label { Layout.fillWidth: true diff --git a/storybook/pages/ConcatModelPage.qml b/storybook/pages/ConcatModelPage.qml index 1ab24cd2293..b3f4a8d996c 100644 --- a/storybook/pages/ConcatModelPage.qml +++ b/storybook/pages/ConcatModelPage.qml @@ -205,7 +205,7 @@ Item { Label { height: implicitHeight * 2 text: section + " inset" - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) font.bold: true font.underline: true diff --git a/storybook/pages/CurrencyAmountToLocaleStringPage.qml b/storybook/pages/CurrencyAmountToLocaleStringPage.qml index ece81b2afb3..e30c5ed9442 100644 --- a/storybook/pages/CurrencyAmountToLocaleStringPage.qml +++ b/storybook/pages/CurrencyAmountToLocaleStringPage.qml @@ -55,7 +55,7 @@ SplitView { text: { return LocaleUtils.currencyAmountToLocaleString(d.currencyAmount, d.options) } - font.pixelSize: Theme.fontSize24 + font.pixelSize: Theme.fontSize(24) } } diff --git a/storybook/pages/DerivationPathInputPage.qml b/storybook/pages/DerivationPathInputPage.qml index 0168f1c5d49..d0346b86d26 100644 --- a/storybook/pages/DerivationPathInputPage.qml +++ b/storybook/pages/DerivationPathInputPage.qml @@ -138,7 +138,7 @@ SplitView { Layout.fillWidth: true - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.italic: true color: "red" } @@ -148,7 +148,7 @@ SplitView { Layout.fillWidth: true - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.italic: true color: "orange" } diff --git a/storybook/pages/FunctionAggregatorPage.qml b/storybook/pages/FunctionAggregatorPage.qml index 23d9bfcba70..21fa51fba4d 100644 --- a/storybook/pages/FunctionAggregatorPage.qml +++ b/storybook/pages/FunctionAggregatorPage.qml @@ -15,7 +15,7 @@ import Storybook Control { id: root - font.pixelSize: Theme.fontSize16 + font.pixelSize: Theme.fontSize(16) padding: 10 ListModel { @@ -131,7 +131,7 @@ Control { insetComponent: Button { height: 20 - font.pixelSize: Theme.fontSize11 + font.pixelSize: Theme.fontSize(11) text: "remove" onClicked: { diff --git a/storybook/pages/ImagesGridViewPage.qml b/storybook/pages/ImagesGridViewPage.qml index d1e84eb1a52..5cd02e7a554 100644 --- a/storybook/pages/ImagesGridViewPage.qml +++ b/storybook/pages/ImagesGridViewPage.qml @@ -28,7 +28,7 @@ Pane { Label { anchors.centerIn: parent text: "image " + index - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) } Image { diff --git a/storybook/pages/JoinCommunityViewPage.qml b/storybook/pages/JoinCommunityViewPage.qml index 2696a667c9b..e3d31c697ff 100644 --- a/storybook/pages/JoinCommunityViewPage.qml +++ b/storybook/pages/JoinCommunityViewPage.qml @@ -176,7 +176,7 @@ Nemo enim 😋 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, Layout.fillWidth: true text: "BLUR INFO EDITOR" font.bold: true - font.pixelSize: Theme.fontSize18 + font.pixelSize: Theme.fontSize(18) } CommunityInfoEditor { @@ -216,7 +216,7 @@ Nemo enim 😋 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, Layout.fillWidth: true text: "JOIN TYPES" font.bold: true - font.pixelSize: Theme.fontSize18 + font.pixelSize: Theme.fontSize(18) } ColumnLayout { @@ -257,7 +257,7 @@ Nemo enim 😋 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, Layout.fillWidth: true text: "JOIN HOLDINGS EDITOR" font.bold: true - font.pixelSize: Theme.fontSize18 + font.pixelSize: Theme.fontSize(18) } JoinCommunityPermissionsEditor { diff --git a/storybook/pages/ModelEntryPage.qml b/storybook/pages/ModelEntryPage.qml index bb21e548116..4471c7b818a 100644 --- a/storybook/pages/ModelEntryPage.qml +++ b/storybook/pages/ModelEntryPage.qml @@ -105,7 +105,7 @@ Control { insetComponent: RowLayout { Button { height: 20 - font.pixelSize: Theme.fontSize11 + font.pixelSize: Theme.fontSize(11) text: "remove" highlighted: model.index === itemData.row @@ -115,7 +115,7 @@ Control { } Button { height: 20 - font.pixelSize: Theme.fontSize11 + font.pixelSize: Theme.fontSize(11) text: "edit" highlighted: model.index === itemData.row @@ -135,7 +135,7 @@ Control { width: parent.width text: "Item Signals" font.bold: true - font.pixelSize: Theme.fontSize16 + font.pixelSize: Theme.fontSize(16) bottomPadding: 20 Button { anchors.right: parent.right diff --git a/storybook/pages/MovableModelWithSfpmPage.qml b/storybook/pages/MovableModelWithSfpmPage.qml index 0a04e45429f..6a21d8529bf 100644 --- a/storybook/pages/MovableModelWithSfpmPage.qml +++ b/storybook/pages/MovableModelWithSfpmPage.qml @@ -412,7 +412,7 @@ Item { Layout.alignment: Qt.AlignHCenter text: "SAVE ORDER" - font.pixelSize: Theme.fontSize30 + font.pixelSize: Theme.fontSize(30) onClicked: { const count = simpleSourceModel.count diff --git a/storybook/pages/ProfileShowcaseModelsPage.qml b/storybook/pages/ProfileShowcaseModelsPage.qml index 6a170d41687..419f8888064 100644 --- a/storybook/pages/ProfileShowcaseModelsPage.qml +++ b/storybook/pages/ProfileShowcaseModelsPage.qml @@ -160,7 +160,7 @@ ColumnLayout { Label { text: "Backend models" - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) padding: 10 } @@ -179,7 +179,7 @@ ColumnLayout { Label { text: "Display models" - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) padding: 10 } @@ -251,7 +251,7 @@ ColumnLayout { Label { text: "Backend models" - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) padding: 10 } GenericListView { @@ -268,7 +268,7 @@ ColumnLayout { Layout.fillWidth: true Label { text: "Display models" - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) padding: 10 } @@ -357,7 +357,7 @@ ColumnLayout { Label { text: "Backend models" - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) padding: 10 } @@ -377,7 +377,7 @@ ColumnLayout { Label { text: "Display models" - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) padding: 10 } diff --git a/storybook/pages/StatusDialogPage.qml b/storybook/pages/StatusDialogPage.qml index 53585a6a263..2783db58f63 100644 --- a/storybook/pages/StatusDialogPage.qml +++ b/storybook/pages/StatusDialogPage.qml @@ -46,7 +46,7 @@ SplitView { spacing: 16 StatusBaseText { Layout.fillWidth: true - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true text: "Custom header inside contentItem" } diff --git a/storybook/pages/StatusScrollViewPage.qml b/storybook/pages/StatusScrollViewPage.qml index 70186295127..0246a7c30b2 100644 --- a/storybook/pages/StatusScrollViewPage.qml +++ b/storybook/pages/StatusScrollViewPage.qml @@ -130,7 +130,7 @@ SplitView { id: textItem Layout.fillWidth: true text: "This header is fixed and not scrollable" - font.pixelSize: Theme.fontSize18 + font.pixelSize: Theme.fontSize(18) } Item { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml b/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml index 7815f04fce7..af8b8f15aa6 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml @@ -22,7 +22,7 @@ Rectangle { border.color: root.fgColor StatusBaseText { - font.pixelSize: Theme.fontSize11 + font.pixelSize: Theme.fontSize(11) font.weight: Font.Medium color: root.fgColor anchors.centerIn: parent diff --git a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml index 15bf7fd85b5..97f6069b0e5 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml @@ -56,7 +56,7 @@ Rectangle { \qmlproperty int StatusCommunityCard::titleFontSize This property holds the title's font size. */ - property int titleFontSize: Theme.fontSize19 + property int titleFontSize: Theme.fontSize(19) /*! \qmlproperty int StatusCommunityCard::descriptionFontSize This property holds the description's font size. diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml index a0bad755535..64578ae30b8 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml @@ -324,7 +324,7 @@ Rectangle { Layout.topMargin: -48 text: "." - font.pixelSize: Theme.fontSize40 + font.pixelSize: Theme.fontSize(40) customColor: Theme.palette.baseColor1 lineHeightMode: Text.FixedHeight lineHeight: 24 diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml b/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml index 2967b59c9be..ded5e77620c 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml @@ -221,7 +221,7 @@ Item { horizontalPadding: 5 size: StatusBaseButton.Tiny type: StatusBaseButton.Warning - font.pixelSize: Theme.fontSize9 + font.pixelSize: Theme.fontSize(9) text: qsTr("Resend") onClicked: root.resendClicked() } diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml index 3ad2d5fdc10..29e024bc892 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml +++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml @@ -86,12 +86,13 @@ Flow { objectName: "emojiReaction" Layout.preferredWidth: d.iconSize Layout.preferredHeight: d.iconSize + icon: Theme.emoji(model.emoji) } StatusBaseText { text: model.numberOfReactions - font.pixelSize: Theme.fontSize13 + font.pixelSize: Theme.fontSize(13) } } diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageImageAlbum.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageImageAlbum.qml index 55756d72ea7..39c22991a64 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageImageAlbum.qml +++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageImageAlbum.qml @@ -100,7 +100,7 @@ RowLayout { readonly property int reminingItems: d.totalAlbumItems - root.albumCount + 1 anchors.centerIn: parent color: Theme.palette.indirectColor1 - font.pixelSize: Theme.fontSize19 + font.pixelSize: Theme.fontSize(19) font.weight: Font.Medium text: reminingItems + "+" } diff --git a/ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml b/ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml index 61f157f1fcf..f9eeb749656 100644 --- a/ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml +++ b/ui/StatusQ/src/StatusQ/Core/StatusAssetSettings.qml @@ -18,7 +18,7 @@ QtObject { property bool isLetterIdenticon property bool useAcronymForLetterIdenticon: true property bool letterIdenticonBgWithAlpha: false - property int letterSize: emoji ? (Theme.fontSize11) : (charactersLen == 1 ? _oneLetterSize : _twoLettersSize) + property int letterSize: emoji ? (Theme.fontSize(11)) : (charactersLen == 1 ? _oneLetterSize : _twoLettersSize) property int charactersLen: 1 property string emoji diff --git a/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml b/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml index cf0489e912a..3660e4b6c76 100644 --- a/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml +++ b/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml @@ -15,7 +15,7 @@ import StatusQ.Core.Theme StatusBaseText { width: 240 text: qsTr("Hello World!") - font.pixelSize: Theme.fontSize24 + font.pixelSize: Theme.fontSize(24) color: Theme.palette.directColor1 } \endqml diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml b/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml index e1dbe0d07bb..96fcc9bb6d0 100644 --- a/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml +++ b/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml @@ -99,7 +99,7 @@ StatusModal { anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter focus: !Utils.isMobile - font.pixelSize: Theme.fontSize28 + font.pixelSize: Theme.fontSize(28) leftPadding: 5 topPadding: 5 //smaller padding to handle bigger font bottomPadding: 5 @@ -107,7 +107,7 @@ StatusModal { input.showBackground: false input.placeholder { text: qsTr("Search") - font.pixelSize: Theme.fontSize28 + font.pixelSize: Theme.fontSize(28) color: Theme.palette.directColor9 } diff --git a/ui/app/AppLayouts/ActivityCenter/ActivityCenterLayout.qml b/ui/app/AppLayouts/ActivityCenter/ActivityCenterLayout.qml index e63d3aabe77..31db438e83e 100644 --- a/ui/app/AppLayouts/ActivityCenter/ActivityCenterLayout.qml +++ b/ui/app/AppLayouts/ActivityCenter/ActivityCenterLayout.qml @@ -619,7 +619,7 @@ StatusSectionLayout { } StatusBaseText { Layout.alignment: Qt.AlignHCenter - font.pixelSize: Theme.fontSize27 + font.pixelSize: Theme.fontSize(27) font.weight: Font.Medium font.letterSpacing: 5 text: truncateDeviceId(deviceId) @@ -669,7 +669,7 @@ StatusSectionLayout { } StatusBaseText { Layout.alignment: Qt.AlignHCenter - font.pixelSize: Theme.fontSize27 + font.pixelSize: Theme.fontSize(27) font.weight: Font.Medium font.letterSpacing: 5 text: truncateDeviceId(deviceId) diff --git a/ui/app/AppLayouts/ActivityCenter/controls/NotificationCard.qml b/ui/app/AppLayouts/ActivityCenter/controls/NotificationCard.qml index 2bdb44d50ab..1ff76fa6075 100644 --- a/ui/app/AppLayouts/ActivityCenter/controls/NotificationCard.qml +++ b/ui/app/AppLayouts/ActivityCenter/controls/NotificationCard.qml @@ -266,7 +266,7 @@ Control { Layout.fillWidth: true visible: root.actionText text: root.actionText - font.pixelSize: Theme.fontSize13 + font.pixelSize: Theme.fontSize(13) color: Theme.palette.directColor5 elide: Text.ElideRight } @@ -285,7 +285,7 @@ Control { StatusBaseText { Layout.fillWidth: true text: LocaleUtils.formatRelativeTimestamp(root.timestamp) - font.pixelSize: Theme.fontSize11 + font.pixelSize: Theme.fontSize(11) color: Theme.palette.directColor5 elide: Text.ElideRight } diff --git a/ui/app/AppLayouts/ActivityCenter/controls/NotificationContentBlock.qml b/ui/app/AppLayouts/ActivityCenter/controls/NotificationContentBlock.qml index 88304e4da7c..2c026436d59 100644 --- a/ui/app/AppLayouts/ActivityCenter/controls/NotificationContentBlock.qml +++ b/ui/app/AppLayouts/ActivityCenter/controls/NotificationContentBlock.qml @@ -171,7 +171,7 @@ Control { text: plainTextLength > root.contentMaxChars ? Utils.elideText(root.contentText, root.contentMaxChars, 0) : root.contentText elide: Text.ElideRight - font.pixelSize: Theme.fontSize13 + font.pixelSize: Theme.fontSize(13) color: Theme.palette.directColor4 onLinkActivated: href => root.linkActivated(href) diff --git a/ui/app/AppLayouts/ActivityCenter/controls/NotificationContextRow.qml b/ui/app/AppLayouts/ActivityCenter/controls/NotificationContextRow.qml index 5e5e8f832db..6d686ef7d90 100644 --- a/ui/app/AppLayouts/ActivityCenter/controls/NotificationContextRow.qml +++ b/ui/app/AppLayouts/ActivityCenter/controls/NotificationContextRow.qml @@ -70,8 +70,8 @@ Control { // ────────────────────────────────────────────────────────────────────────── // Keep icon close to text height for optical alignment - property int iconSize: Theme.fontSize16 - property int separatorSize: Theme.fontSize16 + property int iconSize: Theme.fontSize(16) + property int separatorSize: Theme.fontSize(16) // ────────────────────────────────────────────────────────────────────────── // Layout configuration (single Flow → icon + pieces wrap together) @@ -98,7 +98,7 @@ Control { root.width - icon.width - separator.width - 2 * root.spacing) text: root.primaryText color: root.primaryColor - font.pixelSize: Theme.fontSize13 + font.pixelSize: Theme.fontSize(13) font.weight: Font.Medium maximumLineCount: 1 wrapMode: Text.NoWrap @@ -121,7 +121,7 @@ Control { width: Math.min(implicitWidth, root.width) text: root.secondaryText color: root.secondaryColor - font.pixelSize: Theme.fontSize13 + font.pixelSize: Theme.fontSize(13) maximumLineCount: 1 wrapMode: Text.NoWrap elide: Text.ElideRight diff --git a/ui/app/AppLayouts/ActivityCenter/controls/NotificationHeaderRow.qml b/ui/app/AppLayouts/ActivityCenter/controls/NotificationHeaderRow.qml index 64b7817c3c5..c81d5ea9512 100644 --- a/ui/app/AppLayouts/ActivityCenter/controls/NotificationHeaderRow.qml +++ b/ui/app/AppLayouts/ActivityCenter/controls/NotificationHeaderRow.qml @@ -107,7 +107,7 @@ Control { elide: Text.ElideRight maximumLineCount: 1 wrapMode: Text.NoWrap - font.pixelSize: Theme.fontSize13 + font.pixelSize: Theme.fontSize(13) font.weight: Font.Medium } @@ -128,7 +128,7 @@ Control { color: root.keyColor maximumLineCount: 1 wrapMode: Text.NoWrap - font.pixelSize: Theme.fontSize11 + font.pixelSize: Theme.fontSize(11) } // Spacer pushes content to the left diff --git a/ui/app/AppLayouts/Chat/panels/SuggestedChannelsPanel.qml b/ui/app/AppLayouts/Chat/panels/SuggestedChannelsPanel.qml index ff5a4a15f2f..ff68bda959d 100644 --- a/ui/app/AppLayouts/Chat/panels/SuggestedChannelsPanel.qml +++ b/ui/app/AppLayouts/Chat/panels/SuggestedChannelsPanel.qml @@ -25,7 +25,7 @@ Repeater { id: sectionTitle text: modelData.name font.bold: true - font.pixelSize: Theme.fontSize16 + font.pixelSize: Theme.fontSize(16) } Flow { width: parent.width diff --git a/ui/app/AppLayouts/Communities/controls/SettingsPageHeader.qml b/ui/app/AppLayouts/Communities/controls/SettingsPageHeader.qml index 9cb70aa3f66..116624a385a 100644 --- a/ui/app/AppLayouts/Communities/controls/SettingsPageHeader.qml +++ b/ui/app/AppLayouts/Communities/controls/SettingsPageHeader.qml @@ -31,7 +31,7 @@ Control { Layout.horizontalStretchFactor: 0 color: Theme.palette.directColor1 - font.pixelSize: Theme.fontSize26 + font.pixelSize: Theme.fontSize(26) font.bold: true elide: Text.ElideRight diff --git a/ui/app/AppLayouts/Communities/panels/OverviewSettingsPanel.qml b/ui/app/AppLayouts/Communities/panels/OverviewSettingsPanel.qml index 5fe63a69b8f..7598b9107f3 100644 --- a/ui/app/AppLayouts/Communities/panels/OverviewSettingsPanel.qml +++ b/ui/app/AppLayouts/Communities/panels/OverviewSettingsPanel.qml @@ -93,7 +93,7 @@ StackLayout { id: nameText objectName: "communityOverviewSettingsCommunityName" Layout.fillWidth: true - font.pixelSize: Theme.fontSize28 + font.pixelSize: Theme.fontSize(28) font.bold: true font.letterSpacing: -0.4 color: Theme.palette.directColor1 diff --git a/ui/app/AppLayouts/Communities/panels/PrivilegedTokenArtworkPanel.qml b/ui/app/AppLayouts/Communities/panels/PrivilegedTokenArtworkPanel.qml index 183900682c6..408f5ad5fbd 100644 --- a/ui/app/AppLayouts/Communities/panels/PrivilegedTokenArtworkPanel.qml +++ b/ui/app/AppLayouts/Communities/panels/PrivilegedTokenArtworkPanel.qml @@ -72,7 +72,7 @@ Control { anchors.topMargin: -height/2 height: 20 text: qsTr("Included") - font.pixelSize: Theme.fontSize11 + font.pixelSize: Theme.fontSize(11) font.bold: true isReadonly: true background: Rectangle { diff --git a/ui/app/AppLayouts/HomePage/HomePage.qml b/ui/app/AppLayouts/HomePage/HomePage.qml index c8aacfecbc6..2d76f194c95 100644 --- a/ui/app/AppLayouts/HomePage/HomePage.qml +++ b/ui/app/AppLayouts/HomePage/HomePage.qml @@ -98,7 +98,7 @@ Control { objectName: "homeSearchField" anchors.fill: parent - font.pixelSize: d.isNarrowView ? Theme.fontSize23 : Theme.fontSize27 + font.pixelSize: d.isNarrowView ? Theme.fontSize(23) : Theme.fontSize(27) StatusBaseText { id: placeholderText diff --git a/ui/app/AppLayouts/HomePage/HomePageSearchField.qml b/ui/app/AppLayouts/HomePage/HomePageSearchField.qml index b977cb01810..6c350d98a88 100644 --- a/ui/app/AppLayouts/HomePage/HomePageSearchField.qml +++ b/ui/app/AppLayouts/HomePage/HomePageSearchField.qml @@ -10,7 +10,7 @@ StatusTextField { topPadding: 12 bottomPadding: 12 background: null - font.pixelSize: Theme.fontSize27 + font.pixelSize: Theme.fontSize(27) font.weight: Font.DemiBold StatusClearButton { diff --git a/ui/app/AppLayouts/Market/MarketLayout.qml b/ui/app/AppLayouts/Market/MarketLayout.qml index 309036d44bb..0f2232b6378 100644 --- a/ui/app/AppLayouts/Market/MarketLayout.qml +++ b/ui/app/AppLayouts/Market/MarketLayout.qml @@ -63,7 +63,7 @@ StatusSectionLayout { objectName: "heading" text: qsTr("Market") font.weight: Font.Bold - font.pixelSize: Theme.fontSize28 + font.pixelSize: Theme.fontSize(28) } Item { Layout.fillWidth: true } StatusButton { diff --git a/ui/app/AppLayouts/Node/NodeLayout.qml b/ui/app/AppLayouts/Node/NodeLayout.qml index dd84ada64a0..a3517a4239b 100644 --- a/ui/app/AppLayouts/Node/NodeLayout.qml +++ b/ui/app/AppLayouts/Node/NodeLayout.qml @@ -40,7 +40,7 @@ StatusSectionLayout { Layout.leftMargin: Theme.padding Layout.fillWidth: true font.weight: Font.Medium - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) } StatusBaseText { id: peerNumber @@ -51,7 +51,7 @@ StatusSectionLayout { Layout.leftMargin: Theme.padding Layout.fillWidth: true font.weight: Font.Medium - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) } } @@ -65,7 +65,7 @@ StatusSectionLayout { Layout.leftMargin: Theme.padding Layout.fillWidth: true font.weight: Font.Medium - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) } StatusTextArea { id: mailserverLogTxt @@ -89,7 +89,7 @@ StatusSectionLayout { Layout.leftMargin: Theme.padding Layout.fillWidth: true font.weight: Font.Medium - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) } StatusTextArea { id: logsTxt @@ -136,7 +136,7 @@ StatusSectionLayout { Layout.leftMargin: Theme.padding Layout.fillWidth: true font.weight: Font.Medium - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) } StatusBaseText { id: test @@ -147,7 +147,7 @@ StatusSectionLayout { Layout.leftMargin: Theme.padding Layout.fillWidth: true font.weight: Font.Medium - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) } } diff --git a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseIntro.qml b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseIntro.qml index caee3632448..3e0b7348626 100644 --- a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseIntro.qml +++ b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseIntro.qml @@ -29,7 +29,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true text: qsTr("Your recovery phrase has been created") - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseOutro.qml b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseOutro.qml index 3974b61ce03..0a2b7a49de0 100644 --- a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseOutro.qml +++ b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseOutro.qml @@ -23,7 +23,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true text: qsTr("Confirm backup") - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseReveal.qml b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseReveal.qml index 5daad6e2f91..61c5ed84a14 100644 --- a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseReveal.qml +++ b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseReveal.qml @@ -41,7 +41,7 @@ OnboardingPage { Layout.fillWidth: true text: root.title visible: !root.popupMode - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseVerify.qml b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseVerify.qml index 1c31592901c..dda4bcc8138 100644 --- a/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseVerify.qml +++ b/ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseVerify.qml @@ -52,7 +52,7 @@ OnboardingPage { Layout.fillWidth: true text: root.title visible: !root.popupMode - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountAcksPage.qml b/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountAcksPage.qml index 00dadeca13e..fb73efbabed 100644 --- a/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountAcksPage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountAcksPage.qml @@ -30,7 +30,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap text: root.title diff --git a/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountPage.qml b/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountPage.qml index 585ab2a9a36..f9345a4bf9a 100644 --- a/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountPage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/ConvertKeycardAccountPage.qml @@ -131,7 +131,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap text: root.title diff --git a/ui/app/AppLayouts/Onboarding/pages/CreateKeycardProfilePage.qml b/ui/app/AppLayouts/Onboarding/pages/CreateKeycardProfilePage.qml index 240ab0c7e89..7c2fc7d2180 100644 --- a/ui/app/AppLayouts/Onboarding/pages/CreateKeycardProfilePage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/CreateKeycardProfilePage.qml @@ -27,7 +27,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true text: root.title - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/CreateProfilePage.qml b/ui/app/AppLayouts/Onboarding/pages/CreateProfilePage.qml index bacdf93f9cd..ddfb6ae7b9a 100644 --- a/ui/app/AppLayouts/Onboarding/pages/CreateProfilePage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/CreateProfilePage.qml @@ -32,7 +32,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true text: root.title - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/EnableBiometricsPage.qml b/ui/app/AppLayouts/Onboarding/pages/EnableBiometricsPage.qml index 6431e59e448..e2c3d981644 100644 --- a/ui/app/AppLayouts/Onboarding/pages/EnableBiometricsPage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/EnableBiometricsPage.qml @@ -34,7 +34,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true text: root.title - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/HelpUsImproveStatusPage.qml b/ui/app/AppLayouts/Onboarding/pages/HelpUsImproveStatusPage.qml index c2a406567d3..d0b63b61e9d 100644 --- a/ui/app/AppLayouts/Onboarding/pages/HelpUsImproveStatusPage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/HelpUsImproveStatusPage.qml @@ -28,7 +28,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true text: root.title - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/ImportLocalBackupPage.qml b/ui/app/AppLayouts/Onboarding/pages/ImportLocalBackupPage.qml index d0a88c217c5..aaed57377ee 100644 --- a/ui/app/AppLayouts/Onboarding/pages/ImportLocalBackupPage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/ImportLocalBackupPage.qml @@ -36,7 +36,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true text: root.title - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardAddKeyPairPage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardAddKeyPairPage.qml index 2fde30eac62..2b1eaa876d2 100644 --- a/ui/app/AppLayouts/Onboarding/pages/KeycardAddKeyPairPage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/KeycardAddKeyPairPage.qml @@ -58,7 +58,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap text: root.title diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardBasePage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardBasePage.qml index 921dbe59f9c..7ae6d72b8d4 100644 --- a/ui/app/AppLayouts/Onboarding/pages/KeycardBasePage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/KeycardBasePage.qml @@ -33,7 +33,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true text: root.title - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/LoginBySyncingPage.qml b/ui/app/AppLayouts/Onboarding/pages/LoginBySyncingPage.qml index da9c4fd40b3..44e935b9799 100644 --- a/ui/app/AppLayouts/Onboarding/pages/LoginBySyncingPage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/LoginBySyncingPage.qml @@ -27,7 +27,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true text: root.title - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/LoginScreen.qml b/ui/app/AppLayouts/Onboarding/pages/LoginScreen.qml index 444dcdc1ef8..b8d935cedb9 100644 --- a/ui/app/AppLayouts/Onboarding/pages/LoginScreen.qml +++ b/ui/app/AppLayouts/Onboarding/pages/LoginScreen.qml @@ -202,7 +202,7 @@ OnboardingPage { id: headerText Layout.fillWidth: true text: qsTr("Welcome back") - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/NewAccountLoginPage.qml b/ui/app/AppLayouts/Onboarding/pages/NewAccountLoginPage.qml index f318b5777ae..b8ab454058d 100644 --- a/ui/app/AppLayouts/Onboarding/pages/NewAccountLoginPage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/NewAccountLoginPage.qml @@ -38,7 +38,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true text: root.title - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/SeedphrasePage.qml b/ui/app/AppLayouts/Onboarding/pages/SeedphrasePage.qml index 96caee51deb..81801cdd05d 100644 --- a/ui/app/AppLayouts/Onboarding/pages/SeedphrasePage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/SeedphrasePage.qml @@ -47,7 +47,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true text: root.title - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Onboarding/pages/SyncProgressPage.qml b/ui/app/AppLayouts/Onboarding/pages/SyncProgressPage.qml index 0193ce67c23..ab2782c0b72 100644 --- a/ui/app/AppLayouts/Onboarding/pages/SyncProgressPage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/SyncProgressPage.qml @@ -113,7 +113,7 @@ OnboardingPage { StatusBaseText { Layout.fillWidth: true - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true wrapMode: Text.WordWrap text: root.title diff --git a/ui/app/AppLayouts/Onboarding/pages/WelcomePage.qml b/ui/app/AppLayouts/Onboarding/pages/WelcomePage.qml index 8190251cff6..e8f01b30a9e 100644 --- a/ui/app/AppLayouts/Onboarding/pages/WelcomePage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/WelcomePage.qml @@ -106,7 +106,7 @@ OnboardingPage { id: headerText Layout.fillWidth: true text: root.title - font.pixelSize: Theme.fontSize40 + font.pixelSize: Theme.fontSize(40) font.bold: true wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Profile/views/AboutView.qml b/ui/app/AppLayouts/Profile/views/AboutView.qml index acacf758340..72e3d91f7ce 100644 --- a/ui/app/AppLayouts/Profile/views/AboutView.qml +++ b/ui/app/AppLayouts/Profile/views/AboutView.qml @@ -71,7 +71,7 @@ SettingsContentBase { StatusLinkText { anchors.horizontalCenter: parent.horizontalCenter - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true normalColor: Theme.palette.directColor1 text: root.currentVersion diff --git a/ui/app/AppLayouts/Profile/views/EnsAddedView.qml b/ui/app/AppLayouts/Profile/views/EnsAddedView.qml index d7d0445b9dd..c6b8bdba98d 100644 --- a/ui/app/AppLayouts/Profile/views/EnsAddedView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsAddedView.qml @@ -21,7 +21,7 @@ Item { anchors.top: parent.top anchors.topMargin: 24 font.weight: Font.Bold - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) color: Theme.palette.directColor1 } @@ -41,7 +41,7 @@ Item { text: "✓" opacity: 0.7 font.weight: Font.Bold - font.pixelSize: Theme.fontSize18 + font.pixelSize: Theme.fontSize(18) color: Theme.palette.indirectColor1 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -54,7 +54,7 @@ Item { anchors.top: circle.bottom anchors.topMargin: 24 font.weight: Font.Bold - font.pixelSize: Theme.fontSize24 + font.pixelSize: Theme.fontSize(24) anchors.left: parent.left anchors.right: parent.right horizontalAlignment: Text.AlignHCenter @@ -67,7 +67,7 @@ Item { text: qsTr("%1 is now connected with your chat key and can be used in Status.").arg(ensUsername) anchors.top: title.bottom anchors.topMargin: 24 - font.pixelSize: Theme.fontSize14 + font.pixelSize: Theme.fontSize(14) anchors.left: parent.left anchors.right: parent.right horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Profile/views/EnsConnectedView.qml b/ui/app/AppLayouts/Profile/views/EnsConnectedView.qml index f2b50be977b..20bfdccb209 100644 --- a/ui/app/AppLayouts/Profile/views/EnsConnectedView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsConnectedView.qml @@ -21,7 +21,7 @@ Item { anchors.top: parent.top anchors.topMargin: 24 font.weight: Font.Bold - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) color: Theme.palette.directColor1 } @@ -41,7 +41,7 @@ Item { text: "✓" opacity: 0.7 font.weight: Font.Bold - font.pixelSize: Theme.fontSize18 + font.pixelSize: Theme.fontSize(18) color: Theme.palette.indirectColor1 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -54,7 +54,7 @@ Item { anchors.top: circle.bottom anchors.topMargin: 24 font.weight: Font.Bold - font.pixelSize: Theme.fontSize24 + font.pixelSize: Theme.fontSize(24) anchors.left: parent.left anchors.right: parent.right horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Profile/views/EnsDetailsView.qml b/ui/app/AppLayouts/Profile/views/EnsDetailsView.qml index c85759b8591..41cf05c382b 100644 --- a/ui/app/AppLayouts/Profile/views/EnsDetailsView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsDetailsView.qml @@ -41,7 +41,7 @@ Item { anchors.top: parent.top anchors.topMargin: 24 font.weight: Font.Bold - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) color: Theme.palette.directColor1 } diff --git a/ui/app/AppLayouts/Profile/views/EnsListView.qml b/ui/app/AppLayouts/Profile/views/EnsListView.qml index b77ede10a2d..34b1f00d29b 100644 --- a/ui/app/AppLayouts/Profile/views/EnsListView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsListView.qml @@ -56,7 +56,7 @@ Item { anchors.top: parent.top anchors.topMargin: 24 font.weight: Font.Bold - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) color: Theme.palette.directColor1 } @@ -100,7 +100,7 @@ Item { anchors.left: parent.left anchors.top: addUsername.bottom anchors.topMargin: 24 - font.pixelSize: Theme.fontSize16 + font.pixelSize: Theme.fontSize(16) color: Theme.palette.directColor1 } @@ -163,7 +163,7 @@ Item { anchors.left: parent.left anchors.top: ensList.bottom anchors.topMargin: 24 - font.pixelSize: Theme.fontSize16 + font.pixelSize: Theme.fontSize(16) color: Theme.palette.directColor1 } @@ -233,7 +233,7 @@ Item { anchors.left: messagesShownAs.left anchors.topMargin: Theme.padding text: qsTr("You’re displaying your ENS username in chats") - font.pixelSize: Theme.fontSize14 + font.pixelSize: Theme.fontSize(14) color: Theme.palette.baseColor1 } } diff --git a/ui/app/AppLayouts/Profile/views/EnsRegisteredView.qml b/ui/app/AppLayouts/Profile/views/EnsRegisteredView.qml index e4178c0708d..c1a5366bffe 100644 --- a/ui/app/AppLayouts/Profile/views/EnsRegisteredView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsRegisteredView.qml @@ -21,7 +21,7 @@ Item { anchors.top: parent.top anchors.topMargin: Theme.bigPadding font.weight: Font.Bold - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) color: Theme.palette.directColor1 } @@ -41,7 +41,7 @@ Item { text: "✓" opacity: 0.7 font.weight: Font.Bold - font.pixelSize: Theme.fontSize18 + font.pixelSize: Theme.fontSize(18) color: Theme.palette.indirectColor1 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -54,7 +54,7 @@ Item { anchors.top: circle.bottom anchors.topMargin: Theme.bigPadding font.weight: Font.Bold - font.pixelSize: Theme.fontSize24 + font.pixelSize: Theme.fontSize(24) anchors.left: parent.left anchors.right: parent.right horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Profile/views/EnsReleasedView.qml b/ui/app/AppLayouts/Profile/views/EnsReleasedView.qml index 0114896bd2b..c3fe16c131d 100644 --- a/ui/app/AppLayouts/Profile/views/EnsReleasedView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsReleasedView.qml @@ -21,7 +21,7 @@ Item { anchors.top: parent.top anchors.topMargin: Theme.bigPadding font.weight: Font.Bold - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) color: Theme.palette.directColor1 } @@ -41,7 +41,7 @@ Item { text: "✓" opacity: 0.7 font.weight: Font.Bold - font.pixelSize: Theme.fontSize18 + font.pixelSize: Theme.fontSize(18) color: Theme.palette.indirectColor1 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -54,7 +54,7 @@ Item { anchors.top: circle.bottom anchors.topMargin: Theme.bigPadding font.weight: Font.Bold - font.pixelSize: Theme.fontSize24 + font.pixelSize: Theme.fontSize(24) anchors.left: parent.left anchors.right: parent.right horizontalAlignment: Text.AlignHCenter diff --git a/ui/app/AppLayouts/Profile/views/EnsSearchView.qml b/ui/app/AppLayouts/Profile/views/EnsSearchView.qml index 9bb0e31d50a..7d4d0a28552 100644 --- a/ui/app/AppLayouts/Profile/views/EnsSearchView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsSearchView.qml @@ -96,7 +96,7 @@ Item { } opacity: 0.7 font.weight: Font.Bold - font.pixelSize: Theme.fontSize18 + font.pixelSize: Theme.fontSize(18) color: Theme.palette.indirectColor1 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter diff --git a/ui/app/AppLayouts/Profile/views/EnsTermsAndConditionsView.qml b/ui/app/AppLayouts/Profile/views/EnsTermsAndConditionsView.qml index 7a3e037aec9..eb39a64a9dc 100644 --- a/ui/app/AppLayouts/Profile/views/EnsTermsAndConditionsView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsTermsAndConditionsView.qml @@ -46,7 +46,7 @@ Item { anchors.top: parent.top anchors.topMargin: 24 font.weight: Font.Bold - font.pixelSize: Theme.fontSize20 + font.pixelSize: Theme.fontSize(20) color: Theme.palette.directColor1 } @@ -211,7 +211,7 @@ Item { text: "@" opacity: 0.7 font.weight: Font.Bold - font.pixelSize: Theme.fontSize18 + font.pixelSize: Theme.fontSize(18) color: Theme.palette.white anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -222,7 +222,7 @@ Item { id: ensUsername text: username + ".stateofus.eth" font.weight: Font.Bold - font.pixelSize: Theme.fontSize18 + font.pixelSize: Theme.fontSize(18) anchors.top: circleAt.bottom anchors.topMargin: 24 anchors.left: parent.left diff --git a/ui/app/AppLayouts/Profile/views/EnsWelcomeView.qml b/ui/app/AppLayouts/Profile/views/EnsWelcomeView.qml index 182342ac97f..a47a9d49def 100644 --- a/ui/app/AppLayouts/Profile/views/EnsWelcomeView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsWelcomeView.qml @@ -50,7 +50,7 @@ Item { anchors.top: image.bottom anchors.topMargin: 24 font.weight: Font.Bold - font.pixelSize: Theme.fontSize24 + font.pixelSize: Theme.fontSize(24) anchors.left: parent.left anchors.right: parent.right horizontalAlignment: Text.AlignHCenter @@ -276,7 +276,7 @@ Item { anchors.topMargin: 40 anchors.right: parent.right wrapMode: Text.WordWrap - font.pixelSize: Theme.fontSize11 + font.pixelSize: Theme.fontSize(11) color: Theme.palette.directColor1 } } diff --git a/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml b/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml index c649f1ffacf..6b8575e50c5 100644 --- a/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml +++ b/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml @@ -62,7 +62,7 @@ ColumnLayout { Layout.alignment: Qt.AlignLeft text: !!root.account? root.account.name : "" font.weight: Font.Bold - font.pixelSize: Theme.fontSize28 + font.pixelSize: Theme.fontSize(28) color: !!root.account? Utils.getColorForId(root.account.colorId) : Theme.palette.directColor1 } StatusEmoji { diff --git a/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml b/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml index b00278ce15e..21edd0be8f7 100644 --- a/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml +++ b/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml @@ -77,7 +77,7 @@ Control { Layout.fillWidth: true Layout.horizontalStretchFactor: 0 - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) lineHeight: 30 lineHeightMode: Text.FixedHeight elide: Text.ElideRight @@ -91,7 +91,7 @@ Control { Layout.horizontalStretchFactor: 1 Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) lineHeight: 30 lineHeightMode: Text.FixedHeight elide: Text.ElideRight diff --git a/ui/app/AppLayouts/Wallet/panels/WalletAccountHeader.qml b/ui/app/AppLayouts/Wallet/panels/WalletAccountHeader.qml index 0461a51d63c..505d3b13210 100644 --- a/ui/app/AppLayouts/Wallet/panels/WalletAccountHeader.qml +++ b/ui/app/AppLayouts/Wallet/panels/WalletAccountHeader.qml @@ -135,7 +135,7 @@ Control { Layout.fillWidth: true elide: Text.ElideRight - font.pixelSize: Theme.fontSize19 + font.pixelSize: Theme.fontSize(19) lineHeightMode: Text.FixedHeight lineHeight: 26 @@ -145,7 +145,7 @@ Control { StatusTextWithLoadingState { visible: root.balanceAvailable - font.pixelSize: Theme.fontSize19 + font.pixelSize: Theme.fontSize(19) font.weight: Font.Medium customColor: Theme.palette.directColor1 diff --git a/ui/app/AppLayouts/Wallet/panels/WalletFollowingAddressesHeader.qml b/ui/app/AppLayouts/Wallet/panels/WalletFollowingAddressesHeader.qml index 2c1f6c28b4c..ad5affbcd10 100644 --- a/ui/app/AppLayouts/Wallet/panels/WalletFollowingAddressesHeader.qml +++ b/ui/app/AppLayouts/Wallet/panels/WalletFollowingAddressesHeader.qml @@ -68,7 +68,7 @@ Control { elide: Text.ElideRight - font.pixelSize: Theme.fontSize19 + font.pixelSize: Theme.fontSize(19) font.weight: Font.Medium text: qsTr("EFP onchain friends") diff --git a/ui/app/AppLayouts/Wallet/panels/WalletSavedAddressesHeader.qml b/ui/app/AppLayouts/Wallet/panels/WalletSavedAddressesHeader.qml index f39e0a269dc..325b6e0ec97 100644 --- a/ui/app/AppLayouts/Wallet/panels/WalletSavedAddressesHeader.qml +++ b/ui/app/AppLayouts/Wallet/panels/WalletSavedAddressesHeader.qml @@ -72,7 +72,7 @@ Control { elide: Text.ElideRight - font.pixelSize: Theme.fontSize19 + font.pixelSize: Theme.fontSize(19) font.weight: Font.Medium text: qsTr("Saved addresses") diff --git a/ui/app/AppLayouts/Wallet/popups/SavedAddressActivityPopup.qml b/ui/app/AppLayouts/Wallet/popups/SavedAddressActivityPopup.qml index f9277b0c18d..4956cafb917 100644 --- a/ui/app/AppLayouts/Wallet/popups/SavedAddressActivityPopup.qml +++ b/ui/app/AppLayouts/Wallet/popups/SavedAddressActivityPopup.qml @@ -142,7 +142,7 @@ StatusDialog { avatar: d.avatar isFollowingAddress: d.isFollowingAddress - statusListItemTitle.font.pixelSize: Theme.fontSize22 + statusListItemTitle.font.pixelSize: Theme.fontSize(22) statusListItemTitle.font.bold: Font.Bold onAboutToOpenPopup: { diff --git a/ui/app/AppLayouts/Wallet/views/LeftTabView.qml b/ui/app/AppLayouts/Wallet/views/LeftTabView.qml index a24879338e5..40bd92a3e1d 100644 --- a/ui/app/AppLayouts/Wallet/views/LeftTabView.qml +++ b/ui/app/AppLayouts/Wallet/views/LeftTabView.qml @@ -372,7 +372,7 @@ Rectangle { objectName: "walletLeftListAmountValue" customColor: Theme.palette.textColor text: LocaleUtils.currencyAmountToLocaleString(RootStore.totalCurrencyBalance, {noSymbol: true}) - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) loading: RootStore.balanceLoading lineHeightMode: Text.FixedHeight lineHeight: 36 diff --git a/ui/app/mainui/SplashScreen.qml b/ui/app/mainui/SplashScreen.qml index af23aa8edce..c4e898de79b 100644 --- a/ui/app/mainui/SplashScreen.qml +++ b/ui/app/mainui/SplashScreen.qml @@ -31,7 +31,7 @@ Item { Layout.topMargin: 12 Layout.fillWidth: true horizontalAlignment: Qt.AlignHCenter - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) font.bold: true text: qsTr("Preparing Status for you") } diff --git a/ui/imports/shared/controls/AssetsDetailsHeader.qml b/ui/imports/shared/controls/AssetsDetailsHeader.qml index 769ca261a89..4cd54b83d15 100644 --- a/ui/imports/shared/controls/AssetsDetailsHeader.qml +++ b/ui/imports/shared/controls/AssetsDetailsHeader.qml @@ -49,7 +49,7 @@ Control { id: tokenName Layout.alignment: Qt.AlignHCenter Layout.maximumWidth: root.width-root.asset.width-8 - font.pixelSize: Theme.fontSize28 + font.pixelSize: Theme.fontSize(28) font.bold: true lineHeight: 38 lineHeightMode: Text.FixedHeight @@ -78,7 +78,7 @@ Control { StatusTextWithLoadingState { id: cryptoBalance Layout.alignment: Qt.AlignHCenter - font.pixelSize: Theme.fontSize28 + font.pixelSize: Theme.fontSize(28) font.bold: true lineHeight: 38 lineHeightMode: Text.FixedHeight diff --git a/ui/imports/shared/controls/chat/EmojiReaction.qml b/ui/imports/shared/controls/chat/EmojiReaction.qml index 0a306c3a59d..0f6b8ad3280 100644 --- a/ui/imports/shared/controls/chat/EmojiReaction.qml +++ b/ui/imports/shared/controls/chat/EmojiReaction.qml @@ -26,8 +26,8 @@ Rectangle { StatusEmoji { id: statusEmoji anchors.centerIn: parent - width: Theme.fontSize23 - height: Theme.fontSize23 + width: Theme.fontSize(23) + height: Theme.fontSize(23) emojiId: root.emojiId } diff --git a/ui/imports/shared/popups/DownloadPage.qml b/ui/imports/shared/popups/DownloadPage.qml index 56e1b4781b8..758d717848c 100644 --- a/ui/imports/shared/popups/DownloadPage.qml +++ b/ui/imports/shared/popups/DownloadPage.qml @@ -46,7 +46,7 @@ Rectangle { anchors.horizontalCenter: parent.horizontalCenter anchors.top: logoImage.bottom anchors.topMargin: 75 - font.pixelSize: Theme.fontSize38 + font.pixelSize: Theme.fontSize(38) font.weight: Font.Medium color: Theme.palette.directColor1 } @@ -57,7 +57,7 @@ Rectangle { anchors.horizontalCenter: parent.horizontalCenter anchors.top: title.bottom anchors.topMargin: 32 - font.pixelSize: Theme.fontSize28 + font.pixelSize: Theme.fontSize(28) color: Theme.palette.directColor1 } @@ -66,7 +66,7 @@ Rectangle { text: qsTr("There's new version available to download.") anchors.horizontalCenter: parent.horizontalCenter anchors.top: currentVersionText.bottom - font.pixelSize: Theme.fontSize28 + font.pixelSize: Theme.fontSize(28) color: Theme.palette.directColor1 } diff --git a/ui/imports/shared/popups/addaccount/states/ConfirmAddingNewMasterKey.qml b/ui/imports/shared/popups/addaccount/states/ConfirmAddingNewMasterKey.qml index 4b6c633a46d..85faa869484 100644 --- a/ui/imports/shared/popups/addaccount/states/ConfirmAddingNewMasterKey.qml +++ b/ui/imports/shared/popups/addaccount/states/ConfirmAddingNewMasterKey.qml @@ -61,7 +61,7 @@ Item { horizontalAlignment: Text.AlignHCenter wrapMode: Text.WordWrap font.bold: true - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) text: qsTr("Secure Your Assets and Funds") } diff --git a/ui/imports/shared/popups/addaccount/states/ConfirmSeedPhraseBackup.qml b/ui/imports/shared/popups/addaccount/states/ConfirmSeedPhraseBackup.qml index 5162e08ebc5..a745680875b 100644 --- a/ui/imports/shared/popups/addaccount/states/ConfirmSeedPhraseBackup.qml +++ b/ui/imports/shared/popups/addaccount/states/ConfirmSeedPhraseBackup.qml @@ -59,7 +59,7 @@ Item { horizontalAlignment: Text.AlignHCenter wrapMode: Text.WordWrap font.bold: true - font.pixelSize: Theme.fontSize18 + font.pixelSize: Theme.fontSize(18) color: Theme.palette.directColor1 text: qsTr("Store Your Phrase Offline and Complete Your Back Up") } diff --git a/ui/imports/shared/popups/send/controls/HeaderTitleText.qml b/ui/imports/shared/popups/send/controls/HeaderTitleText.qml index 96e66168b4d..097c41df96b 100644 --- a/ui/imports/shared/popups/send/controls/HeaderTitleText.qml +++ b/ui/imports/shared/popups/send/controls/HeaderTitleText.qml @@ -6,7 +6,7 @@ import StatusQ.Core.Theme StatusBaseText { lineHeight: 38 lineHeightMode: Text.FixedHeight - font.pixelSize: Theme.fontSize28 + font.pixelSize: Theme.fontSize(28) font.letterSpacing: -0.4 verticalAlignment: Text.AlignVCenter color: Theme.palette.directColor1 diff --git a/ui/imports/shared/popups/send/views/AmountToReceive.qml b/ui/imports/shared/popups/send/views/AmountToReceive.qml index 4a87bc748cc..8bcdcbfcac8 100644 --- a/ui/imports/shared/popups/send/views/AmountToReceive.qml +++ b/ui/imports/shared/popups/send/views/AmountToReceive.qml @@ -51,7 +51,7 @@ ColumnLayout { id: amountToReceiveText Layout.alignment: Qt.AlignVCenter text: isLoading ? "..." : inputIsFiat ? d.fiatValue : d.cryptoValue - font.pixelSize: Theme.fontSize34 + font.pixelSize: Theme.fontSize(34) color: Theme.palette.directColor1 } } diff --git a/ui/imports/shared/popups/send/views/AmountToSend.qml b/ui/imports/shared/popups/send/views/AmountToSend.qml index 0d460cbf08c..314007f63d3 100644 --- a/ui/imports/shared/popups/send/views/AmountToSend.qml +++ b/ui/imports/shared/popups/send/views/AmountToSend.qml @@ -249,7 +249,7 @@ Control { + "0".repeat(root.fiatDecimalPlaces) } - font.pixelSize: Theme.fontSize34 + font.pixelSize: Theme.fontSize(34) validator: AmountValidator { id: validator diff --git a/ui/imports/shared/popups/walletconnect/panels/MaxFeesDisplay.qml b/ui/imports/shared/popups/walletconnect/panels/MaxFeesDisplay.qml index b905aec0d74..39b58ed5811 100644 --- a/ui/imports/shared/popups/walletconnect/panels/MaxFeesDisplay.qml +++ b/ui/imports/shared/popups/walletconnect/panels/MaxFeesDisplay.qml @@ -22,7 +22,7 @@ ColumnLayout { visible: !!text - font.pixelSize: Theme.fontSize16 + font.pixelSize: Theme.fontSize(16) } StatusBaseText { diff --git a/ui/imports/shared/views/PasswordConfirmationView.qml b/ui/imports/shared/views/PasswordConfirmationView.qml index 1f766ea87e3..2de96aa2357 100644 --- a/ui/imports/shared/views/PasswordConfirmationView.qml +++ b/ui/imports/shared/views/PasswordConfirmationView.qml @@ -35,7 +35,7 @@ ColumnLayout { text: qsTr("Have you written down your password?") font.bold: true color: Theme.palette.directColor1 - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) } ColumnLayout { diff --git a/ui/imports/shared/views/ProfileDialogView.qml b/ui/imports/shared/views/ProfileDialogView.qml index cdd396b9d36..8bd70a1aff8 100644 --- a/ui/imports/shared/views/ProfileDialogView.qml +++ b/ui/imports/shared/views/ProfileDialogView.qml @@ -388,7 +388,7 @@ Pane { width: Math.min(implicitWidth, contactRow.width - verificationIcons.width - verificationIcons.anchors.leftMargin) objectName: "ProfileDialog_displayName" font.bold: true - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) elide: Text.ElideRight text: StatusQUtils.Emoji.parse(d.mainDisplayName, StatusQUtils.Emoji.size.middle) } diff --git a/ui/imports/shared/views/SyncingDeviceView.qml b/ui/imports/shared/views/SyncingDeviceView.qml index c010e23e5a0..2cde8f80dae 100644 --- a/ui/imports/shared/views/SyncingDeviceView.qml +++ b/ui/imports/shared/views/SyncingDeviceView.qml @@ -63,7 +63,7 @@ Item { horizontalAlignment: Text.AlignHCenter color: Theme.palette.directColor1 font.weight: Font.Bold - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) elide: Text.ElideRight wrapMode: Text.Wrap text: root.userDisplayName @@ -73,7 +73,7 @@ Item { Layout.fillWidth: true Layout.topMargin: Theme.xlPadding horizontalAlignment: Text.AlignHCenter - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) color: d.pairingFailed ? Theme.palette.dangerColor1 : Theme.palette.directColor1 text: { if (d.pairingInProgress) diff --git a/ui/imports/shared/views/chat/ChannelIdentifierView.qml b/ui/imports/shared/views/chat/ChannelIdentifierView.qml index 0c345e3aac4..603c65a632d 100644 --- a/ui/imports/shared/views/chat/ChannelIdentifierView.qml +++ b/ui/imports/shared/views/chat/ChannelIdentifierView.qml @@ -46,7 +46,7 @@ Column { wrapMode: Text.Wrap text: root.chatName font.weight: Font.Bold - font.pixelSize: Theme.fontSize22 + font.pixelSize: Theme.fontSize(22) color: Theme.palette.textColor horizontalAlignment: Text.AlignHCenter } diff --git a/ui/imports/shared/views/chat/NewMessagesMarker.qml b/ui/imports/shared/views/chat/NewMessagesMarker.qml index aedd81370bb..eb5b818a117 100644 --- a/ui/imports/shared/views/chat/NewMessagesMarker.qml +++ b/ui/imports/shared/views/chat/NewMessagesMarker.qml @@ -66,7 +66,7 @@ Item { text: qsTr("NEW", "new message(s)") color: Theme.palette.indirectColor1 font.weight: Font.DemiBold - font.pixelSize: Theme.fontSize11 + font.pixelSize: Theme.fontSize(11) } } } diff --git a/ui/imports/utils/Constants.qml b/ui/imports/utils/Constants.qml index 7ca056a558d..f4e15e274bf 100644 --- a/ui/imports/utils/Constants.qml +++ b/ui/imports/utils/Constants.qml @@ -409,9 +409,9 @@ QtObject { readonly property int biometricsImageHeight: 185 readonly property int userImageWidth: 40 readonly property int userImageHeight: 40 - readonly property int titleFontSize: Theme.fontSize17 - readonly property int fontSize1: Theme.fontSize22 - readonly property int fontSize2: Theme.fontSize17 + readonly property int titleFontSize: Theme.fontSize(17) + readonly property int fontSize1: Theme.fontSize(22) + readonly property int fontSize2: Theme.fontSize(17) readonly property int fontSize3: Theme.primaryTextFontSize readonly property int fontSize4: Theme.tertiaryTextFontSize readonly property int loginInfoHeight1: 24 @@ -555,9 +555,9 @@ QtObject { readonly property QtObject settingsSection: QtObject { readonly property int itemSpacing: 10 readonly property int radius: 8 - readonly property int mainHeaderFontSize: Theme.fontSize28 // Keep as is - special case for main header + readonly property int mainHeaderFontSize: Theme.fontSize(28) // Keep as is - special case for main header readonly property int subHeaderFontSize: Theme.primaryTextFontSize - readonly property int importantInfoFontSize: Theme.fontSize18 + readonly property int importantInfoFontSize: Theme.fontSize(18) readonly property int infoFontSize: Theme.primaryTextFontSize readonly property int infoLineHeight: 22 readonly property int infoSpacing: 5 @@ -618,7 +618,7 @@ QtObject { readonly property int keycardPairingCodeInputWidth: 512 readonly property int keycardPukAdditionalSpacingOnEvery4Items: 4 readonly property int keycardPukAdditionalSpacing: 32 - readonly property int fontSize1: Theme.fontSize22 + readonly property int fontSize1: Theme.fontSize(22) readonly property int fontSize2: Theme.primaryTextFontSize readonly property int fontSize3: Theme.tertiaryTextFontSize readonly property int seedPhraseCellWidth: 193 From e73bf8a6cd251df17a8e02366943fa62243e935c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Fri, 21 Nov 2025 19:25:21 +0100 Subject: [PATCH 09/32] Theme: update fonts handling --- storybook/pages/StatusCardPage.qml | 4 ++-- ui/StatusQ/src/StatusQ/Components/StatusLanguageSelector.qml | 2 +- ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml | 2 +- ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml | 2 +- ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusInput.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseField.qml | 4 ++-- ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusTabButton.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml | 2 +- ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml | 2 +- ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml | 2 +- ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml | 2 +- .../src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml | 4 ++-- ui/app/AppLayouts/Communities/controls/IssuePill.qml | 2 +- ui/app/AppLayouts/Onboarding/pages/BackupSeedphraseReveal.qml | 2 +- ui/app/AppLayouts/Profile/views/EnsTermsAndConditionsView.qml | 4 ++-- ui/app/AppLayouts/Wallet/controls/CollectibleBalanceTag.qml | 2 +- ui/app/AppLayouts/Wallet/controls/FilterComboBox.qml | 2 +- ui/app/AppLayouts/Wallet/controls/RecipientViewDelegate.qml | 4 ++-- ui/app/AppLayouts/Wallet/controls/SortOrderComboBox.qml | 2 +- ui/imports/shared/controls/CountdownPill.qml | 2 +- ui/imports/shared/controls/StatusSyncCodeInput.qml | 2 +- ui/imports/shared/controls/StyledTextEdit.qml | 2 +- ui/imports/shared/controls/WalletAccountListItem.qml | 2 +- ui/imports/shared/panels/Address.qml | 2 +- ui/imports/shared/panels/ModuleWarning.qml | 2 +- ui/imports/shared/panels/StyledText.qml | 2 +- ui/imports/shared/status/StatusStickerPackDetails.qml | 4 ++-- ui/imports/shared/views/chat/MessageView.qml | 2 +- 40 files changed, 46 insertions(+), 46 deletions(-) diff --git a/storybook/pages/StatusCardPage.qml b/storybook/pages/StatusCardPage.qml index 9a44d340fa3..de09336fcd8 100644 --- a/storybook/pages/StatusCardPage.qml +++ b/storybook/pages/StatusCardPage.qml @@ -58,7 +58,7 @@ Item { StatusCheckBox { Layout.alignment: Qt.AlignVCenter text: "advancedMode" - font.family: Theme.monoFont.name + font.family: Fonts.monoFont.family onClicked: { card.advancedMode = checked } @@ -68,7 +68,7 @@ Item { StatusCheckBox { Layout.alignment: Qt.AlignVCenter text: "loading" - font.family: Theme.monoFont.name + font.family: Fonts.monoFont.family onClicked: { card.loading = checked } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusLanguageSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusLanguageSelector.qml index db599963ab0..695bd80f754 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusLanguageSelector.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusLanguageSelector.qml @@ -27,7 +27,7 @@ Button { dropdown.close() } - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.weight: Font.Medium font.pixelSize: Theme.additionalTextSize diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml index a50930b9327..8a7c23e72c3 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml @@ -158,7 +158,7 @@ ItemDelegate { icon.width: 32 icon.height: 32 - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.pixelSize: Theme.primaryTextFontSize background: Rectangle { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml b/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml index ded5e77620c..9cb6413eab3 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusMessageHeader.qml @@ -55,7 +55,7 @@ Item { Layout.bottomMargin: 2 // offset for the underline to stay vertically centered font.weight: Font.Medium font.underline: root.displayNameClickable && hhandler.hovered - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.pixelSize: Theme.primaryTextFontSize wrapMode: Text.WordWrap color: Theme.palette.primaryColor1 diff --git a/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml index 9b8382af3c0..ec413e13540 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml @@ -290,7 +290,7 @@ Item { clip: true font.pixelSize: Theme.primaryTextFontSize wrapMode: TextEdit.NoWrap - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family Layout.fillWidth: true Layout.preferredHeight: 44 visible: (parent.width>22) diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml index f28154253c3..b05f601d803 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml @@ -95,7 +95,7 @@ AbstractButton { } } - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.weight: Font.Medium font.pixelSize: size === StatusBaseButton.Size.Large ? Theme.primaryTextFontSize : Theme.additionalTextSize diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml index 829cd60cf06..4e5032b41b2 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml @@ -393,7 +393,7 @@ Item { selectedTextColor: color focus: !Utils.isMobile font.pixelSize: Theme.primaryTextFontSize - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1 wrapMode: root.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml b/ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml index f8b1d8dd5a0..377d26a7353 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml @@ -42,7 +42,7 @@ CheckBox { readonly property int indicatorIconHeightSmall: 5 } - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.pixelSize: size === StatusCheckBox.Size.Regular ? Theme.primaryTextFontSize : Theme.additionalTextSize indicator: Rectangle { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml b/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml index 56ad5eddd89..b222c307d9f 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml @@ -104,7 +104,7 @@ Item { enabled: root.enabled && root.interactive - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.pixelSize: root.size === StatusComboBox.Size.Large ? Theme.secondaryTextFontSize : 13 padding: 16 diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml b/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml index a28d8373380..538b5d2da56 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml @@ -58,7 +58,7 @@ Control { signal clicked() - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.pixelSize: Theme.tertiaryTextFontSize horizontalPadding: 8 diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml index 1cdf196bbeb..39e9a5a3a00 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml @@ -76,7 +76,7 @@ Control { This property holds a reference to the TextEdit's font property. */ font.pixelSize: Theme.primaryTextFontSize - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family /*! \qmlproperty alias StatusInput::multiline This property indicates whether the StatusBaseInput allows multiline text. Default value is false. diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml b/ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml index e557e3c05a7..58704b5dced 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml @@ -19,7 +19,7 @@ ItemDelegate { icon.width: 16 icon.height: 16 - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.pixelSize: Theme.primaryTextFontSize contentItem: RowLayout { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml index f5e72b411c2..9f8079e3b3d 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml @@ -22,7 +22,7 @@ RadioButton { } opacity: enabled ? 1.0 : Theme.disabledOpacity - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.pixelSize: Theme.primaryTextFontSize indicator: Rectangle { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseField.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseField.qml index 05e3c7fb15f..4342fbaad76 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseField.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseField.qml @@ -20,7 +20,7 @@ TextField { selectedTextColor: color focus: !Utils.isMobile font.pixelSize: Theme.primaryTextFontSize - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1 inputMethodHints: Qt.ImhSensitiveData | Qt.ImhNoPredictiveText | @@ -44,7 +44,7 @@ TextField { anchors.rightMargin: root.width - root.leftPadding text: "" + root.displayIndex - font.family: Theme.monoFont.name + font.family: Fonts.monoFont.family horizontalAlignment: Qt.AlignHCenter verticalAlignment: Qt.AlignVCenter diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml index 0e11d27b62a..a23f9864b7a 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml @@ -138,7 +138,7 @@ Item { leftPadding: text.length === 1 ? 10 : 6 rightPadding: 4 text: root.leftComponentText - font.family: Theme.monoFont.name + font.family: Fonts.monoFont.family horizontalAlignment: Qt.AlignHCenter color: root.isError ? Theme.palette.dangerColor1 : seedWordInput.input.edit.activeFocus ? Theme.palette.primaryColor1 diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml index ac24ed88057..fba9a43754a 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml @@ -71,7 +71,7 @@ Item { selectedTextColor: color focus: !Utils.isMobile // Do not focus on mobile devices font.pixelSize: Theme.primaryTextFontSize - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family color: Theme.palette.directColor1 textFormat: Text.RichText onCursorRectangleChanged: Utils.ensureVisible(flick, cursorRectangle) diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml index aa7a7549e71..5cca8cf814e 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml @@ -10,7 +10,7 @@ Switch { property color textColor: Theme.palette.directColor1 - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.pixelSize: Theme.primaryTextFontSize background: null diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTabButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTabButton.qml index e5517be005e..f3c1ca1a05d 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusTabButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusTabButton.qml @@ -31,7 +31,7 @@ TabButton { background: null - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.weight: Font.Medium font.pixelSize: Theme.primaryTextFontSize diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml index cdfcc4646a9..41b9515cc4c 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml @@ -74,7 +74,7 @@ Control { implicitHeight: 30 horizontalPadding: d.tagMargins font.pixelSize: Theme.primaryTextFontSize - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family background: Rectangle { color: d.getTagColor(root.isReadonly) diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml index f334cfda2b4..d70f72c464f 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml @@ -67,7 +67,7 @@ TextArea { placeholderTextColor: root.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor9 font { - family: Theme.baseFont.name + family: Fonts.baseFont.family pixelSize: Theme.primaryTextFontSize } diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml index 804a90eebc3..48682ff0544 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml @@ -11,7 +11,7 @@ TextField { id: root Accessible.name: Utils.formatAccessibleName(placeholderText, objectName) - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.pixelSize: Theme.primaryTextFontSize color: readOnly ? Theme.palette.baseColor1 : Theme.palette.directColor1 selectByMouse: true diff --git a/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml b/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml index 3660e4b6c76..54f3331a847 100644 --- a/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml +++ b/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml @@ -26,7 +26,7 @@ import StatusQ.Core.Theme */ Text { - font.family: Theme.baseFont.name + font.family: Fonts.baseFont.family font.pixelSize: Theme.primaryTextFontSize color: Theme.palette.directColor1 linkColor: hoveredLink ? Qt.lighter(Theme.palette.primaryColor1) diff --git a/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml b/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml index 474246934f8..4011147083a 100644 --- a/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml +++ b/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml @@ -203,7 +203,7 @@ QtObject { return `` + @@ -292,13 +292,6 @@ QtObject { return isMobileDevice ? "mobile" : "desktop" } - function getYinYangColor(color) { - if (color.toString().toUpperCase() === Theme.palette.customisationColors.yinYang.toString().toUpperCase()) { - return Theme.palette.name === "light" ? "#FFFFFF" : "#09101C" - } - return "" - } - function stripHttpsAndwwwFromUrl(text) { return text.replace(/http(s)?(:)?(\/\/)?|(\/\/)?(www\.)?(\/)/gim, '') } diff --git a/ui/imports/shared/status/StatusChatInputReplyArea.qml b/ui/imports/shared/status/StatusChatInputReplyArea.qml index 7053c2ba191..51db061463c 100644 --- a/ui/imports/shared/status/StatusChatInputReplyArea.qml +++ b/ui/imports/shared/status/StatusChatInputReplyArea.qml @@ -67,7 +67,8 @@ Rectangle { StyledText { id: replyText - text: StatusQUtils.Utils.getMessageWithStyle(StatusQUtils.Emoji.parse(StatusQUtils.Utils.linkifyAndXSS(message)), false) + text: StatusQUtils.Utils.getMessageWithStyle( + root.Theme.palette, StatusQUtils.Emoji.parse(StatusQUtils.Utils.linkifyAndXSS(message)), false) anchors.fill: parent elide: Text.ElideRight font.pixelSize: Theme.additionalTextSize From a4dc7fbce7da99b2d9a92340401ba9ccf566bb26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Mon, 1 Dec 2025 14:59:41 +0100 Subject: [PATCH 22/32] Theme: QTBUG-142248 workaround added --- ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml | 5 +++++ .../Communities/controls/ExtendedDropdownContent.qml | 12 ++++++++++++ .../Wallet/controls/NetworkSelectItemDelegate.qml | 2 +- 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml b/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml index b222c307d9f..741fe55d273 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml @@ -143,6 +143,11 @@ Item { popup: StatusDropdown { id: dropdown + // workaround for QTBUG-142248 + Theme.style: root.Theme.style + Theme.padding: root.Theme.padding + Theme.fontSizeOffset: root.Theme.fontSizeOffset + directParent: comboBox closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent relativeY: comboBox.height + 4 diff --git a/ui/app/AppLayouts/Communities/controls/ExtendedDropdownContent.qml b/ui/app/AppLayouts/Communities/controls/ExtendedDropdownContent.qml index 3063212bf05..78e3b00ff48 100644 --- a/ui/app/AppLayouts/Communities/controls/ExtendedDropdownContent.qml +++ b/ui/app/AppLayouts/Communities/controls/ExtendedDropdownContent.qml @@ -498,6 +498,12 @@ Item { ListDropdownContent { id: assetDelegate + + // workaround for QTBUG-142248 + Theme.style: root.Theme.style + Theme.padding: root.Theme.padding + Theme.fontSizeOffset: root.Theme.fontSizeOffset + availableData: d.availableData noDataText: root.noDataText areHeaderButtonsVisible: root.state === d.depth1_ListState @@ -543,6 +549,12 @@ Item { ListDropdownContent { id: collectibleDelegate + + // workaround for QTBUG-142248 + Theme.style: root.Theme.style + Theme.padding: root.Theme.padding + Theme.fontSizeOffset: root.Theme.fontSizeOffset + availableData: d.availableData noDataText: root.noDataText areHeaderButtonsVisible: root.state === d.depth1_ListState diff --git a/ui/app/AppLayouts/Wallet/controls/NetworkSelectItemDelegate.qml b/ui/app/AppLayouts/Wallet/controls/NetworkSelectItemDelegate.qml index c63bb114003..5e448230b4a 100644 --- a/ui/app/AppLayouts/Wallet/controls/NetworkSelectItemDelegate.qml +++ b/ui/app/AppLayouts/Wallet/controls/NetworkSelectItemDelegate.qml @@ -51,7 +51,7 @@ StatusListItem { Binding on bgColor { when: highlighted && !root.sensor.containsMouse - value: root.interactive ? Theme.palette.baseColor4 : Theme.palette.primaryColor3 + value: root.interactive ? root.Theme.palette.baseColor4 : root.Theme.palette.primaryColor3 restoreMode: Binding.RestoreBindingOrValue } From 7bd736c4a6d175ca6eff0ed1a6829732f240c270 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Mon, 1 Dec 2025 23:30:47 +0100 Subject: [PATCH 23/32] Theme: theme usage in Shape and other non-Item components fixed --- .../Components/StatusCommunityCard.qml | 10 +- .../StatusContactVerificationIcons.qml | 11 +- .../src/StatusQ/Components/StatusListItem.qml | 10 +- .../statusMessage/StatusMessageReply.qml | 7 +- .../Communities/popups/InDropdown.qml | 2 +- .../controls/WalletKeyPairDelegate.qml | 6 +- .../Wallet/panels/SwapInputPanel.qml | 6 +- ui/imports/shared/controls/ShapeRectangle.qml | 109 +++++++++--------- 8 files changed, 86 insertions(+), 75 deletions(-) diff --git a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml index 97f6069b0e5..3059ed33247 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml @@ -181,10 +181,12 @@ Rectangle { readonly property int bannerRadius: (root.cardSize === StatusCommunityCard.Size.Big) ? 20 : 8 readonly property int bannerRadiusHovered: (root.cardSize === StatusCommunityCard.Size.Big) ? 30 : 16 readonly property int cardRadius: (root.cardSize === StatusCommunityCard.Size.Big) ? 16 : 8 - readonly property color cardColor: Theme.palette.name === "light" ? Theme.palette.indirectColor1 : Theme.palette.baseColor2 - readonly property color fontColor: Theme.palette.directColor1 - readonly property color loadingColor1: Theme.palette.baseColor5 - readonly property color loadingColor2: Theme.palette.baseColor4 + readonly property color cardColor: root.Theme.palette.name === "light" + ? root.Theme.palette.indirectColor1 + : root.Theme.palette.baseColor2 + readonly property color fontColor: root.Theme.palette.directColor1 + readonly property color loadingColor1: root.Theme.palette.baseColor5 + readonly property color loadingColor2: root.Theme.palette.baseColor4 readonly property int titleFontWeight: (root.cardSize === StatusCommunityCard.Size.Big) ? Font.Bold : Font.Medium function numberFormat(number) { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusContactVerificationIcons.qml b/ui/StatusQ/src/StatusQ/Components/StatusContactVerificationIcons.qml index ef04cc9a89a..19347cef5a9 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusContactVerificationIcons.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusContactVerificationIcons.qml @@ -14,13 +14,13 @@ Row { property StatusAssetSettings mutualConnectionIcon: StatusAssetSettings { name: root.tiny ? "tiny/tiny-contact" : "tiny/contact" - color: Theme.palette.indirectColor1 + color: root.Theme.palette.indirectColor1 width: Math.min(bgWidth, dummyImage.width) height: Math.min(bgHeight, dummyImage.height) bgWidth: root.tiny ? 10 : 16.5 bgHeight: root.tiny ? 10 : 16.5 bgRadius: bgWidth / 2 - bgColor: Theme.palette.primaryColor1 + bgColor: root.Theme.palette.primaryColor1 // Only used to get implicit width and height from the actual image property Image dummyImage: Image { source: mutualConnectionIcon.name ? Qt.resolvedUrl("../../assets/img/icons/" + mutualConnectionIcon.name + ".svg"): "" @@ -33,13 +33,14 @@ Row { // None and Untrustworthy types, same aspect (Icon will not be visible in case of None type): name: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? root.tiny ? "tiny/tiny-checkmark" : "tiny/checkmark" : root.tiny ? "tiny/tiny-exclamation" : "tiny/exclamation" - color: Theme.palette.indirectColor1 + color: root.Theme.palette.indirectColor1 width: Math.min(bgWidth, dummyImage.width) height: Math.min(bgHeight, dummyImage.height) bgWidth: root.tiny ? 10 : 16 bgHeight: root.tiny ? 10 : 16 bgRadius: bgWidth / 2 - bgColor: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.successColor1 : Theme.palette.dangerColor1 + bgColor: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? root.Theme.palette.successColor1 + : root.Theme.palette.dangerColor1 // Only used to get implicit width and height from the actual image property Image dummyImage: Image { source: trustContactIcon.name ? Qt.resolvedUrl("../../assets/img/icons/" + trustContactIcon.name + ".svg"): "" @@ -50,7 +51,7 @@ Row { property StatusAssetSettings blockedContactIcon: StatusAssetSettings { name: root.isBlocked ? "cancel" : "" - color: Theme.palette.dangerColor1 + color: root.Theme.palette.dangerColor1 width: Math.min(bgWidth, dummyImage.width) height: Math.min(bgHeight, dummyImage.height) bgWidth: root.tiny ? 10 : 16 diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml index 64578ae30b8..c67e6dc4ee1 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml @@ -50,13 +50,13 @@ Rectangle { charactersLen: 1 color: { if (!root.enabled) - return Theme.palette.baseColor1 + return root.Theme.palette.baseColor1 if (isLetterIdenticon) return bgColor if (type === StatusListItem.Type.Danger) - return Theme.palette.dangerColor1 + return root.Theme.palette.dangerColor1 - return Theme.palette.primaryColor1 + return root.Theme.palette.primaryColor1 } bgWidth: 40 bgHeight: 40 @@ -65,10 +65,10 @@ Rectangle { if (sensor.containsMouse) { return type === StatusListItem.Type.Secondary || type === StatusListItem.Type.Danger ? "transparent" : - Theme.palette.primaryColor3 + root.Theme.palette.primaryColor3 } return type === StatusListItem.Type.Danger ? - Theme.palette.dangerColor3 : Theme.palette.primaryColor3 + root.Theme.palette.dangerColor3 : root.Theme.palette.primaryColor3 } imgIsIdenticon: false } diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml index 49f811650d0..d7884089687 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml +++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml @@ -37,7 +37,12 @@ Item { antialiasing: true ShapePath { - strokeColor: Qt.hsla(Theme.palette.baseColor1.hslHue, Theme.palette.baseColor1.hslSaturation, Theme.palette.baseColor1.hslLightness, 0.4) + strokeColor: { + const base = root.Theme.palette.baseColor1 + return Qt.hsla(base.hslHue, + base.hslSaturation, + base.hslLightness, 0.4) + } strokeWidth: 3 fillColor: "transparent" capStyle: ShapePath.RoundCap diff --git a/ui/app/AppLayouts/Communities/popups/InDropdown.qml b/ui/app/AppLayouts/Communities/popups/InDropdown.qml index b9bac98271b..85a2dc6a35c 100644 --- a/ui/app/AppLayouts/Communities/popups/InDropdown.qml +++ b/ui/app/AppLayouts/Communities/popups/InDropdown.qml @@ -146,7 +146,7 @@ StatusDropdown { } function resolveColor(color, colorId) { - return !!color ? color : Theme.palette.userCustomizationColors[colorId] + return !!color ? color : root.Theme.palette.userCustomizationColors[colorId] } } diff --git a/ui/app/AppLayouts/Profile/controls/WalletKeyPairDelegate.qml b/ui/app/AppLayouts/Profile/controls/WalletKeyPairDelegate.qml index b563fc023ba..d496439e26c 100644 --- a/ui/app/AppLayouts/Profile/controls/WalletKeyPairDelegate.qml +++ b/ui/app/AppLayouts/Profile/controls/WalletKeyPairDelegate.qml @@ -53,11 +53,11 @@ Rectangle { statusListItemSubTitle.color: Utils.getKeypairLocationColor(root.keyPair) color: Theme.palette.transparent asset { - width: !!root.keyPair && keyPair.icon? Theme.bigPadding : 40 - height: !!root.keyPair && keyPair.icon? Theme.bigPadding : 40 + width: !!root.keyPair && keyPair.icon? root.Theme.bigPadding : 40 + height: !!root.keyPair && keyPair.icon? root.Theme.bigPadding : 40 name: !!root.keyPair? !!root.keyPair.image? root.keyPair.image : root.keyPair.icon : "" isImage: !!root.keyPair && !!keyPair.image - color: d.isProfileKeypair ? Utils.colorForPubkey(root.userProfilePublicKey) : Theme.palette.primaryColor1 + color: d.isProfileKeypair ? Utils.colorForPubkey(root.userProfilePublicKey) : root.Theme.palette.primaryColor1 letterSize: Math.max(4, asset.width / 2.4) charactersLen: 2 isLetterIdenticon: !!root.keyPair && !keyPair.icon && !asset.name.toString() diff --git a/ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml b/ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml index 757dee72aeb..143cbe8a194 100644 --- a/ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml +++ b/ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml @@ -177,7 +177,7 @@ Control { background: Shape { id: shape - property int radius: Theme.radius + property int radius: root.Theme.radius property int leftTopRadius: radius property int rightTopRadius: radius property int leftBottomRadius: radius @@ -189,8 +189,8 @@ Control { ShapePath { id: path - fillColor: Theme.palette.indirectColor3 - strokeColor: amountToSendInput.cursorVisible ? Theme.palette.directColor7 : Theme.palette.directColor8 + fillColor: root.Theme.palette.indirectColor3 + strokeColor: amountToSendInput.cursorVisible ? root.Theme.palette.directColor7 : root.Theme.palette.directColor8 strokeWidth: 1 capStyle: ShapePath.RoundCap diff --git a/ui/imports/shared/controls/ShapeRectangle.qml b/ui/imports/shared/controls/ShapeRectangle.qml index 12abd168898..8d16e5ebea4 100644 --- a/ui/imports/shared/controls/ShapeRectangle.qml +++ b/ui/imports/shared/controls/ShapeRectangle.qml @@ -27,7 +27,7 @@ import utils \sa Shape \sa ShapePath */ -Shape { +Item { id: root property string icon @@ -46,6 +46,61 @@ Shape { implicitWidth: 448 implicitHeight: 44 + Shape { + anchors.fill: parent + ShapePath { + id: path + fillColor: "transparent" + strokeColor: root.Theme.palette.baseColor2 + strokeWidth: 1 + strokeStyle: ShapePath.DashLine + dashPattern: [4, 4] + + startX: root.leftTopRadius + startY: 0 + PathLine { + x: root.width - root.rightTopRadius + y: 0 + } + PathArc { + x: root.width + y: root.rightTopRadius + radiusX: root.rightTopRadius + radiusY: root.rightTopRadius + } + PathLine { + x: root.width + y: root.height - root.rightBottomRadius + } + PathArc { + x:root.width - root.rightBottomRadius + y: root.height + radiusX: root.rightBottomRadius + radiusY: root.rightBottomRadius + } + PathLine { + x: root.leftBottomRadius + y: root.height + } + PathArc { + x:0 + y: root.height - root.leftBottomRadius + radiusX: root.leftBottomRadius + radiusY: root.leftBottomRadius + } + PathLine { + x: 0 + y: root.leftTopRadius + } + PathArc { + x:root.leftTopRadius + y: 0 + radiusX: root.leftTopRadius + radiusY: root.leftTopRadius + } + } + } + RowLayout { spacing: 4 anchors.centerIn: parent @@ -68,56 +123,4 @@ Shape { visible: !!text } } - - ShapePath { - id: path - fillColor: "transparent" - strokeColor: Theme.palette.baseColor2 - strokeWidth: 1 - strokeStyle: ShapePath.DashLine - dashPattern: [4, 4] - - startX: root.leftTopRadius - startY: 0 - PathLine { - x: root.width - root.rightTopRadius - y: 0 - } - PathArc { - x: root.width - y: root.rightTopRadius - radiusX: root.rightTopRadius - radiusY: root.rightTopRadius - } - PathLine { - x: root.width - y: root.height - root.rightBottomRadius - } - PathArc { - x:root.width - root.rightBottomRadius - y: root.height - radiusX: root.rightBottomRadius - radiusY: root.rightBottomRadius - } - PathLine { - x: root.leftBottomRadius - y: root.height - } - PathArc { - x:0 - y: root.height - root.leftBottomRadius - radiusX: root.leftBottomRadius - radiusY: root.leftBottomRadius - } - PathLine { - x: 0 - y: root.leftTopRadius - } - PathArc { - x:root.leftTopRadius - y: 0 - radiusX: root.leftTopRadius - radiusY: root.leftTopRadius - } - } } From 9be42256d338a6566595130b1984e7daea1d3f29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Tue, 2 Dec 2025 13:32:47 +0100 Subject: [PATCH 24/32] Theme: removed direct access to theme from Utils singleton --- storybook/pages/AccountViewPage.qml | 2 +- .../pages/SavedAddressActivityPopupPage.qml | 2 +- storybook/pages/SendSignModalPage.qml | 4 +- storybook/pages/StatusMessagePage.qml | 3 +- storybook/pages/SwapApproveCapModalPage.qml | 2 +- storybook/pages/SwapSignModalPage.qml | 2 +- .../qmlTests/tests/tst_SendSignModal.qml | 4 +- .../qmlTests/tests/tst_SimpleSendModal.qml | 10 +- .../qmlTests/tests/tst_StatusMessage.qml | 2 +- .../tests/tst_SwapApproveCapModal.qml | 2 +- storybook/qmlTests/tests/tst_SwapModal.qml | 3 +- .../qmlTests/tests/tst_SwapSignModal.qml | 2 +- .../StatusQ/Components/StatusRoundIcon.qml | 16 +-- .../StatusQ/Controls/StatusPasswordInput.qml | 4 +- .../src/StatusQ/Core/Theme/ThemeUtils.qml | 1 - ui/app/AppLayouts/Browser/BrowserLayout.qml | 2 +- .../Chat/panels/SuggestionBoxPanel.qml | 30 ++--- .../AppLayouts/Chat/panels/UserListPanel.qml | 2 +- .../Chat/views/ChatHeaderContentView.qml | 2 +- .../controls/TokenHolderListItem.qml | 2 +- .../Communities/panels/IntroPanel.qml | 4 +- .../AppLayouts/HomePage/HomePageAdaptor.qml | 10 +- .../HomePage/delegates/HomePageGridItem.qml | 2 +- .../controls/LoginUserSelectorDelegate.qml | 2 +- .../Onboarding/pages/KeycardIntroPage.qml | 8 +- .../controls/WalletAccountDelegate.qml | 2 +- .../WalletAccountDetailsKeypairItem.qml | 4 +- .../controls/WalletKeyPairDelegate.qml | 4 +- .../panels/ProfileShowcaseAccountsPanel.qml | 2 +- .../popups/ExemptionNotificationsModal.qml | 2 +- .../Profile/popups/RenameAccountModal.qml | 6 +- .../Profile/popups/RenameKeypairPopup.qml | 2 +- .../Profile/stores/ProfileSectionStore.qml | 4 + .../AppLayouts/Profile/stores/WalletStore.qml | 9 +- .../AppLayouts/Profile/views/EnsListView.qml | 2 +- .../Profile/views/NotificationsView.qml | 2 +- .../Profile/views/SettingsContentBase.qml | 2 +- .../Profile/views/wallet/AccountOrderView.qml | 2 +- .../Profile/views/wallet/AccountView.qml | 6 +- .../Wallet/adaptors/SignSendAdaptor.qml | 5 +- .../Wallet/controls/AccountHeaderGradient.qml | 4 +- .../Wallet/controls/RecipientViewDelegate.qml | 2 +- .../controls/SavedAddressesDelegate.qml | 2 +- .../popups/AddEditSavedAddressPopup.qml | 14 +-- .../AppLayouts/Wallet/popups/ReceiveModal.qml | 2 +- .../Wallet/popups/RemoveSavedAddressPopup.qml | 2 +- .../Wallet/popups/dapps/DAppsWorkflow.qml | 2 +- .../Wallet/popups/swap/SwapModal.qml | 4 +- ui/app/AppLayouts/Wallet/stores/RootStore.qml | 10 +- .../AppLayouts/Wallet/views/LeftTabView.qml | 4 +- .../AppLayouts/Wallet/views/RightTabView.qml | 2 +- ui/app/AppLayouts/stores/RootStore.qml | 2 + ui/app/mainui/AppMain.qml | 10 ++ ui/app/mainui/Handlers/HandlersManager.qml | 2 +- ui/app/mainui/Handlers/SendModalHandler.qml | 4 +- .../shared/controls/AccountSelector.qml | 2 +- .../shared/controls/AccountSelectorHeader.qml | 6 +- ui/imports/shared/controls/ErrorTag.qml | 16 +-- ui/imports/shared/controls/ProfileButton.qml | 4 +- .../shared/controls/chat/LinkPreviewCard.qml | 2 +- .../shared/controls/chat/ProfileHeader.qml | 2 +- .../delegates/ContactListItemDelegate.qml | 2 +- .../shared/popups/CommonContactDialog.qml | 2 +- .../shared/popups/IntroduceYourselfPopup.qml | 4 +- .../shared/popups/MetricsEnablePopup.qml | 2 +- .../popups/addaccount/panels/SelectOrigin.qml | 6 +- .../shared/popups/addaccount/states/Main.qml | 6 +- .../popups/keycard/helpers/KeyPairItem.qml | 4 +- .../keycard/helpers/KeyPairUnknownItem.qml | 2 +- .../popups/keycard/helpers/KeycardItem.qml | 4 +- .../popups/keycard/states/EnterName.qml | 2 +- .../popups/keycard/states/ManageAccounts.qml | 6 +- .../send/panels/RecipientSelectorPanel.qml | 2 +- .../popups/send/views/RecipientView.qml | 2 +- .../shared/status/StatusSearchListPopup.qml | 2 +- ui/imports/shared/views/ExistingContacts.qml | 2 +- ui/imports/shared/views/HistoryBetaTag.qml | 3 +- ui/imports/shared/views/PickedContacts.qml | 2 +- ui/imports/shared/views/ProfileDialogView.qml | 2 +- ui/imports/shared/views/SyncingDeviceView.qml | 2 +- .../views/chat/ChannelIdentifierView.qml | 2 +- .../profile/ProfileShowcaseAccountsView.qml | 2 +- .../views/profile/ShareProfileDialog.qml | 2 +- ui/imports/utils/Utils.qml | 116 +++++++++--------- 84 files changed, 243 insertions(+), 211 deletions(-) diff --git a/storybook/pages/AccountViewPage.qml b/storybook/pages/AccountViewPage.qml index 39a51723880..814cd7f142e 100644 --- a/storybook/pages/AccountViewPage.qml +++ b/storybook/pages/AccountViewPage.qml @@ -29,7 +29,7 @@ SplitView { property var dummyOverview: updateDummyView(StatusColors.colors['black']) function updateDummyView(color) { - const clr = Utils.getIdForColor(color) + const clr = Utils.getIdForColor(root.Theme.palette, color) dummyOverview = ({ name: "helloworld", address: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421", diff --git a/storybook/pages/SavedAddressActivityPopupPage.qml b/storybook/pages/SavedAddressActivityPopupPage.qml index 474de1790b2..ed95c3205c6 100644 --- a/storybook/pages/SavedAddressActivityPopupPage.qml +++ b/storybook/pages/SavedAddressActivityPopupPage.qml @@ -33,7 +33,7 @@ SplitView { name: "Noelia Santos", address: "0xe5bd6c877cd566af2a58990ad0ed4b73fb0c6752", ens: "", - colorId: Utils.getIdForColor(Theme.palette.customisationColors.blue), + colorId: Utils.getIdForColor(Theme.palette, Theme.palette.customisationColors.blue), mixedcaseAddress: "0xe5bD6C877cd566Af2a58990Ad0eD4B73fb0c6752", }) } diff --git a/storybook/pages/SendSignModalPage.qml b/storybook/pages/SendSignModalPage.qml index f4a0c7099a9..1374d27f7a6 100644 --- a/storybook/pages/SendSignModalPage.qml +++ b/storybook/pages/SendSignModalPage.qml @@ -137,13 +137,13 @@ SplitView { accountName: priv.selectedAccount.name accountAddress: priv.selectedAccount.address accountEmoji: priv.selectedAccount.emoji - accountColor: Utils.getColorForId(priv.selectedAccount.colorId) + accountColor: Utils.getColorForId(Theme.palette, priv.selectedAccount.colorId) recipientAddress: priv.selectedRecipient.address recipientName: priv.selectedRecipient.name recipientEns: priv.selectedRecipient.ens recipientEmoji: priv.selectedRecipient.emoji - recipientWalletColor: Utils.getColorForId(priv.selectedRecipient.colorId) + recipientWalletColor: Utils.getColorForId(Theme.palette, priv.selectedRecipient.colorId) networkShortName: priv.selectedNetwork.shortName networkName: priv.selectedNetwork.chainName diff --git a/storybook/pages/StatusMessagePage.qml b/storybook/pages/StatusMessagePage.qml index 1768634a7f8..3305e1315d5 100644 --- a/storybook/pages/StatusMessagePage.qml +++ b/storybook/pages/StatusMessagePage.qml @@ -265,7 +265,8 @@ SplitView { sender.isEnsVerified: isEnsVerified sender.profileImage { name: model.profileImage || "" - colorId: index % Theme.palette.userCustomizationColors.length + color: Theme.palette.userCustomizationColors[ + index % Theme.palette.userCustomizationColors.length] } album: model.contentType === StatusMessage.ContentType.Image ? d.exampleAlbum : [] albumCount: model.contentType === StatusMessage.ContentType.Image ? d.exampleAlbum.length : 0 diff --git a/storybook/pages/SwapApproveCapModalPage.qml b/storybook/pages/SwapApproveCapModalPage.qml index 4d42fc64c4c..03978bbc019 100644 --- a/storybook/pages/SwapApproveCapModalPage.qml +++ b/storybook/pages/SwapApproveCapModalPage.qml @@ -87,7 +87,7 @@ SplitView { accountName: priv.selectedAccount.name accountAddress: priv.selectedAccount.address accountEmoji: priv.selectedAccount.emoji - accountColor: Utils.getColorForId(priv.selectedAccount.colorId) + accountColor: Utils.getColorForId(Theme.palette, priv.selectedAccount.colorId) accountBalanceFormatted: formatBigNumber(120.55489) networkShortName: priv.selectedNetwork.shortName diff --git a/storybook/pages/SwapSignModalPage.qml b/storybook/pages/SwapSignModalPage.qml index 36baf5cbb61..4e23e78db04 100644 --- a/storybook/pages/SwapSignModalPage.qml +++ b/storybook/pages/SwapSignModalPage.qml @@ -91,7 +91,7 @@ SplitView { accountName: priv.selectedAccount.name accountAddress: priv.selectedAccount.address accountEmoji: priv.selectedAccount.emoji - accountColor: Utils.getColorForId(priv.selectedAccount.colorId) + accountColor: Utils.getColorForId(Theme.palette, priv.selectedAccount.colorId) networkShortName: priv.selectedNetwork.shortName networkName: priv.selectedNetwork.chainName diff --git a/storybook/qmlTests/tests/tst_SendSignModal.qml b/storybook/qmlTests/tests/tst_SendSignModal.qml index 2b521b261a4..1a4d8312c62 100644 --- a/storybook/qmlTests/tests/tst_SendSignModal.qml +++ b/storybook/qmlTests/tests/tst_SendSignModal.qml @@ -33,13 +33,13 @@ Item { accountName: "Hot wallet (generated)" accountAddress: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881" accountEmoji: "🚗" - accountColor: Utils.getColorForId(Constants.walletAccountColors.primary) + accountColor: Utils.getColorForId(Theme.palette, Constants.walletAccountColors.primary) recipientAddress: "0xA858DDc0445d8131daC4d1DE01f834ffcbA52Ef1" recipientName: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8882" recipientEmoji: "😋" recipientEns: "" - recipientWalletColor: Utils.getColorForId(Constants.walletAccountColors.secondary) + recipientWalletColor: Utils.getColorForId(Theme.palette, Constants.walletAccountColors.secondary) networkShortName: Constants.networkShortChainNames.mainnet networkName: "Mainnet" diff --git a/storybook/qmlTests/tests/tst_SimpleSendModal.qml b/storybook/qmlTests/tests/tst_SimpleSendModal.qml index e8d35c6fde2..4cc99b2589e 100644 --- a/storybook/qmlTests/tests/tst_SimpleSendModal.qml +++ b/storybook/qmlTests/tests/tst_SimpleSendModal.qml @@ -496,9 +496,10 @@ Item { const accountSelectorTextContent = findChild(accountSelector, "textContent") verify(!!accountSelectorTextContent) - compare(accountSelectorHeaderBackground.color, Utils.getColorForId(defaultAccountItem.colorId)) + const palette = controlUnderTest.Theme.palette + compare(accountSelectorHeaderBackground.color, Utils.getColorForId(palette, defaultAccountItem.colorId)) compare(accountSelectorAssetContent.asset.emoji, defaultAccountItem.emoji) - compare(accountSelectorAssetContent.asset.color, Utils.getColorForId(defaultAccountItem.colorId)) + compare(accountSelectorAssetContent.asset.color, Utils.getColorForId(palette, defaultAccountItem.colorId)) compare(accountSelectorTextContent.text, defaultAccountItem.name) // Sticky Header should not be visible when not scrolling @@ -587,9 +588,10 @@ Item { const accountSelectorTextContent = findChild(accountSelector, "textContent") verify(!!accountSelectorTextContent) - compare(accountSelectorHeaderBackground.color, Utils.getColorForId(selectedAccount.colorId)) + const palette = controlUnderTest.Theme.palette + compare(accountSelectorHeaderBackground.color, Utils.getColorForId(palette, selectedAccount.colorId)) compare(accountSelectorAssetContent.asset.emoji, selectedAccount.emoji) - compare(accountSelectorAssetContent.asset.color, Utils.getColorForId(selectedAccount.colorId)) + compare(accountSelectorAssetContent.asset.color, Utils.getColorForId(palette, selectedAccount.colorId)) compare(accountSelectorTextContent.text, selectedAccount.name) // Sticky Header should not be visible when not scrolling diff --git a/storybook/qmlTests/tests/tst_StatusMessage.qml b/storybook/qmlTests/tests/tst_StatusMessage.qml index 8a6f018bf42..1c4aeb8b655 100644 --- a/storybook/qmlTests/tests/tst_StatusMessage.qml +++ b/storybook/qmlTests/tests/tst_StatusMessage.qml @@ -23,7 +23,7 @@ Item { sender.isEnsVerified: false sender.profileImage { name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=" - colorId: 1 + color: "red" } } linkAddressAndEnsName: true diff --git a/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml b/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml index 516b8dbf679..38800ad0e27 100644 --- a/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml +++ b/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml @@ -31,7 +31,7 @@ Item { accountName: "Hot wallet (generated)" accountAddress: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881" accountEmoji: "🚗" - accountColor: Utils.getColorForId(Constants.walletAccountColors.primary) + accountColor: Utils.getColorForId(Theme.palette, Constants.walletAccountColors.primary) accountBalanceFormatted: "120.55489 DAI" networkShortName: Constants.networkShortChainNames.mainnet diff --git a/storybook/qmlTests/tests/tst_SwapModal.qml b/storybook/qmlTests/tests/tst_SwapModal.qml index 311524b7fd2..6ae0ae0c6e1 100644 --- a/storybook/qmlTests/tests/tst_SwapModal.qml +++ b/storybook/qmlTests/tests/tst_SwapModal.qml @@ -177,7 +177,8 @@ Item { const floatingHeaderBackground = findChild(controlUnderTest, "headerBackground") verify(!!floatingHeaderBackground) - compare(floatingHeaderBackground.color.toString().toUpperCase(), Utils.getColorForId(accountToTest.colorId).toString().toUpperCase()) + compare(floatingHeaderBackground.color.toString().toUpperCase(), + Utils.getColorForId(controlUnderTest.Theme.palette, accountToTest.colorId).toString().toUpperCase()) const headerContentItemText = findChild(controlUnderTest, "textContent") verify(!!headerContentItemText) diff --git a/storybook/qmlTests/tests/tst_SwapSignModal.qml b/storybook/qmlTests/tests/tst_SwapSignModal.qml index 277a33dce72..9f764695143 100644 --- a/storybook/qmlTests/tests/tst_SwapSignModal.qml +++ b/storybook/qmlTests/tests/tst_SwapSignModal.qml @@ -35,7 +35,7 @@ Item { accountName: "Hot wallet (generated)" accountAddress: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881" accountEmoji: "🚗" - accountColor: Utils.getColorForId(Constants.walletAccountColors.primary) + accountColor: Utils.getColorForId(Theme.palette, Constants.walletAccountColors.primary) networkShortName: Constants.networkShortChainNames.mainnet networkName: "Mainnet" diff --git a/ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml b/ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml index a56f4b8fc71..2ee837fc182 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusRoundIcon.qml @@ -3,16 +3,16 @@ import StatusQ.Core import StatusQ.Core.Theme Rectangle { - id: statusRoundedIcon + id: root property StatusAssetSettings asset: StatusAssetSettings { width: 24 height: 24 rotation: 0 - color: Theme.palette.primaryColor1 + color: root.Theme.palette.primaryColor1 bgWidth: 40 bgHeight: 40 - bgColor: Theme.palette.primaryColor3 + bgColor: root.Theme.palette.primaryColor3 bgRadius: bgWidth / 2 } @@ -27,11 +27,11 @@ Rectangle { id: statusIcon anchors.centerIn: parent - width: statusRoundedIcon.asset.width - height: statusRoundedIcon.asset.height + width: root.asset.width + height: root.asset.height - color: statusRoundedIcon.asset.color - icon: statusRoundedIcon.asset.name || statusRoundedIcon.asset.source - rotation: statusRoundedIcon.asset.rotation + color: root.asset.color + icon: root.asset.name || root.asset.source + rotation: root.asset.rotation } } diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusPasswordInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusPasswordInput.qml index 7fb83ba096c..4cf4927620d 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusPasswordInput.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusPasswordInput.qml @@ -31,8 +31,8 @@ StatusTextField { QtObject { id: d - readonly property int inputTextPadding: Theme.defaultPadding - readonly property int radius: Theme.defaultRadius + readonly property int inputTextPadding: root.Theme.defaultPadding + readonly property int radius: root.Theme.defaultPadding / 2 } leftPadding: d.inputTextPadding diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml index f4a35bcf024..f29bc65048d 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml @@ -2,7 +2,6 @@ pragma Singleton import QtQml import QtQuick -import QtQuick.Window import StatusQ.Core.Theme diff --git a/ui/app/AppLayouts/Browser/BrowserLayout.qml b/ui/app/AppLayouts/Browser/BrowserLayout.qml index ac31686e9ff..05a4f8333ea 100644 --- a/ui/app/AppLayouts/Browser/BrowserLayout.qml +++ b/ui/app/AppLayouts/Browser/BrowserLayout.qml @@ -221,7 +221,7 @@ StatusSectionLayout { currentTabIncognito: _internal.currentWebView?.profile.offTheRecord ?? false currentFavorite: _internal.currentWebView ? root.bookmarksStore.getCurrentFavorite(_internal.currentWebView.url) : null dappBrowserAccName: root.browserWalletStore.dappBrowserAccount.name - dappBrowserAccIcon: Utils.getColorForId(root.browserWalletStore.dappBrowserAccount.colorId) + dappBrowserAccIcon: Utils.getColorForId(Theme.palette, root.browserWalletStore.dappBrowserAccount.colorId) settingMenu: settingsMenu currentUrl: !!_internal.currentWebView ? _internal.currentWebView.url : "" isLoading: (!!_internal.currentWebView && _internal.currentWebView.loading) diff --git a/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml b/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml index 62082777322..f2ab4a82439 100644 --- a/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml +++ b/ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml @@ -32,7 +32,7 @@ import shared.panels import shared.controls.chat Rectangle { - id: container + id: root property var model property Item delegate @@ -65,7 +65,7 @@ Rectangle { } function selectCurrentItem() { - container.itemSelected(listView.model.get(listView.currentIndex), filterItem.lastAtPosition, filterItem.cursorPosition) + root.itemSelected(listView.model.get(listView.currentIndex), filterItem.lastAtPosition, filterItem.cursorPosition) } onVisibleChanged: { @@ -93,12 +93,12 @@ Rectangle { layer.enabled: true layer.effect: DropShadow { - width: container.width - height: container.height - x: container.x - y: container.y + 10 - visible: container.visible - source: container + width: root.width + height: root.height + x: root.x + y: root.y + 10 + visible: root.visible + source: root horizontalOffset: 0 verticalOffset: 2 radius: 10 @@ -108,8 +108,8 @@ Rectangle { SuggestionFilterPanel { id: filterItem - sourceModel: container.model - cursorPosition: container.cursorPosition + sourceModel: root.model + cursorPosition: root.cursorPosition } StatusListView { @@ -119,15 +119,15 @@ Rectangle { anchors.fill: parent anchors.margins: Theme.halfPadding Keys.priority: Keys.AfterItem - Keys.forwardTo: container.inputField + Keys.forwardTo: root.inputField Keys.onPressed: function(event) { if (event.key === Qt.Key_Escape) { - container.hide(); + root.hide(); } else if (event.key !== Qt.Key_Up && event.key !== Qt.Key_Down) { event.accepted = false; } } - model: container.suggestionsModel + model: root.suggestionsModel delegate: Rectangle { id: itemDelegate @@ -147,7 +147,7 @@ Rectangle { name: model.preferredDisplayName usesDefaultName: model.usesDefaultName - userColor: Utils.colorForColorId(model.colorId) + userColor: Utils.colorForColorId(root.Theme.palette, model.colorId) image: model.icon interactive: false } @@ -169,7 +169,7 @@ Rectangle { listView.currentIndex = index } onClicked: { - container.itemSelected(model, filterItem.lastAtPosition, filterItem.cursorPosition) + root.itemSelected(model, filterItem.lastAtPosition, filterItem.cursorPosition) } } } diff --git a/ui/app/AppLayouts/Chat/panels/UserListPanel.qml b/ui/app/AppLayouts/Chat/panels/UserListPanel.qml index 737c2a24b16..1e32157f10a 100644 --- a/ui/app/AppLayouts/Chat/panels/UserListPanel.qml +++ b/ui/app/AppLayouts/Chat/panels/UserListPanel.qml @@ -134,7 +134,7 @@ Item { isBlocked: model.isBlocked isOwner: model.memberRole === Constants.memberRole.owner icon.name: model.icon - icon.color: Utils.colorForColorId(model.colorId) + icon.color: Utils.colorForColorId(Theme.palette, model.colorId) status: model.onlineStatus onClicked: Global.openProfilePopup(model.pubKey) diff --git a/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml b/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml index 82fb054a5f4..7e5b8820e04 100644 --- a/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml +++ b/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml @@ -295,7 +295,7 @@ RowLayout { asset.isLetterIdenticon: chatContentModule && chatContentModule.chatDetails.icon === "" asset.color: chatContentModule? chatContentModule.chatDetails.type === Constants.chatType.oneToOne ? - Utils.colorForPubkey(chatContentModule.chatDetails.id) + Utils.colorForPubkey(Theme.palette, chatContentModule.chatDetails.id) : chatContentModule.chatDetails.color : "" asset.emoji: emojiIcon diff --git a/ui/app/AppLayouts/Communities/controls/TokenHolderListItem.qml b/ui/app/AppLayouts/Communities/controls/TokenHolderListItem.qml index 0e768ab79c8..3312b15931c 100644 --- a/ui/app/AppLayouts/Communities/controls/TokenHolderListItem.qml +++ b/ui/app/AppLayouts/Communities/controls/TokenHolderListItem.qml @@ -181,7 +181,7 @@ ItemDelegate { isOwner: root.memberRole === Constants.memberRole.owner status: root.onlineStatus icon.name: root.iconName - icon.color: Utils.colorForPubkey(root.pubKey) + icon.color: Utils.colorForPubkey(Theme.palette, root.pubKey) } } diff --git a/ui/app/AppLayouts/Communities/panels/IntroPanel.qml b/ui/app/AppLayouts/Communities/panels/IntroPanel.qml index 6d5bd2e2a72..aef3bebe64e 100644 --- a/ui/app/AppLayouts/Communities/panels/IntroPanel.qml +++ b/ui/app/AppLayouts/Communities/panels/IntroPanel.qml @@ -24,10 +24,10 @@ Control { id: d readonly property int rowChildSpacing: 10 - readonly property color rowIconColor: Theme.palette.primaryColor1 + readonly property color rowIconColor: root.Theme.palette.primaryColor1 readonly property string rowIconName: "checkmark-circle" readonly property int rowFontSize: 15 - readonly property color rowTextColor: Theme.palette.directColor1 + readonly property color rowTextColor: root.Theme.palette.directColor1 readonly property double rowTextLineHeight: 1.2 } diff --git a/ui/app/AppLayouts/HomePage/HomePageAdaptor.qml b/ui/app/AppLayouts/HomePage/HomePageAdaptor.qml index d5997ffcf71..e0b4a776936 100644 --- a/ui/app/AppLayouts/HomePage/HomePageAdaptor.qml +++ b/ui/app/AppLayouts/HomePage/HomePageAdaptor.qml @@ -232,7 +232,7 @@ QObject { readonly property string id: model.subsection readonly property string name: model.text readonly property string icon: model.icon - readonly property color color: Theme.palette.primaryColor1 + readonly property color color: root.Theme.palette.primaryColor1 readonly property bool hasNotification: model.badgeCount > 0 readonly property int notificationsCount: model.badgeCount @@ -260,7 +260,7 @@ QObject { readonly property string name: model.name readonly property string icon: model.icon || model.emoji readonly property string lastMessageText: model.lastMessageText - readonly property color color: model.color || Utils.colorForColorId(model.colorId) + readonly property color color: model.color || Utils.colorForColorId(root.Theme.palette, model.colorId) readonly property bool hasNotification: model.hasUnreadMessages || model.notificationsCount readonly property int notificationsCount: model.notificationsCount @@ -289,7 +289,7 @@ QObject { readonly property string name: model.name readonly property string icon: model.icon || model.emoji readonly property string lastMessageText: model.lastMessageText - readonly property color color: model.color || Utils.colorForColorId(model.colorId) + readonly property color color: model.color || Utils.colorForColorId(root.Theme.palette, model.colorId) } expectedRoles: ["sectionId", "chatId", "chatType", "name", "sectionName", "emoji", "icon", "color", "colorId", "lastMessageText"] @@ -305,7 +305,7 @@ QObject { readonly property string id: model.mixedcaseAddress readonly property string name: model.name readonly property string icon: model.emoji - readonly property color color: Utils.getColorForId(model.colorId ?? Constants.walletAccountColors.primary) + readonly property color color: Utils.getColorForId(root.Theme.palette, model.colorId ?? Constants.walletAccountColors.primary) readonly property bool hasNotification: false readonly property int notificationsCount: 0 @@ -325,7 +325,7 @@ QObject { readonly property string id: model.url readonly property string name: model.name || StringUtils.extractDomainFromLink(model.url) readonly property string icon: model.iconUrl || "dapp" - readonly property color color: Theme.palette.primaryColor1 + readonly property color color: root.Theme.palette.primaryColor1 readonly property url connectorBadge: model.connectorBadge } diff --git a/ui/app/AppLayouts/HomePage/delegates/HomePageGridItem.qml b/ui/app/AppLayouts/HomePage/delegates/HomePageGridItem.qml index c2cf79f5a9b..401d0ad68f2 100644 --- a/ui/app/AppLayouts/HomePage/delegates/HomePageGridItem.qml +++ b/ui/app/AppLayouts/HomePage/delegates/HomePageGridItem.qml @@ -106,7 +106,7 @@ AbstractButton { Layout.preferredWidth: root.icon.width Layout.preferredHeight: root.icon.height - color: mainBgRect.color + color: hovered ? Qt.lighter(Theme.palette.baseColor4, 1.5) : Theme.palette.baseColor4 radius: width/2 Loader { diff --git a/ui/app/AppLayouts/Onboarding/controls/LoginUserSelectorDelegate.qml b/ui/app/AppLayouts/Onboarding/controls/LoginUserSelectorDelegate.qml index f62a8cffa2b..de73d034dc3 100644 --- a/ui/app/AppLayouts/Onboarding/controls/LoginUserSelectorDelegate.qml +++ b/ui/app/AppLayouts/Onboarding/controls/LoginUserSelectorDelegate.qml @@ -57,7 +57,7 @@ ItemDelegate { // but it requires changing the DB which is probably not worth it usesDefaultName: !root.image image: root.image - userColor: Utils.colorForColorId(root.colorId) + userColor: Utils.colorForColorId(Theme.palette, root.colorId) imageHeight: Constants.onboarding.userImageHeight imageWidth: Constants.onboarding.userImageWidth } diff --git a/ui/app/AppLayouts/Onboarding/pages/KeycardIntroPage.qml b/ui/app/AppLayouts/Onboarding/pages/KeycardIntroPage.qml index 35c033563c2..ec3b8300ada 100644 --- a/ui/app/AppLayouts/Onboarding/pages/KeycardIntroPage.qml +++ b/ui/app/AppLayouts/Onboarding/pages/KeycardIntroPage.qml @@ -130,8 +130,8 @@ KeycardBasePage { title: qsTr("Insert your Keycard") infoText.text: qsTr("Get help via %1 🔗").arg(Utils.getStyledLink("https://keycard.tech", "https://keycard.tech/docs/", infoText.hoveredLink, - Theme.palette.baseColor1, - Theme.palette.primaryColor1)) + root.Theme.palette.baseColor1, + root.Theme.palette.primaryColor1)) image.source: Assets.png("onboarding/keycard/insert") } }, @@ -184,7 +184,7 @@ KeycardBasePage { when: root.keycardState === Onboarding.KeycardState.BlockedPIN PropertyChanges { target: root - title: "".arg(Theme.palette.dangerColor1) + qsTr("Keycard blocked") + "" + title: "".arg(root.Theme.palette.dangerColor1) + qsTr("Keycard blocked") + "" subtitle: qsTr("The Keycard you have inserted is blocked, you will need to unblock it or insert a different one") image.source: Assets.png("onboarding/keycard/error") } @@ -206,7 +206,7 @@ KeycardBasePage { when: root.keycardState === Onboarding.KeycardState.BlockedPUK PropertyChanges { target: root - title: "".arg(Theme.palette.dangerColor1) + qsTr("Keycard blocked") + "" + title: "".arg(root.Theme.palette.dangerColor1) + qsTr("Keycard blocked") + "" subtitle: qsTr("The Keycard you have inserted is blocked, you will need to unblock it, factory reset or insert a different one") image.source: Assets.png("onboarding/keycard/error") } diff --git a/ui/app/AppLayouts/Profile/controls/WalletAccountDelegate.qml b/ui/app/AppLayouts/Profile/controls/WalletAccountDelegate.qml index e5337b71a47..3e5ccdcd24c 100644 --- a/ui/app/AppLayouts/Profile/controls/WalletAccountDelegate.qml +++ b/ui/app/AppLayouts/Profile/controls/WalletAccountDelegate.qml @@ -20,7 +20,7 @@ StatusListItem { objectName: account.name title: account.name subTitle: WalletUtils.addressToDisplay(account.address, true, sensor.containsMouse) - asset.color: !!account.colorId ? Utils.getColorForId(account.colorId): "" + asset.color: !!account.colorId ? Utils.getColorForId(Theme.palette, account.colorId): "" asset.emoji: account.emoji asset.name: !account.emoji ? "filled-account": "" asset.letterSize: 14 diff --git a/ui/app/AppLayouts/Profile/controls/WalletAccountDetailsKeypairItem.qml b/ui/app/AppLayouts/Profile/controls/WalletAccountDetailsKeypairItem.qml index 90b5f2a023e..c3afb980daa 100644 --- a/ui/app/AppLayouts/Profile/controls/WalletAccountDetailsKeypairItem.qml +++ b/ui/app/AppLayouts/Profile/controls/WalletAccountDetailsKeypairItem.qml @@ -21,7 +21,7 @@ StatusListItem { height: !!root.keyPair && root.keyPair.icon? Theme.bigPadding : 40 name: !!root.keyPair? !!root.keyPair.image? root.keyPair.image : root.keyPair.icon : "" isImage: !!root.keyPair && !!root.keyPair.image - color: !!root.keyPair && root.keyPair.pairType === Constants.keypair.type.profile? Utils.colorForPubkey(root.userProfilePublicKey) : Theme.palette.primaryColor1 + color: !!root.keyPair && root.keyPair.pairType === Constants.keypair.type.profile? Utils.colorForPubkey(Theme.palette, root.userProfilePublicKey) : Theme.palette.primaryColor1 letterSize: Math.max(4, asset.width / 2.4) charactersLen: 2 isLetterIdenticon: !!root.keyPair && !root.keyPair.icon && !asset.name.toString() @@ -34,7 +34,7 @@ StatusListItem { } tagsModel: !!root.keyPair? root.keyPair.accounts: [] tagsDelegate: StatusListItemTag { - bgColor: !!model.account.colorId ? Utils.getColorForId(model.account.colorId): "" + bgColor: !!model.account.colorId ? Utils.getColorForId(Theme.palette, model.account.colorId): "" bgRadius: 6 height: Theme.bigPadding closeButtonVisible: false diff --git a/ui/app/AppLayouts/Profile/controls/WalletKeyPairDelegate.qml b/ui/app/AppLayouts/Profile/controls/WalletKeyPairDelegate.qml index d496439e26c..2a80ca5d3bf 100644 --- a/ui/app/AppLayouts/Profile/controls/WalletKeyPairDelegate.qml +++ b/ui/app/AppLayouts/Profile/controls/WalletKeyPairDelegate.qml @@ -50,14 +50,14 @@ Rectangle { statusListItemSubTitle.textFormat: Qt.RichText titleTextIcon: !!root.keyPair && keyPair.migratedToKeycard ? "keycard": "" subTitle: Utils.getKeypairLocation(root.keyPair, false) - statusListItemSubTitle.color: Utils.getKeypairLocationColor(root.keyPair) + statusListItemSubTitle.color: Utils.getKeypairLocationColor(Theme.palette, root.keyPair) color: Theme.palette.transparent asset { width: !!root.keyPair && keyPair.icon? root.Theme.bigPadding : 40 height: !!root.keyPair && keyPair.icon? root.Theme.bigPadding : 40 name: !!root.keyPair? !!root.keyPair.image? root.keyPair.image : root.keyPair.icon : "" isImage: !!root.keyPair && !!keyPair.image - color: d.isProfileKeypair ? Utils.colorForPubkey(root.userProfilePublicKey) : root.Theme.palette.primaryColor1 + color: d.isProfileKeypair ? Utils.colorForPubkey(Theme.palette, root.userProfilePublicKey) : root.Theme.palette.primaryColor1 letterSize: Math.max(4, asset.width / 2.4) charactersLen: 2 isLetterIdenticon: !!root.keyPair && !keyPair.icon && !asset.name.toString() diff --git a/ui/app/AppLayouts/Profile/panels/ProfileShowcaseAccountsPanel.qml b/ui/app/AppLayouts/Profile/panels/ProfileShowcaseAccountsPanel.qml index f3ff33d6269..0f31668fb31 100644 --- a/ui/app/AppLayouts/Profile/panels/ProfileShowcaseAccountsPanel.qml +++ b/ui/app/AppLayouts/Profile/panels/ProfileShowcaseAccountsPanel.qml @@ -26,7 +26,7 @@ ProfileShowcasePanel { hasEmoji: model && !!model.emoji hasIcon: !hasEmoji icon.name: hasEmoji ? model.emoji : "filled-account" - icon.color: model && model.colorId ? Utils.getColorForId(model.colorId) : Theme.palette.primaryColor3 + icon.color: model && model.colorId ? Utils.getColorForId(Theme.palette, model.colorId) : Theme.palette.primaryColor3 highlighted: model ? model.address === root.currentWallet : false } filter: FastExpressionFilter { diff --git a/ui/app/AppLayouts/Profile/popups/ExemptionNotificationsModal.qml b/ui/app/AppLayouts/Profile/popups/ExemptionNotificationsModal.qml index 0e46d6ae1e7..1e263009bdb 100644 --- a/ui/app/AppLayouts/Profile/popups/ExemptionNotificationsModal.qml +++ b/ui/app/AppLayouts/Profile/popups/ExemptionNotificationsModal.qml @@ -36,7 +36,7 @@ StatusModal { // Theme.palette.userCustomizationColors[Utils.colorIdForPubkey(root.itemId)] : // root.color // until then the following is used - bgColor: d.isOneToOneChat ? Utils.colorForPubkey(root.itemId) : root.color + bgColor: d.isOneToOneChat ? Utils.colorForPubkey(root.Theme.palette, root.itemId) : root.color name: root.image isImage: !!root.image charactersLen: d.isOneToOneChat ? 2 : 1 diff --git a/ui/app/AppLayouts/Profile/popups/RenameAccountModal.qml b/ui/app/AppLayouts/Profile/popups/RenameAccountModal.qml index accd1912a4b..3ec8a8cad74 100644 --- a/ui/app/AppLayouts/Profile/popups/RenameAccountModal.qml +++ b/ui/app/AppLayouts/Profile/popups/RenameAccountModal.qml @@ -59,7 +59,7 @@ StatusModal { placeholderText: qsTr("Enter an account name...") input.text: popup.accountName input.asset.emoji: popup.accountEmoji - input.asset.color: Utils.getColorForId(popup.accountColorId) + input.asset.color: Utils.getColorForId(Theme.palette, popup.accountColorId) input.asset.name: !popup.accountEmoji ? "filled-account": "" validationMode: StatusInput.ValidationMode.Always @@ -89,7 +89,7 @@ StatusModal { anchors.horizontalCenter: parent.horizontalCenter model: Theme.palette.customisationColorsArray titleText: qsTr("COLOUR") - selectedColor: Utils.getColorForId(popup.accountColorId) + selectedColor: Utils.getColorForId(Theme.palette, popup.accountColorId) selectedColorIndex: { for (let i = 0; i < model.length; i++) { if(model[i] === popup.accountColorId) @@ -133,7 +133,7 @@ StatusModal { return } - popup.renameAccountRequested(accountNameInput.text, Utils.getIdForColor(accountColorInput.selectedColor), accountNameInput.input.asset.emoji) + popup.renameAccountRequested(accountNameInput.text, Utils.getIdForColor(Theme.palette, accountColorInput.selectedColor), accountNameInput.input.asset.emoji) popup.close() } } diff --git a/ui/app/AppLayouts/Profile/popups/RenameKeypairPopup.qml b/ui/app/AppLayouts/Profile/popups/RenameKeypairPopup.qml index 9ff70f7c977..c7fa66b6e44 100644 --- a/ui/app/AppLayouts/Profile/popups/RenameKeypairPopup.qml +++ b/ui/app/AppLayouts/Profile/popups/RenameKeypairPopup.qml @@ -105,7 +105,7 @@ StatusModal { Repeater { model: root.accounts delegate: StatusListItemTag { - bgColor: Utils.getColorForId(model.account.colorId) + bgColor: Utils.getColorForId(Theme.palette, model.account.colorId) height: Theme.bigPadding bgRadius: 6 tagClickable: false diff --git a/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml b/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml index aa3ba78a9db..188383ef386 100644 --- a/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml +++ b/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml @@ -1,5 +1,6 @@ import QtQuick +import StatusQ.Core.Theme import StatusQ.Core.Utils import AppLayouts.Chat.stores @@ -13,6 +14,8 @@ QtObject { id: root property bool localBackupEnabled: false + required property ThemePalette palette + readonly property QtObject _d: QtObject { id: d @@ -59,5 +62,6 @@ QtObject { // TODO: Move to wallet related store property WalletStore walletStore: WalletStore { walletModule: d.profileSectionModuleInst.walletModule + palette: root.palette } } diff --git a/ui/app/AppLayouts/Profile/stores/WalletStore.qml b/ui/app/AppLayouts/Profile/stores/WalletStore.qml index a7919d1af05..27cebd7317d 100644 --- a/ui/app/AppLayouts/Profile/stores/WalletStore.qml +++ b/ui/app/AppLayouts/Profile/stores/WalletStore.qml @@ -4,6 +4,7 @@ import utils import StatusQ import StatusQ.Models +import StatusQ.Core.Theme import QtModelsToolkit import SortFilterProxyModel @@ -23,6 +24,8 @@ QtObject { property var selectedAccount + required property ThemePalette palette + // TODO(alaibe): there should be no access to wallet section, create collectible in profile property var overview: walletSectionOverview property var accounts: Global.appIsReady? accountsModule.accounts : null @@ -33,13 +36,13 @@ QtObject { FastExpressionRole { name: "color" - function getColor(colorId) { - return Utils.getColorForId(colorId) + function getColor(palette, colorId) { + return Utils.getColorForId(palette, colorId) } // Direct call for singleton function is not handled properly by // SortFilterProxyModel that's why helper function is used instead. - expression: { return getColor(model.colorId) } + expression: { return getColor(root.palette, model.colorId) } expectedRoles: ["colorId"] } ] diff --git a/ui/app/AppLayouts/Profile/views/EnsListView.qml b/ui/app/AppLayouts/Profile/views/EnsListView.qml index 34b1f00d29b..0f95b718318 100644 --- a/ui/app/AppLayouts/Profile/views/EnsListView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsListView.qml @@ -223,7 +223,7 @@ Item { amISender: false sender.displayName: root.ensUsernamesStore.preferredUsername sender.profileImage.assetSettings.isImage: true - sender.profileImage.assetSettings.color: Utils.colorForPubkey(root.ensUsernamesStore.pubkey) + sender.profileImage.assetSettings.color: Utils.colorForPubkey(root.Theme.palette, root.ensUsernamesStore.pubkey) sender.profileImage.name: root.ensUsernamesStore.icon } } diff --git a/ui/app/AppLayouts/Profile/views/NotificationsView.qml b/ui/app/AppLayouts/Profile/views/NotificationsView.qml index 57910dedd1c..faf511a08d2 100644 --- a/ui/app/AppLayouts/Profile/views/NotificationsView.qml +++ b/ui/app/AppLayouts/Profile/views/NotificationsView.qml @@ -118,7 +118,7 @@ SettingsContentBase { name: model.image isImage: !!model.image && model.image !== "" color: model.type === Constants.settingsSection.exemptions.oneToOneChat? - Utils.colorForPubkey(model.itemId) : + Utils.colorForPubkey(root.Theme.palette, model.itemId) : model.color charactersLen: model.type === Constants.settingsSection.exemptions.oneToOneChat? 2 : 1 isLetterIdenticon: !model.image || model.image === "" diff --git a/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml b/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml index 8cae57f8e44..06a303477c9 100644 --- a/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml +++ b/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml @@ -57,7 +57,7 @@ FocusScope { readonly property int bottomDirtyToastMargin: 36 // Read-only flag that turns true when the row component enters a “compact” layout automatically on resize. - readonly property bool compactRowMode: sectionTitleText.implicitWidth + titleFirstRowItem.implicitWidth + 2 * Theme.padding > root.contentWidth + readonly property bool compactRowMode: sectionTitleText.implicitWidth + titleFirstRowItem.implicitWidth + 2 * root.Theme.padding > root.contentWidth } Loader { diff --git a/ui/app/AppLayouts/Profile/views/wallet/AccountOrderView.qml b/ui/app/AppLayouts/Profile/views/wallet/AccountOrderView.qml index c09be9a4df3..af11bb3d64e 100644 --- a/ui/app/AppLayouts/Profile/views/wallet/AccountOrderView.qml +++ b/ui/app/AppLayouts/Profile/views/wallet/AccountOrderView.qml @@ -93,7 +93,7 @@ ColumnLayout { icon.width: 40 icon.height: 40 icon.name: model.emoji - icon.color: Utils.getColorForId(model.colorId) + icon.color: Utils.getColorForId(Theme.palette, model.colorId) onDragFinished: { let from = d.indexMoveFrom diff --git a/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml b/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml index 6b8575e50c5..71f64a9cc0b 100644 --- a/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml +++ b/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml @@ -63,7 +63,7 @@ ColumnLayout { text: !!root.account? root.account.name : "" font.weight: Font.Bold font.pixelSize: Theme.fontSize(28) - color: !!root.account? Utils.getColorForId(root.account.colorId) : Theme.palette.directColor1 + color: !!root.account? Utils.getColorForId(Theme.palette, root.account.colorId) : Theme.palette.directColor1 } StatusEmoji { id: accountImage @@ -216,7 +216,7 @@ ColumnLayout { title: qsTr("Stored") subTitle: Utils.getKeypairLocation(root.keyPair, true) visible: !!subTitle - statusListItemSubTitle.color: Utils.getKeypairLocationColor(root.keyPair) + statusListItemSubTitle.color: Utils.getKeypairLocationColor(Theme.palette, root.keyPair) } } } @@ -277,7 +277,7 @@ ColumnLayout { accountAddress: !!root.account ? root.account.address : "" accountDerivationPath: !!root.account ? root.account.path : "" emoji: !!root.account ? root.account.emoji : "" - color: !!root.account ? Utils.getColorForId(root.account.colorId) : "" + color: !!root.account ? Utils.getColorForId(Theme.palette, root.account.colorId) : "" function doDeletion(password) { root.walletStore.deleteAccount(root.account.address, password) diff --git a/ui/app/AppLayouts/Wallet/adaptors/SignSendAdaptor.qml b/ui/app/AppLayouts/Wallet/adaptors/SignSendAdaptor.qml index 8f087873d12..4f26e94fd73 100644 --- a/ui/app/AppLayouts/Wallet/adaptors/SignSendAdaptor.qml +++ b/ui/app/AppLayouts/Wallet/adaptors/SignSendAdaptor.qml @@ -1,5 +1,6 @@ import QtQuick +import StatusQ.Core.Theme import StatusQ.Core.Utils import QtModelsToolkit @@ -11,6 +12,8 @@ import QtModelsToolkit QObject { id: root + /** Palette necessary to convert colorId to actual color **/ + required property ThemePalette palette /** Account key used for filtering **/ required property string accountKey /** network chainId used for filtering **/ @@ -100,7 +103,7 @@ QObject { } const colorId = selectedRecipientEntry.item.colorId if (!!colorId) { - return Utils.getColorForId(colorId) + return Utils.getColorForId(root.palette, colorId) } return "" } diff --git a/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml b/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml index eb4caeb9dc7..bd2d58ed460 100644 --- a/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml +++ b/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml @@ -20,7 +20,7 @@ Control { id: singleAccountGradient Rectangle { gradient: Gradient { - GradientStop { position: 0.0; color: overview && overview.colorId ? StatusColors.alphaColor(Utils.getColorForId(overview.colorId), 0.1) : "" } + GradientStop { position: 0.0; color: overview && overview.colorId ? StatusColors.alphaColor(Utils.getColorForId(root.Theme.palette, overview.colorId), 0.1) : "" } GradientStop { position: 1.0; color: "transparent" } } } @@ -39,7 +39,7 @@ Control { let gap = 1/splitWords.length let startPosition = gap for (const word of splitWords) { - stops.push(stopComponent.createObject(base, {"position":startPosition, "color": StatusColors.alphaColor(Utils.getColorForId(word), 0.1)})) + stops.push(stopComponent.createObject(base, {"position":startPosition, "color": StatusColors.alphaColor(Utils.getColorForId(root.Theme.palette, word), 0.1)})) startPosition += gap } gradient.stops = stops diff --git a/ui/app/AppLayouts/Wallet/controls/RecipientViewDelegate.qml b/ui/app/AppLayouts/Wallet/controls/RecipientViewDelegate.qml index 55473d10e98..33a22fcb0f0 100644 --- a/ui/app/AppLayouts/Wallet/controls/RecipientViewDelegate.qml +++ b/ui/app/AppLayouts/Wallet/controls/RecipientViewDelegate.qml @@ -64,7 +64,7 @@ StatusListItem { if (!!root.walletColor) return root.walletColor if (!!root.walletColorId) - return Utils.getColorForId(root.walletColorId) + return Utils.getColorForId(Theme.palette, root.walletColorId) return "" } asset.name: !!root.emoji ? "filled-account" : title diff --git a/ui/app/AppLayouts/Wallet/controls/SavedAddressesDelegate.qml b/ui/app/AppLayouts/Wallet/controls/SavedAddressesDelegate.qml index 8946e65c7f3..44c2c6f59c5 100644 --- a/ui/app/AppLayouts/Wallet/controls/SavedAddressesDelegate.qml +++ b/ui/app/AppLayouts/Wallet/controls/SavedAddressesDelegate.qml @@ -66,7 +66,7 @@ StatusListItem { width: 40 height: 40 name: root.avatar || "" // Use avatar URL if available - color: Utils.getColorForId(root.colorId) + color: Utils.getColorForId(Theme.palette, root.colorId) isLetterIdenticon: !root.avatar // Only use letter identicon if no avatar letterIdenticonBgWithAlpha: true } diff --git a/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml b/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml index 18c9f62885a..a3c88029173 100644 --- a/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml +++ b/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml @@ -44,7 +44,7 @@ StatusDialog { colorSelection.selectedColorIndex = Math.floor(Math.random() * colorSelection.model.length) } else { - let ind = Utils.getColorIndexForId(d.colorId) + let ind = Utils.getColorIndexForId(Theme.palette, d.colorId) colorSelection.selectedColorIndex = ind } @@ -123,7 +123,7 @@ StatusDialog { title: account.name, icon: "", emoji: account.emoji, - color: Utils.getColorForId(account.colorId).toString().toUpperCase() + color: Utils.getColorForId(root.Theme.palette, account.colorId).toString().toUpperCase() }) } @@ -140,7 +140,7 @@ StatusDialog { title: savedAddress.name, icon: "", emoji: "", - color: Utils.getColorForId(savedAddress.colorId).toString().toUpperCase() + color: Utils.getColorForId(root.Theme.palette, savedAddress.colorId).toString().toUpperCase() }) } @@ -197,7 +197,7 @@ StatusDialog { function checkForAddressInputErrorsWarnings() { addressInput.errorMessageCmp.visible = false - addressInput.errorMessageCmp.color = Theme.palette.dangerColor1 + addressInput.errorMessageCmp.color = root.Theme.palette.dangerColor1 addressInput.errorMessageCmp.text = "" d.minAddressLengthRequestError = false @@ -273,7 +273,7 @@ StatusDialog { let accountsJson = JSON.parse(accounts) d.contactsWithSameAddress = accountsJson.length addressInput.errorMessageCmp.visible = d.contactsWithSameAddress > 0 - addressInput.errorMessageCmp.color = Theme.palette.warningColor1 + addressInput.errorMessageCmp.color = root.Theme.palette.warningColor1 addressInput.errorMessageCmp.text = "" if (d.contactsWithSameAddress === 1) addressInput.errorMessageCmp.text = qsTr("This address belongs to a contact") @@ -288,7 +288,7 @@ StatusDialog { title: ProfileUtils.displayName(contact.localNickname, contact.name, contact.displayName, contact.alias), icon: contact.icon, emoji: "", - color: Utils.colorForColorId(contact.colorId), + color: Utils.colorForColorId(root.Theme.palette, contact.colorId), onlineStatus: contact.onlineStatus }) @@ -528,7 +528,7 @@ StatusDialog { selectedColorIndex: -1 onSelectedColorChanged: { - d.colorId = Utils.getIdForColor(selectedColor) + d.colorId = Utils.getIdForColor(Theme.palette, selectedColor) } } } diff --git a/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml b/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml index 6d1b9963df5..f1226fd604a 100644 --- a/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml +++ b/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml @@ -208,7 +208,7 @@ StatusModal { width: 72 height: 72 name: !root.selectedAccount.name && !root.selectedAccount.emoji? "status-logo-icon" : "" - color: !root.selectedAccount.name && !root.selectedAccount.emoji? "transparent" : Utils.getColorForId(root.selectedAccount.colorId) + color: !root.selectedAccount.name && !root.selectedAccount.emoji? "transparent" : Utils.getColorForId(root.Theme.palette, root.selectedAccount.colorId) emoji: root.selectedAccount.emoji charactersLen: 1 isLetterIdenticon: root.selectedAccount.name && !root.selectedAccount.emoji diff --git a/ui/app/AppLayouts/Wallet/popups/RemoveSavedAddressPopup.qml b/ui/app/AppLayouts/Wallet/popups/RemoveSavedAddressPopup.qml index d1158da014b..aaa2b182d4f 100644 --- a/ui/app/AppLayouts/Wallet/popups/RemoveSavedAddressPopup.qml +++ b/ui/app/AppLayouts/Wallet/popups/RemoveSavedAddressPopup.qml @@ -52,7 +52,7 @@ StatusDialog { leftComponent: StatusSmartIdenticon { name: root.name asset { - color: Utils.getColorForId(root.colorId) + color: Utils.getColorForId(root.Theme.palette, root.colorId) isLetterIdenticon: true letterIdenticonBgWithAlpha: true } diff --git a/ui/app/AppLayouts/Wallet/popups/dapps/DAppsWorkflow.qml b/ui/app/AppLayouts/Wallet/popups/dapps/DAppsWorkflow.qml index 31410dc6f7d..192b87bac78 100644 --- a/ui/app/AppLayouts/Wallet/popups/dapps/DAppsWorkflow.qml +++ b/ui/app/AppLayouts/Wallet/popups/dapps/DAppsWorkflow.qml @@ -362,7 +362,7 @@ SQUtils.QObject { dappIcon: request.dappIcon dappName: request.dappName - accountColor: Utils.getColorForId(account.colorId) + accountColor: Utils.getColorForId(Theme.palette, account.colorId) accountName: account.name accountAddress: account.address accountEmoji: account.emoji diff --git a/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml b/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml index 92122c8ded1..51347f9dc1c 100644 --- a/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml +++ b/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml @@ -574,7 +574,7 @@ StatusDialog { accountName: d.selectedAccount.name accountAddress: d.selectedAccount.address accountEmoji: d.selectedAccount.emoji - accountColor: Utils.getColorForId(d.selectedAccount.colorId) + accountColor: Utils.getColorForId(Theme.palette, d.selectedAccount.colorId) accountBalanceFormatted: d.selectedAccount.accountBalance.formattedBalance networkShortName: networkFilter.singleSelectionItemData.shortName @@ -635,7 +635,7 @@ StatusDialog { accountName: d.selectedAccount.name accountAddress: d.selectedAccount.address accountEmoji: d.selectedAccount.emoji - accountColor: Utils.getColorForId(d.selectedAccount.colorId) + accountColor: Utils.getColorForId(Theme.palette, d.selectedAccount.colorId) networkShortName: networkFilter.singleSelectionItemData.shortName networkName: networkFilter.singleSelectionItemData.chainName diff --git a/ui/app/AppLayouts/Wallet/stores/RootStore.qml b/ui/app/AppLayouts/Wallet/stores/RootStore.qml index 301937c32b9..7dcd05bb030 100644 --- a/ui/app/AppLayouts/Wallet/stores/RootStore.qml +++ b/ui/app/AppLayouts/Wallet/stores/RootStore.qml @@ -15,6 +15,8 @@ import StatusQ.Core.Utils as SQUtils QtObject { id: root + property ThemePalette palette + property bool showSavedAddresses: false property bool showFollowingAddresses: false property string selectedAddress: "" @@ -87,13 +89,15 @@ QtObject { FastExpressionRole { name: "color" - function getColor(colorId) { - return Utils.getColorForId(colorId) + function getColor(palette, colorId) { + if (!palette) + return "white" + return Utils.getColorForId(palette, colorId) } // Direct call for singleton function is not handled properly by // SortFilterProxyModel that's why helper function is used instead. - expression: { return getColor(model.colorId) } + expression: { return getColor(root.palette, model.colorId) } expectedRoles: ["colorId"] } ] diff --git a/ui/app/AppLayouts/Wallet/views/LeftTabView.qml b/ui/app/AppLayouts/Wallet/views/LeftTabView.qml index 40bd92a3e1d..57b531a2978 100644 --- a/ui/app/AppLayouts/Wallet/views/LeftTabView.qml +++ b/ui/app/AppLayouts/Wallet/views/LeftTabView.qml @@ -138,7 +138,7 @@ Rectangle { accountAddress: removeAccountConfirmation.accountAddress accountDerivationPath: removeAccountConfirmation.accountDerivationPath emoji: removeAccountConfirmation.emoji - color: Utils.getColorForId(removeAccountConfirmation.colorId) + color: Utils.getColorForId(Theme.palette, removeAccountConfirmation.colorId) function doDeletion(password) { close() @@ -293,7 +293,7 @@ Rectangle { title: model.name subTitle: !model.hideFromTotalBalance ? LocaleUtils.currencyAmountToLocaleString(model.currencyBalance): "" asset.emoji: !!model.emoji ? model.emoji: "" - asset.color: Utils.getColorForId(model.colorId) + asset.color: Utils.getColorForId(Theme.palette, model.colorId) asset.name: !model.emoji ? "filled-account": "" asset.width: 40 asset.height: 40 diff --git a/ui/app/AppLayouts/Wallet/views/RightTabView.qml b/ui/app/AppLayouts/Wallet/views/RightTabView.qml index 2c81f495054..08ad945ec4c 100644 --- a/ui/app/AppLayouts/Wallet/views/RightTabView.qml +++ b/ui/app/AppLayouts/Wallet/views/RightTabView.qml @@ -89,7 +89,7 @@ RightTabBaseView { emojiId: SQUtils.Emoji.iconId(overview.emoji ?? "") balance: LocaleUtils.currencyAmountToLocaleString(overview.currencyBalance) balanceLoading: overview.balanceLoading - color: Utils.getColorForId(overview.colorId) + color: Utils.getColorForId(Theme.palette, overview.colorId) name: overview.name balanceAvailable: !root.networkConnectionStore.accountBalanceNotAvailable networksModel: root.networksStore.activeNetworks diff --git a/ui/app/AppLayouts/stores/RootStore.qml b/ui/app/AppLayouts/stores/RootStore.qml index 2ff1f6b4dbd..47f79a31689 100644 --- a/ui/app/AppLayouts/stores/RootStore.qml +++ b/ui/app/AppLayouts/stores/RootStore.qml @@ -15,6 +15,7 @@ QtObject { id: root required property Keychain keychain + required property ThemePalette palette // Global properties that have to remain on `RootStore` (the module instances must be private properties and just used to initialize the // rest and specific stores @@ -58,6 +59,7 @@ QtObject { readonly property MessagingStores.MessagingRootStore messagingRootStore: MessagingStores.MessagingRootStore {} readonly property ProfileStores.ProfileSectionStore profileSectionStore: ProfileStores.ProfileSectionStore { localBackupEnabled: root.localBackupEnabled + palette: root.palette } readonly property AccountSettingsStore accountSettingsStore: AccountSettingsStore {} diff --git a/ui/app/mainui/AppMain.qml b/ui/app/mainui/AppMain.qml index a64d0ce7a3c..0ead6e994d5 100644 --- a/ui/app/mainui/AppMain.qml +++ b/ui/app/mainui/AppMain.qml @@ -71,6 +71,7 @@ Item { appMain.privacyStore.thirdpartyServicesEnabled: true onOpenUrl: (link) => Global.requestOpenLink(link) keychain: appMain.keychain + palette: appMain.Theme.palette } // Global cross-domain stores (just references from `rootStore`) @@ -1796,6 +1797,9 @@ Item { searchPhrase: homePage.searchPhrase profileId: appMain.profileStore.pubKey + + // no automatic propagation to QtObject, needs to be specified explicitely + Theme.style: appMain.Theme.style } homePageEntriesModel: homePageAdaptor.homePageEntriesModel @@ -3010,4 +3014,10 @@ Item { WalletStores.RootStore.addressWasShown(text) } } + + Binding { + target: WalletStores.RootStore + property: "palette" + value: appMain.Theme.palette + } } diff --git a/ui/app/mainui/Handlers/HandlersManager.qml b/ui/app/mainui/Handlers/HandlersManager.qml index f949031f856..9ac65baaaeb 100644 --- a/ui/app/mainui/Handlers/HandlersManager.qml +++ b/ui/app/mainui/Handlers/HandlersManager.qml @@ -22,7 +22,7 @@ import utils QtObject { id: root - required property var popupParent + required property Item popupParent // Stores definition: required property AppStores.RootStore rootStore diff --git a/ui/app/mainui/Handlers/SendModalHandler.qml b/ui/app/mainui/Handlers/SendModalHandler.qml index f740049167c..0e36c2d2d6e 100644 --- a/ui/app/mainui/Handlers/SendModalHandler.qml +++ b/ui/app/mainui/Handlers/SendModalHandler.qml @@ -841,6 +841,8 @@ QtObject { SignSendAdaptor { id: signSendAdaptor + + palette: root.popupParent.Theme.palette accountKey: simpleSendModal.selectedAccountAddress accountsModel: root.walletAccountsModel recipientModel: handler.recipientViewAdaptor.recipientsModel @@ -871,7 +873,7 @@ QtObject { accountName: signSendAdaptor.selectedAccount.name accountAddress: signSendAdaptor.selectedAccount.address accountEmoji: signSendAdaptor.selectedAccount.emoji - accountColor: Utils.getColorForId(signSendAdaptor.selectedAccount.colorId) + accountColor: Utils.getColorForId(Theme.palette, signSendAdaptor.selectedAccount.colorId) recipientAddress: signSendAdaptor.recipientAddress recipientName: signSendAdaptor.recipientName diff --git a/ui/imports/shared/controls/AccountSelector.qml b/ui/imports/shared/controls/AccountSelector.qml index c1ec7ab165d..24412eabf34 100644 --- a/ui/imports/shared/controls/AccountSelector.qml +++ b/ui/imports/shared/controls/AccountSelector.qml @@ -117,7 +117,7 @@ StatusComboBox { name: model.name address: model.address emoji: model.emoji - walletColor: Utils.getColorForId(model.colorId) + walletColor: Utils.getColorForId(Theme.palette, model.colorId) currencyBalance: model.currencyBalance walletType: model.walletType migratedToKeycard: model.migratedToKeycard ?? false diff --git a/ui/imports/shared/controls/AccountSelectorHeader.qml b/ui/imports/shared/controls/AccountSelectorHeader.qml index 314b91b294a..92fee9a7b39 100644 --- a/ui/imports/shared/controls/AccountSelectorHeader.qml +++ b/ui/imports/shared/controls/AccountSelectorHeader.qml @@ -51,14 +51,14 @@ AccountSelector { horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter elide: Text.ElideRight - color: Utils.getContrastingColor(d.headerStyleBackgroundColor) + color: Utils.getContrastingColor(Theme.palette, d.headerStyleBackgroundColor) } } QtObject { id: d readonly property color headerStyleBackgroundColor: !!currentAccount ? root.control.hovered ? - Utils.getHoveredColor(currentAccount.colorId) : - Utils.getColorForId(currentAccount.colorId) : "transparent" + Utils.getHoveredColor(root.Theme.palette, currentAccount.colorId) : + Utils.getColorForId(root.Theme.palette, currentAccount.colorId) : "transparent" } } diff --git a/ui/imports/shared/controls/ErrorTag.qml b/ui/imports/shared/controls/ErrorTag.qml index edd18f1a959..742bc32d1f2 100644 --- a/ui/imports/shared/controls/ErrorTag.qml +++ b/ui/imports/shared/controls/ErrorTag.qml @@ -27,20 +27,20 @@ InformationTag { bgBorderColor: Theme.palette.dangerColor2 QtObject { - id: priv + id: d - readonly property int fontPixelSize: Theme.tertiaryTextFontSize - readonly property color foregroundColor: Theme.palette.dangerColor1 + readonly property int fontPixelSize: root.Theme.tertiaryTextFontSize + readonly property color foregroundColor: root.Theme.palette.dangerColor1 } asset { name: "warning" - color: priv.foregroundColor + color: d.foregroundColor } tagPrimaryLabel.text: root.text - tagPrimaryLabel.color: priv.foregroundColor - tagPrimaryLabel.font.pixelSize: priv.fontPixelSize + tagPrimaryLabel.color: d.foregroundColor + tagPrimaryLabel.font.pixelSize: d.fontPixelSize tagPrimaryLabel.elide: Text.ElideRight // NB: regular binding won't work as `tagPrimaryLabel` is an alias @@ -58,9 +58,9 @@ InformationTag { objectName: "rightComponentButton" horizontalPadding: 8 size: StatusBaseButton.Size.Tiny - font.pixelSize: priv.fontPixelSize + font.pixelSize: d.fontPixelSize type: StatusBaseButton.Type.Danger - normalColor: priv.foregroundColor + normalColor: d.foregroundColor hoverColor: Theme.palette.hoverColor(normalColor) textColor: Theme.palette.white radius: root.bgRadius diff --git a/ui/imports/shared/controls/ProfileButton.qml b/ui/imports/shared/controls/ProfileButton.qml index 9511813c978..efa41ab4f0b 100644 --- a/ui/imports/shared/controls/ProfileButton.qml +++ b/ui/imports/shared/controls/ProfileButton.qml @@ -49,9 +49,9 @@ StatusNavBarTabButton { // identicon.asset.height: identicon.asset.isImage ? 28 : (root.usesDefaultName ? Math.floor(height * 0.9) : height) identicon.asset.bgWidth: root.usesDefaultName ? width : 0 identicon.asset.bgHeight: root.usesDefaultName ? height : 0 - identicon.asset.color: root.usesDefaultName ? Theme.palette.indirectColor2 : Utils.colorForPubkey(root.pubKey) + identicon.asset.color: root.usesDefaultName ? Theme.palette.indirectColor2 : Utils.colorForPubkey(Theme.palette, root.pubKey) identicon.asset.isLetterIdenticon: root.usesDefaultName ? false : icon.name !== "" && !identicon.asset.isImage - identicon.asset.bgColor: root.usesDefaultName ? Utils.colorForPubkey(root.pubKey) : "transparent" + identicon.asset.bgColor: root.usesDefaultName ? Utils.colorForPubkey(Theme.palette, root.pubKey) : "transparent" badge.visible: true badge.anchors { diff --git a/ui/imports/shared/controls/chat/LinkPreviewCard.qml b/ui/imports/shared/controls/chat/LinkPreviewCard.qml index d2a53fc198c..7e971a718b0 100644 --- a/ui/imports/shared/controls/chat/LinkPreviewCard.qml +++ b/ui/imports/shared/controls/chat/LinkPreviewCard.qml @@ -74,7 +74,7 @@ CalloutCard { imageHeight: imageWidth name: root.userData.name image: root.userData.image - userColor: Utils.colorForPubkey(root.userData.publicKey) + userColor: Utils.colorForPubkey(Theme.palette, root.userData.publicKey) } } RowLayout { diff --git a/ui/imports/shared/controls/chat/ProfileHeader.qml b/ui/imports/shared/controls/chat/ProfileHeader.qml index 5cb330856d7..a8e89c6acba 100644 --- a/ui/imports/shared/controls/chat/ProfileHeader.qml +++ b/ui/imports/shared/controls/chat/ProfileHeader.qml @@ -120,7 +120,7 @@ Item { objectName: "ProfileHeader_userImage" name: root.displayName usesDefaultName: root.usesDefaultName - userColor: Utils.colorForColorId(root.colorId) + userColor: Utils.colorForColorId(Theme.palette, root.colorId) image: root.previewIcon interactive: false imageWidth: d.getSize(36, 64, 170) diff --git a/ui/imports/shared/controls/delegates/ContactListItemDelegate.qml b/ui/imports/shared/controls/delegates/ContactListItemDelegate.qml index 8f519a6497e..a1981f86fe8 100644 --- a/ui/imports/shared/controls/delegates/ContactListItemDelegate.qml +++ b/ui/imports/shared/controls/delegates/ContactListItemDelegate.qml @@ -24,7 +24,7 @@ StatusMemberListItem { isUntrustworthy: model.isUntrustworthy || model.trustStatus === Constants.trustStatus.untrustworthy isContact: model.isContact icon.name: model.thumbnailImage || model.icon - icon.color: Utils.colorForColorId(model.colorId) + icon.color: Utils.colorForColorId(Theme.palette, model.colorId) status: model.onlineStatus color: (hovered || highlighted) ? Theme.palette.baseColor2 : "transparent" } diff --git a/ui/imports/shared/popups/CommonContactDialog.qml b/ui/imports/shared/popups/CommonContactDialog.qml index 9976240f465..d6b90d1fbb4 100644 --- a/ui/imports/shared/popups/CommonContactDialog.qml +++ b/ui/imports/shared/popups/CommonContactDialog.qml @@ -48,7 +48,7 @@ StatusDialog { StatusUserImage { name: root.mainDisplayName usesDefaultName: contactDetails.usesDefaultName - userColor: Utils.colorForColorId(contactDetails.colorId) + userColor: Utils.colorForColorId(Theme.palette, contactDetails.colorId) image: contactDetails.largeImage interactive: false imageWidth: 60 diff --git a/ui/imports/shared/popups/IntroduceYourselfPopup.qml b/ui/imports/shared/popups/IntroduceYourselfPopup.qml index 75b7d39163c..8b13e52f8af 100644 --- a/ui/imports/shared/popups/IntroduceYourselfPopup.qml +++ b/ui/imports/shared/popups/IntroduceYourselfPopup.qml @@ -55,7 +55,7 @@ StatusDialog { name: root.pubKey usesDefaultName: true - userColor: Utils.colorForColorId(root.colorId) + userColor: Utils.colorForColorId(Theme.palette, root.colorId) imageWidth: 68 imageHeight: 68 interactive: false @@ -96,7 +96,7 @@ StatusDialog { name: root.pubKey usesDefaultName: true image: Assets.png("onboarding/avatar") - userColor: Utils.colorForColorId(root.colorId) + userColor: Utils.colorForColorId(Theme.palette, root.colorId) imageWidth: 68 imageHeight: 68 interactive: false diff --git a/ui/imports/shared/popups/MetricsEnablePopup.qml b/ui/imports/shared/popups/MetricsEnablePopup.qml index 0e6012c4587..357bd8faec1 100644 --- a/ui/imports/shared/popups/MetricsEnablePopup.qml +++ b/ui/imports/shared/popups/MetricsEnablePopup.qml @@ -86,7 +86,7 @@ StatusModal { textFormat: Text.RichText text: qsTr("Usage data will be shared from all profiles added to device. %1 %2") .arg(root.placement !== Constants.metricsEnablePlacement.privacyAndSecurity ? qsTr("Sharing usage data can be turned off anytime in Settings / Privacy and Security.") : "") - .arg(root.placement === Constants.metricsEnablePlacement.privacyAndSecurity ? qsTr("For more details refer to our %1.").arg(Utils.getStyledLink("Privacy Policy", "#", hoveredLink)) : "") + .arg(root.placement === Constants.metricsEnablePlacement.privacyAndSecurity ? qsTr("For more details refer to our %1.").arg(Utils.getStyledLink("Privacy Policy", "#", hoveredLink, Theme.palette.directColor1, Theme.palette.primaryColor1)) : "") onLinkActivated: { root.close() Global.privacyPolicyRequested() diff --git a/ui/imports/shared/popups/addaccount/panels/SelectOrigin.qml b/ui/imports/shared/popups/addaccount/panels/SelectOrigin.qml index 965bc418139..f6e324291b7 100644 --- a/ui/imports/shared/popups/addaccount/panels/SelectOrigin.qml +++ b/ui/imports/shared/popups/addaccount/panels/SelectOrigin.qml @@ -39,7 +39,7 @@ StatusSelect { name: root.selectedOrigin.image? root.selectedOrigin.image : root.selectedOrigin.icon isImage: !!root.selectedOrigin.image color: root.selectedOrigin.pairType === Constants.addAccountPopup.keyPairType.profile? - Utils.colorForPubkey(root.userProfilePublicKey) : Theme.palette.primaryColor1 + Utils.colorForPubkey(Theme.palette, root.userProfilePublicKey) : Theme.palette.primaryColor1 letterSize: Math.max(4, asset.width / 2.4) charactersLen: 2 isLetterIdenticon: !root.selectedOrigin.icon && !asset.name.toString() @@ -49,7 +49,7 @@ StatusSelect { tagsModel : root.selectedOrigin.accounts tagsDelegate: StatusListItemTag { - bgColor: Utils.getColorForId(model.account.colorId) + bgColor: Utils.getColorForId(Theme.palette, model.account.colorId) height: 24 bgRadius: 6 tagClickable: false @@ -109,7 +109,7 @@ StatusSelect { tagsModel: menu.isHeader || menu.isOption? [] : model.keyPair.accounts tagsDelegate: StatusListItemTag { - bgColor: Utils.getColorForId(model.account.colorId) + bgColor: Utils.getColorForId(Theme.palette, model.account.colorId) height: 24 bgRadius: 6 tagClickable: false diff --git a/ui/imports/shared/popups/addaccount/states/Main.qml b/ui/imports/shared/popups/addaccount/states/Main.qml index 34852e79a76..68e548abc64 100644 --- a/ui/imports/shared/popups/addaccount/states/Main.qml +++ b/ui/imports/shared/popups/addaccount/states/Main.qml @@ -29,7 +29,7 @@ Item { colorSelection.selectedColorIndex = Math.floor(Math.random() * colorSelection.model.length) } else { - let ind = Utils.getColorIndexForId(root.store.addAccountModule.selectedColorId) + let ind = Utils.getColorIndexForId(Theme.palette, root.store.addAccountModule.selectedColorId) colorSelection.selectedColorIndex = ind } @@ -116,7 +116,7 @@ Item { text: root.store.addAccountModule.accountName input.isIconSelectable: true input.leftPadding: Theme.padding - input.asset.color: Utils.getColorForId(root.store.addAccountModule.selectedColorId) + input.asset.color: Utils.getColorForId(Theme.palette, root.store.addAccountModule.selectedColorId) onIconClicked: { d.openEmojiPopup(true) } @@ -171,7 +171,7 @@ Item { selectedColorIndex: -1 onSelectedColorChanged: { - root.store.addAccountModule.selectedColorId = Utils.getIdForColor(selectedColor) + root.store.addAccountModule.selectedColorId = Utils.getIdForColor(Theme.palette, selectedColor) } } diff --git a/ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml b/ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml index 0389650284b..f754b2aea8b 100644 --- a/ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml +++ b/ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml @@ -76,7 +76,7 @@ StatusListItem { name: root.keyPairImage? root.keyPairImage : root.keyPairIcon isImage: !!root.keyPairImage color: root.keyPairType === Constants.keycard.keyPairType.profile? - Utils.colorForPubkey(d.myPublicKey) : + Utils.colorForPubkey(Theme.palette, d.myPublicKey) : root.keyPairCardLocked? Theme.palette.dangerColor1 : Theme.palette.primaryColor1 letterSize: Math.max(4, asset.width / 2.4) charactersLen: 2 @@ -87,7 +87,7 @@ StatusListItem { tagsModel: root.keyPairAccounts tagsDelegate: StatusListItemTag { - bgColor: Utils.getColorForId(model.account.colorId) + bgColor: Utils.getColorForId(Theme.palette, model.account.colorId) height: Theme.bigPadding bgRadius: 6 tagClickable: root.tagClickable diff --git a/ui/imports/shared/popups/keycard/helpers/KeyPairUnknownItem.qml b/ui/imports/shared/popups/keycard/helpers/KeyPairUnknownItem.qml index 3e988ddc186..e73c6d57d2a 100644 --- a/ui/imports/shared/popups/keycard/helpers/KeyPairUnknownItem.qml +++ b/ui/imports/shared/popups/keycard/helpers/KeyPairUnknownItem.qml @@ -45,7 +45,7 @@ Rectangle { name: root.keyPairImage? root.keyPairImage : root.keyPairIcon isImage: !!root.keyPairImage color: root.keyPairKeyUid === userProfile.keyUid? - Utils.colorForPubkey(userProfile.pubKey) : + Utils.colorForPubkey(Theme.palette, userProfile.pubKey) : root.keyPairCardLocked? Theme.palette.dangerColor1 : Theme.palette.primaryColor1 letterSize: Math.max(4, asset.width / 2.4) charactersLen: 2 diff --git a/ui/imports/shared/popups/keycard/helpers/KeycardItem.qml b/ui/imports/shared/popups/keycard/helpers/KeycardItem.qml index d30af3294df..afc5235b09b 100644 --- a/ui/imports/shared/popups/keycard/helpers/KeycardItem.qml +++ b/ui/imports/shared/popups/keycard/helpers/KeycardItem.qml @@ -49,7 +49,7 @@ StatusListItem { name: root.keyPairImage? root.keyPairImage : root.keyPairIcon isImage: !!root.keyPairImage color: root.keyPairType === Constants.keycard.keyPairType.profile? - Utils.colorForPubkey(d.myPublicKey) : + Utils.colorForPubkey(Theme.palette, d.myPublicKey) : root.keycardLocked? Theme.palette.dangerColor1 : Theme.palette.primaryColor1 letterSize: Math.max(4, asset.width / 2.4) charactersLen: 2 @@ -60,7 +60,7 @@ StatusListItem { tagsModel: root.keyPairAccounts tagsDelegate: StatusListItemTag { - bgColor: Utils.getColorForId(model.account.colorId) + bgColor: Utils.getColorForId(Theme.palette, model.account.colorId) bgRadius: 6 height: Theme.bigPadding closeButtonVisible: false diff --git a/ui/imports/shared/popups/keycard/states/EnterName.qml b/ui/imports/shared/popups/keycard/states/EnterName.qml index bf856afb637..d29a8b69cb4 100644 --- a/ui/imports/shared/popups/keycard/states/EnterName.qml +++ b/ui/imports/shared/popups/keycard/states/EnterName.qml @@ -43,7 +43,7 @@ Item { let color = Theme.palette.customisationColorsArray[Math.floor(Math.random() * Theme.palette.customisationColorsArray.length)] let emoji = StatusQUtils.Emoji.getRandomEmoji(StatusQUtils.Emoji.size.verySmall) // TODO: Reuse status-go RandomWalletEmoji root.sharedKeycardModule.keyPairForProcessing.observedAccount.name = " " - root.sharedKeycardModule.keyPairForProcessing.observedAccount.colorId = Utils.getIdForColor(color) + root.sharedKeycardModule.keyPairForProcessing.observedAccount.colorId = Utils.getIdForColor(Theme.palette, color) root.sharedKeycardModule.keyPairForProcessing.observedAccount.emoji = emoji } } diff --git a/ui/imports/shared/popups/keycard/states/ManageAccounts.qml b/ui/imports/shared/popups/keycard/states/ManageAccounts.qml index e72bb60d9cf..ce4941dc780 100644 --- a/ui/imports/shared/popups/keycard/states/ManageAccounts.qml +++ b/ui/imports/shared/popups/keycard/states/ManageAccounts.qml @@ -46,7 +46,7 @@ Item { if (d.observedAccount.colorId.length === 0) { let color = Theme.palette.customisationColorsArray[Math.floor(Math.random() * Theme.palette.customisationColorsArray.length)] let emoji = StatusQUtils.Emoji.getRandomEmoji(StatusQUtils.Emoji.size.verySmall) // TODO: Reuse status-go RandomWalletEmoji - d.observedAccount.colorId = Utils.getIdForColor(color) + d.observedAccount.colorId = Utils.getIdForColor(root.Theme.palette, color) d.observedAccount.emoji = emoji } @@ -213,7 +213,7 @@ Item { input.acceptReturn: true input.isIconSelectable: true input.leftPadding: Theme.padding - input.asset.color: Utils.getColorForId(d.observedAccount.colorId) + input.asset.color: Utils.getColorForId(Theme.palette, d.observedAccount.colorId) input.asset.emoji: d.observedAccount.emoji onTextChanged: { @@ -247,7 +247,7 @@ Item { model: Theme.palette.customisationColorsArray onSelectedColorChanged: { - d.observedAccount.colorId = Utils.getIdForColor(selectedColor) + d.observedAccount.colorId = Utils.getIdForColor(Theme.palette, selectedColor) } } diff --git a/ui/imports/shared/popups/send/panels/RecipientSelectorPanel.qml b/ui/imports/shared/popups/send/panels/RecipientSelectorPanel.qml index b0016fadc66..24c97bd3b32 100644 --- a/ui/imports/shared/popups/send/panels/RecipientSelectorPanel.qml +++ b/ui/imports/shared/popups/send/panels/RecipientSelectorPanel.qml @@ -128,7 +128,7 @@ Item { address: model.address emoji: model.emoji - walletColor: Utils.getColorForId(model.colorId) + walletColor: Utils.getColorForId(Theme.palette, model.colorId) currencyBalance: model.currencyBalance walletType: model.walletType migratedToKeycard: model.migratedToKeycard ?? false diff --git a/ui/imports/shared/popups/send/views/RecipientView.qml b/ui/imports/shared/popups/send/views/RecipientView.qml index 308d15af760..823702003d3 100644 --- a/ui/imports/shared/popups/send/views/RecipientView.qml +++ b/ui/imports/shared/popups/send/views/RecipientView.qml @@ -158,7 +158,7 @@ Loader { name: !!modelData ? modelData.name : "" address: !!modelData ? modelData.address : "" emoji: !!modelData ? modelData.emoji : "" - walletColor: !!modelData ? Utils.getColorForId(modelData.colorId): "" + walletColor: !!modelData ? Utils.getColorForId(Theme.palette, modelData.colorId): "" currencyBalance: !!modelData ? modelData.currencyBalance : "" walletType: !!modelData ? modelData.walletType : "" migratedToKeycard: !!modelData ? modelData.migratedToKeycard ?? false : false diff --git a/ui/imports/shared/status/StatusSearchListPopup.qml b/ui/imports/shared/status/StatusSearchListPopup.qml index b63b28be1a7..f57bcecb103 100644 --- a/ui/imports/shared/status/StatusSearchListPopup.qml +++ b/ui/imports/shared/status/StatusSearchListPopup.qml @@ -99,7 +99,7 @@ StatusDropdown { } asset.width: 30 asset.height: 30 - asset.color: model ? model.color ? model.color : Utils.colorForColorId(model.colorId) : "" + asset.color: model ? model.color ? model.color : Utils.colorForColorId(Theme.palette, model.colorId) : "" asset.name: model ? model.icon : "" asset.emoji: model ? model.emoji : "" asset.charactersLen: 2 diff --git a/ui/imports/shared/views/ExistingContacts.qml b/ui/imports/shared/views/ExistingContacts.qml index a7b8277a42a..feb92357d4b 100644 --- a/ui/imports/shared/views/ExistingContacts.qml +++ b/ui/imports/shared/views/ExistingContacts.qml @@ -94,7 +94,7 @@ Item { icon.name: model.icon icon.width: 40 icon.height: 40 - icon.color: Utils.colorForColorId(model.colorId) + icon.color: Utils.colorForColorId(Theme.palette, model.colorId) onClicked: { root.contactClicked(model); diff --git a/ui/imports/shared/views/HistoryBetaTag.qml b/ui/imports/shared/views/HistoryBetaTag.qml index 62df69b08dc..f856907a189 100644 --- a/ui/imports/shared/views/HistoryBetaTag.qml +++ b/ui/imports/shared/views/HistoryBetaTag.qml @@ -29,7 +29,8 @@ InformationTag { function getExplorerLinks(model, hoveredLink) { let links = [] SQUtils.ModelUtils.forEach(model, function(network) { - links.push(Utils.getStyledLink(Utils.getChainExplorerName(network["shortName"]), network["blockExplorerURL"], hoveredLink)) + links.push(Utils.getStyledLink(Utils.getChainExplorerName(network["shortName"]), network["blockExplorerURL"], hoveredLink, + root.Theme.palette.directColor1, root.Theme.palette.primaryColor1)) }) return Utils.getEnumerationString(links, qsTr("or")) } diff --git a/ui/imports/shared/views/PickedContacts.qml b/ui/imports/shared/views/PickedContacts.qml index a3864a6958d..7a82d0c3fcc 100644 --- a/ui/imports/shared/views/PickedContacts.qml +++ b/ui/imports/shared/views/PickedContacts.qml @@ -45,7 +45,7 @@ Item { icon.width: 40 icon.height: 40 color: "transparent" - icon.color: Utils.colorForColorId(model.colorId) + icon.color: Utils.colorForColorId(Theme.palette, model.colorId) hoverEnabled: false } diff --git a/ui/imports/shared/views/ProfileDialogView.qml b/ui/imports/shared/views/ProfileDialogView.qml index 8bd70a1aff8..04994146b9f 100644 --- a/ui/imports/shared/views/ProfileDialogView.qml +++ b/ui/imports/shared/views/ProfileDialogView.qml @@ -222,7 +222,7 @@ Pane { name: d.mainDisplayName usesDefaultName: contactDetails.usesDefaultName image: contactDetails.largeImage - userColor: Utils.colorForColorId(contactDetails.colorId) + userColor: Utils.colorForColorId(Theme.palette, contactDetails.colorId) interactive: false imageWidth: 90 diff --git a/ui/imports/shared/views/SyncingDeviceView.qml b/ui/imports/shared/views/SyncingDeviceView.qml index 2cde8f80dae..61ed87fd6b8 100644 --- a/ui/imports/shared/views/SyncingDeviceView.qml +++ b/ui/imports/shared/views/SyncingDeviceView.qml @@ -49,7 +49,7 @@ Item { Layout.alignment: Qt.AlignHCenter name: root.userDisplayName usesDefaultName: root.usesDefaultName - userColor: Utils.colorForColorId(root.userColorId) + userColor: Utils.colorForColorId(Theme.palette, root.userColorId) image: root.userImage interactive: false imageWidth: 80 diff --git a/ui/imports/shared/views/chat/ChannelIdentifierView.qml b/ui/imports/shared/views/chat/ChannelIdentifierView.qml index 603c65a632d..8febcf37dd4 100644 --- a/ui/imports/shared/views/chat/ChannelIdentifierView.qml +++ b/ui/imports/shared/views/chat/ChannelIdentifierView.qml @@ -31,7 +31,7 @@ Column { asset { width: 120 height: 120 - color: root.chatType === Constants.chatType.oneToOne ? Utils.colorForPubkey(root.chatId) : root.chatColor + color: root.chatType === Constants.chatType.oneToOne ? Utils.colorForPubkey(Theme.palette, root.chatId) : root.chatColor emoji: root.chatEmoji name: root.chatIcon isImage: true diff --git a/ui/imports/shared/views/profile/ProfileShowcaseAccountsView.qml b/ui/imports/shared/views/profile/ProfileShowcaseAccountsView.qml index 42eb57a5455..f0e953bdac5 100644 --- a/ui/imports/shared/views/profile/ProfileShowcaseAccountsView.qml +++ b/ui/imports/shared/views/profile/ProfileShowcaseAccountsView.qml @@ -53,7 +53,7 @@ Item { implicitHeight: GridView.view.cellHeight - Theme.padding title: model.name subTitle: StatusQUtils.Utils.elideAndFormatWalletAddress(model.address) - asset.color: Utils.getColorForId(model.colorId) + asset.color: Utils.getColorForId(Theme.palette, model.colorId) asset.emoji: model.emoji ?? "" asset.name: asset.emoji || "filled-account" asset.isLetterIdenticon: asset.emoji diff --git a/ui/imports/shared/views/profile/ShareProfileDialog.qml b/ui/imports/shared/views/profile/ShareProfileDialog.qml index 19a46e13bc2..c498ca52f56 100644 --- a/ui/imports/shared/views/profile/ShareProfileDialog.qml +++ b/ui/imports/shared/views/profile/ShareProfileDialog.qml @@ -65,7 +65,7 @@ StatusDialog { name: root.displayName usesDefaultName: root.usesDefaultName image: root.largeImage - userColor: Utils.colorForColorId(root.colorId) + userColor: Utils.colorForColorId(Theme.palette, root.colorId) interactive: false imageWidth: 78 diff --git a/ui/imports/utils/Utils.qml b/ui/imports/utils/Utils.qml index d2a9aabe36a..c7bf1aa9b37 100644 --- a/ui/imports/utils/Utils.qml +++ b/ui/imports/utils/Utils.qml @@ -78,7 +78,7 @@ QtObject { `${link}` } - function getStyledLink(linkText, linkUrl, hoveredLink, textColor = Theme.palette.directColor1, linkColor = Theme.palette.primaryColor1, underlineLink = true) { + function getStyledLink(linkText, linkUrl, hoveredLink, textColor, linkColor, underlineLink = true) { return `