UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

64 lines (63 loc) 1.71 kB
/** * 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, };