diff --git a/site/docs/foundations/spacing.mdx b/site/docs/foundations/spacing.mdx index 2460dbecc8..291c8a8f1f 100644 --- a/site/docs/foundations/spacing.mdx +++ b/site/docs/foundations/spacing.mdx @@ -13,29 +13,29 @@ Spatial tokens help align layouts and create consistent visual rhythm. The Salt spacing system is structured around a base unit of `--salt-spacing-100` for each density, with a scale that is proportional across all densities. Every space token within the system is a multiple of `--salt-spacing-100` and percentages of the base unit. This scale offers flexibility that uses geometric progressions. -| Token | Formula | High Density (HD) (px) | Medium Density (MD) (px)| Low Density (LD) (px)| Touch Density (TD) (px)| -| -------------------- | ------- | ---------------------- | ----------------------- | -------------------- | ---------------------- | -| `--salt-spacing-25` | 0.25x | 1 | 2 | 3 | 4 | -| `--salt-spacing-50` | 0.50x | 2 | 4 | 6 | 8 | -| `--salt-spacing-75` | 0.75x | 3 | 6 | 9 | 12 | -| `--salt-spacing-100` | 1.00x | 4 | 8 | 12 | 16 | -| `--salt-spacing-150` | 1.50x | 6 | 12 | 18 | 24 | -| `--salt-spacing-200` | 2.00x | 8 | 16 | 24 | 32 | -| `--salt-spacing-250` | 2.50x | 10 | 20 | 30 | 40 | -| `--salt-spacing-300` | 3.00x | 12 | 24 | 36 | 48 | -| `--salt-spacing-350` | 3.50x | 14 | 28 | 42 | 56 | -| `--salt-spacing-400` | 4.00x | 16 | 32 | 48 | 64 | -| `--salt-spacing-450` | 4.50x | 18 | 36 | 54 | 72 | -| `--salt-spacing-500` | 5.00x | 20 | 40 | 60 | 80 | -| `--salt-spacing-550` | 5.50x | 22 | 44 | 66 | 88 | -| `--salt-spacing-600` | 6.00x | 24 | 48 | 72 | 96 | -| `--salt-spacing-650` | 6.50x | 26 | 52 | 78 | 104 | -| `--salt-spacing-700` | 7.00x | 28 | 56 | 84 | 112 | -| `--salt-spacing-750` | 7.50x | 30 | 60 | 90 | 120 | -| `--salt-spacing-800` | 8.00x | 32 | 64 | 96 | 128 | -| `--salt-spacing-850` | 8.50x | 34 | 68 | 102 | 136 | -| `--salt-spacing-900` | 9.00x | 36 | 72 | 108 | 144 | -| `--salt-spacing-950` | 9.50x | 38 | 76 | 114 | 152 | +| Token | Formula | High Density (HD) (px) | Medium Density (MD) (px) | Low Density (LD) (px) | Touch Density (TD) (px) | +| -------------------- | ------- | ---------------------- | ------------------------ | --------------------- | ----------------------- | +| `--salt-spacing-25` | 0.25x | 1 | 2 | 3 | 4 | +| `--salt-spacing-50` | 0.50x | 2 | 4 | 6 | 8 | +| `--salt-spacing-75` | 0.75x | 3 | 6 | 9 | 12 | +| `--salt-spacing-100` | 1.00x | 4 | 8 | 12 | 16 | +| `--salt-spacing-150` | 1.50x | 6 | 12 | 18 | 24 | +| `--salt-spacing-200` | 2.00x | 8 | 16 | 24 | 32 | +| `--salt-spacing-250` | 2.50x | 10 | 20 | 30 | 40 | +| `--salt-spacing-300` | 3.00x | 12 | 24 | 36 | 48 | +| `--salt-spacing-350` | 3.50x | 14 | 28 | 42 | 56 | +| `--salt-spacing-400` | 4.00x | 16 | 32 | 48 | 64 | +| `--salt-spacing-450` | 4.50x | 18 | 36 | 54 | 72 | +| `--salt-spacing-500` | 5.00x | 20 | 40 | 60 | 80 | +| `--salt-spacing-550` | 5.50x | 22 | 44 | 66 | 88 | +| `--salt-spacing-600` | 6.00x | 24 | 48 | 72 | 96 | +| `--salt-spacing-650` | 6.50x | 26 | 52 | 78 | 104 | +| `--salt-spacing-700` | 7.00x | 28 | 56 | 84 | 112 | +| `--salt-spacing-750` | 7.50x | 30 | 60 | 90 | 120 | +| `--salt-spacing-800` | 8.00x | 32 | 64 | 96 | 128 | +| `--salt-spacing-850` | 8.50x | 34 | 68 | 102 | 136 | +| `--salt-spacing-900` | 9.00x | 36 | 72 | 108 | 144 | +| `--salt-spacing-950` | 9.50x | 38 | 76 | 114 | 152 | ## Hierarchical spacing @@ -50,7 +50,7 @@ Horizontal dividers are used to divide regions of a layout and should be spaced ## Header spacing -Headings serve as the primary title for different content types by providing visual separation and hierarchy. All headings should be accompanied by standard spacing above and below. The spacing placed directly below a heading depends on the level of focus placed on the item. +Headings serve as the primary title for different content types by providing visual separation and hierarchy. All headings should be accompanied by standard spacing above and below. The spacing placed directly below a heading depends on the level of focus placed on the item. To find out more about how to use spacing in headers, please refer to the [forms pattern page](/salt/patterns/forms). @@ -82,19 +82,14 @@ Standard spacing between items in a horizontal configuration is typically `--sal | Buttons | `--salt-spacing-100` | | Components | `--salt-spacing-300` | - - Diagram of what spacing between buttons should look like. - - Diagram of what spacing between components should look like. - :fragment{src="./fragments/feedback.mdx"}