Modernize visual appearance of grids #742
Conversation
rauhul
requested review from
0xTim,
alexandersandberg,
daveverwer,
dempseyatgithub,
parispittman,
kaishin,
shahmishal,
timsneath and
federicobucchi
as code owners
|
@swift-ci test |
older screenshotsBefore & AfterHome
Getting Started
Packages
Tools
|
shahmishal
added
the
workgroup-to-discuss
|
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? |
|
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 ;-) |
|
Since the existing style is very high contrast, we should consider preserving it as a |
|
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. |
|
@dempseyatgithub I pulled the banner changes out into #749, could you take a look there? |
Unifies the banner and cta css styles used on multiple pages. Moves the element to a common location so the it can be found in the source easily and be reused across pages.
Removes figure-gray-secondary-alt in favor of figure-gray-tertiary which already had the exact same color values. Fixes fill-quaternary to have different colors in dark and light mode.
Updates the .interactive-tabs class to take a more layered appearance. Hover and selection states are visually distinct and rely on the existing color palette for layers. Adds support for "prefers-contrast: more" to use the previous higher contrast style. Moves the css for tabs to a common location so it can be easily found and reused between pages.
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.
Before & AfterHomeLight - Default
Light - Increased Contrast
Dark - Default
Dark - Increased Contrast
PackagesLight - Default
Light - Increased Contrast
Dark - Default
Dark - Increased Contrast
InstallLight - Default
Light - Increased Contrast
Dark - Default
Dark - Increased Contrast
|
rauhul
changed the title
|
Large +1 from me, this is a big improvement. |
shahmishal
removed
the
workgroup-to-discuss
There was a problem hiding this comment.
@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.
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