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

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

Minimum size

List of design token names, values and metadata for

Name	Value
min-size-interactive-pointer	32px Defined in src/application.json Refers to dimension.200
min-size-interactive-touch	44px Defined in src/application.json Refers to dimension.275
min-size-search-figure	40px Defined in src/application.json Refers to dimension.250 Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability.
min-size-icon-x-small	12px Defined in src/components.json Refers to dimension.75
min-size-icon-small	16px Defined in src/components.json Refers to dimension.100
min-size-icon-medium	20px Defined in src/components.json Refers to dimension.125
min-size-input-binary	20px Defined in src/components.json Refers to dimension.125
min-size-toggle-switch-grip	20px Defined in src/components.json Refers to dimension.125

Maximum width

List of design token names, values and metadata for width

Name	Value
max-width-base	none Defined in src/application.json Refers to max-width.100
max-width-button	28rem Defined in src/components.json Refers to dimension.2800 Note, that this is a slight amendment from WikimediaUI Base from `28.75em` = `460px` to `448px` – `dimension.2800`