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
Name	Value
`size-0`	`0` `dimension.0`
`size-6`	`0.0625rem` `dimension.6`
`size-12`	`0.125rem` `dimension.12`
`size-25`	`0.25rem` `dimension.25`
`size-50`	`0.5rem` `dimension.50`
`size-75`	`0.75rem` `dimension.75`
`size-100`	`1rem` `dimension.100`
`size-125`	`1.25rem` `dimension.125`
`size-150`	`1.5rem` `dimension.150`
`size-200`	`2rem` `dimension.200`
`size-250`	`2.5rem` `dimension.250`
`size-275`	`2.75rem` `dimension.275`
`size-300`	`3rem` `dimension.300`
`size-400`	`4rem` `dimension.400`
`size-800`	`8rem` `dimension.800`
`size-1600`	`16rem` `dimension.1600`
`size-2400`	`24rem` `dimension.2400`
`size-2800`	`28rem` `dimension.2800`
`size-3200`	`32rem` `dimension.3200`
`size-4000`	`40rem` `dimension.4000`
`size-5600`	`56rem` `dimension.5600`
`size-viewport-width-full`	`100vw` `dimension.viewport.width-full`
`size-viewport-height-full`	`100vh` `dimension.viewport.height-full`
`size-absolute-1`	`1px` `dimension.absolute.1`
`size-absolute-9999`	`9999px` `dimension.absolute.9999`
`size-third`	`33.33%` `dimension.third`
`size-half`	`50%` `dimension.half`
`size-full`	`100%` `dimension.full`
`size-double`	`200%` `dimension.double`
`size-search-figure` Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability.	`2.5rem` `dimension.250`
`size-icon-x-small`	`0.75rem` `dimension.75`
`size-icon-small`	`1rem` `dimension.100`
`size-icon-medium`	`1.25rem` `dimension.125`
`size-tooltip`	`max-content`

Minimum size

List of design token names, values and metadata for
Name	Value
`min-size-interactive-pointer`	`32px` `dimension.200`
`min-size-interactive-touch`	`44px` `dimension.275`
`min-size-search-figure` Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability.	`40px` `dimension.250`
`min-size-icon-x-small`	`12px` `dimension.75`
`min-size-icon-small`	`16px` `dimension.100`
`min-size-icon-medium`	`20px` `dimension.125`
`min-size-input-binary`	`20px` `dimension.125`
`min-size-toggle-switch-grip`	`20px` `dimension.125`

List of design token names, values and metadata for width
Name	Value
`max-width-base`	`none` `max-width.100`
`max-width-button` Note, that this is a slight amendment from WikimediaUI Base from `28.75em` = `460px` to `448px` – `dimension.2800`	`28rem` `dimension.2800`