Semantic tokens for spacers between things (gaps, insets)

[mcoker]

Some additional spacers to consider with the idea that gaps are spacers between adjacent things, and insets are paddings/margins around the outside of things

• Page chrome inset token(s). We use the 24px/lg spacer as the inset for page chrome things.
  • It may make sense for certain components to use this inset, too, or a token based off of this inset, if the spacing is expected to match a page chrome inset.
• Default gaps for layouts like grid and gallery. At least for gallery, the column and row gaps match. That might match the page chrome by default?
• Default gaps for a flex layout where the column gap may be larger than a row gap.
• Column and row gap for a list/row of things that may wrap
  • Buttons/actions
    • We may have different variations for things like plain actions (no spacer), filter groups (xs/4px), regular buttons (16px) - these are all specified in the toolbar
    • A common gap between actions, but also a gap between groups of actions and potentially for destructive actions (unless destructive actions would go in a group like the cancel button in the "in wizards" action list example)
  • Labels
• Gap between commonly paired things
  • Icon + text is a big one
  • Toggle text + caret icon
  • A (descriptive) label + the thing it describes
    • Label group title + list of labels
    • checkbox/radio input + label

cc @lboehling @andrew-ronaldson

[mcoker]

ping @andrew-ronaldson @lboehling this looks done to me, can we close this or would you like to keep it open?