From fc4708ad1a3aa261df2732204a30fced1b315d13 Mon Sep 17 00:00:00 2001 From: Matt Cleinman <9295855+mcleinman@users.noreply.github.com> Date: Tue, 25 Feb 2025 09:41:30 -0800 Subject: [PATCH 1/5] dark mode draft --- nebula/ui/themes/CMakeLists.txt | 2 + nebula/ui/themes/colors.js | 1 + nebula/ui/themes/dark-mode/sizing.js | 94 +++++++++++++++++++++++ nebula/ui/themes/dark-mode/theme.js | 111 +++++++++++++++++++++++++++ 4 files changed, 208 insertions(+) create mode 100644 nebula/ui/themes/dark-mode/sizing.js create mode 100644 nebula/ui/themes/dark-mode/theme.js diff --git a/nebula/ui/themes/CMakeLists.txt b/nebula/ui/themes/CMakeLists.txt index 2f94f2cbea..72dbb9f62a 100644 --- a/nebula/ui/themes/CMakeLists.txt +++ b/nebula/ui/themes/CMakeLists.txt @@ -12,6 +12,8 @@ qt_add_qml_module(themes theme-derived.js main/theme.js main/sizing.js + dark-mode/theme.js + dark-mode/sizing.js not-designer-approved/theme.js not-designer-approved/sizing.js ) diff --git a/nebula/ui/themes/colors.js b/nebula/ui/themes/colors.js index 119aaaaeec..f9c3041772 100644 --- a/nebula/ui/themes/colors.js +++ b/nebula/ui/themes/colors.js @@ -66,6 +66,7 @@ color.green5 = '#E3FFF3'; color.black = '#000000'; color.grey60 = '#0C0C0D'; color.grey50 = '#3D3D3D'; +color.grey45 = '#42414D'; color.grey40 = '#6D6D6E'; color.grey30 = '#9E9E9E'; color.grey20 = '#CECECF'; diff --git a/nebula/ui/themes/dark-mode/sizing.js b/nebula/ui/themes/dark-mode/sizing.js new file mode 100644 index 0000000000..e67a77a116 --- /dev/null +++ b/nebula/ui/themes/dark-mode/sizing.js @@ -0,0 +1,94 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +const theme = {}; + +theme.fontFamily = 'Metropolis'; +theme.fontBoldFamily = 'MetropolisSemiBold'; +theme.fontInterFamily = 'InterUI'; +theme.fontInterSemiBoldFamily = 'InterSemiBold'; +theme.fontSize = 15; +theme.fontSizeLarge = 22; +theme.fontSizeSmall = 13; +theme.fontSizeSmallest = 11; +theme.fontWeightBold = 600; +theme.iconSize = 16; +theme.iconSizeFlag = 72; +theme.iconSizeSmall = 14; +theme.labelLineHeight = 22; +theme.cityListTopMargin = 18; +theme.controllerInterLineHeight = 18; +theme.hSpacing = 20; +theme.vSpacing = 24; +theme.vSpacingSmall = 16; +theme.listSpacing = 8; +theme.maxTextWidth = 296; +theme.windowMargin = 16; +theme.popupMargin = 24; +theme.sheetTopMargin = 32 +theme.desktopAppHeight = 640; +theme.desktopAppWidth = 360; +theme.tabletMinimumWidth = 600; +theme.largePhoneHeight = 852 +theme.menuHeight = 56; +theme.viewBaseTopMargin = 16; +theme.checkBoxRowSubLabelTopMargin = 2; +theme.dividerHeight = 1 + +theme.helpSheetTitleBodySpacing = 8 +theme.helpSheetBodySpacing = 16 +theme.helpSheetBodyButtonSpacing = 16 +theme.helpSheetSecondaryButtonSpacing = 8 + +theme.navBarHeight = 64; +theme.navBarMaxWidth = 608; +theme.navBarTopMargin = 48; +theme.navBarBottomMargin = Qt.platform.os !== 'ios' ? 16 : 34; +theme.navBarHeightWithMargins = + theme.navBarHeight + theme.navBarTopMargin + theme.navBarBottomMargin; +theme.navBarIconSize = 48 +theme.navBarMaxPaddingTablet = 120 +theme.navBarMaxPadding = 48 + +theme.onboardingMinimumVerticalSpacing = 16; + +theme.swipeDelegateActionWidth = 56; +theme.badgeHorizontalPadding = 8 +theme.badgeVerticalPadding = 3 + +theme.checkBoxHeightWidth = 20; +theme.checkmarkHeightWidth = 12; + +theme.progressBarDelegateHeightWidth = 32 + +theme.maxZLevel = 10 + +theme.toggleHeight = 24 +theme.toggleWidth = 45 +theme.toggleRowDividerSpacing = 16 + +theme.opacityDisabled = .5; + +theme.cornerRadius = 4; +theme.focusBorderWidth = 2; + +// In milliseconds, the animation of a single device removal +theme.removeDeviceAnimation = 300; +theme.rowHeight = 40; +theme.settingsMaxContentHeight = 740; +theme.maxHorizontalContentWidth = 460; +theme.contentTopMarginDesktop = 20; +theme.contentTopMarginMobile = 48; +theme.contentBottomMargin = 20; + +theme.uiState = { + 'stateDefault': 'state-default', + 'stateHovered': 'state-hovered', + 'statePressed': 'state-pressed', + 'stateFocused': 'state-focused', + 'stateLoading': 'state-loading', + 'stateDisabled': 'state-disabled', +}; + +theme; diff --git a/nebula/ui/themes/dark-mode/theme.js b/nebula/ui/themes/dark-mode/theme.js new file mode 100644 index 0000000000..65f790a035 --- /dev/null +++ b/nebula/ui/themes/dark-mode/theme.js @@ -0,0 +1,111 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// This is to determine whether to show the dark mode version of images or not. +color.useDarkAssets = true; + +/** + * Part 3: Theme colors + * Named colors in this section should only be set to colors in part 1 or 2. + * This file should be duplicated for additional themes, and is the only file + * that needs to be duplicated. + * + * The named colors in this section and section 4 SHOULD be used in code - + * and should be the ONLY colors used in code. (One exception: color.transparent + * can be used in code.) + */ +// Primary +color.primary = color.purple90; // set +color.primaryBrighter = color.purple70; +color.primaryHovered = color.washedPurple; // set +color.primaryPressed = color.dullPurple; + +// Backgrounds +color.bgColor = color.grey45; // maybe set +color.bgColorTransparent = addTransparency(color.bgColor, 0.0); +color.bgColorStronger = color.white; +color.overlayBackground = addTransparency(color.black, 0.3); + +// Fonts +color.fontColor = color.grey5; // done +color.fontColorDark = color.grey5 // done; +color.fontColorWarning = color.yellow70; +color.fontColorInverted = color.grey5; // done +color.fontColorInvertedMuted = color.grey5; // done +color.fontTitleColor = color.black; + +// Dividers and borders +color.divider = color.grey10; +color.dropShadow = color.grey60; +color.darkFocusBorder = color.grey40; +color.lightFocusBorder = color.grey15; +color.inputHighlight = color.grey10; + +// Success/Failure/Warning/Normal levels +color.successMain = color.green90; +color.successAccent = color.green; +color.successBackground = color.green5; +color.errorMain = color.red80; +color.errorAccent = color.red50; // set +color.errorAccentLight = color.grey30; // set +color.errorBackground = color.red10; +color.warningMain = color.yellow90; +color.warningAccent = color.orange; +color.warningBackground = color.orange10; +color.normalLevelMain = color.blue90; +color.normalLevelAccent = color.blue; +color.normalLevelBackground = addTransparency(color.blue, 0.4); + +// Button colors +color.radioButtonDisabledHovered = color.greyHovered; +color.radioButtonDisabledPressed = color.greyPressed; +color.disabledButtonColor = color.grey20; + +// Step progress bar (several other colors for bar based on primary color) +color.stepProgressBarHighlight = color.purple10; +color.stepProgressBarIncomplete = color.grey30; + +// Toggle +color.activatingToggle = color.dullPurple; +color.activatingToggleBackground = color.dullGreen; + +// Objects (these aren't colors, these are objects of colors) +color.destructiveButton = color.redButton; +color.normalButton = color.blueButton; +color.successAlert = color.greenAlert; +color.warningAlert = color.orangeAlert; +color.clickableRow = color.clickableRowBlue; +color.textLink = color.greyLink; + +color.onBoardingGradient = { + start: color.lighterOnboardingPurple, + middle: color.mediumOnboardingPurple, + end: color.darkerOnboardingPurple, +}; + +color.vpnToggleConnected = { + defaultColor: color.blue20, // set + buttonHovered: color.green60, + buttonPressed: color.green70, + focusOutline: addTransparency(color.bgColor, 0.3), + focusBorder: color.lightFocusBorder, +}; + +color.vpnToggleDisconnected = { + defaultColor: color.grey30, // set + buttonHovered: color.fontColor, + buttonPressed: color.fontColorDark, + buttonDisabled: color.disabledButtonColor, + focusOutline: color.transparent, + focusBorder: color.darkFocusBorder, +}; + +color.card = { + defaultColor: color.white, + buttonHovered: color.greyHovered, + buttonPressed: color.greyPressed, + buttonDisabled: color.bgColorTransparent, + focusOutline: color.bgColorTransparent, + focusBorder: color.darkFocusBorder, +}; From c206ba0ed7dd0b6abf3d4f2e4cdab7c50ff98d0e Mon Sep 17 00:00:00 2001 From: Matt Cleinman <9295855+mcleinman@users.noreply.github.com> Date: Tue, 25 Feb 2025 11:48:41 -0800 Subject: [PATCH 2/5] slim down some colors --- nebula/ui/components/MZRadioDelegate.qml | 4 +-- nebula/ui/components/forms/MZRadioButton.qml | 4 +-- nebula/ui/themes/colors.js | 32 +++++++------------ nebula/ui/themes/dark-mode/theme.js | 24 ++++---------- nebula/ui/themes/main/theme.js | 28 ++++++---------- .../ui/themes/not-designer-approved/theme.js | 28 ++++++---------- nebula/ui/themes/theme-derived.js | 23 +++++++++---- 7 files changed, 57 insertions(+), 86 deletions(-) diff --git a/nebula/ui/components/MZRadioDelegate.qml b/nebula/ui/components/MZRadioDelegate.qml index 3e3d1f85e1..e47d45df21 100644 --- a/nebula/ui/components/MZRadioDelegate.qml +++ b/nebula/ui/components/MZRadioDelegate.qml @@ -70,7 +70,7 @@ RadioDelegate { PropertyChanges { target: radioButtonInsetCircle - color: radioControl.checked ? MZTheme.colors.normalButton.buttonPressed : MZTheme.colors.radioButtonDisabledPressed + color: radioControl.checked ? MZTheme.colors.normalButton.buttonPressed : MZTheme.colors.disabledButtonPressed scale: 0.55 } @@ -101,7 +101,7 @@ RadioDelegate { PropertyChanges { target: radioButtonInsetCircle - color: radioControl.checked ? MZTheme.colors.normalButton.buttonPressed : MZTheme.colors.radioButtonDisabledHovered + color: radioControl.checked ? MZTheme.colors.normalButton.buttonPressed : MZTheme.colors.disabledButtonHovered scale: 0.6 } diff --git a/nebula/ui/components/forms/MZRadioButton.qml b/nebula/ui/components/forms/MZRadioButton.qml index 2e1674befa..57750dc0e0 100644 --- a/nebula/ui/components/forms/MZRadioButton.qml +++ b/nebula/ui/components/forms/MZRadioButton.qml @@ -67,7 +67,7 @@ RadioDelegate { PropertyChanges { target: radioButtonInsetCircle - color: radioControl.checked ? MZTheme.colors.normalButton.buttonPressed : MZTheme.colors.radioButtonDisabledPressed + color: radioControl.checked ? MZTheme.colors.normalButton.buttonPressed : MZTheme.colors.disabledButtonPressed scale: 0.55 } @@ -97,7 +97,7 @@ RadioDelegate { PropertyChanges { target: radioButtonInsetCircle - color: radioControl.checked ? MZTheme.colors.normalButton.buttonPressed : MZTheme.colors.radioButtonDisabledHovered + color: radioControl.checked ? MZTheme.colors.normalButton.buttonPressed : MZTheme.colors.disabledButtonHovered scale: 0.6 } diff --git a/nebula/ui/themes/colors.js b/nebula/ui/themes/colors.js index f9c3041772..6d7e4f983f 100644 --- a/nebula/ui/themes/colors.js +++ b/nebula/ui/themes/colors.js @@ -166,30 +166,20 @@ color.darkerOnboardingPurple = '#1D0942'; color.transparent = '#00000000'; /** - * Part 2: Functional colors + * Part 2: Color objects + * Uses the colors defined above. * Should NOT be used directly in code, and colors should not be modified. * (Can add to this section if really, truly needed.) */ -color.blue = color.blue50; -color.blueHovered = color.blue60; -color.bluePressed = color.blue70; -color.blueFocusBorder = color.strongBlue; - -color.green = color.green50; -color.red = color.red60; -color.orange = color.yellow50; - -color.greyHovered = color.grey10; -color.greyPressed = color.grey20; color.blueButton = { - defaultColor: color.blue, - buttonHovered: color.blueHovered, - buttonPressed: color.bluePressed, + defaultColor: color.blue50, + buttonHovered: color.blue60, + buttonPressed: color.blue70, buttonDisabled: color.washedLightBlue, - focusBgColor: color.blue, - focusOutline: addTransparency(color.blueFocusBorder, 0.3), - focusBorder: color.blueFocusBorder, + focusBgColor: color.blue50, + focusOutline: addTransparency(color.strongBlue, 0.3), + focusBorder: color.strongBlue, }; color.clickableRowBlue = { @@ -197,7 +187,7 @@ color.clickableRowBlue = { buttonHovered: color.washedBlue, buttonPressed: color.washedLightBlue, focusOutline: addTransparency(color.grey5, 0.0), - focusBorder: color.blueFocusBorder, + focusBorder: color.strongBlue, }; color.redButton = { @@ -210,10 +200,10 @@ color.redButton = { }; color.greenAlert = { - defaultColor: color.green, + defaultColor: color.green50, buttonHovered: color.green60, buttonPressed: color.green70, - focusOutline: addTransparency(color.green, 0.2), + focusOutline: addTransparency(color.green50, 0.2), focusBorder: color.green70, }; diff --git a/nebula/ui/themes/dark-mode/theme.js b/nebula/ui/themes/dark-mode/theme.js index 65f790a035..b4544c73ee 100644 --- a/nebula/ui/themes/dark-mode/theme.js +++ b/nebula/ui/themes/dark-mode/theme.js @@ -23,7 +23,6 @@ color.primaryPressed = color.dullPurple; // Backgrounds color.bgColor = color.grey45; // maybe set -color.bgColorTransparent = addTransparency(color.bgColor, 0.0); color.bgColorStronger = color.white; color.overlayBackground = addTransparency(color.black, 0.3); @@ -44,23 +43,23 @@ color.inputHighlight = color.grey10; // Success/Failure/Warning/Normal levels color.successMain = color.green90; -color.successAccent = color.green; +color.successAccent = color.green50; color.successBackground = color.green5; color.errorMain = color.red80; color.errorAccent = color.red50; // set color.errorAccentLight = color.grey30; // set color.errorBackground = color.red10; color.warningMain = color.yellow90; -color.warningAccent = color.orange; +color.warningAccent = color.yellow50; color.warningBackground = color.orange10; color.normalLevelMain = color.blue90; -color.normalLevelAccent = color.blue; -color.normalLevelBackground = addTransparency(color.blue, 0.4); +color.normalLevelAccent = color.blue50; +color.normalLevelBackground = addTransparency(color.blue50, 0.4); -// Button colors -color.radioButtonDisabledHovered = color.greyHovered; -color.radioButtonDisabledPressed = color.greyPressed; +// Disabled button colors color.disabledButtonColor = color.grey20; +color.disabledButtonHovered = color.grey10; +color.disabledButtonPressed = color.grey20; // Step progress bar (several other colors for bar based on primary color) color.stepProgressBarHighlight = color.purple10; @@ -100,12 +99,3 @@ color.vpnToggleDisconnected = { focusOutline: color.transparent, focusBorder: color.darkFocusBorder, }; - -color.card = { - defaultColor: color.white, - buttonHovered: color.greyHovered, - buttonPressed: color.greyPressed, - buttonDisabled: color.bgColorTransparent, - focusOutline: color.bgColorTransparent, - focusBorder: color.darkFocusBorder, -}; diff --git a/nebula/ui/themes/main/theme.js b/nebula/ui/themes/main/theme.js index 65be6e348d..f55713be75 100644 --- a/nebula/ui/themes/main/theme.js +++ b/nebula/ui/themes/main/theme.js @@ -23,7 +23,6 @@ color.primaryPressed = color.dullPurple; // Backgrounds color.bgColor = color.grey5; -color.bgColorTransparent = addTransparency(color.bgColor, 0.0); color.bgColorStronger = color.white; color.overlayBackground = addTransparency(color.black, 0.3); @@ -44,23 +43,23 @@ color.inputHighlight = color.grey10; // Success/Failure/Warning/Normal levels color.successMain = color.green90; -color.successAccent = color.green; +color.successAccent = color.green50; color.successBackground = color.green5; color.errorMain = color.red80; -color.errorAccent = color.red; +color.errorAccent = color.red60; color.errorAccentLight = color.red50; color.errorBackground = color.red10; color.warningMain = color.yellow90; -color.warningAccent = color.orange; +color.warningAccent = color.yellow50; color.warningBackground = color.orange10; color.normalLevelMain = color.blue90; -color.normalLevelAccent = color.blue; -color.normalLevelBackground = addTransparency(color.blue, 0.4); +color.normalLevelAccent = color.blue50; +color.normalLevelBackground = addTransparency(color.blue50, 0.4); -// Button colors -color.radioButtonDisabledHovered = color.greyHovered; -color.radioButtonDisabledPressed = color.greyPressed; +// Disabled button colors color.disabledButtonColor = color.grey20; +color.disabledButtonHovered = color.grey10; +color.disabledButtonPressed = color.grey20; // Step progress bar (several other colors for bar based on primary color) color.stepProgressBarHighlight = color.purple10; @@ -85,7 +84,7 @@ color.onBoardingGradient = { }; color.vpnToggleConnected = { - defaultColor: color.green, + defaultColor: color.green50, buttonHovered: color.green60, buttonPressed: color.green70, focusOutline: addTransparency(color.bgColor, 0.3), @@ -100,12 +99,3 @@ color.vpnToggleDisconnected = { focusOutline: color.transparent, focusBorder: color.darkFocusBorder, }; - -color.card = { - defaultColor: color.white, - buttonHovered: color.greyHovered, - buttonPressed: color.greyPressed, - buttonDisabled: color.bgColorTransparent, - focusOutline: color.bgColorTransparent, - focusBorder: color.darkFocusBorder, -}; diff --git a/nebula/ui/themes/not-designer-approved/theme.js b/nebula/ui/themes/not-designer-approved/theme.js index 7dad7a094a..3731b87567 100644 --- a/nebula/ui/themes/not-designer-approved/theme.js +++ b/nebula/ui/themes/not-designer-approved/theme.js @@ -23,7 +23,6 @@ color.primaryPressed = color.purple90; // Backgrounds color.bgColor = color.grey60; -color.bgColorTransparent = addTransparency(color.bgColor, 0.0); color.bgColorStronger = color.black; color.overlayBackground = addTransparency(color.white, 0.3); @@ -44,23 +43,23 @@ color.inputHighlight = color.grey10; // Success/Failure/Warning/Normal levels color.successMain = color.green90; -color.successAccent = color.green; +color.successAccent = color.green50; color.successBackground = color.green5; color.errorMain = color.red80; -color.errorAccent = color.red; +color.errorAccent = color.red60; color.errorAccentLight = color.red50; color.errorBackground = color.red10; color.warningMain = color.yellow90; -color.warningAccent = color.orange; +color.warningAccent = color.yellow50; color.warningBackground = color.orange10; color.normalLevelMain = color.blue90; -color.normalLevelAccent = color.blue; -color.normalLevelBackground = addTransparency(color.blue, 0.4); +color.normalLevelAccent = color.blue50; +color.normalLevelBackground = addTransparency(color.blue50, 0.4); -// Button colors -color.radioButtonDisabledHovered = color.greyHovered; -color.radioButtonDisabledPressed = color.greyPressed; +// Disabled button colors color.disabledButtonColor = color.grey20; +color.disabledButtonHovered = color.grey10; +color.disabledButtonPressed = color.grey20; // Step progress bar (several other colors for bar based on primary color) color.stepProgressBarHighlight = color.purple10; @@ -85,7 +84,7 @@ color.onBoardingGradient = { }; color.vpnToggleConnected = { - defaultColor: color.green, + defaultColor: color.green50, buttonHovered: color.green60, buttonPressed: color.green70, focusOutline: addTransparency(color.bgColor, 0.3), @@ -100,12 +99,3 @@ color.vpnToggleDisconnected = { focusOutline: color.transparent, focusBorder: color.darkFocusBorder, }; - -color.card = { - defaultColor: color.white, - buttonHovered: color.greyHovered, - buttonPressed: color.greyPressed, - buttonDisabled: color.bgColorTransparent, - focusOutline: color.bgColorTransparent, - focusBorder: color.darkFocusBorder, -}; diff --git a/nebula/ui/themes/theme-derived.js b/nebula/ui/themes/theme-derived.js index 141538bc3f..2fe4b46726 100644 --- a/nebula/ui/themes/theme-derived.js +++ b/nebula/ui/themes/theme-derived.js @@ -11,6 +11,8 @@ * can be used in code.) */ +color.bgColorTransparent = addTransparency(color.bgColor, 0.0); + color.stepProgressBarDelegate = { defaultColor: color.primaryBrighter, buttonHovered: color.primaryBrighter, @@ -22,10 +24,10 @@ color.stepProgressBarDelegate = { color.invertedButton = { defaultColor: color.fontColorInverted, - buttonHovered: color.radioButtonDisabledHovered, - buttonPressed: color.radioButtonDisabledPressed, - focusOutline: color.radioButtonDisabledHovered, - focusBorder: color.radioButtonDisabledPressed, + buttonHovered: color.disabledButtonHovered, + buttonPressed: color.disabledButtonPressed, + focusOutline: color.disabledButtonHovered, + focusBorder: color.disabledButtonPressed, }; color.linkButton = { @@ -39,8 +41,8 @@ color.linkButton = { color.iconButtonLightBackground = { defaultColor: color.bgColorTransparent, - buttonHovered: color.radioButtonDisabledHovered, - buttonPressed: color.radioButtonDisabledPressed, + buttonHovered: color.disabledButtonHovered, + buttonPressed: color.disabledButtonPressed, buttonDisabled: color.transparent, focusOutline: color.bgColorTransparent, focusBorder: color.darkFocusBorder, @@ -55,6 +57,15 @@ color.iconButtonDarkBackground = { focusBorder: color.lightFocusBorder, }; +color.card = { + defaultColor: color.bgColorStronger, + buttonHovered: color.disabledButtonHovered, + buttonPressed: color.disabledButtonPressed, + buttonDisabled: color.bgColorTransparent, + focusOutline: color.bgColorTransparent, + focusBorder: color.darkFocusBorder, +}; + color.inputState = { default: { border: color.darkFocusBorder, From 8737402acf9f0f01415dd0042d97e2a5c29e7d1d Mon Sep 17 00:00:00 2001 From: Matt Cleinman <9295855+mcleinman@users.noreply.github.com> Date: Thu, 6 Mar 2025 09:34:02 -0800 Subject: [PATCH 3/5] more colors --- nebula/ui/components/MZBottomSheet.qml | 2 +- nebula/ui/components/MZPopup.qml | 2 +- nebula/ui/themes/colors.js | 2 + nebula/ui/themes/dark-mode/theme.js | 120 ++++++++++++------ nebula/ui/themes/main/theme.js | 6 +- .../ui/themes/not-designer-approved/theme.js | 6 +- src/ui/screens/home/controller/VPNToggle.qml | 12 +- 7 files changed, 96 insertions(+), 54 deletions(-) diff --git a/nebula/ui/components/MZBottomSheet.qml b/nebula/ui/components/MZBottomSheet.qml index 614ef3758b..8bd1f70621 100644 --- a/nebula/ui/components/MZBottomSheet.qml +++ b/nebula/ui/components/MZBottomSheet.qml @@ -79,7 +79,7 @@ Loader { } Overlay.modal: Rectangle { - color: MZTheme.colors.overlayBackground + color: MZTheme.colors.overlay } } } diff --git a/nebula/ui/components/MZPopup.qml b/nebula/ui/components/MZPopup.qml index 12e258ca39..49d3a8b5ab 100644 --- a/nebula/ui/components/MZPopup.qml +++ b/nebula/ui/components/MZPopup.qml @@ -126,7 +126,7 @@ Popup { Overlay.modal: Rectangle { id: overlayBackground - color: MZTheme.colors.overlayBackground + color: MZTheme.colors.overlay Behavior on opacity { NumberAnimation { diff --git a/nebula/ui/themes/colors.js b/nebula/ui/themes/colors.js index 6d7e4f983f..3b83f170b7 100644 --- a/nebula/ui/themes/colors.js +++ b/nebula/ui/themes/colors.js @@ -73,6 +73,7 @@ color.grey20 = '#CECECF'; color.grey15 = '#D8D8D8'; color.grey10 = '#E7E7E7'; color.grey5 = '#F9F9FA'; +color.grey3 = '#FBFBFE'; color.white = '#FFFFFF'; /** @@ -158,6 +159,7 @@ color.washedPurple = '#5B4983'; color.washedBlue = '#D4E2F6'; color.washedLightBlue = '#AECBF2'; color.strongBlue = '#0A84FF'; +color.brightSlate = '#2B2A33'; color.lighterOnboardingPurple = '#472C87'; color.mediumOnboardingPurple = '#301962'; diff --git a/nebula/ui/themes/dark-mode/theme.js b/nebula/ui/themes/dark-mode/theme.js index b4544c73ee..4d0fe707f3 100644 --- a/nebula/ui/themes/dark-mode/theme.js +++ b/nebula/ui/themes/dark-mode/theme.js @@ -17,67 +17,107 @@ color.useDarkAssets = true; */ // Primary color.primary = color.purple90; // set -color.primaryBrighter = color.purple70; +color.primaryBrighter = color.blue20; // set color.primaryHovered = color.washedPurple; // set -color.primaryPressed = color.dullPurple; +color.primaryPressed = color.dullPurple; // set // Backgrounds -color.bgColor = color.grey45; // maybe set +color.bgColor = color.grey45; // set color.bgColorStronger = color.white; -color.overlayBackground = addTransparency(color.black, 0.3); +color.overlay = addTransparency(color.black, 0.3); // done // Fonts -color.fontColor = color.grey5; // done -color.fontColorDark = color.grey5 // done; -color.fontColorWarning = color.yellow70; -color.fontColorInverted = color.grey5; // done -color.fontColorInvertedMuted = color.grey5; // done -color.fontTitleColor = color.black; +color.fontColor = color.grey3; // done +color.fontColorDark = color.grey3; // done +color.fontColorWarning = color.yellow50; // set +color.fontColorInverted = color.grey3; // done +color.fontColorInvertedMuted = addTransparency(color.grey3, 0.8); // done +color.fontTitleColor = color.grey3; // done // Dividers and borders -color.divider = color.grey10; -color.dropShadow = color.grey60; -color.darkFocusBorder = color.grey40; -color.lightFocusBorder = color.grey15; -color.inputHighlight = color.grey10; +color.divider = addTransparency(color.grey3, 0.2); // done +color.dropShadow = color.grey60; // done +color.darkFocusBorder = addTransparency(color.grey3, 0.2); // done +color.lightFocusBorder = addTransparency(color.grey3, 0.2); // done +color.inputHighlight = color.brightSlate; // set // Success/Failure/Warning/Normal levels -color.successMain = color.green90; -color.successAccent = color.green50; -color.successBackground = color.green5; -color.errorMain = color.red80; -color.errorAccent = color.red50; // set +color.successMain = color.green90; // set +color.successAccent = color.green80; // set +color.successBackground = color.green70; // set +color.errorMain = color.red80; // set +color.errorAccent = color.red70; // set color.errorAccentLight = color.grey30; // set -color.errorBackground = color.red10; -color.warningMain = color.yellow90; -color.warningAccent = color.yellow50; -color.warningBackground = color.orange10; -color.normalLevelMain = color.blue90; -color.normalLevelAccent = color.blue50; -color.normalLevelBackground = addTransparency(color.blue50, 0.4); +color.errorBackground = color.red10; // set +color.warningMain = color.yellow70; // set +color.warningAccent = color.yellow50; // set +color.warningBackground = color.orange10; // set +color.normalLevelMain = color.blue90; // set +color.normalLevelAccent = color.blue50; // set +color.normalLevelBackground = addTransparency(color.blue90, 0.4); // set // Disabled button colors -color.disabledButtonColor = color.grey20; -color.disabledButtonHovered = color.grey10; -color.disabledButtonPressed = color.grey20; +color.disabledButtonColor = + addTransparency(color.blue20, 0.6); // HOW DOES THIS LOOK WITH TRANSPARENCY +color.disabledButtonHovered = addTransparency(color.white, 0.1); // SET +color.disabledButtonPressed = addTransparency(color.white, 0.2); // SET // Step progress bar (several other colors for bar based on primary color) -color.stepProgressBarHighlight = color.purple10; -color.stepProgressBarIncomplete = color.grey30; +color.stepProgressBarHighlight = color.purple20; // SET +color.stepProgressBarIncomplete = color.brightSlate; // set // Toggle -color.activatingToggle = color.dullPurple; -color.activatingToggleBackground = color.dullGreen; +color.connectingToggle = color.dullPurple; // SET +color.connectingToggleBackground = color.grey30; // SET // Objects (these aren't colors, these are objects of colors) -color.destructiveButton = color.redButton; -color.normalButton = color.blueButton; -color.successAlert = color.greenAlert; -color.warningAlert = color.orangeAlert; -color.clickableRow = color.clickableRowBlue; -color.textLink = color.greyLink; +color.destructiveButton = { + defaultColor: color.red80, // SET + buttonHovered: color.red75, + buttonPressed: color.red80, + buttonDisabled: color.red10, + focusOutline: addTransparency(color.red70, 0.4), + focusBorder: color.red70, +}; +color.normalButton = { + defaultColor: color.blue20, // SET + buttonHovered: color.blue60, + buttonPressed: color.blue70, + buttonDisabled: color.washedLightBlue, + focusBgColor: color.blue50, + focusOutline: addTransparency(color.strongBlue, 0.3), + focusBorder: color.strongBlue, +}; +color.successAlert = { + defaultColor: color.green80, // SET + buttonHovered: color.green60, + buttonPressed: color.green70, + focusOutline: addTransparency(color.green50, 0.2), + focusBorder: color.green70, +}; +color.warningAlert = { + buttonHovered: color.yellow70, // SET + buttonPressed: color.yellow70, + focusOutline: addTransparency(color.yellow60, 0.3), + focusBorder: color.yellow70, +}; +color.clickableRow = { + defaultColor: addTransparency(color.white, 0.1), // SET + buttonHovered: color.washedBlue, + buttonPressed: color.washedLightBlue, + focusOutline: addTransparency(color.grey5, 0.0), + focusBorder: color.strongBlue, +}; +color.textLink = { + defaultColor: color.blue20, // SET + buttonHovered: addTransparency(color.grey60, 0.8), + buttonPressed: color.grey60, + focusOutline: color.grey60, + focusBorder: color.black +}; color.onBoardingGradient = { + // set start: color.lighterOnboardingPurple, middle: color.mediumOnboardingPurple, end: color.darkerOnboardingPurple, diff --git a/nebula/ui/themes/main/theme.js b/nebula/ui/themes/main/theme.js index f55713be75..2149c28827 100644 --- a/nebula/ui/themes/main/theme.js +++ b/nebula/ui/themes/main/theme.js @@ -24,7 +24,7 @@ color.primaryPressed = color.dullPurple; // Backgrounds color.bgColor = color.grey5; color.bgColorStronger = color.white; -color.overlayBackground = addTransparency(color.black, 0.3); +color.overlay = addTransparency(color.black, 0.3); // Fonts color.fontColor = color.grey40; @@ -66,8 +66,8 @@ color.stepProgressBarHighlight = color.purple10; color.stepProgressBarIncomplete = color.grey30; // Toggle -color.activatingToggle = color.dullPurple; -color.activatingToggleBackground = color.dullGreen; +color.connectingToggle = color.dullPurple; +color.connectingToggleBackground = color.dullGreen; // Objects (these aren't colors, these are objects of colors) color.destructiveButton = color.redButton; diff --git a/nebula/ui/themes/not-designer-approved/theme.js b/nebula/ui/themes/not-designer-approved/theme.js index 3731b87567..c9792476a5 100644 --- a/nebula/ui/themes/not-designer-approved/theme.js +++ b/nebula/ui/themes/not-designer-approved/theme.js @@ -24,7 +24,7 @@ color.primaryPressed = color.purple90; // Backgrounds color.bgColor = color.grey60; color.bgColorStronger = color.black; -color.overlayBackground = addTransparency(color.white, 0.3); +color.overlay = addTransparency(color.white, 0.3); // Fonts color.fontColor = color.grey40; @@ -66,8 +66,8 @@ color.stepProgressBarHighlight = color.purple10; color.stepProgressBarIncomplete = color.grey30; // Toggle -color.activatingToggle = color.dullPurple; -color.activatingToggleBackground = color.dullGreen; +color.connectingToggle = color.dullPurple; +color.connectingToggleBackground = color.dullGreen; // Objects (these aren't colors, these are objects of colors) color.destructiveButton = color.redButton; diff --git a/src/ui/screens/home/controller/VPNToggle.qml b/src/ui/screens/home/controller/VPNToggle.qml index ce8aacc749..962f082761 100644 --- a/src/ui/screens/home/controller/VPNToggle.qml +++ b/src/ui/screens/home/controller/VPNToggle.qml @@ -115,12 +115,12 @@ MZButtonBase { PropertyChanges { target: cursor anchors.leftMargin: 32 - color: MZTheme.colors.activatingToggle + color: MZTheme.colors.connectingToggle } PropertyChanges { target: toggle - color: MZTheme.colors.activatingToggleBackground + color: MZTheme.colors.connectingToggleBackground border.color: MZTheme.colors.primary } @@ -138,12 +138,12 @@ MZButtonBase { PropertyChanges { target: cursor anchors.leftMargin: 32 - color: connectionRetryOverX ? MZTheme.colors.bgColorStronger : MZTheme.colors.activatingToggle + color: connectionRetryOverX ? MZTheme.colors.bgColorStronger : MZTheme.colors.connectingToggle } PropertyChanges { target: toggle - color: MZTheme.colors.activatingToggleBackground + color: MZTheme.colors.connectingToggleBackground border.color: MZTheme.colors.primary } @@ -223,12 +223,12 @@ MZButtonBase { PropertyChanges { target: cursor anchors.leftMargin: 32 - color: MZTheme.colors.activatingToggle + color: MZTheme.colors.connectingToggle } PropertyChanges { target: toggle - color: MZTheme.colors.activatingToggleBackground + color: MZTheme.colors.connectingToggleBackground border.color: MZTheme.colors.primary } From d4a91c7506ed443ed099ba389bdc0d08b1caf907 Mon Sep 17 00:00:00 2001 From: Matt Cleinman <9295855+mcleinman@users.noreply.github.com> Date: Thu, 6 Mar 2025 13:23:53 -0800 Subject: [PATCH 4/5] add color exploration --- nebula/ui/components/MZSystemAlert.qml | 18 ++ nebula/ui/themes/dark-mode/theme.js | 2 +- src/errorhandler.h | 2 + src/ui/CMakeLists.txt | 1 + .../developerMenu/ViewColorObjects.qml | 181 ++++++++++++++++++ .../getHelp/developerMenu/ViewUiTesting.qml | 9 + 6 files changed, 212 insertions(+), 1 deletion(-) create mode 100644 src/ui/screens/getHelp/developerMenu/ViewColorObjects.qml diff --git a/nebula/ui/components/MZSystemAlert.qml b/nebula/ui/components/MZSystemAlert.qml index aad58dd8dc..525a04e485 100644 --- a/nebula/ui/components/MZSystemAlert.qml +++ b/nebula/ui/components/MZSystemAlert.qml @@ -137,6 +137,24 @@ MZAlert { alertText: MZI18n.GlobalCopied visible: true } + }, + State { + name: MZErrorHandler.SampleWarningAlert + PropertyChanges { + target: alertBox + alertType: alertTypes.warning + alertText: "Sample warning alert" + visible: true + } + }, + State { + name: MZErrorHandler.SampleInfoAlert + PropertyChanges { + target: alertBox + alertType: alertTypes.info + alertText: "Sample info alert" + visible: true + } } ] } diff --git a/nebula/ui/themes/dark-mode/theme.js b/nebula/ui/themes/dark-mode/theme.js index 4d0fe707f3..eab64af52e 100644 --- a/nebula/ui/themes/dark-mode/theme.js +++ b/nebula/ui/themes/dark-mode/theme.js @@ -23,7 +23,7 @@ color.primaryPressed = color.dullPurple; // set // Backgrounds color.bgColor = color.grey45; // set -color.bgColorStronger = color.white; +color.bgColorStronger = color.brightSlate; // set color.overlay = addTransparency(color.black, 0.3); // done // Fonts diff --git a/src/errorhandler.h b/src/errorhandler.h index 4cebac5660..a2e03cd1fb 100644 --- a/src/errorhandler.h +++ b/src/errorhandler.h @@ -50,6 +50,8 @@ class ErrorHandler final : public QObject { UnrecoverableErrorAlert, AuthCodeSentAlert, CopiedToClipboardConfirmationAlert, + SampleWarningAlert, + SampleInfoAlert }; Q_ENUM(AlertType) diff --git a/src/ui/CMakeLists.txt b/src/ui/CMakeLists.txt index 9bd0982047..9c5efdcc7a 100644 --- a/src/ui/CMakeLists.txt +++ b/src/ui/CMakeLists.txt @@ -33,6 +33,7 @@ qt_add_qml_module(mozillavpn-ui screens/getHelp/contactUs/ViewContactUsForm.qml screens/getHelp/contactUs/ViewContactUsThankYou.qml screens/getHelp/developerMenu/ViewAnimationsPlayground.qml + screens/getHelp/developerMenu/ViewColorObjects.qml screens/getHelp/developerMenu/ViewImagesPlayground.qml screens/getHelp/developerMenu/ViewDeveloperMenu.qml screens/getHelp/developerMenu/ViewFeatureList.qml diff --git a/src/ui/screens/getHelp/developerMenu/ViewColorObjects.qml b/src/ui/screens/getHelp/developerMenu/ViewColorObjects.qml new file mode 100644 index 0000000000..6e6a2a4ddc --- /dev/null +++ b/src/ui/screens/getHelp/developerMenu/ViewColorObjects.qml @@ -0,0 +1,181 @@ + +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import QtQuick 2.5 +import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 + +import Mozilla.Shared 1.0 +import Mozilla.VPN 1.0 +import components 0.1 +import components.forms 0.1 + +MZViewBase { + id: root + + _menuTitle: "Color exploration" + _viewContentData: ColumnLayout { + Layout.leftMargin: 20 + Layout.rightMargin: 20 + spacing: 20 + + MZTextBlock { + text: "Info cards use the `[type]Accent` color for their stripe" + Layout.fillWidth: true + } + + MZInformationCard { + width: Math.min(window.width - MZTheme.theme.windowMargin * 2, MZTheme.theme.navBarMaxWidth) + cardType: MZInformationCard.CardType.Info + anchors.horizontalCenter: parent.horizontalCenter + implicitHeight: textBlock.height + MZTheme.theme.windowMargin * 2 + + _infoContent: MZTextBlock { + id: textBlock + Layout.fillWidth: true + + text: "Info card with normal colors" + verticalAlignment: Text.AlignVCenter + } + } + + MZInformationCard { + width: Math.min(window.width - MZTheme.theme.windowMargin * 2, MZTheme.theme.navBarMaxWidth) + cardType: MZInformationCard.CardType.Success + anchors.horizontalCenter: parent.horizontalCenter + implicitHeight: textBlock.height + MZTheme.theme.windowMargin * 2 + + _infoContent: MZTextBlock { + // id: textBlock + Layout.fillWidth: true + + text: "Info card with success colors" + verticalAlignment: Text.AlignVCenter + } + } + + MZInformationCard { + width: Math.min(window.width - MZTheme.theme.windowMargin * 2, MZTheme.theme.navBarMaxWidth) + cardType: MZInformationCard.CardType.Warning + anchors.horizontalCenter: parent.horizontalCenter + implicitHeight: textBlock.height + MZTheme.theme.windowMargin * 2 + + _infoContent: MZTextBlock { + // id: textBlock + Layout.fillWidth: true + + text: "Info card with warning colors" + verticalAlignment: Text.AlignVCenter + } + } + + MZInformationCard { + width: Math.min(window.width - MZTheme.theme.windowMargin * 2, MZTheme.theme.navBarMaxWidth) + cardType: MZInformationCard.CardType.Error + anchors.horizontalCenter: parent.horizontalCenter + implicitHeight: textBlock.height + MZTheme.theme.windowMargin * 2 + + _infoContent: MZTextBlock { + // id: textBlock + Layout.fillWidth: true + + text: "Info card with error colors" + verticalAlignment: Text.AlignVCenter + } + } + + Rectangle { + id: divider + + Layout.topMargin: dividerTopMargin + Layout.fillWidth: true + Layout.preferredHeight: 10 + + color: MZTheme.colors.divider + } + + MZTextBlock { + text: "Alerts use the `[type]Accent` colors, among many others" + Layout.fillWidth: true + } + + MZButton { + id: errorAlert + text: "Click for sample error alert" + onClicked: MZErrorHandler.requestAlert(MZErrorHandler.GeoIpRestrictionAlert) + } + + MZButton { + id: warningAlert + text: "Click for sample warning alert" + onClicked: MZErrorHandler.requestAlert(MZErrorHandler.SampleWarningAlert) + } + + MZButton { + id: infoAlert + text: "Click for sample info alert" + onClicked: MZErrorHandler.requestAlert(MZErrorHandler.SampleInfoAlert) + } + + MZButton { + id: successAlert + text: "Click for sample success alert" + onClicked: MZErrorHandler.requestAlert(MZErrorHandler.LogoutAlert) + } + + Rectangle { + id: divider2 + + Layout.topMargin: dividerTopMargin + Layout.fillWidth: true + Layout.preferredHeight: 10 + + color: MZTheme.colors.divider + } + + MZTextBlock { + text: "Badges use the `[type]Main` and `[type]Background colors" + Layout.fillWidth: true + } + + MZBadge { + badgeLabel.width: badgeLabel.implicitWidth + badgeType: { + 'badgeText': "Error badge", + 'badgeTextColor': MZTheme.colors.errorMain, + 'badgeBackgroundColor': MZTheme.colors.errorBackground + }; + } + + MZBadge { + badgeLabel.width: badgeLabel.implicitWidth + badgeType: { + 'badgeText': "Warning badge", + 'badgeTextColor': MZTheme.colors.warningMain, + 'badgeBackgroundColor': MZTheme.colors.warningBackground + }; + } + + MZBadge { + badgeLabel.width: badgeLabel.implicitWidth + badgeType: { + 'badgeText': "Success badge", + 'badgeTextColor': MZTheme.colors.successMain, + 'badgeBackgroundColor': MZTheme.colors.successBackground + }; + } + + MZBadge { + badgeLabel.width: badgeLabel.implicitWidth + badgeType: { + 'badgeText': "Normal badge", + 'badgeTextColor': MZTheme.colors.normalLevelMain, + 'badgeBackgroundColor': MZTheme.colors.normalLevelBackground + }; + } + } + + +} diff --git a/src/ui/screens/getHelp/developerMenu/ViewUiTesting.qml b/src/ui/screens/getHelp/developerMenu/ViewUiTesting.qml index 8fbd790c9b..66a3e99be1 100644 --- a/src/ui/screens/getHelp/developerMenu/ViewUiTesting.qml +++ b/src/ui/screens/getHelp/developerMenu/ViewUiTesting.qml @@ -35,6 +35,15 @@ MZViewBase { Layout.rightMargin: MZTheme.theme.windowMargin / 2 } + MZSettingsItem { + settingTitle: "Color objects" + imageRightSrc: MZAssetLookup.getImageSource("Chevron") + imageRightMirror: MZLocalizer.isRightToLeft + onClicked: getHelpStackView.push("qrc:/qt/qml/Mozilla/VPN/screens/getHelp/developerMenu/ViewColorObjects.qml") + Layout.leftMargin: MZTheme.theme.windowMargin / 2 + Layout.rightMargin: MZTheme.theme.windowMargin / 2 + } + MZSettingsItem { settingTitle: "MZStepNavigation" imageRightSrc: MZAssetLookup.getImageSource("Chevron") From a209c6d0e752e13a5f276d8e7d475cc0f18dcbeb Mon Sep 17 00:00:00 2001 From: Matt Cleinman <9295855+mcleinman@users.noreply.github.com> Date: Thu, 6 Mar 2025 16:24:17 -0800 Subject: [PATCH 5/5] change to one focus border color --- nebula/ui/components/MZFlickable.qml | 2 +- nebula/ui/components/MZList.qml | 2 +- nebula/ui/components/MZSettingsToggle.qml | 2 +- nebula/ui/components/MZSwipeAction.qml | 2 +- nebula/ui/themes/dark-mode/theme.js | 7 +++---- nebula/ui/themes/main/theme.js | 7 +++---- nebula/ui/themes/not-designer-approved/theme.js | 7 +++---- nebula/ui/themes/theme-derived.js | 10 +++++----- 8 files changed, 18 insertions(+), 21 deletions(-) diff --git a/nebula/ui/components/MZFlickable.qml b/nebula/ui/components/MZFlickable.qml index e661bd1dcc..866b497a39 100644 --- a/nebula/ui/components/MZFlickable.qml +++ b/nebula/ui/components/MZFlickable.qml @@ -50,7 +50,7 @@ Flickable { } contentItem: Rectangle { - color: MZTheme.colors.darkFocusBorder + color: MZTheme.colors.focusBorder width: scrollBar.scrollBarWidth implicitWidth: scrollBar.scrollBarWidth radius: scrollBar.scrollBarWidth diff --git a/nebula/ui/components/MZList.qml b/nebula/ui/components/MZList.qml index e0836dcf41..7b1e783bb7 100644 --- a/nebula/ui/components/MZList.qml +++ b/nebula/ui/components/MZList.qml @@ -41,7 +41,7 @@ ListView { } contentItem: Rectangle { - color: MZTheme.colors.darkFocusBorder + color: MZTheme.colors.focusBorder width: scrollBar.scrollBarWidth implicitWidth: scrollBar.scrollBarWidth radius: scrollBar.scrollBarWidth diff --git a/nebula/ui/components/MZSettingsToggle.qml b/nebula/ui/components/MZSettingsToggle.qml index bd5f97518f..08e647913b 100644 --- a/nebula/ui/components/MZSettingsToggle.qml +++ b/nebula/ui/components/MZSettingsToggle.qml @@ -104,7 +104,7 @@ CheckBox { Rectangle { id: hoverPressHandler - color: MZTheme.colors.lightFocusBorder + color: MZTheme.colors.focusBorder opacity: 0 z: -1 anchors.fill: uiPlaceholder diff --git a/nebula/ui/components/MZSwipeAction.qml b/nebula/ui/components/MZSwipeAction.qml index 3954d92e13..f148bae975 100644 --- a/nebula/ui/components/MZSwipeAction.qml +++ b/nebula/ui/components/MZSwipeAction.qml @@ -38,6 +38,6 @@ Rectangle { visible: parent.activeFocus color: MZTheme.colors.transparent border.width: MZTheme.theme.focusBorderWidth - border.color: MZTheme.colors.darkFocusBorder + border.color: MZTheme.colors.focusBorder } } diff --git a/nebula/ui/themes/dark-mode/theme.js b/nebula/ui/themes/dark-mode/theme.js index eab64af52e..2ee0b902d1 100644 --- a/nebula/ui/themes/dark-mode/theme.js +++ b/nebula/ui/themes/dark-mode/theme.js @@ -37,8 +37,7 @@ color.fontTitleColor = color.grey3; // done // Dividers and borders color.divider = addTransparency(color.grey3, 0.2); // done color.dropShadow = color.grey60; // done -color.darkFocusBorder = addTransparency(color.grey3, 0.2); // done -color.lightFocusBorder = addTransparency(color.grey3, 0.2); // done +color.focusBorder = addTransparency(color.grey3, 0.2); // done color.inputHighlight = color.brightSlate; // set // Success/Failure/Warning/Normal levels @@ -128,7 +127,7 @@ color.vpnToggleConnected = { buttonHovered: color.green60, buttonPressed: color.green70, focusOutline: addTransparency(color.bgColor, 0.3), - focusBorder: color.lightFocusBorder, + focusBorder: color.focusBorder, }; color.vpnToggleDisconnected = { @@ -137,5 +136,5 @@ color.vpnToggleDisconnected = { buttonPressed: color.fontColorDark, buttonDisabled: color.disabledButtonColor, focusOutline: color.transparent, - focusBorder: color.darkFocusBorder, + focusBorder: color.focusBorder, }; diff --git a/nebula/ui/themes/main/theme.js b/nebula/ui/themes/main/theme.js index 2149c28827..17ef64753a 100644 --- a/nebula/ui/themes/main/theme.js +++ b/nebula/ui/themes/main/theme.js @@ -37,8 +37,7 @@ color.fontTitleColor = color.black; // Dividers and borders color.divider = color.grey10; color.dropShadow = color.grey60; -color.darkFocusBorder = color.grey40; -color.lightFocusBorder = color.grey15; +color.focusBorder = color.grey40; color.inputHighlight = color.grey10; // Success/Failure/Warning/Normal levels @@ -88,7 +87,7 @@ color.vpnToggleConnected = { buttonHovered: color.green60, buttonPressed: color.green70, focusOutline: addTransparency(color.bgColor, 0.3), - focusBorder: color.lightFocusBorder, + focusBorder: color.focusBorder, }; color.vpnToggleDisconnected = { @@ -97,5 +96,5 @@ color.vpnToggleDisconnected = { buttonPressed: color.fontColorDark, buttonDisabled: color.disabledButtonColor, focusOutline: color.transparent, - focusBorder: color.darkFocusBorder, + focusBorder: color.focusBorder, }; diff --git a/nebula/ui/themes/not-designer-approved/theme.js b/nebula/ui/themes/not-designer-approved/theme.js index c9792476a5..262bd9244e 100644 --- a/nebula/ui/themes/not-designer-approved/theme.js +++ b/nebula/ui/themes/not-designer-approved/theme.js @@ -37,8 +37,7 @@ color.fontTitleColor = color.white; // Dividers and borders color.divider = color.grey10; color.dropShadow = color.grey60; -color.darkFocusBorder = color.grey40; -color.lightFocusBorder = color.grey15; +color.focusBorder = color.grey40; color.inputHighlight = color.grey10; // Success/Failure/Warning/Normal levels @@ -88,7 +87,7 @@ color.vpnToggleConnected = { buttonHovered: color.green60, buttonPressed: color.green70, focusOutline: addTransparency(color.bgColor, 0.3), - focusBorder: color.lightFocusBorder, + focusBorder: color.focusBorder, }; color.vpnToggleDisconnected = { @@ -97,5 +96,5 @@ color.vpnToggleDisconnected = { buttonPressed: color.fontColorDark, buttonDisabled: color.disabledButtonColor, focusOutline: color.transparent, - focusBorder: color.darkFocusBorder, + focusBorder: color.focusBorder, }; diff --git a/nebula/ui/themes/theme-derived.js b/nebula/ui/themes/theme-derived.js index 2fe4b46726..61879dded5 100644 --- a/nebula/ui/themes/theme-derived.js +++ b/nebula/ui/themes/theme-derived.js @@ -45,7 +45,7 @@ color.iconButtonLightBackground = { buttonPressed: color.disabledButtonPressed, buttonDisabled: color.transparent, focusOutline: color.bgColorTransparent, - focusBorder: color.darkFocusBorder, + focusBorder: color.focusBorder, }; color.iconButtonDarkBackground = { @@ -54,7 +54,7 @@ color.iconButtonDarkBackground = { buttonPressed: color.primaryPressed, buttonDisabled: addTransparency(color.primary, 0.0), focusOutline: addTransparency(color.primaryHovered, 0.0), - focusBorder: color.lightFocusBorder, + focusBorder: color.focusBorder, }; color.card = { @@ -63,17 +63,17 @@ color.card = { buttonPressed: color.disabledButtonPressed, buttonDisabled: color.bgColorTransparent, focusOutline: color.bgColorTransparent, - focusBorder: color.darkFocusBorder, + focusBorder: color.focusBorder, }; color.inputState = { default: { - border: color.darkFocusBorder, + border: color.focusBorder, placeholder: color.fontColor, text: color.fontColorDark, }, hover: { - border: color.darkFocusBorder, + border: color.focusBorder, placeholder: color.fontColorDark, text: color.fontColorDark, },