Modernize package grid design (light)

[MarketHubb]

This PR contains:

Opinionated design changes to the grid in light mode

• Inverted body and card background colors to improve card contrast. Using a (light) gray body background has the added benefit of making input fields, like the search bar, stand out.
• Reduced amount of bolded text in layout, while increasing text color contrast (as the saying goes: when everything is bold, nothing is bold)
• Adjusted package tags to align left. I imagine most people who use this site will read left to right. As such, having the first badge/pill appear in the same position on each card should significantly improve the users ability to scan the list (see screenshots for comparison)
• Soften the layout with rounded borders / badges and slightly increase padding and gap

Semantic css vars + introduce utilities.css

• These can be removed if the team is opposed, but if we're going to be using home-grown css vars instead of a framework, it might helpful to be semantic in our naming convention. Currently we have items like --background: #fff; whereas something as simple as --white: #fff; would be more clear (especially when considering things like light/dark mode will change what color is associated with "background")
• I took the already defined "foreground" and created a semantic --gray var, then using pre-defined (HSL) stops, added a handful of light/dark semantic vars to show an example of what we could do based on whatever our defined color palette is.

Detailed list of changes:

• Add gray-scale color palette for better design consistency
• Update card components with white backgrounds, rounded corners & left-aligned tags
• Convert typography units from px to rem for better scalability
• Implement 3-column grid layout with increased spacing between cards
• Add utilities.css for design tokens (spacing, font-weights) and future (non typography-related) vars
• Update label buttons with softer styling and pill-shaped borders
• Improve text contrast and readability with color-mix functions
• Change site background to lighter gray for better card contrast

Before:

After

[braver]

Thanks, that's really helpful. Some feedback/thoughts:

• I prefer to leave the font smoothing alone, it's not necessary and -webkit- covers so many devices you can't really be sure that you've made an improvement for all of them.
• I prefer to keep the labels underneath the search field and the labels elsewhere identical in shape (because they're identical things just in a different context), just smaller.
• "Adjusted package tags to align left." good move. It makes it so they visually don't move around as much, and I guess they're visually de-emphasized enough already.
• Totally don't mind a bit of a rewrite of the vars, haven't spent much time on it yet but the lighter/darker things already needed changing after I introduced a dark mode anyway.
• Now that the cards are slightly smaller, perhaps the stars might overlap with longer package names.

Finally, although I like the white cards on grey, now detail pages are entirely grey... any thoughts on that?

Anyway, this is really good stuff. Wanna do a dark one too?

[MarketHubb]

Absolutely I can whip up a dark-mode variant. Before I do however, help me understand the how we intended to group the collections of packages on the new site.

Current paradigm

For example, on the current packagecontrol.io site the homepage displays the following 4 collections:

• Trending
• New
• Popular
• Label

The "Browse" page displays 6 collection. Each of the homepage collections, plus:

• Author
• Updated

If we intend to mimic that, I would strongly advise against a vertically stacked, single-column (by collection) card layout like we currently have. These are inherently "scan" pages, which means we want to increase the information density and reduce the amount of vertical scrolling.

Options for new site (if we intended to display the same collections

• Mimic the current packagecontrol.io layout, but modernize
• Incorporate dynamic layouts (tabs, pills, accordions, collection badges)

[braver]

A related discussion going on in #9. See #9 (comment)

So, we don't yet have all the data the old site has (notably usage stats). But the goal is similar. Like you say: scannable overview grids for those initial pages. Then as you start searching, especially if you're searching by name (ie. not filtering), then it becomes beneficial to have a list.

It's not necessarily a goal to match the old site in "richness" though. I'm not sure we'll have the data, or the immediate desire, to add "popular" and "trending" sections.

[TerminalFi]

Feel free for this to be merged first. I can updated #9 afterwards

[MarketHubb]

I'll hold off on committing anything until we decide if/how to move forward with this PR, but if you wanted to get an idea of how a "dark mode" could look using just those 5 semantic gray-{lightness} vars + a handful of color-mix in declarations, I've attached a screenshot below.

I've also added some distinction between the header and the body to see if that's an idea we want to explore further.

[TerminalFi]

@MarketHubb it might be nice to use the same color scheme from docs.sublimetext.io

[TerminalFi]

A related discussion going on in #9. See #9 (comment)

So, we don't yet have all the data the old site has (notably usage stats). But the goal is similar. Like you say: scannable overview grids for those initial pages. Then as you start searching, especially if you're searching by name (ie. not filtering), then it becomes beneficial to have a list.

It's not necessarily a goal to match the old site in "richness" though. I'm not sure we'll have the data, or the immediate desire, to add "popular" and "trending" sections.

https://stats.sublimetext.io/all-totals

[braver]

https://stats.sublimetext.io/all-totals

Cool!

it might be nice to use the same color scheme from docs.sublimetext.io

That does have an orange and a greyscale that would work, but otherwise it looks a bit limited.

if/how to move forward with this PR

What specifically do you need? Maybe phrase it the other way around: what do you want to provide in this PR? Your dark mode looks pretty good in any case. Maybe focus on that? It’s also ok if you want to provide several semi-related things, but that does get pretty hard to review and eventually merge. But like what we did around sorting and filtering, I can take that work make some tweaks and integrate… that’s also an option.

[TerminalFi]

it might be nice to use the same color scheme from docs.sublimetext.io

That does have an orange and a greyscale that would work, but otherwise it looks a bit limited.

Primarily speaking about the primary BG colors. Even sublimetext.io should probably align

[MarketHubb]

it might be nice to use the same color scheme from docs.sublimetext.io

That does have an orange and a greyscale that would work, but otherwise it looks a bit limited.

Primarily speaking about the primary BG colors. Even sublimetext.io should probably align

The layout in the screen shot is using the (already defined) gray's in the colors.css as the "base" and shading off of them. However, I much prefer the base colors in the docs site, and can easily whip that up.

That said, since we've moved to this new repo with distinct branches, and this hasn't been merged (and now has conflicts), should I fetch the latest and just submit a new PR with dark and light? What's the best path forward?

[braver]

Yeah, a bunch of stuff has moved around in the mean time.

I am not really good at colors so if you want to take a stab at redoing the color scheme based off the documentation site, I'd be much obliged. If it turns out the shade of orange is off, let me know if you can work with the logo SVG, or I need to go back to the original in Affinity Designer.

[braver]

Thanks all, I took a lot of ideas and inspiration from this discussion and these proposals, and redid the color scheme, renamed most variables, and restyled various elements. It's now a much closer match also to the docs site, which makes the project as a whole feel more coherent. This just shipped via #58