@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
64 lines (63 loc) • 1.71 kB
JavaScript
/**
* An object of space keys and rem values (strings)
*
* Below is a table to show the equivalent values from `px` to `rem`.
* This is based on the default browser font size which is `16px`.
*
* | px Value | rem Value | space token |
* | --------- | --------- | ----------- |
* | 0 | 0 | zero |
* | 4px | 0.25rem | xxxs |
* | 8px | 0.5rem | xxs |
* | 12px | 0.75rem | xs |
* | 16px | 1rem | s |
* | 24px | 1.5rem | m |
* | 32px | 2rem | l |
* | 40px | 2.5rem | xl |
* | 64px | 4rem | xxl |
* | 80px | 5rem | xxxl |
*
* */
export const space = {
zero: '0',
xxxs: '0.25rem',
xxs: '0.5rem',
xs: '0.75rem',
s: '1rem',
m: '1.5rem',
l: '2rem',
xl: '2.5rem',
xxl: '4rem',
xxxl: '5rem',
};
/**
* Example using `space` with calc instead of deprecated `spaceNumbers`.
*
* ```tsx
* // With deprecated `spaceNumbers`
* {
* paddingLeft: spaceNumbers.xl + 2 // 42px
* }
* ```
*
* ```tsx
* // With `rem` based `space` tokens
* {
* padding: `calc(${space.xl} + 2px)` // 42px
* }
* ```
*
* @deprecated ⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
*/
export const spaceNumbers = {
zero: 0,
xxxs: 4,
xxs: 8,
xs: 12,
s: 16,
m: 24,
l: 32,
xl: 40,
xxl: 64,
xxxl: 80,
};