Radius Tokens
The following tokens define corner rounding (border-radius) values across the design system. Whether you need sharp edges or gentle curves, consistent radius tokens keep corners uniform and visually appealing in every component.
| JS Usage | CSS Token | Value | Preview |
|---|---|---|---|
tokens.radius[0] | --tapsi-radius-0 | 0 | |
tokens.radius[1] | --tapsi-radius-1 | 0.125rem | |
tokens.radius[2] | --tapsi-radius-2 | 0.25rem | |
tokens.radius[3] | --tapsi-radius-3 | 0.5rem | |
tokens.radius[4] | --tapsi-radius-4 | 0.75rem | |
tokens.radius[5] | --tapsi-radius-5 | 1rem | |
tokens.radius[6] | --tapsi-radius-6 | 1.25rem | |
tokens.radius[7] | --tapsi-radius-7 | 1.5rem | |
tokens.radius.full | --tapsi-radius-full | 999px |