Add New Utilities

[Jeremy-Walton]

Why?

The utility set needed new layout primitives (frame, flank, grid) and a way to
reset gap on text pairs. The growing list of utilities also needed clearer
organization so consumers can distinguish foundational utilities from more
advanced layout tools.

What Changed

• Added a frame utility for maintaining aspect-ratio containers
• Added a flank utility for fixed-plus-fluid side-by-side layouts
• Added a grid utility for responsive auto-fitting grid layouts
• Added a gap none option and allowed gap to override text pair spacing
• Update layout utilities to clear margin so they behave correctly on elements that carry margin
• Reorganized Cluster, Split, and Stack under an Advanced utilities group
• Expanded the layout recipe with grid, frame, and flank example scenarios
• Refactored utility definitions to use nesting, keeping the where clause beside each definition
• Fixed an issue with selecting code snippets

Quality Assurance

• Have you tagged the PR with the correct labels?
• Have you validated the changes?
  • Have you run linters? (yarn sanity-check)
  • Have you run prettier?
  • Have you tried building the css?
  • Have you tried building storybook?
• [ ] Have you updated any usage of changed tokens?
• [ ] Did you add a component?
  • [ ] Have you added it to the dependency graph?
  • [ ] Have you added it to the docs?
• Did you update a component? (technically utility)
  • [ ] Have you updated the dependency graph?
  • Have you updated the docs?
• Do you need to update the package version? (v2.4.0) Minor version bump
  • Did you update the example pages in .storybook/assets?
• [ ] Were any changes made to the top level optics.css file?
  • [ ] Were those changes reflected in the other top level files?

Screenshots