Spacing Tokens
The following tokens offer a scalable system for margins and padding. Applying these tokens helps maintain balanced layouts, reinforces visual rhythm, and simplifies the alignment of elements in your UI.
| JS Usage | CSS Token | Value | Preview |
|---|---|---|---|
tokens.spacing[0] | --tapsi-spacing-0 | 0 | |
tokens.spacing[1] | --tapsi-spacing-1 | 0.0625rem | |
tokens.spacing[2] | --tapsi-spacing-2 | 0.125rem | |
tokens.spacing[3] | --tapsi-spacing-3 | 0.25rem | |
tokens.spacing[4] | --tapsi-spacing-4 | 0.5rem | |
tokens.spacing[5] | --tapsi-spacing-5 | 0.75rem | |
tokens.spacing[6] | --tapsi-spacing-6 | 1rem | |
tokens.spacing[7] | --tapsi-spacing-7 | 1.25rem | |
tokens.spacing[8] | --tapsi-spacing-8 | 1.5rem | |
tokens.spacing[9] | --tapsi-spacing-9 | 2rem | |
tokens.spacing[10] | --tapsi-spacing-10 | 2.5rem | |
tokens.spacing[11] | --tapsi-spacing-11 | 3rem | |
tokens.spacing[12] | --tapsi-spacing-12 | 4rem | |
tokens.spacing[13] | --tapsi-spacing-13 | 5rem | |
tokens.spacing[14] | --tapsi-spacing-14 | 6rem | |
tokens.spacing["3-1"] | --tapsi-spacing-3-1 | 0.375rem |