enhance(design): improve style of current item in menu

[caugner]

Summary

(MP-1103)

Problem

1. The contrast of the highlighted menu item is too low in the light theme.
2. The menu highlights the current page in the menu by reducing its visibility, which is counter-intuitive.

Solution

Inverse the menu highlighting, reducing the opacity of the inactive items using opacity: 0.775, and increasing the contrast of the active item by switching from --text-secondary to --text-primary, which is the same color used for the MDN logo.

Note: Also removes the --text-active variable, which is no longer used.

---

Screenshots

Theme Before/After	Screenshot
Light Before
Light After
Dark Before
Dark After

---

How did you test this change?

Ran yarn dev and compared http://localhost:3000/en-US/docs/Learn locally against https://developer.mozilla.org/en-US/docs/Learn.

[mirunacurtean]

Adding regression on stage currently, most noticeable in dark mode. Open the profile menu on a page with a content behind the menu, like https://developer.allizom.org/en-US/docs/Web/JavaScript and then use a mouse scroll motion to navigate the page. Notice the menu's opacity is decreased and it has become see through.

[caugner]

Adding regression on stage currently, most noticeable in dark mode. Open the profile menu on a page with a content behind the menu, like https://developer.allizom.org/en-US/docs/Web/JavaScript and then use a mouse scroll motion to navigate the page. Notice the menu's opacity is decreased and it has become see through.

Good catch, thank you! I pushed a fix, and it's being deployed to stage now.

[LeoMcA]

Why are we using opacity rather than setting color?

Using opacity breaks Firefox's accessibility inspector, which doesn't take it into account when assessing contrast:

[caugner]

I used opacity for simplicity, because it avoids having to define two additional colors for light and dark theme, and because it also applies to the "New" pill on the Tools menu (which would require another two colors).

TIL about Firefox's accessibility inspector ignoring opacity, but technically this PR increases contrast.

[caugner]

@LeoMcA Are you okay with merging this?

[LeoMcA]

it also applies to the "New" pill on the Tools menu (which would require another two colors)

Why does it apply the the "New" pill? Isn't the point of that pill to draw attention? Why are we then making it stand out less?

but technically this PR increases contrast.

Does it? It decreases the contrast of the majority of links in the header. Taking a screenshot and colour picking the colour (#757575), then putting it in https://webaim.org/resources/contrastchecker/ shows we fail AAA contrast, which I don't think is good enough for some of the most prominent text on our site:

[LeoMcA]

I don't want to bikeshed here, but I don't like this design: it doesn't make sense to me. I can't think of any other site which shows the active section of the site by making the links to the other sections lower contrast. The active section should be shown with an underline, or some other distinguishing feature, not by making the rest of the links hard to see.

[LeoMcA]

Contrast too low, design doesn't make sense