Style primary search form's -webkit-search-cancel-button within desktop and mobile navigation

My first thought on this is do we want to break the browser's default behavior of inserting the X? I know it definitely should not have a gradient.

@kiran.kadam911 Thank for adding patch. Patch is working for me. Please refer the SS.

Before Patch

After Patch

@komalkolekar Your patch just removes the button for only one of the search inputs. We want to style the inputs (not remove them), and we need to do it both for the desktop and mobile search input fields.

Please see the updated summary.

This is init patch. I didn't have enough time to test my changes in all browsers, but it works in chrome. Why init patch? Because by default cross is grey.. And to make it white, we need some modifier class (to prevent double code in multiple places). Well, actually we need white cross icon only for search inputs in header, so maybe possible to add some modifier classname using hook? Idk yet.

3 screenshots after patch
Please let me know if these styles are expected and we really can keep it.
Also thoughts about modifier for white cross?

This looks really great IMO (with one super minor change below).

My first thought is that we should be using :before and :after pseudo-elements instead of background images. Unfortunately, the ::-webkit-search-cancel-button psuedo-element doesn't support those. So, the only real option is background images.

The only thing I noticed is that the icon seems misplaced on the mobile form (see the screenshot below). We can adjust this by changing the padding-right (or more correctly, padding-inline-end) on the mobile search form.

Refer screenshot tested with the RTL look off the text is not visible.

I have fixed feedbacks from #18 and #19 comments

This looks good. However, the padding right issue on the mobile search form is still not resolved on tablet and desktop sizes (there's a media query and we need to adjust the value on line 74)

Worked on #21.
Attached screenshot for reference.
Review the patch.

Reviewed #23 and looks perfect!

1. +++ b/core/themes/olivero/css/components/header-search-wide.pcss.css
   --- /dev/null
   +++ b/core/themes/olivero/images/cross-white.svg
   
   +++ b/core/themes/olivero/images/cross-white.svg
   --- /dev/null
   +++ b/core/themes/olivero/images/cross.svg
   

   Let's optimize these SVG files.

2. +++ b/core/themes/olivero/images/cross.svg
   @@ -0,0 +1,3 @@
   +  <path fill="#7e96a7" d="M9.00014 7.61552L1.38461 0L0 1.38461L7.61552 9.00014L0.000147897 16.6155L1.38476 18.0001L9.00014 10.3848L16.6154 18L18 16.6154L10.3848 9.00014L18.0001 1.38475L16.6155 0.000138166L9.00014 7.61552Z"/>
   

   Seems like this doesn't provide enough color contrast to comply with WCAG AA. Let's try to find another color that would provide sufficient contrast.

Worked on #25.
#25.2- Instead of #7e96a7 used #5F788C to comply with WCAG AA.
#5F788C is having a contrast ratio is 4.61:1 whereas #7e96a7 is having a contrast ratio is 3.08:1
Review the patch.

I have tested the above patch on 9.2 dev version.The -webkit-search-cancel-button is not much visible ,when we select the suggestions from input text field.
Before patch Desktop

when we select suggestions

Before patch mobile

when we select suggestions

After patch Desktop

when we select suggestions

After patch Mobile

when we select suggestions

I have added both before and after patch screenshots.

The color contrast seems to be fixed.

Moving to RTBC.

#26 Patch failed

#33 Please review the patch

Hi @Sakthivel M, thanks for the patch #33 it's working as expected, adding the screenshots.

Before patch:

After patch:

Moving to RTBC.

Thanks for working on this. My thought is that we can simplify the code by not using a gradient (use white) and use CSS to generate the X instead of SVG

1. +++ b/core/themes/olivero/css/components/form-text.css
   @@ -10,6 +10,14 @@
   +  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'  xmlns:v='https://vecta.io/nano'%3e%3cpath fill='%235F788C' d='M9 7.616L1.385 0 0 1.385 7.616 9 0 16.616 1.385 18 9 10.385 16.615 18 18 16.615 10.385 9 18 1.385 16.616 0 9 7.616z'/%3e%3c/svg%3e") no-repeat 50% 50% / 1.125rem 1.125rem;
   

   Can we use CSS shapes to make the background instead of requiring the browser to download an additional image?

   Note that when you do this, use borders (instead of background colors) so that it shows in Windows high contrast mode.

2. +++ b/core/themes/olivero/css/components/form-text.pcss.css
   @@ -5,6 +5,13 @@
   +[type="search"]::-webkit-search-cancel-button {
   

   Why are we making this change here?

3. +++ b/core/themes/olivero/css/components/header-search-narrow.pcss.css
   @@ -170,7 +177,14 @@ body:not(.is-always-mobile-nav) .block-search-narrow {
   +    background-image: linear-gradient(var(--color--blue-50), var(--color--blue-50));
   

   We can just make this white here. Doesn't need to be a gradient.

@mherchel
1. About css shapes - how do you plan to do it? From what i see we can't use :before or :after on the webkit-search-cancel-button pseudo element.

This is a quick reroll of #33 against 9.3.x.

Create patch for Drupal 10.1.x. Please check primary search and search text box on search result page.

For ref attached screenshot what I have did for search close button.

Applied patch #41 works fine in all media (desktop and mobile) for Drupal version 10.1.x
Refer to the screenshot

We can move to RTBC

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Patch #41, no longer applies to 10.1.x. here is a quick re-roll. please review

Patch #45 is applying to 10.0.9 and 10.1.x. as accepted.

Verified and tested patch#45 on Drupal 10.1.X version, Patch applied successfully and looks good to me.

Test Result:
The contrast changed, styled to a light gray X.

Can be moved to RTBC +1

Random test failure. Moving to RTBC again.

The issue summary here is very brief but easy to understand what is being changed. I did add the template in case it is needed.

I read through the comments and found an item that has not been responded to, #25.1. I am adding that as a remaining step in the issue summary.

Setting NW for the point to be addressed.

The Olivero theme was approved for removal in #3590816: [policy, no patch] Deprecate Olivero and move to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3595082: [meta] Tasks to deprecate the Olivero theme and the removal work in #3595085: [meta] Tasks to remove the Olivero theme.