DRAFT: dark mode draft

nebula/ui/components/MZBottomSheet.qml

@@ -79,7 +79,7 @@ Loader {
         }
 
         Overlay.modal: Rectangle {
-            color: MZTheme.colors.overlayBackground
+            color: MZTheme.colors.overlay
         }
     }
 }

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

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

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 {

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
             }
 

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

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
     }
 }

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
+                }
             }
         ]
     }

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
             }
 

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
 )

nebula/ui/themes/colors.js

@@ -66,12 +66,14 @@ color.green5 = '#E3FFF3';
 color.black = '#000000';
 color.grey60 = '#0C0C0D';
 color.grey50 = '#3D3D3D';
+color.grey45 = '#42414D';
 color.grey40 = '#6D6D6E';
 color.grey30 = '#9E9E9E';
 color.grey20 = '#CECECF';
 color.grey15 = '#D8D8D8';
 color.grey10 = '#E7E7E7';
 color.grey5 = '#F9F9FA';
+color.grey3 = '#FBFBFE';
 color.white = '#FFFFFF';
 
 /**
@@ -157,6 +159,7 @@ color.washedPurple = '#5B4983';
 color.washedBlue = '#D4E2F6';
 color.washedLightBlue = '#AECBF2';
 color.strongBlue = '#0A84FF';
+color.brightSlate = '#2B2A33';
 
 color.lighterOnboardingPurple = '#472C87';
 color.mediumOnboardingPurple = '#301962';
@@ -165,38 +168,28 @@ 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 = {
   defaultColor: color.grey5,
   buttonHovered: color.washedBlue,
   buttonPressed: color.washedLightBlue,
   focusOutline: addTransparency(color.grey5, 0.0),
-  focusBorder: color.blueFocusBorder,
+  focusBorder: color.strongBlue,
 };
 
 color.redButton = {
@@ -209,10 +202,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,
 };
 

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;