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.)