Size

An overview of all available size CSS variables

Base

CSS variable	Output value	Source value
`--base-size-negative-48`	-3rem	-48px
`--base-size-negative-44`	-2.75rem	-44px
`--base-size-negative-40`	-2.5rem	-40px
`--base-size-negative-36`	-2.25rem	-36px
`--base-size-negative-32`	-2rem	-32px
`--base-size-negative-28`	-1.75rem	-28px
`--base-size-negative-24`	-1.5rem	-24px
`--base-size-negative-20`	-1.25rem	-20px
`--base-size-negative-16`	-1rem	-16px
`--base-size-negative-12`	-0.75rem	-12px
`--base-size-negative-8`	-0.5rem	-8px
`--base-size-negative-6`	-0.375rem	-6px
`--base-size-negative-4`	-0.25rem	-4px
`--base-size-negative-2`	-0.125rem	-2px
`--base-size-2`	0.125rem	2px
`--base-size-4`	0.25rem	4px
`--base-size-6`	0.375rem	6px
`--base-size-8`	0.5rem	8px
`--base-size-12`	0.75rem	12px
`--base-size-16`	1rem	16px
`--base-size-20`	1.25rem	20px
`--base-size-24`	1.5rem	24px
`--base-size-28`	1.75rem	28px
`--base-size-32`	2rem	32px
`--base-size-36`	2.25rem	36px
`--base-size-40`	2.5rem	40px
`--base-size-44`	2.75rem	44px
`--base-size-48`	3rem	48px
`--base-size-64`	4rem	64px
`--base-size-80`	5rem	80px
`--base-size-96`	6rem	96px
`--base-size-112`	7rem	112px
`--base-size-128`	8rem	128px

CSS variable	Output value	Source value
`--boxShadow-thick`	inset 0 0 0 0.125rem	inset 0 0 0 {borderWidth.thick}
`--boxShadow-thicker`	inset 0 0 0 0.25rem	inset 0 0 0 {borderWidth.thicker}
`--boxShadow-thin`	inset 0 0 0 0.0625rem	inset 0 0 0 {borderWidth.thin}
`--borderWidth-default`	0.0625rem	{borderWidth.thin}
`--borderWidth-thick`	0.125rem	2px
`--borderWidth-thicker`	0.25rem	4px
`--borderWidth-thin`	0.0625rem	1px

CSS variable	Output value	Source value
`--borderRadius-default`	0.375rem	{borderRadius.medium}
`--borderRadius-full`	624.9375rem	9999px
`--borderRadius-large`	0.75rem	12px
`--borderRadius-medium`	0.375rem	6px
`--borderRadius-small`	0.1875rem	3px

Sample	CSS variable	Output value	Source value
	`--outline-focus-offset`	-0.125rem	{focus.outline-offset}
	`--outline-focus-width`	0.125rem	{focus.outline-width}

CSS variable	Output value
`--viewportRange-landscape`	(orientation: landscape)
`--viewportRange-narrow`	(max-width: calc(48rem - 0.02px))
`--viewportRange-narrowLandscape`	((max-width: calc(63.25rem - 0.02px)) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))
`--viewportRange-portrait`	(orientation: portrait)
`--viewportRange-regular`	(min-width: 48rem)
`--viewportRange-wide`	(min-width: 87.5rem)

CSS variable	Output value	Source value
`--stack-gap-condensed`	0.5rem	{base.size.8}
`--stack-gap-normal`	1rem	{base.size.16}
`--stack-gap-spacious`	1.5rem	{base.size.24}
`--stack-padding-condensed`	0.5rem	{base.size.8}
`--stack-padding-normal`	1rem	{base.size.16}
`--stack-padding-spacious`	1.5rem	{base.size.24}

