Per the conversation in T259240, we would like to update the Vector 2022 design to draw higher contrast between sections of the page. This task assumes the header portion of the design has been completed in T332449 and focuses on producing the design of the page columns.
Design spec
Prototype: https://di-content-separation.web.app/Moss
 |  |  |
| ToC & tools menu | main menu & tools menu | single column |
Note: The design & prototype are based on a new grid system that will not be part of this implementation. For exact spacing and sizing, defer to design review, and use standardized variables when possible.
Alignment: a notable change is the alignment of the main-menu button to the edge of the sidebar ToC. Currently, the edge of the button is aligned with the ToC text. This design update aligns the border of the ToC container with the main menu button instead.
Palette
Page background color: #f8f9fa
content background: #ffffff
content borders: 1px solid #ececec
content rounded corner: 4px
content padding: TBD
column & row gutters: TBD
Page Footer TBD
Technical notes
- Per discussion on T331320#8705410 the importance of maintaining the tab order was raised, and the preferred approach to styling the content column is to place the background colors & borders on the page title, toolbar and content areas individually. We shouldn't use a wrapper element to create these styles because the page tools menu sits between the toolbar and content, and a wrapper element would change that tab order.
- We can use either a mixin or a class to generalize these container styles, but the same border & backgrounds will apply to ToC, main menu, page tools, and the content areas, so there is an opportunity to unify these styles in some way.
- These changes should be scoped to the feature flagged
A/C
- When the feature flag is enabled, the new design is visible.
- When the feature flag is disabled, no changes occur.
- When the full-width toggle is enabled, the content column expands as it currently does.
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T332600#8809390 |
| 2 | ✅ | T332600#8809390 |
| 3 | ✅ | T332600#8809390 |
