Codex
On this page

Size ​

Size ​

The size tokens are used to define the size of elements, applied for example on the width and height properties.

List of design token names, values and metadata for
NameValue
size-00

Defined in src/codex-base.json

Refers to dimension.0

size-60.0625em

Defined in src/codex-base.json

Refers to dimension.6

Refers to unit.system

size-120.125em

Defined in src/codex-base.json

Refers to dimension.12

Refers to unit.system

size-250.25em

Defined in src/codex-base.json

Refers to dimension.25

Refers to unit.system

size-500.5em

Defined in src/codex-base.json

Refers to dimension.50

Refers to unit.system

size-750.75em

Defined in src/codex-base.json

Refers to dimension.75

Refers to unit.system

size-1001em

Defined in src/codex-base.json

Refers to dimension.100

Refers to unit.system

size-1251.25em

Defined in src/codex-base.json

Refers to dimension.125

Refers to unit.system

size-1501.5em

Defined in src/codex-base.json

Refers to dimension.150

Refers to unit.system

size-2002em

Defined in src/codex-base.json

Refers to dimension.200

Refers to unit.system

size-2502.5em

Defined in src/codex-base.json

Refers to dimension.250

Refers to unit.system

size-2752.75em

Defined in src/codex-base.json

Refers to dimension.275

Refers to unit.system

size-3003em

Defined in src/codex-base.json

Refers to dimension.300

Refers to unit.system

size-4004em

Defined in src/codex-base.json

Refers to dimension.400

Refers to unit.system

size-8008em

Defined in src/codex-base.json

Refers to dimension.800

Refers to unit.system

size-160016em

Defined in src/codex-base.json

Refers to dimension.1600

Refers to unit.system

size-240024em

Defined in src/codex-base.json

Refers to dimension.2400

Refers to unit.system

size-280028em

Defined in src/codex-base.json

Refers to dimension.2800

Refers to unit.system

size-320032em

Defined in src/codex-base.json

Refers to dimension.3200

Refers to unit.system

size-560056em

Defined in src/codex-base.json

Refers to dimension.5600

Refers to unit.system

size-absolute-11px

Defined in src/codex-base.json

Refers to dimension.absolute.1

size-absolute-99999999px

Defined in src/codex-base.json

Refers to dimension.absolute.9999

size-third33.33%

Defined in src/codex-base.json

Refers to dimension.third

size-half50%

Defined in src/codex-base.json

Refers to dimension.half

size-full100%

Defined in src/codex-base.json

Refers to dimension.full

size-double200%

Defined in src/codex-base.json

Refers to dimension.double

size-viewport-width-full100vw

Defined in src/codex-base.json

Refers to dimension.viewport.width-full

size-viewport-height-full100vh

Defined in src/codex-base.json

Refers to dimension.viewport.height-full

size-search-figure2.5em

Defined in src/codex-base.json

Refers to dimension.250

Refers to unit.system

Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability.

size-icon-x-small0.75em

Defined in src/codex-components.json

Refers to dimension.75

Refers to unit.system

size-icon-small1em

Defined in src/codex-components.json

Refers to dimension.100

Refers to unit.system

size-icon-medium1.25em

Defined in src/codex-components.json

Refers to dimension.125

Refers to unit.system

Minimum size ​

List of design token names, values and metadata for
NameValue
min-size-interactive-pointer32px

Defined in src/codex-base.json

Refers to dimension.200

Refers to unit.system

min-size-interactive-touch44px

Defined in src/codex-base.json

Refers to dimension.275

Refers to unit.system

min-size-search-figure40px

Defined in src/codex-base.json

Refers to dimension.250

Refers to unit.system

Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability.

min-size-icon-x-small12px

Defined in src/codex-components.json

Refers to dimension.75

Refers to unit.system

min-size-icon-small16px

Defined in src/codex-components.json

Refers to dimension.100

Refers to unit.system

min-size-icon-medium20px

Defined in src/codex-components.json

Refers to dimension.125

Refers to unit.system

min-size-input-binary20px

Defined in src/codex-components.json

Refers to dimension.125

Refers to unit.system

min-size-toggle-switch-grip20px

Defined in src/codex-components.json

Refers to dimension.125

Refers to unit.system

Maximum width ​

List of design token names, values and metadata for width
NameValue
max-width-basenone

Defined in src/codex-base.json

Refers to max-width.100

max-width-button28em

Defined in src/codex-components.json

Refers to dimension.2800

Refers to unit.system

Note, that this is a slight amendment from WikimediaUI Base from `28.75em` = `460px` to `448px` – `dimension.2800`

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
size-base deprecated 32px

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

Refers to size.200

Deprecated: Use `size-200` instead.

size-icon deprecated 20px

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

Refers to size.icon-medium

Deprecated: Use `size-icon-medium` instead.

size-indicator deprecated 12px

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

Refers to size.icon-x-small

Deprecated: Use `size-icon-x-small` instead.

List of design token names, values and metadata for
NameValue
min-size-base deprecated 32px

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

Refers to min-size.interactive-pointer

Deprecated: Use `min-size-interactive-pointer`/`min-size-interactive-touch` instead. (use `min-size-interactive-pointer` instead)

min-size-icon deprecated 20px

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

Refers to min-size.icon-medium

Deprecated: Use `min-size-icon-medium` instead.

min-size-indicator deprecated 12px

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

Refers to min-size.icon-x-small

Deprecated: Use `min-size-icon-x-small` instead.