From 5b7a455eae99b72e1f95aeeb5d52eb54f009f55a Mon Sep 17 00:00:00 2001 From: Matt Cleinman <9295855+mcleinman@users.noreply.github.com> Date: Fri, 1 Nov 2024 17:00:07 -0400 Subject: [PATCH 1/4] VPN-6213 part 2 - move colors to one file and restructure --- nebula/ui/components/MZAlert.qml | 44 +-- nebula/ui/components/MZBoldInterLabel.qml | 2 +- nebula/ui/components/MZBoldLabel.qml | 2 +- nebula/ui/components/MZBottomSheet.qml | 4 +- nebula/ui/components/MZButton.qml | 4 +- nebula/ui/components/MZButtonBase.qml | 2 +- nebula/ui/components/MZButtonLoader.qml | 2 +- nebula/ui/components/MZCallout.qml | 4 +- nebula/ui/components/MZCancelButton.qml | 2 +- nebula/ui/components/MZCard.qml | 2 +- nebula/ui/components/MZCheckBox.qml | 12 +- nebula/ui/components/MZCheckBoxRow.qml | 2 +- nebula/ui/components/MZClickableRow.qml | 6 +- nebula/ui/components/MZComposerView.qml | 6 +- .../ui/components/MZExternalLinkListItem.qml | 2 +- nebula/ui/components/MZFlickable.qml | 2 +- nebula/ui/components/MZFocusBorder.qml | 2 +- nebula/ui/components/MZFocusOutline.qml | 2 +- nebula/ui/components/MZGreyLink.qml | 2 +- nebula/ui/components/MZHeaderLink.qml | 2 +- nebula/ui/components/MZHeadline.qml | 2 +- nebula/ui/components/MZHelpSheet.qml | 2 +- nebula/ui/components/MZIconAndLabel.qml | 2 +- nebula/ui/components/MZIconButton.qml | 2 +- nebula/ui/components/MZInformationCard.qml | 6 +- nebula/ui/components/MZInterLabel.qml | 2 +- nebula/ui/components/MZLightLabel.qml | 2 +- nebula/ui/components/MZLinkButton.qml | 6 +- nebula/ui/components/MZLinkRow.qml | 4 +- nebula/ui/components/MZList.qml | 2 +- nebula/ui/components/MZLogsButton.qml | 4 +- nebula/ui/components/MZMenu.qml | 2 +- nebula/ui/components/MZPill.qml | 4 +- nebula/ui/components/MZPopup.qml | 4 +- nebula/ui/components/MZRadioButtonLabel.qml | 2 +- nebula/ui/components/MZRadioDelegate.qml | 20 +- nebula/ui/components/MZSegmentedToggle.qml | 8 +- nebula/ui/components/MZSettingsItem.qml | 8 +- nebula/ui/components/MZSettingsToggle.qml | 14 +- nebula/ui/components/MZSignOut.qml | 4 +- nebula/ui/components/MZSimplePopup.qml | 4 +- .../components/MZStepProgressBarDelegate.qml | 6 +- nebula/ui/components/MZSubscriptionOption.qml | 14 +- nebula/ui/components/MZSubtitle.qml | 2 +- nebula/ui/components/MZSwipeAction.qml | 4 +- nebula/ui/components/MZSwipeDelegate.qml | 6 +- nebula/ui/components/MZTabNavigation.qml | 4 +- nebula/ui/components/MZTextBlock.qml | 2 +- nebula/ui/components/MZToggleCard.qml | 4 +- nebula/ui/components/MZToggleRow.qml | 2 +- nebula/ui/components/MZToolTip.qml | 4 +- nebula/ui/components/MZUIStates.qml | 6 +- nebula/ui/components/MZUserProfile.qml | 6 +- nebula/ui/components/MZVerticalSpacer.qml | 2 +- nebula/ui/components/MZViewBase.qml | 2 +- nebula/ui/components/forms/MZComboBox.qml | 6 +- .../ui/components/forms/MZInputBackground.qml | 2 +- nebula/ui/components/forms/MZRadioButton.qml | 16 +- nebula/ui/components/forms/MZTextArea.qml | 4 +- .../inAppAuth/MZInAppAuthenticationBase.qml | 2 +- .../inAppAuth/MZInAppAuthenticationInputs.qml | 4 +- .../MZInAppAuthenticationLegalDisclaimer.qml | 4 +- ...MZInAppAuthenticationPasswordCondition.qml | 2 +- .../MZInAppAuthenticationThirdParty.qml | 2 +- .../navigationBar/MZBottomNavigationBar.qml | 6 +- .../MZBottomNavigationBarButton.qml | 4 +- nebula/ui/themes/main/colors.js | 253 ++++++++++++++++++ nebula/ui/themes/main/theme.js | 253 ------------------ .../ViewDeleteAccountRequest.qml | 6 +- src/ui/main.qml | 4 +- src/ui/screens/ScreenCaptivePortal.qml | 2 +- src/ui/screens/ScreenViewLogs.qml | 6 +- src/ui/screens/devices/VPNDeviceListItem.qml | 2 +- .../screens/devices/VPNRemoveDevicePopup.qml | 6 +- src/ui/screens/devices/ViewDeviceLimit.qml | 2 +- src/ui/screens/devices/ViewDevices.qml | 2 +- src/ui/screens/getHelp/ViewGetHelp.qml | 8 +- .../developerMenu/ViewDeveloperMenu.qml | 2 +- .../getHelp/developerMenu/ViewFeatureList.qml | 4 +- src/ui/screens/home/ViewMultiHop.qml | 2 +- .../home/controller/ConnectionStability.qml | 6 +- .../home/controller/ConnectionTimer.qml | 2 +- .../home/controller/ControllerImage.qml | 2 +- .../home/controller/ControllerView.qml | 18 +- src/ui/screens/home/controller/VPNToggle.qml | 48 ++-- .../screens/home/controller/ip/IPAddress.qml | 2 +- src/ui/screens/home/servers/ServerLabel.qml | 2 +- src/ui/screens/home/servers/ServerList.qml | 4 +- src/ui/screens/initialize/ViewInitialize.qml | 12 +- src/ui/screens/messaging/ViewMessage.qml | 16 +- .../screens/messaging/ViewMessagesInbox.qml | 10 +- .../onboarding/OnboardingDataSlide.qml | 4 +- .../onboarding/OnboardingDevicesSlide.qml | 6 +- .../onboarding/OnboardingPrivacySlide.qml | 2 +- .../OnboardingStartSlideDesktop.qml | 2 +- .../onboarding/OnboardingStartSlideMobile.qml | 2 +- src/ui/screens/settings/ViewLanguage.qml | 2 +- src/ui/screens/settings/ViewReset.qml | 16 +- .../SubscriptionManagementItem.qml | 2 +- .../ViewSubscriptionManagement.qml | 6 +- .../appPermissions/AppPermissionsList.qml | 4 +- .../ViewSubscriptionNeeded.qml | 6 +- src/ui/sharedViews/ViewErrorFullScreen.qml | 2 +- src/ui/sharedViews/ViewUpdate.qml | 8 +- 104 files changed, 531 insertions(+), 531 deletions(-) diff --git a/nebula/ui/components/MZAlert.qml b/nebula/ui/components/MZAlert.qml index 32a32d3129..7fc386f90e 100644 --- a/nebula/ui/components/MZAlert.qml +++ b/nebula/ui/components/MZAlert.qml @@ -80,14 +80,14 @@ Rectangle { name: stateNames.info PropertyChanges { target: focusIndicators - colorScheme: MZTheme.theme.blueButton + colorScheme: MZTheme.colors.blueButton } PropertyChanges { target: style; - alertColor: MZTheme.theme.blue - alertHoverColor: MZTheme.theme.blueHovered - alertClickColor: MZTheme.theme.bluePressed + alertColor: MZTheme.colors.blue + alertHoverColor: MZTheme.colors.blueHovered + alertClickColor: MZTheme.colors.bluePressed fontcolor: MZTheme.colors.white closeIcon: whiteCloseIcon } @@ -96,15 +96,15 @@ Rectangle { name: stateNames.success PropertyChanges { target: focusIndicators - colorScheme: MZTheme.theme.greenAlert + colorScheme: MZTheme.colors.greenAlert } PropertyChanges { target: style; - alertColor: MZTheme.theme.greenAlert.defaultColor - alertHoverColor: MZTheme.theme.greenAlert.buttonHovered - alertClickColor: MZTheme.theme.greenAlert.buttonPressed - fontColor: MZTheme.theme.fontColorDark + alertColor: MZTheme.colors.greenAlert.defaultColor + alertHoverColor: MZTheme.colors.greenAlert.buttonHovered + alertClickColor: MZTheme.colors.greenAlert.buttonPressed + fontColor: MZTheme.colors.fontColorDark closeIcon: darkCloseIcon } }, @@ -113,14 +113,14 @@ Rectangle { PropertyChanges { target: focusIndicators - colorScheme: MZTheme.theme.redButton + colorScheme: MZTheme.colors.redButton } PropertyChanges { target: style; - alertColor: MZTheme.theme.red - alertHoverColor: MZTheme.theme.redHovered - alertClickColor: MZTheme.theme.redPressed + alertColor: MZTheme.colors.red + alertHoverColor: MZTheme.colors.redHovered + alertClickColor: MZTheme.colors.redPressed fontcolor: MZTheme.colors.white closeIcon: whiteCloseIcon } @@ -134,10 +134,10 @@ Rectangle { PropertyChanges { target: style - alertColor: MZTheme.theme.orange - alertHoverColor: MZTheme.theme.orangeHovered - alertClickColor: MZTheme.theme.orangePressed - fontColor: MZTheme.theme.fontColorDark + alertColor: MZTheme.colors.orange + alertHoverColor: MZTheme.colors.orangeHovered + alertClickColor: MZTheme.colors.orangePressed + fontColor: MZTheme.colors.fontColorDark closeIcon: darkCloseIcon } } @@ -183,7 +183,7 @@ Rectangle { Rectangle { id: labelWrapper height: label.paintedHeight + MZTheme.theme.windowMargin - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent anchors.left: alertAction.left width: alertAction.width - MZTheme.theme.rowHeight anchors.verticalCenter: parent.verticalCenter @@ -306,16 +306,16 @@ Rectangle { id: focusIndicators anchors.fill: closeButton.activeFocus ? closeButton : alertAction anchors.margins: -3 - border.color: colorScheme ? colorScheme.focusOutline : MZTheme.theme.transparent + border.color: colorScheme ? colorScheme.focusOutline : MZTheme.colors.transparent border.width: 3 visible: closeButton.activeFocus || alertAction.activeFocus - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent radius: MZTheme.theme.cornerRadius + (anchors.margins * -1) Rectangle { - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent border.width: 2 - border.color: parent.colorScheme ? parent.colorScheme.focusBorder : MZTheme.theme.transparent + border.color: parent.colorScheme ? parent.colorScheme.focusBorder : MZTheme.colors.transparent radius: MZTheme.theme.cornerRadius anchors.fill: parent anchors.margins: 3 diff --git a/nebula/ui/components/MZBoldInterLabel.qml b/nebula/ui/components/MZBoldInterLabel.qml index b70a556722..ecc8aaa140 100644 --- a/nebula/ui/components/MZBoldInterLabel.qml +++ b/nebula/ui/components/MZBoldInterLabel.qml @@ -11,7 +11,7 @@ Text { font.family: MZTheme.theme.fontInterSemiBoldFamily lineHeightMode: Text.FixedHeight lineHeight: MZTheme.theme.controllerInterLineHeight - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark wrapMode: Text.Wrap horizontalAlignment: Qt.AlignLeft diff --git a/nebula/ui/components/MZBoldLabel.qml b/nebula/ui/components/MZBoldLabel.qml index e35080b61b..070ff9136c 100644 --- a/nebula/ui/components/MZBoldLabel.qml +++ b/nebula/ui/components/MZBoldLabel.qml @@ -11,7 +11,7 @@ import Mozilla.Shared 1.0 Label { font.pixelSize: MZTheme.theme.fontSize font.family: MZTheme.theme.fontBoldFamily - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark horizontalAlignment: Qt.AlignLeft Accessible.role: Accessible.StaticText diff --git a/nebula/ui/components/MZBottomSheet.qml b/nebula/ui/components/MZBottomSheet.qml index 52aecbf4a8..e8cd462f96 100644 --- a/nebula/ui/components/MZBottomSheet.qml +++ b/nebula/ui/components/MZBottomSheet.qml @@ -68,7 +68,7 @@ Loader { background: Rectangle { radius: 8 - color: MZTheme.theme.bgColor + color: MZTheme.colors.bgColor Rectangle { color: parent.color @@ -79,7 +79,7 @@ Loader { } Overlay.modal: Rectangle { - color: MZTheme.theme.overlayBackground + color: MZTheme.colors.overlayBackground } } } diff --git a/nebula/ui/components/MZButton.qml b/nebula/ui/components/MZButton.qml index 0154dc70f1..e7d4d2f463 100644 --- a/nebula/ui/components/MZButton.qml +++ b/nebula/ui/components/MZButton.qml @@ -9,7 +9,7 @@ import QtQuick.Layouts 1.14 import Mozilla.Shared 1.0 MZButtonBase { - property var colorScheme: MZTheme.theme.blueButton + property var colorScheme: MZTheme.colors.blueButton property int fontSize: MZTheme.theme.fontSize property alias label: label @@ -50,7 +50,7 @@ MZButtonBase { contentItem: Label { id: label - color: MZTheme.theme.white + color: MZTheme.colors.white text: button.text horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter diff --git a/nebula/ui/components/MZButtonBase.qml b/nebula/ui/components/MZButtonBase.qml index 41915c4f15..d379699f31 100644 --- a/nebula/ui/components/MZButtonBase.qml +++ b/nebula/ui/components/MZButtonBase.qml @@ -61,7 +61,7 @@ RoundButton { } background: Rectangle { - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent } } diff --git a/nebula/ui/components/MZButtonLoader.qml b/nebula/ui/components/MZButtonLoader.qml index 2ec80ed302..9b6985bfb5 100644 --- a/nebula/ui/components/MZButtonLoader.qml +++ b/nebula/ui/components/MZButtonLoader.qml @@ -14,7 +14,7 @@ Rectangle { anchors.margins: -1 radius: MZTheme.theme.cornerRadius opacity: 0 - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent state: "inactive" diff --git a/nebula/ui/components/MZCallout.qml b/nebula/ui/components/MZCallout.qml index 25dda55177..84c44963ec 100644 --- a/nebula/ui/components/MZCallout.qml +++ b/nebula/ui/components/MZCallout.qml @@ -22,7 +22,7 @@ RowLayout { Rectangle { Layout.preferredHeight: MZTheme.theme.iconSize * 1.5 Layout.preferredWidth: MZTheme.theme.iconSize * 1.5 - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent MZIcon { id: img @@ -35,7 +35,7 @@ RowLayout { MZTextBlock { id: callout - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark Layout.fillWidth: true font.pixelSize: MZTheme.theme.fontSize verticalAlignment: Text.AlignVCenter diff --git a/nebula/ui/components/MZCancelButton.qml b/nebula/ui/components/MZCancelButton.qml index 79e1e01866..d0c38bd788 100644 --- a/nebula/ui/components/MZCancelButton.qml +++ b/nebula/ui/components/MZCancelButton.qml @@ -9,5 +9,5 @@ import components 0.1 MZLinkButton { labelText: MZI18n.InAppSupportWorkflowSupportSecondaryActionText // "Cancel" fontName: MZTheme.theme.fontBoldFamily - linkColor: MZTheme.theme.redLinkButton + linkColor: MZTheme.colors.redLinkButton } diff --git a/nebula/ui/components/MZCard.qml b/nebula/ui/components/MZCard.qml index b48f412981..9e1caf5217 100644 --- a/nebula/ui/components/MZCard.qml +++ b/nebula/ui/components/MZCard.qml @@ -23,7 +23,7 @@ MZButtonBase { } MZUIStates { - colorScheme: MZTheme.theme.card + colorScheme: MZTheme.colors.card radius: parent.radius } diff --git a/nebula/ui/components/MZCheckBox.qml b/nebula/ui/components/MZCheckBox.qml index 7104103b01..c6ca4dd5ac 100644 --- a/nebula/ui/components/MZCheckBox.qml +++ b/nebula/ui/components/MZCheckBox.qml @@ -56,7 +56,7 @@ CheckBox { PropertyChanges { target: checkBoxIndicator - border.color: checkBox.checked || checkBox.activeFocus ? MZTheme.theme.blue : MZTheme.theme.fontColor + border.color: checkBox.checked || checkBox.activeFocus ? MZTheme.colors.blue : MZTheme.colors.fontColor } }, @@ -65,7 +65,7 @@ CheckBox { PropertyChanges { target: checkBoxIndicator - border.color: checkBox.checked ? MZTheme.theme.bluePressed : MZTheme.theme.fontColorDark + border.color: checkBox.checked ? MZTheme.colors.bluePressed : MZTheme.colors.fontColorDark } }, State { @@ -73,7 +73,7 @@ CheckBox { PropertyChanges { target: checkBoxIndicator - border.color: if(checkBox.enabled) checkBox.checked || checkBox.activeFocus ? MZTheme.theme.blueHovered : MZTheme.theme.fontColorDark + border.color: if(checkBox.enabled) checkBox.checked || checkBox.activeFocus ? MZTheme.colors.blueHovered : MZTheme.colors.fontColorDark } } @@ -103,8 +103,8 @@ CheckBox { height: MZTheme.theme.checkBoxHeightWidth width: MZTheme.theme.checkBoxHeightWidth - color: MZTheme.theme.bgColor - border.color: checkBox.checked ? MZTheme.theme.blue : MZTheme.theme.fontColor + color: MZTheme.colors.bgColor + border.color: checkBox.checked ? MZTheme.colors.blue : MZTheme.colors.fontColor border.width: 2 radius: MZTheme.theme.cornerRadius antialiasing: true @@ -114,7 +114,7 @@ CheckBox { visible: true anchors.margins: -3 focusedComponent: checkBox - focusColorScheme: MZTheme.theme.blueButton + focusColorScheme: MZTheme.colors.blueButton } Behavior on border.color { diff --git a/nebula/ui/components/MZCheckBoxRow.qml b/nebula/ui/components/MZCheckBoxRow.qml index e1cfdb1554..6b5b844c7e 100644 --- a/nebula/ui/components/MZCheckBoxRow.qml +++ b/nebula/ui/components/MZCheckBoxRow.qml @@ -44,7 +44,7 @@ RowLayout { Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter Layout.fillWidth: true text: labelText - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark horizontalAlignment: Text.AlignLeft visible: !!labelText.length diff --git a/nebula/ui/components/MZClickableRow.qml b/nebula/ui/components/MZClickableRow.qml index 07334c6518..6effde6338 100644 --- a/nebula/ui/components/MZClickableRow.qml +++ b/nebula/ui/components/MZClickableRow.qml @@ -12,7 +12,7 @@ MZButtonBase { property bool rowShouldBeDisabled: false property string accessibleName: "" - property var backgroundColor: MZTheme.theme.iconButtonLightBackground + property var backgroundColor: MZTheme.colors.iconButtonLightBackground property var handleMouseClick: function() { mainRow.clicked(); } property bool canGrowVertical: false @@ -47,8 +47,8 @@ MZButtonBase { anchors.top: mainRow.top radius: MZTheme.theme.cornerRadius border.width: MZTheme.theme.focusBorderWidth - border.color: MZTheme.theme.transparent - color: MZTheme.theme.transparent + border.color: MZTheme.colors.transparent + color: MZTheme.colors.transparent opacity: rowVisualStates.state === MZTheme.theme.uiState.stateFocused ? 1 : 0 diff --git a/nebula/ui/components/MZComposerView.qml b/nebula/ui/components/MZComposerView.qml index 5fb700981d..3895b444ee 100644 --- a/nebula/ui/components/MZComposerView.qml +++ b/nebula/ui/components/MZComposerView.qml @@ -94,7 +94,7 @@ ColumnLayout { text: loader.composerBlock.text font.pixelSize: MZTheme.theme.fontSizeSmall - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignLeft } } @@ -112,7 +112,7 @@ ColumnLayout { text: `<${listType} style='margin-left: -24px;-qt-list-indent:1;'>%1`.arg(tagsList.join("")) textFormat: Text.RichText font.pixelSize: MZTheme.theme.fontSizeSmall - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignLeft Accessible.name: tagsList.join(".\n").replace(repeater.indentTagRegex, "") lineHeight: 20 @@ -128,7 +128,7 @@ ColumnLayout { implicitHeight: MZTheme.theme.rowHeight text: loader.composerBlock.text - colorScheme: loader.composerBlock.style === MZComposerBlockButton.Primary ? MZTheme.theme.blueButton : MZTheme.theme.redButton + colorScheme: loader.composerBlock.style === MZComposerBlockButton.Primary ? MZTheme.colors.blueButton : MZTheme.colors.redButton onClicked: loader.composerBlock.click() } diff --git a/nebula/ui/components/MZExternalLinkListItem.qml b/nebula/ui/components/MZExternalLinkListItem.qml index 17ea848955..a9df693a0c 100644 --- a/nebula/ui/components/MZExternalLinkListItem.qml +++ b/nebula/ui/components/MZExternalLinkListItem.qml @@ -13,7 +13,7 @@ MZClickableRow { property string iconSource: "qrc:/nebula/resources/externalLink.svg" property alias iconMirror: icon.mirror - backgroundColor: MZTheme.theme.clickableRowBlue + backgroundColor: MZTheme.colors.clickableRowBlue RowLayout { anchors.fill: parent diff --git a/nebula/ui/components/MZFlickable.qml b/nebula/ui/components/MZFlickable.qml index b0130fa77d..a456e2e021 100644 --- a/nebula/ui/components/MZFlickable.qml +++ b/nebula/ui/components/MZFlickable.qml @@ -45,7 +45,7 @@ Flickable { anchors.rightMargin: Qt.platform.os === "osx" ? 2 : 0 background: Rectangle { - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent anchors.fill: parent } diff --git a/nebula/ui/components/MZFocusBorder.qml b/nebula/ui/components/MZFocusBorder.qml index 149891dc1e..8e7028658f 100644 --- a/nebula/ui/components/MZFocusBorder.qml +++ b/nebula/ui/components/MZFocusBorder.qml @@ -10,7 +10,7 @@ Rectangle { id: focusInnerBorder - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent anchors.fill: parent radius: parent.radius border.width: MZTheme.theme.focusBorderWidth diff --git a/nebula/ui/components/MZFocusOutline.qml b/nebula/ui/components/MZFocusOutline.qml index 7476ab7ca3..a81ce8c184 100644 --- a/nebula/ui/components/MZFocusOutline.qml +++ b/nebula/ui/components/MZFocusOutline.qml @@ -8,7 +8,7 @@ import Mozilla.Shared 1.0 Rectangle { property variant focusedComponent - property var focusColorScheme: MZTheme.theme.blueButton + property var focusColorScheme: MZTheme.colors.blueButton property real setMargins: -3 color: focusColorScheme.focusOutline diff --git a/nebula/ui/components/MZGreyLink.qml b/nebula/ui/components/MZGreyLink.qml index 68a2133d91..7b5a4a6534 100644 --- a/nebula/ui/components/MZGreyLink.qml +++ b/nebula/ui/components/MZGreyLink.qml @@ -9,5 +9,5 @@ import Mozilla.Shared 1.0 MZLinkButton { fontSize: MZTheme.theme.fontSizeSmallest Layout.preferredHeight: 18 - linkColor: MZTheme.theme.greyLink + linkColor: MZTheme.colors.greyLink } diff --git a/nebula/ui/components/MZHeaderLink.qml b/nebula/ui/components/MZHeaderLink.qml index 1bfa621882..d0f4d45b26 100644 --- a/nebula/ui/components/MZHeaderLink.qml +++ b/nebula/ui/components/MZHeaderLink.qml @@ -15,6 +15,6 @@ MZLinkButton { rightMargin: MZTheme.theme.listSpacing * 1.5 } horizontalPadding: MZTheme.theme.listSpacing * 0.5 - linkColor: isLightTheme ? MZTheme.theme.blueButton : MZTheme.theme.whiteButton + linkColor: isLightTheme ? MZTheme.colors.blueButton : MZTheme.colors.whiteButton width: contentItem.implicitWidth + leftPadding + rightPadding } diff --git a/nebula/ui/components/MZHeadline.qml b/nebula/ui/components/MZHeadline.qml index c8afd9e16f..2f55a211fc 100644 --- a/nebula/ui/components/MZHeadline.qml +++ b/nebula/ui/components/MZHeadline.qml @@ -12,7 +12,7 @@ Text { horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark font.family: MZTheme.theme.fontFamily font.pixelSize: MZTheme.theme.fontSizeLarge lineHeightMode: Text.FixedHeight diff --git a/nebula/ui/components/MZHelpSheet.qml b/nebula/ui/components/MZHelpSheet.qml index 33b3355297..631cfb6ed5 100644 --- a/nebula/ui/components/MZHelpSheet.qml +++ b/nebula/ui/components/MZHelpSheet.qml @@ -214,7 +214,7 @@ MZBottomSheet { text: loader.composerBlock.text font.pixelSize: MZTheme.theme.fontSizeSmall - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor lineHeight: 21 horizontalAlignment: Text.AlignLeft } diff --git a/nebula/ui/components/MZIconAndLabel.qml b/nebula/ui/components/MZIconAndLabel.qml index 8d29602c3d..e9a3cef585 100644 --- a/nebula/ui/components/MZIconAndLabel.qml +++ b/nebula/ui/components/MZIconAndLabel.qml @@ -12,7 +12,7 @@ RowLayout { id: iconAndLabel property alias icon: icon.source property alias title: title.text - property string fontColor: MZTheme.theme.fontColorDark + property string fontColor: MZTheme.colors.fontColorDark property bool showIndicator: false Layout.alignment: Qt.AlignLeft diff --git a/nebula/ui/components/MZIconButton.qml b/nebula/ui/components/MZIconButton.qml index 6ebdda9b7e..883c4eaaac 100644 --- a/nebula/ui/components/MZIconButton.qml +++ b/nebula/ui/components/MZIconButton.qml @@ -11,7 +11,7 @@ MZButtonBase { id: iconButton property bool skipEnsureVisible: false property var accessibleName - property var buttonColorScheme: MZTheme.theme.iconButtonLightBackground + property var buttonColorScheme: MZTheme.colors.iconButtonLightBackground property alias mouseArea: mouseArea property alias backgroundRadius: uiStates.radius property alias uiStatesVisible: uiStates.visible diff --git a/nebula/ui/components/MZInformationCard.qml b/nebula/ui/components/MZInformationCard.qml index 47381962a6..fe51134c51 100644 --- a/nebula/ui/components/MZInformationCard.qml +++ b/nebula/ui/components/MZInformationCard.qml @@ -21,7 +21,7 @@ Rectangle { Error } - color: MZTheme.theme.white + color: MZTheme.colors.white radius: 8 property int cardType: MZInformationCard.CardType.Error @@ -42,7 +42,7 @@ Rectangle { id: dropShadowSource anchors.fill: card - color: MZTheme.theme.white + color: MZTheme.colors.white radius: card.radius } @@ -73,7 +73,7 @@ Rectangle { } width: 8 - color: MZTheme.theme.white + color: MZTheme.colors.white } function getStripColor() { diff --git a/nebula/ui/components/MZInterLabel.qml b/nebula/ui/components/MZInterLabel.qml index 9e8650abc4..272e21fa5b 100644 --- a/nebula/ui/components/MZInterLabel.qml +++ b/nebula/ui/components/MZInterLabel.qml @@ -15,7 +15,7 @@ Text { lineHeightMode: Text.FixedHeight lineHeight: MZTheme.theme.labelLineHeight wrapMode: Text.Wrap - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark Accessible.role: Accessible.StaticText Accessible.name: text diff --git a/nebula/ui/components/MZLightLabel.qml b/nebula/ui/components/MZLightLabel.qml index 62955a0553..aa9ecbe13c 100644 --- a/nebula/ui/components/MZLightLabel.qml +++ b/nebula/ui/components/MZLightLabel.qml @@ -11,6 +11,6 @@ import Mozilla.Shared 1.0 Label { font.pixelSize: MZTheme.theme.fontSize font.family: MZTheme.theme.fontFamily - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor Accessible.ignored: !visible } diff --git a/nebula/ui/components/MZLinkButton.qml b/nebula/ui/components/MZLinkButton.qml index 5d2329aca7..9d3ecde757 100644 --- a/nebula/ui/components/MZLinkButton.qml +++ b/nebula/ui/components/MZLinkButton.qml @@ -13,8 +13,8 @@ MZButtonBase { property string labelText property variant fontName: MZTheme.theme.fontInterFamily - property var baseColor: MZTheme.theme.linkButton - property var linkColor: MZTheme.theme.blueButton + property var baseColor: MZTheme.colors.linkButton + property var linkColor: MZTheme.colors.blueButton property var fontSize: MZTheme.theme.fontSize property real textAlignment: Text.AlignHCenter property Component iconComponent @@ -111,7 +111,7 @@ MZButtonBase { background: Rectangle { id: backgroundRect - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent } contentItem: RowLayout { diff --git a/nebula/ui/components/MZLinkRow.qml b/nebula/ui/components/MZLinkRow.qml index 7504f4c6bc..8e81605b47 100644 --- a/nebula/ui/components/MZLinkRow.qml +++ b/nebula/ui/components/MZLinkRow.qml @@ -31,7 +31,7 @@ RowLayout { id: label Layout.fillWidth: true text: "" - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark horizontalAlignment: Text.AlignLeft visible: !!text.length Layout.topMargin: 10 @@ -64,7 +64,7 @@ RowLayout { Layout.alignment: Qt.AlignTop Layout.preferredHeight: 50 Layout.preferredWidth: 50 - buttonColorScheme: MZTheme.theme.clickableRowBlue + buttonColorScheme: MZTheme.colors.clickableRowBlue accessibleName: title MZIcon { source: "qrc:/nebula/resources/externalLink.svg" diff --git a/nebula/ui/components/MZList.qml b/nebula/ui/components/MZList.qml index 42a4e3353c..60900db5c5 100644 --- a/nebula/ui/components/MZList.qml +++ b/nebula/ui/components/MZList.qml @@ -36,7 +36,7 @@ ListView { anchors.rightMargin: Qt.platform.os === "osx" ? 2 : 0 background: Rectangle { - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent anchors.fill: parent } diff --git a/nebula/ui/components/MZLogsButton.qml b/nebula/ui/components/MZLogsButton.qml index fa5bae1548..b9879b781d 100644 --- a/nebula/ui/components/MZLogsButton.qml +++ b/nebula/ui/components/MZLogsButton.qml @@ -23,7 +23,7 @@ MZButtonBase { Accessible.name: buttonText MZUIStates { - colorScheme: MZTheme.theme.iconButtonLightBackground + colorScheme: MZTheme.colors.iconButtonLightBackground radius: 0 } @@ -48,7 +48,7 @@ MZButtonBase { Text { text: buttonText - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor font.pixelSize: 11 verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter diff --git a/nebula/ui/components/MZMenu.qml b/nebula/ui/components/MZMenu.qml index 0d86fb2f13..aa3ec9988b 100644 --- a/nebula/ui/components/MZMenu.qml +++ b/nebula/ui/components/MZMenu.qml @@ -34,7 +34,7 @@ Item { Rectangle { id: menuBackground - color: MZTheme.theme.bgColor + color: MZTheme.colors.bgColor anchors.fill: parent } diff --git a/nebula/ui/components/MZPill.qml b/nebula/ui/components/MZPill.qml index 676b61909b..c72ba465fc 100644 --- a/nebula/ui/components/MZPill.qml +++ b/nebula/ui/components/MZPill.qml @@ -10,8 +10,8 @@ Item { id: pill property string text: "" - property string background: MZTheme.theme.bgColor - property string color: MZTheme.theme.fontColorDark + property string background: MZTheme.colors.bgColor + property string color: MZTheme.colors.fontColorDark height: label.implicitHeight width: label.implicitWidth + label.font.pixelSize * 1.5 diff --git a/nebula/ui/components/MZPopup.qml b/nebula/ui/components/MZPopup.qml index af3b8aea06..eaf86e9609 100644 --- a/nebula/ui/components/MZPopup.qml +++ b/nebula/ui/components/MZPopup.qml @@ -76,7 +76,7 @@ Popup { id: popupBackground anchors.fill: parent - color: MZTheme.theme.bgColor + color: MZTheme.colors.bgColor radius: 8 Rectangle { @@ -125,7 +125,7 @@ Popup { Overlay.modal: Rectangle { id: overlayBackground - color: MZTheme.theme.overlayBackground + color: MZTheme.colors.overlayBackground Behavior on opacity { NumberAnimation { diff --git a/nebula/ui/components/MZRadioButtonLabel.qml b/nebula/ui/components/MZRadioButtonLabel.qml index 10cdb67dc2..709db3ccc1 100644 --- a/nebula/ui/components/MZRadioButtonLabel.qml +++ b/nebula/ui/components/MZRadioButtonLabel.qml @@ -11,6 +11,6 @@ import Mozilla.Shared 1.0 Label { font.family: MZTheme.theme.fontInterFamily font.pixelSize: MZTheme.theme.fontSize - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark Accessible.ignored: !visible } diff --git a/nebula/ui/components/MZRadioDelegate.qml b/nebula/ui/components/MZRadioDelegate.qml index 2ec7e3dee8..c4f4980782 100644 --- a/nebula/ui/components/MZRadioDelegate.qml +++ b/nebula/ui/components/MZRadioDelegate.qml @@ -70,13 +70,13 @@ RadioDelegate { PropertyChanges { target: radioButtonInsetCircle - color: radioControl.checked ? MZTheme.theme.bluePressed : MZTheme.theme.greyPressed + color: radioControl.checked ? MZTheme.colors.bluePressed : MZTheme.colors.greyPressed scale: 0.55 } PropertyChanges { target: radioButton - border.color: radioControl.checked ? MZTheme.theme.bluePressed : MZTheme.theme.fontColorDark + border.color: radioControl.checked ? MZTheme.colors.bluePressed : MZTheme.colors.fontColorDark } }, @@ -86,13 +86,13 @@ RadioDelegate { PropertyChanges { target: radioButtonInsetCircle - color: radioControl.checked ? MZTheme.theme.blue : MZTheme.theme.bgColor + color: radioControl.checked ? MZTheme.colors.blue : MZTheme.colors.bgColor scale: 0.6 } PropertyChanges { target: radioButton - border.color: radioControl.checked || radioControl.activeFocus ? MZTheme.theme.blue : MZTheme.theme.fontColor + border.color: radioControl.checked || radioControl.activeFocus ? MZTheme.colors.blue : MZTheme.colors.fontColor } }, @@ -101,13 +101,13 @@ RadioDelegate { PropertyChanges { target: radioButtonInsetCircle - color: radioControl.checked ? MZTheme.theme.bluePressed : MZTheme.theme.greyHovered + color: radioControl.checked ? MZTheme.colors.bluePressed : MZTheme.colors.greyHovered scale: 0.6 } PropertyChanges { target: radioButton - border.color: radioControl.checked ? MZTheme.theme.bluePressed : MZTheme.theme.fontColor + border.color: radioControl.checked ? MZTheme.colors.bluePressed : MZTheme.colors.fontColor } }, @@ -117,13 +117,13 @@ RadioDelegate { PropertyChanges { target: radioButtonInsetCircle - color: MZTheme.theme.bgColor + color: MZTheme.colors.bgColor scale: 0.6 } PropertyChanges { target: radioButton - border.color: MZTheme.theme.greyButton.defaultColor + border.color: MZTheme.colors.greyButton.defaultColor } } @@ -144,7 +144,7 @@ RadioDelegate { } background: Rectangle { - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent } MZMouseArea { @@ -164,7 +164,7 @@ RadioDelegate { implicitHeight: 20 radius: implicitWidth * 0.5 border.width: MZTheme.theme.focusBorderWidth - color: MZTheme.theme.bgColor + color: MZTheme.colors.bgColor antialiasing: true smooth: true onActiveFocusChanged: if (activeFocus) parent.forceActiveFocus() diff --git a/nebula/ui/components/MZSegmentedToggle.qml b/nebula/ui/components/MZSegmentedToggle.qml index a6a6d91145..fb3145475a 100644 --- a/nebula/ui/components/MZSegmentedToggle.qml +++ b/nebula/ui/components/MZSegmentedToggle.qml @@ -20,7 +20,7 @@ Rectangle { implicitHeight: MZTheme.theme.rowHeight activeFocusOnTab: true - color: MZTheme.theme.input.highlight + color: MZTheme.colors.input.highlight radius: 24 onFocusChanged: if(focus) options.itemAt(selectedIndex).focus = true @@ -56,7 +56,7 @@ Rectangle { } implicitWidth: (parent.width - 8) / model.count - color: MZTheme.theme.white + color: MZTheme.colors.white radius: parent.radius Behavior on anchors.leftMargin { @@ -68,7 +68,7 @@ Rectangle { Rectangle { id: focusOutline - color: MZTheme.theme.blueButton.focusOutline + color: MZTheme.colors.blueButton.focusOutline anchors.fill: parent anchors.margins: -3 radius: parent.radius + anchors.margins @@ -165,7 +165,7 @@ Rectangle { case MZTheme.theme.uiState.statePressed: return MZTheme.colors.purple70 case MZTheme.theme.uiState.stateHovered: - return MZTheme.theme.fontColorDark + return MZTheme.colors.fontColorDark default: return MZTheme.colors.grey40 } diff --git a/nebula/ui/components/MZSettingsItem.qml b/nebula/ui/components/MZSettingsItem.qml index 1bfecbde92..39a507bcdb 100644 --- a/nebula/ui/components/MZSettingsItem.qml +++ b/nebula/ui/components/MZSettingsItem.qml @@ -14,7 +14,7 @@ MZClickableRow { property alias imageLeftSrc: icon.source property alias imageRightSrc: imageRight.source property alias imageRightMirror: imageRight.mirror - property string fontColor: MZTheme.theme.fontColorDark + property string fontColor: MZTheme.colors.fontColorDark property bool _loaderVisible: false accessibleName: settingTitle @@ -39,7 +39,7 @@ MZClickableRow { Layout.preferredHeight: MZTheme.theme.rowHeight Layout.preferredWidth: icon.width Layout.alignment: Qt.AlignTop - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent MZIcon { id: icon @@ -66,7 +66,7 @@ MZClickableRow { Layout.alignment: Qt.AlignRight | Qt.AlignVCenter Layout.preferredHeight: MZTheme.theme.rowHeight Layout.preferredWidth: MZTheme.theme.rowHeight - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent MZIcon { id: imageRight @@ -78,7 +78,7 @@ MZClickableRow { MZButtonLoader { id: loader - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent iconUrl: "qrc:/nebula/resources/spinner.svg" state: _loaderVisible ? "active" : "inactive" } diff --git a/nebula/ui/components/MZSettingsToggle.qml b/nebula/ui/components/MZSettingsToggle.qml index fd8e3bfad4..d4fec19c43 100644 --- a/nebula/ui/components/MZSettingsToggle.qml +++ b/nebula/ui/components/MZSettingsToggle.qml @@ -11,7 +11,7 @@ import "qrc:/nebula/utils/MZUiUtils.js" as MZUiUtils CheckBox { id: vpnSettingsToggle - property var toggleColor: MZTheme.theme.vpnToggleConnected + property var toggleColor: MZTheme.colors.vpnToggleConnected property var uiState: MZTheme.theme.uiState property alias forceFocus: vpnSettingsToggle.focus property string accessibleName @@ -35,7 +35,7 @@ CheckBox { PropertyChanges { target: vpnSettingsToggle - toggleColor: MZTheme.theme.vpnToggleConnected + toggleColor: MZTheme.colors.vpnToggleConnected } PropertyChanges { @@ -50,7 +50,7 @@ CheckBox { PropertyChanges { target: vpnSettingsToggle - toggleColor: MZTheme.theme.vpnToggleDisconnected + toggleColor: MZTheme.colors.vpnToggleDisconnected } @@ -76,7 +76,7 @@ CheckBox { anchors.fill: hoverPressHandler border.color: toggleColor.focusBorder - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent anchors.margins: -1 radius: 50 opacity: vpnSettingsToggle.activeFocus ? 1: 0 @@ -88,7 +88,7 @@ CheckBox { height: 18 width: 18 radius: 9 - color: MZTheme.theme.white + color: MZTheme.colors.white z: 1 anchors.verticalCenter: vpnSettingsToggle.verticalCenter } @@ -165,7 +165,7 @@ CheckBox { id: uiPlaceholder /* Binding loop hack-around */ height: 24 width: 45 - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent } indicator: MZUIStates { @@ -175,6 +175,6 @@ CheckBox { colorScheme: toggleColor radius: height / 2 showFocusRings: false - startingState: checked ? MZTheme.theme.vpnToggleConnected.defaultColor : MZTheme.theme.vpnToggleDisconnected.defaultColor + startingState: checked ? MZTheme.colors.vpnToggleConnected.defaultColor : MZTheme.colors.vpnToggleDisconnected.defaultColor } } diff --git a/nebula/ui/components/MZSignOut.qml b/nebula/ui/components/MZSignOut.qml index 7a4841b2e1..c8d8a59d6d 100644 --- a/nebula/ui/components/MZSignOut.qml +++ b/nebula/ui/components/MZSignOut.qml @@ -21,9 +21,9 @@ MZFooterLink { function getLinkColor() { switch (colorStrength) { case MZSignOut.ColorStrength.Standard: - return MZTheme.theme.redLinkButton + return MZTheme.colors.redLinkButton case MZSignOut.ColorStrength.Soft: - return MZTheme.theme.blueButton + return MZTheme.colors.blueButton default: return console.error("Unable to create view for footer link of type: " + colorStrength) } diff --git a/nebula/ui/components/MZSimplePopup.qml b/nebula/ui/components/MZSimplePopup.qml index f4ca961805..8506657847 100644 --- a/nebula/ui/components/MZSimplePopup.qml +++ b/nebula/ui/components/MZSimplePopup.qml @@ -37,7 +37,7 @@ MZPopup { Layout.topMargin: MZTheme.theme.vSpacingSmall Layout.fillWidth: true - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark font.pixelSize: MZTheme.theme.fontSizeLarge lineHeight: MZTheme.theme.vSpacingSmall * 2 @@ -49,7 +49,7 @@ MZPopup { Layout.topMargin: MZTheme.theme.vSpacingSmall / 2 Layout.fillWidth: true - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor } ColumnLayout { diff --git a/nebula/ui/components/MZStepProgressBarDelegate.qml b/nebula/ui/components/MZStepProgressBarDelegate.qml index 34ff7f633c..abb742f499 100644 --- a/nebula/ui/components/MZStepProgressBarDelegate.qml +++ b/nebula/ui/components/MZStepProgressBarDelegate.qml @@ -96,7 +96,7 @@ Column { MZColorOverlay { anchors.fill: parent - color: delegate.currentState === MZStepProgressBarDelegate.State.Complete ? MZTheme.theme.green : MZTheme.theme.white + color: delegate.currentState === MZStepProgressBarDelegate.State.Complete ? MZTheme.colors.green : MZTheme.colors.white source: icon } } @@ -104,7 +104,7 @@ Column { MZUIStates { setMargins: -4 radius: parent.radius - colorScheme: MZTheme.theme.purpleStepProgressBarDelegate + colorScheme: MZTheme.colors.purpleStepProgressBarDelegate startingState: delegate.currentState === MZStepProgressBarDelegate.State.Active ? colorScheme.defaultColor : colorScheme.buttonDisabled showFocusRings: false } @@ -125,7 +125,7 @@ Column { font.pixelSize: MZTheme.theme.fontSizeSmallest lineHeightMode: Text.FixedHeight lineHeight: MZTheme.theme.controllerInterLineHeight - color: delegate.currentState !== MZStepProgressBarDelegate.State.Incomplete ? MZTheme.colors.purple70 : MZTheme.theme.fontColorDark + color: delegate.currentState !== MZStepProgressBarDelegate.State.Incomplete ? MZTheme.colors.purple70 : MZTheme.colors.fontColorDark Accessible.ignored: true } diff --git a/nebula/ui/components/MZSubscriptionOption.qml b/nebula/ui/components/MZSubscriptionOption.qml index a82aa14c08..ffef13cac1 100644 --- a/nebula/ui/components/MZSubscriptionOption.qml +++ b/nebula/ui/components/MZSubscriptionOption.qml @@ -25,7 +25,7 @@ RadioDelegate { background: Rectangle { id: bg - color: MZTheme.theme.white + color: MZTheme.colors.white radius: MZTheme.theme.cornerRadius MZRectangularGlow { @@ -39,7 +39,7 @@ RadioDelegate { Rectangle { id: rect anchors.fill: parent - color: MZTheme.theme.white + color: MZTheme.colors.white radius: parent.radius clip: true } @@ -56,7 +56,7 @@ RadioDelegate { left: parent.left top: parent.top } - color: radioDelegate.checked ? MZTheme.theme.purple60 : MZTheme.theme.white + color: radioDelegate.checked ? MZTheme.colors.purple60 : MZTheme.colors.white opacity: radioDelegate.checked ? 1 : 0 radius: MZTheme.theme.cornerRadius width: MZTheme.theme.windowMargin @@ -67,7 +67,7 @@ RadioDelegate { right: parent.right top: parent.top } - color: MZTheme.theme.white + color: MZTheme.colors.white width: MZTheme.theme.listSpacing * 0.5 } @@ -81,8 +81,8 @@ RadioDelegate { // Purple border when product is selected or focused Rectangle { anchors.fill: parent - border.color: (radioDelegate.checked || radioDelegate.focus) ? MZTheme.theme.purple60 : MZTheme.theme.white - color: MZTheme.theme.transparent + border.color: (radioDelegate.checked || radioDelegate.focus) ? MZTheme.colors.purple60 : MZTheme.colors.white + color: MZTheme.colors.transparent radius: MZTheme.theme.cornerRadius Behavior on border.color { @@ -218,7 +218,7 @@ RadioDelegate { MZInterLabel { text: MZI18n.PurchasePercentSaved.arg(productSavings) - color: MZTheme.theme.purple60 + color: MZTheme.colors.purple60 font.family: MZTheme.theme.fontBoldFamily horizontalAlignment: Qt.AlignRight lineHeight: MZTheme.theme.labelLineHeight * 0.9 diff --git a/nebula/ui/components/MZSubtitle.qml b/nebula/ui/components/MZSubtitle.qml index 287625ee14..60dd7a30f7 100644 --- a/nebula/ui/components/MZSubtitle.qml +++ b/nebula/ui/components/MZSubtitle.qml @@ -12,7 +12,7 @@ Text { font.pixelSize: MZTheme.theme.fontSize font.family: MZTheme.theme.fontInterFamily wrapMode: Text.Wrap - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor lineHeightMode: Text.FixedHeight lineHeight: MZTheme.theme.labelLineHeight Accessible.role: Accessible.StaticText diff --git a/nebula/ui/components/MZSwipeAction.qml b/nebula/ui/components/MZSwipeAction.qml index c9c3c55206..3954d92e13 100644 --- a/nebula/ui/components/MZSwipeAction.qml +++ b/nebula/ui/components/MZSwipeAction.qml @@ -36,8 +36,8 @@ Rectangle { Rectangle { anchors.fill: parent visible: parent.activeFocus - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent border.width: MZTheme.theme.focusBorderWidth - border.color: MZTheme.theme.darkFocusBorder + border.color: MZTheme.colors.darkFocusBorder } } diff --git a/nebula/ui/components/MZSwipeDelegate.qml b/nebula/ui/components/MZSwipeDelegate.qml index 4ea870d521..758eb80b35 100644 --- a/nebula/ui/components/MZSwipeDelegate.qml +++ b/nebula/ui/components/MZSwipeDelegate.qml @@ -31,7 +31,7 @@ SwipeDelegate { Accessible.ignored: !visible background: Rectangle { - color: MZTheme.theme.bgColor + color: MZTheme.colors.bgColor } onReleased: { @@ -77,7 +77,7 @@ SwipeDelegate { contentItem: Item { id: swipeDelegateContentItem - property var backgroundColor: MZTheme.theme.iconButtonLightBackground + property var backgroundColor: MZTheme.colors.iconButtonLightBackground width: parent.width height: parent.height @@ -137,7 +137,7 @@ SwipeDelegate { anchors.fill: parent visible: swipeDelegate.activeFocus - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent border.width: MZTheme.theme.focusBorderWidth border.color: swipeDelegateContentItem.backgroundColor.focusBorder } diff --git a/nebula/ui/components/MZTabNavigation.qml b/nebula/ui/components/MZTabNavigation.qml index 3be552f195..b9823373f7 100644 --- a/nebula/ui/components/MZTabNavigation.qml +++ b/nebula/ui/components/MZTabNavigation.qml @@ -43,7 +43,7 @@ Item { visible: stack.children.length > 1 contentHeight: stack.children.length === 1 ? 0 : MZTheme.theme.menuHeight background: Rectangle { - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent } Repeater { @@ -63,7 +63,7 @@ Item { onClicked: handleTabClick(btn) background: Rectangle { - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent Rectangle { height: 2 diff --git a/nebula/ui/components/MZTextBlock.qml b/nebula/ui/components/MZTextBlock.qml index d04a4e2260..ef77c38469 100644 --- a/nebula/ui/components/MZTextBlock.qml +++ b/nebula/ui/components/MZTextBlock.qml @@ -9,7 +9,7 @@ import Mozilla.Shared 1.0 // MZTextBlock Text { - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor font.family: MZTheme.theme.fontInterFamily font.pixelSize: MZTheme.theme.fontSizeSmall lineHeightMode: Text.FixedHeight diff --git a/nebula/ui/components/MZToggleCard.qml b/nebula/ui/components/MZToggleCard.qml index dfbeb38acc..5d923c1cdc 100644 --- a/nebula/ui/components/MZToggleCard.qml +++ b/nebula/ui/components/MZToggleCard.qml @@ -30,7 +30,7 @@ Item { anchors.bottomMargin: anchors.topMargin anchors.leftMargin: -MZTheme.theme.windowMargin anchors.rightMargin: anchors.leftMargin - color: MZTheme.theme.white + color: MZTheme.colors.white radius: 4 } @@ -50,7 +50,7 @@ Item { id: label Layout.alignment: Qt.AlignLeft Layout.fillWidth: true - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark horizontalAlignment: Text.AlignLeft } diff --git a/nebula/ui/components/MZToggleRow.qml b/nebula/ui/components/MZToggleRow.qml index 0338f76bf4..71c3f113a9 100644 --- a/nebula/ui/components/MZToggleRow.qml +++ b/nebula/ui/components/MZToggleRow.qml @@ -32,7 +32,7 @@ RowLayout { Layout.fillWidth: true text: labelText - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark horizontalAlignment: Text.AlignLeft visible: !!text.length } diff --git a/nebula/ui/components/MZToolTip.qml b/nebula/ui/components/MZToolTip.qml index 9586ea51d1..66f93ecefc 100644 --- a/nebula/ui/components/MZToolTip.qml +++ b/nebula/ui/components/MZToolTip.qml @@ -48,7 +48,7 @@ ToolTip { id: toolTipText text: toolTip.text - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark z: 1 wrapMode: Text.WordWrap Accessible.ignored: !visible @@ -58,7 +58,7 @@ ToolTip { id: glowClippingPath radius: 4 - color: MZTheme.theme.bgColor + color: MZTheme.colors.bgColor z: -1 MZRectangularGlow { diff --git a/nebula/ui/components/MZUIStates.qml b/nebula/ui/components/MZUIStates.qml index 1498967a6f..34079ed191 100644 --- a/nebula/ui/components/MZUIStates.qml +++ b/nebula/ui/components/MZUIStates.qml @@ -13,7 +13,7 @@ Rectangle { property variant itemToFocus: parent property variant itemToAnchor: parent property var borderWidth: MZTheme.theme.focusBorderWidth - property var colorScheme: MZTheme.theme.linkButton + property var colorScheme: MZTheme.colors.linkButton property real setMargins: -2 property bool showFocusRings: true property var startingState: colorScheme.defaultColor @@ -22,7 +22,7 @@ Rectangle { anchors.fill: itemToAnchor antialiasing: true - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent radius: MZTheme.theme.cornerRadius z: -1 states: [ @@ -60,7 +60,7 @@ Rectangle { PropertyChanges { target: buttonBackground - color: 'buttonDisabled' in colorScheme ? colorScheme.buttonDisabled : colorScheme.defaultColor + color: buttonDisabled in colorScheme ? colorScheme.buttonDisabled : colorScheme.defaultColor opacity: 1 } diff --git a/nebula/ui/components/MZUserProfile.qml b/nebula/ui/components/MZUserProfile.qml index 9d2be37ba4..38ffda991e 100644 --- a/nebula/ui/components/MZUserProfile.qml +++ b/nebula/ui/components/MZUserProfile.qml @@ -52,7 +52,7 @@ MZClickableRow { Layout.preferredWidth: MZTheme.theme.rowHeight Layout.preferredHeight: MZTheme.theme.rowHeight Layout.alignment: Qt.AlignVCenter - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent MZAvatar { id: avatar @@ -95,7 +95,7 @@ MZClickableRow { Layout.preferredHeight: MZTheme.theme.rowHeight Layout.preferredWidth: MZTheme.theme.rowHeight visible: _iconSource !== "" - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent MZIcon { id: icon @@ -108,7 +108,7 @@ MZClickableRow { MZButtonLoader { id: loader - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent iconUrl: "qrc:/nebula/resources/spinner.svg" state: _loaderVisible ? "active" : "inactive" } diff --git a/nebula/ui/components/MZVerticalSpacer.qml b/nebula/ui/components/MZVerticalSpacer.qml index 9abc2d21c5..8b510fee32 100644 --- a/nebula/ui/components/MZVerticalSpacer.qml +++ b/nebula/ui/components/MZVerticalSpacer.qml @@ -7,6 +7,6 @@ import QtQuick 2.0 import Mozilla.Shared 1.0 Rectangle { - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent width: parent.width } diff --git a/nebula/ui/components/MZViewBase.qml b/nebula/ui/components/MZViewBase.qml index 83ffd6bb95..7a072341cd 100644 --- a/nebula/ui/components/MZViewBase.qml +++ b/nebula/ui/components/MZViewBase.qml @@ -29,7 +29,7 @@ Item { Rectangle { anchors.fill: root - color: MZTheme.theme.bgColor + color: MZTheme.colors.bgColor } MZFlickable { diff --git a/nebula/ui/components/forms/MZComboBox.qml b/nebula/ui/components/forms/MZComboBox.qml index 668817e336..b47a77f79c 100644 --- a/nebula/ui/components/forms/MZComboBox.qml +++ b/nebula/ui/components/forms/MZComboBox.qml @@ -66,7 +66,7 @@ ComboBox { contentItem: Rectangle { anchors.fill: parent height: comboDelegate.height - color: hovered || combo.highlightedIndex === index ? MZTheme.theme.input.highlight : MZTheme.theme.input.backgroundColor + color: hovered || combo.highlightedIndex === index ? MZTheme.colors.input.highlight : MZTheme.colors.input.backgroundColor Behavior on color { ColorAnimation { @@ -82,7 +82,7 @@ ComboBox { anchors.leftMargin: MZTheme.theme.windowMargin / 2 width: parent.width - MZTheme.theme.windowMargin * 2 verticalAlignment: Text.AlignVCenter - color: hovered || combo.highlightedIndex === index ? MZTheme.theme.blue : MZTheme.theme.fontColor + color: hovered || combo.highlightedIndex === index ? MZTheme.colors.blue : MZTheme.colors.fontColor Behavior on color { ColorAnimation { @@ -130,7 +130,7 @@ ComboBox { anchors.fill: parent anchors.bottomMargin: -4 anchors.topMargin: anchors.bottomMargin - border.color: MZTheme.theme.transparent + border.color: MZTheme.colors.transparent } } diff --git a/nebula/ui/components/forms/MZInputBackground.qml b/nebula/ui/components/forms/MZInputBackground.qml index e236196902..8e3a67f174 100644 --- a/nebula/ui/components/forms/MZInputBackground.qml +++ b/nebula/ui/components/forms/MZInputBackground.qml @@ -31,7 +31,7 @@ Rectangle { antialiasing: true border.color: itemToFocus && itemToFocus.hasError ? MZTheme.colors.input.error.highlight : MZTheme.colors.input.focus.highlight border.width: 4 - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent opacity: itemToFocus && itemToFocus.activeFocus && itemToFocus.showInteractionStates ? 1 : 0 radius: parent.radius + anchors.margins * -1 z: -1 diff --git a/nebula/ui/components/forms/MZRadioButton.qml b/nebula/ui/components/forms/MZRadioButton.qml index d67001ee57..a9027dd815 100644 --- a/nebula/ui/components/forms/MZRadioButton.qml +++ b/nebula/ui/components/forms/MZRadioButton.qml @@ -67,13 +67,13 @@ RadioDelegate { PropertyChanges { target: radioButtonInsetCircle - color: radioControl.checked ? MZTheme.theme.bluePressed : MZTheme.theme.greyPressed + color: radioControl.checked ? MZTheme.colors.bluePressed : MZTheme.colors.greyPressed scale: 0.55 } PropertyChanges { target: radioButton - border.color: radioControl.checked? MZTheme.theme.bluePressed : MZTheme.theme.fontColorDark + border.color: radioControl.checked? MZTheme.colors.bluePressed : MZTheme.colors.fontColorDark } }, @@ -82,13 +82,13 @@ RadioDelegate { PropertyChanges { target: radioButtonInsetCircle - color: radioControl.checked ? MZTheme.theme.blue : MZTheme.theme.bgColor + color: radioControl.checked ? MZTheme.colors.blue : MZTheme.colors.bgColor scale: 0.6 } PropertyChanges { target: radioButton - border.color: radioControl.checked || radioControl.activeFocus ? MZTheme.theme.blue : MZTheme.theme.fontColor + border.color: radioControl.checked || radioControl.activeFocus ? MZTheme.colors.blue : MZTheme.colors.fontColor } }, @@ -97,20 +97,20 @@ RadioDelegate { PropertyChanges { target: radioButtonInsetCircle - color: radioControl.checked ? MZTheme.theme.bluePressed : MZTheme.theme.greyHovered + color: radioControl.checked ? MZTheme.colors.bluePressed : MZTheme.colors.greyHovered scale: 0.6 } PropertyChanges { target: radioButton - border.color: radioControl.checked ? MZTheme.theme.bluePressed : MZTheme.theme.fontColor + border.color: radioControl.checked ? MZTheme.colors.bluePressed : MZTheme.colors.fontColor } } ] background: Rectangle { - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent } MZMouseArea { @@ -125,7 +125,7 @@ RadioDelegate { implicitHeight: 20 radius: implicitWidth * 0.5 border.width: MZTheme.theme.focusBorderWidth - color: MZTheme.theme.bgColor + color: MZTheme.colors.bgColor antialiasing: true smooth: true diff --git a/nebula/ui/components/forms/MZTextArea.qml b/nebula/ui/components/forms/MZTextArea.qml index 7f152ef70a..163af1fc77 100644 --- a/nebula/ui/components/forms/MZTextArea.qml +++ b/nebula/ui/components/forms/MZTextArea.qml @@ -63,7 +63,7 @@ Item { leftPadding: MZTheme.theme.windowMargin rightPadding: MZTheme.theme.windowMargin selectByMouse: true - selectionColor: MZTheme.theme.input.highlight + selectionColor: MZTheme.colors.input.highlight textFormat: Text.PlainText topPadding: MZTheme.theme.windowMargin wrapMode: Text.WrapAtWordBoundaryOrAnywhere @@ -152,7 +152,7 @@ Item { right: parent.right rightMargin: MZTheme.theme.listSpacing } - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor font.pixelSize: MZTheme.theme.fontSizeSmall text: textArea.length + " / " + textArea.maxCharacterCount Accessible.ignored: !visible diff --git a/nebula/ui/components/inAppAuth/MZInAppAuthenticationBase.qml b/nebula/ui/components/inAppAuth/MZInAppAuthenticationBase.qml index 8735109b85..7afd1d245c 100644 --- a/nebula/ui/components/inAppAuth/MZInAppAuthenticationBase.qml +++ b/nebula/ui/components/inAppAuth/MZInAppAuthenticationBase.qml @@ -103,7 +103,7 @@ MZFlickable { Layout.preferredWidth: col.width - MZTheme.theme.vSpacing * 2 Rectangle { - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent height: MZTheme.theme.rowHeight * 2 Layout.preferredWidth: 100 Layout.alignment: Qt.AlignHCenter diff --git a/nebula/ui/components/inAppAuth/MZInAppAuthenticationInputs.qml b/nebula/ui/components/inAppAuth/MZInAppAuthenticationInputs.qml index bd1a06c818..d724a29e70 100644 --- a/nebula/ui/components/inAppAuth/MZInAppAuthenticationInputs.qml +++ b/nebula/ui/components/inAppAuth/MZInAppAuthenticationInputs.qml @@ -100,7 +100,7 @@ ColumnLayout { y: passwordInput.y - height - 4 width: passwordInput.width - MZTheme.theme.vSpacing height: passwordConditions.implicitHeight + padding * 2 - background: Rectangle { color: MZTheme.theme.transparent } + background: Rectangle { color: MZTheme.colors.transparent } Rectangle { id: bg @@ -113,7 +113,7 @@ ColumnLayout { anchors.fill: glowVector glowRadius: 4 spread: .3 - color: MZTheme.theme.divider + color: MZTheme.colors.divider cornerRadius: glowVector.radius + glowRadius z: -2 } diff --git a/nebula/ui/components/inAppAuth/MZInAppAuthenticationLegalDisclaimer.qml b/nebula/ui/components/inAppAuth/MZInAppAuthenticationLegalDisclaimer.qml index 6a99519684..54500f97db 100644 --- a/nebula/ui/components/inAppAuth/MZInAppAuthenticationLegalDisclaimer.qml +++ b/nebula/ui/components/inAppAuth/MZInAppAuthenticationLegalDisclaimer.qml @@ -15,12 +15,12 @@ ColumnLayout { text: MZI18n.InAppAuthTermsOfServiceAndPrivacyDisclaimer font.family: MZTheme.theme.fontInterFamily font.pixelSize: MZTheme.theme.fontSizeSmall - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor Layout.fillWidth: true Layout.maximumWidth: MZTheme.theme.maxTextWidth wrapMode: Text.WrapAtWordBoundaryOrAnywhere horizontalAlignment: Text.AlignHCenter - linkColor: MZTheme.theme.fontColorDark + linkColor: MZTheme.colors.fontColorDark lineHeightMode: Text.FixedHeight lineHeight: MZTheme.theme.labelLineHeight onLinkActivated: { diff --git a/nebula/ui/components/inAppAuth/MZInAppAuthenticationPasswordCondition.qml b/nebula/ui/components/inAppAuth/MZInAppAuthenticationPasswordCondition.qml index 1d1c451b25..8339521df8 100644 --- a/nebula/ui/components/inAppAuth/MZInAppAuthenticationPasswordCondition.qml +++ b/nebula/ui/components/inAppAuth/MZInAppAuthenticationPasswordCondition.qml @@ -29,7 +29,7 @@ RowLayout { Text { id: passwordConditionDescription - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor font.family: MZTheme.theme.fontInterFamily font.pixelSize: MZTheme.theme.fontSizeSmall Layout.fillWidth: true diff --git a/nebula/ui/components/inAppAuth/MZInAppAuthenticationThirdParty.qml b/nebula/ui/components/inAppAuth/MZInAppAuthenticationThirdParty.qml index 6f39c54110..699ef0ebcd 100644 --- a/nebula/ui/components/inAppAuth/MZInAppAuthenticationThirdParty.qml +++ b/nebula/ui/components/inAppAuth/MZInAppAuthenticationThirdParty.qml @@ -57,7 +57,7 @@ MZFlickable { spacing: MZTheme.theme.windowMargin Rectangle { - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent Layout.preferredHeight: MZTheme.theme.rowHeight * 2 Layout.preferredWidth: 117 Layout.alignment: Qt.AlignHCenter diff --git a/nebula/ui/components/navigationBar/MZBottomNavigationBar.qml b/nebula/ui/components/navigationBar/MZBottomNavigationBar.qml index 0ac1e1d9a6..be0f9b19a7 100644 --- a/nebula/ui/components/navigationBar/MZBottomNavigationBar.qml +++ b/nebula/ui/components/navigationBar/MZBottomNavigationBar.qml @@ -17,7 +17,7 @@ Rectangle { height: MZTheme.theme.navBarHeight width: Math.min(window.width - MZTheme.theme.windowMargin * 2, MZTheme.theme.navBarMaxWidth) radius: height / 2 - color: MZTheme.theme.ink + color: MZTheme.colors.ink anchors { horizontalCenter: parent.horizontalCenter @@ -44,11 +44,11 @@ Rectangle { Rectangle { id: outline - color: MZTheme.theme.ink + color: MZTheme.colors.ink radius: parent.radius anchors.fill: parent border.width: 0 - border.color: MZTheme.theme.ink + border.color: MZTheme.colors.ink } RowLayout { diff --git a/nebula/ui/components/navigationBar/MZBottomNavigationBarButton.qml b/nebula/ui/components/navigationBar/MZBottomNavigationBarButton.qml index a87a434833..167206bcce 100644 --- a/nebula/ui/components/navigationBar/MZBottomNavigationBarButton.qml +++ b/nebula/ui/components/navigationBar/MZBottomNavigationBarButton.qml @@ -30,7 +30,7 @@ MZIconButton { height: MZTheme.theme.navBarIconSize backgroundRadius: height / 2 - buttonColorScheme: MZTheme.theme.iconButtonDarkBackground + buttonColorScheme: MZTheme.colors.iconButtonDarkBackground uiStatesVisible: !checked Rectangle { @@ -39,7 +39,7 @@ MZIconButton { visible: checked radius: parent.height / 2 opacity: .2 - color: MZTheme.theme.white + color: MZTheme.colors.white } Image { diff --git a/nebula/ui/themes/main/colors.js b/nebula/ui/themes/main/colors.js index 578a54a6cf..3bcffbf764 100644 --- a/nebula/ui/themes/main/colors.js +++ b/nebula/ui/themes/main/colors.js @@ -122,6 +122,8 @@ color.pink5 = '#FFDEF0'; color.dullPurple = '#387E8A'; color.dullGreen = '#998DB2'; +color.transparent = '#00000000'; + /** * Helper functions */ @@ -139,6 +141,55 @@ const addTransparency = (hexColor, percent) => { return `#${hexAlphaValue}${hexValue}`; }; +// TODO: BELOW HERE SHOULD NOT HAVE ANY HEX CODES +// Derived + +color.bgColor = color.grey5; +color.bgColor30 = '#4DF9F9FA'; +color.bgColor80 = '#CCF9F9FA'; +color.bgColorTransparent = '#00F9F9FA'; + +color.blue = color.blue50; +color.blueHovered = color.blue60; +color.bluePressed = color.blue70; +color.blueDisabled = '#a3c0f3'; +color.blueFocusOutline = '#4d0a84ff'; +color.blueFocusBorder = '#0a84ff'; + +color.divider = '#0C0C0D0A' +color.green = color.green50; +color.grey = '#CACACA'; +color.greyHovered = '#E6E6E6'; +color.greyPressed = '#C2C2C2'; +color.greyDisabled = '#D8D8D8'; +color.ink = color.purple90; +color.orange = color.yellow50; +color.orangeHovered = '#E27F2E'; +color.orangeFocus = '#4DE27F2E'; +color.orangePressed = color.yellow70; +color.red = color.red60; +color.redHovered = color.red70; +color.redPressed = color.red80; +color.redDisabled = color.red10; +color.redfocusOutline = '#66C50042'; +color.redBadgeText = color.red80; +color.greenBadgeText = color.green90; +color.greenBadgeBackground = color.green5; +color.orangeBadgeText = color.yellow90; +color.orangeBadgeBackground = color.orange10; +color.blueBadgeText = color.blue90; +color.blueBadgeBackground = '#660060DF' + +color.overlayBackground = '#4D000000'; + +color.checkBoxWarning = color.yellow70; + +color.fontColor = color.grey40; +color.fontColorDark = color.grey50; + +color.darkFocusBorder = color.fontColor; +color.lightFocusBorder = '#d5d3e0'; + /** * Main palette */ @@ -311,4 +362,206 @@ color.input = { }, }; +color.onBoardingGradient = { + start: '#472C87', + middle: '#301962', + end: '#1D0942', +}; + +color.blueButton = { + defaultColor: color.blue, + buttonHovered: color.blueHovered, + buttonPressed: color.bluePressed, + buttonDisabled: color.blueDisabled, + focusBgColor: color.blue, + focusOutline: color.blueFocusOutline, + focusBorder: color.blueFocusBorder, +}; + +color.wasmOptionBtn = { + defaultColor: '#00eeeeee', + buttonHovered: '#330a84ff', + buttonPressed: '#4d0a84ff', + buttonDisabled: color.blueDisabled, + focusBgColor: color.blue, + focusOutline: color.blueFocusOutline, + focusBorder: color.blueFocusBorder, +}; + +color.warningAlertFocusBorders = { + focusOutline: color.orangeFocus, + focusBorder: color.orangePressed, +}; + +color.clickableRowBlue = { + defaultColor: color.bgColor, + buttonHovered: '#D4E2F6', + buttonPressed: '#AECBF2', + focusOutline: color.bgColorTransparent, + focusBorder: color.blueFocusBorder, +}; + +color.clickableRowPurple = { + defaultColor: color.bgColorTransparent, + buttonHovered: color.purple5, + buttonPressed: color.purple10, + focusOutline: color.bgColorTransparent, + focusBorder: color.purple70, +}; + +color.iconButtonLightBackground = { + defaultColor: color.bgColorTransparent, + buttonHovered: color.greyHovered, + buttonPressed: color.greyPressed, + buttonDisabled: color.transparent, + focusOutline: color.bgColorTransparent, + focusBorder: color.darkFocusBorder, +}; + +color.iconButtonDarkBackground = { + defaultColor: '#00321C64', + buttonHovered: '#5b4983', + buttonPressed: '#8477a2', + buttonDisabled: '#00321C64', + focusOutline: '#005b4983', + focusBorder: color.lightFocusBorder, +}; + +color.linkButton = { + defaultColor: color.bgColorTransparent, + buttonHovered: color.bgColorTransparent, + buttonPressed: color.bgColorTransparent, + buttonDisabled: color.bgColorTransparent, + focusOutline: color.bgColorTransparent, + focusBorder: color.bgColorTransparent, +}; + +color.whiteButton = { + defaultColor: color.white, + buttonHovered: color.greyHovered, + buttonPressed: color.greyPressed, + focusOutline: color.greyHovered, + focusBorder: color.greyPressed, +}; + +color.greyButton = { + defaultColor: color.grey20, + buttonHovered: color.greyHovered, + buttonPressed: color.greyPressed, + buttonDisabled: color.greyDisabled, + focusOutline: color.greyHovered, + focusBorder: color.greyPressed, +}; + +color.redButton = { + defaultColor: color.red, + buttonHovered: color.redHovered, + buttonPressed: color.redPressed, + buttonDisabled: color.redDisabled, + focusOutline: color.redDisabled, + focusBorder: color.redHovered, +}; + +color.redLinkButton = { + defaultColor: color.redHovered, + buttonHovered: color.redPressed, + buttonPressed: color.redPressed, + buttonDisabled: color.redDisabled, + focusOutline: color.redfocusOutline, + focusBorder: color.redPressed, +}; + +color.removeDeviceBtn = { + defaultColor: color.bgColorTransparent, + buttonHovered: color.red5, + buttonPressed: color.red10, + buttonDisabled: color.bgColorTransparent, + focusOutline: color.bgColorTransparent, + focusBorder: color.red, +}; + +color.vpnToggleConnected = { + defaultColor: color.green, + buttonHovered: color.green60, + buttonPressed: '#1CC5A0', + focusOutline: color.bgColor30, + focusBorder: color.lightFocusBorder, +}; + +color.vpnToggleDisconnected = { + defaultColor: color.grey30, + buttonHovered: color.fontColor, + buttonPressed: color.fontColorDark, + buttonDisabled: color.grey, + focusOutline: 'transparent', + focusBorder: color.darkFocusBorder, +}; + +color.card = { + defaultColor: color.white, + buttonHovered: color.greyHovered, + buttonPressed: color.greyPressed, + buttonDisabled: color.bgColorTransparent, + focusOutline: color.bgColorTransparent, + focusBorder: color.darkFocusBorder, +}; + +color.greenAlert = { + defaultColor: color.green50, + buttonHovered: color.green60, + buttonPressed: '#1CC5A0', + focusOutline: '#333FE1B0', + focusBorder: '#1CC5A0', +}; + +color.greyLink = { + defaultColor: '#B30C0C0D', + buttonHovered: '#CC0C0C0D', + buttonPressed: '#FF0C0C0D', + focusOutline: '#FF0C0C0D', + focusBorder: color.black +}; + +color.input = { + backgroundColor: color.white, + borderColor: color.grey30, + highlight: color.grey10, + defaultColor: color.white, + buttonHovered: color.blueHovered, + buttonPressed: color.bluePressed, + buttonDisabled: color.blueDisabled, + focusBgColor: color.blue, + focusOutline: color.blueFocusOutline, + focusBorder: color.blueFocusBorder, +}; + +color.greenBadge = { + textColor: color.greenBadgeText, + backgroundColor: color.greenBadgeBackground +}; + +color.redBadge = { + textColor: color.redBadgeText, + backgroundColor: color.redDisabled +}; + +color.orangeBadge = { + textColor: color.orangeBadgeText, + backgroundColor: color.orangeBadgeBackground +}; + +color.blueBadge = { + textColor: color.blueBadgeText, + backgroundColor: color.blueBadgeBackground +}; + +color.purpleStepProgressBarDelegate = { + defaultColor: color.purple70, + buttonHovered: color.purple70, + buttonPressed: color.purple80, + buttonDisabled: color.grey30, + focusOutline: color.bgColorTransparent, + focusBorder: color.bgColorTransparent, +}; + color; diff --git a/nebula/ui/themes/main/theme.js b/nebula/ui/themes/main/theme.js index 72bd6c424b..70aa8e624b 100644 --- a/nebula/ui/themes/main/theme.js +++ b/nebula/ui/themes/main/theme.js @@ -4,53 +4,6 @@ const theme = {}; -theme.transparent = '#00000000'; - -theme.bgColor = '#F9F9FA'; -theme.bgColor30 = '#4DF9F9FA'; -theme.bgColor80 = '#CCF9F9FA'; -theme.bgColorTransparent = '#00F9F9FA'; - -theme.blue = '#0060DF'; -theme.blueHovered = '#0250BB'; -theme.bluePressed = '#054096'; -theme.blueDisabled = '#a3c0f3'; -theme.blueFocusOutline = '#4d0a84ff'; -theme.blueFocusBorder = '#0a84ff'; - -theme.divider = '#0C0C0D0A' -theme.green = '#3FE1B0'; -theme.grey = '#CACACA'; -theme.greyHovered = '#E6E6E6'; -theme.greyPressed = '#C2C2C2'; -theme.greyDisabled = '#D8D8D8'; -theme.ink = '#321C64'; -theme.orange = '#FFA436'; -theme.orangeHovered = '#E27F2E'; -theme.orangeFocus = '#4DE27F2E'; -theme.orangePressed = '#C45A27'; -theme.purple60 = '#7542E5'; -theme.red = '#E22850'; -theme.redHovered = '#C50042'; -theme.redPressed = '#810220'; -theme.redDisabled = '#FFBDC5'; -theme.redfocusOutline = '#66C50042'; -theme.redBadgeText = "#810220"; -theme.greenBadgeText = '#00736C'; -theme.greenBadgeBackground = '#E3FFF3'; -theme.orangeBadgeText = '#960E18'; -theme.orangeBadgeBackground = '#FFD5B2'; -theme.blueBadgeText = "#09204D" -theme.blueBadgeBackground = "#660060DF" - -theme.white = '#FFFFFF' - -theme.overlayBackground = '#4D000000'; - -theme.checkBoxWarning = '#C45A27'; - -theme.fontColor = '#6D6D6E'; -theme.fontColorDark = '#3D3D3D'; theme.fontFamily = 'Metropolis'; theme.fontBoldFamily = 'MetropolisSemiBold'; theme.fontInterFamily = 'InterUI'; @@ -109,168 +62,12 @@ theme.checkmarkHeightWidth = 12; theme.progressBarDelegateHeightWidth = 32 -theme.darkFocusBorder = theme.fontColor; -theme.lightFocusBorder = '#d5d3e0'; - theme.maxZLevel = 10 theme.toggleHeight = 24 theme.toggleWidth = 45 theme.toggleRowDividerSpacing = 16 - -theme.onBoardingGradient = { - 'start': '#472C87', - 'middle': '#301962', - 'end': '#1D0942', -}; - -theme.blueButton = { - 'defaultColor': theme.blue, - 'buttonHovered': theme.blueHovered, - 'buttonPressed': theme.bluePressed, - 'buttonDisabled': theme.blueDisabled, - 'focusBgColor': theme.blue, - 'focusOutline': theme.blueFocusOutline, - 'focusBorder': theme.blueFocusBorder, -}; - -theme.wasmOptionBtn = { - 'defaultColor': '#00eeeeee', - 'buttonHovered': '#330a84ff', - 'buttonPressed': '#4d0a84ff', - 'buttonDisabled': theme.blueDisabled, - 'focusBgColor': theme.blue, - 'focusOutline': theme.blueFocusOutline, - 'focusBorder': theme.blueFocusBorder, -}; - -theme.warningAlertFocusBorders = { - 'focusOutline': theme.orangeFocus, - 'focusBorder': theme.orangePressed, -}; - -theme.clickableRowBlue = { - 'defaultColor': theme.bgColor, - 'buttonHovered': '#D4E2F6', - 'buttonPressed': '#AECBF2', - 'focusOutline': theme.bgColorTransparent, - 'focusBorder': theme.blueFocusBorder, -}; - -theme.clickableRowPurple = { - 'defaultColor': theme.bgColorTransparent, - 'buttonHovered': '#E7DFFF', - 'buttonPressed': '#D9BFFF', - 'focusOutline': theme.bgColorTransparent, - 'focusBorder': '#592ACB', -}; - -theme.iconButtonLightBackground = { - 'defaultColor': theme.bgColorTransparent, - 'buttonHovered': theme.greyHovered, - 'buttonPressed': theme.greyPressed, - 'buttonDisabled': theme.transparent, - 'focusOutline': theme.bgColorTransparent, - 'focusBorder': theme.darkFocusBorder, -}; - -theme.iconButtonDarkBackground = { - 'defaultColor': '#00321C64', - 'buttonHovered': '#5b4983', - 'buttonPressed': '#8477a2', - 'buttonDisabled': '#00321C64', - 'focusOutline': '#005b4983', - 'focusBorder': theme.lightFocusBorder, -}; - -theme.linkButton = { - 'defaultColor': theme.bgColorTransparent, - 'buttonHovered': theme.bgColorTransparent, - 'buttonPressed': theme.bgColorTransparent, - 'buttonDisabled': theme.bgColorTransparent, - 'focusOutline': theme.bgColorTransparent, - 'focusBorder': theme.bgColorTransparent, -}; - -theme.whiteButton = { - 'defaultColor': theme.white, - 'buttonHovered': theme.greyHovered, - 'buttonPressed': theme.greyPressed, - 'focusOutline': theme.greyHovered, - 'focusBorder': theme.greyPressed, -}; - -theme.greyButton = { - 'defaultColor': '#CECECF', - 'buttonHovered': theme.greyHovered, - 'buttonPressed': theme.greyPressed, - 'buttonDisabled': theme.greyDisabled, - 'focusOutline': theme.greyHovered, - 'focusBorder': theme.greyPressed, -}; - -theme.redButton = { - 'defaultColor': theme.red, - 'buttonHovered': theme.redHovered, - 'buttonPressed': theme.redPressed, - 'buttonDisabled': theme.redDisabled, - 'focusOutline': theme.redDisabled, - 'focusBorder': theme.redHovered, -}; - -theme.redLinkButton = { - 'defaultColor': theme.redHovered, - 'buttonHovered': theme.redPressed, - 'buttonPressed': theme.redPressed, - 'buttonDisabled': theme.redDisabled, - 'focusOutline': theme.redfocusOutline, - 'focusBorder': theme.redPressed, -}; - -theme.removeDeviceBtn = { - 'defaultColor': theme.bgColorTransparent, - 'buttonHovered': '#FFDFE7', - 'buttonPressed': '#FFBDC5', - 'buttonDisabled': theme.bgColorTransparent, - 'focusOutline': theme.bgColorTransparent, - 'focusBorder': theme.red, -}; - -theme.vpnToggleConnected = { - 'defaultColor': '#3FE1B0', - 'buttonHovered': '#3AD4B3', - 'buttonPressed': '#1CC5A0', - 'focusOutline': theme.bgColor30, - 'focusBorder': theme.lightFocusBorder, -}; - -theme.vpnToggleDisconnected = { - 'defaultColor': '#9E9E9E', - 'buttonHovered': theme.fontColor, - 'buttonPressed': theme.fontColorDark, - 'buttonDisabled': theme.grey, - 'focusOutline': 'transparent', - 'focusBorder': theme.darkFocusBorder, -}; - -theme.card = { - 'defaultColor': theme.white, - 'buttonHovered': theme.greyHovered, - 'buttonPressed': theme.greyPressed, - 'buttonDisabled': theme.bgColorTransparent, - 'focusOutline': theme.bgColorTransparent, - 'focusBorder': theme.darkFocusBorder, -}; - -theme.greenAlert = { - defaultColor: '#3FE1B0', - buttonHovered: '#3AD4B3', - buttonPressed: '#1CC5A0', - focusOutline: '#333FE1B0', - focusBorder: '#1CC5A0', -}; - theme.opacityDisabled = .5; theme.cornerRadius = 4; @@ -294,54 +91,4 @@ theme.uiState = { 'stateDisabled': 'state-disabled', }; -theme.greyLink = { - 'defaultColor': '#B30C0C0D', - 'buttonHovered': '#CC0C0C0D', - 'buttonPressed': '#FF0C0C0D', - 'focusOutline': '#FF0C0C0D', - 'focusBorder': '#000000' -}; - -theme.input = { - 'backgroundColor': '#ffffff', - 'borderColor': '#9E9E9E', - 'highlight': '#E7E7E7', - 'defaultColor': '#ffffff', - 'buttonHovered': theme.blueHovered, - 'buttonPressed': theme.bluePressed, - 'buttonDisabled': theme.blueDisabled, - 'focusBgColor': theme.blue, - 'focusOutline': theme.blueFocusOutline, - 'focusBorder': theme.blueFocusBorder, -}; - -theme.greenBadge = { - 'textColor': theme.greenBadgeText, - 'backgroundColor': theme.greenBadgeBackground -}; - -theme.redBadge = { - 'textColor': theme.redBadgeText, - 'backgroundColor': theme.redDisabled -}; - -theme.orangeBadge = { - 'textColor': theme.orangeBadgeText, - 'backgroundColor': theme.orangeBadgeBackground -}; - -theme.blueBadge = { - 'textColor': theme.blueBadgeText, - 'backgroundColor': theme.blueBadgeBackground -}; - -theme.purpleStepProgressBarDelegate = { - 'defaultColor': '#592ACB', - 'buttonHovered': '#592ACB', - 'buttonPressed': '#45278D', - 'buttonDisabled': '#9E9E9E', - 'focusOutline': theme.bgColorTransparent, - 'focusBorder': theme.bgColorTransparent, -}; - theme; diff --git a/src/ui/deleteAccount/ViewDeleteAccountRequest.qml b/src/ui/deleteAccount/ViewDeleteAccountRequest.qml index 81025c8e2e..32b53bfa09 100644 --- a/src/ui/deleteAccount/ViewDeleteAccountRequest.qml +++ b/src/ui/deleteAccount/ViewDeleteAccountRequest.qml @@ -54,10 +54,10 @@ MZInAppAuthenticationBase { spacing: MZTheme.theme.vSpacingSmall MZTextBlock { objectName: "accountDeletionLabel" - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignLeft text: MZI18n.DeleteAccountSubheadline2 - .arg("" + .arg("" + MZAuthInApp.emailAddress + "") textFormat: Text.RichText font.pixelSize: MZTheme.theme.fontSize @@ -90,7 +90,7 @@ MZInAppAuthenticationBase { Layout.fillWidth: true objectName: "deleteAccountForRealButton" - colorScheme: MZTheme.theme.redButton + colorScheme: MZTheme.colors.redButton enabled: viewDeleteAccount.allowAccountDeletion // Delete account text: MZI18n.DeleteAccountButtonLabel diff --git a/src/ui/main.qml b/src/ui/main.qml index 7295c2b0e2..f8f0fbf85f 100644 --- a/src/ui/main.qml +++ b/src/ui/main.qml @@ -75,7 +75,7 @@ Window { maximumHeight: fullscreenRequired() ? Screen.height : MZTheme.theme.desktopAppHeight; title: MZI18n.ProductName - color: MZTheme.theme.bgColor + color: MZTheme.colors.bgColor onClosing: close => { console.log("Closing request handling"); @@ -123,7 +123,7 @@ Window { Rectangle { id: iosSafeAreaTopMargin - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent height: safeAreaHeightByDevice(); width: window.width anchors.top: parent.top diff --git a/src/ui/screens/ScreenCaptivePortal.qml b/src/ui/screens/ScreenCaptivePortal.qml index 1e4f61fb5f..26b9828f09 100644 --- a/src/ui/screens/ScreenCaptivePortal.qml +++ b/src/ui/screens/ScreenCaptivePortal.qml @@ -68,7 +68,7 @@ MZFlickable { MZSubtitle { id: subTextBlock - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor font.pixelSize: MZTheme.theme.fontSizeSmall font.family: MZTheme.theme.fontBoldFamily width: openPortalButton.width diff --git a/src/ui/screens/ScreenViewLogs.qml b/src/ui/screens/ScreenViewLogs.qml index 9898be4683..0e585aac12 100644 --- a/src/ui/screens/ScreenViewLogs.qml +++ b/src/ui/screens/ScreenViewLogs.qml @@ -61,7 +61,7 @@ Item { width: parent.width height: 1 - color: MZTheme.theme.divider + color: MZTheme.colors.divider Layout.alignment: Qt.AlignRight anchors.bottom: copyClearWrapper.top } @@ -69,7 +69,7 @@ Item { Rectangle { id: copyClearWrapper - color: MZTheme.theme.bgColor + color: MZTheme.colors.bgColor height: MZTheme.theme.rowHeight * 1.5 anchors.bottom: parent.bottom width: logs.width @@ -91,7 +91,7 @@ Item { Rectangle { Layout.preferredHeight: parent.height Layout.preferredWidth: 1 - color: MZTheme.theme.divider + color: MZTheme.colors.divider Layout.alignment: Qt.AlignRight } diff --git a/src/ui/screens/devices/VPNDeviceListItem.qml b/src/ui/screens/devices/VPNDeviceListItem.qml index 3c14bef2f3..221af1925d 100644 --- a/src/ui/screens/devices/VPNDeviceListItem.qml +++ b/src/ui/screens/devices/VPNDeviceListItem.qml @@ -109,7 +109,7 @@ MZSwipeDelegate { objectName: "swipeActionDelete" activeFocusOnTab: swipeDelegate.isSwipeOpen - bgColor: MZTheme.theme.redHovered + bgColor: MZTheme.colors.redHovered content: Image { anchors.centerIn: parent source: "qrc:/nebula/resources/delete-white.svg" diff --git a/src/ui/screens/devices/VPNRemoveDevicePopup.qml b/src/ui/screens/devices/VPNRemoveDevicePopup.qml index d4853cd507..ebe4330261 100644 --- a/src/ui/screens/devices/VPNRemoveDevicePopup.qml +++ b/src/ui/screens/devices/VPNRemoveDevicePopup.qml @@ -30,8 +30,8 @@ MZSimplePopup { objectName: "confirmRemoveDeviceButton" buttonText: MZI18n.DevicesRemovePopupPrimaryButtonLabel - buttonTextColor: MZTheme.theme.white - colorScheme: MZTheme.theme.redButton + buttonTextColor: MZTheme.colors.white + colorScheme: MZTheme.colors.redButton onClicked: { VPN.removeDeviceFromPublicKey(popup.devicePublicKey); popup.close(); @@ -40,7 +40,7 @@ MZSimplePopup { }, MZCancelButton { Layout.alignment: Qt.AlignHCenter - linkColor: MZTheme.theme.blueButton + linkColor: MZTheme.colors.blueButton fontName: MZTheme.theme.fontInterFamily onClicked: { popup.close(); diff --git a/src/ui/screens/devices/ViewDeviceLimit.qml b/src/ui/screens/devices/ViewDeviceLimit.qml index 210e2257be..a0721b952b 100644 --- a/src/ui/screens/devices/ViewDeviceLimit.qml +++ b/src/ui/screens/devices/ViewDeviceLimit.qml @@ -85,7 +85,7 @@ MZViewBase { labelText: MZI18n.GlobalSignOut fontName: MZTheme.theme.fontBoldFamily - linkColor: MZTheme.theme.redLinkButton + linkColor: MZTheme.colors.redLinkButton onClicked: VPN.logout(); } } diff --git a/src/ui/screens/devices/ViewDevices.qml b/src/ui/screens/devices/ViewDevices.qml index 60e5cc1d05..08b906f914 100644 --- a/src/ui/screens/devices/ViewDevices.qml +++ b/src/ui/screens/devices/ViewDevices.qml @@ -55,7 +55,7 @@ MZViewBase { Layout.maximumWidth: vpnFlickable.width - parent.Layout.leftMargin - parent.Layout.rightMargin - parent.spacing - helpIconButtonLoader.implicitWidth horizontalAlignment: Text.AlignLeft - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor text: MZI18n.DevicesCountLabel.arg(VPNDeviceModel.activeDevices).arg(VPNUser.maxDevices) } diff --git a/src/ui/screens/getHelp/ViewGetHelp.qml b/src/ui/screens/getHelp/ViewGetHelp.qml index aa499cc442..7329effbde 100644 --- a/src/ui/screens/getHelp/ViewGetHelp.qml +++ b/src/ui/screens/getHelp/ViewGetHelp.qml @@ -33,7 +33,7 @@ MZViewBase { accessibleName: MZI18n.GetHelpHelpCenter title: MZI18n.GetHelpHelpCenter iconSource: "qrc:/nebula/resources/externalLink.svg" - backgroundColor: MZTheme.theme.clickableRowBlue + backgroundColor: MZTheme.colors.clickableRowBlue width: parent.width - MZTheme.theme.windowMargin onClicked: MZUrlOpener.openUrlLabel("sumo") } @@ -45,7 +45,7 @@ MZViewBase { title: MZI18n.InAppSupportWorkflowSupportNavLinkText iconSource: "qrc:/nebula/resources/chevron.svg" iconMirror: MZLocalizer.isRightToLeft - backgroundColor: MZTheme.theme.iconButtonLightBackground + backgroundColor: MZTheme.colors.iconButtonLightBackground width: parent.width - MZTheme.theme.windowMargin onClicked: getHelpStackView.push("qrc:/qt/qml/Mozilla/VPN/screens/getHelp/contactUs/ViewContactUsForm.qml"); } @@ -57,7 +57,7 @@ MZViewBase { title: MZI18n.GetHelpViewLogs iconSource: MZFeatureList.get("shareLogs").isSupported ? "qrc:/nebula/resources/externalLink.svg" : "qrc:/nebula/resources/chevron.svg" iconMirror: !MZFeatureList.get("shareLogs").isSupported && MZLocalizer.isRightToLeft - backgroundColor: MZFeatureList.get("shareLogs").isSupported ?MZTheme.theme.clickableRowBlue : MZTheme.theme.iconButtonLightBackground + backgroundColor: MZFeatureList.get("shareLogs").isSupported ?MZTheme.colors.clickableRowBlue : MZTheme.colors.iconButtonLightBackground width: parent.width - MZTheme.theme.windowMargin onClicked: MZLog.requestViewLogs() } @@ -68,7 +68,7 @@ MZViewBase { title: MZI18n.ResetSettingsResetLabel iconSource: "qrc:/nebula/resources/chevron.svg" iconMirror: MZLocalizer.isRightToLeft - backgroundColor: MZTheme.theme.iconButtonLightBackground + backgroundColor: MZTheme.colors.iconButtonLightBackground visible: MZFeatureList.get("factoryReset").isSupported onClicked: getHelpStackView.push("qrc:/qt/qml/Mozilla/VPN/screens/settings/ViewReset.qml"); diff --git a/src/ui/screens/getHelp/developerMenu/ViewDeveloperMenu.qml b/src/ui/screens/getHelp/developerMenu/ViewDeveloperMenu.qml index 9e319956a2..865190dfc4 100644 --- a/src/ui/screens/getHelp/developerMenu/ViewDeveloperMenu.qml +++ b/src/ui/screens/getHelp/developerMenu/ViewDeveloperMenu.qml @@ -191,7 +191,7 @@ MZViewBase { title: "Open Inspector" accessibleName: "Open Inspector" iconSource: "qrc:/nebula/resources/externalLink.svg" - backgroundColor: MZTheme.theme.clickableRowBlue + backgroundColor: MZTheme.colors.clickableRowBlue onClicked: { MZUrlOpener.openUrlLabel("inspector"); } diff --git a/src/ui/screens/getHelp/developerMenu/ViewFeatureList.qml b/src/ui/screens/getHelp/developerMenu/ViewFeatureList.qml index 89b88ea22e..69e32491ca 100644 --- a/src/ui/screens/getHelp/developerMenu/ViewFeatureList.qml +++ b/src/ui/screens/getHelp/developerMenu/ViewFeatureList.qml @@ -35,7 +35,7 @@ MZViewBase { MZLightLabel { text: feature.name - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark } MZTextBlock { @@ -47,7 +47,7 @@ MZViewBase { Rectangle { Layout.preferredHeight: 1 Layout.fillWidth: true - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent } MZSettingsToggle { diff --git a/src/ui/screens/home/ViewMultiHop.qml b/src/ui/screens/home/ViewMultiHop.qml index 0624dcc299..fde5cfd131 100644 --- a/src/ui/screens/home/ViewMultiHop.qml +++ b/src/ui/screens/home/ViewMultiHop.qml @@ -123,7 +123,7 @@ StackView { Layout.preferredHeight: MZTheme.theme.rowHeight Rectangle { - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent Layout.preferredHeight: MZTheme.theme.vSpacing Layout.preferredWidth: MZTheme.theme.vSpacing Layout.leftMargin: 12 diff --git a/src/ui/screens/home/controller/ConnectionStability.qml b/src/ui/screens/home/controller/ConnectionStability.qml index b9b28ad725..e28e0e160e 100644 --- a/src/ui/screens/home/controller/ConnectionStability.qml +++ b/src/ui/screens/home/controller/ConnectionStability.qml @@ -78,7 +78,7 @@ Item { } PropertyChanges { target: stabilityLabel - color: MZTheme.theme.orange + color: MZTheme.colors.orange } PropertyChanges { target: warningIcon @@ -95,7 +95,7 @@ Item { } PropertyChanges { target: stabilityLabel - color: MZTheme.theme.red + color: MZTheme.colors.red } PropertyChanges { target: warningIcon @@ -116,7 +116,7 @@ Item { Rectangle { height: 16 width: MZTheme.theme.iconSizeSmall - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent Image { id: warningIcon diff --git a/src/ui/screens/home/controller/ConnectionTimer.qml b/src/ui/screens/home/controller/ConnectionTimer.qml index 821c8ea885..179a853f89 100644 --- a/src/ui/screens/home/controller/ConnectionTimer.qml +++ b/src/ui/screens/home/controller/ConnectionTimer.qml @@ -36,7 +36,7 @@ RowLayout { Text { id: digit - color: MZTheme.theme.white + color: MZTheme.colors.white horizontalAlignment: Text.AlignHCenter font.letterSpacing: 0 font.pixelSize: MZTheme.theme.fontSize diff --git a/src/ui/screens/home/controller/ControllerImage.qml b/src/ui/screens/home/controller/ControllerImage.qml index d84e38afe9..b90025c7b6 100644 --- a/src/ui/screens/home/controller/ControllerImage.qml +++ b/src/ui/screens/home/controller/ControllerImage.qml @@ -13,7 +13,7 @@ Rectangle { property bool showVPNOnIcon: false - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent opacity: 1 state: VPNController.state states: [ diff --git a/src/ui/screens/home/controller/ControllerView.qml b/src/ui/screens/home/controller/ControllerView.qml index 569662077d..ba485ea79b 100644 --- a/src/ui/screens/home/controller/ControllerView.qml +++ b/src/ui/screens/home/controller/ControllerView.qml @@ -43,7 +43,7 @@ Item { id: boxBackground property var maximumBoxHeight: window.safeContentHeight - MZTheme.theme.windowMargin * 2 - (window.fullscreenRequired() ? box.y + MZTheme.theme.windowMargin : 0); - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent radius: MZTheme.theme.cornerRadius * 2 antialiasing: true @@ -74,14 +74,14 @@ Item { target: logoTitle //% "VPN is off" text: qsTrId("vpn.controller.deactivated") - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark } PropertyChanges { target: logoSubtitle //% "Turn on to protect your privacy" text: qsTrId("vpn.controller.activationSloagan") - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor visible: true } @@ -114,13 +114,13 @@ Item { PropertyChanges { target: logoTitle text: qsTrId("vpn.controller.deactivated") - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark } PropertyChanges { target: logoSubtitle text: qsTrId("vpn.controller.activationSloagan") - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor opacity: 1 visible: true } @@ -271,14 +271,14 @@ Item { target: logoTitle //% "Disconnecting…" text: qsTrId("vpn.controller.disconnecting") - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark } PropertyChanges { target: logoSubtitle //% "Unmasking connection and location" text: qsTrId("vpn.controller.deactivating") - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor opacity: 1 visible: true } @@ -424,7 +424,7 @@ Item { ? connectionInfoCloseText : MZI18n.ConnectionInfoConnectionInformation Accessible.ignored: !enabled || !visible - buttonColorScheme: MZTheme.theme.iconButtonDarkBackground + buttonColorScheme: MZTheme.colors.iconButtonDarkBackground enabled: visible && VPNConnectionHealth.stability !== VPNConnectionHealth.NoSignal opacity: visible ? 1 : 0 visible: VPNController.state === VPNController.StateOn || VPNController.state === VPNController.StateSilentSwitching @@ -541,7 +541,7 @@ Item { id: connectedStateDescription objectName: "secureAndPrivateSubtitle" - color: MZTheme.theme.white + color: MZTheme.colors.white lineHeight: MZTheme.theme.controllerInterLineHeight Accessible.ignored: ipInfoPanel.isOpen || !visible diff --git a/src/ui/screens/home/controller/VPNToggle.qml b/src/ui/screens/home/controller/VPNToggle.qml index 6167415683..c3d3dc6ba6 100644 --- a/src/ui/screens/home/controller/VPNToggle.qml +++ b/src/ui/screens/home/controller/VPNToggle.qml @@ -55,12 +55,12 @@ MZButtonBase { PropertyChanges { target: toggle color: MZTheme.colors.grey30 - border.color: MZTheme.theme.white + border.color: MZTheme.colors.white } PropertyChanges { target: toggleButton - toggleColor: MZTheme.theme.vpnToggleDisconnected + toggleColor: MZTheme.colors.vpnToggleDisconnected } }, @@ -75,14 +75,14 @@ MZButtonBase { PropertyChanges { target: toggle color: MZTheme.colors.grey30 - border.color: MZTheme.theme.white + border.color: MZTheme.colors.white } PropertyChanges { target: toggleButton //% "Turn VPN on" toolTipTitle: qsTrId("vpn.toggle.on") - toggleColor: MZTheme.theme.vpnToggleDisconnected + toggleColor: MZTheme.colors.vpnToggleDisconnected } }, @@ -97,14 +97,14 @@ MZButtonBase { PropertyChanges { target: toggle color: MZTheme.colors.grey30 - border.color: MZTheme.theme.white + border.color: MZTheme.colors.white } PropertyChanges { target: toggleButton //% "Turn VPN on" toolTipTitle: qsTrId("vpn.toggle.on") - toggleColor: MZTheme.theme.vpnToggleDisconnected + toggleColor: MZTheme.colors.vpnToggleDisconnected } }, @@ -115,20 +115,20 @@ MZButtonBase { PropertyChanges { target: cursor anchors.leftMargin: 32 - color: MZTheme.theme.dullGreen + color: MZTheme.colors.dullGreen } PropertyChanges { target: toggle - color: MZTheme.theme.dullPurple - border.color: MZTheme.theme.ink + color: MZTheme.colors.dullPurple + border.color: MZTheme.colors.ink } PropertyChanges { target: toggleButton //% "Turn VPN off" toolTipTitle: qsTrId("vpn.toggle.off") - toggleColor: MZTheme.theme.vpnToggleConnected + toggleColor: MZTheme.colors.vpnToggleConnected } }, @@ -138,20 +138,20 @@ MZButtonBase { PropertyChanges { target: cursor anchors.leftMargin: 32 - color: connectionRetryOverX ? MZTheme.theme.white : MZTheme.theme.dullGreen + color: connectionRetryOverX ? MZTheme.colors.white : MZTheme.colors.dullGreen } PropertyChanges { target: toggle - color: MZTheme.theme.dullPurple - border.color: MZTheme.theme.ink + color: MZTheme.colors.dullPurple + border.color: MZTheme.colors.ink } PropertyChanges { target: toggleButton //% "Turn VPN off" toolTipTitle: qsTrId("vpn.toggle.off") - toggleColor: MZTheme.theme.vpnToggleConnected + toggleColor: MZTheme.colors.vpnToggleConnected } }, @@ -166,13 +166,13 @@ MZButtonBase { PropertyChanges { target: toggle color: MZTheme.colors.green50 - border.color: MZTheme.theme.ink + border.color: MZTheme.colors.ink } PropertyChanges { target: toggleButton toolTipTitle: qsTrId("vpn.toggle.off") - toggleColor: MZTheme.theme.vpnToggleConnected + toggleColor: MZTheme.colors.vpnToggleConnected } }, @@ -187,13 +187,13 @@ MZButtonBase { PropertyChanges { target: toggle color: MZTheme.colors.green50 - border.color: MZTheme.theme.ink + border.color: MZTheme.colors.ink } PropertyChanges { target: toggleButton toolTipTitle: qsTrId("vpn.toggle.off") - toggleColor: MZTheme.theme.vpnToggleConnected + toggleColor: MZTheme.colors.vpnToggleConnected } }, State { @@ -207,13 +207,13 @@ MZButtonBase { PropertyChanges { target: toggle color: MZTheme.colors.grey20 - border.color: MZTheme.theme.white + border.color: MZTheme.colors.white } PropertyChanges { target: toggleButton toolTipTitle: qsTrId("vpn.toggle.on") - toggleColor: MZTheme.theme.vpnToggleDisconnected + toggleColor: MZTheme.colors.vpnToggleDisconnected } }, @@ -229,12 +229,12 @@ MZButtonBase { PropertyChanges { target: toggle color: MZTheme.theme.dullPurple - border.color: MZTheme.theme.ink + border.color: MZTheme.colors.ink } PropertyChanges { target: toggleButton - toggleColor: MZTheme.theme.vpnToggleConnected + toggleColor: MZTheme.colors.vpnToggleConnected } } @@ -266,7 +266,7 @@ MZButtonBase { anchors.margins: -4 radius: height / 2 border.color: toggleColor.focusBorder - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent opacity: toggleButton.activeFocus && (VPNController.state === VPNController.StateOn || VPNController.state === VPNController.StateOnPartial || VPNController.state === VPNController.StateSilentSwitching || VPNController.state === VPNController.StateOff) ? 1 : 0 MZFocusOutline { @@ -277,7 +277,7 @@ MZButtonBase { setMargins: -6 radius: height / 2 border.width: 7 - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent border.color: toggleColor.focusOutline opacity: 0.25 } diff --git a/src/ui/screens/home/controller/ip/IPAddress.qml b/src/ui/screens/home/controller/ip/IPAddress.qml index 8ffe7bf0d6..74b017d98c 100644 --- a/src/ui/screens/home/controller/ip/IPAddress.qml +++ b/src/ui/screens/home/controller/ip/IPAddress.qml @@ -20,7 +20,7 @@ RowLayout { MZBoldInterLabel { id: ipVersion - color: MZTheme.theme.white + color: MZTheme.colors.white font.pixelSize: MZTheme.theme.fontSizeSmall lineHeight: MZTheme.theme.labelLineHeight * 1.25 verticalAlignment: Text.AlignVCenter diff --git a/src/ui/screens/home/servers/ServerLabel.qml b/src/ui/screens/home/servers/ServerLabel.qml index cf3140847f..ac52e74757 100644 --- a/src/ui/screens/home/servers/ServerLabel.qml +++ b/src/ui/screens/home/servers/ServerLabel.qml @@ -15,7 +15,7 @@ import compat 0.1 RowLayout { property var serversList property bool narrowStyle: true - property string fontColor: MZTheme.theme.fontColor + property string fontColor: MZTheme.colors.fontColor id: root Flow { diff --git a/src/ui/screens/home/servers/ServerList.qml b/src/ui/screens/home/servers/ServerList.qml index 9c6799dbd5..68258da67f 100644 --- a/src/ui/screens/home/servers/ServerList.qml +++ b/src/ui/screens/home/servers/ServerList.qml @@ -198,7 +198,7 @@ FocusScope { Layout.preferredWidth: parent.width Layout.maximumWidth: parent.width - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignLeft // TODO: Replace placeholder strings and generate // values that will be set instead of `%1` @@ -261,7 +261,7 @@ FocusScope { id: recommendedServerLabel Layout.leftMargin: MZTheme.theme.listSpacing * 0.5 - fontColor: MZTheme.theme.fontColorDark + fontColor: MZTheme.colors.fontColorDark narrowStyle: false serversList: [{ countryCode: city.country, diff --git a/src/ui/screens/initialize/ViewInitialize.qml b/src/ui/screens/initialize/ViewInitialize.qml index 266dba1781..0ebd434787 100644 --- a/src/ui/screens/initialize/ViewInitialize.qml +++ b/src/ui/screens/initialize/ViewInitialize.qml @@ -18,7 +18,7 @@ Item { Rectangle { id: fallBackBackground // This is a fallback for MZRadialGradient - color: MZTheme.theme.onBoardingGradient.end + color: MZTheme.colors.onBoardingGradient.end height: Screen.height width: Screen.width @@ -33,15 +33,15 @@ Item { gradient: Gradient { GradientStop { - color: MZTheme.theme.onBoardingGradient.start + color: MZTheme.colors.onBoardingGradient.start position: 0.0 } GradientStop { - color: MZTheme.theme.onBoardingGradient.middle + color: MZTheme.colors.onBoardingGradient.middle position: 0.2 } GradientStop { - color: MZTheme.theme.onBoardingGradient.end + color: MZTheme.colors.onBoardingGradient.end position: 0.5 } } @@ -331,7 +331,7 @@ Item { delegate: Rectangle { id: circle - color: index === swipeView.currentIndex ? MZTheme.theme.blue : MZTheme.theme.greyPressed + color: index === swipeView.currentIndex ? MZTheme.colors.blue : MZTheme.colors.greyPressed height: 6 width: 6 radius: 6 @@ -364,7 +364,7 @@ Item { objectName: "alreadyASubscriberLink" labelText: MZI18n.MobileOnboardingAlreadyASubscriber Layout.alignment: Qt.AlignHCenter - linkColor: MZTheme.theme.whiteButton + linkColor: MZTheme.colors.whiteButton width: undefined onClicked: { Glean.interaction.alreadyASubscriberSelected.record({ diff --git a/src/ui/screens/messaging/ViewMessage.qml b/src/ui/screens/messaging/ViewMessage.qml index dfed9d6f92..366fe59199 100644 --- a/src/ui/screens/messaging/ViewMessage.qml +++ b/src/ui/screens/messaging/ViewMessage.qml @@ -111,27 +111,27 @@ MZViewBase { property var warningBadge: { 'badgeText': MZI18n.InAppMessagingWarningBadge, - 'badgeTheme': MZTheme.theme.orangeBadge + 'badgeTheme': MZTheme.colors.orangeBadge }; property var criticalBadge: { 'badgeText': MZI18n.InAppMessagingCriticalBadge, - 'badgeTheme': MZTheme.theme.redBadge + 'badgeTheme': MZTheme.colors.redBadge }; property var newUpdateBadge: { 'badgeText': MZI18n.InAppMessagingNewUpdateBadge, - 'badgeTheme': MZTheme.theme.greenBadge + 'badgeTheme': MZTheme.colors.greenBadge }; property var whatsNewBadge: { 'badgeText': MZI18n.InAppMessagingWhatsNewBadge, - 'badgeTheme': MZTheme.theme.blueBadge + 'badgeTheme': MZTheme.colors.blueBadge }; property var surveyBadge: { 'badgeText': MZI18n.InAppMessagingSurveyBadge, - 'badgeTheme': MZTheme.theme.blueBadge + 'badgeTheme': MZTheme.colors.blueBadge }; property var subscriptionBadge: { 'badgeText': MZI18n.InAppMessagingSubscriptionBadge, - 'badgeTheme': MZTheme.theme.blueBadge + 'badgeTheme': MZTheme.colors.blueBadge }; } } @@ -144,7 +144,7 @@ MZViewBase { Layout.alignment: Qt.AlignRight text: message.formattedDate - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor font.pixelSize: MZTheme.theme.fontSizeSmall lineHeight: 21 horizontalAlignment: Text.AlignRight @@ -178,7 +178,7 @@ MZViewBase { text: message.subtitle font.pixelSize: MZTheme.theme.fontSizeSmall - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignLeft } diff --git a/src/ui/screens/messaging/ViewMessagesInbox.qml b/src/ui/screens/messaging/ViewMessagesInbox.qml index c7cd77a08c..339d51f268 100644 --- a/src/ui/screens/messaging/ViewMessagesInbox.qml +++ b/src/ui/screens/messaging/ViewMessagesInbox.qml @@ -127,7 +127,7 @@ MZViewBase { text: MZI18n.InAppMessagingEmptyStateDescription visible: vpnFlickable.isEmptyState - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor } Rectangle { @@ -216,7 +216,7 @@ MZViewBase { id: deleteSwipeAction activeFocusOnTab: swipeDelegate.isSwipeOpen - bgColor: MZTheme.theme.redHovered + bgColor: MZTheme.colors.redHovered content: Image { anchors.centerIn: parent source: "qrc:/nebula/resources/delete-white.svg" @@ -274,7 +274,7 @@ MZViewBase { opacity: addon && addon.isRead ? 0 : 1 radius: Layout.preferredHeight / 2 - color: MZTheme.theme.blue + color: MZTheme.colors.blue } MZBoldInterLabel { @@ -293,7 +293,7 @@ MZViewBase { text: swipeDelegate.formattedDate font.pixelSize: MZTheme.theme.fontSizeSmall lineHeight: 21 - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignRight } } @@ -306,7 +306,7 @@ MZViewBase { text: swipeDelegate.subtitle font.pixelSize: MZTheme.theme.fontSizeSmall lineHeight: 21 - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignLeft elide: Text.ElideRight maximumLineCount: 1 diff --git a/src/ui/screens/onboarding/OnboardingDataSlide.qml b/src/ui/screens/onboarding/OnboardingDataSlide.qml index d78e19d4f3..0a2610b32d 100644 --- a/src/ui/screens/onboarding/OnboardingDataSlide.qml +++ b/src/ui/screens/onboarding/OnboardingDataSlide.qml @@ -37,7 +37,7 @@ ColumnLayout { text: MZI18n.OnboardingDataSlideBody2 horizontalAlignment: Text.AlignLeft - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor } RowLayout { @@ -104,7 +104,7 @@ ColumnLayout { Layout.fillWidth: true text: MZI18n.OnboardingDataSlideLearnMoreCaption2 - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor } MZLinkButton { diff --git a/src/ui/screens/onboarding/OnboardingDevicesSlide.qml b/src/ui/screens/onboarding/OnboardingDevicesSlide.qml index 526d342b1f..1c5d94eccb 100644 --- a/src/ui/screens/onboarding/OnboardingDevicesSlide.qml +++ b/src/ui/screens/onboarding/OnboardingDevicesSlide.qml @@ -40,7 +40,7 @@ ColumnLayout { text: MZUiUtils.isMobile() ? MZI18n.OnboardingDevicesSlideBodyMobile : MZI18n.OnboardingDevicesSlideBody2 horizontalAlignment: Text.AlignLeft - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor } RowLayout { @@ -141,7 +141,7 @@ ColumnLayout { //Google play store QR code Rectangle { - color: MZTheme.theme.white + color: MZTheme.colors.white Layout.preferredHeight: qrcodeStack.qrcodeSize Layout.preferredWidth: qrcodeStack.qrcodeSize @@ -178,7 +178,7 @@ ColumnLayout { //Apple app store QR code Rectangle { - color: MZTheme.theme.white + color: MZTheme.colors.white Layout.preferredHeight: qrcodeStack.qrcodeSize Layout.preferredWidth: qrcodeStack.qrcodeSize diff --git a/src/ui/screens/onboarding/OnboardingPrivacySlide.qml b/src/ui/screens/onboarding/OnboardingPrivacySlide.qml index 943b803e44..cf2ca67275 100644 --- a/src/ui/screens/onboarding/OnboardingPrivacySlide.qml +++ b/src/ui/screens/onboarding/OnboardingPrivacySlide.qml @@ -40,7 +40,7 @@ ColumnLayout { text: MZI18n.OnboardingPrivacySlideBody horizontalAlignment: Text.AlignLeft - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor } PrivacyFeaturesList { diff --git a/src/ui/screens/onboarding/OnboardingStartSlideDesktop.qml b/src/ui/screens/onboarding/OnboardingStartSlideDesktop.qml index d889efc6b0..11ec261211 100644 --- a/src/ui/screens/onboarding/OnboardingStartSlideDesktop.qml +++ b/src/ui/screens/onboarding/OnboardingStartSlideDesktop.qml @@ -43,7 +43,7 @@ ColumnLayout { text: MZI18n.OnboardingStartSlideBody2 horizontalAlignment: Text.AlignLeft - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor } RowLayout { diff --git a/src/ui/screens/onboarding/OnboardingStartSlideMobile.qml b/src/ui/screens/onboarding/OnboardingStartSlideMobile.qml index 6e1a492a9e..fc65ae6ae2 100644 --- a/src/ui/screens/onboarding/OnboardingStartSlideMobile.qml +++ b/src/ui/screens/onboarding/OnboardingStartSlideMobile.qml @@ -39,7 +39,7 @@ ColumnLayout { text: MZI18n.OnboardingStartSlideMobileBody horizontalAlignment: Text.AlignLeft - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor } Item { diff --git a/src/ui/screens/settings/ViewLanguage.qml b/src/ui/screens/settings/ViewLanguage.qml index 0564134ed6..41020d17a5 100644 --- a/src/ui/screens/settings/ViewLanguage.qml +++ b/src/ui/screens/settings/ViewLanguage.qml @@ -112,7 +112,7 @@ MZViewBase { Layout.leftMargin: 18.5 Layout.rightMargin: 18.5 - color: MZTheme.theme.input.highlight + color: MZTheme.colors.input.highlight } } diff --git a/src/ui/screens/settings/ViewReset.qml b/src/ui/screens/settings/ViewReset.qml index 419480efa4..f885a7177c 100644 --- a/src/ui/screens/settings/ViewReset.qml +++ b/src/ui/screens/settings/ViewReset.qml @@ -48,7 +48,7 @@ ViewFullScreen { Layout.fillWidth: true text: MZI18n.ResetSettingsBody1 - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignLeft } @@ -58,7 +58,7 @@ ViewFullScreen { text: "".arg(MZI18n.HelpSheetsPrivacyTitle) textFormat: Text.RichText - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignLeft Accessible.name: MZI18n.HelpSheetsPrivacyTitle @@ -70,7 +70,7 @@ ViewFullScreen { text: "".arg(MZI18n.SettingsAppExclusionTitle) textFormat: Text.RichText - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignLeft visible: MZFeatureList.get("splitTunnel").isSupported @@ -83,7 +83,7 @@ ViewFullScreen { text: "".arg(MZI18n.MultiHopFeatureMultiHopConnectionsHeader) textFormat: Text.RichText - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignLeft Accessible.name: MZI18n.MultiHopFeatureMultiHopConnectionsHeader @@ -95,7 +95,7 @@ ViewFullScreen { text: "".arg(MZI18n.ResetSettingsListItemPreferences) textFormat: Text.RichText - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignLeft Accessible.name: MZI18n.ResetSettingsListItemPreferences @@ -106,7 +106,7 @@ ViewFullScreen { Layout.fillWidth: true text: MZI18n.ResetSettingsBody2 - color: MZTheme.theme.fontColor + color: MZTheme.colors.fontColor horizontalAlignment: Text.AlignLeft } } @@ -120,7 +120,7 @@ ViewFullScreen { Layout.fillWidth: true - colorScheme: MZTheme.theme.redButton + colorScheme: MZTheme.colors.redButton text: MZI18n.ResetSettingsResetButtonLabel onClicked: confirmResetPopupLoader.active = true @@ -164,7 +164,7 @@ ViewFullScreen { Layout.fillWidth: true text: MZI18n.ResetSettingsConfirmResetModalResetButtonLabel - colorScheme: MZTheme.theme.redButton + colorScheme: MZTheme.colors.redButton onClicked: { Glean.interaction.resetVpnSelected.record({ diff --git a/src/ui/screens/settings/ViewSubscriptionManagement/SubscriptionManagementItem.qml b/src/ui/screens/settings/ViewSubscriptionManagement/SubscriptionManagementItem.qml index 9ce032bdbb..909a62f0b9 100644 --- a/src/ui/screens/settings/ViewSubscriptionManagement/SubscriptionManagementItem.qml +++ b/src/ui/screens/settings/ViewSubscriptionManagement/SubscriptionManagementItem.qml @@ -120,7 +120,7 @@ ColumnLayout { id: rowText objectName: _objectName + "-valueText" - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark horizontalAlignment: Text.AlignRight font.pixelSize: MZTheme.theme.fontSizeSmall text: valueText diff --git a/src/ui/screens/settings/ViewSubscriptionManagement/ViewSubscriptionManagement.qml b/src/ui/screens/settings/ViewSubscriptionManagement/ViewSubscriptionManagement.qml index ccfb748ebf..8409379e97 100644 --- a/src/ui/screens/settings/ViewSubscriptionManagement/ViewSubscriptionManagement.qml +++ b/src/ui/screens/settings/ViewSubscriptionManagement/ViewSubscriptionManagement.qml @@ -58,7 +58,7 @@ MZViewBase { MZMetropolisLabel { - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark horizontalAlignment: Text.AlignLeft font.family: MZTheme.theme.fontBoldFamily text: MZI18n.SubscriptionManagementSummaryHeadline @@ -80,7 +80,7 @@ MZViewBase { } MZMetropolisLabel { - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark horizontalAlignment: Text.AlignLeft font.family: MZTheme.theme.fontBoldFamily text: MZI18n.SubscriptionManagementPaymentHeadline @@ -115,7 +115,7 @@ MZViewBase { objectName: "accountDeletionButton" fontName: MZTheme.theme.fontBoldFamily labelText: MZI18n.DeleteAccountButtonLabel - linkColor: MZTheme.theme.redLinkButton + linkColor: MZTheme.colors.redLinkButton visible: MZFeatureList.get("accountDeletion").isSupported onClicked: { diff --git a/src/ui/screens/settings/appPermissions/AppPermissionsList.qml b/src/ui/screens/settings/appPermissions/AppPermissionsList.qml index b2e4dbd4d3..06f7aa12de 100644 --- a/src/ui/screens/settings/appPermissions/AppPermissionsList.qml +++ b/src/ui/screens/settings/appPermissions/AppPermissionsList.qml @@ -234,7 +234,7 @@ ColumnLayout { Layout.maximumHeight: MZTheme.theme.windowMargin * 2 Layout.maximumWidth: MZTheme.theme.windowMargin * 2 Layout.alignment: Qt.AlignVCenter - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent Image { height: MZTheme.theme.windowMargin * 2 @@ -257,7 +257,7 @@ ColumnLayout { Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter Layout.fillWidth: true text: appName - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark horizontalAlignment: Text.AlignLeft MZMouseArea { diff --git a/src/ui/screens/subscriptionNeeded/ViewSubscriptionNeeded.qml b/src/ui/screens/subscriptionNeeded/ViewSubscriptionNeeded.qml index b77cdcece8..f16a9ce0fe 100644 --- a/src/ui/screens/subscriptionNeeded/ViewSubscriptionNeeded.qml +++ b/src/ui/screens/subscriptionNeeded/ViewSubscriptionNeeded.qml @@ -21,7 +21,7 @@ MZFlickable { flickContentHeight: headerLink.implicitHeight + col.implicitHeight + col.anchors.topMargin Rectangle { - color: MZTheme.theme.bgColor + color: MZTheme.colors.bgColor anchors.fill: parent } @@ -78,7 +78,7 @@ MZFlickable { Layout.rightMargin: MZTheme.theme.windowMargin * 1.5 text: MZI18n.PurchaseWebMessage - .arg("" + .arg("" + VPNUser.email + "") font.pixelSize: MZTheme.theme.fontSize horizontalAlignment: Text.AlignHCenter @@ -215,7 +215,7 @@ MZFlickable { height: 4 radius: 2 opacity: .8 - color: MZTheme.theme.greyLink.defaultColor + color: MZTheme.colors.greyLink.defaultColor } MZGreyLink { diff --git a/src/ui/sharedViews/ViewErrorFullScreen.qml b/src/ui/sharedViews/ViewErrorFullScreen.qml index f094e1797e..c8c5082dd9 100644 --- a/src/ui/sharedViews/ViewErrorFullScreen.qml +++ b/src/ui/sharedViews/ViewErrorFullScreen.qml @@ -69,7 +69,7 @@ MZFlickable { Layout.preferredHeight: 48 Layout.preferredWidth: 48 Layout.alignment: Qt.AlignHCenter; - color: MZTheme.theme.red + color: MZTheme.colors.red radius: height / 2 Image { diff --git a/src/ui/sharedViews/ViewUpdate.qml b/src/ui/sharedViews/ViewUpdate.qml index c902a28215..1f37782a4c 100644 --- a/src/ui/sharedViews/ViewUpdate.qml +++ b/src/ui/sharedViews/ViewUpdate.qml @@ -102,7 +102,7 @@ MZFlickable { id: alertWrapperBackground anchors.fill: alertWrapper - color: MZTheme.theme.white + color: MZTheme.colors.white radius: 8 anchors.topMargin: -MZTheme.theme.windowMargin anchors.bottomMargin: -MZTheme.theme.windowMargin @@ -138,7 +138,7 @@ MZFlickable { font.family: MZTheme.theme.fontInterFamily font.pixelSize: MZTheme.theme.fontSizeSmall - color: MZTheme.theme.fontColorDark + color: MZTheme.colors.fontColorDark Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter //% "Your connection will not be secure while you update." @@ -160,7 +160,7 @@ MZFlickable { Rectangle { Layout.fillWidth: true Layout.preferredHeight: MZTheme.theme.windowMargin / 2 - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent } MZButton { @@ -196,7 +196,7 @@ MZFlickable { Rectangle { Layout.fillWidth: true Layout.preferredHeight: MZTheme.theme.windowMargin * 2 - color: MZTheme.theme.transparent + color: MZTheme.colors.transparent } } From aea1a66aaca90f91832e9b1faee4187b41dac54f Mon Sep 17 00:00:00 2001 From: Matt Cleinman <9295855+mcleinman@users.noreply.github.com> Date: Mon, 4 Nov 2024 10:57:51 -0800 Subject: [PATCH 2/4] remove duplicate color hashes --- nebula/ui/themes/main/colors.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/nebula/ui/themes/main/colors.js b/nebula/ui/themes/main/colors.js index 3bcffbf764..507d5673ba 100644 --- a/nebula/ui/themes/main/colors.js +++ b/nebula/ui/themes/main/colors.js @@ -164,7 +164,7 @@ color.greyPressed = '#C2C2C2'; color.greyDisabled = '#D8D8D8'; color.ink = color.purple90; color.orange = color.yellow50; -color.orangeHovered = '#E27F2E'; +color.orangeHovered = color.yellow60; color.orangeFocus = '#4DE27F2E'; color.orangePressed = color.yellow70; color.red = color.red60; @@ -483,7 +483,7 @@ color.removeDeviceBtn = { color.vpnToggleConnected = { defaultColor: color.green, buttonHovered: color.green60, - buttonPressed: '#1CC5A0', + buttonPressed: color.green70, focusOutline: color.bgColor30, focusBorder: color.lightFocusBorder, }; @@ -509,9 +509,9 @@ color.card = { color.greenAlert = { defaultColor: color.green50, buttonHovered: color.green60, - buttonPressed: '#1CC5A0', + buttonPressed: color.green70, focusOutline: '#333FE1B0', - focusBorder: '#1CC5A0', + focusBorder: color.green70, }; color.greyLink = { From b575479fcc877149c83c3744a991c51ed25eab08 Mon Sep 17 00:00:00 2001 From: Matt Cleinman <9295855+mcleinman@users.noreply.github.com> Date: Mon, 4 Nov 2024 11:32:14 -0800 Subject: [PATCH 3/4] remove duplicate named colors --- nebula/ui/components/forms/MZComboBox.qml | 16 +++---- .../ui/components/forms/MZInputBackground.qml | 4 +- nebula/ui/components/forms/MZInputStates.qml | 42 +++++++++---------- nebula/ui/components/forms/MZTextArea.qml | 6 +-- nebula/ui/components/forms/MZTextField.qml | 2 +- nebula/ui/themes/main/colors.js | 7 +--- 6 files changed, 37 insertions(+), 40 deletions(-) diff --git a/nebula/ui/components/forms/MZComboBox.qml b/nebula/ui/components/forms/MZComboBox.qml index b47a77f79c..7c14ca2874 100644 --- a/nebula/ui/components/forms/MZComboBox.qml +++ b/nebula/ui/components/forms/MZComboBox.qml @@ -151,12 +151,12 @@ ComboBox { PropertyChanges { target: combo.contentItem - color: MZTheme.colors.input.focus.text + color: MZTheme.colors.inputState.focus.text } PropertyChanges { target: combo.background - border.color: MZTheme.colors.input.focus.border + border.color: MZTheme.colors.inputState.focus.border border.width: 2 } }, @@ -168,12 +168,12 @@ ComboBox { PropertyChanges { target: combo.contentItem - color: MZTheme.colors.input.default.placeholder + color: MZTheme.colors.inputState.default.placeholder } PropertyChanges { target: combo.background - border.color: MZTheme.colors.input.default.border + border.color: MZTheme.colors.inputState.default.border border.width: 1 } }, @@ -185,12 +185,12 @@ ComboBox { PropertyChanges { target: combo.contentItem - color: MZTheme.colors.input.hover.text + color: MZTheme.colors.inputState.hover.text } PropertyChanges { target: combo.background - border.color: MZTheme.colors.input.hover.border + border.color: MZTheme.colors.inputState.hover.border border.width: 1 } }, @@ -200,12 +200,12 @@ ComboBox { PropertyChanges { target: combo.contentItem - color: MZTheme.colors.input.default.text + color: MZTheme.colors.inputState.default.text } PropertyChanges { target: combo.background - border.color: MZTheme.colors.input.default.border + border.color: MZTheme.colors.inputState.default.border border.width: 1 } } diff --git a/nebula/ui/components/forms/MZInputBackground.qml b/nebula/ui/components/forms/MZInputBackground.qml index 8e3a67f174..a7f2d06e96 100644 --- a/nebula/ui/components/forms/MZInputBackground.qml +++ b/nebula/ui/components/forms/MZInputBackground.qml @@ -14,7 +14,7 @@ Rectangle { anchors.fill: parent antialiasing: true - border.color: MZTheme.colors.input.default.border + border.color: MZTheme.colors.inputState.default.border radius: MZTheme.theme.cornerRadius Behavior on border.color { @@ -29,7 +29,7 @@ Rectangle { anchors.fill: parent anchors.margins: border.width * -1 antialiasing: true - border.color: itemToFocus && itemToFocus.hasError ? MZTheme.colors.input.error.highlight : MZTheme.colors.input.focus.highlight + border.color: itemToFocus && itemToFocus.hasError ? MZTheme.colors.inputState.error.highlight : MZTheme.colors.inputState.focus.highlight border.width: 4 color: MZTheme.colors.transparent opacity: itemToFocus && itemToFocus.activeFocus && itemToFocus.showInteractionStates ? 1 : 0 diff --git a/nebula/ui/components/forms/MZInputStates.qml b/nebula/ui/components/forms/MZInputStates.qml index f7104b37ea..4851180a77 100644 --- a/nebula/ui/components/forms/MZInputStates.qml +++ b/nebula/ui/components/forms/MZInputStates.qml @@ -16,13 +16,13 @@ Item { PropertyChanges { target: itemToTarget - color: MZTheme.colors.input.disabled.text - placeholderTextColor: MZTheme.colors.input.disabled.placeholder + color: MZTheme.colors.inputState.disabled.text + placeholderTextColor: MZTheme.colors.inputState.disabled.placeholder } PropertyChanges { target: itemToTarget.background - border.color: MZTheme.colors.input.disabled.border + border.color: MZTheme.colors.inputState.disabled.border border.width: 1 } }, @@ -36,13 +36,13 @@ Item { PropertyChanges { target: itemToTarget - color: MZTheme.colors.input.default.text - placeholderTextColor: MZTheme.colors.input.default.placeholder + color: MZTheme.colors.inputState.default.text + placeholderTextColor: MZTheme.colors.inputState.default.placeholder } PropertyChanges { target: itemToTarget.background - border.color: MZTheme.colors.input.default.border + border.color: MZTheme.colors.inputState.default.border border.width: 1 } }, @@ -55,13 +55,13 @@ Item { PropertyChanges { target: itemToTarget - color: MZTheme.colors.input.hover.text - placeholderTextColor: MZTheme.colors.input.hover.placeholder + color: MZTheme.colors.inputState.hover.text + placeholderTextColor: MZTheme.colors.inputState.hover.placeholder } PropertyChanges { target: itemToTarget.background - border.color: MZTheme.colors.input.hover.border + border.color: MZTheme.colors.inputState.hover.border border.width: 1 } }, @@ -71,13 +71,13 @@ Item { PropertyChanges { target: itemToTarget - color: MZTheme.colors.input.focus.text - placeholderTextColor: MZTheme.colors.input.focus.placeholder + color: MZTheme.colors.inputState.focus.text + placeholderTextColor: MZTheme.colors.inputState.focus.placeholder } PropertyChanges { target: itemToTarget.background - border.color: MZTheme.colors.input.focus.border + border.color: MZTheme.colors.inputState.focus.border border.width: 2 } }, @@ -87,13 +87,13 @@ Item { PropertyChanges { target: itemToTarget - color: MZTheme.colors.input.default.text - placeholderTextColor: MZTheme.colors.input.default.placeholder + color: MZTheme.colors.inputState.default.text + placeholderTextColor: MZTheme.colors.inputState.default.placeholder } PropertyChanges { target: itemToTarget.background - border.color: MZTheme.colors.input.default.border + border.color: MZTheme.colors.inputState.default.border border.width: 1 } }, @@ -103,13 +103,13 @@ Item { PropertyChanges { target: itemToTarget - color: MZTheme.colors.input.error.text - placeholderTextColor: MZTheme.colors.input.error.placeholder + color: MZTheme.colors.inputState.error.text + placeholderTextColor: MZTheme.colors.inputState.error.placeholder } PropertyChanges { target: itemToTarget.background - border.color: MZTheme.colors.input.error.border + border.color: MZTheme.colors.inputState.error.border border.width: 2 } }, @@ -119,13 +119,13 @@ Item { PropertyChanges { target: itemToTarget - color: MZTheme.colors.input.error.text - placeholderTextColor: MZTheme.colors.input.error.placeholder + color: MZTheme.colors.inputState.error.text + placeholderTextColor: MZTheme.colors.inputState.error.placeholder } PropertyChanges { target: itemToTarget.background - border.color: MZTheme.colors.input.error.border + border.color: MZTheme.colors.inputState.error.border border.width: 1 } } diff --git a/nebula/ui/components/forms/MZTextArea.qml b/nebula/ui/components/forms/MZTextArea.qml index 163af1fc77..b7170da18a 100644 --- a/nebula/ui/components/forms/MZTextArea.qml +++ b/nebula/ui/components/forms/MZTextArea.qml @@ -54,7 +54,7 @@ Item { } bottomPadding: MZTheme.theme.windowMargin clip: true - color: MZTheme.colors.input.default.text + color: MZTheme.colors.inputState.default.text cursorDelegate: MZCursorDelegate {} enabled: root.enabled font.family: MZTheme.theme.fontInterFamily @@ -103,8 +103,8 @@ Item { topMargin: MZTheme.theme.windowMargin } color: textAreaStates.state === "emptyHovered" - ? MZTheme.colors.input.hover.placeholder - : MZTheme.colors.input.default.placeholder + ? MZTheme.colors.inputState.hover.placeholder + : MZTheme.colors.inputState.default.placeholder visible: textArea.text.length < 1 PropertyAnimation on opacity { diff --git a/nebula/ui/components/forms/MZTextField.qml b/nebula/ui/components/forms/MZTextField.qml index 77866dedbf..72187e5681 100644 --- a/nebula/ui/components/forms/MZTextField.qml +++ b/nebula/ui/components/forms/MZTextField.qml @@ -30,7 +30,7 @@ TextField { id: textFieldBackground } bottomPadding: MZTheme.theme.windowMargin / 2 - color: MZTheme.colors.input.default.text + color: MZTheme.colors.inputState.default.text cursorDelegate: MZCursorDelegate {} echoMode: TextInput.Normal font.family: MZTheme.theme.fontInterFamily diff --git a/nebula/ui/themes/main/colors.js b/nebula/ui/themes/main/colors.js index 507d5673ba..85fdb97d31 100644 --- a/nebula/ui/themes/main/colors.js +++ b/nebula/ui/themes/main/colors.js @@ -201,17 +201,14 @@ color.light = color.grey5; /** * Functional */ -color.blue = color.blue50; color.blueActive = color.blue70; color.blueHover = color.blue60; color.blueFocus = addTransparency(color.blue, 0.4); -color.green = color.green50; color.greenActive = color.green70; color.greenHover = color.green60; color.greenFocus = color.green20; -color.red = color.red50; color.redActive = color.red70; color.redHover = color.red60; color.redFocus = color.red10; @@ -236,7 +233,7 @@ color.success = { }; color.error = { - default: color.red, + default: color.red50, active: color.redActive, hover: color.redHover, focus: color.redFocus, @@ -327,7 +324,7 @@ color.gradientGreen = { /** * Inputs */ -color.input = { +color.inputState = { default: { background: color.white, border: color.grey30, From 924238c7a74b8dd0b86dcc43abb42b61da2a892f Mon Sep 17 00:00:00 2001 From: Matt Cleinman <9295855+mcleinman@users.noreply.github.com> Date: Mon, 4 Nov 2024 12:07:54 -0800 Subject: [PATCH 4/4] fix missing property warnings in logs --- nebula/ui/components/MZAlert.qml | 4 ++-- nebula/ui/components/MZDropShadowWithStates.qml | 1 + nebula/ui/components/MZUIStates.qml | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/nebula/ui/components/MZAlert.qml b/nebula/ui/components/MZAlert.qml index 7fc386f90e..7283a212b5 100644 --- a/nebula/ui/components/MZAlert.qml +++ b/nebula/ui/components/MZAlert.qml @@ -88,7 +88,7 @@ Rectangle { alertColor: MZTheme.colors.blue alertHoverColor: MZTheme.colors.blueHovered alertClickColor: MZTheme.colors.bluePressed - fontcolor: MZTheme.colors.white + fontColor: MZTheme.colors.white closeIcon: whiteCloseIcon } }, @@ -121,7 +121,7 @@ Rectangle { alertColor: MZTheme.colors.red alertHoverColor: MZTheme.colors.redHovered alertClickColor: MZTheme.colors.redPressed - fontcolor: MZTheme.colors.white + fontColor: MZTheme.colors.white closeIcon: whiteCloseIcon } }, diff --git a/nebula/ui/components/MZDropShadowWithStates.qml b/nebula/ui/components/MZDropShadowWithStates.qml index 6a9075cfe2..9c7465cb58 100644 --- a/nebula/ui/components/MZDropShadowWithStates.qml +++ b/nebula/ui/components/MZDropShadowWithStates.qml @@ -4,6 +4,7 @@ import QtQuick 2.0 import Mozilla.VPN 1.0 +import Mozilla.Shared 1.0 import compat 0.1 diff --git a/nebula/ui/components/MZUIStates.qml b/nebula/ui/components/MZUIStates.qml index 34079ed191..d4238eb8b6 100644 --- a/nebula/ui/components/MZUIStates.qml +++ b/nebula/ui/components/MZUIStates.qml @@ -60,7 +60,7 @@ Rectangle { PropertyChanges { target: buttonBackground - color: buttonDisabled in colorScheme ? colorScheme.buttonDisabled : colorScheme.defaultColor + color: colorScheme.buttonDisabled ? colorScheme.buttonDisabled : colorScheme.defaultColor opacity: 1 }