Create Semantic Tokens for gutters

[caw310]

Description

As part of the normalizing the gutters to make UI and UX more consistent, it was decided to create semantic tokens for gutters.

Tasks

• Create semantic tokens for gutters
• Share the information with developers to add

Acceptance Criteria

• Semantic tokens for gutters created

[micahchiang]

Perhaps useful information - https://designsystem.digital.gov/utilities/layout-grid/#gutters-2

We probably want to set the values of our gutter tokens to align with whatever these uswds values are. I imagine we could end up using the layout grid gutters above in things like sitewide layouts, and if teams need to specify their own gutters in custom stylesheets, we'd want those values to remain consistent.

[danbrady]

I believe that "gutters" and "margins" are being used interchangeably, which may lead to different expectations and effort required.

The recent research and design work focused on the margins in the layout grid, specifically the left and right side padding at various breakpoints.

I consider "gutters" as the space between columns. This was not requested and was not part of the initial research and design. However, since we have approval to align the margins with the USWDS, it seems reasonable to align the gutters as well. We should confirm this. Please note that there are currently no design assets for gutters, and we will likely need additional tokens for them.

Since margins and gutters work in conjunction with the grid's max-width, we might want to consider adjusting that as well. Currently, we are at 1000px, but we would like to be at 1024px. However, adjusting this without updating the global header and footer could lead to misalignment, so this can get tangled up very quickly.

All this to say, let's discuss. 😄

[micahchiang]

Ah okay, that makes things a little clearer for me 👍

So speaking to just the margins (which in CSS terms is actually padding here) we get some things for free from the uswds layout grid. 2 units at narrow widths and 4 units at desktop and wider.

We also get the 1024px width for free if we use the grid container they provide. And, if need be, we can customize some theme settings for layout grid margin.