Sizing

Base

All sizing values, including font sizes, are calculated from a single base integer and converted to pixel or rem string values.

euiTheme.base = 16 token

This base integer sets the scale for the entire theme. You can use calculations on top of the base value, just be sure to append the px unit to the end.

padding: 32px

✄𐘗
tsx code block:
✄𐘗css`
  padding: ${euiTheme.base * 2}px;
`

Scale

euiTheme.size[size] token

Use the named keys as as much as possible.

padding: 32px

✄𐘗
tsx code block:
✄𐘗css`
  padding: ${euiTheme.size.xl};
`

calc() CSS function

When doing calculations on top of the named key values, you have to use the CSS calc() function because the value that is returned is a string value with the appended unit.

padding: calc(16px * 2)

✄𐘗
tsx code block:
✄𐘗css`
  padding: calc(${euiTheme.size.base} * 2);
`

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
size.xxs ↦	size.xxs ↦	Value 2px ↵
size.xs ↦	size.xs ↦	Value 4px ↵
size.s ↦	size.s ↦	Value 8px ↵
size.m ↦	size.m ↦	Value 12px ↵
size.base ↦	size.base ↦	Value 16px ↵
size.l ↦	size.l ↦	Value 24px ↵
size.xl ↦	size.xl ↦	Value 32px ↵
size.xxl ↦	size.xxl ↦	Value 40px ↵
size.xxxl ↦	size.xxxl ↦	Value 48px ↵
size.xxxxl ↦	size.xxxxl ↦	Value 64px ↵

𐘂𐘂