Spacing

spacing design tokens are applied in padding and margin properties. They are used to create a consistent spacing within and between components.

List of design token names, values and metadata for
Name	Value
spacing-0	`0` Foo Bar Defined in `src/application.json` Refers to `dimension.0`
spacing-12	`2px` Foo Bar Defined in `src/application.json` Refers to `dimension.12`
spacing-25	`4px` Foo Bar Defined in `src/application.json` Refers to `dimension.25`
spacing-30	`5px` Foo Bar Defined in `src/application.json` Refers to `dimension.30` This token is an exception to the scale. Used as vertical `padding` in inputs and controls to achieve the default 32px component height.
spacing-35	`6px` Foo Bar Defined in `src/application.json` Refers to `dimension.35` This token is an exception to the scale. Used as `padding` of the ToggleSwitch component.
spacing-50	`8px` Foo Bar Defined in `src/application.json` Refers to `dimension.50`
spacing-75	`12px` Foo Bar Defined in `src/application.json` Refers to `dimension.75`
spacing-100	`16px` Foo Bar Defined in `src/application.json` Refers to `dimension.100`
spacing-125	`20px` Foo Bar Defined in `src/application.json` Refers to `dimension.125`
spacing-150	`24px` Foo Bar Defined in `src/application.json` Refers to `dimension.150`
spacing-200	`32px` Foo Bar Defined in `src/application.json` Refers to `dimension.200`
spacing-250	`40px` Foo Bar Defined in `src/application.json` Refers to `dimension.250`
spacing-300	`48px` Foo Bar Defined in `src/application.json` Refers to `dimension.300`
spacing-400	`64px` Foo Bar Defined in `src/application.json` Refers to `dimension.400`
spacing-half	`50%` Foo Bar Defined in `src/application.json` Refers to `dimension.half` From here on, spacing tokens which are used for positioning values.
spacing-full	`100%` Foo Bar Defined in `src/application.json` Refers to `dimension.full`
spacing-horizontal-button	`12px - 1px` Foo Bar Defined in `src/components.json` Refers to `spacing.75` Refers to `border-width.base` Padding should equal 12px of spacing minus the width of the border
spacing-horizontal-button-icon-only	`6px - 1px` Foo Bar Defined in `src/components.json` Refers to `spacing.35` Refers to `border-width.base` Padding should equal 6px of spacing minus the width of the border
spacing-horizontal-button-large	`16px - 1px` Foo Bar Defined in `src/components.json` Refers to `spacing.100` Refers to `border-width.base` Padding should equal 16px of spacing minus the width of the border
spacing-horizontal-input-text-two-end-icons	`calc( 8px * 2 + 1rem )` Foo Bar Defined in `src/components.json` Refers to `spacing.50` Refers to `size.icon-small` Rely on `calc()` to make token output usable in all formats. When there are two end icons, (i.e. a clear icon and an end icon), we need to double the horizontal padding and account for the size of the extra icon. This token can be used to calculate the horizontal position of the clear icon and the padding-end of the text input.
spacing-start-typeahead-search-figure	`12px` Foo Bar Defined in `src/components.json` Refers to `spacing.75` The amount of space between the TypeaheadSearch figure's parent component and the TypeaheadSearch figure (input icon container, search result thumbnail, and footer icon container). We want this space to be uniform so that the figures vertically line up nicely. We use the same horizontal padding as the MenuItem.
spacing-start-typeahead-search-icon	`calc( 12px + ( 40px - 20px ) / 2 )` Foo Bar Defined in `src/components.json` Refers to `spacing.start-typeahead-search-figure` Refers to `min-size.search-figure` Refers to `min-size.icon-medium` The padding required for the icon to center align with the menu item thumbnail. We calculate the difference in size and add it to the expected spacing.
spacing-typeahead-search-focus-addition	`calc( ( 12px + 40px ) - ( 20px + 8px ) )` Foo Bar Defined in `src/components.json` Refers to `spacing.start-typeahead-search-figure` Refers to `min-size.search-figure` Refers to `min-size.icon-medium` Refers to `spacing.50` The amount the width of the input increases when it is focused to allow for the extra spacing around the search figures. The caret position should remain static. This calculates the padding-left of the input when expanded minus the padding-left of the input when not expanded. (Note that both padding values actually include `@spacing-50` as well, but it was left out of the calculation for simplicity's sake.)

Spacing ​

Spacing