Repository navigation
Style Book: Show for Typography, Colors and Blocks, including block states #83065
Description
Followup to #66376.
When you commission a visual identity from a design firm, you often receive a literal coffee-table book that catalogues it and all its rules. You can page through it to see how every aspect of your identity works, how to apply it in different contexts, which colours and typescales make it up, and which "fifth elements" can be used where.
This is how @beafialho conceived the Style Book, as the website counterpart to that: a full catalogue of all the pieces that make up your website. The typescale, the colour palette, your site logo and identity, and your "fifth elements", which in this case are all the blocks you can build with. Here's the overview screen:
Some of that is implemented. Enable the Style Book using the 🧿 icon and browse to Colors, and you'll see a palette map. Browse to Typography, and you'll see the type hierarchy. But other pieces are still missing:
- Background, Shadows and Layout show just the overview screen.
- Blocks, and individual blocks, do show a preview, but it's limited.
Importantly, by default the Style Book is not on for either of the above, so it's easy to think the tiny preview at the top of the inspector is the only way to preview a block. This matters especially now that you are able to edit pseudo states, and none of those expanded states are shown there:
But they were designed to:
Proposal
1. Toggle on the Style Book by default when navigating to sub-sections of Styles.
It's simply a better preview of your contents, so it should be on for any section that has Style Book specific screens: Typography, Colors, but also Blocks, and any individual block you pick from the list.
Typography section
Colour section
For any other sections that don't have dedicated screens designed in Bea's mockups, they can show the Overview screen.
2. Show the full range of block states in context of individual blocks.
A state-picker dropdown shipped in 7.1. A good followup is a Style Book counterpart that shows all available states in an exploded view. That saves some clicks, and lets you compare and contrast states side by side with a full, non-scaled preview.
Just like with the main Style sections, these exploded block-views should also be shown by default when navigating the Blocks section.
Activity