Skip to content

Commit

Permalink
Fix lint issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@tayyabataimur
tayyabataimur committed Feb 3, 2025
1 parent c40d31d commit 0cce8e5
Showing 1 changed file with 24 additions and 29 deletions.
53 changes: 24 additions & 29 deletions site/docs/foundations/spacing.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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).

Expand Down Expand Up @@ -82,19 +82,14 @@ Standard spacing between items in a horizontal configuration is typically `--sal
| Buttons | `--salt-spacing-100` |
| Components | `--salt-spacing-300` |



<Image
src="/img/foundations/spacing-buttons.png"
alt="Diagram of what spacing between buttons should look like."
/>



<Image
src="/img/foundations/spacing-components.png"
alt="Diagram of what spacing between components should look like."
/>


:fragment{src="./fragments/feedback.mdx"}

0 comments on commit 0cce8e5

Please sign in to comment.