CSS variable	Output value	Source value
`--controlStack-large-gap-auto`	0.5rem	{base.size.8}
`--controlStack-large-gap-condensed`	0.5rem	{base.size.8}
`--controlStack-large-gap-spacious`	0.75rem	{base.size.12}
`--controlStack-medium-gap-auto`	0.5rem	{base.size.8}
`--controlStack-medium-gap-condensed`	0.5rem	{base.size.8}
`--controlStack-medium-gap-spacious`	0.75rem	{base.size.12}
`--controlStack-small-gap-auto`	0.5rem	{base.size.8}
`--controlStack-small-gap-condensed`	0.5rem	{base.size.8}
`--controlStack-small-gap-spacious`	1rem	{base.size.16}

CSS variable	Pointer: coarse	Pointer: fine
`--controlStack-large-gap-auto`	0.75rem	0.5rem
`--controlStack-medium-gap-auto`	0.75rem	0.5rem
`--controlStack-small-gap-auto`	1rem	0.5rem

Sample	CSS variable	Output value	Source value
label	`--control-xsmall-gap`	0.25rem	{base.size.4}
label	`--control-xsmall-paddingBlock`	0.125rem	2px
label	`--control-xsmall-paddingInline-condensed`	0.25rem	{base.size.4}
label	`--control-xsmall-paddingInline-normal`	0.5rem	{base.size.8}
label	`--control-xsmall-paddingInline-spacious`	0.75rem	{base.size.12}
label	`--control-xsmall-size`	1.5rem	{base.size.24}

Sample	CSS variable	Output value	Source value
label	`--control-small-gap`	0.25rem	{base.size.4}
label	`--control-small-paddingBlock`	0.25rem	{base.size.4}
label	`--control-small-paddingInline-condensed`	0.5rem	{base.size.8}
label	`--control-small-paddingInline-normal`	0.75rem	{base.size.12}
label	`--control-small-paddingInline-spacious`	1rem	{base.size.16}
label	`--control-small-size`	1.75rem	{base.size.28}

Sample	CSS variable	Output value	Source value
label	`--control-medium-gap`	0.5rem	{base.size.8}
label	`--control-medium-paddingBlock`	0.375rem	6px
label	`--control-medium-paddingInline-condensed`	0.5rem	{base.size.8}
label	`--control-medium-paddingInline-normal`	0.75rem	{base.size.12}
label	`--control-medium-paddingInline-spacious`	1rem	{base.size.16}
label	`--control-medium-size`	2rem	{base.size.32}

Sample	CSS variable	Output value	Source value
label	`--control-large-gap`	0.5rem	{base.size.8}
label	`--control-large-paddingBlock`	0.625rem	10px
label	`--control-large-paddingInline-condensed`	0.5rem	{base.size.8}
label	`--control-large-paddingInline-normal`	0.75rem	{base.size.12}
label	`--control-large-paddingInline-spacious`	1rem	{base.size.16}
label	`--control-large-size`	2.5rem	{base.size.40}

Sample	CSS variable	Output value	Source value
label	`--control-xlarge-gap`	0.5rem	{base.size.8}
label	`--control-xlarge-paddingBlock`	0.875rem	14px
label	`--control-xlarge-paddingInline-condensed`	0.5rem	{base.size.8}
label	`--control-xlarge-paddingInline-normal`	0.75rem	{base.size.12}
label	`--control-xlarge-paddingInline-spacious`	1rem	{base.size.16}
label	`--control-xlarge-size`	3rem	{base.size.48}

CSS variable	Output value	Source value
`--overlay-borderRadius`	0.375rem	{borderRadius.medium}
`--overlay-height-large`	27rem	432px
`--overlay-height-medium`	20rem	320px
`--overlay-height-small`	16rem	256px
`--overlay-height-xlarge`	37.5rem	600px
`--overlay-offset`	0.25rem	4px
`--overlay-padding-condensed`	0.5rem	{base.size.8}
`--overlay-padding-normal`	1rem	{base.size.16}
`--overlay-paddingBlock-condensed`	0.25rem	{base.size.4}
`--overlay-paddingBlock-normal`	0.75rem	{base.size.12}
`--overlay-width-large`	40rem	640px
`--overlay-width-medium`	30rem	480px
`--overlay-width-small`	20rem	320px
`--overlay-width-xlarge`	60rem	960px
`--overlay-width-xsmall`	12rem	192px