'What do these strange values of padding mean in Microsoft's Fluent-react library?

In this link, the section [Vertical Stack - Gap and Padding Sizes], click [Show code], then at lines 30, 34, 38, etc. I see some strange values of padding (and some of childrenGap) like 'm 40px', 's1', 's2', 'l1', and have no idea what they mean or where they are defined.

I tried to play around its code and not sure where to go next after the line 9 in this file.

Could someone please point me to their definition or document?

Thank you.



Solution 1:[1]

After a lot of digging, I found this in the Fluent source code. I'm not confident that's what's in play here, but circumstantial evidence points in that direction.

export const DefaultSpacing: ISpacing = {
  s2: '4px',
  s1: '8px',
  m: '16px',
  l1: '20px',
  l2: '32px',
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 divbyzero