Modernize visual appearance of grids

[rauhul]

Updates all grids except for package grids to take a more layered
appearance matching that of the tabs.

Adds support for "prefers-contrast: more" to use the previous higher
contrast style.

Removes the many grid css styles and replaces them with a common grid
style in the elements folder than can be reused between pages.

Builds on top of #743, #749, and #751

[rauhul]

@swift-ci test

[rauhul]

older screenshots

Before & After

Home

Getting Started

Packages

Tools

[heckj]

For my part, it lowers the reading contrast in those grey-blocked sections a bit too much. No qualms about the added visual structure blocking things out, but I'd at least toss in a request for a darker font/weighting to get the contrast back up.

[rauhul]

For my part, it lowers the reading contrast in those grey-blocked sections a bit too much. No qualms about the added visual structure blocking things out, but I'd at least toss in a request for a darker font/weighting to get the contrast back up.

For both dark and light mode or just one specifically?

[heckj]

Ah, sorry - really just the light mode. The difference in the dark mode didn't my eyes as hard - it's a little reduced, but not to a level that makes reading more difficult for me. I'll never complain about a bit more contrast though ;-)

[dempseyatgithub]

Since the existing style is very high contrast, we should consider preserving it as a prefers-contrast CSS media query for accessibility users requiring high contrast. I don't think that has been a concern before with the existing style.

[dempseyatgithub]

I find the use of the orange color for call outs, for example the "Get Involved" section of the package page to draw far too much attention to that element. Getting involved is important, which is why it is in a call out box, but it is not the most important thing on the page.

I find the orange color draws the eye too much for these kind of call outs.

Changing the link text and underline from blue to orange also make the link / call to action in the call out much less visible. Scanning the original, it is clear the box wants people to get involved with the main way of getting involved as 'Nominate packages'.

Using the orange color for the call to action about the migration guide on the home page is meant to draw the eye, especially on a home page where the content is largely static, and where directing visitors to the migration guide is an important and transient announcement.

[rauhul]

@dempseyatgithub I pulled the banner changes out into #749, could you take a look there?

[rauhul]

Before & After

Home

Light - Default

Light - Increased Contrast

Dark - Default

Dark - Increased Contrast

Packages

Light - Default

Light - Increased Contrast

Dark - Default

Dark - Increased Contrast

Install

Light - Default

Light - Increased Contrast

Dark - Default

Dark - Increased Contrast

[kubamracek]

Large +1 from me, this is a big improvement.

[kaishin]

@rauhul Can we merge the other PRs and rebase before final review?

That aside, we need to increase the contrast in light mode even further by toning down the background gray, otherwise it would be a regression in accessibility for many.

[kaishin]

@rauhul Happy to review this once rebased. Thanks!

[rauhul]

anything blocking this?

[rauhul]

@swift-ci test