CodexSpacing
spacing design tokens are applied in padding and margin properties. They are used to create a consistent spacing within and between components.
| Name | Value |
|---|---|
| spacing-0 | 0 Foo Bar Defined in Refers to |
| spacing-12 | 2px Foo Bar Defined in Refers to Refers to |
| spacing-25 | 4px Foo Bar Defined in Refers to Refers to |
| spacing-30 | 5px Foo Bar Defined in Refers to Refers to 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 Refers to Refers to This token is an exception to the scale. Used as `padding` of the ToggleSwitch component. |
| spacing-50 | 8px Foo Bar Defined in Refers to Refers to |
| spacing-75 | 12px Foo Bar Defined in Refers to Refers to |
| spacing-100 | 16px Foo Bar Defined in Refers to Refers to |
| spacing-125 | 20px Foo Bar Defined in Refers to Refers to |
| spacing-150 | 24px Foo Bar Defined in Refers to Refers to |
| spacing-200 | 32px Foo Bar Defined in Refers to Refers to |
| spacing-250 | 40px Foo Bar Defined in Refers to Refers to |
| spacing-300 | 48px Foo Bar Defined in Refers to Refers to |
| spacing-400 | 64px Foo Bar Defined in Refers to Refers to |
| spacing-half | 50% Foo Bar Defined in Refers to From here on, spacing tokens which are used for positioning values. |
| spacing-full | 100% Foo Bar Defined in Refers to |
| spacing-horizontal-button | 12px - 1px Defined in Refers to Refers to Padding should equal 12px of spacing minus the width of the border |
| spacing-horizontal-button-icon-only | 6px - 1px Defined in Refers to Refers to Padding should equal 6px of spacing minus the width of the border |
| spacing-horizontal-button-large | 16px - 1px Defined in Refers to Refers to Padding should equal 16px of spacing minus the width of the border |
| spacing-horizontal-input-text-two-end-icons | calc( 8px * 2 + 1em + 1px ) Defined in Refers to Refers to Refers to 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 Refers to 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 ) Defined in Refers to Refers to Refers to 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 Refers to Refers to Refers to Refers to 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.) |
Deprecated token aliases
WARNING
The tokens below are not available in Codex. There are only available as deprecated aliases in WikimediaUI Base.
| Name | Value |
|---|---|
| padding-base deprecated | 4px 12px Foo Bar Defined in Refers to Refers to Deprecated: Use `spacing-25 spacing-75` instead. |
| padding-horizontal-base deprecated | 12px Foo Bar Defined in Refers to Deprecated: Use `spacing-75` instead. |
| padding-horizontal-input-text deprecated | 8px Foo Bar Defined in Refers to Deprecated: Use `spacing-50` instead. |
| padding-vertical-base deprecated | 4px Foo Bar Defined in Refers to Deprecated: Use `spacing-25` instead. |
| padding-input-text deprecated | 4px 8px Foo Bar Defined in Refers to Refers to Deprecated: Legacy padding for use in non-Codex products. Use `spacing-25 spacing-50` instead. |