MBL-2480: Fix showstopper dark mode design bugs (#2462)

* MBL-2480: Add brand/logo semantic color and use it for all logo views

* MBL-2480: Use white as dark mode color for selected project navigation tab

* MBL-2480: Set tab bar appearance to 'standard', with scroll edge

This fixes a bug where the tab bar had a different appearance for different pages of the app.

Author: amy-at-kickstarter

Kickstarter-iOS/Features/DesignSystem/Controller/ColorsView.swift

@@ -24,6 +24,7 @@ struct ColorsView: View {
     Colors.Background.Inverse.disabled,
     Colors.Background.Surface.primary,
     Colors.Background.Surface.secondary,
+    Colors.Brand.logo,
     Colors.Border.active,
     Colors.Border.bold,
     Colors.Border.subtle,
@@ -65,6 +66,7 @@ struct ColorsView: View {
     LegacyColors.Background.Action.primary,
     LegacyColors.Background.Action.Primary.disabled,
     LegacyColors.Background.Action.Primary.pressed,
+    LegacyColors.Project.Navigation.selected,
     LegacyColors.Tags.Success.background,
     LegacyColors.Tags.Success.foreground,
     LegacyColors.Tags.Warn.background,

Kickstarter-iOS/Features/DesignSystem/Controller/__Snapshots__/ColorsViewTests/testView.colorsView_testView.png

@@ -63,7 +63,7 @@ private let discoveryOnboardingTitleStyle: LabelStyle = { label in
 private let discoveryOnboardingLogoStyle: ImageViewStyle = { imageView in
   imageView
     |> \.contentMode .~ .scaleAspectFit
-    |> \.tintColor .~ LegacyColors.ksr_create_500.uiColor()
+    |> \.tintColor .~ Colors.Brand.logo.uiColor()
     |> \.backgroundColor .~ .clear
     |> UIImageView.lens.contentHuggingPriority(for: .vertical) .~ .required
     |> UIImageView.lens.contentCompressionResistancePriority(for: .vertical) .~ .required

Kickstarter-iOS/Features/Discovery/Views/Cells/DiscoveryOnboardingCell.swift

@@ -32,7 +32,7 @@ internal final class HelpWebViewController: WebViewController {
     super.bindStyles()
 
     _ = self.logoImageView
-      |> \.tintColor .~ LegacyColors.ksr_create_500.uiColor()
+      |> \.tintColor .~ Colors.Brand.logo.uiColor()
   }
 
   internal override func bindViewModel() {

Kickstarter-iOS/Features/HelpWeb/Controller/HelpWebViewController.swift

@@ -521,7 +521,7 @@ private let baseLabelStyle: LabelStyle = { label in
 private let logoImageViewStyle: ImageViewStyle = { imageView in
   imageView
     |> \.image .~ image(named: "kickstarter-logo")?.withRenderingMode(.alwaysTemplate)
-    |> \.tintColor .~ LegacyColors.ksr_create_500.uiColor()
+    |> \.tintColor .~ Colors.Brand.logo.uiColor()
     |> \.contentMode .~ .scaleAspectFit
     |> \.translatesAutoresizingMaskIntoConstraints .~ false
     |> \.accessibilityLabel %~ { _ in Strings.general_accessibility_kickstarter() }

Kickstarter-iOS/Features/LoginTout/Controller/LoginToutViewController.swift

@@ -178,7 +178,8 @@ final class ProjectNavigationSelectorView: UIView {
         |> UIButton.lens.title(for: .normal) %~ { _ in section.displayString.uppercased() }
         |> UIButton.lens.accessibilityLabel %~ { _ in section.displayString }
         |> UIButton.lens.titleColor(for: .normal) %~ { _ in LegacyColors.ksr_support_400.uiColor() }
-        |> UIButton.lens.titleColor(for: .selected) %~ { _ in LegacyColors.ksr_trust_500.uiColor() }
+        |> UIButton.lens
+        .titleColor(for: .selected) %~ { _ in LegacyColors.Project.Navigation.selected.uiColor() }
         |> UIButton.lens.titleLabel.font .~ UIFont.ksr_footnote().weighted(.semibold)
         |> UIButton.lens.titleLabel.textAlignment .~ .center
 
@@ -304,7 +305,7 @@ final class ProjectNavigationSelectorView: UIView {
 
 private let selectedButtonBorderViewStyle: ViewStyle = { view in
   view
-    |> \.backgroundColor .~ LegacyColors.ksr_trust_500.uiColor()
+    |> \.backgroundColor .~ LegacyColors.Project.Navigation.selected.uiColor()
 }
 
 private let rootStackViewStyle: StackViewStyle = { stackView in

Kickstarter-iOS/Features/ProjectPage/Views/ProjectNavigationSelectorView.swift

@@ -1,10 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="12121" systemVersion="16G29" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="49e-Tb-3d3">
-    <device id="retina4_7" orientation="portrait">
-        <adaptation id="fullscreen"/>
-    </device>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="23094" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="49e-Tb-3d3">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12089"/>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="23084"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -17,6 +16,8 @@
                         <rect key="frame" x="0.0" y="975" width="768" height="49"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMinY="YES"/>
                         <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="0.0" colorSpace="custom" customColorSpace="sRGB"/>
+                        <tabBarAppearance key="standardAppearance"/>
+                        <tabBarAppearance key="scrollEdgeAppearance"/>
                     </tabBar>
                 </tabBarController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="HuB-VB-40B" sceneMemberID="firstResponder"/>

Kickstarter-iOS/SharedViews/SharedStoryboards/Main.storyboard

@@ -190,4 +190,14 @@ public struct LegacyColors {
       )
     }
   }
+
+  public struct Project {
+    public struct Navigation {
+      public static let selected = LegacyColor(
+        "legacy/project/navigation/selected",
+        lightMode: UIColor.hex(0x5555FF),
+        darkMode: UIColor(coreColor: .white)
+      )
+    }
+  }
 }

Library/Styles/Colors/LegacyColors.swift

@@ -229,6 +229,15 @@ public struct Colors {
     }
   }
 
+  public struct Brand {
+    /// Kickstarter brand green. Inverts to the same brand color in dark mode.
+    public static let logo = SemanticColor(
+      "brand/logo",
+      lightMode: .green_05,
+      darkMode: .green_05
+    )
+  }
+
   public struct Border {
     public static let active = SemanticColor(
       "border/active",