By default, Specify only distributes your measurements design tokens in pixels in your Notion databases.
However, you may want to update the Notion database created by Specify to customize it.
We're gonna use Notion formula to convert our px values to rem and get the following result:
Let's do it step by step.
Create a new column of type "formula"
Name it how you want (e.g., "Value (rem)") and set the formula as
concat(format(divide(toNumber(replaceAll(prop("Value"), "px", "")), 16)), "rem")
And that's it ✌️
Your formula column will automatically be updated everytime Specify updates values in the "Value" column.
What does this formula do?
How to convert "16px" to "1rem"?
Well we must do several things in the following order:
Remove the "px" part in "16px":
replaceAll(prop("Value"), "px", "")Convert "16" to a number:
toNumber(replaceAll(prop("Value"), "px", ""))Divide
16by16(our opinionated base rem value) to get aremvalue:divide(toNumber(replaceAll(prop("Value"), "px", "")), 16)Convert our new rem value (in our case 16/16 =
1) to a string:format(divide(toNumber(replaceAll(prop("Value"), "px", "")), 16))Add the "rem" part to our new rem value:
concat(format(divide(toNumber(replaceAll(prop("Value"), "px", "")), 16)), "rem")