Spacing

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 `src/codex-base.json` Refers to `dimension.0`
spacing-12	`2px` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.12` Refers to `unit.system`
spacing-25	`4px` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.25` Refers to `unit.system`
spacing-30	`5px` 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-35	`6px` 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-50	`8px` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.50` Refers to `unit.system`
spacing-75	`12px` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.75` Refers to `unit.system`
spacing-100	`16px` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.100` Refers to `unit.system`
spacing-125	`20px` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.125` Refers to `unit.system`
spacing-150	`24px` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.150` Refers to `unit.system`
spacing-200	`32px` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.200` Refers to `unit.system`
spacing-250	`40px` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.250` Refers to `unit.system`
spacing-300	`48px` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.300` Refers to `unit.system`
spacing-400	`64px` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.400` Refers to `unit.system`
spacing-half	`50%` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.half` From here on, spacing tokens which are used for positioning values.
spacing-full	`100%` Foo Bar Defined in `src/codex-base.json` Refers to `dimension.full`

Padding

padding category design tokens are deprecated and only spacing tokens should be used. They are here for backwards compatibility with WikimediaUI Base uses.

Name	Value
padding-base deprecated	`4px 12px` Defined in `src/codex-base.json` Refers to `padding.vertical.base` Refers to `padding.horizontal.base` Deprecated: Use `spacing-25 spacing-75` instead.
padding-horizontal-base deprecated	`12px` Defined in `src/codex-base.json` Refers to `dimension.75` Refers to `unit.system` Deprecated: Use `spacing-75` instead.
padding-horizontal-input-text deprecated	`8px` Defined in `src/codex-components.json` Refers to `dimension.50` Refers to `unit.system` Deprecated: Legacy padding for use in non-Codex products. Use `spacing-50` instead.
padding-vertical-base deprecated	`4px` Defined in `src/codex-base.json` Refers to `dimension.25` Refers to `unit.system` Deprecated: Use `spacing-25` instead.
padding-vertical-menu deprecated	`calc( 4px + 1px )` Defined in `src/codex-components.json` Refers to `dimension.25` Refers to `unit.system` Refers to `border-width.base` Note, that we need to rely on `calc()` for cross-stylesheet format output. Not perfectly aligned to current basic browser support. Deprecated: Legacy padding for use in non-Codex products.
padding-input-text deprecated	`4px 8px` Defined in `src/codex-components.json` Refers to `padding.vertical.base` Refers to `padding.horizontal.input-text` Deprecated: Legacy padding for use in non-Codex products. Use `spacing-25 spacing-50` instead.

Spacing #

Padding #

Spacing

Padding