Size

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

Name	Value
size-0	`0` Defined in `src/codex-base.json` Refers to `dimension.0`
size-6	`1px` Defined in `src/codex-base.json` Refers to `dimension.6` Refers to `unit.system`
size-12	`2px` Defined in `src/codex-base.json` Refers to `dimension.12` Refers to `unit.system`
size-25	`4px` Defined in `src/codex-base.json` Refers to `dimension.25` Refers to `unit.system`
size-50	`8px` Defined in `src/codex-base.json` Refers to `dimension.50` Refers to `unit.system`
size-75	`12px` Defined in `src/codex-base.json` Refers to `dimension.75` Refers to `unit.system`
size-100	`16px` Defined in `src/codex-base.json` Refers to `dimension.100` Refers to `unit.system`
size-125	`20px` Defined in `src/codex-base.json` Refers to `dimension.125` Refers to `unit.system`
size-150	`24px` Defined in `src/codex-base.json` Refers to `dimension.150` Refers to `unit.system`
size-200	`32px` Defined in `src/codex-base.json` Refers to `dimension.200` Refers to `unit.system`
size-250	`40px` Defined in `src/codex-base.json` Refers to `dimension.250` Refers to `unit.system`
size-275	`44px` Defined in `src/codex-base.json` Refers to `dimension.275` Refers to `unit.system`
size-300	`48px` Defined in `src/codex-base.json` Refers to `dimension.300` Refers to `unit.system`
size-400	`64px` Defined in `src/codex-base.json` Refers to `dimension.400` Refers to `unit.system`
size-800	`128px` Defined in `src/codex-base.json` Refers to `dimension.800` Refers to `unit.system`
size-1600	`256px` Defined in `src/codex-base.json` Refers to `dimension.1600` Refers to `unit.system`
size-2400	`384px` Defined in `src/codex-base.json` Refers to `dimension.2400` Refers to `unit.system`
size-2800	`448px` Defined in `src/codex-base.json` Refers to `dimension.2800` Refers to `unit.system`
size-3200	`512px` Defined in `src/codex-base.json` Refers to `dimension.3200` Refers to `unit.system`
size-5600	`896px` Defined in `src/codex-base.json` Refers to `dimension.5600` Refers to `unit.system`
size-absolute-1	`1px` Defined in `src/codex-base.json` Refers to `dimension.absolute-1`
size-absolute-9999	`9999px` Defined in `src/codex-base.json` Refers to `dimension.absolute-9999`
size-third	`33.33%` Defined in `src/codex-base.json` Refers to `dimension.third`
size-half	`50%` Defined in `src/codex-base.json` Refers to `dimension.half`
size-full	`100%` Defined in `src/codex-base.json` Refers to `dimension.full`
size-double	`200%` Defined in `src/codex-base.json` Refers to `dimension.double`
size-viewport-width-full	`100vw` Defined in `src/codex-base.json` Refers to `dimension.viewport.width-full`
size-viewport-height-full	`100vh` Defined in `src/codex-base.json` Refers to `dimension.viewport.height-full`
size-base deprecated	`32px` Defined in `src/codex-base.json` Refers to `dimension.200` Refers to `unit.system` Deprecated: Legacy size for use in non-Codex products. Only used in relative size in new Codex design token application.
size-icon	`20px` Defined in `src/codex-components.json` Refers to `dimension.125` Refers to `unit.system` TODO: This has to be a relative value, for accessibility reasons.
size-indicator	`12px` Defined in `src/codex-components.json` Refers to `dimension.75` Refers to `unit.system` TODO: This has to be a relative value, for accessibility reasons.

Min-size

Name Value

Name	Value
min-size-base	`32px` Defined in `src/codex-base.json` Refers to `dimension.200` Refers to `unit.system` TODO: Deprecate key and change to `min-size-component`?
min-size-icon	`20px` Defined in `src/codex-components.json` Refers to `dimension.125` Refers to `unit.system`

min-size-base

32px

Defined in src/codex-base.json

Refers to dimension.200

Refers to unit.system

TODO: Deprecate key and change to `min-size-component`?

min-size-icon

20px

Defined in src/codex-components.json

Refers to dimension.125

Refers to unit.system

Max-width

Name Value

Name	Value
max-width-base	`none` Defined in `src/codex-base.json` Refers to `max-width.100`
max-width-button	`448px` 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`

max-width-base

none

Defined in src/codex-base.json

Refers to max-width.100

max-width-button

448px

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`

Size #

Size #

Min-size #

Max-width #

Size

Size

Min-size

Max-width