Create spacing tokens

[georgewrmarshall]

Description

This PR introduces new spacing tokens to the design tokens repository for CSSinJS, Figma JSON, and CSS variables. Additionally, it adds Storybook documentation and a SpacingSwatch documentation component to visually represent these spacing tokens. The changes ensure consistency in spacing values across the design system and provide contributors with clear references for applying these tokens.

Technical Details

• Create spacing tokens and add them to the design tokens repository.
• Ensure that the spacing tokens are available in the following formats:
  • CSSinJS
  • Figma JSON
  • CSS variables
• Add a SpacingSwatch component to Storybook to display the new spacing tokens visually.
• Update the documentation to include details on how and where to use these spacing tokens across the design system.
• Reference Tailwind's spacing scale as a guide for defining the tokens.

Acceptance Criteria

• New spacing tokens are created and correctly implemented in CSSinJS, Figma JSON, and CSS variables formats.
• The SpacingSwatch component is added to Storybook and accurately displays the spacing tokens.
• The updated documentation is clear and comprehensive, helping contributors understand how to apply the spacing tokens in various formats.
• Validate that the tokens are consistent across platforms and correctly reflected in the design system.

References

• Tailwind Spacing Scale: Tailwind Spacing Documentation
• Spacing Audit: Figma Spacing Audit Report