Size
Size refers to the restricted dimensions provided within the design system, such as an element's height and/or width.
| Token | Dimension | High Density (HD) | Medium (MD) | Low (LD) | Touch (TD) |
|---|---|---|---|---|---|
--salt-size-base | Height | 20 | 28 | 36 | 44 |
--salt-size-selectable | Height and width | 12 | 14 | 16 | 18 |
--salt-size-icon | Height and width | 12 | 12 | 14 | 16 |
--salt-size-adornment | Height and width | 6 | 8 | 10 | 12 |
--salt-size-bar | Height or width | 2 | 4 | 6 | 8 |
--salt-size-indicator | Height or width | 1 | 2 | 3 | 4 |
--salt-size-border | Height or width | 1 | 1 | 1 | 1 |
salt-size-base is the fixed default height for base components in each density within the design system. It ensures the consistent alignment of components in horizontal layouts, as well as the vertical alignments of the text values within them. This means the text within each component sits on the same baseline.
Using size-base, in conjunction with a spacing token above and below, creates a consistent height for components that can nest a --salt-size-base component within them. This provides further standardized heights across the design system.
The following example shows how components can use --salt-size-base and --salt-spacing-50 (top and bottom) to define the height of a component or stackable element, such as a Data Grid row. The height allows a size-base component to be contained within it, but it is not dependent on the component to force the height.
--salt-size-selectable is used to set the dimensions of selectable components, including Radio Button, Checkbox, and Switch.
--salt-size-icon controls the size of all icons throughout the design system. Icons are designed to be displayed no smaller than 12px x 12px; therefore this is set as a minimum measurement within the token's values. The result of this restriction can be seen in the Size tokens table. Following the ramp, HD should be 10px. However, the minimum size fixes it at 12px.
The size of an icon can be changed within a density using the Scale Foundation. For HD, the scale is based on the expected value rather than the minimum. This means an HD icon starts at 12px. When scaled up (x2 its default size) it will be 20px rather than 24px, at x3 its default it will be 30px, etc.
The Scale Foundation provides an example of --salt-size-icon scaling, including specific values for each density.
You can find out more about icons and how to use them in the Iconography Foundation.
The purpose of --salt-size-adornment is to set the size of a discrete element within an editable field or cell intended to indicate a state, such as an error or warning.
Bar is used to control the thickness of an accent bar, either in vertical or horizontal orientations.
--salt-size-indicator controls the thickness of an indicator, like on Tabs or Navigation Item.
Unlike other sizes, --salt-size-border is a fixed dimension regardless of density. It controls the size of all borders and separators across the design system.
The Salt foundations are still in progress, and we'd appreciate your thoughts and feedback. Please contact us if you have any comments or questions.