Shape Tokens
Tokens that define the border radius used throughout the design system.
Shape tokens define the border radius used throughout the design system.
The --forge-shape-factor token (default 1) controls the modifier that all shape tokens scale relative to.
| Token | Value | Description | Preview |
|---|---|---|---|
--forge-shape-extra-small | 1px | The extra small border radius, for subtle rounding. | |
--forge-shape-extra-small-block-start | 1px 1px 0 0 | The extra small border radius, applied to the block start corners only. | |
--forge-shape-extra-small-block-end | 0 0 1px 1px | The extra small border radius, applied to the block end corners only. | |
--forge-shape-extra-small-inline-start | 1px 0 0 1px | The extra small border radius, applied to the inline start corners only. | |
--forge-shape-extra-small-inline-end | 0 1px 1px 0 | The extra small border radius, applied to the inline end corners only. | |
--forge-shape-small | 2px | The small border radius, for small controls and indicators. | |
--forge-shape-small-block-start | 2px 2px 0 0 | The small border radius, applied to the block start corners only. | |
--forge-shape-small-block-end | 0 0 2px 2px | The small border radius, applied to the block end corners only. | |
--forge-shape-small-inline-start | 2px 0 0 2px | The small border radius, applied to the inline start corners only. | |
--forge-shape-small-inline-end | 0 2px 2px 0 | The small border radius, applied to the inline end corners only. | |
--forge-shape-medium | 4px | The medium border radius and the most commonly used, for standard controls and containers. | |
--forge-shape-medium-block-start | 4px 4px 0 0 | The medium border radius, applied to the block start corners only. | |
--forge-shape-medium-block-end | 0 0 4px 4px | The medium border radius, applied to the block end corners only. | |
--forge-shape-medium-inline-start | 4px 0 0 4px | The medium border radius, applied to the inline start corners only. | |
--forge-shape-medium-inline-end | 0 4px 4px 0 | The medium border radius, applied to the inline end corners only. | |
--forge-shape-large | 8px | The large border radius, for larger containers and groups. | |
--forge-shape-large-block-start | 8px 8px 0 0 | The large border radius, applied to the block start corners only. | |
--forge-shape-large-block-end | 0 0 8px 8px | The large border radius, applied to the block end corners only. | |
--forge-shape-large-inline-start | 8px 0 0 8px | The large border radius, applied to the inline start corners only. | |
--forge-shape-large-inline-end | 0 8px 8px 0 | The large border radius, applied to the inline end corners only. | |
--forge-shape-extra-large | 16px | The extra large border radius, for prominent rounded containers. | |
--forge-shape-extra-large-block-start | 16px 16px 0 0 | The extra large border radius, applied to the block start corners only. | |
--forge-shape-extra-large-block-end | 0 0 16px 16px | The extra large border radius, applied to the block end corners only. | |
--forge-shape-extra-large-inline-start | 16px 0 0 16px | The extra large border radius, applied to the inline start corners only. | |
--forge-shape-extra-large-inline-end | 0 16px 16px 0 | The extra large border radius, applied to the inline end corners only. | |
--forge-shape-full | 9999px | A fully rounded (pill) border radius that follows the element height. | |
--forge-shape-round | 50% | A circular border radius, for elements that should be perfectly round. |