Size

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

Size

TIP

Some size design tokens, e.g. size-icon are referencing CSS custom properties rather than raw values. This means that the tokens will not work in various preprocessor functions (like Less unit()) and may require relying on CSS calc() function for basic calculations.

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-1200	12rem dimension.1200
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-content-min	min-content dimension.content.min
size-content-fit	fit-content dimension.content.fit
size-content-max	max-content dimension.content.max
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	calc( 1rem - 4px ) font-size.medium
size-icon-small	1rem font-size.medium
size-icon-medium	calc( 1rem + 4px ) font-size.medium
size-toggle-switch-grip	calc( 1rem * 1.25 ) font-size.medium

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	10px dimension.65
min-size-icon-small	14px dimension.90
min-size-icon-medium	18px dimension.110
min-size-input-binary	20px dimension.125
min-size-input-chip-clear-button	20px dimension.125
min-size-toggle-switch-grip	18px dimension.110

Maximum width

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