feat(searchbar): update styles to iOS 17 specs

[sean-perkins]

Issue number: Internal

---

What is the current behavior?

The searchbar implementation for Ionic's iOS mode does not align with the appearance of a native search control in iOS 17.

What is the new behavior?

• The spacing between the searchbar and the cancel button has increased to 12px.
• The cancel button font size has increased to 17px.

iOS 17	Ionic	Diff

• Ionic's text and background color is different than iOS, this is expected. Ionic uses the $text-color-rgb, which is compatible with dark mode appearance. Ionic does not currently have rgb variables for step colors to closer align to iOS color when requiring opacity.
• iOS reference image is from the Notes app. Ionic reference image is from searchbar/test/basic, with a modified content background color of #f2f2f7 to closer align to the Notes app.

Does this introduce a breaking change?

• Yes
• No

Other information

The additional screenshot diffs that are a part of this PR are valid changes. When updating the color palette for AA contrast, these reference images were not updated. We currently use a threshold that determines if a diff exists. The reason that they show up in this PR is because I manually deleted the reference images and forced new references. As such the text color changes you see here are actually from the AA contrast changes.

[thetaPC]

LGTM, verified against the iOS native Calendar app

[brandyscarney]

It looks like the cancel text also got larger. I can reproduce it using the images in your description as well as my own images taken from my device:

Another thing I noticed when looking at the Searchbar in Safari on iOS is that when the text centers the search icon doesn't center with it. I am not sure if this is new with iOS 17 and I can't find another app where it centers but we might want to add this as "out of scope" for now.

[sean-perkins]

@brandyscarney good catch on the cancel button text. Updating the screenshots now.

I'm not sure i follow the Safari comment. Developers can add text-align: center to the searchbar to accomplish a similar display style (icon remains left, text centers, but to the remaining space - not the entire container). However I don't think the Safari searchbar is stock UI. It has a custom implementation where on focus on the input covers the search icon.

[brandyscarney]

You're right, I can't find any other examples where the searchbar behaves that way in iOS. I also tried reproducing it in SwiftUI but their default is left aligned. I see what you're saying that users can center it, but it doesn't give the animation like we have in our docs when it is centered that way (see the last example). It might be good to note it either way, that we chose not to change the animated implementation to leave the icon static.

[liamdebeasi]

Looks like I got tagged as a reviewer due to a flaky screenshot update. Going to remove myself from a review since this PR already has 2 reviewers.