Migrating from px to rem

[josh-bagwell]

In Canvas Kit v10, we will be deprecating spaceNumbers which mapped to pixel values in favor of our rem based space tokens.

The table below shows the deprecated values:

@deprecated spaceNumbers pixel value	@deprecated spaceNumbers token
0	zero
4px	xxxs
8px	xxs
12px	xs
16px	s
24px	m
32px	l
40px	xl
64px	xxl
80px	xxxl

How to use space token instead of deprecated spaceNumbers

space token maps to to rem values,

space token rem value	space token
"0"	zero
"0.25rem"	xxxs
"0.5rem"	xxs
"0.75rem"	xs
"1rem"	s
"1.5rem"	m
"2rem"	l
"2.5rem"	xl
"4rem"	xxl
"5rem"	xxxl

Note: The value of space is a string. In most cases you can just use this value for styling.

{
   paddingInlineStart: space.xs
}

Example using space with CSS Calc instead of deprecated spaceNumbers.

  // With deprecated `spaceNumbers`
{
  paddingLeft: spaceNumbers.xl + 2 // 42px
 }

// With `rem` based `space` tokens
{
padding: `calc(${space.xl} + 2px)` // 42px
}

This will be important to keep in mind if you're using spaceNumbers with calculations currently and then post migration to rem.