Increase tertiary color contrast

[jeremydw]

Colors indicated in screenshot need to be darker. OK to use the same var(--color-on-list-item-background) if there is no other superior option.

[micjamking]

@jeremydw The font-styling of the menu headers & icons are actually a bit off from the mocks; do you feel the mocks need to be adjusted further, or will it be sufficient to match the mocks (see attached)?

Here's the current font-style for the menu headers (from Figma):

font-family: SF Pro Text; /* ie. --system-font */
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
color: #AAAAAA;

Additionally, the icons for sections/folders (underneath the "Site" menu heading) should match the text color of the section / folder (ie. black in this case).

[Zoramite]

I've targeted the 'lighter' style icons to just the non-special leaf nodes, which I think matches what the mocks are showing:

[jeremydw]

Hi All - I do think the grey needs to be updated in the mocks as well since it is too light. Using the built-in Devtools accessibility tester you can see that it doesn't fully pass the contrast check.

Example of passing the contrast check:

[Zoramite]

To get it to pass the accessibility contrast, we would have to bump it up to something like #585858

And at that point it would probably be better to just use the same color as the label.

[micjamking]

I'd prefer updating the non-leaf nodes to the lightest accessible grey (ie. #767676) along with updating the parent sections/folders nodes to the same font-weight styling from the mocks (ie. font-weight: bold, see screenshots); there's not enough differentiation between the leaf/non-leaf nodes as-is, and the styling should be consistent with the titles in the editor panel.

[jeremydw]

Lightest accessible grey is looking good to me. :) Thank you for working through these!

[Zoramite]

Alrighty, I've adjusted it to have a darker grey color for the leaf icons.