search

WordPress / wporg-parent-2021

17 stars 10 forks source link

Add dark chevrons when navigation has white background. #52

Closed StevenDufresne closed 1 year ago

StevenDufresne commented 1 year ago

This PR adds a dark chevron arrow if the navigation background is white. This is somewhat short-sighted since its styles are based on has-white-background-color but I think it's good enough for now. An ideal approach would be to allow authors to change the colors of the chevron svgs.

See https://github.com/WordPress/wporg-showcase-2022/issues/1

Screenshots

Before After
Screen Shot 2022-10-28 at 10 02 46 AM Screen Shot 2022-10-28 at 9 57 11 AM

How to test the changes in this Pull Request:

  1. Load the subnav-bar pattern.
  2. Remove the brush stroke
  3. Update the background colors to #fff, text to something dark.
  4. View the control on a front-end page, and adjust the page to a mobile size
  5. Expect to see the down arrow, open/close it.
ryelle commented 1 year ago

I switched the logic up a little to use the text color — thinking that it will be more consistent to use charcoal-1 text on any light backgrounds, rather than adding more cases for the different possible light backgrounds.

I also added a blueberry chevron, to match the text color & design of the banner on the theme mockups, so if/when blueberry + light blue is used, it will get a blue chevron.

Screen Shot 2022-10-28 at 12 59 33 PM
StevenDufresne commented 1 year ago

Great. Thanks for jumping in.

StevenDufresne commented 1 year ago

On second thought, I don't think this is the right approach as the chevron should match the heading on the left, not the navigation color. See Showcase:

Desktop

Screen Shot 2022-11-02 at 10 09 30 PM

Mobile

Screen Shot 2022-11-02 at 10 10 36 PM
StevenDufresne commented 1 year ago

We could use a sibling selector instead.

ryelle commented 1 year ago

Hm, I didn't realize there would be a case where they're different colors… Do they really need to be different colors? (I'm not sure which designer to ping for that question)

StevenDufresne commented 1 year ago

You can probably comment on the design: https://www.figma.com/file/nK6LcMOZMtRAQdIky3PNIA/Showcase-Pages?node-id=945%3A19010

ryelle commented 1 year ago

Well, I got through half of a comment here before I put the screenshots next to each other and realized yeah… it looks odd that the chevon is blue 😅

Match link color Match parent group color

I can try to play with the CSS here later to get it working :)