[iOS][Dark Mode] Add dark mode colors to save card infobar

Bug: 991539
Change-Id: Ibd47e2d2ef209fa86400136af8d135f82898c1c1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1760225
Commit-Queue: Robbie Gibson <rkgibson@google.com>
Reviewed-by: Rohit Rao <rohitrao@chromium.org>
Cr-Commit-Position: refs/heads/master@{#688259}

ios/chrome/browser/ui/autofill/BUILD.gn

@@ -117,12 +117,14 @@ source_set("autofill_ui") {
     "//ios/chrome/browser/ui/colors",
     "//ios/chrome/browser/ui/image_util",
     "//ios/chrome/browser/ui/infobars:infobars_ui",
+    "//ios/chrome/browser/ui/toolbar/public",
     "//ios/chrome/browser/ui/util",
     "//ios/chrome/common",
+    "//ios/chrome/common/colors",
     "//ios/chrome/common/ui_util",
     "//ios/third_party/material_components_ios",
     "//ios/third_party/material_roboto_font_loader_ios",
-    "//ui/base:base",
+    "//ui/base",
     "//url:url",
   ]
   libs = [ "UIKit.framework" ]

ios/chrome/browser/ui/autofill/save_card_infobar_controller.mm

@@ -82,10 +82,13 @@ base::string16 GetTitleForButton(ConfirmInfoBarDelegate* delegate,
   // Icon.
   gfx::Image icon = self.infoBarDelegate->GetIcon();
   DCHECK(!icon.IsEmpty());
-  if (self.infoBarDelegate->IsGooglePayBrandingEnabled())
+  if (self.infoBarDelegate->IsGooglePayBrandingEnabled()) {
     [self.infoBarView setGooglePayIcon:icon.ToUIImage()];
-  else
-    [self.infoBarView setIcon:icon.ToUIImage()];
+  } else {
+    UIImage* iconImage = [icon.ToUIImage()
+        imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+    [self.infoBarView setIcon:iconImage];
+  }
 
   // Message, if any.
   base::string16 messageText = self.infoBarDelegate->GetMessageText();

ios/chrome/browser/ui/autofill/save_card_infobar_view.mm

@@ -10,13 +10,16 @@
 #import "ios/chrome/browser/ui/autofill/save_card_infobar_view_delegate.h"
 #import "ios/chrome/browser/ui/colors/MDCPalette+CrAdditions.h"
 #import "ios/chrome/browser/ui/infobars/infobar_constants.h"
+#import "ios/chrome/browser/ui/toolbar/public/toolbar_constants.h"
 #import "ios/chrome/browser/ui/util/label_link_controller.h"
 #import "ios/chrome/browser/ui/util/named_guide.h"
 #import "ios/chrome/browser/ui/util/uikit_ui_util.h"
+#import "ios/chrome/common/colors/semantic_color_names.h"
 #import "ios/chrome/common/ui_util/constraints_ui_util.h"
 #import "ios/third_party/material_components_ios/src/components/Buttons/src/MaterialButtons.h"
 #import "ios/third_party/material_components_ios/src/components/Typography/src/MaterialTypography.h"
 #include "ui/base/l10n/l10n_util.h"
+#import "ui/gfx/ios/uikit_util.h"
 #include "url/gurl.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
@@ -38,9 +41,6 @@ const CGFloat kDescriptionLineHeight = 20;
 // to the close button icon's intrinsic padding equals kPadding.
 const CGFloat kCloseButtonPadding = 12;
 
-// Color in RGB to be used as tint color on the icon.
-const CGFloat kIconTintColor = 0x1A73E8;
-
 // Padding used on the bottom edge of the title.
 const CGFloat kTitleBottomPadding = 24;
 
@@ -53,9 +53,6 @@ const CGFloat kHorizontalSpacing = 8;
 // Padding used on the top edge of the action buttons' container.
 const CGFloat kButtonsTopPadding = 32;
 
-// Color in RGB used as background of the action buttons.
-const int kButtonTitleColorBlue = 0x4285f4;
-
 // Corner radius for action buttons.
 const CGFloat kButtonCornerRadius = 8.0;
 
@@ -173,9 +170,22 @@ NSString* const kTitleViewAccessibilityIdentifier = @"titleView";
 // Creates and adds subviews.
 - (void)setupSubviews {
   [self setAccessibilityViewIsModal:YES];
-  self.backgroundColor = UIColorFromRGB(kInfobarBackgroundColor);
+  self.backgroundColor = [UIColor colorNamed:kBackgroundColor];
   id<LayoutGuideProvider> safeAreaLayoutGuide = self.safeAreaLayoutGuide;
 
+  // Add thin separator to separate infobar from the web content.
+  UIView* separator = [[UIView alloc] initWithFrame:CGRectZero];
+  separator.translatesAutoresizingMaskIntoConstraints = NO;
+  separator.backgroundColor = [UIColor colorNamed:kToolbarShadowColor];
+  [self addSubview:separator];
+  CGFloat separatorHeight = ui::AlignValueToUpperPixel(kToolbarSeparatorHeight);
+  [NSLayoutConstraint activateConstraints:@[
+    [separator.heightAnchor constraintEqualToConstant:separatorHeight],
+    [self.leadingAnchor constraintEqualToAnchor:separator.leadingAnchor],
+    [self.trailingAnchor constraintEqualToAnchor:separator.trailingAnchor],
+    [self.topAnchor constraintEqualToAnchor:separator.bottomAnchor],
+  ]];
+
   // Add the icon. The icon is fixed to the top leading corner of the infobar.
   // |iconContainerView| is used here because the AutoLayout constraints for
   // UIImageView would get ignored otherwise.
@@ -191,7 +201,7 @@ NSString* const kTitleViewAccessibilityIdentifier = @"titleView";
     iconImageView.translatesAutoresizingMaskIntoConstraints = NO;
     iconImageView.accessibilityIdentifier =
         kIconImageViewAccessibilityIdentifier;
-    iconImageView.tintColor = UIColorFromRGB(kIconTintColor);
+    iconImageView.tintColor = [UIColor colorNamed:kBlueColor];
     // Prevent the icon from shrinking horizontally. This is needed when the
     // title is long and needs to wrap.
     [iconImageView
@@ -266,8 +276,7 @@ NSString* const kTitleViewAccessibilityIdentifier = @"titleView";
                   action:@selector(didTapClose)
         forControlEvents:UIControlEventTouchUpInside];
   [closeButton setAccessibilityLabel:l10n_util::GetNSString(IDS_CLOSE)];
-  closeButton.tintColor = [UIColor blackColor];
-  closeButton.alpha = 0.20;
+  closeButton.tintColor = [UIColor colorNamed:kToolbarButtonColor];
   // Prevent the button from shrinking horizontally. This is needed when the
   // title is long and needs to wrap.
   [closeButton
@@ -337,8 +346,8 @@ NSString* const kTitleViewAccessibilityIdentifier = @"titleView";
     if (self.cancelButtonTitle.length > 0UL) {
       UIButton* cancelButton =
           [self actionButtonWithTitle:self.cancelButtonTitle
-                              palette:nil
-                           titleColor:UIColorFromRGB(kButtonTitleColorBlue)
+                      backgroundColor:nil
+                           titleColor:[UIColor colorNamed:kBlueColor]
                                target:self
                                action:@selector(didTapCancel)];
 
@@ -348,8 +357,8 @@ NSString* const kTitleViewAccessibilityIdentifier = @"titleView";
     if (self.confirmButtonTitle.length > 0UL) {
       UIButton* confirmButton =
           [self actionButtonWithTitle:self.confirmButtonTitle
-                              palette:[MDCPalette cr_bluePalette]
-                           titleColor:[UIColor whiteColor]
+                      backgroundColor:[UIColor colorNamed:kBlueColor]
+                           titleColor:[UIColor colorNamed:kSolidButtonTextColor]
                                target:self
                                action:@selector(didTapConfirm)];
 
@@ -404,9 +413,8 @@ NSString* const kTitleViewAccessibilityIdentifier = @"titleView";
   label.accessibilityIdentifier = kTitleLabelAccessibilityIdentifier;
   label.translatesAutoresizingMaskIntoConstraints = NO;
   label.clipsToBounds = YES;
-  label.textColor = [[MDCPalette greyPalette] tint900];
+  label.textColor = [UIColor colorNamed:kTextPrimaryColor];
   label.numberOfLines = 0;
-  label.backgroundColor = [UIColor clearColor];
   NSMutableParagraphStyle* paragraphStyle =
       [[NSMutableParagraphStyle alloc] init];
   paragraphStyle.lineBreakMode = NSLineBreakByWordWrapping;
@@ -475,9 +483,8 @@ NSString* const kTitleViewAccessibilityIdentifier = @"titleView";
   if (self.description.length > 0UL) {
     UILabel* label = [[UILabel alloc] initWithFrame:CGRectZero];
     label.accessibilityIdentifier = kDescriptionLabelAccessibilityIdentifier;
-    label.textColor = [[MDCPalette greyPalette] tint700];
+    label.textColor = [UIColor colorNamed:kTextSecondaryColor];
     label.numberOfLines = 0;
-    label.backgroundColor = [UIColor clearColor];
     NSMutableParagraphStyle* paragraphStyle =
         [[NSMutableParagraphStyle alloc] init];
     paragraphStyle.lineBreakMode = NSLineBreakByWordWrapping;
@@ -519,16 +526,14 @@ NSString* const kTitleViewAccessibilityIdentifier = @"titleView";
   cardLabel.accessibilityIdentifier = kCardLabelAccessibilityIdentifier;
   cardLabel.text = self.cardLabel;
   cardLabel.font = [MDCTypography body1Font];
-  cardLabel.textColor = [[MDCPalette greyPalette] tint900];
-  cardLabel.backgroundColor = [UIColor clearColor];
+  cardLabel.textColor = [UIColor colorNamed:kTextPrimaryColor];
   [cardDetailsContainerView addArrangedSubview:cardLabel];
 
   UILabel* cardSublabel = [[UILabel alloc] initWithFrame:CGRectZero];
   cardSublabel.accessibilityIdentifier = kCardSublabelAccessibilityIdentifier;
   cardSublabel.text = self.cardSublabel;
   cardSublabel.font = [MDCTypography body1Font];
-  cardSublabel.textColor = [[MDCPalette greyPalette] tint700];
-  cardSublabel.backgroundColor = [UIColor clearColor];
+  cardSublabel.textColor = [UIColor colorNamed:kTextSecondaryColor];
   [cardDetailsContainerView addArrangedSubview:cardSublabel];
 
   // Dummy view that expands so that the card details are aligned to the leading
@@ -547,7 +552,6 @@ NSString* const kTitleViewAccessibilityIdentifier = @"titleView";
     label.accessibilityIdentifier = kLegalMessageLabelAccessibilityIdentifier;
     label.textColor = [[MDCPalette greyPalette] tint700];
     label.numberOfLines = 0;
-    label.backgroundColor = [UIColor clearColor];
     NSMutableParagraphStyle* paragraphStyle =
         [[NSMutableParagraphStyle alloc] init];
     paragraphStyle.lineBreakMode = NSLineBreakByWordWrapping;
@@ -592,14 +596,14 @@ NSString* const kTitleViewAccessibilityIdentifier = @"titleView";
                                                          action {
   LabelLinkController* labelLinkController =
       [[LabelLinkController alloc] initWithLabel:label action:action];
-  [labelLinkController setLinkColor:[[MDCPalette cr_bluePalette] tint500]];
+  [labelLinkController setLinkColor:[UIColor colorNamed:kBlueColor]];
   return labelLinkController;
 }
 
 // Creates and returns an infobar action button initialized with the given
 // title, colors, and action.
 - (UIButton*)actionButtonWithTitle:(NSString*)title
-                           palette:(MDCPalette*)palette
+                   backgroundColor:(UIColor*)backgroundColor
                         titleColor:(UIColor*)titleColor
                             target:(id)target
                             action:(SEL)action {
@@ -610,17 +614,17 @@ NSString* const kTitleViewAccessibilityIdentifier = @"titleView";
   [button addTarget:target
                 action:action
       forControlEvents:UIControlEventTouchUpInside];
-  [button setUnderlyingColorHint:[UIColor blackColor]];
+  [button setUnderlyingColorHint:[UIColor colorNamed:kBackgroundColor]];
   button.uppercaseTitle = NO;
   button.layer.cornerRadius = kButtonCornerRadius;
   [button
       setTitleFont:[UIFont preferredFontForTextStyle:UIFontTextStyleHeadline]
           forState:UIControlStateNormal];
 
-  if (palette) {
+  if (backgroundColor) {
     button.hasOpaqueBackground = YES;
-    button.inkColor = [[palette tint300] colorWithAlphaComponent:0.5f];
-    [button setBackgroundColor:[palette tint500] forState:UIControlStateNormal];
+    button.inkColor = [UIColor colorNamed:kMDCInkColor];
+    [button setBackgroundColor:backgroundColor forState:UIControlStateNormal];
   }
 
   if (titleColor) {