VPN-6884: remove MZCard and streamline some colors (#10309)

* VPN-6884 remove MZCard and streamline some colors

* small update

* specify a background color

* remove explicit colors, add check

nebula/ui/components/CMakeLists.txt

@@ -19,7 +19,6 @@ qt_add_qml_module(components
          MZButton.qml
          MZCallout.qml
          MZCancelButton.qml
-         MZCard.qml
          MZCheckBox.qml
          MZCheckBoxRow.qml
          MZChevron.qml

nebula/ui/components/MZPopup.qml

@@ -92,7 +92,7 @@ Popup {
 
             anchors.fill: popUpShadowSource
             cached: true
-            color: "black"
+            color: MZTheme.colors.dropShadow
             opacity: 0.2
             radius: 16
             source: popUpShadowSource

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/forms/MZComboBox.qml

@@ -112,7 +112,6 @@ ComboBox {
                 id: shadowMask
                 anchors.fill: bg
                 visible: false
-                color: "black"
                 radius: MZTheme.theme.cornerRadius
             }
 

nebula/ui/components/forms/MZInputBackground.qml

@@ -16,6 +16,7 @@ Rectangle {
     antialiasing: true
     border.color: MZTheme.colors.inputState.default.border
     radius: MZTheme.theme.cornerRadius
+    color: MZTheme.colors.bgColor
 
     Behavior on border.color {
         ColorAnimation {

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/components/qmldir

@@ -10,7 +10,6 @@ MZButtonBase 0.1 MZButtonBase.qml
 MZButtonLoader 0.1 MZButtonLoader.qml
 MZCallout 0.1 MZCallout.qml
 MZCancelButton 0.1 MZCancelButton.qml
-MZCard 0.1 MZCard.qml
 MZCheckBox 0.1 MZCheckBox.qml
 MZCheckBoxRow 0.1 MZCheckBoxRow.qml
 MZChevron 0.1 MZChevron.qml

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);
 
@@ -58,8 +57,8 @@ color.normalLevelAccent = color.blue;
 color.normalLevelBackground = addTransparency(color.blue, 0.4);
 
 // Button colors
-color.radioButtonDisabledHovered = color.greyHovered;
-color.radioButtonDisabledPressed = color.greyPressed;
+color.disabledButtonHovered = color.greyHovered;
+color.disabledButtonPressed = color.greyPressed;
 color.disabledButtonColor = color.grey20;
 
 // Step progress bar (several other colors for bar based on primary color)
@@ -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,
-};

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);
 
@@ -58,8 +57,8 @@ color.normalLevelAccent = color.blue;
 color.normalLevelBackground = addTransparency(color.blue, 0.4);
 
 // Button colors
-color.radioButtonDisabledHovered = color.greyHovered;
-color.radioButtonDisabledPressed = color.greyPressed;
+color.disabledButtonHovered = color.greyHovered;
+color.disabledButtonPressed = color.greyPressed;
 color.disabledButtonColor = color.grey20;
 
 // Step progress bar (several other colors for bar based on primary color)
@@ -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,
-};

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,

scripts/ci/check_colors.py

@@ -8,6 +8,7 @@
 import re
 
 HEX_COLOR_REGEX = r"#[0-9a-fA-F]{6}"
+NAMED_COLOR_REGEX = r"color: [\'|\"].*[\'|\"]"
 COLOR_DEF_REGEX = r"color\..* ="
 COLOR_USE_REGEX = r"MZTheme\.colors\.[0-9A-Za-z]+"
 
@@ -23,12 +24,15 @@ def fileContents(filepath):
     except Exception as e:
         exit(f"An error occurred while loading {filepath}: {e}")
 
-def checkForHexColor(filepath):
+def checkForHexAndNamedColors(filepath):
     # print("Checking for hex colors in " + filepath)
     content = fileContents(filepath)
     hex_color_list = re.findall(HEX_COLOR_REGEX, content)
     if hex_color_list:
         exit(f"Unexpected hex color found in: {filepath}")
+    named_color_list = re.findall(NAMED_COLOR_REGEX, content)
+    if named_color_list:
+        exit(f"Unexpected named color found in: {filepath}")
 
 def colorsDefinedInFile(filepath):
     print("Loading colors defined in " + filepath)
@@ -101,7 +105,7 @@ def getQmlFiles(directory):
 file_paths = list(map(lambda x: args.themeDirectory[0] + "/" + x + "/theme.js", all_themes))
 file_paths.append(args.themeDirectory[0] + "/theme-derived.js")
 for file_path in file_paths:
-    checkForHexColor(file_path)
+    checkForHexAndNamedColors(file_path)
 
 ###
 # 3. All colors in QML files should come from theme.js or theme-derived.js.
@@ -129,7 +133,7 @@ def getQmlFiles(directory):
 # C. Check that QML files do not include explict colors, and only use intended colors
 for qml_file_path in all_qml_files:
     # check for explict colors
-    checkForHexColor(qml_file_path)
+    checkForHexAndNamedColors(qml_file_path)
 
     # get color names from QML file - everything MZTheme.color
     colors_used = colorsUsedInFile(qml_file_path)

src/ui/screens/settings/ViewLanguage.qml

@@ -112,7 +112,7 @@ MZViewBase {
                 Layout.leftMargin: 18.5
                 Layout.rightMargin: 18.5
 
-                color: MZTheme.colors.inputHighlight
+                color: MZTheme.colors.divider
             }
         }