Codex
On this page

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
NameValue
spacing-00
Foo Bar

Defined in src/codex-base.json

Refers to dimension.0

spacing-122px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.12

Refers to unit.system

spacing-254px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.25

Refers to unit.system

spacing-305px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.30

Refers to unit.system

This token is an exception to the scale. Used as vertical `padding` in inputs and controls to achieve the default 32px component height.

spacing-356px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.35

Refers to unit.system

This token is an exception to the scale. Used as `padding` of the ToggleSwitch component.

spacing-508px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.50

Refers to unit.system

spacing-7512px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.75

Refers to unit.system

spacing-10016px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.100

Refers to unit.system

spacing-12520px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.125

Refers to unit.system

spacing-15024px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.150

Refers to unit.system

spacing-20032px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.200

Refers to unit.system

spacing-25040px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.250

Refers to unit.system

spacing-30048px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.300

Refers to unit.system

spacing-40064px
Foo Bar

Defined in src/codex-base.json

Refers to dimension.400

Refers to unit.system

spacing-half50%
Foo Bar

Defined in src/codex-base.json

Refers to dimension.half

From here on, spacing tokens which are used for positioning values.

spacing-full100%
Foo Bar

Defined in src/codex-base.json

Refers to dimension.full

spacing-horizontal-button12px - 1px
Foo Bar

Defined in src/codex-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-only6px - 1px
Foo Bar

Defined in src/codex-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-large16px - 1px
Foo Bar

Defined in src/codex-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-iconscalc( 8px * 2 + 1em )
Foo Bar

Defined in src/codex-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-figure12px
Foo Bar

Defined in src/codex-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-iconcalc( 12px + ( 40px - 20px ) / 2 )
Foo Bar

Defined in src/codex-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-additioncalc( ( 12px + 40px ) - ( 20px + 8px ) )
Foo Bar

Defined in src/codex-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.)

Deprecated token aliases ​

WARNING

The tokens below are not available in Codex. There are only available as deprecated aliases in WikimediaUI Base.

List of design token names, values and metadata for
NameValue
padding-base deprecated 4px 12px
Foo Bar

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to spacing.25

Refers to spacing.75

Deprecated: Use `spacing-25 spacing-75` instead.

padding-horizontal-base deprecated 12px
Foo Bar

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to spacing.75

Deprecated: Use `spacing-75` instead.

padding-horizontal-input-text deprecated 8px
Foo Bar

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to spacing.50

Deprecated: Use `spacing-50` instead.

padding-vertical-base deprecated 4px
Foo Bar

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to spacing.25

Deprecated: Use `spacing-25` instead.

padding-input-text deprecated 4px 8px
Foo Bar

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to spacing.25

Refers to spacing.50

Deprecated: Legacy padding for use in non-Codex products. Use `spacing-25 spacing-50` instead.